/*!
 * SVMPForge — main.css
 * "Aurora" v3 design system for the Advanced Product Feed Pro store
 * (see wp-content/apf-docs/REDESIGN-V3.md + DESIGN-SPEC.md §1/§3).
 * Mobile-first. Breakpoints: 600 / 900 / 1200. Prefix: sf-. Tokens: --sf-*.
 *
 * INDEX
 *  01 Tokens            :root custom properties (colour, type, space, radii)
 *  02 Reset & base      box-sizing, body, media, links, focus, skip link
 *  03 Typography        .sf-eyebrow .sf-h1..h4 .sf-lead .sf-small .sf-mono
 *  04 Layout            .sf-container .sf-section .sf-grid .sf-stack .sf-cluster
 *  05 Prose             .sf-prose (post content + core block basics, alignwide)
 *  06 Buttons           .sf-btn --primary --secondary --ghost --on-dark --sm --lg
 *  07 Badges            .sf-badge --ok --warn --err --pro --free --neutral --info
 *  08 Cards             .sf-card --dark
 *  09 Window            .sf-window mockup chrome
 *  10 Tables            .sf-table .sf-table-wrap .sf-check .sf-dash
 *  11 Steps             .sf-steps
 *  12 Pipeline          .sf-pipeline nodes + animated connectors
 *  13 Channel tile      .sf-channel
 *  14 Pricing           .sf-pricing --featured
 *  15 FAQ               .sf-faq details/summary
 *  16 Notices           .sf-notice
 *  17 Forms             .sf-field .sf-input .sf-textarea .sf-select .sf-checkbox .sf-search
 *  18 Header            .sf-header sticky, .sf-nav dropdowns, mobile panel, announcement
 *  19 Footer            .sf-footer dark 4-col
 *  20 Blog              .sf-post-card .sf-post-grid .sf-meta .sf-single .sf-post-nav .sf-tags
 *  21 Pagination        .sf-pagination
 *  22 Comments          .sf-comments .sf-comment-form
 *  23 404 / search      .sf-404 .sf-link-list .sf-none
 *  24 Docs              .sf-docs sidebar + 760px column + anchored headings
 *  25 Utilities         .sf-reveal .sf-visually-hidden .sf-copy, misc helpers
 *  26 Motion            reduced-motion guard
 *  27 Front page        front-page.php sections + admin mockup internals
 */

/* ==========================================================================
   01 Tokens
   ========================================================================== */
:root {
	/* Colour — "Aurora" (REDESIGN-V3.md §1): electric indigo→violet + slate */
	--sf-ink: #0F172A;
	--sf-ink-2: #334155;
	--sf-muted: #5B6B84;          /* 5.41:1 on white, 5.17:1 on surface-2 */
	--sf-paper: #FAFAFF;          /* very light lavender, never pure white */
	--sf-surface: #FFFFFF;
	--sf-surface-2: #F1F4FF;   /* tinted band ground */
	--sf-line: #E2E8F0;
	--sf-line-strong: #CBD5E1;
	--sf-brand: #4F46E5;          /* white text 6.29:1 */
	--sf-brand-hover: #4338CA;
	--sf-brand-deep: #3730A3;     /* gradient start, pressed states */
	--sf-violet: #7C3AED;         /* gradient end, Pro accent */
	--sf-violet-bright: #8B5CF6; /* decorative only */
	--sf-blue: #4F8CFF;          /* decorative only */
	--sf-cyan: #22D3EE;          /* decorative only, lowest weight */
	--sf-surface-3: #EEF1FF;     /* deepest light tint */
	/* Ground scale — each step must be visibly distinct from its neighbours,
	   otherwise consecutive sections merge into one long band. */
	/* Real tonal steps. The previous values (#F6F7FF/#EFF2FF/#E8ECFF) sat 5-14
	   levels off white — imperceptible on a real screen, so a white card had
	   nothing to lift off. These are ~16/255 apart and read as distinct grounds. */
	--sf-ground-1: #EFF1FA;
	--sf-ground-2: #E6EAF7;
	--sf-ground-3: #DCE1F2;
	/* One elevation scale instead of nine ad-hoc box-shadow recipes. */
	--sf-e1: 0 1px 2px rgba(30, 27, 75, .06), 0 1px 3px rgba(30, 27, 75, .08);
	--sf-e2: 0 2px 4px rgba(30, 27, 75, .06), 0 8px 16px -6px rgba(30, 27, 75, .14);
	--sf-e3: 0 2px 6px rgba(30, 27, 75, .07), 0 18px 36px -12px rgba(30, 27, 75, .20);
	--sf-e4: 0 4px 10px rgba(30, 27, 75, .08), 0 36px 72px -24px rgba(30, 27, 75, .28);
	--sf-glass: rgba(255, 255, 255, .72);
	--sf-glass-line: rgba(255, 255, 255, .7);
	--sf-grad-brand: linear-gradient(135deg, #3730A3 0%, #4F46E5 45%, #7C3AED 100%);
	--sf-brand-tint: #EEF2FF;
	--sf-brand-ink: #3730A3;      /* on brand-tint: 8.88:1 */
	--sf-accent: #7C3AED;
	--sf-accent-tint: #F5F3FF;
	--sf-accent-ink: #5B21B6;     /* on accent-tint: 8.19:1 */
	--sf-dark: #0A0F1E;
	--sf-dark-2: #111834;
	--sf-dark-line: rgba(255, 255, 255, .09);
	--sf-dark-card: rgba(255, 255, 255, .045);
	--sf-on-dark: #E7EBF8;
	--sf-on-dark-muted: #9FACCC;  /* 8.41:1 on --sf-dark */
	--sf-on-dark-brand: #A5B4FC;  /* brand accents on dark: 9.58:1 */
	--sf-ok: #059669;
	--sf-ok-tint: #ECFDF5;
	--sf-ok-ink: #065F46;         /* text on --sf-ok-tint: 7.29:1 */
	--sf-warn: #B45309;
	--sf-warn-tint: #FFFBEB;
	--sf-warn-ink: #92400E;       /* text on --sf-warn-tint: 6.84:1 */
	--sf-err: #DC2626;
	--sf-err-tint: #FEF2F2;
	--sf-err-ink: #B91C1C;        /* text on --sf-err-tint: 5.91:1 */
	--sf-info: #4F46E5;
	--sf-info-tint: #EEF2FF;
	--sf-focus: #4F46E5;
	--sf-focus-ring: 0 0 0 4px rgba(79, 70, 229, .18);

	/* Channel identity dots (8–10px dots / thin borders only) */
	--sf-ch-google: #4285F4;
	--sf-ch-meta: #0866FF;
	--sf-ch-tiktok: #111111;
	--sf-ch-pinterest: #E60023;
	--sf-ch-snapchat: #8A7A00;
	--sf-ch-x: #111111;
	--sf-ch-bing: #008373;
	--sf-ch-amazon: #E47911;
	--sf-ch-merkandi: #E4002B;
	--sf-ch-vivino: #A61A2B;
	--sf-ch-openai: #10A37F;
	--sf-ch-custom: #5B6B84;

	/* Type */
	--sf-font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--sf-font-display: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
	--sf-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	--sf-text-display: clamp(2.5rem, 1.6rem + 3vw, 4rem);
	--sf-text-display-hero: clamp(2.6rem, 1.4rem + 2.8vw, 3.75rem);
	--sf-text-h1: clamp(2.1rem, 1.5rem + 2vw, 3rem);
	--sf-text-h2: clamp(2rem, 1.5rem + 1.9vw, 3.25rem);
	--sf-text-h3: 1.25rem;
	--sf-text-h4: 1.05rem;
	--sf-text-lead: 1.2rem;
	--sf-text-body: 1rem;
	--sf-text-small: 0.875rem;
	--sf-text-eyebrow: 0.75rem;

	/* Space: 4 8 12 16 24 32 48 64 96 128 */
	--sf-space-1: 4px;
	--sf-space-2: 8px;
	--sf-space-3: 12px;
	--sf-space-4: 16px;
	--sf-space-5: 24px;
	--sf-space-6: 32px;
	--sf-space-7: 48px;
	--sf-space-8: 64px;
	--sf-space-9: 96px;
	--sf-space-10: 128px;
	--sf-section-pad: var(--sf-space-6);       /* 32 mobile → 48 tablet → 64 desktop */
	--sf-gutter: var(--sf-space-4);            /* 16 < 600px, 24 above */
	--sf-max: 1200px;
	--sf-prose-max: 72ch;
	--sf-docs-max: 760px;

	/* Radii, borders, shadows */
	--sf-r-sm: 8px;
	--sf-r: 12px;
	--sf-r-lg: 20px;
	--sf-r-xl: 24px;
	--sf-border: 1px solid var(--sf-line);
	--sf-shadow-card: var(--sf-e3);
	--sf-shadow-window: var(--sf-e4);
	--sf-glow-btn: 0 8px 20px -8px rgba(79, 70, 229, .55);
	--sf-header-h: 72px;
	--sf-ease: cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 600px) {
	:root { --sf-gutter: var(--sf-space-5); --sf-section-pad: 48px; }
}
@media (min-width: 900px) {
	:root { --sf-section-pad: 64px; }
}

/* ==========================================================================
   02 Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--sf-header-h) + 16px); }
html.sf-scroll-lock, html.sf-scroll-lock body { overflow: hidden; }
body {
	margin: 0;
	font-family: var(--sf-font-sans);
	font-size: var(--sf-text-body);
	line-height: 1.6;
	color: var(--sf-ink);
	background: var(--sf-paper);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-wrap: anywhere; /* long feed URLs never overflow the viewport */
}
.sf-site { display: flex; flex-direction: column; min-height: 100vh; overflow-x: clip; }
.sf-main { flex: 1 0 auto; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--sf-font-display); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; overflow-wrap: normal; }
p, ul, ol, dl, figure, blockquote, pre, table { margin: 0; }
img, svg, video { display: block; max-width: 100%; height: auto; }
svg { max-width: none; }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: var(--sf-brand); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--sf-brand-hover); }
hr { border: 0; border-top: var(--sf-border); margin: var(--sf-space-6) 0; }
code, kbd, pre, samp { font-family: var(--sf-font-mono); font-size: 0.9em; }
::selection { background: var(--sf-brand-tint); color: var(--sf-brand-ink); }

/* Focus: visible ring everywhere, only for keyboard where supported */
:focus { outline: 2px solid var(--sf-focus); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--sf-focus); outline-offset: 2px; border-radius: 2px; }
.sf-section--dark :focus-visible, .sf-footer :focus-visible, .sf-header :focus-visible, .sf-cta-band :focus-visible { outline-color: var(--sf-on-dark-brand); }

/* Skip link */
.sf-skip-link {
	position: absolute; inset-inline-start: var(--sf-space-4); top: -100px; z-index: 1000;
	padding: 10px 16px; background: var(--sf-brand); color: #fff; border-radius: var(--sf-r-sm);
	font-weight: 600; text-decoration: none;
}
.sf-skip-link:focus { top: var(--sf-space-4); outline-color: var(--sf-ink); color: #fff; }

/* Screen-reader-only */
.screen-reader-text, .sf-visually-hidden {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
	position: absolute !important; inset-inline-start: 8px; top: 8px; width: auto; height: auto; padding: 10px 16px; margin: 0;
	clip: auto; clip-path: none; background: var(--sf-surface); color: var(--sf-brand); z-index: 1000; border-radius: var(--sf-r-sm);
}

/* ==========================================================================
   03 Typography
   ========================================================================== */
.sf-eyebrow {
	font-family: var(--sf-font-mono); font-size: var(--sf-text-eyebrow); font-weight: 500; line-height: 1;
	letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-brand);
	margin: 0 0 var(--sf-space-3);
}
.sf-eyebrow[data-num]::before { content: attr(data-num); margin-inline-end: 12px; color: var(--sf-muted); }
.sf-section--dark .sf-eyebrow, .sf-card--dark .sf-eyebrow { color: var(--sf-on-dark-brand); }
.sf-section--dark .sf-eyebrow[data-num]::before, .sf-card--dark .sf-eyebrow[data-num]::before { color: var(--sf-on-dark-muted); }
.sf-display { font-family: var(--sf-font-display); font-size: var(--sf-text-display); line-height: 1.05; font-weight: 700; letter-spacing: -0.03em; }
.sf-h1 { font-family: var(--sf-font-display); font-size: var(--sf-text-h1); line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; }
.sf-h2 { font-family: var(--sf-font-display); font-size: var(--sf-text-h2); line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; }
.sf-h3 { font-family: var(--sf-font-display); font-size: var(--sf-text-h3); line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.sf-h4 { font-family: var(--sf-font-display); font-size: var(--sf-text-h4); line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; }
.sf-lead { font-size: var(--sf-text-lead); line-height: 1.55; font-weight: 400; color: var(--sf-ink-2); max-width: 62ch; }
.sf-small { font-size: var(--sf-text-small); line-height: 1.5; }
.sf-muted { color: var(--sf-muted); }
.sf-mono { font-family: var(--sf-font-mono); font-size: 0.9375em; }
.sf-num { font-family: var(--sf-font-mono); font-variant-numeric: tabular-nums; }
.sf-h1 + .sf-lead, .sf-h2 + .sf-lead, .sf-display + .sf-lead { margin-top: var(--sf-space-4); }
.sf-section--dark, .sf-card--dark { color: var(--sf-on-dark); }
.sf-section--dark .sf-lead, .sf-card--dark .sf-lead, .sf-section--dark .sf-muted, .sf-card--dark .sf-muted { color: var(--sf-on-dark-muted); }
.sf-section--dark a:not(.sf-btn), .sf-card--dark a:not(.sf-btn) { color: var(--sf-on-dark); }

/* Page header block (title area used by page.php, archives, templates) */
.sf-page-header { max-width: 72ch; margin-bottom: var(--sf-space-5); }
.sf-page-header .sf-lead { margin-top: var(--sf-space-3); }
.sf-page-header__search { margin-top: var(--sf-space-4); max-width: 560px; }
.sf-page-header__actions { display: flex; flex-wrap: wrap; gap: var(--sf-space-3); margin-top: var(--sf-space-4); }
@media (min-width: 900px) { .sf-page-header { margin-bottom: var(--sf-space-5); } }

/* ==========================================================================
   04 Layout
   ========================================================================== */
.sf-container { width: 100%; max-width: calc(var(--sf-max) + 2 * var(--sf-gutter)); margin-inline: auto; padding-inline: var(--sf-gutter); }
.sf-container--narrow { max-width: calc(var(--sf-prose-max) + 2 * var(--sf-gutter)); }
.sf-container--docs { max-width: calc(var(--sf-docs-max) + 2 * var(--sf-gutter)); }
.sf-section { padding-block: var(--sf-section-pad); }
.sf-section--tight { padding-block: var(--sf-space-7); }
.sf-section--flush { padding-top: 0; }
.sf-section--dark { position: relative; isolation: isolate; background: var(--sf-dark); color: var(--sf-on-dark); }
/* Aurora glow: decorative only, kept away from body-text blocks (low alpha, edges) */
.sf-section--dark::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: var(--sf-atmos-bg,
		radial-gradient(600px 400px at 20% 0%, rgba(99, 102, 241, .20), transparent 70%),
		radial-gradient(700px 480px at 80% 10%, rgba(124, 58, 237, .16), transparent 70%),
		radial-gradient(500px 360px at 60% 100%, rgba(34, 211, 238, .07), transparent 70%));
}
/* Tinted band. This used --sf-surface (#fff), identical to the page
   background, so the intended light/tinted alternation never showed and the
   page read as one flat white sheet. */
.sf-section--surface { position: relative; background: var(--sf-ground-1); border-top: var(--sf-border); border-bottom: var(--sf-border); }
/* A whisper of brand at the top edge, so a tinted band has a direction of
   travel rather than sitting there as a grey rectangle. */
.sf-section--surface::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 340px;
	background: var(--sf-atmos-bg,
		radial-gradient(720px 300px at 22% 0%, rgba(79, 70, 229, .07), transparent 70%));
	pointer-events: none;
	z-index: 0;
}
.sf-section--surface > * { position: relative; z-index: 1; }
.sf-section__head { max-width: 72ch; margin-bottom: var(--sf-space-6); }
@media (min-width: 900px) { .sf-section__head { margin-bottom: var(--sf-space-7); } }
.sf-section__head--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sf-space-4); max-width: none; }

/* Grids: default 1 col → 2 at 600 → N at 900 */
.sf-grid { display: grid; gap: var(--sf-space-4); grid-template-columns: 1fr; }
@media (min-width: 600px) { .sf-grid { gap: var(--sf-space-5); grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
	.sf-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sf-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.sf-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sf-grid--split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sf-space-8); align-items: center; }
	.sf-grid--split-reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sf-space-8); align-items: center; }
}
@media (min-width: 1200px) { .sf-grid { gap: var(--sf-space-6); } .sf-grid--split, .sf-grid--split-reverse { gap: var(--sf-space-9); } }
.sf-stack > * + * { margin-top: var(--sf-space-4); }
.sf-stack--lg > * + * { margin-top: var(--sf-space-6); }
.sf-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-space-3); }
.sf-cluster--between { justify-content: space-between; }

/* Mono fact list under CTAs ("Free: 3 feeds · Google + Meta") */
.sf-facts { display: flex; flex-wrap: wrap; gap: var(--sf-space-2) var(--sf-space-5); list-style: none; padding: 0; margin: var(--sf-space-5) 0 0; font-family: var(--sf-font-mono); font-size: 0.8125rem; color: var(--sf-muted); }
.sf-facts li { display: flex; align-items: center; gap: 8px; }
.sf-facts li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sf-brand); flex: none; }
.sf-section--dark .sf-facts { color: var(--sf-on-dark-muted); }

/* ==========================================================================
   05 Prose — WordPress content + core block basics
   ========================================================================== */
.sf-prose { max-width: var(--sf-prose-max); font-size: 1.0625rem; line-height: 1.65; color: var(--sf-ink-2); }
.sf-prose--wide { max-width: none; }
.sf-prose > * + * { margin-top: 1.1em; }
.sf-prose h1, .sf-prose h2, .sf-prose h3, .sf-prose h4, .sf-prose h5, .sf-prose h6 { color: var(--sf-ink); letter-spacing: -0.01em; }
.sf-prose h2 { font-size: var(--sf-text-h2); line-height: 1.15; letter-spacing: -0.015em; margin-top: 2em; }
.sf-prose h3 { font-size: var(--sf-text-h3); margin-top: 1.7em; }
.sf-prose h4 { font-size: var(--sf-text-h4); margin-top: 1.5em; }
.sf-prose h2 + *, .sf-prose h3 + *, .sf-prose h4 + * { margin-top: 0.6em; }
.sf-prose strong { color: var(--sf-ink); font-weight: 600; }
.sf-prose ul, .sf-prose ol { padding-inline-start: 1.4em; }
.sf-prose li + li { margin-top: 0.35em; }
.sf-prose li > ul, .sf-prose li > ol { margin-top: 0.35em; }
.sf-prose ul { list-style: disc; }
.sf-prose ol { list-style: decimal; }
.sf-prose code { background: var(--sf-surface-2); border: 1px solid var(--sf-line); border-radius: 4px; padding: 0.1em 0.35em; font-size: 0.875em; color: var(--sf-ink); }
.sf-prose pre { background: var(--sf-dark); color: var(--sf-on-dark); border-radius: var(--sf-r); padding: var(--sf-space-4) var(--sf-space-5); overflow-x: auto; font-size: 0.875rem; line-height: 1.6; }
.sf-prose pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }
.sf-prose blockquote { border-inline-start: 3px solid var(--sf-brand); padding: var(--sf-space-1) 0 var(--sf-space-1) var(--sf-space-5); color: var(--sf-ink-2); font-size: 1.0625rem; }
.sf-prose blockquote p + p { margin-top: 0.75em; }
.sf-prose blockquote cite { display: block; margin-top: 0.5em; font-style: normal; font-size: var(--sf-text-small); color: var(--sf-muted); }
.sf-prose img { border-radius: var(--sf-r); border: var(--sf-border); }
.sf-prose figure { margin-inline: 0; }
.sf-prose figcaption, .sf-prose .wp-element-caption { font-size: var(--sf-text-small); color: var(--sf-muted); margin-top: var(--sf-space-2); }
.sf-prose hr { margin: 2.5em 0; }
.sf-prose kbd { background: var(--sf-surface); border: 1px solid var(--sf-line-strong); border-bottom-width: 2px; border-radius: 4px; padding: 0.05em 0.4em; font-size: 0.8125em; }
.sf-prose dl dt { font-weight: 600; color: var(--sf-ink); }
.sf-prose dl dd { margin: 0.2em 0 0.8em; }
.sf-prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.sf-prose th, .sf-prose td { padding: 10px 12px; border-bottom: var(--sf-border); text-align: start; vertical-align: top; }
.sf-prose th { color: var(--sf-ink); font-weight: 600; border-bottom-color: var(--sf-line-strong); }
.sf-prose .sf-table-wrap > table { margin: 0; }
.sf-prose a { text-decoration-color: color-mix(in srgb, var(--sf-brand) 45%, transparent); }
.sf-prose a:hover { text-decoration-color: currentColor; }
/* Core blocks */
.sf-prose .wp-block-image, .sf-prose .wp-block-table, .sf-prose .wp-block-code, .sf-prose .wp-block-quote { margin-inline: 0; }
.sf-prose .wp-block-table table { margin: 0; }
.sf-prose .wp-block-table figcaption { text-align: start; }
.sf-prose .wp-block-code { background: var(--sf-dark); color: var(--sf-on-dark); border-radius: var(--sf-r); padding: var(--sf-space-4) var(--sf-space-5); }
.sf-prose .wp-block-code code { background: none; border: 0; color: inherit; padding: 0; }
.sf-prose .wp-block-quote { border-inline-start: 3px solid var(--sf-brand); padding-inline-start: var(--sf-space-5); }
.sf-prose .wp-block-button__link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: var(--sf-r); background: var(--sf-brand); color: #fff; font-weight: 600; text-decoration: none; }
.sf-prose .wp-block-button__link:hover { background: var(--sf-brand-hover); }
.sf-prose .wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--sf-space-3); }
.sf-prose .wp-block-columns { display: flex; flex-wrap: wrap; gap: var(--sf-space-5); }
.sf-prose .wp-block-column { flex: 1 1 260px; min-width: 0; }
.sf-prose .wp-block-separator { border-top: var(--sf-border); }
.sf-prose .wp-block-group.has-background { padding: var(--sf-space-5); border-radius: var(--sf-r); }
.sf-prose .wp-block-embed iframe, .sf-prose .wp-block-embed__wrapper iframe { max-width: 100%; }
.sf-prose .has-brand-background-color { background: var(--sf-brand); color: #fff; }
.sf-prose .has-brand-tint-background-color { background: var(--sf-brand-tint); }
.sf-prose .has-surface-2-background-color, .sf-prose .has-paper-background-color { background: var(--sf-surface-2); }
.sf-prose .has-brand-color { color: var(--sf-brand); }
.sf-prose .has-accent-color { color: var(--sf-accent); }
.sf-prose .has-muted-color { color: var(--sf-muted); }
.sf-prose .has-small-font-size { font-size: var(--sf-text-small); }
.sf-prose .has-large-font-size { font-size: var(--sf-text-lead); }
/* alignwide / alignfull inside the narrow column */
.sf-prose .alignwide { max-width: var(--sf-max); width: calc(100vw - 2 * var(--sf-gutter)); position: relative; inset-inline-start: 50%; transform: translateX(-50%); }
[dir="rtl"] .sf-prose .alignwide { transform: translateX(50%); }
.sf-prose--wide .alignwide { width: auto; inset-inline-start: auto; transform: none; }
.sf-prose .alignfull { width: 100vw; max-width: none; position: relative; inset-inline-start: 50%; transform: translateX(-50%); }
[dir="rtl"] .sf-prose .alignfull { transform: translateX(50%); }
.sf-prose .alignleft { float: inline-start; margin: 0.3em var(--sf-space-5) var(--sf-space-4) 0; max-width: 50%; }
.sf-prose .alignright { float: inline-end; margin: 0.3em 0 var(--sf-space-4) var(--sf-space-5); max-width: 50%; }
.sf-prose .aligncenter { margin-inline: auto; text-align: center; }
.sf-prose::after { content: ""; display: table; clear: both; }
@media (min-width: 900px) { .sf-prose .alignwide { width: min(var(--sf-max), calc(100vw - 2 * var(--sf-gutter))); } }

/* ==========================================================================
   06 Buttons
   ========================================================================== */
.sf-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 44px; padding: 0 20px; border-radius: var(--sf-r); border: 1px solid transparent;
	font-family: var(--sf-font-sans); font-size: 0.9375rem; font-weight: 600; line-height: 1.2; text-decoration: none;
	white-space: nowrap; color: var(--sf-ink); background: transparent; cursor: pointer;
	transition: background-color .15s var(--sf-ease), border-color .15s var(--sf-ease), color .15s var(--sf-ease), box-shadow .18s var(--sf-ease), transform .18s var(--sf-ease), filter .18s var(--sf-ease);
}
.sf-btn .sf-icon { flex: none; }
.sf-btn--primary { background: var(--sf-brand); background-image: var(--sf-grad-brand); border-color: transparent; color: #fff; box-shadow: var(--sf-glow-btn); }
.sf-btn--primary:hover { color: #fff; filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 10px 24px -8px rgba(79, 70, 229, .6); }
.sf-btn--primary:active { color: #fff; filter: brightness(.98); transform: none; box-shadow: var(--sf-glow-btn); }
.sf-btn--secondary { background: var(--sf-surface); border-color: var(--sf-line-strong); color: var(--sf-ink); }
.sf-btn--secondary:hover { border-color: var(--sf-brand); background: var(--sf-brand-tint); color: var(--sf-brand-ink); }
.sf-btn--ghost { background: transparent; color: var(--sf-brand); padding-inline: 12px; }
.sf-btn--ghost:hover { background: var(--sf-brand-tint); color: var(--sf-brand-ink); }
.sf-btn--on-dark { background: #fff; border-color: #fff; color: var(--sf-ink); }
.sf-btn--on-dark:hover { background: #fff; border-color: #fff; color: var(--sf-brand-ink); transform: translateY(-1px); }
.sf-btn--outline-dark { background: transparent; border-color: var(--sf-dark-line); color: var(--sf-on-dark); }
.sf-btn--outline-dark:hover { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .1); color: #fff; }
.sf-btn--sm { min-height: 36px; padding: 0 14px; font-size: 0.875rem; border-radius: 8px; }
.sf-btn--lg { min-height: 52px; padding: 0 26px; font-size: 1.0625rem; }
.sf-btn--block { display: flex; width: 100%; }
.sf-btn[disabled], .sf-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.sf-btn .sf-icon--arrow-right { transition: transform .15s var(--sf-ease); }
.sf-btn:hover .sf-icon--arrow-right { transform: translateX(2px); }
[dir="rtl"] .sf-btn .sf-icon--arrow-right, [dir="rtl"] .sf-btn .sf-icon--arrow-left, [dir="rtl"] .sf-icon--chevron-right { transform: scaleX(-1); }
.sf-btn-group { display: flex; flex-wrap: wrap; gap: var(--sf-space-3); align-items: center; }

/* ==========================================================================
   07 Badges
   ========================================================================== */
.sf-badge {
	display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding: 2px 9px; border-radius: 999px;
	font-family: var(--sf-font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.2;
	background: var(--sf-surface-2); color: var(--sf-ink-2); border: 1px solid transparent; white-space: nowrap; vertical-align: middle;
}
.sf-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.sf-badge--neutral { background: var(--sf-surface-2); color: var(--sf-ink-2); }
.sf-badge--ok { background: var(--sf-ok-tint); color: var(--sf-ok-ink); }
.sf-badge--warn { background: var(--sf-warn-tint); color: var(--sf-warn-ink); }
.sf-badge--err { background: var(--sf-err-tint); color: var(--sf-err-ink); }
.sf-badge--info { background: var(--sf-info-tint); color: var(--sf-brand-ink); }
.sf-badge--pro { background: var(--sf-accent-tint); color: var(--sf-accent-ink); }
.sf-badge--free { background: var(--sf-brand-tint); color: var(--sf-brand-ink); }
.sf-badge--plain::before { display: none; }
.sf-section--dark .sf-badge--neutral, .sf-card--dark .sf-badge--neutral { background: rgba(255, 255, 255, .1); color: var(--sf-on-dark); }

/* ==========================================================================
   08 Cards
   ========================================================================== */
.sf-card { background: var(--sf-surface); border: var(--sf-border); border-radius: var(--sf-r-lg); padding: var(--sf-space-5); box-shadow: var(--sf-shadow-card); }
.sf-card--dark { background: var(--sf-dark-2); border-color: var(--sf-dark-line); color: var(--sf-on-dark); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
/* Inside dark/aurora contexts the dark card becomes a glass stat card */
.sf-section--dark .sf-card--dark, .sf-cta-band .sf-card--dark, .sf-footer .sf-card--dark, .sf-sg__dark .sf-card--dark { background: var(--sf-dark-card); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.sf-card--tint { background: var(--sf-brand-tint); border-color: transparent; }
.sf-card--paper { background: var(--sf-paper); }
.sf-card--flush { padding: 0; overflow: hidden; }
.sf-card__eyebrow { margin-bottom: var(--sf-space-3); }
.sf-card__title { font-size: var(--sf-text-h4); line-height: 1.35; }
.sf-card__title + p, .sf-card__title + ul { margin-top: var(--sf-space-2); }
.sf-card p { color: var(--sf-ink-2); }
.sf-card--dark p { color: var(--sf-on-dark-muted); }
.sf-card__list { list-style: none; padding: 0; margin: var(--sf-space-3) 0 0; font-size: var(--sf-text-small); color: var(--sf-ink-2); }
.sf-card__list li { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; }
.sf-card__list li::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--sf-brand); margin-top: 0.55em; }
.sf-card--dark .sf-card__list { color: var(--sf-on-dark-muted); }
.sf-card--dark .sf-card__list li::before { background: var(--sf-on-dark-muted); }
.sf-card__footer { margin-top: var(--sf-space-4); padding-top: var(--sf-space-4); border-top: var(--sf-border); }
.sf-card--dark .sf-card__footer { border-top-color: var(--sf-dark-line); }
a.sf-card { display: block; text-decoration: none; color: inherit; transition: border-color .18s var(--sf-ease), transform .18s var(--sf-ease), box-shadow .18s var(--sf-ease); }
a.sf-card:hover { border-color: var(--sf-line-strong); color: inherit; transform: translateY(-2px); box-shadow: 0 2px 4px rgba(15, 23, 42, .05), 0 14px 32px -12px rgba(15, 23, 42, .18); }

/* Fact strip: numbers with mono labels (home "what it does") */
.sf-fact { padding: var(--sf-space-4) 0; border-top: var(--sf-border); }
.sf-fact__value { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sf-fact__label { margin-top: 6px; font-family: var(--sf-font-mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--sf-muted); }
.sf-section--dark .sf-fact { border-top-color: var(--sf-dark-line); }
.sf-section--dark .sf-fact__label { color: var(--sf-on-dark-muted); }

/* ==========================================================================
   09 Window — admin mockup chrome
   ========================================================================== */
.sf-window { background: var(--sf-surface); border: var(--sf-border); border-radius: var(--sf-r-xl); box-shadow: var(--sf-shadow-window); overflow: hidden; }
.sf-window__bar { display: grid; grid-template-columns: 60px minmax(0, 1fr) 60px; align-items: center; height: 36px; padding: 0 12px; border-bottom: var(--sf-border); background: var(--sf-surface-2); }
.sf-window__dots { display: flex; gap: 6px; }
.sf-window__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--sf-line-strong); }
.sf-window__title { justify-self: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--sf-font-mono); font-size: 0.75rem; color: var(--sf-muted); }
.sf-window__body { padding: var(--sf-space-4); font-size: 0.8125rem; line-height: 1.45; color: var(--sf-ink-2); }
.sf-window .sf-window__body--flush { padding: 0; }
.sf-window--sm .sf-window__body { font-size: 0.75rem; }
@media (min-width: 600px) { .sf-window__body { padding: var(--sf-space-5); } }
/* Glass variant in dark sections: translucent chrome ring, real (light) app inside */
.sf-section--dark .sf-window, .sf-card--dark .sf-window, .sf-sg__dark .sf-window {
	background: var(--sf-dark-card);
	border: 1px solid var(--sf-dark-line);
	box-shadow: var(--sf-shadow-window), inset 0 1px 0 rgba(255, 255, 255, .06);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.sf-section--dark .sf-window__bar, .sf-card--dark .sf-window__bar, .sf-sg__dark .sf-window__bar { background: rgba(255, 255, 255, .04); border-bottom-color: var(--sf-dark-line); }
.sf-section--dark .sf-window__dots i, .sf-card--dark .sf-window__dots i, .sf-sg__dark .sf-window__dots i { background: rgba(255, 255, 255, .28); }
.sf-section--dark .sf-window__title, .sf-card--dark .sf-window__title, .sf-sg__dark .sf-window__title { color: var(--sf-on-dark-muted); }
.sf-section--dark .sf-window__body, .sf-card--dark .sf-window__body, .sf-sg__dark .sf-window__body { background: var(--sf-surface); }
/* Mock admin bits used inside windows (matches the real v3 plugin admin) */
.sf-window .sf-adminbar { display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: var(--sf-brand); background-image: linear-gradient(120deg, #312E81 0%, #4F46E5 55%, #7C3AED 100%); color: #fff; border-radius: var(--sf-r-sm); font-size: 0.75rem; }
.sf-window .sf-adminbar__brand { font-weight: 600; margin-inline-end: 6px; }
.sf-window .sf-adminbar__brand small { display: block; font-size: 0.5625rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: .8; font-weight: 500; }
.sf-window .sf-adminbar__tabs { display: flex; gap: 4px; overflow: hidden; }
.sf-window .sf-adminbar__tabs span { padding: 4px 10px; border-radius: 6px; white-space: nowrap; }
.sf-window .sf-adminbar__tabs .is-active { background: #fff; color: var(--sf-brand); font-weight: 600; }
.sf-window .sf-mock-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
.sf-window .sf-mock-table th { text-align: start; font-family: var(--sf-font-mono); font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-muted); padding: 8px 10px; border-bottom: 1px solid var(--sf-line-strong); font-weight: 500; }
.sf-window .sf-mock-table td { padding: 10px; border-bottom: var(--sf-border); vertical-align: middle; white-space: nowrap; }
.sf-window .sf-mock-table tr:last-child td { border-bottom: 0; }
.sf-window .sf-mock-table strong { color: var(--sf-ink); font-weight: 600; }
.sf-window .sf-progress { height: 8px; border-radius: 999px; background: var(--sf-brand-tint); overflow: hidden; }
.sf-window .sf-progress__bar { height: 100%; width: var(--sf-progress, 43%); background: var(--sf-brand); background-image: var(--sf-grad-brand); border-radius: inherit; }
.sf-window .sf-mock-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 10px; align-items: center; padding: 8px 0; border-bottom: var(--sf-border); }
.sf-window .sf-mock-row:last-child { border-bottom: 0; }
.sf-window .sf-mock-select { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; padding: 0 10px; border: 1px solid var(--sf-line-strong); border-radius: var(--sf-r-sm); background: var(--sf-surface); color: var(--sf-ink); font-size: 0.75rem; white-space: nowrap; overflow: hidden; }
.sf-window .sf-mock-select::after { content: ""; width: 6px; height: 6px; border-inline-end: 1.5px solid var(--sf-muted); border-bottom: 1.5px solid var(--sf-muted); transform: rotate(45deg); flex: none; margin-top: -3px; }
.sf-window .sf-mock-url { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--sf-line-strong); border-radius: var(--sf-r-sm); background: var(--sf-surface-2); font-family: var(--sf-font-mono); font-size: 0.75rem; color: var(--sf-ink); min-width: 0; }
.sf-window .sf-mock-url code { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: inherit; }
.sf-window .sf-health { list-style: none; margin: 0; padding: 0; }
.sf-window .sf-health li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: var(--sf-border); }
.sf-window .sf-health li:last-child { border-bottom: 0; }
.sf-window .sf-chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--sf-line-strong); font-size: 0.6875rem; background: var(--sf-surface); }
.sf-window .sf-chip--suggested { border-color: var(--sf-brand); color: var(--sf-brand-ink); background: var(--sf-brand-tint); }

/* ==========================================================================
   10 Tables — comparison / data tables
   ========================================================================== */
.sf-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: var(--sf-border); border-radius: var(--sf-r); background: var(--sf-surface); }
.sf-table-wrap > table { margin: 0; min-width: 560px; }
.sf-table-wrap--bare { border: 0; border-radius: 0; background: transparent; }
.sf-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.9375rem; background: var(--sf-surface); }
.sf-table th, .sf-table td { padding: 12px 16px; text-align: start; vertical-align: middle; border-bottom: var(--sf-border); color: var(--sf-ink-2); }
.sf-table th { font-weight: 600; color: var(--sf-ink); }
.sf-table thead th { position: sticky; top: 0; z-index: 2; background: var(--sf-surface); border-bottom: 1px solid var(--sf-line-strong); font-family: var(--sf-font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-muted); font-weight: 500; padding-block: 10px; }
.sf-table tbody tr:last-child td, .sf-table tbody tr:last-child th { border-bottom: 0; }
.sf-table td:not(:first-child), .sf-table th:not(:first-child) { text-align: center; }
.sf-table td.sf-table__start { text-align: start; }
.sf-table td.sf-num, .sf-table th.sf-num { text-align: end; font-family: var(--sf-font-mono); font-variant-numeric: tabular-nums; }
.sf-table__group th, .sf-table__group td { background: var(--sf-surface-2); color: var(--sf-brand-ink); font-weight: 600; font-size: 0.875rem; padding-block: 10px; text-align: start; border-bottom-color: var(--sf-line-strong); }
.sf-table__label { color: var(--sf-ink); }
.sf-table tbody th { font-weight: 400; color: var(--sf-ink-2); }
.sf-table tbody tr:hover td, .sf-table tbody tr:hover th { background: color-mix(in srgb, var(--sf-brand-tint) 32%, var(--sf-surface)); }
.sf-table tbody tr.sf-table__group:hover td, .sf-table tbody tr.sf-table__group:hover th { background: var(--sf-surface-2); }
.sf-table--tight th, .sf-table--tight td { padding: 8px 12px; font-size: 0.875rem; }
.sf-table__col-free, .sf-table__col-pro { width: 22%; min-width: 110px; }
.sf-table thead .sf-table__col-pro { color: var(--sf-accent-ink); }
.sf-table .sf-cell-text { font-size: 0.875rem; color: var(--sf-ink); }
@media (min-width: 900px) { .sf-table thead th { top: var(--sf-header-h); } }
/* Sticky header only when the table sits directly on the page (not inside a scroll wrapper) */
.sf-table-wrap .sf-table thead th { position: static; }
.sf-table-wrap--sticky { overflow: visible; }
.sf-table-wrap--sticky .sf-table thead th { position: sticky; }
.sf-check, .sf-dash { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; vertical-align: middle; }
.sf-check { color: var(--sf-brand); }
.sf-dash { color: var(--sf-line-strong); }
.sf-check--ok { color: var(--sf-ok); }
.sf-check svg, .sf-dash svg { width: 18px; height: 18px; }

/* ==========================================================================
   11 Steps — numbered list
   ========================================================================== */
.sf-steps { list-style: none; counter-reset: sf-step; margin: 0; padding: 0; }
.sf-steps__item { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--sf-space-4); padding-block: var(--sf-space-4); counter-increment: sf-step; }
.sf-steps__item + .sf-steps__item { border-top: var(--sf-border); }
.sf-steps__num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--sf-line-strong); font-family: var(--sf-font-mono); font-size: 0.75rem; font-weight: 500; color: var(--sf-ink); background: var(--sf-surface); }
.sf-steps__num:empty::before { content: counter(sf-step, decimal-leading-zero); }
.sf-steps__item.is-active .sf-steps__num { background: var(--sf-brand); border-color: var(--sf-brand); color: #fff; }
.sf-steps__title { font-size: var(--sf-text-h4); font-weight: 600; line-height: 1.35; margin-top: 3px; }
.sf-steps__text { margin-top: 4px; color: var(--sf-ink-2); font-size: 0.9375rem; }
.sf-steps--horizontal { display: grid; gap: var(--sf-space-4); }
.sf-steps--horizontal .sf-steps__item { grid-template-columns: 1fr; padding: var(--sf-space-5); border: var(--sf-border) !important; border-radius: var(--sf-r); background: var(--sf-surface); }
.sf-steps--horizontal .sf-steps__num { margin-bottom: var(--sf-space-3); }
@media (min-width: 900px) { .sf-steps--horizontal { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sf-space-5); } }
.sf-section--dark .sf-steps__item + .sf-steps__item { border-top-color: var(--sf-dark-line); }
.sf-section--dark .sf-steps__num { background: var(--sf-dark-2); border-color: var(--sf-dark-line); color: var(--sf-on-dark); }
.sf-section--dark .sf-steps__text { color: var(--sf-on-dark-muted); }

/* ==========================================================================
   12 Pipeline — data flow diagram (WooCommerce → Filters → Mapping → Writer → Feed URL → Channels)
   Nodes are cards; connectors are dashed lines with a drifting dash offset.
   Layout: vertical on mobile (connector below each node), 5 columns at ≥ 900.
   ========================================================================== */
.sf-pipeline { display: grid; grid-template-columns: 1fr; gap: 0; position: relative; }
.sf-pipeline__node { position: relative; background: var(--sf-surface); border: var(--sf-border); border-radius: var(--sf-r); padding: var(--sf-space-4); min-width: 0; }
.sf-pipeline__node--source { border-color: var(--sf-line-strong); }
.sf-pipeline__node--out { background: var(--sf-brand-tint); border-color: transparent; }
.sf-pipeline__label { display: flex; align-items: center; gap: 8px; font-family: var(--sf-font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-muted); font-weight: 500; }
.sf-pipeline__label::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--sf-brand); flex: none; }
.sf-pipeline__node--source .sf-pipeline__label::before { background: var(--sf-ink-2); }
.sf-pipeline__title { font-weight: 600; font-size: 1rem; margin-top: 8px; color: var(--sf-ink); overflow-wrap: normal; }
@media (min-width: 900px) and (max-width: 1199px) { .sf-pipeline__title { font-size: 0.9375rem; } }
.sf-pipeline__list { list-style: none; margin: 8px 0 0; padding: 0; font-size: 0.8125rem; color: var(--sf-ink-2); line-height: 1.45; }
.sf-pipeline__list li { padding: 3px 0; }
.sf-pipeline__list li + li { border-top: 1px dashed var(--sf-line); }
.sf-pipeline__list .sf-badge { margin-inline-start: 4px; }
.sf-pipeline__link { display: flex; align-items: center; justify-content: center; height: 40px; position: relative; }
.sf-pipeline__link svg { width: 100%; height: 100%; display: block; overflow: visible; }
.sf-pipeline__line { fill: none; stroke: var(--sf-line-strong); stroke-width: 1.5; stroke-dasharray: 5 5; }
.sf-pipeline__link::after { content: ""; position: absolute; width: 7px; height: 7px; border-inline-end: 1.5px solid var(--sf-line-strong); border-bottom: 1.5px solid var(--sf-line-strong); transform: rotate(45deg); bottom: 6px; inset-inline-start: calc(50% - 4px); }
.sf-pipeline__link--h { display: none; }
.sf-pipeline__channels { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sf-pipeline__channels span { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 999px; background: var(--sf-surface); border: var(--sf-border); font-size: 0.75rem; color: var(--sf-ink); }
.sf-pipeline__channels span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sf-dot, var(--sf-muted)); }
.sf-section--dark .sf-pipeline__node { background: var(--sf-dark-2); border-color: var(--sf-dark-line); }
.sf-section--dark .sf-pipeline__title { color: var(--sf-on-dark); }
.sf-section--dark .sf-pipeline__list, .sf-section--dark .sf-pipeline__label { color: var(--sf-on-dark-muted); }
.sf-section--dark .sf-pipeline__list li + li { border-top-color: var(--sf-dark-line); }
.sf-section--dark .sf-pipeline__line { stroke: var(--sf-on-dark-muted); }
.sf-section--dark .sf-pipeline__link::after { border-color: var(--sf-on-dark-muted); }
.sf-section--dark .sf-pipeline__node--out { background: var(--sf-brand); border-color: var(--sf-brand); }
.sf-section--dark .sf-pipeline__node--out .sf-pipeline__label, .sf-section--dark .sf-pipeline__node--out .sf-pipeline__list { color: var(--sf-brand-tint); }
.sf-section--dark .sf-pipeline__node--out .sf-pipeline__label::before { background: #fff; }
.sf-section--dark .sf-pipeline__channels span { background: var(--sf-dark); border-color: var(--sf-dark-line); color: var(--sf-on-dark); }
@media (min-width: 600px) {
	.sf-pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-space-4); }
	.sf-pipeline__link { display: none; }
}
@media (min-width: 900px) {
	.sf-pipeline { grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1.05fr); gap: 0; align-items: stretch; }
	.sf-pipeline__link { display: none; }
	.sf-pipeline__link--h { display: flex; height: auto; width: 28px; align-items: center; }
	.sf-pipeline__link--h svg { height: 2px; }
	.sf-pipeline__link--h::after { bottom: auto; inset-inline-start: auto; inset-inline-end: 2px; top: calc(50% - 4px); transform: rotate(-45deg); }
	[dir="rtl"] .sf-pipeline__link--h::after { transform: rotate(135deg); }
}
@media (min-width: 1200px) {
	.sf-pipeline { grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) 40px minmax(0, 1fr) 40px minmax(0, 1fr) 40px minmax(0, 1.1fr); }
	.sf-pipeline__link--h { width: 40px; }
}
@keyframes sf-dash-drift { to { stroke-dashoffset: -20; } }
html.js .sf-pipeline__line { animation: sf-dash-drift 1.2s linear infinite; }

/* Batching strip (§5.3): 63 blocks filling left → right. Pure CSS. */
.sf-batches { display: grid; grid-template-columns: repeat(auto-fill, minmax(10px, 1fr)); gap: 3px; }
.sf-batches i { display: block; aspect-ratio: 1; border-radius: 2px; background: var(--sf-surface-2); border: 1px solid var(--sf-line); }
.sf-batches i.is-done { background: var(--sf-brand); border-color: var(--sf-brand); }
.sf-batches i.is-active { background: var(--sf-brand-tint); border-color: var(--sf-brand); }
.sf-batches__notes { display: flex; flex-wrap: wrap; gap: var(--sf-space-2) var(--sf-space-5); margin-top: var(--sf-space-3); font-family: var(--sf-font-mono); font-size: 0.75rem; color: var(--sf-muted); list-style: none; padding: 0; }
@media (min-width: 900px) { .sf-batches { grid-template-columns: repeat(63, minmax(0, 1fr)); } }

/* ==========================================================================
   13 Channel tile
   ========================================================================== */
.sf-channel { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: var(--sf-space-4); background: var(--sf-surface); border: var(--sf-border); border-radius: var(--sf-r); text-decoration: none; color: inherit; min-width: 0; box-shadow: var(--sf-shadow-card); transition: border-color .18s var(--sf-ease), transform .18s var(--sf-ease), box-shadow .18s var(--sf-ease); }
a.sf-channel:hover { border-color: var(--sf-line-strong); color: inherit; transform: translateY(-2px); box-shadow: 0 2px 4px rgba(15, 23, 42, .05), 0 14px 32px -12px rgba(15, 23, 42, .18); }
.sf-channel__dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; background: var(--sf-dot, var(--sf-muted)); flex: none; }
.sf-channel__text { display: block; min-width: 0; }
.sf-channel__name { display: block; font-weight: 600; color: var(--sf-ink); font-size: 0.9375rem; line-height: 1.35; }
.sf-channel__formats { display: block; margin-top: 4px; font-family: var(--sf-font-mono); font-size: 0.75rem; line-height: 1.4; color: var(--sf-muted); }
.sf-channel__family { display: block; margin-top: 2px; font-size: 0.75rem; line-height: 1.4; color: var(--sf-muted); }
.sf-channel__desc { display: block; margin-top: 6px; font-size: var(--sf-text-small); color: var(--sf-ink-2); }
.sf-channel__badge { margin-top: 2px; }
.sf-channel--google { --sf-dot: var(--sf-ch-google); }
.sf-channel--meta { --sf-dot: var(--sf-ch-meta); }
.sf-channel--tiktok { --sf-dot: var(--sf-ch-tiktok); }
.sf-channel--pinterest { --sf-dot: var(--sf-ch-pinterest); }
.sf-channel--snapchat { --sf-dot: var(--sf-ch-snapchat); }
.sf-channel--x { --sf-dot: var(--sf-ch-x); }
.sf-channel--bing { --sf-dot: var(--sf-ch-bing); }
.sf-channel--amazon { --sf-dot: var(--sf-ch-amazon); }
.sf-channel--merkandi { --sf-dot: var(--sf-ch-merkandi); }
.sf-channel--vivino { --sf-dot: var(--sf-ch-vivino); }
.sf-channel--openai { --sf-dot: var(--sf-ch-openai); }
.sf-channel--custom { --sf-dot: var(--sf-ch-custom); }
.sf-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--sf-dot, var(--sf-muted)); vertical-align: middle; margin-inline-end: 8px; }

/* ==========================================================================
   14 Pricing cards
   ========================================================================== */
.sf-pricing { display: grid; gap: var(--sf-space-4); grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 600px) { .sf-pricing { gap: var(--sf-space-5); } }
@media (min-width: 900px) { .sf-pricing { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sf-pricing__card { position: relative; display: flex; flex-direction: column; background: var(--sf-surface); border: var(--sf-border); border-radius: var(--sf-r-lg); padding: var(--sf-space-5); box-shadow: var(--sf-shadow-card); }
.sf-pricing__card--featured {
	border: 1px solid transparent;
	background: linear-gradient(var(--sf-surface), var(--sf-surface)) padding-box, var(--sf-grad-brand) border-box;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 16px 40px -16px rgba(79, 70, 229, .35);
}
.sf-pricing__flag { position: absolute; top: -12px; inset-inline-start: var(--sf-space-5); }
.sf-pricing__flag .sf-badge { background: var(--sf-brand); background-image: var(--sf-grad-brand); color: #fff; box-shadow: var(--sf-glow-btn); }
.sf-pricing__name { font-family: var(--sf-font-display); font-size: var(--sf-text-h4); font-weight: 600; }
.sf-pricing__seats { margin-top: 2px; font-family: var(--sf-font-mono); font-size: 0.75rem; color: var(--sf-muted); }
.sf-pricing__price { display: flex; align-items: baseline; gap: 6px; margin-top: var(--sf-space-4); }
.sf-pricing__amount { font-family: var(--sf-font-display); font-size: var(--sf-text-display); font-weight: 700; letter-spacing: -0.025em; line-height: 1; font-variant-numeric: tabular-nums; }
.sf-pricing__currency { font-size: 1.25rem; font-weight: 600; color: var(--sf-ink-2); }
.sf-pricing__period { font-size: var(--sf-text-small); color: var(--sf-muted); }
.sf-pricing__note { margin-top: 6px; font-size: var(--sf-text-small); color: var(--sf-muted); }
.sf-pricing__features { list-style: none; margin: var(--sf-space-5) 0 0; padding: var(--sf-space-4) 0 0; border-top: var(--sf-border); font-size: 0.9375rem; color: var(--sf-ink-2); flex: 1 0 auto; }
.sf-pricing__features li { display: flex; gap: 10px; align-items: flex-start; padding: 5px 0; }
.sf-pricing__features .sf-check { flex: none; margin-top: 2px; }
.sf-pricing__features .sf-dash { flex: none; margin-top: 2px; }
.sf-pricing__features li.is-muted { color: var(--sf-muted); }
.sf-pricing__cta { margin-top: auto; padding-top: var(--sf-space-5); }
.sf-pricing__cta .sf-btn { width: 100%; }
.sf-pricing__fine { margin-top: var(--sf-space-3); font-size: 0.75rem; color: var(--sf-muted); text-align: center; }

/* ==========================================================================
   15 FAQ — native <details>
   ========================================================================== */
.sf-faq { border-top: var(--sf-border); }
.sf-faq__item { border-bottom: var(--sf-border); }
.sf-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-space-4); padding: var(--sf-space-4) 0; cursor: pointer; font-weight: 600; font-size: 1.0625rem; line-height: 1.35; color: var(--sf-ink); list-style: none; }
.sf-faq__item summary::-webkit-details-marker { display: none; }
.sf-faq__item summary::after { content: ""; flex: none; width: 8px; height: 8px; border-inline-end: 2px solid var(--sf-muted); border-bottom: 2px solid var(--sf-muted); transform: rotate(45deg); margin-inline-end: 6px; transition: transform .2s var(--sf-ease); }
.sf-faq__item[open] summary::after { transform: rotate(-135deg); margin-top: 6px; }
.sf-faq__item summary:hover { color: var(--sf-brand); }
.sf-faq__body { padding: 0 0 var(--sf-space-5); color: var(--sf-ink-2); max-width: 68ch; }
.sf-faq__body > * + * { margin-top: 0.8em; }
.sf-faq__body a { color: var(--sf-brand); }
.sf-faq--cols { display: grid; gap: 0 var(--sf-space-8); }
@media (min-width: 900px) { .sf-faq--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 0; } .sf-faq--cols .sf-faq__item:nth-child(-n+2) { border-top: var(--sf-border); } }

/* ==========================================================================
   16 Notices
   ========================================================================== */
.sf-notice { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border: 1px solid var(--sf-line); border-inline-start-width: 3px; border-radius: var(--sf-r-sm); background: var(--sf-surface); color: var(--sf-ink-2); font-size: 0.9375rem; }
.sf-notice > * { margin: 0; }
.sf-notice a { color: inherit; font-weight: 600; }
.sf-notice__title { font-weight: 600; color: var(--sf-ink); display: block; }
.sf-notice--ok { border-color: var(--sf-ok); background: var(--sf-ok-tint); color: var(--sf-ok-ink); }
.sf-notice--warn { border-color: var(--sf-warn); background: var(--sf-warn-tint); color: var(--sf-warn-ink); }
.sf-notice--err { border-color: var(--sf-err); background: var(--sf-err-tint); color: var(--sf-err-ink); }
.sf-notice--info { border-color: var(--sf-info); background: var(--sf-info-tint); color: var(--sf-brand-ink); }
.sf-notice--ok .sf-notice__title, .sf-notice--warn .sf-notice__title, .sf-notice--err .sf-notice__title, .sf-notice--info .sf-notice__title { color: inherit; }
.sf-notice .sf-icon { flex: none; margin-top: 3px; }
.sf-notice ul { padding-inline-start: 1.2em; }
.sf-notice__actions { margin-inline-start: auto; flex: none; }
.sf-notice + .sf-notice { margin-top: var(--sf-space-3); }

/* ==========================================================================
   17 Forms
   ========================================================================== */
.sf-field { display: block; margin: 0 0 var(--sf-space-4); }
.sf-field > label, .sf-field__label { display: block; font-weight: 600; font-size: var(--sf-text-small); color: var(--sf-ink); margin-bottom: 6px; }
.sf-field__hint { display: block; margin-top: 6px; font-size: 0.8125rem; color: var(--sf-muted); }
.sf-field__error { display: block; margin-top: 6px; font-size: 0.8125rem; color: var(--sf-err); }
.sf-field.is-invalid .sf-input, .sf-field.is-invalid .sf-textarea, .sf-field.is-invalid .sf-select { border-color: var(--sf-err); }
.sf-field--optional > label::after, .sf-field__label--optional::after { content: " (optional)"; font-weight: 400; color: var(--sf-muted); }
.sf-input, .sf-textarea, .sf-select {
	display: block; width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid var(--sf-line-strong); border-radius: var(--sf-r-sm);
	background: var(--sf-surface); color: var(--sf-ink); font-size: 1rem; line-height: 1.4; appearance: none; -webkit-appearance: none;
	transition: border-color .15s var(--sf-ease), box-shadow .15s var(--sf-ease);
}
.sf-input::placeholder, .sf-textarea::placeholder { color: var(--sf-muted); opacity: 1; }
.sf-input:focus, .sf-textarea:focus, .sf-select:focus { outline: 2px solid var(--sf-focus); outline-offset: 2px; border-color: var(--sf-brand); box-shadow: var(--sf-focus-ring); }
.sf-input:disabled, .sf-textarea:disabled, .sf-select:disabled { background: var(--sf-surface-2); color: var(--sf-muted); cursor: not-allowed; }
.sf-input[readonly] { background: var(--sf-surface-2); }
.sf-input--mono { font-family: var(--sf-font-mono); font-size: 0.9375rem; }
.sf-textarea { min-height: 140px; resize: vertical; }
.sf-select { padding-inline-end: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B6B84' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
[dir="rtl"] .sf-select { background-position: left 12px center; }
.sf-checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9375rem; color: var(--sf-ink-2); cursor: pointer; font-weight: 400; }
.sf-checkbox input { appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin-top: 2px; border: 1px solid var(--sf-line-strong); border-radius: 5px; background: var(--sf-surface); display: grid; place-content: center; cursor: pointer; }
.sf-checkbox input::before { content: ""; width: 10px; height: 6px; border-inline-start: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.sf-checkbox input:checked { background: var(--sf-brand); border-color: var(--sf-brand); }
.sf-checkbox input:checked::before { opacity: 1; }
.sf-checkbox input[type="radio"], .sf-checkbox input[type="radio"]::before { border-radius: 50%; }
.sf-checkbox input[type="radio"]::before { width: 8px; height: 8px; border: 0; background: #fff; transform: none; }
.sf-form-row { display: grid; gap: 0 var(--sf-space-4); }
@media (min-width: 600px) { .sf-form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sf-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-space-3); margin-top: var(--sf-space-2); }
.sf-input-group { display: flex; gap: 8px; align-items: stretch; }
.sf-input-group .sf-input { flex: 1 1 auto; min-width: 0; }
/* Search form */
.sf-search { width: 100%; }
.sf-search__label { display: block; font-weight: 600; font-size: var(--sf-text-small); margin-bottom: 6px; }
.sf-search__row { display: flex; gap: 8px; }
.sf-search__input { flex: 1 1 auto; min-width: 0; }
.sf-search__submit { flex: none; }
@media (max-width: 599px) { .sf-search__submit span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .sf-search__submit { padding-inline: 14px; } }
/* Copy button feedback */
.sf-copy { font-family: var(--sf-font-sans); }
.sf-copy.is-copied { border-color: var(--sf-ok); color: var(--sf-ok-ink); background: var(--sf-ok-tint); }
.sf-copy.is-failed { border-color: var(--sf-warn); color: var(--sf-warn-ink); }
/* Key / URL display: mono value + copy button */
.sf-keybox { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 6px 6px 14px; border: 1px solid var(--sf-line-strong); border-radius: var(--sf-r-sm); background: var(--sf-surface); }
.sf-keybox code { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.875rem; color: var(--sf-ink); }
.sf-keybox .sf-btn { flex: none; }

/* ==========================================================================
   18 Header — sticky 72px, dark glass (aurora night) with blur; nav with
   dropdowns; mobile: burger → full-height dark panel (< 900px)
   ========================================================================== */
.sf-announce { background: var(--sf-dark-2); color: var(--sf-on-dark); font-size: var(--sf-text-small); border-bottom: 1px solid var(--sf-dark-line); }
.sf-announce__text { padding: 8px 0; text-align: center; }
.sf-announce a { color: #fff; font-weight: 600; }
.sf-header { position: sticky; top: 0; z-index: 100; isolation: isolate; background: rgba(255, 255, 255, .9); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid transparent; color: var(--sf-ink); }
.sf-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-space-4); min-height: var(--sf-header-h); }
.sf-header__brand { flex: none; display: flex; align-items: center; min-width: 0; }
.sf-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--sf-ink); text-decoration: none; font-family: var(--sf-font-display); font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.01em; line-height: 1; white-space: nowrap; }
.sf-logo:hover { color: var(--sf-brand); }
.sf-logo__mark { flex: none; color: var(--sf-brand); }
.sf-logo__img { max-height: 40px; width: auto; }
.sf-header__logo { color: var(--sf-ink); }
.sf-header__logo:hover { color: var(--sf-brand); }
.sf-header__logo .sf-logo__mark { color: var(--sf-brand); --sf-logo-fg: #fff; }
.sf-header__logo .sf-logo__text { overflow: hidden; text-overflow: ellipsis; max-width: 48vw; }
.sf-header__burger { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px; border-radius: var(--sf-r-sm); color: var(--sf-ink); font-weight: 600; font-size: 0.875rem; }
.sf-header__burger:hover { color: var(--sf-brand); background: var(--sf-brand-tint); }
.sf-header__burger > span { display: inline-flex; }
.sf-header__burger .sf-header__burger-close, .sf-header__burger[aria-expanded="true"] .sf-header__burger-open { display: none; }
.sf-header__burger[aria-expanded="true"] .sf-header__burger-close { display: inline-flex; }
/* Panel: hidden on mobile until open; matches the dark header */
.sf-header__panel { display: none; }
.sf-header__panel.is-open { display: flex; flex-direction: column; gap: var(--sf-space-5); position: fixed; top: var(--sf-header-h); left: 0; right: 0; bottom: auto; /* An explicit height, not bottom:0. The header sets backdrop-filter, which makes it a containing block for fixed descendants, so bottom:0 resolved to the header's own lower edge and collapsed this panel to ~89px. */ height: calc(100dvh - var(--sf-header-h)); max-height: calc(100vh - var(--sf-header-h)); z-index: 99; background: var(--sf-dark); padding: var(--sf-space-5) var(--sf-gutter) var(--sf-space-8); overflow-y: auto; border-top: 1px solid var(--sf-dark-line); }
.sf-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sf-nav__item { position: relative; border-bottom: 1px solid var(--sf-dark-line); }
.sf-nav__item.has-children { display: grid; grid-template-columns: minmax(0, 1fr) 44px; }
.sf-nav__item.has-children .sf-nav__sub { grid-column: 1 / -1; }
.sf-nav__link { display: flex; align-items: center; min-height: 48px; padding: 0 4px; color: var(--sf-ink-2); font-weight: 600; font-size: 1.0625rem; text-decoration: none; }
.sf-nav__link:hover, .sf-nav__item.is-current > .sf-nav__link { color: var(--sf-brand); }
.sf-nav__toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-height: 48px; color: var(--sf-muted); border-radius: var(--sf-r-sm); }
.sf-nav__toggle:hover { color: var(--sf-brand); background: var(--sf-brand-tint); }
.sf-nav__toggle .sf-icon { transition: transform .2s var(--sf-ease); }
.sf-nav__item.is-open > .sf-nav__toggle .sf-icon { transform: rotate(180deg); }
.sf-nav__sub { list-style: none; margin: 0; padding: 0 0 var(--sf-space-3); display: none; }
.sf-nav__item.is-open > .sf-nav__sub { display: block; }
.sf-nav__sublink { display: block; padding: 8px 4px 8px 16px; color: var(--sf-on-dark-muted); text-decoration: none; font-size: 0.9375rem; border-radius: var(--sf-r-sm); }
.sf-nav__sublink:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.sf-nav__desc { display: block; font-size: 0.8125rem; color: var(--sf-on-dark-muted); margin-top: 2px; }
.sf-nav__item--depth-1.is-current > .sf-nav__sublink { color: #fff; font-weight: 600; }
.sf-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-space-3); }
.sf-header__account, .sf-header__cart { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 8px; border-radius: var(--sf-r-sm); color: var(--sf-ink-2); text-decoration: none; font-size: 0.9375rem; font-weight: 500; }
.sf-header__account:hover, .sf-header__cart:hover { color: var(--sf-brand); background: var(--sf-brand-tint); }
.sf-header__cart { position: relative; }
.sf-header__cart-count { display: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--sf-brand); background-image: var(--sf-grad-brand); color: #fff; font-family: var(--sf-font-mono); font-size: 0.6875rem; line-height: 18px; text-align: center; }
.sf-header__cart-count.is-active { display: inline-block; }
@media (min-width: 900px) {
	.sf-header__burger { display: none; }
	.sf-header__panel, .sf-header__panel.is-open { display: flex; position: static; flex-direction: row; align-items: center; flex: 1 1 auto; gap: var(--sf-space-5); padding: 0; background: none; border: 0; overflow: visible; min-width: 0; }
	.sf-nav { flex: 1 1 auto; min-width: 0; margin-inline-start: var(--sf-space-4); }
	.sf-nav__list { flex-direction: row; align-items: center; gap: 2px; }
	.sf-nav__item { border-bottom: 0; }
	.sf-nav__item.has-children { display: flex; align-items: center; }
	.sf-nav__link { min-height: 40px; padding: 0 12px; font-size: 0.9375rem; border-radius: var(--sf-r-sm); white-space: nowrap; }
	.sf-nav__link:hover { background: var(--sf-brand-tint); }
	.sf-nav__item.has-children > .sf-nav__link { padding-inline-end: 6px; border-start-end-radius: 0; border-end-end-radius: 0; }
	.sf-nav__toggle { width: 28px; min-height: 40px; border-start-start-radius: 0; border-end-start-radius: 0; margin-inline-start: -2px; }
	.sf-nav__toggle:hover { background: var(--sf-brand-tint); }
	.sf-nav__sub { position: absolute; top: calc(100% + 6px); inset-inline-start: 0; min-width: 240px; padding: 8px; background: var(--sf-dark-2); border: 1px solid var(--sf-dark-line); border-radius: var(--sf-r); box-shadow: var(--sf-shadow-window), inset 0 1px 0 rgba(255, 255, 255, .06); z-index: 110; }
	.sf-nav__sublink { padding: 8px 12px; color: var(--sf-on-dark); }
	.sf-nav__sublink:hover { background: rgba(255, 255, 255, .08); color: #fff; }
	.sf-header__actions { flex: none; flex-wrap: nowrap; margin-inline-start: auto; }
	.sf-header__logo .sf-logo__text { max-width: none; }
}
@media (min-width: 900px) and (max-width: 1199px) {
	/* Compact tablet header: the display face runs wide at this width */
	.sf-header__inner { gap: var(--sf-space-3); }
	.sf-nav { margin-inline-start: 4px; }
	.sf-nav__list { gap: 0; }
	.sf-nav__link { padding-inline: 6px; font-size: 0.8125rem; }
	.sf-header__logo .sf-logo__text { font-size: 1rem; }
	.sf-header__actions { gap: var(--sf-space-2); }
	.sf-header__account span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
html.sf-scroll-lock .sf-header { z-index: 100; }

/* ==========================================================================
   19 Footer — dark, 4 columns
   ========================================================================== */
.sf-footer { position: relative; isolation: isolate; background: var(--sf-dark); color: var(--sf-on-dark); padding-block: var(--sf-space-7) var(--sf-space-6); margin-top: auto; font-size: var(--sf-text-small); }
.sf-footer::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background:
		radial-gradient(640px 380px at 12% 0%, rgba(99, 102, 241, .10), transparent 70%),
		radial-gradient(700px 420px at 88% 100%, rgba(124, 58, 237, .08), transparent 70%);
}
.sf-footer a { color: var(--sf-on-dark); text-decoration: none; }
.sf-footer a:hover { color: #fff; text-decoration: underline; }
.sf-footer__grid { display: grid; gap: var(--sf-space-6) var(--sf-space-5); grid-template-columns: 1fr; }
@media (min-width: 600px) { .sf-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sf-footer__brand { grid-column: 1 / -1; } }
@media (min-width: 900px) { .sf-footer__grid { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: var(--sf-space-6) var(--sf-space-7); } .sf-footer__brand { grid-column: auto; } }
.sf-footer__brand { max-width: 36ch; }
.sf-footer__logo { color: var(--sf-on-dark); }
.sf-footer__logo .sf-logo__mark { color: var(--sf-on-dark-brand); --sf-logo-fg: var(--sf-dark); }
.sf-footer__logo:hover { color: #fff; }
.sf-footer__tagline { margin-top: var(--sf-space-4); color: var(--sf-on-dark-muted); font-size: 0.9375rem; }
.sf-footer__wporg { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--sf-space-4); font-weight: 600; }
.sf-footer__heading, .sf-footer__widget h2, .sf-footer__widget h3, .sf-footer__widget .wp-block-heading { font-family: var(--sf-font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-on-dark-muted); margin-bottom: var(--sf-space-3); }
.sf-footer__widget ul { list-style: none; margin: 0; padding: 0; }
.sf-footer__widget li { padding: 5px 0; }
.sf-footer__widget p, .sf-footer__widget .wp-block-group { margin: 0; }
.sf-footer__widget .wp-block-group > * + * { margin-top: var(--sf-space-5); }
.sf-footer__widget .wp-block-search__inside-wrapper { display: flex; gap: 6px; }
.sf-footer__widget .wp-block-search__input { min-height: 36px; padding: 0 10px; border: 1px solid var(--sf-dark-line); border-radius: var(--sf-r-sm); background: var(--sf-dark-2); color: var(--sf-on-dark); font-size: 0.875rem; min-width: 0; }
.sf-footer__widget .wp-block-search__button { min-height: 36px; padding: 0 12px; border-radius: var(--sf-r-sm); background: var(--sf-on-dark); color: var(--sf-dark); font-weight: 600; font-size: 0.875rem; border: 0; }
.sf-footer__widget .wp-block-search__label { display: none; }
.sf-footer__widget + .sf-footer__widget { margin-top: var(--sf-space-5); }
.sf-footer__pending { color: var(--sf-on-dark-muted); }
.sf-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-space-3) var(--sf-space-5); margin-top: var(--sf-space-7); padding-top: var(--sf-space-5); border-top: 1px solid var(--sf-dark-line); color: var(--sf-on-dark-muted); }
.sf-footer__copyright { flex: 1 1 auto; }
.sf-footer__menu { display: flex; flex-wrap: wrap; gap: 4px var(--sf-space-4); list-style: none; margin: 0; padding: 0; }
.sf-footer__menu a { color: var(--sf-on-dark-muted); }
.sf-social { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.sf-social__link { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--sf-r-sm); color: var(--sf-on-dark-muted); }
.sf-social__link:hover { color: #fff; background: rgba(255, 255, 255, .08); }

/* ==========================================================================
   20 Blog — cards, meta, single, post nav, tags
   ========================================================================== */
.sf-post-grid { display: grid; gap: var(--sf-space-4); grid-template-columns: 1fr; }
@media (min-width: 600px) { .sf-post-grid { gap: var(--sf-space-5); grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .sf-post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sf-post-card { display: flex; flex-direction: column; background: var(--sf-surface); border: var(--sf-border); border-radius: var(--sf-r-lg); overflow: hidden; box-shadow: var(--sf-shadow-card); transition: border-color .18s var(--sf-ease), transform .18s var(--sf-ease), box-shadow .18s var(--sf-ease); }
.sf-post-card:hover { border-color: var(--sf-line-strong); transform: translateY(-2px); box-shadow: 0 2px 4px rgba(15, 23, 42, .05), 0 14px 32px -12px rgba(15, 23, 42, .18); }
.sf-post-card__media { display: block; aspect-ratio: 16 / 9; background: var(--sf-surface-2); border-bottom: var(--sf-border); }
.sf-post-card__img { width: 100%; height: 100%; object-fit: cover; }
.sf-post-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: var(--sf-space-5); }
.sf-post-card__eyebrow { margin-bottom: var(--sf-space-2); }
.sf-post-card__title { font-size: 1.125rem; }
.sf-post-card__title a { color: var(--sf-ink); text-decoration: none; }
.sf-post-card__title a:hover { color: var(--sf-brand); }
.sf-post-card__excerpt { margin-top: var(--sf-space-2); color: var(--sf-ink-2); font-size: 0.9375rem; flex: 1 0 auto; }
.sf-post-card__meta { display: flex; justify-content: space-between; align-items: center; gap: var(--sf-space-3); margin-top: var(--sf-space-4); padding-top: var(--sf-space-3); border-top: var(--sf-border); font-family: var(--sf-font-mono); font-size: 0.75rem; color: var(--sf-muted); }
.sf-post-card__more { display: inline-flex; align-items: center; gap: 4px; font-family: var(--sf-font-sans); font-weight: 600; font-size: 0.875rem; text-decoration: none; }
.sf-post-card.sticky { border-color: var(--sf-brand); }
.sf-meta { display: flex; flex-wrap: wrap; gap: 4px var(--sf-space-4); margin-top: var(--sf-space-4); font-family: var(--sf-font-mono); font-size: 0.75rem; color: var(--sf-muted); }
.sf-meta a { color: inherit; }
.sf-single__media { margin: var(--sf-space-6) 0; border-radius: var(--sf-r); overflow: hidden; border: var(--sf-border); }
.sf-single__img { width: 100%; }
.sf-single .sf-prose, .sf-page .sf-prose { margin-top: var(--sf-space-6); }
.sf-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sf-space-6); }
.sf-tags a { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border: var(--sf-border); border-radius: 999px; background: var(--sf-surface); font-size: 0.8125rem; color: var(--sf-ink-2); text-decoration: none; }
.sf-tags a:hover { border-color: var(--sf-brand); color: var(--sf-brand); }
.sf-post-nav { display: grid; gap: var(--sf-space-3); margin-top: var(--sf-space-7); padding-top: var(--sf-space-5); border-top: var(--sf-border); }
@media (min-width: 600px) { .sf-post-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sf-post-nav__next { text-align: end; } }
.sf-post-nav a { display: block; text-decoration: none; color: var(--sf-ink); }
.sf-post-nav__label { display: block; font-family: var(--sf-font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-muted); margin-bottom: 4px; }
.sf-post-nav__title { font-weight: 600; }
.sf-post-nav a:hover .sf-post-nav__title { color: var(--sf-brand); }
.sf-link-pages { margin-top: var(--sf-space-5); font-size: var(--sf-text-small); }
.sf-link-pages a, .sf-link-pages .post-page-numbers { display: inline-block; min-width: 32px; padding: 4px 8px; margin-inline-start: 4px; text-align: center; border: var(--sf-border); border-radius: var(--sf-r-sm); text-decoration: none; }
.sf-link-pages .current { background: var(--sf-brand); color: #fff; border-color: var(--sf-brand); }

/* ==========================================================================
   21 Pagination
   ========================================================================== */
.sf-pagination { margin-top: var(--sf-space-7); }
.sf-pagination__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.sf-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 40px; min-height: 40px; padding: 0 12px; border: var(--sf-border); border-radius: var(--sf-r-sm); background: var(--sf-surface); color: var(--sf-ink); font-family: var(--sf-font-mono); font-size: 0.875rem; text-decoration: none; }
.sf-pagination a.page-numbers:hover { border-color: var(--sf-brand); color: var(--sf-brand); }
.sf-pagination .page-numbers.current { background: var(--sf-brand); border-color: var(--sf-brand); color: #fff; }
.sf-pagination .page-numbers.dots { border-color: transparent; background: none; }
.sf-pagination .prev, .sf-pagination .next { font-family: var(--sf-font-sans); font-weight: 600; }
.sf-comments .comment-navigation, .sf-comments .navigation { display: flex; justify-content: space-between; gap: var(--sf-space-3); margin-top: var(--sf-space-5); font-size: var(--sf-text-small); }

/* ==========================================================================
   22 Comments
   ========================================================================== */
.sf-comments { margin-top: var(--sf-space-8); padding-top: var(--sf-space-6); border-top: var(--sf-border); }
.sf-comments__title { margin-bottom: var(--sf-space-5); }
.sf-comments__list, .sf-comments__list .children { list-style: none; margin: 0; padding: 0; }
.sf-comments__list .children { margin-inline-start: var(--sf-space-5); padding-inline-start: var(--sf-space-4); border-inline-start: 2px solid var(--sf-line); }
.sf-comments .comment-body { padding: var(--sf-space-4) 0; border-bottom: var(--sf-border); font-size: 0.9375rem; color: var(--sf-ink-2); }
.sf-comments .comment-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-bottom: var(--sf-space-2); }
.sf-comments .comment-author { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--sf-ink); }
.sf-comments .comment-author .avatar { width: 32px; height: 32px; border-radius: 50%; }
.sf-comments .comment-author .fn { font-style: normal; }
.sf-comments .comment-metadata { font-family: var(--sf-font-mono); font-size: 0.75rem; color: var(--sf-muted); }
.sf-comments .comment-metadata a { color: inherit; text-decoration: none; }
.sf-comments .comment-content > * + * { margin-top: 0.7em; }
.sf-comments .reply { margin-top: var(--sf-space-2); font-size: var(--sf-text-small); }
.sf-comments .comment-reply-link { font-weight: 600; text-decoration: none; }
.sf-comments .bypostauthor > .comment-body .fn::after { content: "Author"; margin-inline-start: 8px; font-family: var(--sf-font-mono); font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-brand); }
.sf-comment-form { margin-top: var(--sf-space-6); }
.sf-comment-reply-title { margin-bottom: var(--sf-space-4); }
.sf-comment-reply-title small { font-size: var(--sf-text-small); font-weight: 400; margin-inline-start: 8px; }
.sf-comment-form .comment-notes, .sf-comment-form .logged-in-as { font-size: var(--sf-text-small); color: var(--sf-muted); margin-bottom: var(--sf-space-4); }
.sf-comment-form .comment-form-cookies-consent { display: flex; gap: 10px; align-items: flex-start; font-size: var(--sf-text-small); color: var(--sf-ink-2); margin-bottom: var(--sf-space-4); }
.sf-comment-form .comment-form-cookies-consent input { margin-top: 3px; }
.sf-comment-form .form-submit { margin: 0; }

/* ==========================================================================
   23 404 / search / none
   ========================================================================== */
.sf-404 .sf-lead { margin-top: var(--sf-space-4); }
.sf-404__search { margin: var(--sf-space-6) 0; max-width: 560px; }
.sf-link-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px var(--sf-space-5); font-weight: 600; }
.sf-link-list a { text-decoration: none; }
.sf-link-list a:hover { text-decoration: underline; }
.sf-none { max-width: 60ch; color: var(--sf-ink-2); }
.sf-none > * + * { margin-top: var(--sf-space-4); }

/* ==========================================================================
   24 Docs — sidebar tree + 760px column + anchored headings + prev/next
   ========================================================================== */
.sf-docs { display: grid; gap: var(--sf-space-6); grid-template-columns: 1fr; }
.sf-docs__sidebar { min-width: 0; }
.sf-docs__content { min-width: 0; max-width: var(--sf-docs-max); }
.sf-docs__content .sf-prose { max-width: none; }
.sf-docs__toc { position: relative; }
.sf-docs__tree, .sf-docs__tree ul { list-style: none; margin: 0; padding: 0; }
.sf-docs__tree > li + li { margin-top: var(--sf-space-4); }
.sf-docs__tree ul { margin-top: 4px; border-inline-start: 1px solid var(--sf-line); }
.sf-docs__group { display: block; font-family: var(--sf-font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-muted); font-weight: 500; padding: 4px 0; }
.sf-docs__tree a { display: block; padding: 6px 12px; font-size: 0.9375rem; color: var(--sf-ink-2); text-decoration: none; border-inline-start: 2px solid transparent; margin-inline-start: -1px; border-radius: 0 var(--sf-r-sm) var(--sf-r-sm) 0; }
[dir="rtl"] .sf-docs__tree a { border-radius: var(--sf-r-sm) 0 0 var(--sf-r-sm); }
.sf-docs__tree a:hover { color: var(--sf-ink); background: var(--sf-surface-2); }
.sf-docs__tree a.is-active, .sf-docs__tree a[aria-current] { color: var(--sf-brand); border-inline-start-color: var(--sf-brand); font-weight: 600; }
.sf-docs__tree ul ul a { padding-inline-start: 24px; font-size: 0.875rem; }
.sf-docs__mobile-toggle { display: block; margin-bottom: var(--sf-space-3); }
.sf-docs__mobile-toggle summary { cursor: pointer; font-weight: 600; padding: 10px 14px; border: var(--sf-border); border-radius: var(--sf-r-sm); background: var(--sf-surface); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.sf-docs__mobile-toggle summary::-webkit-details-marker { display: none; }
.sf-docs__mobile-toggle summary::after { content: ""; width: 8px; height: 8px; border-inline-end: 2px solid var(--sf-muted); border-bottom: 2px solid var(--sf-muted); transform: rotate(45deg); }
.sf-docs__mobile-toggle[open] summary::after { transform: rotate(-135deg); }
.sf-docs__mobile-toggle > div { padding: var(--sf-space-3) 0 0; }
.sf-anchor { position: relative; scroll-margin-top: calc(var(--sf-header-h) + 24px); }
.sf-anchor__link { position: absolute; inset-inline-start: -1.1em; top: 0; width: 1em; text-align: center; color: var(--sf-line-strong); text-decoration: none; opacity: 0; font-weight: 400; }
.sf-anchor:hover .sf-anchor__link, .sf-anchor__link:focus { opacity: 1; color: var(--sf-brand); }
.sf-docs__pager { display: grid; gap: var(--sf-space-3); margin-top: var(--sf-space-7); padding-top: var(--sf-space-5); border-top: var(--sf-border); }
.sf-docs__pager a { display: block; padding: var(--sf-space-4); border: var(--sf-border); border-radius: var(--sf-r); background: var(--sf-surface); text-decoration: none; color: var(--sf-ink); }
.sf-docs__pager a:hover { border-color: var(--sf-brand); }
.sf-docs__pager a:hover .sf-post-nav__title { color: var(--sf-brand); }
.sf-docs__pager--next { text-align: end; }
.sf-docs__meta { margin-top: var(--sf-space-6); font-family: var(--sf-font-mono); font-size: 0.75rem; color: var(--sf-muted); }
@media (min-width: 600px) { .sf-docs__pager { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
	.sf-docs { grid-template-columns: 240px minmax(0, 1fr); gap: var(--sf-space-8); align-items: start; }
	.sf-docs__sidebar { position: sticky; top: calc(var(--sf-header-h) + 24px); max-height: calc(100vh - var(--sf-header-h) - 48px); overflow-y: auto; padding-inline-end: 8px; }
	.sf-docs__mobile-toggle summary { display: none; }
	.sf-docs__mobile-toggle > div { padding: 0; }
	.sf-docs__mobile-toggle:not([open]) > div { display: block; }
	.sf-docs__content { padding-inline-start: 0; }
}
@media (min-width: 1200px) { .sf-docs { grid-template-columns: 260px minmax(0, 1fr); gap: var(--sf-space-9); } }

/* ==========================================================================
   25 Utilities
   ========================================================================== */
.sf-reveal { --sf-reveal-delay: 0ms; }
html.js .sf-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .55s var(--sf-ease) var(--sf-reveal-delay), transform .55s var(--sf-ease) var(--sf-reveal-delay);
}
html.js .sf-reveal.is-visible { opacity: 1; transform: none; }

/* Reveal variants. The default rises; these give a section its own character
   so the page does not feel like one effect repeated eleven times. */
html.js .sf-reveal--fade { transform: none; }
html.js .sf-reveal--left  { transform: translateX(-22px); }
html.js .sf-reveal--right { transform: translateX(22px); }
html.js .sf-reveal--zoom  { transform: scale(.965); transform-origin: center 60%; }
html.js .sf-reveal--rise  { transform: translateY(34px); }
html.js .sf-reveal--left.is-visible,
html.js .sf-reveal--right.is-visible,
html.js .sf-reveal--zoom.is-visible,
html.js .sf-reveal--rise.is-visible { transform: none; }

/* Children of a staggered container animate in sequence. The delay is set by
   JS from the child's index so any number of items works. */
html.js .sf-stagger > * {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .5s var(--sf-ease) var(--sf-reveal-delay), transform .5s var(--sf-ease) var(--sf-reveal-delay);
}
html.js .sf-stagger.is-visible > * { opacity: 1; transform: none; }
.sf-text-center { text-align: center; }
.sf-mt-0 { margin-top: 0 !important; }
.sf-mt-2 { margin-top: var(--sf-space-2); }
.sf-mt-4 { margin-top: var(--sf-space-4); }
.sf-mt-5 { margin-top: var(--sf-space-5); }
.sf-mt-6 { margin-top: var(--sf-space-6); }
.sf-mt-7 { margin-top: var(--sf-space-7); }
.sf-mb-4 { margin-bottom: var(--sf-space-4); }
.sf-mb-6 { margin-bottom: var(--sf-space-6); }
.sf-max-prose { max-width: var(--sf-prose-max); }
.sf-hide-mobile { display: none; }
@media (min-width: 600px) { .sf-hide-mobile { display: initial; } .sf-hide-desktop { display: none; } }
.sf-external::after { content: ""; display: inline-block; width: 0.7em; height: 0.7em; margin-inline-start: 4px; vertical-align: baseline; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center / contain no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center / contain no-repeat; }
/* Definition list of facts (licence facts, status) */
.sf-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px var(--sf-space-5); margin: 0; font-size: 0.9375rem; }
.sf-dl dt { font-family: var(--sf-font-mono); font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sf-muted); padding-top: 3px; }
.sf-dl dd { margin: 0; color: var(--sf-ink); }
/* CTA band — dark aurora card */
.sf-cta-band { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: var(--sf-space-5); align-items: center; padding: var(--sf-space-6); background: var(--sf-dark); color: var(--sf-on-dark); border: 1px solid var(--sf-dark-line); border-radius: var(--sf-r-xl); box-shadow: var(--sf-shadow-window); }
.sf-cta-band::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background:
		radial-gradient(560px 340px at 14% 0%, rgba(99, 102, 241, .26), transparent 70%),
		radial-gradient(620px 400px at 86% 20%, rgba(124, 58, 237, .20), transparent 70%),
		radial-gradient(420px 300px at 60% 100%, rgba(34, 211, 238, .08), transparent 70%);
}
.sf-cta-band .sf-h2 { color: #fff; }
.sf-cta-band p { color: var(--sf-on-dark-muted); }
.sf-cta-band > * { min-width: 0; }
/* A long button label must never force the band wider than the viewport:
   below 390px the actions wrap and the label is allowed to break. */
@media (max-width: 389px) {
	.sf-cta-band .sf-btn { white-space: normal; }
	.sf-cta-band .sf-btn-group { flex-wrap: wrap; }
}
@media (min-width: 900px) { .sf-cta-band { grid-template-columns: minmax(0, 1fr) auto; padding: var(--sf-space-7) var(--sf-space-8); } }
/* Style guide chrome (page-templates/styleguide.php only) */
.sf-sg__section { padding-block: var(--sf-space-7); border-top: var(--sf-border); }
.sf-sg__section:first-child { border-top: 0; }
.sf-sg__swatches { display: grid; gap: var(--sf-space-3); grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.sf-sg__swatch { border: var(--sf-border); border-radius: var(--sf-r-sm); overflow: hidden; background: var(--sf-surface); font-size: 0.75rem; }
.sf-sg__swatch i { display: block; height: 56px; background: var(--sw); }
.sf-sg__swatch span { display: block; padding: 8px 10px; font-family: var(--sf-font-mono); color: var(--sf-ink-2); }
.sf-sg__swatch small { display: block; color: var(--sf-muted); }
.sf-sg__row { display: flex; flex-wrap: wrap; gap: var(--sf-space-3); align-items: center; }
.sf-sg__dark { position: relative; isolation: isolate; overflow: hidden; background: var(--sf-dark); color: var(--sf-on-dark); border-radius: var(--sf-r-lg); padding: var(--sf-space-5); }
.sf-sg__dark::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background:
		radial-gradient(420px 260px at 18% 0%, rgba(99, 102, 241, .24), transparent 70%),
		radial-gradient(460px 300px at 85% 30%, rgba(124, 58, 237, .18), transparent 70%);
}
.sf-sg__kw-demo { margin: 0; flex-basis: 100%; color: #fff; }
.sf-sg__label { font-family: var(--sf-font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-muted); margin: var(--sf-space-5) 0 var(--sf-space-3); }
.sf-sg__label:first-child { margin-top: 0; }

/* ==========================================================================
   27 Front page — sections + admin mockups (front-page.php only)
   ========================================================================== */

/* 1 Hero — dark aurora block, continuous with the dark glass header.
   Bottom padding used to leave a 24–40px shelf for the overlapping fact
   rail; that rail is gone, so the hero now closes on its own stats. */
.sf-hero { padding-bottom: var(--sf-space-8); }
.sf-hero.sf-section--dark::before {
	background:
		radial-gradient(600px 400px at 20% 0%, rgba(99, 102, 241, .28), transparent 70%),
		radial-gradient(700px 480px at 80% 10%, rgba(124, 58, 237, .22), transparent 70%),
		radial-gradient(500px 360px at 60% 100%, rgba(34, 211, 238, .10), transparent 70%);
}
.sf-hero__grid { align-items: center; }
.sf-hero .sf-h1 { color: #fff; font-size: var(--sf-text-display-hero); line-height: 1.04; font-weight: 700; letter-spacing: -0.03em; }
/* Gradient keyword: one phrase, hero only; lightened stops for AA on --sf-dark
   (#A5B4FC 9.58:1 · #C4B5FD 10.34:1 · #67E8F9 13.17:1) */
.sf-hero__kw { color: var(--sf-on-dark-brand); }
@supports (-webkit-background-clip: text) or (background-clip: text) {
	.sf-hero__kw {
		background: linear-gradient(92deg, #A5B4FC 0%, #C4B5FD 55%, #67E8F9 120%);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
	}
}
.sf-hero__actions { margin-top: var(--sf-space-6); }
/* Glass secondary button in the dark hero */
.sf-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-hero .sf-btn--secondary:hover { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .28); color: #fff; }
.sf-hero .sf-facts li::before { background: var(--sf-on-dark-brand); }
@media (min-width: 600px) and (max-width: 899px) { .sf-hero__grid { grid-template-columns: 1fr; } }
@media (min-width: 900px)  { .sf-hero { padding-top: var(--sf-space-8); padding-bottom: var(--sf-space-8); } .sf-hero__grid { gap: var(--sf-space-7); } }
@media (min-width: 900px) and (max-width: 1199px) { .sf-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 1200px) { .sf-hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sf-space-8); } }

/* Feed URL caption */
.sf-feed-url { display: flex; flex-wrap: wrap; align-items: center; gap: 8px var(--sf-space-3); margin-top: var(--sf-space-4); padding-inline: 2px; font-size: 0.8125rem; color: var(--sf-muted); }
.sf-feed-url .sf-mock-label { margin: 0; }
.sf-feed-url__value { font-family: var(--sf-font-mono); font-size: 0.8125rem; color: var(--sf-ink); background: var(--sf-surface-2); border: 1px solid var(--sf-line); border-radius: var(--sf-r-sm); padding: 3px 8px; }
.sf-section--dark .sf-feed-url { color: var(--sf-on-dark-muted); }
.sf-section--dark .sf-feed-url .sf-mock-label { color: var(--sf-on-dark-muted); }
.sf-section--dark .sf-feed-url__value { color: var(--sf-on-dark); background: rgba(255, 255, 255, .07); border-color: var(--sf-dark-line); }
@media (min-width: 600px) { .sf-feed-url__meta { margin-inline-start: auto; } }

/* 2 Fact strip — light bento cards with gradient numerals */
.sf-facts-strip-wrap { padding-top: var(--sf-space-6); padding-bottom: var(--sf-space-6); }
.sf-facts-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-space-3); list-style: none; margin: 0; padding: 0; }
.sf-facts-strip .sf-fact { border-top: 0; padding: var(--sf-space-5); background: var(--sf-surface); border: var(--sf-border); border-radius: var(--sf-r-lg); box-shadow: var(--sf-shadow-card); }
.sf-facts-strip .sf-fact > span { display: block; }
.sf-facts-strip .sf-fact__value { font-family: var(--sf-font-display); font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); font-weight: 700; letter-spacing: -0.02em; color: var(--sf-brand); }
@supports (-webkit-background-clip: text) or (background-clip: text) {
	.sf-facts-strip .sf-fact__value {
		background: var(--sf-grad-brand);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
	}
}
.sf-facts-strip .sf-fact__label { margin-top: 8px; }
@media (max-width: 419px) { .sf-facts-strip { grid-template-columns: 1fr; } }
@media (min-width: 900px)  { .sf-facts-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sf-space-4); } }

/* 3 Pipeline */
.sf-section__head--row .sf-section__head-text { max-width: 68ch; }
.sf-pipeline-notes { margin-top: var(--sf-space-7); }
.sf-pipeline-note h3 { display: flex; align-items: baseline; gap: 10px; }
.sf-hiw__num, .sf-pipeline-note__num { font-size: 0.75rem; font-weight: 500; color: var(--sf-brand); }
.sf-pipeline-note p { margin-top: var(--sf-space-2); color: var(--sf-ink-2); font-size: 0.9375rem; }

/* 4 How it works */
.sf-hiw__rows { list-style: none; margin: 0; padding: 0; }
.sf-hiw__row { display: grid; gap: var(--sf-space-6); padding-top: var(--sf-space-7); margin-top: var(--sf-space-7); border-top: var(--sf-border); }
.sf-hiw__row:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.sf-hiw__num { display: block; letter-spacing: 0.06em; margin-bottom: var(--sf-space-3); }
.sf-hiw__text p { margin-top: var(--sf-space-3); color: var(--sf-ink-2); }
.sf-hiw__list { margin-top: var(--sf-space-4); }
.sf-hero__graphic, .sf-hiw__graphic { min-width: 0; }
/* ≤359px: the long secondary button label must not set the hero column's
   min-content width, or the whole hero grid grows past the viewport. */
@media (max-width: 359px) {
	.sf-hero__grid { grid-template-columns: minmax(0, 1fr); }
	.sf-hero__copy { min-width: 0; }
	.sf-hero .sf-btn-group .sf-btn { white-space: normal; text-align: center; }
}
/* ≤359px: no button label is allowed to set a min-content width wider than the
   viewport, so labels may wrap everywhere on the narrowest phones. */
@media (max-width: 359px) {
	.sf-btn { white-space: normal; text-align: center; }
}
@media (min-width: 900px)  { .sf-hiw__row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sf-space-8); align-items: center; padding-top: var(--sf-space-8); margin-top: var(--sf-space-8); } .sf-hiw__row--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .sf-hiw__row--flip .sf-hiw__text { order: 2; } .sf-hiw__row--flip .sf-hiw__graphic { order: 1; } }
@media (min-width: 1200px) { .sf-hiw__row { gap: var(--sf-space-9); } }

/* 5 Channels */
.sf-channels__grid { list-style: none; margin: 0; padding: 0; }
.sf-channels__grid > li { display: flex; min-width: 0; }
.sf-channels__grid .sf-channel { flex: 1 1 auto; }
@media (min-width: 600px) { .sf-channels__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .sf-channels__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sf-space-4); } }

/* 6 Scale (dark) */
.sf-scale__grid { display: grid; gap: var(--sf-space-6); }
.sf-scale__facts { margin: 0; }
.sf-scale__fact + .sf-scale__fact { margin-top: var(--sf-space-5); padding-top: var(--sf-space-5); border-top: 1px solid var(--sf-dark-line); }
.sf-scale__fact dt { font-weight: 600; color: var(--sf-on-dark); font-size: 1.0625rem; }
.sf-scale__fact dd { margin: 6px 0 0; color: var(--sf-on-dark-muted); font-size: 0.9375rem; }
@media (min-width: 900px) { .sf-scale__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--sf-space-8); align-items: center; } }
@media (min-width: 1200px) { .sf-scale__grid { gap: var(--sf-space-9); } }
.sf-batches-card { padding: var(--sf-space-5); }
.sf-batches-card__title, .sf-batches-card__count { font-size: 0.8125rem; color: var(--sf-on-dark-muted); }
.sf-batches-card__title strong { color: var(--sf-on-dark); font-weight: 600; }
.sf-batches-card .sf-batches i { aspect-ratio: auto; height: 26px; background: rgba(255, 255, 255, .05); border-color: var(--sf-dark-line); }
.sf-batches-card .sf-batches i.is-done { background: #6366F1; border-color: #6366F1; background-image: linear-gradient(180deg, #6366F1, #4F46E5); }
.sf-batches-card .sf-batches i.is-active { background: #67E8F9; border-color: #67E8F9; }
.sf-batches-card .sf-batches__notes { margin-top: var(--sf-space-4); padding-top: var(--sf-space-4); border-top: 1px solid var(--sf-dark-line); color: var(--sf-on-dark-muted); }

/* 7 Free vs Pro condensed */
.sf-compare__grid { display: grid; gap: var(--sf-space-5); align-items: start; }
.sf-compare__more td { padding-top: 4px; padding-bottom: 10px; font-size: 0.8125rem; text-align: start; color: var(--sf-muted); }
.sf-compare .sf-table-wrap > table { min-width: 0; }
.sf-compare .sf-table th[class*="col-"] { min-width: 72px; }
@media (min-width: 900px) { .sf-compare__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-space-6); } }

/* 9 FAQ / 10 CTA */
.sf-faq-section .sf-faq { margin-top: var(--sf-space-2); }

/* Mockup chrome */
.sf-window--feeds .sf-mock-frame { padding: var(--sf-space-4) var(--sf-space-4) 0; }
.sf-window .sf-adminbar__brand { flex: none; white-space: nowrap; }
@media (max-width: 599px) { .sf-adminbar__tabs span:nth-child(n+3) { display: none; } }
.sf-mock-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sf-space-3); margin-top: var(--sf-space-4); }
.sf-mock-head__title { font-size: 1rem; font-weight: 600; color: var(--sf-ink); }
.sf-mock-sub { display: block; margin-top: 2px; font-size: 0.6875rem; line-height: 1.4; color: var(--sf-muted); }
.sf-mock-label { display: block; font-family: var(--sf-font-mono); font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-muted); margin-bottom: 6px; }
.sf-mock-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sf-mock-btn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border: 1px solid var(--sf-line-strong); border-radius: var(--sf-r-sm); background: var(--sf-surface); font-size: 0.6875rem; font-weight: 600; color: var(--sf-ink-2); white-space: nowrap; }
.sf-mock-btn--primary { background: var(--sf-brand); border-color: var(--sf-brand); color: #fff; }
.sf-mock-btn--link { border-color: transparent; background: none; color: var(--sf-brand); }
.sf-mock-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--sf-surface-2); font-family: var(--sf-font-mono); font-size: 0.5625rem; color: var(--sf-ink-2); }
.sf-mock-code { display: inline-block; padding: 2px 6px; border-radius: 4px; background: var(--sf-surface-2); font-family: var(--sf-font-mono); font-size: 0.625rem; color: var(--sf-ink); }
.sf-mock-chip { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; background: var(--sf-surface-2); font-size: 0.6875rem; color: var(--sf-ink); white-space: nowrap; }
.sf-mock-stack { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; }

/* Feeds table: columns appear as the window widens */
.sf-window--feeds .sf-table-wrap { container-type: inline-size; }
.sf-window .sf-table-wrap > table { min-width: 0; }
.sf-mock-table--feeds tr > :nth-child(n+4) { display: none; }
@container (min-width: 380px) { .sf-mock-table--feeds tr > :nth-child(4) { display: table-cell; } }
@container (min-width: 540px) { .sf-mock-table--feeds tr > :nth-child(-n+6) { display: table-cell; } }
@container (min-width: 648px) { .sf-mock-table--feeds tr > :nth-child(n) { display: table-cell; } }
.sf-window .sf-mock-table--feeds { font-size: 0.6875rem; }
.sf-mock-table--feeds th, .sf-mock-table--feeds td { padding-inline: 3px; }
.sf-window .sf-mock-table--feeds th { white-space: nowrap; font-size: 0.5625rem; }
.sf-mock-table--feeds tr > :first-child { min-width: 94px; padding-inline-start: var(--sf-space-4); white-space: normal; overflow-wrap: normal; }
.sf-mock-table--feeds .sf-badge { font-size: 0.5625rem; padding: 1px 6px; letter-spacing: 0.04em; }
.sf-mock-table--feeds .sf-mock-chip { padding: 2px 6px; font-size: 0.625rem; }
.sf-mock-table--feeds .sf-mock-code { padding: 2px 4px; }
.sf-mock-table--feeds .sf-mock-btn { padding: 3px 7px; }
.sf-mock-table--feeds .sf-mock-btns { flex-wrap: nowrap; }
.sf-mock-table--feeds .sf-mock-sub { white-space: normal; }
.sf-mock-table--feeds tr > :last-child { padding-inline-end: var(--sf-space-4); }

/* Wizard chrome */
.sf-mock-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; list-style: none; margin: 0; padding: 0; }
.sf-mock-steps__item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--sf-line); border-radius: var(--sf-r-sm); background: var(--sf-surface); min-width: 0; }
.sf-mock-steps__item.is-active { border-color: var(--sf-brand); box-shadow: inset 0 0 0 1px var(--sf-brand); }
.sf-mock-steps__num { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--sf-line-strong); font-family: var(--sf-font-mono); font-size: 0.625rem; color: var(--sf-ink-2); background: var(--sf-surface); }
.sf-mock-steps__item.is-active .sf-mock-steps__num { background: var(--sf-brand); border-color: var(--sf-brand); color: #fff; }
.sf-mock-steps__item.is-done .sf-mock-steps__num { background: var(--sf-ok-tint); border-color: var(--sf-ok); color: var(--sf-ok); }
.sf-mock-steps__title { display: block; font-size: 0.75rem; font-weight: 600; color: var(--sf-ink); line-height: 1.2; }
.sf-mock-steps__item .sf-mock-sub { display: none; }
@media (min-width: 600px) { .sf-mock-steps__item .sf-mock-sub { display: block; } }
.sf-mock-panel { margin-top: var(--sf-space-4); padding: var(--sf-space-4); border: var(--sf-border); border-radius: var(--sf-r); background: var(--sf-surface-2); }
.sf-mock-panel > .sf-badge { white-space: normal; }
.sf-mock-h { margin-top: 10px; font-size: 0.9375rem; font-weight: 600; color: var(--sf-ink); }
.sf-mock-card { margin-top: var(--sf-space-4); padding: var(--sf-space-4); border: var(--sf-border); border-radius: var(--sf-r-sm); background: var(--sf-surface); }
.sf-mock-card--split { display: grid; gap: var(--sf-space-4); }
@media (min-width: 600px) { .sf-mock-card--split { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--sf-space-5); } }
.sf-mock-ok { display: flex; gap: 8px; align-items: flex-start; font-size: 0.75rem; color: var(--sf-ink-2); }
.sf-mock-ok .sf-check { flex: none; margin-top: 1px; }
.sf-mock-selects { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 8px; margin-top: var(--sf-space-4); }
.sf-mock-field { min-width: 0; }
.sf-mock-field .sf-mock-label { margin-bottom: 4px; }
.sf-mock-input { display: block; min-height: 30px; padding: 6px 10px; border: 1px solid var(--sf-line-strong); border-radius: var(--sf-r-sm); background: var(--sf-surface); font-size: 0.75rem; color: var(--sf-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-mock-disclosure { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-space-4); margin-top: var(--sf-space-4); padding: 10px var(--sf-space-4); border: 1px solid var(--sf-line); border-radius: var(--sf-r-sm); background: var(--sf-surface); font-size: 0.75rem; color: var(--sf-ink); }
.sf-mock-disclosure .sf-icon { flex: none; color: var(--sf-muted); }
.sf-mock-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--sf-space-3); margin-top: var(--sf-space-4); padding-top: var(--sf-space-4); border-top: var(--sf-border); }
.sf-mock-group { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-space-4); margin-top: var(--sf-space-4); font-family: var(--sf-font-mono); font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-muted); }
.sf-mock-group + .sf-mock-map { margin-top: 6px; }
.sf-mock-map { display: grid; gap: 4px; }
.sf-mock-map .sf-mock-row { padding: 4px 0; border-bottom: 0; }
.sf-mock-attr { font-family: var(--sf-font-mono); font-size: 0.6875rem; color: var(--sf-ink-2); overflow: hidden; text-overflow: ellipsis; }
.sf-mock-select--static { border-style: dashed; color: var(--sf-ink-2); }
.sf-mock-select .sf-badge { margin-inline-start: auto; }
/* Narrow phones: stack the attribute above its select so a long source label
   plus its Pro badge never gets clipped inside the mock field. */
@media (max-width: 359px) {
	.sf-window .sf-mock-map .sf-mock-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
	.sf-window .sf-mock-select .sf-badge { flex: none; }
}
.sf-mock-preview { display: grid; gap: var(--sf-space-4); margin-top: var(--sf-space-4); }
@media (min-width: 600px) { .sf-mock-preview { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sf-space-5); } }
.sf-mock-product__card { display: flex; gap: 10px; padding: 10px; border: var(--sf-border); border-radius: var(--sf-r-sm); background: var(--sf-surface); }
.sf-mock-product__img { display: grid; place-content: center; flex: none; width: 64px; height: 64px; border-radius: var(--sf-r-sm); background: var(--sf-surface-2); color: var(--sf-line-strong); }
.sf-mock-product__body { min-width: 0; }
.sf-mock-product__title { display: block; font-size: 0.75rem; font-weight: 600; color: var(--sf-info); line-height: 1.35; }
.sf-mock-product__price { display: block; margin-top: 3px; font-size: 0.875rem; font-weight: 600; color: var(--sf-ink); }
.sf-mock-health .sf-health li { font-size: 0.75rem; }
.sf-mock-health .sf-health .sf-check { flex: none; }
.sf-check--warn { color: var(--sf-warn); }
.sf-mock-gen { margin-top: var(--sf-space-4); padding-top: var(--sf-space-4); border-top: var(--sf-border); }
.sf-mock-gen .sf-mock-sub { margin-top: 6px; }
html.js .sf-progress--animate .sf-progress__bar { animation: sf-progress-fill 2.4s var(--sf-ease) forwards; }
@keyframes sf-progress-fill { from { width: 4%; } to { width: var(--sf-progress, 43%); } }
/* Category mapping mockup */
.sf-mock-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sf-space-4); }
.sf-window .sf-chip--on { border-color: var(--sf-brand); color: var(--sf-brand-ink); }
.sf-mock-catrows { margin-top: var(--sf-space-3); border: var(--sf-border); border-radius: var(--sf-r-sm); overflow: hidden; }
.sf-mock-catrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 10px; align-items: center; padding: 8px 10px; border-bottom: var(--sf-border); }
.sf-mock-catrow:last-child { border-bottom: 0; }
.sf-mock-catrow--head { background: var(--sf-surface-2); font-family: var(--sf-font-mono); font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-muted); }
.sf-mock-catrow__name { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--sf-ink); }
.sf-mock-catrow__name.is-child { padding-inline-start: 14px; color: var(--sf-ink-2); }
.sf-mock-catrow__map { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.sf-mock-catrow__map .sf-mock-label { margin: 0; }
.sf-mock-catrow__map .sf-chip { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }

/* ==========================================================================
   26 Motion — everything off under reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce)  {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
	html.js .sf-reveal, html.js .sf-stagger > * { opacity: 1; transform: none; transition: none; }
	html.js .sf-pipeline__line { animation: none; }
	/* v3 hover lifts/glows: no movement, keep every element visible and usable */
	.sf-btn:hover, a.sf-card:hover, a.sf-channel:hover, .sf-post-card:hover, .sf-btn--on-dark:hover { transform: none; }
	.sf-btn--primary:hover { filter: none; }
}
/* Print: no header/footer chrome */
@media print  { .sf-header, .sf-footer, .sf-skip-link, .sf-announce, .sf-docs__sidebar { display: none !important; } body { background: #fff; color: #000; } a { color: inherit; text-decoration: none; } }

/* Heading anchor links hang in the gutter on wide screens; below 700px there is
   no gutter, so keep them inline instead of half off-screen (focus ring included). */
@media (max-width: 700px) {
	.sf-anchor__link {
		position: static;
		inset-inline-start: auto;
		display: inline-block;
		width: auto;
		margin-inline-start: 0.35em;
	}
}

/* The skip link moves real focus into the landmark; never flash a ring on it. */
.sf-main:focus { outline: none; }

/* ---------------------------------------------------------------------------
 * Front page — Free vs Pro summary. Two text columns rather than tick/cross:
 * the free tier's real capability is the point, not its absence.
 * ------------------------------------------------------------------------ */
.sf-compare__summary th[scope="col"] { vertical-align: bottom; }
.sf-compare__tier { display: block; font-weight: 600; color: var(--sf-ink); }
.sf-compare__tier-note {
	display: block;
	margin-block-start: 2px;
	font-family: var(--sf-font-mono);
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	color: var(--sf-muted);
	text-transform: none;
}
.sf-compare__summary td { color: var(--sf-ink-2); }
.sf-compare__summary .sf-compare__pro { color: var(--sf-ink); font-weight: 500; }
.sf-compare__summary tbody tr:hover { background: var(--sf-surface-2); }
@media (min-width: 900px) {
	.sf-compare__summary th[scope="row"] { width: 26%; }
	.sf-compare__summary .sf-compare__free,
	.sf-compare__summary .sf-compare__pro { width: 37%; }
}

/* Shared inclusions, rendered once beneath the pricing row. */
.sf-pricing__shared {
	margin-block-start: var(--sf-space-6);
	padding: var(--sf-space-5) var(--sf-space-6);
	background: var(--sf-surface-2);
	border: var(--sf-border);
	border-radius: var(--sf-r-lg);
}
.sf-pricing__shared-title {
	margin: 0 0 var(--sf-space-4);
	font-family: var(--sf-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sf-muted);
}
.sf-pricing__shared-list {
	display: grid;
	gap: var(--sf-space-3) var(--sf-space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}
.sf-pricing__shared-list li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 0.9375rem;
	color: var(--sf-ink-2);
}
@media (min-width: 700px)  { .sf-pricing__shared-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .sf-pricing__shared-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------------------
 * Wizard mockups illustrate a scrolling admin screen, so they share one
 * viewport height and fade at the cut. Previously the three windows were
 * 600-1000px tall and all different, leaving 300-700px of empty column beside
 * each short caption and stretching the section past 2,700px.
 * ------------------------------------------------------------------------ */
@media (min-width: 900px) {
	.sf-hiw__graphic .sf-window__body {
		max-height: 460px;
		overflow: hidden;
		-webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
		mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
	}
}

/* ---------------------------------------------------------------------------
 * Adaptive header.
 *
 * The bar used to be permanently dark navy, which reads as a heavy slab once
 * the visitor scrolls onto the white page body. It now starts transparent over
 * the dark hero (header and hero read as one block) and turns into a light
 * glass bar with ink text as soon as the page scrolls, so it belongs to
 * whatever is underneath it. Pages without a dark hero get the light bar
 * immediately via .sf-header--solid.
 * ------------------------------------------------------------------------ */
.sf-header {
	/* Default (no dark hero behind it) is the light glass bar. */
	background: rgba(255, 255, 255, .86);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom-color: var(--sf-line);
	color: var(--sf-ink);
	transition: background .25s var(--sf-ease), border-color .25s var(--sf-ease),
		box-shadow .25s var(--sf-ease), backdrop-filter .25s var(--sf-ease);
}

/* Brand hairline under the bar — the indigo-violet of the product, used as a
   1px edge rather than a slab. It is what carries the brand up here now that
   the bar itself is white. */
.sf-header::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 2px;
	background: linear-gradient(90deg,
		transparent 0%,
		rgba(99, 102, 241, .35) 18%,
		rgba(124, 58, 237, .65) 50%,
		rgba(99, 102, 241, .35) 82%,
		transparent 100%);
	pointer-events: none;
}

.sf-header.is-scrolled,
.sf-header--solid {
	background: rgba(255, 255, 255, .9);
	backdrop-filter: saturate(180%) blur(16px);
	-webkit-backdrop-filter: saturate(180%) blur(16px);
	border-bottom-color: transparent;
	color: var(--sf-ink);
}
/* Elevation appears only once the page has moved. */
.sf-header.is-scrolled {
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 30px -18px rgba(15, 23, 42, .28);
}

/* Light-bar element colours. */
.sf-header.is-scrolled .sf-header__logo,
.sf-header--solid .sf-header__logo,
.sf-header.is-scrolled .sf-logo,
.sf-header--solid .sf-logo { color: var(--sf-ink); }
.sf-header.is-scrolled .sf-header__logo .sf-logo__mark,
.sf-header--solid .sf-header__logo .sf-logo__mark { color: var(--sf-brand); --sf-logo-fg: #fff; }
.sf-header.is-scrolled .sf-nav__link,
.sf-header--solid .sf-nav__link { color: var(--sf-ink); }
.sf-header.is-scrolled .sf-nav__link:hover,
.sf-header.is-scrolled .sf-nav__item.is-current > .sf-nav__link,
.sf-header--solid .sf-nav__link:hover,
.sf-header--solid .sf-nav__item.is-current > .sf-nav__link { color: var(--sf-brand); }
.sf-header.is-scrolled .sf-nav__link:hover,
.sf-header--solid .sf-nav__link:hover { background: var(--sf-brand-tint); }
.sf-header.is-scrolled .sf-nav__toggle,
.sf-header--solid .sf-nav__toggle { color: var(--sf-muted); }
.sf-header.is-scrolled .sf-nav__toggle:hover,
.sf-header--solid .sf-nav__toggle:hover { color: var(--sf-brand); background: var(--sf-brand-tint); }
.sf-header.is-scrolled .sf-header__account,
.sf-header.is-scrolled .sf-header__cart,
.sf-header--solid .sf-header__account,
.sf-header--solid .sf-header__cart { color: var(--sf-ink-2); }
.sf-header.is-scrolled .sf-header__account:hover,
.sf-header.is-scrolled .sf-header__cart:hover,
.sf-header--solid .sf-header__account:hover,
.sf-header--solid .sf-header__cart:hover { color: var(--sf-brand); background: var(--sf-brand-tint); }
.sf-header.is-scrolled .sf-header__burger,
.sf-header--solid .sf-header__burger { color: var(--sf-ink); }
.sf-header.is-scrolled .sf-header__burger:hover,
.sf-header--solid .sf-header__burger:hover { color: var(--sf-brand); background: var(--sf-brand-tint); }
.sf-header.is-scrolled :focus-visible,
.sf-header--solid :focus-visible { outline-color: var(--sf-focus); }

/* The bar stays white while the panel is open, so the trigger keeps ink. */
.sf-header .sf-header__burger[aria-expanded="true"] { color: var(--sf-brand); background: var(--sf-brand-tint); }

@media (prefers-reduced-motion: reduce) {
	.sf-header { transition: none; }
}

/* The mobile panel is a dark sheet, so its nav keeps the on-dark palette even
   though the bar above it is white. */
.sf-header__panel.is-open .sf-nav__link { color: var(--sf-on-dark); }
.sf-header__panel.is-open .sf-nav__link:hover,
.sf-header__panel.is-open .sf-nav__item.is-current > .sf-nav__link { color: #fff; background: rgba(124, 58, 237, .22); }
.sf-header__panel.is-open .sf-nav__toggle { color: var(--sf-on-dark-muted); }
.sf-header__panel.is-open .sf-nav__toggle:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.sf-header__panel.is-open .sf-header__account,
.sf-header__panel.is-open .sf-header__cart { color: var(--sf-on-dark); }
.sf-header__panel.is-open .sf-header__account:hover,
.sf-header__panel.is-open .sf-header__cart:hover { color: #fff; background: rgba(255, 255, 255, .08); }

/* ---------------------------------------------------------------------------
 * Pipeline nodes, tidied.
 *
 * The five cards were unequal heights with content top-aligned, so short cards
 * left a large empty box under the last line and the row read as jumbled. Now
 * every card carries a coloured stage bar, the lists stretch to fill, and the
 * PRO badge sits on its row instead of wrapping onto a line of its own.
 * ------------------------------------------------------------------------ */
.sf-pipeline__node {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding-top: calc(var(--sf-space-4) + 3px);
	box-shadow: var(--sf-shadow-card);
}
/* A 3px stage bar across the top: the row gains a left-to-right progression
   instead of five identical white boxes. */
.sf-pipeline__node::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--sf-stage, var(--sf-brand));
}
.sf-pipeline__node--source { --sf-stage: #64748B; }
.sf-pipeline__node:nth-of-type(3) { --sf-stage: #6366F1; }
.sf-pipeline__node:nth-of-type(5) { --sf-stage: #7C3AED; }
.sf-pipeline__node:nth-of-type(7) { --sf-stage: #A855F7; }
.sf-pipeline__node--out { --sf-stage: var(--sf-grad-brand); }

/* Push the list down so every card's body starts at the same line and the
   card bottoms line up. */
.sf-pipeline__list { flex: 1 1 auto; }

/* Keep a trailing badge on the same line as its label. */
.sf-pipeline__list li { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.sf-pipeline__list .sf-badge { margin-inline-start: auto; }

@media (min-width: 900px) {
	.sf-pipeline { align-items: stretch; }
	.sf-pipeline__node { height: 100%; }
}

/* ---------------------------------------------------------------------------
 * Section tones.
 *
 * The inner pages were an unbroken run of white sections, which is what made
 * them feel flat. These three tones alternate down a page so each section has
 * its own ground, while staying within the indigo-violet family.
 * ------------------------------------------------------------------------ */

/* Tinted: slate ground with a brand wash at the top edge. */
.sf-section--tint {
	position: relative;
	background: var(--sf-ground-2);
	border-top: var(--sf-border);
	border-bottom: var(--sf-border);
}
.sf-section--tint::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 380px;
	background: var(--sf-atmos-bg,
		radial-gradient(760px 320px at 18% 0%, rgba(99, 102, 241, .10), transparent 70%),
		radial-gradient(680px 300px at 82% 6%, rgba(124, 58, 237, .08), transparent 72%));
	pointer-events: none;
}

/* Accent: a soft indigo-violet wash on white, for a section that should lift
   without going dark. */
.sf-section--accent {
	position: relative;
	/* The base used to be var(--sf-surface) — pure white — so the section read
	   as white with a faint wash floating on it. It now has a real gradient
	   ground that never reaches white. */
	background:
		linear-gradient(180deg, var(--sf-ground-3) 0%, var(--sf-ground-1) 55%, var(--sf-ground-2) 100%);
	border-top: var(--sf-border);
}
.sf-section--accent::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 420px;
	background: var(--sf-atmos-bg,
		radial-gradient(720px 340px at 72% 0%, rgba(124, 58, 237, .10), transparent 70%));
	pointer-events: none;
}

.sf-section--tint > *,
.sf-section--accent > * { position: relative; z-index: 1; }

/* A hairline rule that carries the brand, for use between stacked sections. */
.sf-rule-brand {
	height: 2px;
	border: 0;
	margin: 0;
	background: linear-gradient(90deg, transparent, rgba(99, 102, 241, .35) 22%, rgba(124, 58, 237, .6) 50%, rgba(99, 102, 241, .35) 78%, transparent);
}

/* Cards inside a toned section keep white so they still read as objects. */
.sf-section--tint .sf-card,
.sf-section--accent .sf-card { background: var(--sf-surface); }

/* FAQ rows: a brand marker on the open item and a tinted hover, so the list
   responds instead of sitting inert. */
.sf-faq__item { position: relative; transition: background .18s var(--sf-ease); }
.sf-faq__item::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block: 0;
	width: 2px;
	background: var(--sf-grad-brand);
	opacity: 0;
	transition: opacity .18s var(--sf-ease);
}
.sf-faq__item[open]::before { opacity: 1; }
.sf-faq__item[open] > summary { color: var(--sf-brand); }
.sf-faq__item > summary:hover { color: var(--sf-brand); }
@media (prefers-reduced-motion: reduce) {
	.sf-faq__item, .sf-faq__item::before { transition: none; }
}

/* ===========================================================================
 * 28. Atmosphere — reusable decorative primitives
 *
 * Depth without noise. Every one of these is decorative only: it sits behind
 * content, is pointer-events:none, carries no meaning, and is aria-hidden at
 * the markup level. Opacity stays in the 5-15% band so text contrast is never
 * a function of decoration.
 *
 * Usage:  <section class="sf-section sf-atmos sf-atmos--a"> … </section>
 *         optional extra: add .sf-atmos--grid or .sf-atmos--dots
 * ======================================================================== */

.sf-atmos { position: relative; isolation: isolate; }
.sf-atmos > * { position: relative; z-index: 1; }

/* No layer of its own: the section variants below already paint a ::before
   wash, so a second one would collide. The variants read --sf-atmos-bg, and
   these classes simply override it. One layer, many looks. */

/* Variant A — violet upper-left, blue upper-right. */
.sf-atmos--a {
	--sf-atmos-bg:
		radial-gradient(760px 420px at 14% 6%, rgba(124, 92, 255, .13), transparent 62%),
		radial-gradient(680px 380px at 86% 18%, rgba(79, 140, 255, .10), transparent 62%);
}
/* Variant B — mirrored, with a cool low note. */
.sf-atmos--b {
	--sf-atmos-bg:
		radial-gradient(720px 400px at 82% 4%, rgba(139, 92, 246, .12), transparent 62%),
		radial-gradient(640px 360px at 10% 34%, rgba(34, 211, 238, .07), transparent 64%);
}
/* Variant C — centred, wider, softest. For long reading sections. */
.sf-atmos--c {
	--sf-atmos-bg:
		radial-gradient(900px 460px at 50% -6%, rgba(109, 93, 251, .10), transparent 64%),
		radial-gradient(560px 320px at 88% 72%, rgba(124, 92, 255, .07), transparent 66%);
}
/* Variant D — for dark sections: brighter, since it sits on near-black. */
.sf-atmos--d {
	--sf-atmos-bg:
		radial-gradient(820px 460px at 18% 0%, rgba(124, 92, 255, .30), transparent 64%),
		radial-gradient(760px 420px at 84% 12%, rgba(79, 140, 255, .20), transparent 64%),
		radial-gradient(520px 340px at 62% 100%, rgba(34, 211, 238, .10), transparent 68%);
}

/* A fine grid, masked so it fades out before it reaches the content. */
.sf-atmos--grid::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		linear-gradient(to right, rgba(79, 70, 229, .07) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(79, 70, 229, .07) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(720px 340px at 50% 0%, #000, transparent 72%);
	mask-image: radial-gradient(720px 340px at 50% 0%, #000, transparent 72%);
}
.sf-section--dark.sf-atmos--grid::after {
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, .06) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, .06) 1px, transparent 1px);
}

/* A dot field, same masking idea. */
.sf-atmos--dots::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: radial-gradient(rgba(79, 70, 229, .13) 1px, transparent 1px);
	background-size: 26px 26px;
	-webkit-mask-image: radial-gradient(640px 320px at 76% 8%, #000, transparent 72%);
	mask-image: radial-gradient(640px 320px at 76% 8%, #000, transparent 72%);
}

/* A single hero-weight orb that can be dropped anywhere it is needed. */
.sf-orb {
	position: absolute;
	z-index: 0;
	border-radius: 50%;
	pointer-events: none;
	filter: blur(72px);
	opacity: .5;
}
.sf-orb--violet { background: radial-gradient(circle, rgba(124, 92, 255, .55), transparent 70%); }
.sf-orb--blue   { background: radial-gradient(circle, rgba(79, 140, 255, .45), transparent 70%); }
.sf-orb--cyan   { background: radial-gradient(circle, rgba(34, 211, 238, .30), transparent 70%); }

/* Mobile: fewer, cheaper layers. Big blurs are expensive on phones and the
   decoration reads as haze at that width anyway. */
@media (max-width: 767px) {
	.sf-atmos--grid::after, .sf-atmos--dots::after { display: none; }
	.sf-orb { filter: blur(48px); opacity: .38; }
}

/* Decoration must never be the reason something is legible. */
@media (prefers-reduced-transparency: reduce) {
	.sf-atmos::before, .sf-atmos::after, .sf-orb { display: none; }
}

/* ===========================================================================
 * 29. Premium surfaces — cards, glass, gradient borders
 * ======================================================================== */

/* Cards lift on hover everywhere, not only when they are links. */
.sf-card { transition: transform .2s var(--sf-ease), box-shadow .2s var(--sf-ease), border-color .2s var(--sf-ease); }
.sf-card:hover { box-shadow: 0 2px 6px rgba(50, 40, 120, .06), 0 32px 70px -28px rgba(50, 40, 120, .26); }

/* Glass: for cards sitting on a coloured or decorated ground. Used sparingly —
   the brief is explicit that this should not become glassmorphism everywhere. */
.sf-glass {
	background: var(--sf-glass);
	border: 1px solid var(--sf-glass-line);
	border-radius: var(--sf-r-xl);
	box-shadow: 0 20px 60px -24px rgba(50, 40, 120, .22);
	backdrop-filter: blur(16px) saturate(150%);
	-webkit-backdrop-filter: blur(16px) saturate(150%);
}
.sf-section--dark .sf-glass {
	background: rgba(255, 255, 255, .055);
	border-color: rgba(255, 255, 255, .12);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 30px 80px -30px rgba(0, 0, 0, .6);
}

/* A 1px gradient border, done with a mask so the inside stays any colour. */
.sf-gradient-border { position: relative; border-radius: var(--sf-r-xl); }
.sf-gradient-border::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(135deg, rgba(124, 92, 255, .85), rgba(79, 140, 255, .5) 55%, rgba(34, 211, 238, .35));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

/* Product screenshots deserve a stage: a soft brand glow behind the window. */
.sf-window { position: relative; }
.sf-window--stage::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;
}

/* Primary buttons carry a brand glow that deepens on hover. */
.sf-btn--primary { box-shadow: var(--sf-glow-btn, 0 8px 20px -8px rgba(79, 70, 229, .55)); }
.sf-btn--primary:hover { filter: brightness(1.06); box-shadow: 0 14px 30px -10px rgba(79, 70, 229, .7); }

@media (prefers-reduced-motion: reduce) {
	.sf-card, .sf-card:hover { transition: none; transform: none; }
}

/* ---------------------------------------------------------------------------
 * Grounds for the two sections that had none. Both rendered fully transparent,
 * so white cards sat on the near-white page and the band looked empty.
 * ------------------------------------------------------------------------ */
.sf-facts-strip-wrap {
	position: relative;
	background: linear-gradient(180deg, var(--sf-ground-2) 0%, var(--sf-ground-1) 100%);
	border-bottom: var(--sf-border);
}
.sf-cta-section {
	position: relative;
	background: var(--sf-ground-2);
	border-top: var(--sf-border);
}

/* Cards need real definition on a tinted ground: a white fill alone is not
   enough separation at these light values. */
.sf-fact {
	background: var(--sf-surface);
	border: 1px solid rgba(79, 70, 229, .14);
	border-radius: var(--sf-r-lg);
	box-shadow: var(--sf-shadow-card);
}
.sf-section--surface .sf-card,
.sf-section--tint .sf-card,
.sf-section--accent .sf-card,
.sf-channel,
.sf-pipeline__node { border-color: rgba(79, 70, 229, .14); }

/* ---------------------------------------------------------------------------
 * FAQ container. The rows sat as bare rules directly on the section ground,
 * which read as unfinished. They now live in a rounded surface panel with the
 * separators inside it.
 * ------------------------------------------------------------------------ */
.sf-faq-section .sf-faq {
	margin-top: var(--sf-space-5);
	padding: var(--sf-space-2) var(--sf-space-6);
	background: var(--sf-surface);
	border: 1px solid rgba(79, 70, 229, .14);
	border-radius: var(--sf-r-xl);
	box-shadow: var(--sf-shadow-card);
}
/* Inside a panel the outer rules are the panel's own edges. */
.sf-faq-section .sf-faq { border-top: 0; }
.sf-faq-section .sf-faq__item:last-child,
.sf-faq-section .sf-faq--cols .sf-faq__item:nth-last-child(-n+2) { border-bottom: 0; }
@media (min-width: 900px) {
	.sf-faq-section .sf-faq--cols { column-gap: var(--sf-space-8); }
	.sf-faq-section .sf-faq--cols .sf-faq__item:nth-child(-n+2) { border-top: 0; }
}
@media (max-width: 599px) {
	.sf-faq-section .sf-faq { padding-inline: var(--sf-space-4); }
}

/* ---------------------------------------------------------------------------
 * Section tempo.
 *
 * Three independent reviews landed on the same finding: six consecutive bands
 * within ~150px of each other, all with 112px/112px padding and the identical
 * eyebrow → two-line H2 → one big card lockup. Nothing short, nothing tall,
 * no break in format — which is what "flat" actually meant.
 *
 * These modifiers give a page real metre. Apply them per section so the scroll
 * has short bands and tall ones rather than seven of the same.
 * ------------------------------------------------------------------------ */
.sf-section--compact { padding-block: clamp(28px, 4vw, 48px); }
.sf-section--tall    { padding-block: clamp(56px, 7vw, 96px); }

/* A band that breaks the 1200px container, for the one section per page that
   should feel oversized. */
.sf-section--bleed > .sf-container { max-width: min(1560px, calc(100% - 2 * var(--sf-gutter))); }
/* …and one that narrows, for a section that should feel like a held breath. */
.sf-section--narrow > .sf-container { max-width: 960px; }

/* Accent hairlines must follow the corner radius rather than running straight
   across and squaring off the curve at both ends. */
.sf-card::before,
.sf-flow::before,
.sf-panel::before { border-start-start-radius: inherit; border-start-end-radius: inherit; }