/* saddle.to site styles. Ported once from the original site's CSS (2026-09-26); edit this file directly.
   The :root tokens mirror theme.json. */

/* ---- base and tokens */
/* Every colour, font, width and radius comes from theme.json (Appearance → Editor → Styles).
   The value after the comma is only the fallback for a build without global styles. */
:root {
	--ink: var(--wp--preset--color--ink, #262624);
	--ink-2: var(--wp--preset--color--ink-2, #52525b);
	--ink-3: var(--wp--preset--color--ink-3, #71717a);
	--paper: var(--wp--preset--color--paper, #ffffff);
	--panel: var(--wp--preset--color--panel, #f4f4f5);
	--panel-2: var(--wp--preset--color--panel-2, #fafafa);
	--panel-3: var(--wp--preset--color--panel-3, #e9e9ec);
	--rail: var(--wp--preset--color--rail, #e4e4e7);
	--rail-2: var(--wp--preset--color--rail-2, #d4d4d8);

	--accent: var(--wp--preset--color--accent, #d000c4);
	--accent-hover: var(--wp--preset--color--accent-hover, #b000a6);
	--accent-text: var(--wp--preset--color--accent-text, #a3009a);
	--accent-soft: var(--wp--preset--color--accent-soft, #ffb8f8);
	--accent-tint: var(--wp--preset--color--accent-tint, #fde0fb);
	--accent-line: var(--wp--preset--color--accent-line, #f7c4f1);

	--px-sky: var(--wp--custom--px--sky, #d6e0ea);
	--px-lime: var(--wp--custom--px--lime, #dbe77a);
	--px-sage: var(--wp--custom--px--sage, #a9b95a);

	--ok: var(--wp--custom--status--ok, #2f7d3b);
	--no: var(--wp--custom--status--no, #c2410c);
	--tag-read-border: var(--wp--custom--tag--read--border, #cfe3d3);
	--tag-read-bg: var(--wp--custom--tag--read--background, #f3faf4);
	--tag-read-ink: var(--wp--custom--tag--read--text, #2f6b3b);
	--tag-admin-border: var(--wp--custom--tag--admin--border, #f3d9c9);
	--tag-admin-bg: var(--wp--custom--tag--admin--background, #fdf6f1);
	--tag-admin-ink: var(--wp--custom--tag--admin--text, #8a4a1f);

	--sans: var(--wp--preset--font-family--sans, 'Geist Variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
	--mono: var(--wp--preset--font-family--mono, 'Geist Mono Variable', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);

	--frame: var(--wp--custom--width--frame, 1200px);
	--prose: var(--wp--custom--width--prose, 680px);
	--radius: var(--wp--custom--radius--md, 10px);
	--radius-sm: var(--wp--custom--radius--sm, 8px);

	--line: var(--rail);
	--line-2: var(--rail-2);
	--paper-2: var(--panel-2);
	--code-bg: var(--wp--preset--color--code-bg, #1d1d1b);
	--code-ink: var(--wp--preset--color--code-ink, #f1edf4);
	--wrap: var(--frame);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font: 17px/1.6 var(--sans);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

a { color: var(--accent-text); text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); transition: color 0.2s, text-decoration-color 0.2s; }
a:hover { color: var(--accent-hover); text-decoration-color: currentColor; }
a, button, summary, [role='tab'] { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3, h4 { margin: 0 0 0.5em; font-weight: 550; line-height: 1.08; letter-spacing: -0.03em; }
h1 { font-size: clamp(2.4rem, 5.6vw, 4.2rem); letter-spacing: -0.045em; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); }
h3 { font-size: 1.12rem; letter-spacing: -0.015em; line-height: 1.3; }
p { margin: 0 0 1em; }

code, pre, kbd { font-family: var(--mono); font-size: 0.88em; }
:not(pre) > code {
	background: var(--panel-2); border: 1px solid var(--rail); border-radius: 5px;
	padding: 0.06em 0.35em; overflow-wrap: anywhere;
}
pre {
	background: var(--code-bg) !important; color: var(--code-ink);
	padding: 16px 18px; border-radius: 8px; overflow-x: auto; line-height: 1.55; font-size: 0.85rem;
}
pre code { color: inherit; }




.frame {
	width: 100%;
	max-width: var(--frame);
	margin: 0 auto;
	border-left: 1px solid var(--rail);
	border-right: 1px solid var(--rail);
}

.rule { border-top: 1px solid var(--rail); }
.pad { padding-left: 48px; padding-right: 48px; }
@media (max-width: 720px) {
	.frame { border-left: 0; border-right: 0; }
	.pad { padding-left: 16px; padding-right: 16px; }
}


.cells { display: grid; gap: 1px; background: var(--rail); border-top: 1px solid var(--rail); border-bottom: 1px solid var(--rail); }
.cells > * { background: var(--paper); }



.mono { font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.02em; }
.label {
	font-family: var(--mono); font-size: 0.78rem; font-weight: 500;
	text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3);
}
.label-accent { color: var(--accent-text); }
.lede { font-size: 1.2rem; line-height: 1.55; color: var(--ink-2); max-width: 38em; }
.muted { color: var(--ink-3); }


.hl {
	background: var(--accent);
	color: var(--paper);
	padding: 0.02em 0.18em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	line-height: 1.28;
}

.hl-soft { background: var(--panel); padding: 0.05em 0.3em; border-radius: 3px; font-family: var(--mono); font-size: 0.92em; }



.pill {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 11px 16px; border-radius: 6px;
	font: 400 15px/1.15 var(--sans); text-decoration: none; white-space: nowrap;
	background: var(--accent); color: var(--paper); border: 1px solid var(--accent);
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pill:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--paper); }
.pill-soft { background: rgb(255 255 255 / 0.6); color: var(--ink); border-color: rgb(27 25 25 / 0.14); }
.pill-soft:hover { background: var(--paper); color: var(--ink); border-color: rgb(27 25 25 / 0.3); }
.pill-sm { padding: 8px 12px; font-size: 14px; }
.pill .chev { font-size: 1.1em; line-height: 0; transform: translateY(-1px); }
.pills { display: flex; flex-wrap: wrap; gap: 10px; }


.mono-cta {
	display: inline-flex; align-items: center; gap: 8px;
	font: 500 0.8rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.1em;
	color: var(--ink); text-decoration: none;
}
.mono-cta::after { content: '▶'; font-size: 0.7em; }
.mono-cta:hover { color: var(--accent-text); }

.chip {
	display: inline-flex; align-items: center; gap: 6px;
	font: 500 0.78rem/1 var(--mono); letter-spacing: 0.02em;
	padding: 6px 10px; border-radius: 999px; border: 1px solid var(--rail-2);
	background: var(--paper); color: var(--ink-2); white-space: nowrap;
}
.chip-ink { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip-accent { background: var(--accent-tint); border-color: var(--accent-line); color: var(--accent-hover); }


.schematic { background: var(--panel); border-radius: 4px; }

.visually-hidden {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap;
}



.wrap { width: 100%; max-width: var(--frame); margin: 0 auto; padding: 0 48px; }
@media (max-width: 720px) { .wrap { padding: 0 16px; } }
.eyebrow { display: inline-block; font: 500 0.78rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-text); margin-bottom: 14px; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 6px; font-weight: 400; font-size: 15px; text-decoration: none; border: 1px solid transparent; white-space: nowrap; }
.btn-primary, .btn-accent { background: var(--accent); color: var(--paper); }
.btn-primary:hover, .btn-accent:hover { background: var(--accent-hover); color: var(--paper); }
.btn-ghost { background: rgb(255 255 255 / 0.6); color: var(--ink); border-color: rgb(27 25 25 / 0.14); }
.btn-ghost:hover { background: var(--paper); color: var(--ink); border-color: rgb(27 25 25 / 0.3); }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.card { background: var(--paper); border: 1px solid var(--rail); border-radius: var(--radius); padding: 24px; }
.tag { display: inline-block; font: 500 0.74rem/1.5 var(--mono); padding: 2px 9px; border-radius: 999px; border: 1px solid var(--rail-2); color: var(--ink-2); background: var(--paper); white-space: nowrap; }
.tag-read { border-color: var(--tag-read-border); background: var(--tag-read-bg); color: var(--tag-read-ink); }
.tag-write { border-color: var(--accent-line); background: var(--accent-tint); color: var(--accent-hover); }
.tag-admin { border-color: var(--tag-admin-border); background: var(--tag-admin-bg); color: var(--tag-admin-ink); }
.tag-pro { border-color: var(--ink); background: var(--ink); color: var(--paper); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---- Base */
.skip {
		position: absolute; left: 12px; top: -48px; z-index: 20;
		background: var(--ink); color: var(--paper); padding: 8px 12px; border-radius: 8px;
	}
	.skip:focus { top: 12px; }

	.site-header {
		position: sticky; top: 0; z-index: 10;
		background: rgb(255 255 255 / 0.9);
		backdrop-filter: saturate(180%) blur(10px);
		border-bottom: 1px solid var(--rail);
	}
	.bar { display: flex; align-items: center; gap: 24px; height: 64px; }
	.brand {
		display: inline-flex; align-items: center; gap: 10px;
		color: var(--ink); text-decoration: none; font-weight: 600; font-size: 1.12rem; letter-spacing: -0.03em;
	}
	
	.brand-mark { display: inline-flex; color: var(--accent); }
	.brand-mark svg { width: 30px; height: 30px; }
	.bar nav { margin: 0 auto; }
	.bar nav ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
	.bar nav a {
		display: block; padding: 6px 12px; border-radius: 999px;
		color: var(--ink); text-decoration: none; font-size: 0.95rem; font-weight: 450;
	}
	.bar nav a:hover, .bar nav a[aria-current='page'] { background: var(--panel); color: var(--ink); }

	@media (max-width: 920px) {
		.bar { height: auto; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; gap: 8px 12px; }
		.bar > .pill { margin-left: auto; }
		.bar nav { order: 3; width: 100%; margin: 0; overflow-x: auto; }
		.bar nav a { padding: 6px 8px; font-size: 0.9rem; }
	}

	.site-footer { background: var(--paper); }
	.foot {
		display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
		gap: 32px 40px; padding-top: 48px; padding-bottom: 24px;
	}
	.foot-brand { display: grid; gap: 12px; align-content: start; }
	.foot-brand p { margin: 0; max-width: 30ch; color: var(--ink-3); font-size: 0.93rem; }
	.foot-col { display: grid; gap: 8px; align-content: start; }
	.foot-col .label { margin: 0 0 4px; }
	.foot-col a { color: var(--ink-2); text-decoration: none; font-size: 0.93rem; width: fit-content; }
	.foot-col a:hover { color: var(--accent-text); }
	.foot-base {
		grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px;
		padding-top: 18px; margin-top: 8px; border-top: 1px solid var(--rail);
		font-size: 0.76rem; color: var(--ink-3);
	}
	@media (max-width: 1000px) {
		.foot { grid-template-columns: repeat(4, minmax(0, 1fr)); }
		.foot-brand { grid-column: 1 / -1; }
	}
	@media (max-width: 760px) {
		.foot { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
		.foot-brand { grid-column: 1 / -1; }
	}

/* ---- Prompt */
.prompt {
		position: relative;
		background: var(--paper-2);
		border: 1px solid var(--line);
		border-left: 3px solid var(--accent-soft);
		border-radius: var(--radius-sm);
		padding: 16px 18px 14px;
	}
	.prompt p { margin: 0 0 12px; font-size: 1.02rem; color: var(--ink); }
	.copy {
		font: 600 0.85rem/1 var(--sans);
		padding: 8px 12px;
		border-radius: 8px;
		border: 1px solid var(--line-2);
		background: var(--paper);
		color: var(--ink);
		cursor: pointer;
	}
	.copy:hover { border-color: var(--ink-3); }

/* ---- TierTag */
.tier-tags { display: inline-flex; gap: 6px; flex-wrap: wrap; }

/* ---- AppIcon */
.app-icon {
		display: inline-grid; place-items: center;
		width: calc(var(--s) + 12px); height: calc(var(--s) + 12px);
		border: 1px solid var(--rail); border-radius: 7px; background: var(--paper);
		color: var(--ink); flex: none;
	}
	.app-icon svg { width: var(--s); height: var(--s); }
	.mono-letter { font: 600 calc(var(--s) * 0.78)/1 var(--mono); }

/* ---- PixelScene */
.pixel-scene {
		display: block;
		width: 100%;
		height: auto;
		image-rendering: pixelated;
		image-rendering: crisp-edges;
	}

/* ---- index (scoped .p-home) */
.p-home .hero-copy, .p-home.hero-copy { padding-top: 88px; padding-bottom: 48px; text-align: center; display: grid; justify-items: center; }
.p-home .hero h1, .p-home.hero h1 { max-width: 13.2em; margin-top: 18px; margin-bottom: 24px; font-size: clamp(2.5rem, 5.2vw, 4.25rem); line-height: 1.04; letter-spacing: -0.05em; text-wrap: balance; }
.p-home .hero .lede, .p-home.hero .lede { margin: 0 auto 30px; }
.p-home .hero-pills, .p-home.hero-pills { justify-content: center; }
.p-home .trust, .p-home.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; list-style: none; padding: 0; margin: 26px 0 0; color: var(--ink-2); }
.p-home .trust li::before, .p-home.trust li::before { content: '■'; color: var(--accent); font-size: 0.6em; margin-right: 8px; vertical-align: 2px; }
.p-home .stage, .p-home.stage {
		position: relative;
		border-top: 1px solid var(--rail);
		background-color: var(--panel-2);
		background-image: radial-gradient(var(--rail-2) 1px, transparent 1.2px);
		background-size: 14px 14px;
	}
.p-home .stage-inner, .p-home.stage-inner { padding-top: 56px; padding-bottom: 8px; }
@media (max-width: 720px) {
.p-home .hero-copy, .p-home.hero-copy { padding-top: 48px; padding-bottom: 36px; }
.p-home .stage-inner, .p-home.stage-inner { padding-top: 36px; padding-bottom: 28px; }

	
}
.p-home .section-head, .p-home.section-head { padding-top: 88px; padding-bottom: 36px; max-width: 900px; }
.p-home .section-head .label, .p-home.section-head .label { margin-bottom: 14px; }
.p-home .section-lede, .p-home.section-lede { margin: 18px 0 0; color: var(--ink-2); max-width: 40rem; }
.p-home .section-head h2, .p-home.section-head h2 { max-width: 24ch; margin: 0; }
@media (max-width: 720px) {
.p-home .section-head, .p-home.section-head { padding-top: 64px; padding-bottom: 28px; }
 
}
.p-home .cols-2, .p-home.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.p-home .cols-3, .p-home.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.p-home .cols-4, .p-home.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.p-home .pad-cell, .p-home.pad-cell { padding: 36px 48px 38px; }
.p-home .cell h3, .p-home.cell h3 { margin-bottom: 8px; }
.p-home .cell p, .p-home.cell p { color: var(--ink-2); margin: 0; }
@media (max-width: 900px) {
.p-home .cols-3, .p-home.cols-3, .p-home .cols-2, .p-home.cols-2 { grid-template-columns: 1fr; }
.p-home .cols-4, .p-home.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.p-home .pad-cell, .p-home.pad-cell { padding: 24px 16px 26px; }

	
}
.p-home .glyph, .p-home.glyph { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: var(--panel); margin-bottom: 18px; }
.p-home .glyph svg, .p-home.glyph svg { width: 22px; height: 22px; }
.p-home .problem-close, .p-home.problem-close { padding-top: 40px; padding-bottom: 72px; display: grid; gap: 18px; max-width: 760px; }
.p-home .problem-body, .p-home.problem-body { color: var(--ink-2); font-size: 1.1rem; margin: 0; }
.p-home .problem-line, .p-home.problem-line { font: 500 1.15rem/1.5 var(--mono); letter-spacing: -0.01em; margin: 0; padding-left: 16px; border-left: 3px solid var(--accent); }
.p-home .steps, .p-home.steps { list-style: none; margin: 0; padding: 0; }
.p-home .step-n, .p-home.step-n { display: block; color: var(--accent-text); margin-bottom: 18px; }
.p-home .how-notes, .p-home.how-notes { padding-top: 22px; padding-bottom: 36px; display: grid; gap: 4px; }
.p-home .how-notes p, .p-home.how-notes p { margin: 0; }
.p-home .tabs-wrap, .p-home.tabs-wrap { border-bottom: 0; }
.p-home .tabs, .p-home.tabs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); background: var(--paper); }
.p-home .tab-list, .p-home.tab-list { display: grid; align-content: start; padding: 28px 32px 32px 48px; }
.p-home .tab-list-label, .p-home.tab-list-label { margin-bottom: 8px; }
.p-home .tab, .p-home.tab {
		all: unset; box-sizing: border-box; cursor: pointer;
		display: grid; gap: 6px; padding: 16px 0 16px; border-top: 1px solid var(--rail);
	}
.p-home .tab:focus-visible, .p-home.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.p-home .tab-title, .p-home.tab-title { font-weight: 550; font-size: 1.02rem; display: flex; align-items: center; gap: 8px; color: var(--ink-3); }
.p-home .tab-body, .p-home.tab-body, .p-home .tab .mono-cta, .p-home.tab .mono-cta { display: none; }
.p-home .tab[aria-selected='true'] .tab-title, .p-home.tab[aria-selected='true'] .tab-title { color: var(--ink); }
.p-home .tab[aria-selected='true'], .p-home.tab[aria-selected='true'] { border-top: 2px solid var(--ink); padding-top: 15px; }
.p-home .tab[aria-selected='true'] .tab-body, .p-home.tab[aria-selected='true'] .tab-body { display: block; color: var(--ink-2); font-size: 0.97rem; }
.p-home .tab[aria-selected='true'] .mono-cta, .p-home.tab[aria-selected='true'] .mono-cta { display: inline-flex; margin-top: 8px; }
.p-home .tab-panels, .p-home.tab-panels { margin: 28px 32px 32px 0; display: grid; place-items: center; padding: 36px; min-height: 360px; }
.p-home .panel, .p-home.panel { width: 100%; max-width: 460px; }
@media (max-width: 900px) {
.p-home .tabs, .p-home.tabs { grid-template-columns: 1fr; }
.p-home .tab-list, .p-home.tab-list { padding: 20px 16px; }
.p-home .tab-panels, .p-home.tab-panels { margin: 0 16px 28px; padding: 20px 14px; min-height: 0; }

	
}
.p-home .win, .p-home.win { background: var(--paper); border-radius: 8px; border: 1px solid var(--rail); overflow: hidden; box-shadow: 0 16px 32px -24px rgb(20 30 60 / 0.4); }
.p-home .win-bar, .p-home.win-bar { display: flex; align-items: center; gap: 5px; padding: 9px 12px; border-bottom: 1px solid var(--rail); background: var(--panel-2); }
.p-home .win-bar i, .p-home.win-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--rail-2); }
.p-home .win-bar .mono, .p-home.win-bar .mono { margin-left: 8px; color: var(--ink-3); font-size: 0.75rem; }
.p-home .rows, .p-home.rows { display: grid; }
.p-home .row, .p-home.row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--panel); font-size: 0.8rem; }
.p-home .row .mono, .p-home.row .mono { font-size: 0.75rem; }
.p-home .row > span:last-child:not([class*=bar]), .p-home.row > span:last-child:not([class*=bar]) { margin-left: auto; }
.p-home [class^='bar-'] { height: 8px; border-radius: 4px; background: var(--panel); flex: 1; max-width: 220px; }
.p-home .bar-l, .p-home.bar-l { max-width: 220px; }
.p-home .bar-m, .p-home.bar-m { max-width: 160px; }
.p-home .bar-s, .p-home.bar-s { max-width: 110px; }
.p-home .diff, .p-home.diff { background: linear-gradient(90deg, var(--accent-tint), var(--accent-soft)); }
.p-home .win-note, .p-home.win-note { margin: 0; padding: 10px 14px; font-size: 0.75rem; color: var(--ok); background: var(--panel-2); }
.p-home .tree, .p-home.tree { padding: 12px 14px; font-size: 0.78rem; display: grid; gap: 7px; }
.p-home .tree .in, .p-home.tree .in { padding-left: 18px; border-left: 1px dashed var(--rail-2); margin-left: 5px; }
.p-home .note, .p-home.note { padding: 16px 18px; }
.p-home .note .mono, .p-home.note .mono { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); margin: 0 0 8px; }
.p-home .note ul, .p-home.note ul { margin: 0; padding-left: 18px; font-size: 0.92rem; }
.p-home .never, .p-home.never { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.p-home .never li, .p-home.never li { display: flex; gap: 12px; align-items: baseline; font-size: 1.02rem; }
.p-home .never li::before, .p-home.never li::before { content: '✕'; color: var(--no); font: 600 0.9rem/1 var(--mono); }
.p-home .proof-demo, .p-home.proof-demo { display: grid; gap: 16px; background: var(--panel-2) !important; }
.p-home .preview-card, .p-home.preview-card { background: var(--paper); border: 1px solid var(--rail); border-radius: 8px; padding: 16px 18px; }
.p-home .preview-card p, .p-home.preview-card p { margin: 0 0 6px; }
.p-home .pc-ask, .p-home.pc-ask { color: var(--ink) !important; }
.p-home .pc-tool, .p-home.pc-tool { color: var(--ink-3) !important; margin-top: 10px !important; }
.p-home .pc-tag, .p-home.pc-tag { color: var(--accent-text); font-weight: 600; }
.p-home .pc-msg, .p-home.pc-msg { color: var(--ink) !important; font-weight: 500; }
.p-home .pc-actions, .p-home.pc-actions { display: flex; gap: 8px; margin: 12px 0 10px; }
.p-home .pc-actions .pill, .p-home.pc-actions .pill { pointer-events: none; }
.p-home .pc-exp, .p-home.pc-exp { font-size: 0.75rem !important; }
.p-home .log, .p-home.log { background: var(--paper); border: 1px solid var(--rail); border-radius: 8px; padding: 14px 16px; font-size: 0.78rem; }
.p-home .log .label, .p-home.log .label { margin: 0 0 8px; }
.p-home .log-row, .p-home.log-row { display: grid; grid-template-columns: 18px 100px minmax(0, 1fr) auto; gap: 8px; padding: 6px 0; border-top: 1px solid var(--panel); }
.p-home .log-row .ok, .p-home.log-row .ok { color: var(--ok); }
.p-home .log-row .no, .p-home.log-row .no { color: var(--no); }
@media (max-width: 560px) {
.p-home .log-row, .p-home.log-row { grid-template-columns: 18px 1fr; }
.p-home .log-row span:nth-child(n+3), .p-home.log-row span:nth-child(n+3) { grid-column: 2; }
 
}
.p-home .stats, .p-home.stats { border-top: 0; }
.p-home .stat, .p-home.stat { padding: 30px 48px; }
.p-home .stat-n, .p-home.stat-n { font-size: clamp(2rem, 4vw, 2.8rem) !important; font-weight: 550; letter-spacing: -0.04em; color: var(--ink) !important; line-height: 1; margin-bottom: 10px !important; }
@media (max-width: 900px) {
.p-home .stat, .p-home.stat { padding: 22px 16px; }
 
}
.p-home .checks, .p-home.checks { border-top: 0; }
.p-home .check, .p-home.check { text-decoration: none; color: inherit; display: grid; gap: 6px; align-content: start; transition: background-color 0.15s ease; }
.p-home .check:hover, .p-home.check:hover { background: var(--panel-2); color: inherit; }
.p-home .check .mono-cta, .p-home.check .mono-cta { margin-top: 10px; }
.p-home .check .text-cta::after, .p-home.check .text-cta::after { content: none; }
.p-home .plan, .p-home.plan { display: flex; flex-direction: column; }
.p-home .plan h3, .p-home.plan h3 { font-size: 1.4rem; margin: 0; }
.p-home .plan-price, .p-home.plan-price { font: 500 0.85rem/1 var(--mono) !important; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-text) !important; margin: 10px 0 16px !important; }
.p-home .plan-lede, .p-home.plan-lede { color: var(--ink) !important; margin-bottom: 18px !important; }
.p-home .plan ul, .p-home.plan ul { margin: 0 0 28px; padding-left: 18px; color: var(--ink-2); flex: 1; display: grid; gap: 6px; }
.p-home .plan li::marker, .p-home.plan li::marker { content: '■  '; color: var(--accent-soft); font-size: 0.7em; }
.p-home .plan .pill, .p-home.plan .pill { align-self: flex-start; }
.p-home .plan-pro, .p-home.plan-pro { background: var(--panel-2) !important; }
.p-home .plans-note, .p-home.plans-note { padding-top: 16px; padding-bottom: 64px; margin: 0; }
.p-home .final-inner, .p-home.final-inner { text-align: center; display: grid; justify-items: center; padding-top: 96px; padding-bottom: 72px; }
.p-home .final h2, .p-home.final h2 { max-width: 18ch; }
.p-home .final .lede, .p-home.final .lede { margin: 6px auto 30px; }
.p-home .final .pills, .p-home.final .pills { justify-content: center; }

/* ---- Doc (scoped .p-docs) */
.p-docs .doc-grid, .p-docs.doc-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; padding-top: 56px; padding-bottom: 96px; }
.p-docs .doc-nav, .p-docs.doc-nav { position: sticky; top: 88px; align-self: start; }
.p-docs .doc-nav-title, .p-docs.doc-nav-title { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); font-weight: 600; }
.p-docs .doc-nav ul, .p-docs.doc-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.p-docs .doc-nav a, .p-docs.doc-nav a {
		display: block; padding: 7px 12px; border-radius: 8px;
		color: var(--ink-2); text-decoration: none; font-size: 0.95rem;
	}
.p-docs .doc-nav a:hover, .p-docs.doc-nav a:hover { background: var(--paper-2); color: var(--ink); }
.p-docs .doc-nav a[aria-current='page'], .p-docs.doc-nav a[aria-current='page'] { background: var(--accent-tint); color: var(--accent-hover); font-weight: 600; }
.p-docs .prose, .p-docs.prose { max-width: var(--prose); min-width: 0; }
.p-docs .prose h1, .p-docs.prose h1 { font-size: clamp(2rem, 4vw, 2.6rem); }
.p-docs .prose .lede, .p-docs.prose .lede { margin-bottom: 32px; }
.p-docs .prose h2, .p-docs.prose h2 { font-size: 1.45rem; margin-top: 48px; padding-top: 8px; }
.p-docs .prose h3, .p-docs.prose h3 { font-size: 1.1rem; margin-top: 32px; }
.p-docs .prose ul, .p-docs.prose ul, .p-docs .prose ol, .p-docs.prose ol { padding-left: 22px; }
.p-docs .prose li, .p-docs.prose li { margin: 6px 0; }
.p-docs .prose table, .p-docs.prose table { width: 100%; border-collapse: collapse; margin: 16px 0 24px; font-size: 0.95rem; display: block; overflow-x: auto; }
.p-docs .prose th, .p-docs.prose th, .p-docs .prose td, .p-docs.prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.p-docs .prose th, .p-docs.prose th { font-weight: 600; color: var(--ink-3); font-size: 0.85rem; }
.p-docs .prose blockquote, .p-docs.prose blockquote {
		margin: 20px 0; padding: 14px 18px; border-left: 3px solid var(--accent-soft);
		background: var(--paper-2); border-radius: 0 8px 8px 0; color: var(--ink-2);
	}
.p-docs .prose blockquote p:last-child, .p-docs.prose blockquote p:last-child { margin: 0; }
.p-docs .prose hr, .p-docs.prose hr { border: 0; border-top: 1px solid var(--line); margin: 48px 0; }
@media (max-width: 860px) {
.p-docs .doc-grid, .p-docs.doc-grid { grid-template-columns: 1fr; gap: 24px; padding-top: 32px; }
.p-docs .doc-nav, .p-docs.doc-nav { position: static; }
.p-docs .doc-nav ul, .p-docs.doc-nav ul { display: flex; flex-wrap: wrap; gap: 6px; }
.p-docs .doc-nav a, .p-docs.doc-nav a { border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; font-size: 0.9rem; }
.p-docs .doc-nav-title, .p-docs.doc-nav-title { display: none; }

	
}

/* ---- recipes/index (scoped .p-recipes) */
.p-recipes .page-head, .p-recipes.page-head { padding: 64px 0 24px; }
.p-recipes .jump, .p-recipes.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.p-recipes .jump a, .p-recipes.jump a {
		text-decoration: none; color: var(--ink-2); font-size: 0.92rem; font-weight: 500;
		border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px;
	}
.p-recipes .jump a:hover, .p-recipes.jump a:hover { border-color: var(--ink-3); color: var(--ink); }
.p-recipes .group, .p-recipes.group { padding: 32px 0; scroll-margin-top: 80px; }
.p-recipes .group:last-of-type, .p-recipes.group:last-of-type { padding-bottom: 88px; }
.p-recipes .group h2, .p-recipes.group h2 { font-size: 1.35rem; margin-bottom: 16px; }
.p-recipes .list, .p-recipes.list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.p-recipes .item, .p-recipes.item { text-decoration: none; color: inherit; padding: 20px 22px; transition: border-color 0.15s ease; }
.p-recipes .item:hover, .p-recipes.item:hover { border-color: var(--accent-soft); color: inherit; }
.p-recipes .item-head, .p-recipes.item-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.p-recipes .item h3, .p-recipes.item h3 { margin: 0; font-size: 1.05rem; }
.p-recipes .item p, .p-recipes.item p { margin: 8px 0 0; font-size: 0.95rem; }
@media (max-width: 760px) {
.p-recipes .list, .p-recipes.list { grid-template-columns: 1fr; }
.p-recipes .item-head, .p-recipes.item-head { flex-direction: column; gap: 8px; }

	
}

/* ---- recipes/[slug] (scoped .p-recipe) */
.p-recipe .recipe, .p-recipe.recipe { max-width: calc(var(--prose) + 48px); padding-top: 56px; padding-bottom: 96px; }
.p-recipe .crumbs, .p-recipe.crumbs { font-size: 0.9rem; color: var(--ink-3); }
.p-recipe .crumbs a, .p-recipe.crumbs a { color: var(--ink-3); text-decoration: none; }
.p-recipe .crumbs a:hover, .p-recipe.crumbs a:hover { color: var(--ink); }
.p-recipe h1 { font-size: clamp(2rem, 4vw, 2.6rem); }
.p-recipe .meta, .p-recipe.meta { margin-bottom: 32px; }
.p-recipe h2 { font-size: 1.1rem; margin-top: 36px; }
.p-recipe ul { padding-left: 20px; color: var(--ink-2); }
.p-recipe li { margin: 6px 0; }
.p-recipe .more, .p-recipe.more { margin-top: 48px; padding-top: 8px; border-top: 1px solid var(--line); }

/* ---- alternatives/index (scoped .p-alts) */
.p-alts .head, .p-alts.head { padding-top: 72px; padding-bottom: 48px; max-width: 880px; }
.p-alts .head .label, .p-alts.head .label { margin-bottom: 14px; }
.p-alts .cols-3, .p-alts.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.p-alts .pad-cell, .p-alts.pad-cell { padding: 30px 48px 32px; }
.p-alts .pad-cell .label, .p-alts.pad-cell .label { margin-bottom: 10px; }
.p-alts .pad-cell p:last-child, .p-alts.pad-cell p:last-child { margin: 0; color: var(--ink-2); }
.p-alts .section-head, .p-alts.section-head { padding-top: 64px; padding-bottom: 24px; }
.p-alts .section-head h2, .p-alts.section-head h2 { margin: 0; }
.p-alts .rows, .p-alts.rows { list-style: none; margin: 0; padding: 0 0 72px; }
.p-alts .row, .p-alts.row {
		display: grid; grid-template-columns: 180px 190px minmax(0, 1fr) auto; gap: 24px; align-items: baseline;
		padding: 22px 48px; border-top: 1px solid var(--rail); text-decoration: none; color: inherit;
		transition: background-color 0.15s ease;
	}
.p-alts .rows li:last-child .row, .p-alts.rows li:last-child .row { border-bottom: 1px solid var(--rail); }
.p-alts .row:hover, .p-alts.row:hover { background: var(--panel-2); color: inherit; }
.p-alts .row-name, .p-alts.row-name { font-weight: 600; font-size: 1.1rem; }
.p-alts .row-type, .p-alts.row-type { color: var(--ink-3); }
.p-alts .row-line, .p-alts.row-line { color: var(--ink-2); }
@media (max-width: 900px) {
.p-alts .cols-3, .p-alts.cols-3 { grid-template-columns: 1fr; }
.p-alts .pad-cell, .p-alts.pad-cell { padding: 22px 16px; }
.p-alts .row, .p-alts.row { grid-template-columns: 1fr; gap: 6px; padding: 20px 16px; }

	
}

/* ---- alternatives/[slug] (scoped .p-alt) */
.p-alt .head, .p-alt.head { padding-top: 72px; padding-bottom: 56px; max-width: 860px; }
.p-alt .crumbs, .p-alt.crumbs { color: var(--ink-3); margin-bottom: 18px; }
.p-alt .crumbs a, .p-alt.crumbs a { color: var(--ink-3); text-decoration: none; }
.p-alt .crumbs a:hover, .p-alt.crumbs a:hover { color: var(--ink); }
.p-alt .head h1, .p-alt.head h1 { margin-bottom: 20px; }
.p-alt .head .lede, .p-alt.head .lede { margin-bottom: 28px; }
.p-alt .section-head, .p-alt.section-head { padding-top: 72px; padding-bottom: 28px; }
.p-alt .section-head .label, .p-alt.section-head .label { margin-bottom: 12px; }
.p-alt .section-head h2, .p-alt.section-head h2 { margin: 0; max-width: 24ch; }
.p-alt .h-sm, .p-alt.h-sm { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin: 12px 0 18px; }
.p-alt .table-wrap, .p-alt.table-wrap { overflow-x: auto; border-top: 1px solid var(--rail); }
.p-alt .cmp, .p-alt.cmp { width: 100%; border-collapse: collapse; min-width: 640px; }
.p-alt .cmp th, .p-alt.cmp th, .p-alt .cmp td, .p-alt.cmp td { text-align: left; vertical-align: top; padding: 16px 20px; border-bottom: 1px solid var(--rail); font-size: 0.97rem; }
.p-alt .cmp thead th, .p-alt.cmp thead th { font-weight: 600; font-size: 1rem; padding-top: 20px; padding-bottom: 20px; }
.p-alt .cmp tbody th, .p-alt.cmp tbody th { width: 24%; font-size: 0.8rem; font-weight: 500; color: var(--ink-3); padding-left: 48px; }
.p-alt .cmp td, .p-alt.cmp td { width: 38%; color: var(--ink-2); }
.p-alt .cmp .us-col, .p-alt.cmp .us-col { background: var(--accent-tint); color: var(--ink); }
.p-alt .us-head, .p-alt.us-head { display: inline-flex; align-items: center; gap: 8px; }
.p-alt .us-mark, .p-alt.us-mark { display: inline-flex; color: var(--accent); }
.p-alt .us-mark svg, .p-alt.us-mark svg { width: 24px; height: 24px; }
.p-alt .cols-2, .p-alt.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.p-alt .pad-cell, .p-alt.pad-cell { padding: 40px 48px 44px; }
.p-alt .soft, .p-alt.soft { background: var(--panel-2) !important; }
.p-alt .list, .p-alt.list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; color: var(--ink-2); }
.p-alt .list li, .p-alt.list li { padding-left: 22px; position: relative; }
.p-alt .list li::before, .p-alt.list li::before { content: '■'; position: absolute; left: 0; top: 0.05em; color: var(--ink-3); font-size: 0.65em; }
.p-alt .list-ok li::before, .p-alt.list-ok li::before { content: '✓'; color: var(--accent-text); font: 600 0.85rem/1.6 var(--mono); top: 0; }
@media (max-width: 900px) {
.p-alt .cols-2, .p-alt.cols-2 { grid-template-columns: 1fr; }
.p-alt .pad-cell, .p-alt.pad-cell { padding: 28px 16px 32px; }
.p-alt .cmp tbody th, .p-alt.cmp tbody th { padding-left: 16px; }

	
}
.p-alt .faq, .p-alt.faq { padding-bottom: 72px; max-width: 820px; display: grid; }
.p-alt details { border-top: 1px solid var(--rail); padding: 18px 0; }
.p-alt details:last-child { border-bottom: 1px solid var(--rail); }
.p-alt summary { cursor: pointer; font-weight: 550; font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.p-alt summary::-webkit-details-marker { display: none; }
.p-alt summary::after { content: '+'; font-family: var(--mono); color: var(--ink-3); }
.p-alt details[open] summary::after { content: '−'; }
.p-alt details p { margin: 12px 0 0; color: var(--ink-2); max-width: 68ch; }
.p-alt .final, .p-alt.final { text-align: center; display: grid; justify-items: center; padding-top: 80px; padding-bottom: 56px; }
.p-alt .final h2, .p-alt.final h2 { max-width: 20ch; }
.p-alt .final .lede, .p-alt.final .lede { margin: 4px auto 26px; }
.p-alt .final .pills, .p-alt.final .pills { justify-content: center; }
.p-alt .basis, .p-alt.basis { margin: 0; padding-top: 14px; padding-bottom: 0; font-size: 0.78rem; }
.p-alt .all, .p-alt.all { margin-top: 26px; }

/* ---- download (scoped .p-download) */
.p-download .dl, .p-download.dl { padding-top: 64px; padding-bottom: 96px; }
.p-download .dl-grid, .p-download.dl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 32px; }
.p-download .dl-grid h2, .p-download.dl-grid h2 { font-size: 1.2rem; }
.p-download .dl-grid ol, .p-download.dl-grid ol { padding-left: 20px; color: var(--ink-2); }
.p-download .dl-grid li, .p-download.dl-grid li { margin: 6px 0; }
.p-download dl { margin: 24px 0 0; display: grid; gap: 8px; font-size: 0.93rem; }
.p-download dl div { display: flex; gap: 12px; }
.p-download dt { color: var(--ink-3); min-width: 76px; }
.p-download dd { margin: 0; }
.p-download .next, .p-download.next { margin-top: 40px; }
.p-download .next p, .p-download.next p { margin-bottom: 8px; }
@media (max-width: 760px) {
.p-download .dl-grid, .p-download.dl-grid { grid-template-columns: 1fr; }
 
}

/* ---- 404 (scoped .p-404) */
.p-404 .nf, .p-404.nf { padding-top: 96px; padding-bottom: 72px; display: grid; justify-items: center; text-align: center; }
.p-404 .nf .label, .p-404.nf .label { margin-bottom: 16px; }
.p-404 .nf h1, .p-404.nf h1 { margin-bottom: 18px; }
.p-404 .nf .lede, .p-404.nf .lede { margin: 0 auto 28px; }
.p-404 .nf .pills, .p-404.nf .pills { justify-content: center; }
.p-404 .nf-links, .p-404.nf-links { list-style: none; padding: 0; margin: 36px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; }

/* ---- HeroDiagram (scoped .stage-inner) */
.stage-inner .diagram, .stage-inner.diagram, .sb-hero__stage .diagram {
		margin: 0;
		display: grid;
		grid-template-columns: minmax(190px, 220px) minmax(60px, 1fr) minmax(0, 2.6fr);
		align-items: center;
		gap: 0;
	}
.stage-inner .node, .stage-inner.node, .sb-hero__stage .node {
		background: var(--paper);
		border: 1px solid var(--rail-2);
		border-radius: var(--radius);
		box-shadow: 0 1px 0 rgb(11 11 12 / 0.02), 0 14px 32px -22px rgb(20 30 60 / 0.35);
	}
.stage-inner .node p, .stage-inner.node p { margin: 0; }
.stage-inner .apps, .stage-inner.apps, .sb-hero__stage .apps { padding: 14px 14px 10px; }
.stage-inner .apps .label, .stage-inner.apps .label { margin-bottom: 10px; }
.stage-inner .apps ul, .stage-inner.apps ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.stage-inner .apps li, .stage-inner.apps li { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; font-weight: 500; }
.stage-inner .apps .any, .stage-inner.apps .any { color: var(--ink-3); font-weight: 400; }
.stage-inner .plus, .stage-inner.plus, .sb-hero__stage .plus {
		display: inline-grid; place-items: center; width: 30px; height: 30px;
		border: 1px dashed var(--rail-2); border-radius: 7px; font-family: var(--mono);
	}
.stage-inner .wire, .stage-inner.wire, .sb-hero__stage .wire { position: relative; height: 2px; background: repeating-linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 10px); }
.stage-inner .wire-in, .stage-inner.wire-in, .sb-hero__stage .wire-in { margin: 0 -1px; }
.stage-inner .no-relay, .stage-inner.no-relay, .sb-hero__stage .no-relay {
		position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
		display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
		font: 500 0.72rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3);
		background: var(--paper); padding: 5px 8px; border: 1px solid var(--rail); border-radius: 999px;
	}
.stage-inner .dot, .stage-inner.dot, .sb-hero__stage .dot {
		position: absolute; top: 50%; left: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px;
		border-radius: 2px; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint);
		opacity: 0;
	}
.stage-inner .dot-in, .stage-inner.dot-in, .sb-hero__stage .dot-in { animation: travel-in 6s linear infinite; }
.stage-inner .dot-out, .stage-inner.dot-out, .sb-hero__stage .dot-out { animation: travel-out 6s linear infinite; }
.stage-inner .site, .stage-inner.site, .sb-hero__stage .site {
		position: relative;
		border: 1.5px dashed var(--rail-2);
		border-radius: 14px;
		padding: 34px 18px 18px;
		background: rgb(255 255 255 / 0.55);
	}
.stage-inner .site-label, .stage-inner.site-label, .sb-hero__stage .site-label {
		position: absolute; top: -11px; left: 16px; margin: 0;
		background: var(--paper); padding: 2px 8px; border: 1px solid var(--rail); border-radius: 999px;
		color: var(--ink-2);
	}
.stage-inner .site-inner, .stage-inner.site-inner, .sb-hero__stage .site-inner { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(36px, 0.5fr) minmax(0, 1fr); align-items: center; }
.stage-inner .saddle, .stage-inner.saddle, .sb-hero__stage .saddle { padding: 16px; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint), 0 18px 36px -24px rgb(120 0 112 / 0.3); }
.stage-inner .saddle-head, .stage-inner.saddle-head, .sb-hero__stage .saddle-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.stage-inner .saddle-mark, .stage-inner.saddle-mark, .sb-hero__stage .saddle-mark { display: inline-flex; flex: none; color: var(--accent); }
.stage-inner .saddle-mark svg, .stage-inner.saddle-mark svg { width: 44px; height: 44px; }
.stage-inner .saddle-name, .stage-inner.saddle-name, .sb-hero__stage .saddle-name { font-weight: 600; font-size: 1.1rem; letter-spacing: -0.02em; }
.stage-inner .gates, .stage-inner.gates, .sb-hero__stage .gates { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.stage-inner .gates li, .stage-inner.gates li {
		display: flex; align-items: center; gap: 10px;
		font: 500 0.82rem/1.2 var(--mono); padding: 8px 10px; border-radius: 6px; background: var(--panel-2);
		border: 1px solid transparent;
	}
.stage-inner .gate-n, .stage-inner.gate-n, .sb-hero__stage .gate-n { color: var(--ink-3); font-size: 0.72rem; }
.stage-inner .gate-confirm, .stage-inner.gate-confirm, .sb-hero__stage .gate-confirm { animation: gate 6s linear infinite; }
.stage-inner .wp, .stage-inner.wp, .sb-hero__stage .wp { padding: 18px 14px; text-align: center; display: grid; justify-items: center; gap: 6px; }
.stage-inner .wp-name, .stage-inner.wp-name, .sb-hero__stage .wp-name { font-weight: 600; letter-spacing: -0.02em; }
.stage-inner .caption, .stage-inner.caption, .sb-hero__stage .caption { grid-column: 1 / -1; text-align: center; color: var(--ink-2); margin-top: 22px; }
@keyframes travel-in {
		0% { left: 0; opacity: 0; }
		4% { opacity: 1; }
		28% { left: 100%; opacity: 1; }
		30%, 100% { left: 100%; opacity: 0; }
	}
@keyframes gate {
		0%, 29% { background: var(--panel-2); border-color: transparent; color: var(--ink); }
		32%, 56% { background: var(--accent-tint); border-color: var(--accent); color: var(--accent-hover); }
		60%, 100% { background: var(--panel-2); border-color: transparent; color: var(--ink); }
	}
@keyframes travel-out {
		0%, 58% { left: 0; opacity: 0; }
		60% { opacity: 1; }
		84% { left: 100%; opacity: 1; }
		86%, 100% { left: 100%; opacity: 0; }
	}
@media (max-width: 900px) {
.stage-inner .diagram, .stage-inner.diagram, .sb-hero__stage .diagram { grid-template-columns: 1fr; justify-items: stretch; }
.stage-inner .apps ul, .stage-inner.apps ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stage-inner .wire, .stage-inner.wire, .sb-hero__stage .wire { width: 2px; height: 56px; margin: 0 auto; background: repeating-linear-gradient(180deg, var(--ink) 0 6px, transparent 6px 10px); }
.stage-inner .no-relay, .stage-inner.no-relay, .sb-hero__stage .no-relay { left: 14px; bottom: auto; top: 50%; transform: translateY(-50%); }
.stage-inner .dot, .stage-inner.dot, .sb-hero__stage .dot { top: 0; left: 50%; margin: -5px 0 0 -5px; }
.stage-inner .dot-in, .stage-inner.dot-in, .sb-hero__stage .dot-in { animation-name: travel-in-v; }
.stage-inner .dot-out, .stage-inner.dot-out, .sb-hero__stage .dot-out { animation-name: travel-out-v; }
.stage-inner .site-inner, .stage-inner.site-inner, .sb-hero__stage .site-inner { grid-template-columns: 1fr; }
.stage-inner .wire-out, .stage-inner.wire-out, .sb-hero__stage .wire-out { height: 40px; }

	
}
@keyframes travel-in-v {
		0% { top: 0; opacity: 0; } 4% { opacity: 1; } 28% { top: 100%; opacity: 1; } 30%, 100% { top: 100%; opacity: 0; }
	}
@keyframes travel-out-v {
		0%, 58% { top: 0; opacity: 0; } 60% { opacity: 1; } 84% { top: 100%; opacity: 1; } 86%, 100% { top: 100%; opacity: 0; }
	}


/* ---- v2: pricing, plugin and legal pages (class contract in planning/SITE-V2.md) */

/* Header: Account is a quiet link at the end of the menu. */
.bar .nav-account { margin-left: 8px; }
.bar .nav-account .wp-block-navigation-item__content { color: var(--ink-2); }
@media (max-width: 920px) { .bar .nav-account { margin-left: 0; } }
/* A sub-pixel overflow never makes the page scroll sideways; wide tables scroll in their own box. */
body { overflow-x: clip; }
/* Phones: Recipes and Changelog stay in the footer, so the header row fits. */
@media (max-width: 520px) { .bar .nav-extra { display: none; } }

/* Chips: .chip, .chip.is-accent (POPULAR), .chip.is-muted (COMING SOON). */
.chip { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; }
p.chip { margin: 0; width: fit-content; }
.chip.is-accent { background: var(--accent-tint); border-color: var(--accent-line); color: var(--accent-hover); }
.chip.is-muted { background: var(--panel-2); border-color: var(--rail); color: var(--ink-2); }

/* Plans: three columns, the featured card has a brand edge, a soon card is muted. */
.sb-plans.cols-3 > .sb-plan { min-width: 0; }
.sb-plan.is-featured { box-shadow: inset 0 0 0 1px var(--accent); }
.sb-plan.is-soon { background: var(--panel-2); color: var(--ink-2); }
.sb-plan .sb-plan-price { font-family: var(--sans); font-size: clamp(1.8rem, 3.2vw, 2.4rem); font-weight: 550; letter-spacing: -0.03em; line-height: 1.1; text-transform: none; color: var(--ink); margin: 6px 0 12px; }
.sb-plan > .wp-block-list { align-content: start; }
.sb-plan .sb-plan-price .per { font-size: 1rem; font-weight: 400; letter-spacing: 0; color: var(--ink-2); }
/* Plan and cell names are h2 where no section heading sits above them; keep the h3 size. */
.sb-plan > h2 { font-size: 1.4rem; margin: 0; letter-spacing: -0.015em; line-height: 1.2; }
.sb-cell > h2 { margin: 0 0 8px; font-size: 1.12rem; letter-spacing: -0.015em; line-height: 1.3; }
.sb-plan.is-soon .sb-plan-price { color: var(--ink-3); }
.sb-plan.is-soon .wp-block-button__link,
.sb-plan .wp-block-button.is-style-pill-soft .wp-block-button__link { background: var(--panel); color: var(--ink); border-color: var(--rail-2); }
.sb-plan.is-soon .wp-block-button__link:hover { background: var(--panel-3); color: var(--ink); }

/* Compare table: figure.wp-block-table.compare */
figure.wp-block-table.compare { margin: 0; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
figure.wp-block-table.compare table { width: 100%; min-width: 520px; border-collapse: collapse; border: 0; font-size: 0.97rem; }
figure.wp-block-table.compare thead { border: 0; }
figure.wp-block-table.compare th,
figure.wp-block-table.compare td { border: 0; border-bottom: 1px solid var(--rail); padding: 14px 16px; text-align: left; vertical-align: middle; }
figure.wp-block-table.compare th { font-weight: 600; color: var(--ink); }
figure.wp-block-table.compare tr > :not(:first-child) { text-align: center; width: 18%; }
figure.wp-block-table.compare tbody td:first-child { color: var(--ink-2); }
figure.wp-block-table.compare tbody tr:has(> :first-child > strong) > td,
figure.wp-block-table.compare tbody tr:has(> :first-child > strong) > th { background: var(--panel-2); padding-top: 18px; padding-bottom: 10px; }
figure.wp-block-table.compare tbody tr > :first-child > strong {
	font: 500 0.78rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2);
}
figure.wp-block-table.compare .yes,
figure.wp-block-table.compare .no {
	position: relative; display: inline-block; width: 18px; height: 18px; vertical-align: middle;
	font-size: 0; line-height: 0; /* the words stay for screen readers, only the icon shows */
}
figure.wp-block-table.compare .yes::before,
figure.wp-block-table.compare .no::before {
	content: ''; position: absolute; inset: 0; background: currentColor;
	-webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}
figure.wp-block-table.compare .yes { color: var(--accent); --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
figure.wp-block-table.compare .no { color: var(--ink-3); --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8h7' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
figure.wp-block-table.compare:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* FAQ: .faq around core/details */
.faq { max-width: 820px; }
.faq .wp-block-details { border-top: 1px solid var(--rail); padding: 0; margin: 0; }
.faq .wp-block-details:last-child { border-bottom: 1px solid var(--rail); }
.faq .wp-block-details summary {
	display: flex; justify-content: space-between; align-items: center; gap: 16px;
	padding: 18px 0; font-weight: 550; font-size: 1.05rem; list-style: none; cursor: pointer; border-radius: var(--radius-sm);
}
.faq .wp-block-details summary::-webkit-details-marker { display: none; }
.faq .wp-block-details summary::after {
	content: ''; flex: none; width: 16px; height: 16px; background: var(--ink-3); transition: transform 0.15s ease;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.faq .wp-block-details[open] summary::after { transform: rotate(180deg); }
.faq .wp-block-details summary:hover { color: var(--accent-text); }
.faq .wp-block-details summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.faq .wp-block-details > :not(summary) { margin: 0 0 18px; color: var(--ink-2); max-width: 68ch; }

/* Steps: ol.steps */
ol.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 28px; }
ol.steps > li { counter-increment: step; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 16px; margin: 0; }
ol.steps > li::before {
	content: counter(step, decimal-leading-zero); font: 500 1.6rem/1.1 var(--mono); letter-spacing: -0.02em; color: var(--accent-text); grid-row: 1 / span 3;
}
ol.steps > li > * { grid-column: 2; margin: 0; }
ol.steps > li > strong { font-size: 1.1rem; font-weight: 550; }
@media (max-width: 480px) { ol.steps > li { grid-template-columns: 44px minmax(0, 1fr); } }

/* Trust strip: .trust */
.trust { font: 500 0.82rem/1.6 var(--mono); letter-spacing: 0.02em; color: var(--ink-3); text-align: center; margin: 0; }

/* The Cloud list: .cloud-list holds the email button */
.cloud-list { background: var(--panel); border: 0; border-radius: var(--radius); padding: 32px 28px; max-width: 640px; margin-left: auto; margin-right: auto; }
.cloud-list h2, .cloud-list h3 { margin-top: 0; font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
/* Saddle Blocks fixes, until the plugin carries them: the hero copy track may
   shrink below its widest child, and a button in a narrow cell may wrap. */
.sb-hero__copy { grid-template-columns: minmax(0, 1fr); }
.sb-cell .wp-block-button__link { max-width: 100%; white-space: normal; }
.sb-cell > .wp-block-buttons { margin-top: 14px; }
/* A section head that holds only its label needs less height. */
.sb-section-head:has(> .sb-label:only-child) { padding-top: 56px; padding-bottom: 20px; }
@media (max-width: 720px) { .sb-section-head:has(> .sb-label:only-child) { padding-top: 40px; padding-bottom: 16px; } }
/* Inside a section frame, match the section head's side padding. */
.sb-cta h2 + .wp-block-buttons { margin-top: 28px; }
.sb-frame > .trust { margin: 0; padding: 28px 48px; }
.sb-frame > .faq { box-sizing: content-box; padding: 0 48px 88px; }
.sb-frame > .cloud-list { margin: 72px auto; }
@media (max-width: 720px) {
	.sb-frame > .faq { padding: 0 16px 64px; }
	.sb-frame > .cloud-list { margin: 48px 16px; }
	.sb-frame > .trust { padding: 24px 16px; }
}
.cloud-list .sb-signup__form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 0; }
.cloud-list .sb-signup__field { flex: 1 1 220px; display: grid; gap: 6px; font: 500 0.85rem/1.3 var(--sans); color: var(--ink-2); }
.cloud-list .sb-signup__field input {
	width: 100%; font: 400 1rem/1.2 var(--sans); color: var(--ink); background: var(--paper);
	border: 1px solid var(--rail-2); border-radius: 999px; padding: 12px 18px;
}
.cloud-list .sb-signup__field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cloud-list .sb-signup__button {
	font: 400 15px/1.15 var(--sans); padding: 13px 22px; border-radius: 6px; border: 1px solid var(--accent);
	background: var(--accent); color: var(--paper); cursor: pointer;
}
.cloud-list .sb-signup__button:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.cloud-list .sb-signup__message { flex-basis: 100%; margin: 0; font-size: 0.92rem; color: var(--ink-2); }
.cloud-list .sb-signup__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 720px) { .cloud-list { padding: 24px 16px; } }

/* Legal pages: the page-legal template */
.p-legal { padding-top: 56px; padding-bottom: 96px; }
.p-legal .legal { max-width: var(--prose); margin: 0 auto; counter-reset: legal; }
.p-legal .legal h1 { font-size: clamp(2rem, 4vw, 2.6rem); margin-bottom: 12px; }
.p-legal .legal h2 { counter-increment: legal; font-size: 1.3rem; margin: 40px 0 10px; letter-spacing: -0.02em; }
.p-legal .legal h2::before { content: counter(legal) '. '; font-family: var(--mono); font-size: 0.9em; color: var(--ink-3); margin-right: 2px; }
.p-legal .legal p, .p-legal .legal li { color: var(--ink-2); }
.p-legal .legal ul, .p-legal .legal ol { padding-left: 22px; }
.legal-updated { font: 500 0.82rem/1.5 var(--mono); letter-spacing: 0.02em; color: var(--ink-3); margin: 0 0 24px; }
mark.blank {
	background: var(--accent-soft); color: var(--ink); padding: 0.05em 0.3em; border-radius: 3px;
	outline: 1px dashed var(--ink-3); outline-offset: 1px; font-family: var(--mono); font-size: 0.92em;
}
@media print {
	.p-legal { padding: 0; }
	.p-legal .legal { max-width: none; }
	mark.blank { background: none; outline: 1px dashed var(--ink); }
}

/* Focus: visible on every interactive thing, including buttons and the skip link. */
.wp-block-button__link:focus-visible, .sb-signup__button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.skip-link:focus { z-index: 100000; }

/* =====================================================================
   v2 design
   Source: planning/SITE-V2-DESIGN.md and planning/site-v2-mockup/home.dc.html.
   Used by front-page and page-canvas. Every class starts with s-.
   Everything above this line is the v1 frame (docs, recipes, alternatives,
   legal): v2 pages never use .frame, .pad, .cells or .p-home.
   ===================================================================== */
:root {
	--s-ink: var(--wp--preset--color--ink, #262624);
	--s-ink-2: var(--wp--preset--color--ink-2, #52525b);
	--s-ink-txt: #3f3f46;
	--s-ink-on-dark: var(--wp--preset--color--ink-on-dark, #c8c8ce);
	--s-ink-3-dark: var(--wp--preset--color--ink-3-dark, #36363c);
	/* The brand: one magenta for the site, the plugin admin and Cloud (Fahim, 2026-10-12, after relume.ai). */
	--s-brand: var(--wp--preset--color--accent, #d000c4);
	--s-brand-hover: var(--wp--preset--color--accent-hover, #b000a6);
	--s-brand-text: var(--wp--preset--color--accent-text, #a3009a);
	--s-brand-soft: var(--wp--preset--color--accent-soft, #ffb8f8);
	--s-brand-tint: var(--wp--preset--color--accent-tint, #fde0fb);
	--s-sky: var(--wp--preset--color--sky, #f1f1f4);
	--s-panel: var(--wp--preset--color--panel-v2, #f5f5f6);
	--s-panel-2: var(--wp--preset--color--panel-2, #fafafa);
	--s-line: var(--wp--preset--color--line, #e4e4e7);
	--s-line-2: var(--wp--preset--color--line-2, #efeff1);
	--s-line-3: var(--wp--preset--color--rail-2, #d4d4d8);
	--s-t-pages: var(--wp--preset--color--t-pages, #dcefe3);
	--s-t-seo: var(--wp--preset--color--t-seo, #dfe7fb);
	--s-t-stats: var(--wp--preset--color--t-stats, #fbe9d3);
	--s-t-email: var(--wp--preset--color--t-email, #f8dde5);
	--s-chip-pages-bg: var(--wp--preset--color--chip-pages-bg, #e4f3ea);
	--s-chip-pages-fg: var(--wp--preset--color--chip-pages-fg, #1d6340);
	--s-chip-seo-bg: var(--wp--preset--color--chip-seo-bg, #e6edff);
	--s-chip-seo-fg: var(--wp--preset--color--chip-seo-fg, #2846a8);
	--s-chip-stats-bg: var(--wp--preset--color--chip-stats-bg, #fff0dd);
	--s-chip-stats-fg: var(--wp--preset--color--chip-stats-fg, #8a4300);
	--s-chip-email-bg: var(--wp--preset--color--chip-email-bg, #fde8ee);
	--s-chip-email-fg: var(--wp--preset--color--chip-email-fg, #9c1f47);
	--s-refused: var(--wp--preset--color--refused, #8a2f13);
	--s-peach: #f6d3c2;
	--s-sky-2: #c9dcf0;
	--s-grey: #cacad0;
	--s-grey-bg: #eef2f4;
	--s-amber: #c96a12;
	--s-amber-fill: #fde3c3;
	--s-shadow: 0 1px 0 rgb(0 0 0 / 0.05), 0 18px 40px -18px rgb(38 38 36 / 0.28);
	--s-pad: max(80px, calc((100vw - 1120px) / 2));

	--s-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 280'%3E%3Cpath fill='black' fill-rule='evenodd' d='M140 0C217.32 0 280 62.68 280 140C280 217.32 217.32 280 140 280C62.68 280 0 217.32 0 140C0 62.68 62.68 0 140 0ZM185.04 71.09C167.92 71.09 159.82 92.7 140 92.7C120.18 92.7 112.08 71.09 94.96 71.09C77.85 71.09 63.44 85.05 63.44 104.85V199.36C63.44 204.33 67.47 208.36 72.45 208.36H94.96C99.94 208.36 103.97 204.33 103.97 199.36V158.85C103.97 138.96 120.1 122.85 140 122.85C159.9 122.85 176.03 138.96 176.03 158.85V199.36C176.03 204.33 180.06 208.36 185.04 208.36H207.56C212.53 208.36 216.56 204.33 216.56 199.36V104.85C216.56 85.05 202.15 71.09 185.04 71.09Z'/%3E%3C/svg%3E");
	--s-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	--s-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}
@media (max-width: 900px) { :root { --s-pad: 32px; } }
@media (max-width: 520px) { :root { --s-pad: 16px; } }

body { overflow-x: clip; }

/* ---- the header (Fahim, 2026-10-22: "black notch look bad", "keep 1 notch", "rethink of the
   design"). A light bar across the page, so the home hero's tabs are the site's one notch: the
   mark on the left, the menu in the middle, Sign in and the one brand button on the right, on the
   content's edges. At the top it is the first section's color; once the page scrolls (nav.js sets
   is-scrolled) it turns frosted white with a hairline under it. It stays under WordPress's admin
   bar while that bar is fixed. Below 901px the menu folds into the drawer. */
body .wp-block-template-part.site-header {
	position: sticky; top: 0; z-index: 50; padding: 0; border-bottom: 0;
	background: transparent; box-shadow: 0 1px 0 transparent;
	-webkit-backdrop-filter: none; backdrop-filter: none;
	transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
body.admin-bar .wp-block-template-part.site-header { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { body.admin-bar .wp-block-template-part.site-header { top: 0; } }
body:has(#main > .s-bg-sky:first-child, #main > .wp-block-post-content > .s-bg-sky:first-child) .wp-block-template-part.site-header:not(.is-scrolled) { background: var(--s-sky); }
body .wp-block-template-part.site-header.is-scrolled {
	background: rgb(255 255 255 / 0.86); box-shadow: 0 1px 0 rgb(38 38 36 / 0.08);
	-webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
}
.wp-block-group.s-header {
	position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px;
	max-width: none; height: 64px; margin: 0; padding: 0 var(--s-pad); box-sizing: border-box;
	border: 0; border-radius: 0; background: none;
}
.s-header .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; letter-spacing: -0.015em; color: var(--s-ink); text-decoration: none; }
.s-header .brand-mark svg { width: 28px; height: 28px; }
.s-header .wp-block-navigation { margin: 0; }
.s-header .s-nav { justify-self: center; }
.s-header .wp-block-navigation .wp-block-navigation__container { gap: 2px; flex-wrap: nowrap; }
.s-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: block; padding: 0; border-radius: 0; background: none;
	color: var(--s-ink-2); text-decoration: none; font-size: 14.5px; font-weight: 500; transition: color 0.2s;
}
.s-header .wp-block-navigation-submenu__toggle { color: var(--s-ink-2); transition: color 0.2s; }
.s-header .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.s-header .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-submenu__toggle,
.s-header .s-nav .wp-block-navigation-item__content[aria-current='page'] { color: var(--s-ink); }
/* Sign in reads like a menu link; Choose your plan is the brand button, in the buttons' 6px shape. */
.s-header .wp-block-buttons { gap: 6px; margin: 0; flex-wrap: nowrap; }
.s-header .s-header-right .wp-block-button .wp-block-button__link {
	display: inline-flex; align-items: center; height: 36px; padding: 0 14px; box-sizing: border-box;
	border: 0; border-radius: 6px; font: 500 14.5px/1 var(--sans); white-space: nowrap; text-decoration: none;
	transition: background-color 0.2s, color 0.2s;
}
.s-header .s-header-right .s-hdr-signin .wp-block-button__link { padding: 0 12px; border-radius: 8px; background: none; color: var(--s-ink-2); }
.s-header .s-header-right .s-hdr-signin .wp-block-button__link:hover { background: rgb(38 38 36 / 0.05); color: var(--s-ink); }
.s-header .s-header-right .s-hdr-cta .wp-block-button__link { background: var(--s-brand); color: #fff; }
.s-header .s-header-right .s-hdr-cta .wp-block-button__link:hover { background: var(--s-brand-hover); color: #fff; }
@media (min-width: 901px) {
	/* Each link sits on a soft tile when hovered or current, the same 8px as the Features panel's items. */
	.s-header .s-nav .wp-block-navigation__container > .wp-block-navigation-item:not(.s-nav-drawer) { gap: 4px; height: 36px; padding: 0 12px; border-radius: 8px; transition: background-color 0.2s; }
	.s-header .s-nav .wp-block-navigation__container > .wp-block-navigation-item:hover,
	.s-header .s-nav .wp-block-navigation__container > .wp-block-navigation-item:has(> [aria-current='page']) { background: rgb(38 38 36 / 0.05); }
	/* The Features panel centres on the page, under the bar. */
	.s-header .s-nav, .s-header .s-nav .wp-block-navigation__container, .s-header .s-nav li.s-mega,
	.s-header .wp-block-navigation__responsive-container:not(.is-menu-open), .s-header .wp-block-navigation__responsive-dialog { position: static; }
}
@media (min-width: 901px) and (max-width: 1100px) {
	.wp-block-group.s-header { grid-template-columns: auto minmax(0, 1fr) auto; padding: 0 32px; }
}

/* The Features panel (Fahim, 2026-10-17: "megamenu look very old boring, make cleaner more
   readble copy and icons should cleaner smaller"): three products, each under its mark;
   every item a 16px line icon, a name and one short line. See everything at the foot. */
.s-header .s-mega > .wp-block-navigation__submenu-container {
	display: grid; grid-template-columns: repeat(3, 252px); grid-auto-flow: row dense; column-gap: 16px; row-gap: 2px;
	left: 50%; top: calc(100% + 4px); transform: translateX(-50%);
	padding: 20px 16px 0; border: 1px solid rgb(38 38 36 / 0.08); border-radius: 14px;
	background: #fff; box-shadow: 0 1px 2px rgb(38 38 36 / 0.04), 0 24px 48px -24px rgb(38 38 36 / 0.3); overflow: hidden;
}
.s-header .s-mega:hover > .wp-block-navigation__submenu-container,
.s-header .s-mega:focus-within > .wp-block-navigation__submenu-container,
.s-header .s-mega > .wp-block-navigation-submenu__toggle[aria-expanded=true] ~ .wp-block-navigation__submenu-container { width: max-content; min-width: 0; }
.s-header .s-mega > .wp-block-navigation__submenu-container::before { content: ''; position: absolute; left: 0; right: 0; top: -20px; height: 20px; }
.s-mega .s-c1 { grid-column: 1; }
.s-mega .s-c2 { grid-column: 2; }
.s-mega .s-c3 { grid-column: 3; }
.s-mega .s-c4 { grid-column: 4; }
/* Column head: the product's mark (with its crown or cloud badge, as on /features/) and its name. */
.s-header .s-mega .s-mh { margin: 0 10px 6px; padding-bottom: 12px; border-bottom: 1px solid var(--s-line-2); }
.s-header .wp-block-navigation .s-mega .s-mh.wp-block-navigation-item > .wp-block-navigation-item__content {
	position: relative; display: flex; align-items: center; gap: 10px; padding: 0;
	font-size: 14px; font-weight: 600; line-height: 20px; letter-spacing: -0.005em; text-transform: none; color: var(--s-ink);
}
.s-header .s-mega .s-mh > .wp-block-navigation-item__content::before { content: ''; flex: none; width: 20px; height: 20px; background: var(--s-mark-brand) center / contain no-repeat; }
.s-header .s-mega .s-mh.s-c2 > .wp-block-navigation-item__content::after,
.s-header .s-mega .s-mh.s-c3 > .wp-block-navigation-item__content::after { content: ''; position: absolute; left: 11px; top: 10px; width: 13px; height: 13px; box-sizing: border-box; border: 2px solid #fff; border-radius: 50%; background: var(--s-ink) center / 7px no-repeat; }
/* Items: a small line icon, the name, one short line. The icon turns brand on hover. */
.s-header .wp-block-navigation .s-mega .s-mi.wp-block-navigation-item > .wp-block-navigation-item__content {
	display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 12px; align-items: start;
	padding: 9px 10px; border-radius: 8px; color: var(--s-ink); text-decoration: none; white-space: normal; transition: background-color 0.15s;
}
.s-header .wp-block-navigation .s-mega .s-mi.wp-block-navigation-item > .wp-block-navigation-item__content:hover,
.s-header .wp-block-navigation .s-mega .s-mi.wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible { background: var(--s-panel); }
.s-mega .s-mi > .wp-block-navigation-item__content::before { content: ''; grid-column: 1; grid-row: 1 / span 2; width: 16px; height: 16px; margin-top: 2px; background: var(--s-ink-2); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; transition: background-color 0.15s; }
.s-mega .s-mi > .wp-block-navigation-item__content:hover::before, .s-mega .s-mi > .wp-block-navigation-item__content:focus-visible::before { background: var(--s-brand); }
.s-mega .s-mi .wp-block-navigation-item__label { grid-column: 2; font-size: 14px; font-weight: 500; line-height: 20px; }
.s-mega .s-mi .wp-block-navigation-item__description { grid-column: 2; display: block; margin-top: 1px; font-size: 13px; line-height: 18px; color: var(--s-ink-2); }
.s-header .s-mega .s-mi-more { grid-column: 1 / -1; margin: 14px -16px 0; padding: 0 16px; border-top: 1px solid var(--s-line-2); background: var(--s-panel-2); }
.s-header .wp-block-navigation .s-mega .s-mi-more.wp-block-navigation-item > .wp-block-navigation-item__content { display: flex; align-items: center; padding: 13px 10px; font-size: 14px; font-weight: 500; color: var(--s-brand-text); }
.s-header .s-mega .s-mi-more > .wp-block-navigation-item__content::after { content: ''; width: 14px; height: 14px; margin-left: 4px; background: currentColor; -webkit-mask: var(--s-chev) center / contain no-repeat; mask: var(--s-chev) center / contain no-repeat; }
@media (max-width: 1100px) { .s-header .s-mega > .wp-block-navigation__submenu-container { grid-template-columns: repeat(3, 236px); } }
@media (max-width: 900px) {
	.wp-block-group.s-header { grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; height: 60px; }
	.wp-block-group.s-header > .s-header-right { grid-column: 2; grid-row: 1; }
	.wp-block-group.s-header > .s-nav { grid-column: 3; grid-row: 1; justify-self: end; }
	.s-header .s-header-right .wp-block-button .wp-block-button__link { height: 40px; }
}
/* Phones keep Sign in beside the menu button; Choose your plan waits in the drawer. */
@media (max-width: 600px) { .s-header .s-header-right .s-hdr-cta { display: none; } }

/* The footer: ink, so the page ends in one dark piece with the CTA's land, and chatseo.app's link
   columns (2026-10-16: "follow ... footer idea of links"). The brand and its line on the left,
   three groups on the right, then a bar with the copyright and the legal pages (2026-10-17,
   Fahim: "make it better footer"; one Sign in, since /account/ leads to both sign-ins). */
.site-footer.rule { border-top: 0; }
.wp-block-template-part.site-footer { background: var(--s-ink); border-top: 0; }
.s-footer {
	display: grid; grid-template-columns: minmax(260px, 2fr) repeat(3, minmax(150px, 1fr)); gap: 48px 48px;
	/* The same container as the page sections: full width with --s-pad at the
	   sides, so its columns line up with the content above (Fahim, 2026-10-17:
	   "use same container as main continer"). */
	box-sizing: border-box;
	padding: 72px var(--s-pad) 32px; font-size: 15px; line-height: 1.5; color: var(--s-ink-on-dark);
}
.s-footer p { margin: 0; }
.s-foot-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.s-footer .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; letter-spacing: -0.01em; color: #fff; text-decoration: none; }
/* The mark is white on ink (AGENTS.md section 4). */
.s-footer .brand-mark { color: #fff; }
.s-footer .brand-mark svg { width: 26px; height: 26px; }
.s-footer .s-foot-line { max-width: 28ch; margin-top: 4px; color: #a1a1aa; }
/* Column labels are quiet so the links lead (Fahim, 2026-10-17: "footer make nicer clean"). #a1a1aa on ink is 5.9:1. */
.s-footer .s-foot-label { margin: 0 0 16px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #a1a1aa; }
.s-footer .wp-block-navigation .wp-block-navigation__container { flex-direction: column; align-items: flex-start; gap: 12px; }
.s-footer .wp-block-navigation-item__content { padding: 0; color: var(--s-ink-on-dark); text-decoration: none; white-space: nowrap; transition: color 0.2s; }
.s-footer .wp-block-navigation-item__content:hover { color: #fff; }
.s-footer .foot-base {
	grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
	margin: 24px 0 0; padding: 24px 0 0; border-top: 1px solid rgb(255 255 255 / 0.08); font: 400 14px/1.5 var(--sans); color: #a1a1aa;
}
.s-footer .foot-base p { margin: 0; }
.s-footer .s-foot-legal { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.s-footer .s-foot-legal a { color: #a1a1aa; text-decoration: none; transition: color 0.2s; }
.s-footer .s-foot-legal a:hover { color: #fff; }
@media (max-width: 1100px) {
	.s-footer { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; padding-top: 56px; }
	.s-footer .foot-base { margin-top: 8px; }
	.s-foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
	.s-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- sections and backgrounds */
.s-section {
	box-sizing: border-box; overflow-x: clip;
	padding: 96px var(--s-pad) 0;
}
.s-section:has(> .s-h1) { padding-top: 88px; }
.s-section:has(> .s-statement) { padding-top: 128px; padding-bottom: 32px; }
.s-section:has(> .s-feat) { padding-top: 40px; }
.s-section:has(> .s-apps) { padding-top: 72px; }
.s-section:has(> .s-bento) { padding-top: 120px; }
.s-section:has(> .s-plans), .s-section:has(> .s-faq) { padding-top: 136px; }
.s-section:has(> .s-cta) { padding-top: 136px; padding-bottom: 96px; }
.s-section.s-bg-sky:has(.s-ridge) { padding-bottom: 0; }
.wp-block-post-content > .s-section:last-child { padding-bottom: 96px; }
.s-section p { margin: 0; }
.s-section .wp-block-heading { margin: 0; }
.s-center { text-align: center; }

.s-bg-sky { background: var(--s-sky); }
.s-bg-panel { background: var(--s-panel); }
.s-bg-ink { background: var(--s-ink); color: #fff; }
.s-bg-lime { background: var(--s-brand-tint); }
.s-bg-pages { background: var(--s-t-pages); }
.s-bg-seo { background: var(--s-t-seo); }
.s-bg-stats { background: var(--s-t-stats); }
.s-bg-email { background: var(--s-t-email); }
.s-bg-ink .s-mut { color: var(--s-ink-on-dark); }

/* ---- type */
.s-section .s-h1 { max-width: 1100px; margin: 0 auto; font-size: 84px; line-height: 1; letter-spacing: -0.05em; font-weight: 700; text-wrap: balance; }
.s-section .s-h2 { margin: 14px 0 0; font-size: 42px; line-height: 1.08; letter-spacing: -0.035em; font-weight: 700; }
.s-section .s-h3 { margin: 0; font-size: 40px; line-height: 1.08; letter-spacing: -0.035em; font-weight: 700; }
.s-section .s-card .s-h3 { font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; }
.s-section .s-statement { max-width: 1000px; margin: 0 auto; font-size: 60px; line-height: 1.05; letter-spacing: -0.045em; font-weight: 700; text-wrap: balance; }
.s-section .s-label + .s-h2, .s-section .s-label + .s-h1 { margin-top: 14px; }
.s-hl { background: var(--s-brand-soft); color: var(--s-ink); padding: 0 10px; border-radius: 10px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.s-section .s-sub { margin: 14px 0 0; font-size: 18px; line-height: 1.55; color: var(--s-ink-2); }
.s-section.s-center .s-sub { max-width: 640px; margin-left: auto; margin-right: auto; }
.s-section .s-h1 ~ .s-sub { max-width: 700px; margin: 28px auto 0; font-size: 21px; line-height: 1.5; color: var(--s-ink-txt); }
.s-section .s-statement ~ .s-sub { max-width: 680px; margin: 22px auto 0; font-size: 21px; line-height: 1.5; color: var(--s-ink-2); }
.s-section .s-note { margin: 18px 0 0; font-size: 15px; color: var(--s-ink-2); }
.s-section .s-bg-sky .s-note, .s-section.s-bg-sky .s-note { color: var(--s-ink-txt); }
.s-section .s-label { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--s-brand-text); }
.s-section .s-bg-ink .s-label, .s-section.s-bg-ink .s-label { color: var(--s-brand-soft); }
.s-section .s-bg-ink .s-sub, .s-section.s-bg-ink .s-sub { color: var(--s-ink-on-dark); }
.s-section .s-mut { color: var(--s-ink-2); }
.s-section .s-bg-ink .s-mut { color: var(--s-ink-on-dark); }
.s-section .s-center.s-note, .s-section p.s-note.s-center { margin: 28px 0 0; text-align: center; }
.s-section .s-art-text, .s-section .s-ask-status { font-size: 14px; line-height: 1.5; color: var(--s-ink-txt); }
/* Links: the brand's text shade, a quiet underline that fills in on hover. */
.s-section a:where(:not(.wp-block-button__link)) {
	color: var(--s-brand-text); text-underline-offset: 3px; text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); transition: color 0.2s, text-decoration-color 0.2s;
}
.s-section a:where(:not(.wp-block-button__link)):hover { color: var(--s-brand-hover); text-decoration-color: currentColor; }
.s-section .s-bg-ink a:where(:not(.wp-block-button__link)), .s-section.s-bg-ink a:where(:not(.wp-block-button__link)) { color: var(--s-brand-soft); }

/* ---- buttons: Relume's shape (Fahim, 2026-10-12). 6px corners, regular weight, the colour
   changes on hover and nothing moves. Brand is the one primary; every other style is the quiet
   secondary with a hairline edge, light on light sections and clear on dark ones. */
.s-section .wp-block-buttons, .s-cta .wp-block-buttons { gap: 10px; margin: 28px 0 0; }
.s-section .wp-block-buttons.is-content-justification-center, .s-section.s-center > .wp-block-buttons, .s-center .wp-block-buttons, .s-cta .wp-block-buttons { justify-content: center; }
.s-section.s-center > .s-h1 ~ .wp-block-buttons { margin-top: 34px; }
.wp-block-button.is-style-olive .wp-block-button__link,
.wp-block-button.is-style-dark .wp-block-button__link,
.wp-block-button.is-style-light .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 12px 18px; border-radius: 6px; font: 400 16px/1.15 var(--sans);
	border: 1px solid transparent; text-decoration: none; white-space: nowrap;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.wp-block-button.is-style-olive .wp-block-button__link { background: var(--s-brand); color: #fff; border-color: var(--s-brand); }
.wp-block-button.is-style-olive .wp-block-button__link:hover { background: var(--s-brand-hover); border-color: var(--s-brand-hover); color: #fff; }
.wp-block-button.is-style-dark .wp-block-button__link,
.wp-block-button.is-style-light .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link { background: rgb(255 255 255 / 0.6); color: var(--s-ink); border-color: rgb(27 25 25 / 0.14); }
.wp-block-button.is-style-dark .wp-block-button__link:hover,
.wp-block-button.is-style-light .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: #fff; color: var(--s-ink); border-color: rgb(27 25 25 / 0.3); }
.s-bg-ink .wp-block-button:not(.is-style-olive) .wp-block-button__link,
.s-cta .wp-block-button:not(.is-style-olive) .wp-block-button__link { background: rgb(255 255 255 / 0.06); color: #fff; border-color: rgb(255 255 255 / 0.24); }
.s-bg-ink .wp-block-button:not(.is-style-olive) .wp-block-button__link:hover,
.s-cta .wp-block-button:not(.is-style-olive) .wp-block-button__link:hover { background: rgb(255 255 255 / 0.12); color: #fff; border-color: rgb(255 255 255 / 0.44); }
.wp-block-button .wp-block-button__link:focus-visible { outline: 2px solid var(--s-brand); outline-offset: 2px; }
.s-feat-copy .wp-block-buttons { margin-top: 28px; }

/* ---- chips and cards */
.s-section .s-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; line-height: 1.4; padding: 5px 10px; border-radius: 999px; background: var(--s-panel); color: var(--s-ink-txt); }
.s-chip-pages { background: var(--s-chip-pages-bg) !important; color: var(--s-chip-pages-fg) !important; }
.s-chip-seo { background: var(--s-chip-seo-bg) !important; color: var(--s-chip-seo-fg) !important; }
.s-chip-stats { background: var(--s-chip-stats-bg) !important; color: var(--s-chip-stats-fg) !important; }
.s-chip-email { background: var(--s-chip-email-bg) !important; color: var(--s-chip-email-fg) !important; }
.s-chip-muted { background: #f4f4f5; color: var(--s-ink-txt); }
.s-chip-lime { background: var(--s-brand-soft) !important; color: var(--s-ink) !important; }
.s-chip-light { background: #fff !important; color: var(--s-ink) !important; }
.s-chip-dark { background: var(--s-ink) !important; color: #fff !important; padding: 8px 14px !important; font-size: 14px !important; }
.s-bg-sky .s-chip-muted { background: #fff; }
.s-card { background: #fff; color: var(--s-ink); border-radius: 18px; box-shadow: var(--s-shadow); box-sizing: border-box; }
.s-section .s-art-title { margin: 10px 0 0; font-size: 17px; font-weight: 700; line-height: 1.35; }
.s-section .s-art-text { margin-top: 4px; }
.s-section .s-ok-label { font-size: 13px; font-weight: 600; color: var(--s-brand-text); }
.s-section .s-ok-label + .s-art-title { margin-top: 6px; }
.s-section .s-row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: nowrap; }
.s-section .s-row-between > p { margin: 0; }
.s-section .s-ok-label ~ .wp-block-buttons { margin-top: 14px; gap: 8px; justify-content: flex-start; }
.s-section .s-ok-label ~ .wp-block-buttons .wp-block-button__link { padding: 8px 16px; font-size: 14px; }

/* ---- hero art */
.s-section .s-art { position: relative; height: 470px; margin: 56px calc(-1 * var(--s-pad)) 0; max-width: none; text-align: left; }
.s-art > .s-card { position: absolute; z-index: 1; box-sizing: border-box; }
.s-art-center { left: 50%; top: 10px; transform: translateX(-50%); width: 460px; padding: 22px; z-index: 2 !important; }
.s-art-tl { left: calc(50% - 580px); top: 70px; width: 290px; padding: 18px; transform: rotate(-3deg); }
.s-art-bl { left: calc(50% - 620px); top: 250px; width: 300px; padding: 18px; transform: rotate(2deg); }
.s-art-tr { right: calc(50% - 580px); top: 60px; width: 290px; padding: 18px; transform: rotate(3deg); }
.s-art-br { right: calc(50% - 620px); top: 245px; width: 300px; padding: 18px; transform: rotate(-2deg); }
.s-art-ok { left: 50%; top: 250px; transform: translateX(-50%); width: 380px; padding: 18px 20px; border: 2px solid var(--s-brand); z-index: 3 !important; }
.s-section .s-ask-who { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.s-ask-who::before { content: 'AI'; flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--s-ink); color: var(--s-brand-soft); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.s-section .s-ask { margin-top: 14px; background: #f4f4f5; border-radius: 14px; padding: 14px 16px; font-size: 17px; line-height: 1.5; }
.s-section .s-ask-status { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--s-ink-2); }
.s-ask-status::before { content: ''; flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--s-brand); }
.s-ridge {
	height: 200px; margin: -150px calc(-1 * var(--s-pad)) 0;
	background: url('../img/pixel-hero-7.png?v=2026-10-22') center bottom / auto 100% repeat-x; image-rendering: pixelated;
}
.s-section .s-ridge.s-ridge-sm { height: 140px; }
@media (max-width: 1100px) {
	.s-section .s-art { height: auto; display: flex; flex-direction: column; gap: 16px; max-width: 480px; margin: 40px auto 0; }
	.s-art > .s-card { position: static; transform: none; width: auto; }
	.s-art-center { order: 1; }
	.s-art-bl { order: 2; }
	.s-art-tr { order: 3; }
	.s-art-ok { order: 4; }
	.s-art-tl, .s-art-br { display: none; }
	.s-ridge { margin-top: 24px; height: 140px; }
}

/* ---- tabs */
.s-tabs { margin-top: 32px; }
.s-section .s-tablist { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 0; }
.s-section .s-tab { margin: 0; }
.s-tab a { display: block; padding: 10px 18px; border-radius: 999px; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--s-ink-2); text-decoration: none; }
.s-tab a:hover { color: var(--s-ink); }
.s-tab.is-active a { background: var(--s-ink); color: #fff; }
.s-panel {
	display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center;
	margin-top: 32px; padding: 40px 40px 40px 56px; background: var(--s-panel); border-radius: 32px;
}
.s-tabs.js .s-panel { display: none; }
.s-tabs.js .s-panel.is-active { display: grid; }
.s-tabs.js .s-tablist { margin-bottom: 0; }
.s-section .s-more { margin-top: 22px; font-weight: 600; }
.s-more a { display: inline-flex; align-items: center; gap: 6px; color: var(--s-ink); text-decoration: none; }
.s-more a:hover { color: var(--s-brand); }
.s-more a::after { content: ''; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--s-arrow) center / contain no-repeat; mask: var(--s-arrow) center / contain no-repeat; }
.s-panel-copy { min-width: 0; }
.s-section .s-stage {
	position: relative; box-sizing: border-box; overflow: hidden; min-height: 360px; padding: 32px; border-radius: 24px;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
}
.s-section > .s-stage { max-width: 760px; margin: 40px auto 0; }
.s-stage > .s-card { width: 100%; }

/* stage art */
.s-minipage { max-width: 520px; padding: 14px; }
.s-minipage::before { content: ''; display: block; width: 9px; height: 9px; margin: 2px 4px 12px; border-radius: 99px; background: var(--s-line); box-shadow: 15px 0 0 var(--s-line), 30px 0 0 var(--s-line); }
.s-minipage-hero { background: var(--s-ink); color: #fff; border-radius: 12px; padding: 26px 24px; }
.s-section .s-mini-kicker { font: 500 11px/1.4 var(--mono); letter-spacing: 0.1em; color: var(--s-brand-soft); }
.s-section .s-mini-title { margin-top: 6px; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.s-minipage-hero .s-chip { margin-top: 12px; padding: 6px 12px; }
.s-minipage-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.s-minipage-cell { background: #f4f4f5; border-radius: 10px; padding: 12px; }
.s-section .s-minipage-cell p { font-size: 13px; font-weight: 600; margin-top: 8px; line-height: 1.4; }
.s-minipage-cell::before { content: ''; display: block; width: 22px; height: 22px; border-radius: 6px; background: var(--s-brand-soft); }
.s-dot-sky::before { background: var(--s-sky-2); }
.s-dot-peach::before { background: var(--s-peach); }
.s-stage .s-badge-ok { position: absolute; right: 26px; bottom: 26px; width: auto; padding: 12px 16px; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.s-stage .s-badge-ok p { margin: 0; }
.s-badge-ok::before { content: ''; flex: none; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23d000c4'/%3E%3Cpath d='M7.5 12.5l3 3 6-6.5' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.s-serp, .s-answer { padding: 18px 20px; }
.s-answer { margin-left: 48px; width: auto !important; align-self: stretch; }
.s-section .s-serp-url { font-size: 13px; color: var(--s-ink-2); }
.s-section .s-serp-title { margin-top: 4px; font-size: 19px; font-weight: 600; color: var(--s-chip-seo-fg); line-height: 1.35; }
.s-section .s-answer-label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.s-answer-label::before { content: 'AI'; width: 22px; height: 22px; border-radius: 99px; background: var(--s-ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
.s-answer .s-art-text { margin-top: 8px; }
.s-answer .s-chip { margin-top: 10px; }
.s-statscard { max-width: 540px; padding: 22px; }
.s-statscard .s-row-between strong { font-weight: 700; }
.s-chart { height: 150px; margin-top: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 150' preserveAspectRatio='none'%3E%3Cpath d='M0 120 C60 110 90 95 140 98 S230 70 280 74 S380 40 430 44 S480 30 500 26 L500 150 L0 150 Z' fill='%23fde3c3'/%3E%3Cpath d='M0 120 C60 110 90 95 140 98 S230 70 280 74 S380 40 430 44 S480 30 500 26' fill='none' stroke='%23c96a12' stroke-width='3' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 140 C80 136 140 132 200 128 S320 112 380 104 S460 92 500 86' fill='none' stroke='%23d000c4' stroke-width='3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.s-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: 14px; }
.s-section .s-key { display: inline-flex; align-items: center; gap: 6px; }
.s-key::before { content: ''; width: 10px; height: 10px; border-radius: 99px; background: var(--s-amber); }
.s-key-ai { font-weight: 600; }
.s-key-ai::before { background: var(--s-brand); }
.s-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.s-mail { max-width: 460px; overflow: hidden; }
.s-mail-head { padding: 16px 20px; border-bottom: 1px solid var(--s-line-2); }
.s-mail-head .s-mut { font-size: 13px; }
.s-mail-head strong { display: block; margin-top: 2px; font-size: 17px; font-weight: 700; }
.s-mail-hero { padding: 22px 20px; }
.s-section .s-mail-title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.s-mail-hero .s-art-text { margin-top: 6px; }
.s-mail > .s-row-between { padding: 16px 20px; }

/* ---- feature groups */
.s-feat { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; padding: 80px 0; }
.s-feat-copy .s-h2 { margin-top: 14px; }
.s-items { min-width: 0; }
.s-item { display: flex; align-items: center; gap: 16px; padding: 14px 0; font-size: 19px; line-height: 1.45; }
.s-item:first-child { padding-top: 0; }
.s-item strong { font-weight: 700; }
.s-section .s-item p { margin: 0; }
.s-section .s-items > .s-card { display: block; padding: 22px 24px; border: 0; font-size: 17px; }
.s-section .s-items:has(> .s-card) { display: flex; flex-direction: column; gap: 16px; }
.s-ico { flex: none; display: inline-flex; width: 44px; height: 44px; border-radius: 12px; background: var(--s-brand-tint); align-items: center; justify-content: center; color: var(--s-brand); }
.s-ico::before, .s-section .s-label[class*='s-ico-']::before { content: ''; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.s-ico::before { width: 22px; height: 22px; }
.s-section .s-label[class*='s-ico-']::before { width: 18px; height: 18px; flex: none; }

/* ---- AI apps */
.s-apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: center; padding: 64px; border-radius: 32px; }
.s-hub { position: relative; height: 340px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 340' preserveAspectRatio='none'%3E%3Cg stroke='%234a4a50' stroke-width='2' fill='none' vector-effect='non-scaling-stroke'%3E%3Cpath d='M280 170 L90 60'/%3E%3Cpath d='M280 170 L90 170'/%3E%3Cpath d='M280 170 L90 280'/%3E%3Cpath d='M280 170 L470 60'/%3E%3Cpath d='M280 170 L470 170'/%3E%3Cpath d='M280 170 L470 280'/%3E%3C/g%3E%3Cg fill='%23ffb8f8'%3E%3Ccircle cx='185' cy='115' r='3'/%3E%3Ccircle cx='375' cy='225' r='3'/%3E%3Ccircle cx='185' cy='170' r='3'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.s-hub-mark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 96px; height: 96px; border-radius: 28px; background: var(--s-brand); box-shadow: 0 0 0 10px rgb(255 184 248 / 0.14); display: flex; align-items: center; justify-content: center; }
.s-hub-mark::before { content: ''; width: 54px; height: 54px; background: #fff; -webkit-mask: var(--s-mark) center / contain no-repeat; mask: var(--s-mark) center / contain no-repeat; }
.s-section .s-hub-app { position: absolute; margin: 0; background: var(--s-ink-3-dark); color: #fff; border-radius: 14px; padding: 12px 16px; font-weight: 600; line-height: 1.4; }
.s-hub-app.is-lime { background: var(--s-brand-soft); color: var(--s-ink); }
.s-hub-1, .s-hub-2, .s-hub-3 { left: 0; }
.s-hub-4, .s-hub-5, .s-hub-6 { right: 0; }
.s-hub-1, .s-hub-4 { top: 38px; }
.s-hub-2, .s-hub-5 { top: 148px; }
.s-hub-3, .s-hub-6 { top: 258px; }

/* ---- bento */
.s-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
/* Works with: third-party plugins Saddle can control (home) */
.s-section .s-works { margin-top: 44px; text-align: left; }
/* No cards here: a name, one line and the Pro note, held apart by space alone. */
.s-section .s-bento.s-works { gap: 44px 56px; }
.s-section .s-works .s-box { gap: 6px; padding: 0; border-radius: 0; background: none; }
.s-section .s-works .s-box > .s-chip { align-self: flex-start; margin-top: 10px; background: var(--s-brand-tint) !important; color: var(--s-brand-text) !important; }
.s-section .s-works .s-works-any { grid-column: 1 / -1; align-items: center; padding-top: 12px; text-align: center; }
.s-works .s-works-any p:last-child { margin: 0 auto; max-width: 640px; color: var(--s-ink-2); }
.home .s-works .s-box:hover { translate: none; }
.s-box { display: flex; flex-direction: column; gap: 10px; padding: 32px; border-radius: 28px; background: var(--s-panel); }
.s-box.s-bg-ink { color: #fff; }
.s-section .s-box-title { font-size: 22px; font-weight: 700; line-height: 1.25; }
.s-section .s-box-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.s-box .s-chip, .s-plan-head .s-chip { font-size: 13px; padding: 5px 12px; }
.s-box > .s-card { margin-top: 14px; padding: 18px; }
/* A card on its own in a section (Account, Welcome) gets room inside and a text column width. */
.s-section > .s-card { max-width: 680px; margin: 28px auto 0; padding: 32px 36px; }
@media (max-width: 520px) { .s-section > .s-card { padding: 24px 20px; } }
.s-box > .s-card.s-rows { padding: 6px 18px; }
.s-section .s-box .s-ok-label ~ .wp-block-buttons { margin-top: 12px; }
.s-section .s-box .s-ok-label ~ .wp-block-buttons .wp-block-button__link { padding: 7px 14px; font-size: 13px; }
.s-section .s-box > .wp-block-buttons { margin-top: 14px; justify-content: flex-start; }
.s-section .s-box > .wp-block-buttons .wp-block-button__link { padding: 11px 18px; font-size: 15px; }
.s-section .s-box .s-ok-label + .s-art-title { font-weight: 600; }
.s-section .s-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--s-line-2); font-size: 15px; line-height: 1.4; }
.s-rows .s-row:last-child { border-bottom: 0; }
.s-row strong { font-weight: 600; }
.s-row-end { flex: none; color: var(--s-ink-2); }
.s-row-end.is-refused { color: var(--s-refused); font-weight: 600; }
.s-row-toggle { font-weight: 600; }
.s-row-toggle::after { content: ''; flex: none; width: 34px; height: 20px; border-radius: 99px; background: radial-gradient(circle 7px at calc(100% - 10px) 50%, #fff 97%, transparent 100%), var(--s-brand); }
.s-section .s-bignum { font-size: 72px; font-weight: 700; letter-spacing: -0.05em; line-height: 1; }
.s-box.s-bg-ink .s-mut { color: var(--s-ink-on-dark); }
.s-score { display: flex; align-items: center; gap: 16px; }
.s-score > .wp-block-group { margin: 0; }
.s-section .s-score p { font-size: 14px; line-height: 1.5; color: var(--s-ink-txt); }
.s-section .s-score p:first-child, .s-section .s-score strong { font-size: 16px; font-weight: 700; color: var(--s-ink); }
.s-ring { position: relative; flex: none; width: 72px; height: 72px; border-radius: 50%; background: conic-gradient(var(--s-chip-seo-fg) 0 79%, var(--s-chip-seo-bg) 0); display: grid; place-items: center; }
.s-ring::before { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: #fff; }
.s-ring::after { content: 'A'; position: relative; font-size: 18px; font-weight: 700; color: var(--s-ink); }

/* ---- plans */
.s-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 48px; align-items: start; text-align: left; }
.s-plan { display: flex; flex-direction: column; gap: 6px; padding: 36px; border: 0; border-radius: 28px; background: var(--s-panel); box-sizing: border-box; }
.s-plan.is-featured { background: #fff; box-shadow: inset 0 0 0 2px var(--s-brand), 0 30px 60px -36px rgb(208 0 196 / 0.45); }
.s-plan.is-soon { background: var(--s-panel); }
.s-section .s-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.s-section .s-plan-name { font-size: 24px; font-weight: 700; line-height: 1.2; }
.s-section .s-price { margin-top: 10px; font-size: 56px; font-weight: 700; letter-spacing: -0.045em; line-height: 1.05; }
.s-price .per { font-size: 18px; font-weight: 500; letter-spacing: 0; color: var(--s-ink-2); }
.s-plan > .s-mut { font-size: 15px; }
.s-section .s-plan .wp-block-buttons { margin-top: 22px; display: block; }
.s-plan .wp-block-button, .s-plan .wp-block-button.wp-block-button__width-100 { width: 100%; }
.s-plan .wp-block-button__link { width: 100%; text-align: center; justify-content: center; }
.s-plan > p:not(.s-mut):not(.s-plan-inc):not(.s-price):not(.s-plan-tag):not(.s-guarantee):not(.s-plan-note) { margin-top: 20px; line-height: 1.5; }
.s-section .s-plan .s-plan-inc { margin-top: 14px; font-weight: 700; }
.s-plan.is-soon .s-chip-muted { background: var(--s-grey-bg); }
.s-checks, .wp-block-list.s-checks { list-style: none; margin: 0; padding: 0; }
.s-checks li { position: relative; padding: 6px 0 6px 30px; font-size: 16px; line-height: 1.45; }
.s-checks li::before { content: ''; position: absolute; left: 0; top: 8px; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23d000c4'/%3E%3Cpath d='M7.5 12.5l3 3 6-6.5' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.s-plan.is-soon .s-checks li::before, .s-checks.is-soon li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23cacad0'/%3E%3Cpath d='M7.5 12.5l3 3 6-6.5' fill='none' stroke='%23262624' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* ---- pricing page (2026-10-16, the approved mockup "saddle.to/pricing"): the sites picker,
   prices by size and the card extras. Each price and checkout button is written once per size
   (.s-t .s-t5 / .s-t10 / .s-t25 / .s-t50); assets/js/pricing.js sets data-sites on <html>.
   Without it the 10-site prices and buttons show. */
/* :root raises these over core's .wp-block-buttons > .wp-block-button { display: inline-block }. */
:root .s-t.s-t { display: none; }
:root .s-t.s-t10 { display: revert; }
:root[data-sites] .s-t.s-t10 { display: none; }
:root[data-sites="5"] .s-t.s-t5, :root[data-sites="10"] .s-t.s-t10, :root[data-sites="25"] .s-t.s-t25, :root[data-sites="50"] .s-t.s-t50 { display: revert; }
.s-section .s-sites-label { margin: 44px 0 0; font-size: 16px; font-weight: 600; color: var(--s-ink); }
.s-section .wp-block-buttons.s-sites { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; max-width: 560px; margin: 16px auto 0; padding: 6px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--s-line), 0 10px 30px -18px rgb(38 38 36 / 0.35); }
.s-sites .wp-block-button { position: relative; }
.s-sites .wp-block-button__link { width: 100%; height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; border: 0; border-radius: 11px; background: transparent; color: var(--s-ink-2); font: 500 13px/1 var(--sans); cursor: pointer; }
.s-sites .wp-block-button__link:hover { background: var(--s-panel); color: var(--s-ink); border: 0; }
.s-sites .wp-block-button__link strong { font-size: 22px; font-weight: 650; letter-spacing: -0.02em; line-height: 1; }
.s-sites .wp-block-button__link em { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); padding: 2px 8px; border-radius: 999px; background: var(--s-brand); color: #fff; font: 600 11px/1.3 var(--sans); font-style: normal; letter-spacing: 0.02em; }
html:not([data-sites]) .s-sites .is-popular .wp-block-button__link,
.s-sites .is-on .wp-block-button__link, .s-sites .is-on .wp-block-button__link:hover { background: var(--s-ink); color: #fff; }
.s-section.s-pricing-plans { padding-top: 64px; }
.s-pricing-plans .s-plans { margin-top: 0; }
.s-plans.is-detailed { align-items: stretch; }
/* Pro and Cloud only (Fahim, 2026-10-16: "remove free table from pricing"; the free plugin gets its own page). */
.s-plans.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; margin-left: auto; margin-right: auto; }
@media (max-width: 760px) { .s-plans.is-two { grid-template-columns: 1fr; max-width: 480px; } }
.s-section .s-plan .s-plan-tag { margin: 4px 0 0; font-size: 15px; line-height: 1.45; color: var(--s-ink-2); }
.s-section .s-plans.is-detailed .s-price { margin-top: 18px; }
.s-section .s-price .from { margin-right: 6px; font-size: 18px; font-weight: 500; letter-spacing: 0; color: var(--s-ink-2); }
@media (min-width: 901px) { .s-section .s-plans.is-detailed .s-plan-tag { min-height: 2.9em; } }
.s-section .s-plan .s-guarantee { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px 0 0; font-size: 13px; line-height: 1.4; color: var(--s-ink-2); }
.s-guarantee::before { content: ''; flex: none; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--s-shield) center / contain no-repeat; mask: var(--s-shield) center / contain no-repeat; }
.s-guarantee.s-plain::before { display: none; }
.s-plans.is-detailed .s-plan > .s-guarantee + .s-plan-inc,
.s-plans.is-detailed .s-plan > .s-guarantee + .s-checks { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--s-line); }
.s-plans.is-detailed .s-plan > .s-checks + .s-plan-inc { margin-top: 22px; }
.s-section .s-plan .s-plan-note { margin: auto 0 0; padding-top: 22px; font-size: 14px; line-height: 1.5; color: var(--s-ink-2); }
.s-plan .wp-block-button.is-style-dark .wp-block-button__link { background: var(--s-ink); color: #fff; border-color: var(--s-ink); }
.s-plan .wp-block-button.is-style-dark .wp-block-button__link:hover { background: #3a3a40; color: #fff; border-color: #3a3a40; }
.s-section .s-soon { display: inline-flex; align-items: center; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--s-brand-tint); color: var(--s-brand-text); font-size: 12px; font-weight: 600; line-height: 1.5; vertical-align: 1px; white-space: nowrap; }
.s-section .s-checks.s-addons a { font-weight: 600; }
/* The plugin that brings a feature, after its line: part of Saddle, installed only if wanted. */
.s-section .s-plugin-name { display: block; margin-top: 2px; font: 500 12px/1.4 var(--mono); letter-spacing: 0.02em; color: var(--s-ink-2); }
.s-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 880px; margin: 56px auto 0; text-align: left; }
.s-pick { padding: 24px 28px; border-radius: 20px; background: var(--s-panel); }
.s-section .s-pick .s-pick-title { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--s-ink); }
.s-section .s-pick p:not(.s-pick-title) { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--s-ink-2); }
@media (max-width: 900px) {
	.s-picks { grid-template-columns: 1fr; margin-top: 32px; }
	.s-section.s-pricing-plans { padding-top: 48px; }
}

/* ---- FAQ */
.s-faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; text-align: left; }
.s-faq .wp-block-buttons { margin-top: 28px; }
.s-qs { border-top: 1px solid var(--s-line); min-width: 0; }
.s-q { border-bottom: 1px solid var(--s-line); }
.s-q summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 0; font-size: 19px; font-weight: 600; line-height: 1.35; }
.s-q summary::-webkit-details-marker { display: none; }
.s-q summary::after { content: ''; flex: none; width: 20px; height: 20px; background: var(--s-ink); -webkit-mask: var(--s-plus) center / contain no-repeat; mask: var(--s-plus) center / contain no-repeat; transition: transform 0.15s ease; }
.s-q[open] summary::after { transform: rotate(45deg); }
.s-section .s-q > p { margin: 0 0 24px; font-size: 17px; line-height: 1.6; color: var(--s-ink-2); }

/* ---- CTA: the dusk meadow (Fahim chose it 2026-10-12). Full width, not a card: an ink night
   sky with pixel stars, the brand glowing on the horizon, and the pixel hills, whose charcoal
   base runs into the ink footer. Page content keeps .s-cta.s-bg-sky; this look wins over it. */
.s-cta { overflow: hidden; border-radius: 32px; padding: 72px 48px 0; text-align: center; }
.s-cta .s-sub { max-width: 600px; margin-left: auto; margin-right: auto; }
.s-cta .s-h2 { margin: 0; }
.s-cta .s-ridge { height: 140px; margin: 24px -48px 0; }
.s-section:has(> .s-cta) { padding-left: 0; padding-right: 0; }
.wp-block-post-content > .s-section:has(> .s-cta):last-child { padding-bottom: 0; }
.s-section > .s-cta {
	--s-stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 240' shape-rendering='crispEdges'%3E%3Crect x='346' y='11' width='2' height='2' fill='%23ffb8f8' opacity='0.7'/%3E%3Crect x='201' y='88' width='2' height='2' fill='%23ffffff' opacity='0.5'/%3E%3Crect x='304' y='66' width='2' height='2' fill='%23ffffff' opacity='0.7'/%3E%3Crect x='210' y='83' width='2' height='2' fill='%23ffffff' opacity='0.35'/%3E%3Crect x='395' y='83' width='2' height='2' fill='%23ffffff' opacity='0.35'/%3E%3Crect x='291' y='158' width='2' height='2' fill='%23ffffff' opacity='0.35'/%3E%3Crect x='103' y='29' width='3' height='3' fill='%23ffffff' opacity='0.9'/%3E%3Crect x='375' y='18' width='2' height='2' fill='%23ffb8f8' opacity='0.9'/%3E%3Crect x='8' y='25' width='3' height='3' fill='%23ffffff' opacity='0.9'/%3E%3Crect x='225' y='168' width='2' height='2' fill='%23ffffff' opacity='0.5'/%3E%3Crect x='326' y='104' width='2' height='2' fill='%23ffffff' opacity='0.35'/%3E%3Crect x='106' y='99' width='2' height='2' fill='%23ffffff' opacity='0.5'/%3E%3Crect x='68' y='160' width='3' height='3' fill='%23ffffff' opacity='0.35'/%3E%3Crect x='280' y='180' width='3' height='3' fill='%23ffffff' opacity='0.35'/%3E%3Crect x='232' y='231' width='3' height='3' fill='%23ffb8f8' opacity='0.7'/%3E%3Crect x='266' y='122' width='3' height='3' fill='%23ffffff' opacity='0.7'/%3E%3Crect x='219' y='229' width='2' height='2' fill='%23ffffff' opacity='0.35'/%3E%3Crect x='125' y='23' width='2' height='2' fill='%23ffffff' opacity='0.9'/%3E%3Crect x='192' y='115' width='2' height='2' fill='%23ffffff' opacity='0.7'/%3E%3Crect x='65' y='121' width='2' height='2' fill='%23ffffff' opacity='0.9'/%3E%3Crect x='206' y='75' width='2' height='2' fill='%23ffffff' opacity='0.9'/%3E%3Crect x='224' y='77' width='2' height='2' fill='%23ffb8f8' opacity='0.7'/%3E%3Crect x='39' y='53' width='2' height='2' fill='%23ffffff' opacity='0.9'/%3E%3Crect x='51' y='118' width='2' height='2' fill='%23ffffff' opacity='0.9'/%3E%3Crect x='258' y='115' width='2' height='2' fill='%23ffffff' opacity='0.5'/%3E%3Crect x='223' y='166' width='2' height='2' fill='%23ffffff' opacity='0.35'/%3E%3Crect x='43' y='32' width='2' height='2' fill='%23ffffff' opacity='0.9'/%3E%3Crect x='146' y='226' width='3' height='3' fill='%23ffffff' opacity='0.35'/%3E%3Crect x='103' y='158' width='3' height='3' fill='%23ffb8f8' opacity='0.7'/%3E%3Crect x='219' y='166' width='2' height='2' fill='%23ffffff' opacity='0.35'/%3E%3C/svg%3E");
	position: relative; isolation: isolate; border-radius: 0; padding: 128px var(--s-pad) 0; color: #fff;
	background:
		radial-gradient(ellipse 55% 60% at 50% 100%, rgb(208 0 196 / 0.5), rgb(208 0 196 / 0) 72%),
		radial-gradient(ellipse 100% 45% at 50% 100%, rgb(255 184 248 / 0.18), rgb(255 184 248 / 0) 70%),
		linear-gradient(180deg, #121213 0%, #1d1d1c 40%, #2b1929 76%, #3a1736 100%);
}
.s-section > .s-cta::before {
	content: ''; position: absolute; inset: 0 0 30% 0; z-index: -1; pointer-events: none;
	background: var(--s-stars) 0 0 / 400px 240px repeat; image-rendering: pixelated;
	-webkit-mask: linear-gradient(#000 35%, transparent); mask: linear-gradient(#000 35%, transparent);
	animation: s-twinkle 9s ease-in-out infinite alternate;
}
@keyframes s-twinkle { from { opacity: 0.5; } to { opacity: 1; } }
.s-section > .s-cta .s-h2 { color: #fff; }
.s-section > .s-cta .s-sub { margin-top: 18px; color: var(--s-ink-on-dark); }
.s-section > .s-cta .wp-block-buttons { margin-top: 36px; }
/* The same hills at dusk (pixel-dusk.png is pixel-hero-7.png recoloured, 2026-10-12): a plum far
   ridge against the glow, a dark meadow, and the charcoal base that meets the footer. */
.s-section > .s-cta .s-ridge { height: 168px; margin: 88px calc(-1 * var(--s-pad)) 0; background-image: url('../img/pixel-dusk.png?v=2026-10-22'); }
.s-cloudlist { border-radius: 28px; padding: 48px; text-align: center; margin-top: 56px; }
.s-cloudlist .wp-block-buttons { justify-content: center; }
.s-cloudlist .s-h2, .s-cloudlist .s-h3 { margin-top: 0; }

/* ---- compare table */
figure.wp-block-table.s-compare { margin: 48px 0 0; border: 0; border-radius: 0; overflow: auto; background: #fff; text-align: left; }
.s-compare table { width: 100%; min-width: 640px; border-collapse: collapse; border: 0; font-size: 16px; }
.s-compare thead { border: 0; }
.s-compare th, .s-compare td { padding: 16px 20px; border: 0; border-bottom: 1px solid var(--s-line-2); text-align: left; vertical-align: top; }
.s-compare thead th { background: var(--s-panel); font-weight: 600; border-bottom: 1px solid var(--s-line); }
.s-compare tbody tr:last-child td, .s-compare tbody tr:last-child th { border-bottom: 0; }
.s-compare tbody td:first-child { color: var(--s-ink); font-weight: 500; }
.s-compare tbody tr:has(> td:first-child > strong:only-child) td { background: var(--s-panel); }
.s-compare tbody tr:has(> td:first-child > strong:only-child) td:first-child strong { font-weight: 700; }
.s-compare .yes { color: var(--s-brand); font-weight: 600; }
.s-compare .no { color: var(--s-ink-2); }

/* ---- phone and tablet */
@media (max-width: 900px) {
	.s-section { padding-top: 72px; }
	.s-section:has(> .s-h1) { padding-top: 56px; }
	.s-section:has(> .s-statement) { padding-top: 80px; }
	.s-section:has(> .s-feat) { padding-top: 24px; }
	.s-section:has(> .s-apps), .s-section:has(> .s-bento), .s-section:has(> .s-plans), .s-section:has(> .s-faq), .s-section:has(> .s-cta) { padding-top: 72px; }
	.s-panel, .s-feat, .s-apps, .s-bento, .s-plans, .s-faq { grid-template-columns: 1fr; }
	.s-panel { gap: 28px; padding: 28px 20px; }
	.s-tabs.js .s-panel.is-active { display: grid; }
	.s-feat { gap: 28px; padding: 40px 0; }
	.s-apps { gap: 32px; padding: 36px 24px; border-radius: 24px; }
	.s-hub { height: auto; background: none; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
	.s-hub-mark { position: static; transform: none; margin: 0 calc(50% - 48px) 10px; order: -1; flex: none; }
	.s-section .s-hub-app { position: static; }
	.s-plans { gap: 20px; margin-top: 32px; }
	.s-plan { padding: 28px; }
	.s-faq { gap: 32px; }
	.s-cta { padding: 48px 20px 0; border-radius: 24px; }
	.s-cta .s-ridge { margin-inline: -20px; height: 100px; }
	.s-section > .s-cta { padding: 88px var(--s-pad) 0; border-radius: 0; }
	.s-section > .s-cta .s-ridge { height: 112px; margin: 56px calc(-1 * var(--s-pad)) 0; }
	.s-section .s-stage { min-height: 260px; padding: 20px; }
	.s-box { padding: 24px; }
	.s-section .s-h2 { font-size: 40px; }
	.s-section .s-h3 { font-size: 32px; }
	.s-section .s-statement { font-size: 44px; }
}
@media (max-width: 520px) {
	.s-section .s-h1 { font-size: 44px; }
	.s-section .s-h2 { font-size: 34px; }
	.s-section .s-h3 { font-size: 28px; }
	.s-section .s-statement { font-size: 34px; }
	.s-section .s-h1 ~ .s-sub, .s-section .s-statement ~ .s-sub { font-size: 18px; }
	.s-section .s-price { font-size: 44px; }
	.s-item { font-size: 17px; }
	.s-cloudlist { padding: 32px 20px; }
	.s-stage .s-badge-ok { right: 12px; bottom: 12px; }
	.s-answer { margin-left: 16px; }
	.s-section .s-bignum { font-size: 56px; }
	.s-tab a { padding: 9px 14px; }
}

/* icon masks: s-ico-<name> sets --i. Iconoir 7.12.1 (MIT), the set the Saddle admin uses, stroke 1.5. */
.s-ico-pen { --i: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' stroke-width='1.5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M14.3632 5.65156L15.8431 4.17157C16.6242 3.39052 17.8905 3.39052 18.6716 4.17157L20.0858 5.58579C20.8668 6.36683 20.8668 7.63316 20.0858 8.41421L18.6058 9.8942M14.3632 5.65156L4.74749 15.2672C4.41542 15.5993 4.21079 16.0376 4.16947 16.5054L3.92738 19.2459C3.87261 19.8659 4.39148 20.3848 5.0115 20.33L7.75191 20.0879C8.21972 20.0466 8.65806 19.8419 8.99013 19.5099L18.6058 9.8942M14.3632 5.65156L18.6058 9.8942' stroke='%23262624' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); }
.s-ico-doc { --i: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' stroke-width='1.5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M4 21.4V2.6C4 2.26863 4.26863 2 4.6 2H16.2515C16.4106 2 16.5632 2.06321 16.6757 2.17574L19.8243 5.32426C19.9368 5.43679 20 5.5894 20 5.74853V21.4C20 21.7314 19.7314 22 19.4 22H4.6C4.26863 22 4 21.7314 4 21.4Z' stroke='%23262624' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M8 10L16 10' stroke='%23262624' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M8 18L16 18' stroke='%23262624' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M8 14L12 14' stroke='%23262624' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M16 2V5.4C16 5.73137 16.2686 6 16.6 6H20' stroke='%23262624' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); }
.s-ico-blocks { --i: url("data:image/svg+xml,%3Csvg stroke-width='1.5' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M14 20.4V14.6C14 14.2686 14.2686 14 14.6 14H20.4C20.7314 14 21 14.2686 21 14.6V20.4C21 20.7314 20.7314 21 20.4 21H14.6C14.2686 21 14 20.7314 14 20.4Z' stroke='%23262624' stroke-width='1.5'/%3E %3Cpath d='M3 20.4V14.6C3 14.2686 3.26863 14 3.6 14H9.4C9.73137 14 10 14.2686 10 14.6V20.4C10 20.7314 9.73137 21 9.4 21H3.6C3.26863 21 3 20.7314 3 20.4Z' stroke='%23262624' stroke-width='1.5'/%3E %3Cpath d='M14 9.4V3.6C14 3.26863 14.2686 3 14.6 3H20.4C20.7314 3 21 3.26863 21 3.6V9.4C21 9.73137 20.7314 10 20.4 10H14.6C14.2686 10 14 9.73137 14 9.4Z' stroke='%23262624' stroke-width='1.5'/%3E %3Cpath d='M3 9.4V3.6C3 3.26863 3.26863 3 3.6 3H9.4C9.73137 3 10 3.26863 10 3.6V9.4C10 9.73137 9.73137 10 9.4 10H3.6C3.26863 10 3 9.73137 3 9.4Z' stroke='%23262624' stroke-width='1.5'/%3E %3C/svg%3E"); }
.s-ico-pulse { --i: url("data:image/svg+xml,%3Csvg stroke-width='1.5' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M3 12H6L9 3L15 21L18 12H21' stroke='%23262624' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); }
.s-ico-search { --i: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' stroke-width='1.5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M17 17L21 21' stroke='%23262624' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M3 11C3 15.4183 6.58172 19 11 19C13.213 19 15.2161 18.1015 16.6644 16.6493C18.1077 15.2022 19 13.2053 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11Z' stroke='%23262624' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); }
.s-ico-chart { --i: url("data:image/svg+xml,%3Csvg stroke-width='1.5' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M10 9H6' stroke='%23262624' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M15.5 11C14.1193 11 13 9.88071 13 8.5C13 7.11929 14.1193 6 15.5 6C16.8807 6 18 7.11929 18 8.5C18 9.88071 16.8807 11 15.5 11Z' stroke='%23262624' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M6 6H9' stroke='%23262624' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M18 18L13.5 15L11 17L6 13' stroke='%23262624' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M3 20.4V3.6C3 3.26863 3.26863 3 3.6 3H20.4C20.7314 3 21 3.26863 21 3.6V20.4C21 20.7314 20.7314 21 20.4 21H3.6C3.26863 21 3 20.7314 3 20.4Z' stroke='%23262624' stroke-width='1.5'/%3E %3C/svg%3E"); }
.s-ico-mail { --i: url("data:image/svg+xml,%3Csvg stroke-width='1.5' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M7 9L12 12.5L17 9' stroke='%23262624' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M2 17V7C2 5.89543 2.89543 5 4 5H20C21.1046 5 22 5.89543 22 7V17C22 18.1046 21.1046 19 20 19H4C2.89543 19 2 18.1046 2 17Z' stroke='%23262624' stroke-width='1.5'/%3E %3C/svg%3E"); }
.s-ico-eye { --i: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' stroke-width='1.5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M3 13C6.6 5 17.4 5 21 13' stroke='%23262624' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M12 17C10.3431 17 9 15.6569 9 14C9 12.3431 10.3431 11 12 11C13.6569 11 15 12.3431 15 14C15 15.6569 13.6569 17 12 17Z' stroke='%23262624' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); }
.s-ico-check { --i: url("data:image/svg+xml,%3Csvg stroke-width='1.5' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M7 12.5L10 15.5L17 8.5' stroke='%23262624' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z' stroke='%23262624' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); }
.s-ico-lock { --i: url("data:image/svg+xml,%3Csvg stroke-width='1.5' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M16 12H17.4C17.7314 12 18 12.2686 18 12.6V19.4C18 19.7314 17.7314 20 17.4 20H6.6C6.26863 20 6 19.7314 6 19.4V12.6C6 12.2686 6.26863 12 6.6 12H8M16 12V8C16 6.66667 15.2 4 12 4C8.8 4 8 6.66667 8 8V12M16 12H8' stroke='%23262624' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); }
.s-ico-shield { --i: url("data:image/svg+xml,%3Csvg stroke-width='1.5' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M8.5 11.5L11.5 14.5L16.5 9.5' stroke='%23262624' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M5 18L3.13036 4.91253C3.05646 4.39524 3.39389 3.91247 3.90398 3.79912L11.5661 2.09641C11.8519 2.03291 12.1481 2.03291 12.4339 2.09641L20.096 3.79912C20.6061 3.91247 20.9435 4.39524 20.8696 4.91252L19 18C18.9293 18.495 18.5 21.5 12 21.5C5.5 21.5 5.07071 18.495 5 18Z' stroke='%23262624' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); }
.s-ico-trend { --i: url("data:image/svg+xml,%3Csvg stroke-width='1.5' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M20 20H4V4' stroke='%23262624' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M4 16.5L12 9L15 12L19.5 7.5' stroke='%23262624' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); }
.s-ico-refresh { --i: url("data:image/svg+xml,%3Csvg stroke-width='1.5' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M21.1679 8C19.6247 4.46819 16.1006 2 11.9999 2C6.81459 2 2.55104 5.94668 2.04932 11' stroke='%23262624' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M17 8H21.4C21.7314 8 22 7.73137 22 7.4V3' stroke='%23262624' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M2.88146 16C4.42458 19.5318 7.94874 22 12.0494 22C17.2347 22 21.4983 18.0533 22 13' stroke='%23262624' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M7.04932 16H2.64932C2.31795 16 2.04932 16.2686 2.04932 16.6V21' stroke='%23262624' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); }
.s-ico-link { --i: url("data:image/svg+xml,%3Csvg stroke-width='1.5' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M14 11.9976C14 9.5059 11.683 7 8.85714 7C8.52241 7 7.41904 7.00001 7.14286 7.00001C4.30254 7.00001 2 9.23752 2 11.9976C2 14.376 3.70973 16.3664 6 16.8714C6.36756 16.9525 6.75006 16.9952 7.14286 16.9952' stroke='%23262624' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M10 11.9976C10 14.4893 12.317 16.9952 15.1429 16.9952C15.4776 16.9952 16.581 16.9952 16.8571 16.9952C19.6975 16.9952 22 14.7577 22 11.9976C22 9.6192 20.2903 7.62884 18 7.12383C17.6324 7.04278 17.2499 6.99999 16.8571 6.99999' stroke='%23262624' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); }
.s-ico-palette { --i: url("data:image/svg+xml,%3Csvg stroke-width='1.5' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M20.5096 9.54C20.4243 9.77932 20.2918 9.99909 20.12 10.1863C19.9483 10.3735 19.7407 10.5244 19.5096 10.63C18.2796 11.1806 17.2346 12.0745 16.5002 13.2045C15.7659 14.3345 15.3733 15.6524 15.3696 17C15.3711 17.4701 15.418 17.9389 15.5096 18.4C15.5707 18.6818 15.5747 18.973 15.5215 19.2564C15.4682 19.5397 15.3588 19.8096 15.1996 20.05C15.0649 20.2604 14.8877 20.4403 14.6793 20.5781C14.4709 20.7158 14.2359 20.8085 13.9896 20.85C13.4554 20.9504 12.9131 21.0006 12.3696 21C11.1638 21.0006 9.97011 20.7588 8.85952 20.2891C7.74893 19.8194 6.74405 19.1314 5.90455 18.2657C5.06506 17.4001 4.40807 16.3747 3.97261 15.2502C3.53714 14.1257 3.33208 12.9252 3.36959 11.72C3.4472 9.47279 4.3586 7.33495 5.92622 5.72296C7.49385 4.11097 9.60542 3.14028 11.8496 3H12.3596C14.0353 3.00042 15.6777 3.46869 17.1017 4.35207C18.5257 5.23544 19.6748 6.49885 20.4196 8C20.6488 8.47498 20.6812 9.02129 20.5096 9.52V9.54Z' stroke='%23262624' stroke-width='1.5'/%3E %3Cpath d='M8 16.01L8.01 15.9989' stroke='%23262624' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M6 12.01L6.01 11.9989' stroke='%23262624' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M8 8.01L8.01 7.99889' stroke='%23262624' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M12 6.01L12.01 5.99889' stroke='%23262624' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M16 8.01L16.01 7.99889' stroke='%23262624' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); }
.s-ico-cart { --i: url("data:image/svg+xml,%3Csvg stroke-width='1.5' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M19.5 22C20.3284 22 21 21.3284 21 20.5C21 19.6716 20.3284 19 19.5 19C18.6716 19 18 19.6716 18 20.5C18 21.3284 18.6716 22 19.5 22Z' fill='%23262624' stroke='%23262624' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M9.5 22C10.3284 22 11 21.3284 11 20.5C11 19.6716 10.3284 19 9.5 19C8.67157 19 8 19.6716 8 20.5C8 21.3284 8.67157 22 9.5 22Z' fill='%23262624' stroke='%23262624' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M5 4H22L20 15H7L5 4ZM5 4C4.83333 3.33333 4 2 2 2' stroke='%23262624' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M20 15H7H5.23077C3.44646 15 2.5 15.7812 2.5 17C2.5 18.2188 3.44646 19 5.23077 19H19.5' stroke='%23262624' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); }
.s-ico-copy { --i: url("data:image/svg+xml,%3Csvg stroke-width='1.5' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M19.4 20H9.6C9.26863 20 9 19.7314 9 19.4V9.6C9 9.26863 9.26863 9 9.6 9H19.4C19.7314 9 20 9.26863 20 9.6V19.4C20 19.7314 19.7314 20 19.4 20Z' stroke='%23262624' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M15 9V4.6C15 4.26863 14.7314 4 14.4 4H4.6C4.26863 4 4 4.26863 4 4.6V14.4C4 14.7314 4.26863 15 4.6 15H9' stroke='%23262624' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); }
.s-ico-pages { --i: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' stroke-width='1.5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M7 2L16.5 2L21 6.5V19' stroke='%23262624' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M3 20.5V6.5C3 5.67157 3.67157 5 4.5 5H14.2515C14.4106 5 14.5632 5.06321 14.6757 5.17574L17.8243 8.32426C17.9368 8.43679 18 8.5894 18 8.74853V20.5C18 21.3284 17.3284 22 16.5 22H4.5C3.67157 22 3 21.3284 3 20.5Z' stroke='%23262624' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M14 5V8.4C14 8.73137 14.2686 9 14.6 9H18' stroke='%23262624' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); }
.s-ico-cloud { --i: url("data:image/svg+xml,%3Csvg stroke-width='1.5' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M12 4C6 4 6 8 6 10C4.33333 10 1 11 1 15C1 19 4.33333 20 6 20H18C19.6667 20 23 19 23 15C23 11 19.6667 10 18 10C18 8 18 4 12 4Z' stroke='%23262624' stroke-linejoin='round'/%3E %3C/svg%3E"); }
.s-ico-key { --i: url("data:image/svg+xml,%3Csvg stroke-width='1.5' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M10 12C10 14.2091 8.20914 16 6 16C3.79086 16 2 14.2091 2 12C2 9.79086 3.79086 8 6 8C8.20914 8 10 9.79086 10 12ZM10 12H22V15' stroke='%23262624' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M18 12V15' stroke='%23262624' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); }

/* ---- lead fixes after review */
/* Core resets margins on flex children; push the right group with a stronger selector. */
.wp-block-group.s-header > .wp-block-group.s-header-right { margin-left: auto; }
/* Box backgrounds: .s-box sets the panel fill after the generic bg classes. */
.s-box.s-bg-ink { background: var(--s-ink); }
.s-box.s-bg-stats { background: var(--s-t-stats); }
.s-box.s-bg-seo { background: var(--s-t-seo); }
.s-box.s-bg-sky { background: var(--s-sky); }
.s-box.s-bg-pages { background: var(--s-t-pages); }
.s-box.s-bg-email { background: var(--s-t-email); }
.s-box.s-bg-lime { background: var(--s-brand-tint); }
.s-box.s-bg-ink .s-box-title { color: #fff; }
/* Activity rows: a sentence on the left, the time or status on the right. */
.s-section .s-row:not(.s-row-toggle) { display: block; }
.s-section .s-row:not(.s-row-toggle) .s-row-end { float: right; margin-left: 12px; }
.s-section .s-row:not(.s-row-toggle)::after { content: ''; display: block; clear: both; }
/* Tab panel copy reads left, as in the mockup. */
.s-tabs .s-panel-copy { text-align: left; }
.s-tabs .s-panel-copy .wp-block-buttons { justify-content: flex-start; }
/* Stage art reads left, like the cards in the mockup. */
.s-stage { text-align: left; }

/* Compare table: icons with the text kept for screen readers, as in v1. */
.s-compare .yes, .s-compare .no { display: inline-flex; width: 20px; height: 20px; font-size: 0; vertical-align: middle; }
.s-compare .yes::before, .s-compare .no::before { content: ''; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--icon) center / 20px no-repeat; mask: var(--icon) center / 20px no-repeat; }
.s-compare .yes { color: var(--s-brand); --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.s-compare .no { color: var(--s-ink-2); --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8h7' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.s-compare td:not(:first-child), .s-compare th:not(:first-child) { text-align: center; }
/* A hero without art still needs room below its last line. */
.s-section.s-bg-sky:not(:has(.s-art)) { padding-bottom: 88px; }

/* =====================================================================
   v2 motion (home)
   Source: planning/SITE-V2-MOTION.md and planning/site-v2-mockup/home-motion.dc.html,
   chosen 2026-10-07. Without JS every piece shows in its final state;
   assets/js/motion.js adds the canvases, the pause button and the demo.
   ===================================================================== */
:root {
	--s-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--s-mark-brand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 280'%3E%3Cpath fill='%23d000c4' fill-rule='evenodd' d='M140 0C217.32 0 280 62.68 280 140C280 217.32 217.32 280 140 280C62.68 280 0 217.32 0 140C0 62.68 62.68 0 140 0ZM185.04 71.09C167.92 71.09 159.82 92.7 140 92.7C120.18 92.7 112.08 71.09 94.96 71.09C77.85 71.09 63.44 85.05 63.44 104.85V199.36C63.44 204.33 67.47 208.36 72.45 208.36H94.96C99.94 208.36 103.97 204.33 103.97 199.36V158.85C103.97 138.96 120.1 122.85 140 122.85C159.9 122.85 176.03 138.96 176.03 158.85V199.36C176.03 204.33 180.06 208.36 185.04 208.36H207.56C212.53 208.36 216.56 204.33 216.56 199.36V104.85C216.56 85.05 202.15 71.09 185.04 71.09Z'/%3E%3C/svg%3E");
	--s-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23d000c4'/%3E%3Cpath d='M7.5 12.5l3 3 6-6.5' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--s-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%2371717a'/%3E%3Cpath d='M7 12h10' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
	--s-redo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 1 0-2.3 5.7'/%3E%3Cpath d='M20 4v7h-7'/%3E%3C/svg%3E");
	--s-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.4-3 7.6-7 9-4-1.4-7-4.6-7-9V6z'/%3E%3C/svg%3E");
	--s-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
	/* AI app logos in their own colors (Fahim, 2026-10-16: "real logo"), from @lobehub/icons-static-svg
	   (MIT), the set the plugin admin uses. Only apps Saddle has connected to (../saddle/readme.txt). */
	--s-logo-claude: url("data:image/svg+xml,%3Csvg fill='%23D97757' fill-rule='evenodd' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.709 15.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z'%3E%3C/path%3E%3C/svg%3E");
	--s-logo-claude-code: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='M20.998 10.949H24v3.102h-3v3.028h-1.487V20H18v-2.921h-1.487V20H15v-2.921H9V20H7.488v-2.921H6V20H4.487v-2.921H3V14.05H0V10.95h3V5h17.998v5.949zM6 10.949h1.488V8.102H6v2.847zm10.51 0H18V8.102h-1.49v2.847z' fill='%23D97757' fill-rule='evenodd'/%3E%3C/svg%3E");
	--s-logo-chatgpt: url("data:image/svg+xml,%3Csvg fill='%23262624' fill-rule='evenodd' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.205 8.658v-2.26c0-.19.072-.333.238-.428l4.543-2.616c.619-.357 1.356-.523 2.117-.523 2.854 0 4.662 2.212 4.662 4.566 0 .167 0 .357-.024.547l-4.71-2.759a.797.797 0 00-.856 0l-5.97 3.473zm10.609 8.8V12.06c0-.333-.143-.57-.429-.737l-5.97-3.473 1.95-1.118a.433.433 0 01.476 0l4.543 2.617c1.309.76 2.189 2.378 2.189 3.948 0 1.808-1.07 3.473-2.76 4.163zM7.802 12.703l-1.95-1.142c-.167-.095-.239-.238-.239-.428V5.899c0-2.545 1.95-4.472 4.591-4.472 1 0 1.927.333 2.712.928L8.23 5.067c-.285.166-.428.404-.428.737v6.898zM12 15.128l-2.795-1.57v-3.33L12 8.658l2.795 1.57v3.33L12 15.128zm1.796 7.23c-1 0-1.927-.332-2.712-.927l4.686-2.712c.285-.166.428-.404.428-.737v-6.898l1.974 1.142c.167.095.238.238.238.428v5.233c0 2.545-1.974 4.472-4.614 4.472zm-5.637-5.303l-4.544-2.617c-1.308-.761-2.188-2.378-2.188-3.948A4.482 4.482 0 014.21 6.327v5.423c0 .333.143.571.428.738l5.947 3.449-1.95 1.118a.432.432 0 01-.476 0zm-.262 3.9c-2.688 0-4.662-2.021-4.662-4.519 0-.19.024-.38.047-.57l4.686 2.71c.286.167.571.167.856 0l5.97-3.448v2.26c0 .19-.07.333-.237.428l-4.543 2.616c-.619.357-1.356.523-2.117.523zm5.899 2.83a5.947 5.947 0 005.827-4.756C22.287 18.339 24 15.84 24 13.296c0-1.665-.713-3.282-1.998-4.448.119-.5.19-.999.19-1.498 0-3.401-2.759-5.947-5.946-5.947-.642 0-1.26.095-1.88.31A5.962 5.962 0 0010.205 0a5.947 5.947 0 00-5.827 4.757C1.713 5.447 0 7.945 0 10.49c0 1.666.713 3.283 1.998 4.448-.119.5-.19 1-.19 1.499 0 3.401 2.759 5.946 5.946 5.946.642 0 1.26-.095 1.88-.309a5.96 5.96 0 004.162 1.713z'/%3E%3C/svg%3E");
	--s-logo-codex: url("data:image/svg+xml,%3Csvg fill='url(%23g)' fill-rule='evenodd' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='12' x2='12' y1='0' y2='24' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23B1A7FF'/%3E%3Cstop offset='.5' stop-color='%237A9DFF'/%3E%3Cstop offset='1' stop-color='%233941FF'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath clip-rule='evenodd' d='M8.086.457a6.105 6.105 0 013.046-.415c1.333.153 2.521.72 3.564 1.7a.117.117 0 00.107.029c1.408-.346 2.762-.224 4.061.366l.063.03.154.076c1.357.703 2.33 1.77 2.918 3.198.278.679.418 1.388.421 2.126a5.655 5.655 0 01-.18 1.631.167.167 0 00.04.155 5.982 5.982 0 011.578 2.891c.385 1.901-.01 3.615-1.183 5.14l-.182.22a6.063 6.063 0 01-2.934 1.851.162.162 0 00-.108.102c-.255.736-.511 1.364-.987 1.992-1.199 1.582-2.962 2.462-4.948 2.451-1.583-.008-2.986-.587-4.21-1.736a.145.145 0 00-.14-.032c-.518.167-1.04.191-1.604.185a5.924 5.924 0 01-2.595-.622 6.058 6.058 0 01-2.146-1.781c-.203-.269-.404-.522-.551-.821a7.74 7.74 0 01-.495-1.283 6.11 6.11 0 01-.017-3.064.166.166 0 00.008-.074.115.115 0 00-.037-.064 5.958 5.958 0 01-1.38-2.202 5.196 5.196 0 01-.333-1.589 6.915 6.915 0 01.188-2.132c.45-1.484 1.309-2.648 2.577-3.493.282-.188.55-.334.802-.438.286-.12.573-.22.861-.304a.129.129 0 00.087-.087A6.016 6.016 0 015.635 2.31C6.315 1.464 7.132.846 8.086.457zm-.804 7.85a.848.848 0 00-1.473.842l1.694 2.965-1.688 2.848a.849.849 0 001.46.864l1.94-3.272a.849.849 0 00.007-.854l-1.94-3.393zm5.446 6.24a.849.849 0 000 1.695h4.848a.849.849 0 000-1.696h-4.848z'%3E%3C/path%3E%3C/svg%3E");
	--s-logo-cursor: url("data:image/svg+xml,%3Csvg fill='%23262624' fill-rule='evenodd' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.106 5.68L12.5.135a.998.998 0 00-.998 0L1.893 5.68a.84.84 0 00-.419.726v11.186c0 .3.16.577.42.727l9.607 5.547a.999.999 0 00.998 0l9.608-5.547a.84.84 0 00.42-.727V6.407a.84.84 0 00-.42-.726zm-.603 1.176L12.228 22.92c-.063.108-.228.064-.228-.061V12.34a.59.59 0 00-.295-.51l-9.11-5.26c-.107-.062-.063-.228.062-.228h18.55c.264 0 .428.286.296.514z'%3E%3C/path%3E%3C/svg%3E");
	--s-logo-gemini-cli: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 4.391A4.391 4.391 0 014.391 0h15.217A4.391 4.391 0 0124 4.391v15.217A4.391 4.391 0 0119.608 24H4.391A4.391 4.391 0 010 19.608V4.391z' fill='url(%23g0)'/%3E%3Cpath clip-rule='evenodd' d='M19.74 1.444a2.816 2.816 0 012.816 2.816v15.48a2.816 2.816 0 01-2.816 2.816H4.26a2.816 2.816 0 01-2.816-2.816V4.26A2.816 2.816 0 014.26 1.444h15.48zM7.236 8.564l7.752 3.728-7.752 3.727v2.802l9.557-4.596v-3.866L7.236 5.763v2.801z' fill='%231E1E2E' fill-rule='evenodd'/%3E%3Cdefs%3E%3ClinearGradient gradientUnits='userSpaceOnUse' id='g0' x1='24' x2='0' y1='6.587' y2='16.494'%3E%3Cstop stop-color='%23EE4D5D'/%3E%3Cstop offset='.328' stop-color='%23B381DD'/%3E%3Cstop offset='.476' stop-color='%23207CFE'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
	/* WordPress, Simple Icons (CC0), drawn as a mask in ink. */
	--s-logo-wp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.469 6.825c.84 1.537 1.318 3.3 1.318 5.175 0 3.979-2.156 7.456-5.363 9.325l3.295-9.527c.615-1.54.82-2.771.82-3.864 0-.405-.026-.78-.07-1.11m-7.981.105c.647-.03 1.232-.105 1.232-.105.582-.075.514-.93-.067-.899 0 0-1.755.135-2.88.135-1.064 0-2.85-.15-2.85-.15-.585-.03-.661.855-.075.885 0 0 .54.061 1.125.09l1.68 4.605-2.37 7.08L5.354 6.9c.649-.03 1.234-.1 1.234-.1.585-.075.516-.93-.065-.896 0 0-1.746.138-2.874.138-.2 0-.438-.008-.69-.015C4.911 3.15 8.235 1.215 12 1.215c2.809 0 5.365 1.072 7.286 2.833-.046-.003-.091-.009-.141-.009-1.06 0-1.812.923-1.812 1.914 0 .89.513 1.643 1.06 2.531.411.72.89 1.643.89 2.977 0 .915-.354 1.994-.821 3.479l-1.075 3.585-3.9-11.61.001.014zM12 22.784c-1.059 0-2.081-.153-3.048-.437l3.237-9.406 3.315 9.087c.024.053.05.101.078.149-1.12.393-2.325.609-3.582.609M1.211 12c0-1.564.336-3.05.935-4.39L7.29 21.709C3.694 19.96 1.212 16.271 1.211 12M12 0C5.385 0 0 5.385 0 12s5.385 12 12 12 12-5.385 12-12S18.615 0 12 0'/%3E%3C/svg%3E");
}
@keyframes s-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes s-step { from { opacity: 0; transform: translateY(8px); } }
@keyframes s-spin { to { transform: rotate(360deg); } }
@keyframes s-pop { from { opacity: 0; transform: scale(0.3); } }
@keyframes s-hold { 0%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes s-fade { from { opacity: 0; } }
@keyframes s-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes s-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes s-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes s-feed { 0%, 20% { transform: translateY(0); } 25%, 45% { transform: translateY(-44px); } 50%, 70% { transform: translateY(-88px); } 75%, 95% { transform: translateY(-132px); } 100% { transform: translateY(-176px); } }
@keyframes s-sweep { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
@keyframes s-odo { from { transform: translateY(0); } }
@property --s-ring-p { syntax: '<percentage>'; inherits: false; initial-value: 79%; }
@keyframes s-ring { from { --s-ring-p: 0%; } }

/* ---- hero frame: the pixel meadow canvas sits behind everything in the section */
.s-section.s-bg-sky.s-hero { position: relative; isolation: isolate; padding-top: 64px; padding-bottom: 0; overflow: hidden; }
.s-hero > .s-pix { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; display: block; pointer-events: none; image-rendering: pixelated; }
.s-hero > .s-news, .s-hero > .s-h1, .s-hero > .s-sub, .s-hero > .wp-block-buttons, .s-hero > .s-note { animation: s-rise 0.8s var(--s-ease) both; }
.s-hero > .s-h1 { animation-delay: 0.12s; }
.s-hero > .s-sub { animation-delay: 0.22s; }
.s-hero > .wp-block-buttons { animation-delay: 0.3s; }
.s-hero > .s-note { animation-delay: 0.36s; }
.s-section .s-news { display: flex; justify-content: center; margin: 0 0 24px; }
.s-news a { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border-radius: 999px; background: rgb(255 255 255 / 0.72); border: 1px solid rgb(38 38 36 / 0.08); font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--s-ink); text-decoration: none; }
.s-news a:hover { background: #fff; color: var(--s-ink); }
.s-news a::after { content: ''; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--s-chev) center / contain no-repeat; mask: var(--s-chev) center / contain no-repeat; }
.s-news-tag { font: 500 12px/1.4 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; background: var(--s-brand-soft); color: var(--s-ink); padding: 3px 9px; border-radius: 999px; }
.s-section .s-hero .s-h1 ~ .s-sub, .s-section.s-hero .s-h1 ~ .s-sub { max-width: 620px; margin-top: 26px; text-wrap: balance; }

/* ---- hero art: the Needs your OK card and its result rows (the horse and rider are drawn in the
   meadow canvas; the stage is in the notch-hero block at the end) */
.s-section .s-say { width: fit-content; max-width: 85%; margin: 0 0 14px auto; padding: 11px 16px; border-radius: 16px 16px 4px 16px; background: var(--s-ink); color: #fff; font-size: 16px; line-height: 1.4; animation: s-step 0.5s var(--s-ease) 0.5s both; }
.s-okc { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; margin-top: 12px; padding: 12px 12px 12px 16px; border: 1.5px solid var(--s-brand); border-radius: 14px; animation: s-step 0.6s var(--s-ease) 3.5s both; }
.s-section .s-okc .s-ok-label { grid-column: 1; display: flex; align-items: center; gap: 8px; font-size: 12px; }
.s-okc .s-ok-label::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--s-brand); animation: s-ping-ring 1.6s var(--s-ease) infinite; }
@keyframes s-ping-ring { 0% { box-shadow: 0 0 0 0 rgb(208 0 196 / 0.5); } 100% { box-shadow: 0 0 0 9px rgb(208 0 196 / 0); } }
.s-section .s-okc .s-art-title { grid-column: 1; margin: 0; font-size: 16px; }
.s-section .s-okc .wp-block-buttons { grid-column: 2; grid-row: 1 / span 2; margin: 0; gap: 6px; flex-wrap: nowrap; }
.s-section .s-okc .wp-block-buttons .wp-block-button__link { padding: 8px 14px; font-size: 13px; }
.s-section .s-done { display: none; align-items: center; gap: 10px; margin-top: 12px; padding: 12px 12px 12px 14px; border-radius: 14px; background: var(--s-brand-tint); font-size: 15px; font-weight: 600; animation: s-step 0.45s var(--s-ease) both; }
.s-done::before { content: ''; flex: none; width: 20px; height: 20px; background: var(--s-tick) center / contain no-repeat; }
.s-done-no { background: var(--s-panel-2); }
.s-done-no::before { background-image: var(--s-dash); }
.s-again { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--s-brand); cursor: pointer; }
.s-again::before { content: ''; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--s-redo) center / contain no-repeat; mask: var(--s-redo) center / contain no-repeat; }
.s-again:hover { color: var(--s-ink); }
.s-section .s-meadow {
	position: relative; z-index: 2; height: 200px; margin: -150px calc(-1 * var(--s-pad)) 0; pointer-events: none;
	background: url('../img/pixel-hero-7.png?v=2026-10-22') center bottom / auto 100% repeat-x; image-rendering: pixelated;
}
.s-hero.has-meadow .s-meadow { background: none; }
.s-motion-toggle { position: absolute; right: var(--s-pad); top: 0; z-index: 6; padding: 7px 12px; border: 1px solid rgb(38 38 36 / 0.1); border-radius: 999px; background: rgb(255 255 255 / 0.6); font: 500 12px/1.4 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--s-ink); cursor: pointer; }
.s-motion-toggle:hover { background: #fff; }
.s-motion-toggle:focus-visible, .s-again:focus-visible { outline: 2px solid var(--s-brand); outline-offset: 2px; }
@media (max-width: 1100px) {
	.s-section .s-meadow { height: 230px; margin-top: -40px; }
}
@media (max-width: 520px) {
	.s-okc { grid-template-columns: minmax(0, 1fr); }
	.s-section .s-okc .wp-block-buttons { grid-column: 1; grid-row: auto; margin-top: 10px; }
	.s-motion-toggle { right: 16px; }
}

/* ---- tabs: autoplay bar, and each stage builds when it opens */
.s-autoplay .s-tab a { position: relative; overflow: hidden; }
.s-tab .s-fill { position: absolute; left: 16px; right: 16px; bottom: 5px; height: 2px; border-radius: 2px; background: var(--s-brand-soft); transform: scaleX(0); transform-origin: left center; pointer-events: none; }
.s-autoplay .s-tab.is-active .s-fill { animation: s-prog 7s linear both; }
.s-autoplay:hover .s-fill, .s-autoplay:focus-within .s-fill { animation-play-state: paused; }
.s-tabs.js .s-panel.is-active .s-panel-copy { animation: s-rise 0.6s var(--s-ease) both; }
.s-tabs.js .s-panel.is-active .s-stage > * { animation: s-step 0.6s var(--s-ease) 0.1s both; }
.s-tabs.js .s-panel.is-active .s-stage > *:nth-child(2) { animation-delay: 1.1s; }
.s-tabs.js .s-panel.is-active .s-minipage-hero { animation: s-step 0.6s var(--s-ease) 0.2s both; }
.s-tabs.js .s-panel.is-active .s-minipage-cell { animation: s-step 0.6s var(--s-ease) 0.4s both; }
.s-tabs.js .s-panel.is-active .s-minipage-cell:nth-child(2) { animation-delay: 0.55s; }
.s-tabs.js .s-panel.is-active .s-minipage-cell:nth-child(3) { animation-delay: 0.7s; }
.s-tabs.js .s-panel.is-active .s-serp-title { animation: s-type 1.5s steps(30) 0.4s both; }
.s-tabs.js .s-panel.is-active .s-answer { animation-delay: 1.8s; }
.s-tabs.js .s-panel.is-active .s-chart { animation: s-wipe 1.6s var(--s-ease) 0.3s both; }
.s-tabs.js .s-panel.is-active .s-chips { animation: s-step 0.5s var(--s-ease) 1.4s both; }
.s-tabs.js .s-panel.is-active .s-mail-head { animation: s-step 0.5s var(--s-ease) 0.2s both; }
.s-tabs.js .s-panel.is-active .s-mail-hero { animation: s-step 0.5s var(--s-ease) 0.45s both; }
.s-tabs.js .s-panel.is-active .s-mail > .s-row-between { animation: s-step 0.5s var(--s-ease) 0.7s both; }

/* ---- the calmer look of D, on the home page only (D4, D5) */
.home .s-tabs .s-stage { background: #fff; border: 0; }
.home .s-stage > .s-card:not(.s-badge-ok), .home .s-stage > .s-card.s-answer { box-shadow: none; border: 1px solid var(--s-line-2); }
.home .s-stage > .s-card.s-answer { box-shadow: var(--s-shadow); border: 0; }
.home .s-chip-pages, .home .s-chip-seo, .home .s-chip-stats, .home .s-chip-email { background: var(--s-brand-tint) !important; color: var(--s-brand-text) !important; }
.home .s-box.s-bg-stats, .home .s-box.s-bg-seo { background: var(--s-panel); }
.home .s-key::before { background: #a1a1aa; }
.home .s-key-ai::before { background: var(--s-brand); }
.home .s-chart { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 150' preserveAspectRatio='none'%3E%3Cpath d='M0 120 C60 110 90 95 140 98 S230 70 280 74 S380 40 430 44 S480 30 500 26 L500 150 L0 150 Z' fill='%23fde0fb'/%3E%3Cpath d='M0 120 C60 110 90 95 140 98 S230 70 280 74 S380 40 430 44 S480 30 500 26' fill='none' stroke='%23a1a1aa' stroke-width='3' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 140 C80 136 140 132 200 128 S320 112 380 104 S460 92 500 86' fill='none' stroke='%23d000c4' stroke-width='3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
.home .s-ring { background: conic-gradient(var(--s-brand) 0 var(--s-ring-p), var(--s-brand-tint) 0); }

/* ---- hover: features, bento and plans (translate, so it never fights the rise-in) */
.home .s-item .s-ico { transition: transform 0.3s var(--s-ease); }
.home .s-item:hover .s-ico { transform: translateY(-2px) rotate(-4deg); }
.home .s-box, .home .s-plan { transition: translate 0.35s var(--s-ease); }
.home .s-box:hover, .home .s-plan:hover { translate: 0 -3px; }
.s-section .s-prev { max-height: 0; margin-top: 0; padding: 0 12px; overflow: hidden; opacity: 0; border: 0; border-radius: 10px; background: #f4f4f5; font-size: 14px; transition: max-height 0.4s var(--s-ease), opacity 0.3s, margin 0.4s var(--s-ease), padding 0.4s var(--s-ease); }
.s-box:hover .s-prev, .s-box:focus-within .s-prev { max-height: 60px; margin-top: 12px; padding: 10px 12px; opacity: 1; }
@media (hover: none) { .s-section .s-prev { max-height: none; margin-top: 12px; padding: 10px 12px; opacity: 1; } }
.home .s-box:hover .s-row-toggle:last-child::after { background: radial-gradient(circle 7px at 10px 50%, #fff 97%, transparent 100%), var(--s-grey); }

/* ---- bento: the record rolls, the count rolls in (motion.js builds both) */
.s-feed { height: 132px; overflow: hidden; }
.s-feed-in { animation: s-feed 12s var(--s-ease) infinite; }
.s-section .s-feed .s-row { height: 44px; box-sizing: border-box; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.s-feed:hover .s-feed-in { animation-play-state: paused; }
.s-section .s-bignum.is-odo { display: flex; }
.s-odo-d { display: inline-block; height: 1em; overflow: hidden; }
.s-odo-r { display: flex; flex-direction: column; }
.s-odo-r > span { display: block; height: 1em; line-height: 1; }
/* The count rolls in once it is in view (motion.js adds is-armed, then is-in). */
.s-bignum.is-armed:not(.is-in) .s-odo-r { transform: translateY(0); }
.s-bignum.is-in .s-odo-r { animation: s-odo 1.6s var(--s-ease) both; }
.s-bignum.is-in .s-odo-d:nth-child(4) .s-odo-r { animation-delay: 0.08s; }
.s-bignum.is-in .s-odo-d:nth-child(5) .s-odo-r { animation-delay: 0.16s; }
.s-bignum.is-in .s-odo-d:nth-child(6) .s-odo-r { animation-delay: 0.24s; }
.s-n0 { transform: translateY(0); } .s-n1 { transform: translateY(-1em); } .s-n2 { transform: translateY(-2em); } .s-n3 { transform: translateY(-3em); } .s-n4 { transform: translateY(-4em); }
.s-n5 { transform: translateY(-5em); } .s-n6 { transform: translateY(-6em); } .s-n7 { transform: translateY(-7em); } .s-n8 { transform: translateY(-8em); } .s-n9 { transform: translateY(-9em); }
.s-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- AI apps: the mark on ink with no box (brand rule), the canvas draws the threads */
.s-hub-mark { width: 80px; height: 80px; border-radius: 0; background: none; box-shadow: none; }
.s-hub-mark::before { width: 80px; height: 80px; }
.s-hub.has-canvas { background: none; }
.s-hub > .s-threads { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
@media (max-width: 900px) {
	.s-hub > .s-threads { display: none; }
	.s-hub-mark { margin: 0 calc(50% - 40px) 10px; }
}

/* ---- AI apps: each app's mark, one colour (AGENTS.md: app logos render in ink).
   Source: @lobehub/icons-static-svg 1.91.0 (MIT), the same set the plugin's admin uses. */
.s-section .s-hub-app { display: inline-flex; align-items: center; gap: 9px; }
.s-hub-app::before { content: ''; flex: none; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.s-hub-1, .s-app-claude { --logo: url("data:image/svg+xml,%3Csvg fill='black' fill-rule='evenodd' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.709 15.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z'%3E%3C/path%3E%3C/svg%3E"); }
.s-hub-2 { --logo: url("data:image/svg+xml,%3Csvg fill='black' fill-rule='evenodd' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.205 8.658v-2.26c0-.19.072-.333.238-.428l4.543-2.616c.619-.357 1.356-.523 2.117-.523 2.854 0 4.662 2.212 4.662 4.566 0 .167 0 .357-.024.547l-4.71-2.759a.797.797 0 00-.856 0l-5.97 3.473zm10.609 8.8V12.06c0-.333-.143-.57-.429-.737l-5.97-3.473 1.95-1.118a.433.433 0 01.476 0l4.543 2.617c1.309.76 2.189 2.378 2.189 3.948 0 1.808-1.07 3.473-2.76 4.163zM7.802 12.703l-1.95-1.142c-.167-.095-.239-.238-.239-.428V5.899c0-2.545 1.95-4.472 4.591-4.472 1 0 1.927.333 2.712.928L8.23 5.067c-.285.166-.428.404-.428.737v6.898zM12 15.128l-2.795-1.57v-3.33L12 8.658l2.795 1.57v3.33L12 15.128zm1.796 7.23c-1 0-1.927-.332-2.712-.927l4.686-2.712c.285-.166.428-.404.428-.737v-6.898l1.974 1.142c.167.095.238.238.238.428v5.233c0 2.545-1.974 4.472-4.614 4.472zm-5.637-5.303l-4.544-2.617c-1.308-.761-2.188-2.378-2.188-3.948A4.482 4.482 0 014.21 6.327v5.423c0 .333.143.571.428.738l5.947 3.449-1.95 1.118a.432.432 0 01-.476 0zm-.262 3.9c-2.688 0-4.662-2.021-4.662-4.519 0-.19.024-.38.047-.57l4.686 2.71c.286.167.571.167.856 0l5.97-3.448v2.26c0 .19-.07.333-.237.428l-4.543 2.616c-.619.357-1.356.523-2.117.523zm5.899 2.83a5.947 5.947 0 005.827-4.756C22.287 18.339 24 15.84 24 13.296c0-1.665-.713-3.282-1.998-4.448.119-.5.19-.999.19-1.498 0-3.401-2.759-5.947-5.946-5.947-.642 0-1.26.095-1.88.31A5.962 5.962 0 0010.205 0a5.947 5.947 0 00-5.827 4.757C1.713 5.447 0 7.945 0 10.49c0 1.666.713 3.283 1.998 4.448-.119.5-.19 1-.19 1.499 0 3.401 2.759 5.946 5.946 5.946.642 0 1.26-.095 1.88-.309a5.96 5.96 0 004.162 1.713z'%3E%3C/path%3E%3C/svg%3E"); }
.s-hub-3, .s-app-cursor { --logo: url("data:image/svg+xml,%3Csvg fill='black' fill-rule='evenodd' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.106 5.68L12.5.135a.998.998 0 00-.998 0L1.893 5.68a.84.84 0 00-.419.726v11.186c0 .3.16.577.42.727l9.607 5.547a.999.999 0 00.998 0l9.608-5.547a.84.84 0 00.42-.727V6.407a.84.84 0 00-.42-.726zm-.603 1.176L12.228 22.92c-.063.108-.228.064-.228-.061V12.34a.59.59 0 00-.295-.51l-9.11-5.26c-.107-.062-.063-.228.062-.228h18.55c.264 0 .428.286.296.514z'%3E%3C/path%3E%3C/svg%3E"); }
.s-hub-4 { --logo: url("data:image/svg+xml,%3Csvg fill='black' fill-rule='evenodd' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='M20.998 10.949H24v3.102h-3v3.028h-1.487V20H18v-2.921h-1.487V20H15v-2.921H9V20H7.488v-2.921H6V20H4.487v-2.921H3V14.05H0V10.95h3V5h17.998v5.949zM6 10.949h1.488V8.102H6v2.847zm10.51 0H18V8.102h-1.49v2.847z'%3E%3C/path%3E%3C/svg%3E"); }
.s-hub-5, .s-app-codex { --logo: url("data:image/svg+xml,%3Csvg fill='black' fill-rule='evenodd' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='M8.086.457a6.105 6.105 0 013.046-.415c1.333.153 2.521.72 3.564 1.7a.117.117 0 00.107.029c1.408-.346 2.762-.224 4.061.366l.063.03.154.076c1.357.703 2.33 1.77 2.918 3.198.278.679.418 1.388.421 2.126a5.655 5.655 0 01-.18 1.631.167.167 0 00.04.155 5.982 5.982 0 011.578 2.891c.385 1.901-.01 3.615-1.183 5.14l-.182.22a6.063 6.063 0 01-2.934 1.851.162.162 0 00-.108.102c-.255.736-.511 1.364-.987 1.992-1.199 1.582-2.962 2.462-4.948 2.451-1.583-.008-2.986-.587-4.21-1.736a.145.145 0 00-.14-.032c-.518.167-1.04.191-1.604.185a5.924 5.924 0 01-2.595-.622 6.058 6.058 0 01-2.146-1.781c-.203-.269-.404-.522-.551-.821a7.74 7.74 0 01-.495-1.283 6.11 6.11 0 01-.017-3.064.166.166 0 00.008-.074.115.115 0 00-.037-.064 5.958 5.958 0 01-1.38-2.202 5.196 5.196 0 01-.333-1.589 6.915 6.915 0 01.188-2.132c.45-1.484 1.309-2.648 2.577-3.493.282-.188.55-.334.802-.438.286-.12.573-.22.861-.304a.129.129 0 00.087-.087A6.016 6.016 0 015.635 2.31C6.315 1.464 7.132.846 8.086.457zm-.804 7.85a.848.848 0 00-1.473.842l1.694 2.965-1.688 2.848a.849.849 0 001.46.864l1.94-3.272a.849.849 0 00.007-.854l-1.94-3.393zm5.446 6.24a.849.849 0 000 1.695h4.848a.849.849 0 000-1.696h-4.848z'%3E%3C/path%3E%3C/svg%3E"); }
.s-hub-6 { --logo: url("data:image/svg+xml,%3Csvg fill='black' fill-rule='evenodd' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.688 2.343a2.588 2.588 0 00-3.61 0l-9.626 9.44a.863.863 0 01-1.203 0 .823.823 0 010-1.18l9.626-9.44a4.313 4.313 0 016.016 0 4.116 4.116 0 011.204 3.54 4.3 4.3 0 013.609 1.18l.05.05a4.115 4.115 0 010 5.9l-8.706 8.537a.274.274 0 000 .393l1.788 1.754a.823.823 0 010 1.18.863.863 0 01-1.203 0l-1.788-1.753a1.92 1.92 0 010-2.754l8.706-8.538a2.47 2.47 0 000-3.54l-.05-.049a2.588 2.588 0 00-3.607-.003l-7.172 7.034-.002.002-.098.097a.863.863 0 01-1.204 0 .823.823 0 010-1.18l7.273-7.133a2.47 2.47 0 00-.003-3.537z'%3E%3C/path%3E%3Cpath d='M14.485 4.703a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a4.115 4.115 0 000 5.9 4.314 4.314 0 006.016 0l7.12-6.982a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a2.588 2.588 0 01-3.61 0 2.47 2.47 0 010-3.54l7.12-6.982z'%3E%3C/path%3E%3C/svg%3E"); }

/* ---- scroll: rise in, the highlight sweep, the count and the ring. Final state without support. */
@supports (animation-timeline: view()) {
	.home .s-statement ~ .s-sub, .home .s-feat-copy, .home .s-item, .home .s-apps-copy, .home .s-box, .home .s-plan, .home .s-faq > *, .home .s-cta {
		animation: s-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 70%;
	}
	.home .s-statement .s-hl {
		background: linear-gradient(var(--s-brand-soft), var(--s-brand-soft)) no-repeat 0 0 / 100% 100%;
		animation: s-sweep linear both; animation-timeline: view(); animation-range: entry 40% cover 45%;
	}
	.home .s-ring { animation: s-ring linear both; animation-timeline: view(); animation-range: entry 20% entry 100%; }
}

/* ---- the pause button and reduced motion */
.s-motion-paused *, .s-motion-paused *::before, .s-motion-paused *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
	.s-section *, .s-section *::before, .s-section *::after { animation: none !important; transition: none !important; }
}

/* ---- hero headline that changes (Fahim, 2026-10-16, after chatseo.app): "Your WordPress
   [SEO / monitoring / writing] done by [Codex / Claude / Cursor]". .s-swap holds the choices and
   .is-on is the one shown; assets/js/motion.js moves the job and the agent in turns. Without JS,
   with reduced motion or while paused, the first of each stays. Hidden choices are visibility:
   hidden, so a screen reader reads one headline. */
.s-swap { position: relative; display: inline-block; vertical-align: bottom; white-space: nowrap; transition: width 0.5s var(--s-ease); }
.s-swap > span { display: inline-block; transition: opacity 0.45s ease, filter 0.45s ease, transform 0.45s var(--s-ease), visibility 0s linear 0s; }
.s-swap > span:not(.is-on) { position: absolute; left: 0; top: 0; visibility: hidden; opacity: 0; filter: blur(10px); transform: translateY(0.16em); pointer-events: none; transition-delay: 0s, 0s, 0s, 0.45s; }
.s-swap-job { color: var(--s-brand); }
.s-swap-app > span { display: inline-flex; align-items: center; gap: 0.16em; }
.s-swap-app > span::before { content: ''; flex: none; width: 0.78em; height: 0.78em; background: currentColor; -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.s-section .s-h1.s-h1-swap { max-width: none; }
/* "Your WordPress monitoring" stays on one line from 901px up, so the headline never jumps. */
@media (min-width: 901px) { .s-section .s-h1.s-h1-swap { font-size: min(84px, calc((100vw - 200px) / 12.2)); } }
@media (prefers-reduced-motion: reduce) { .s-swap, .s-swap > span { transition: none; } }
/* The agents in the hero headline wear their own colors (Fahim, 2026-10-16: "real logo"):
   Claude's clay, Codex's blue gradient, Cursor's black. So do the apps in How it works;
   every other app logo stays ink. */
.s-swap-app .s-app-claude { --logo-c: var(--s-logo-claude); }
.s-swap-app .s-app-codex { --logo-c: var(--s-logo-codex); }
.s-swap-app .s-app-cursor { --logo-c: var(--s-logo-cursor); }
.s-swap-app > span::before { background: var(--logo-c) center / contain no-repeat; -webkit-mask: none; mask: none; }

/* ---- one accent (Fahim, 2026-10-16: "too much brand color force.. subtle use please", "use design
   sense and principle"). Neutrals carry the page; magenta marks only where the eye should land:
   primary buttons, the headline's changing word, the "Needs your OK" box, the Popular badge,
   links and the saddle in the art. Ticks, chips, labels and icon tiles go ink and grey. */
.s-section .s-label { color: var(--s-ink-2); }
.s-section .s-bg-ink .s-label, .s-section.s-bg-ink .s-label, .s-section > .s-cta .s-label { color: var(--s-ink-on-dark); }
.s-ico { background: #f1f1f3; color: var(--s-ink); }
.s-news-tag { background: var(--s-ink); color: #fff; }
.s-checks li::before, .s-plan.is-soon .s-checks li::before, .s-checks.is-soon li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23e9e9ec'/%3E%3Cpath d='M7.5 12.5l3 3 6-6.5' fill='none' stroke='%23262624' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.s-plan.is-featured .s-checks li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23d000c4'/%3E%3Cpath d='M7.5 12.5l3 3 6-6.5' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.s-plan.is-featured { box-shadow: inset 0 0 0 2px var(--s-ink), 0 30px 60px -36px rgb(38 38 36 / 0.4); }
.s-section .s-plan.is-featured .s-chip-lime { background: var(--s-ink) !important; color: #fff !important; }
.s-section .s-soon { background: #efeff1; color: var(--s-ink-2); }
.s-compare .yes { color: var(--s-ink); }

/* ---- one type system (Fahim, 2026-10-16: "make design consistent, font size, font weight, font,
   color"). Geist for every word of the interface; Geist Mono only for code and data. Weights:
   650 headings, prices and card titles; 600 small labels, chips and list heads; 500 menus;
   400 body and buttons. Sizes: 84 / 48 / 40 headings, 21 hero lines, 18 lines under headings,
   17 body, 15 small, 13 captions, 12 chips. Secondary text is always ink-2. */
.s-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { font-weight: 500; }
.s-section .s-h1 ~ .s-sub, .s-section .s-statement ~ .s-sub, .s-section .s-sub { color: var(--s-ink-2); }
.s-news-tag { font: 600 12px/1.4 var(--sans); letter-spacing: 0.02em; text-transform: none; }
.s-motion-toggle { font: 500 12px/1.4 var(--sans); letter-spacing: 0; text-transform: none; }
.s-section .s-plugin-name { font: 500 13px/1.4 var(--sans); letter-spacing: 0; }
.s-sites .wp-block-button__link strong { font-weight: 600; }
.s-section .s-chip, .s-box .s-chip, .s-plan-head .s-chip, .s-section .s-soon { font-size: 12px; font-weight: 600; }
.s-sites .wp-block-button__link em { font-size: 11px; }
.s-section .s-plan .s-plan-inc, .s-section .s-plan .s-plan-inc strong { font-weight: 600; }
.s-section .s-pick .s-pick-title, .s-section .s-plan-name, .s-section .s-box-title { font-weight: 700; }
.s-section .s-guarantee, .s-section .s-plan .s-plan-note, .s-mega .s-mi .wp-block-navigation-item__description { font-size: 13px; }

/* ---- a clearer hero (Fahim, 2026-10-16: "clear hero", "hero bg color not good now", "the cloud
   moving but not visible"). A soft sky gradient from the header's blue to near-white at the
   meadow, so the clouds show; headings a touch lighter and less tight; the motion switch sits
   quietly in the corner over the meadow. */
.s-section.s-bg-sky.s-hero { background: linear-gradient(180deg, #f1f1f4 0%, #f5f5f7 45%, #fafafb 100%); }
.s-section .s-h1, .s-section .s-h2, .s-section .s-h3, .s-section .s-statement { font-weight: 650; }
.s-section .s-h1 { letter-spacing: -0.042em; }
.s-section .s-h2 { letter-spacing: -0.035em; }
.s-section .s-price, .s-section .s-plan-name, .s-section .s-box-title, .s-section .s-pick .s-pick-title { font-weight: 650; }
.s-motion-toggle { top: auto; bottom: 16px; right: 16px; padding: 5px 10px; border-color: rgb(38 38 36 / 0.08); background: rgb(255 255 255 / 0.55); color: var(--s-ink-2); }

/* ---- the plan size picker sits on top of the cards, not in the page heading (Fahim, 2026-10-16:
   "it present in page heading.. user will confused.. 5 sites text only very bad"). Each option
   names the plan and its sites. */
.s-pricing-plans .s-sites-label { margin: 0; font-size: 15px; font-weight: 600; color: var(--s-ink-2); }
.s-section .wp-block-buttons.s-sites { max-width: 680px; margin: 14px auto 0; }
.s-section .s-pricing-plans .wp-block-buttons.s-sites + .s-plans, .s-pricing-plans .s-sites + .s-plans { margin-top: 40px; }
.s-sites .wp-block-button__link { height: 68px; font-size: 13px; color: var(--s-ink-2); }
.s-sites .wp-block-button__link strong { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--s-ink); }
html:not([data-sites]) .s-sites .is-popular .wp-block-button__link strong, .s-sites .is-on .wp-block-button__link strong { color: #fff; }
html:not([data-sites]) .s-sites .is-popular .wp-block-button__link, .s-sites .is-on .wp-block-button__link { color: rgb(255 255 255 / 0.75); }
@media (max-width: 520px) { .s-sites .wp-block-button__link strong { font-size: 14px; } .s-sites .wp-block-button__link { font-size: 12px; } }

/* ---- brand, buttons and Works with (Fahim, 2026-10-16 evening: "why green color use landing",
   "page where we are megenta branding color?", "button size why not match primary and secondary",
   "Works with the plugins you already run: this section loook very poor design").
   The greys lost their olive cast and the land went grey, so magenta is the only colour on the
   page and reads as the brand: the buttons, the headline word, one mark on each eyebrow, links,
   ticks on the featured plan and the saddle in the art. */

/* Each eyebrow carries one magenta mark: its icon, or a dot when it has none. */
.s-section .s-label[class*='s-ico-']::before { background: var(--s-brand); }
.s-section .s-label:not([class*='s-ico-'])::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--s-brand); }
.s-section .s-bg-ink .s-label::before, .s-section.s-bg-ink .s-label::before { background: var(--s-brand-soft); }

/* Links read as links. */
.s-more a { color: var(--s-brand-text); }
.s-more a:hover { color: var(--s-brand-hover); }

/* Buttons: one weight, and the buttons in a pair share one width, so primary and secondary match. */
.wp-block-button__link { font-weight: 500; }
.s-section .wp-block-buttons:not(.s-sites):not(.s-tier-buy):not(:has(.s-t)):has(> .wp-block-button + .wp-block-button) { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: fit-content; }
.s-section .wp-block-buttons:not(.s-sites):not(.s-tier-buy):not(:has(.s-t)):has(> .wp-block-button + .wp-block-button) > .wp-block-button > .wp-block-button__link { display: block; width: 100%; text-align: center; }
.s-section .wp-block-buttons.is-content-justification-center:has(> .wp-block-button + .wp-block-button),
.s-section .s-cta .wp-block-buttons:has(> .wp-block-button + .wp-block-button),
.s-section.s-center .wp-block-buttons:has(> .wp-block-button + .wp-block-button) { margin-inline: auto; }
@media (max-width: 360px) {
	.s-section .wp-block-buttons:not(.s-sites):not(.s-tier-buy):not(:has(.s-t)):has(> .wp-block-button + .wp-block-button) { grid-auto-flow: row; width: 100%; }
}

/* Feature stages and chips drop their green, blue and peach tints on every page: grey stages,
   and chips in the one brand tint (the home page already did this). */
.s-bg-pages, .s-bg-seo, .s-bg-stats, .s-bg-email,
.s-box.s-bg-pages, .s-box.s-bg-seo, .s-box.s-bg-stats { background: var(--s-panel); }
.s-chip-pages, .s-chip-seo, .s-chip-stats, .s-chip-email { background: var(--s-brand-tint) !important; color: var(--s-brand-text) !important; }

/* Works with: one card per tool, its real logo in ink (AGENTS.md: logos in ink), what it is,
   what your AI does there, and the Pro note where there is one. Logos: Simple Icons (CC0) for
   WooCommerce, Yoast and Unsplash; the plugins' own WordPress.org icons for Rank Math and All in
   One SEO; Divi's own logo font (Divi/core/admin/fonts/logos, glyph divi-bold). */
.s-section .s-ints { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 48px 0 0; text-align: left; }
.s-section .s-int { display: flex; flex-direction: column; gap: 10px; padding: 24px; background: #fff; border: 1px solid var(--s-line); border-radius: 16px; transition: border-color 0.2s, box-shadow 0.2s; }
.s-section .s-int:hover { border-color: var(--s-line-3); box-shadow: 0 18px 36px -24px rgb(38 38 36 / 0.25); }
.s-section .s-int-head { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 44px; margin: 0 0 6px; padding-left: 58px; line-height: 1.3; }
.s-section .s-int-head::before { content: ''; position: absolute; left: 0; top: 50%; width: 44px; height: 44px; margin-top: -22px; border-radius: 12px; background: var(--s-panel); box-shadow: inset 0 0 0 1px var(--s-line-2); }
.s-section .s-int-head::after { content: ''; position: absolute; left: 10px; top: 50%; width: 24px; height: 24px; margin-top: -12px; background: var(--s-ink); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.s-section .s-int-head strong { font-size: 17px; font-weight: 600; color: var(--s-ink); }
.s-section .s-int-head span { font-size: 13px; color: var(--s-ink-2); }
.s-section .s-int .s-mut { margin: 0; font-size: 15px; line-height: 1.5; }
.s-section .s-int .s-chip { align-self: flex-start; margin: auto 0 0; background: var(--s-brand-tint) !important; color: var(--s-brand-text) !important; }
@media (max-width: 900px) { .s-section .s-ints { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .s-section .s-ints { grid-template-columns: minmax(0, 1fr); margin-top: 32px; } }
.s-logo-divi { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath transform='matrix(1 0 0 -1 0 960)' d='M512 960c135.791 0 266.020-53.943 362.039-149.961s149.961-226.248 149.961-362.039c0-282.77-229.23-512-512-512s-512 229.23-512 512c0 282.77 229.23 512 512 512zM512 864c-229.75 0-416-186.25-416-416s186.25-416 416-416c110.33 0 216.141 43.828 294.156 121.844 78.016 78.015 121.844 183.826 121.844 294.156 0 229.75-186.25 416-416 416zM524.168 679.99c33.292 0.238 66.304-6.141 97.147-18.771 27.309-11.107 51.874-28.104 71.967-49.798 19.616-21.854 34.583-47.523 43.979-75.426 10.141-30.959 15.114-63.399 14.717-95.997 0.251-30.949-4.666-61.72-14.546-91.026-9.262-27.981-24.048-53.784-43.47-75.854-19.919-22.295-44.498-39.859-71.967-51.427-30.888-13.881-64.263-21.26-98.082-21.685h-136.107c-13.669-0.207-26.849 5.12-36.587 14.787s-15.219 22.866-15.219 36.64v377.13c0 13.819 5.515 27.058 15.308 36.733s23.040 14.97 36.753 14.694h136.107zM533.485 591.998h-109.609v-304h109.609c20.023 0.575 39.693 5.567 57.68 14.64 15.671 7.108 29.61 17.71 40.812 31.040 11.305 13.88 19.838 29.92 25.109 47.2l-0.466 0.16c5.752 18.32 13.059 80.16-0.234 121.12-5.448 17.204-14.139 33.135-25.575 46.88-11.261 13.085-25.199 23.439-40.812 30.32-17.795 8.162-37.033 12.465-56.514 12.64z'/%3E%3C/svg%3E"); }
.s-logo-woo { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-0.3 8.6 9 6.6'%3E%3Cpath d='M.754 9.58a.754.754 0 00-.754.758v2.525c0 .42.339.758.758.758h3.135l1.431.799-.326-.799h2.373a.757.757 0 00.758-.758v-2.525a.757.757 0 00-.758-.758H.754zm2.709.445h.03c.065.001.124.023.179.067a.26.26 0 01.103.19.29.29 0 01-.033.16c-.13.239-.236.64-.322 1.199-.083.541-.114.965-.094 1.267a.392.392 0 01-.039.219.213.213 0 01-.176.12c-.086.006-.177-.034-.263-.124-.31-.316-.555-.788-.735-1.416-.216.425-.375.744-.478.957-.196.376-.363.568-.502.578-.09.007-.166-.069-.233-.228-.17-.436-.352-1.277-.548-2.524a.297.297 0 01.054-.222c.047-.064.116-.095.21-.102.169-.013.265.065.288.238.103.695.217 1.284.336 1.766l.727-1.387c.066-.126.15-.192.25-.199.146-.01.237.083.273.28.083.441.188.817.315 1.136.086-.844.233-1.453.44-1.828a.255.255 0 01.218-.147zm1.293.36c.056 0 .116.006.18.02.232.05.411.177.53.386.107.18.161.395.161.654 0 .343-.087.654-.26.94-.2.332-.459.5-.781.5a.88.88 0 01-.18-.022.763.763 0 01-.531-.384 1.287 1.287 0 01-.158-.659c0-.342.085-.655.258-.937.202-.333.462-.498.78-.498zm2.084 0c.056 0 .116.006.18.02.236.05.411.177.53.386.107.18.16.395.16.654 0 .343-.086.654-.259.94-.2.332-.459.5-.781.5a.88.88 0 01-.18-.022.763.763 0 01-.531-.384 1.287 1.287 0 01-.16-.659c0-.342.087-.655.26-.937.202-.333.462-.498.78-.498zm4.437.047c-.305 0-.546.102-.718.304-.173.203-.256.49-.256.856 0 .395.086.697.256.906.17.21.418.316.744.316.315 0 .559-.107.728-.316.17-.21.256-.504.256-.883s-.087-.673-.26-.879c-.176-.202-.424-.304-.75-.304zm-1.466.002a1.13 1.13 0 00-.84.326c-.223.22-.332.499-.332.838 0 .362.108.658.328.88.22.223.505.336.861.336.103 0 .22-.016.346-.052v-.54c-.117.034-.216.051-.303.051a.545.545 0 01-.422-.177c-.106-.12-.16-.278-.16-.48 0-.19.053-.348.156-.468a.498.498 0 01.397-.181c.103 0 .212.015.332.049v-.537a1.394 1.394 0 00-.363-.045zm12.414 0a1.135 1.135 0 00-.84.326c-.223.22-.332.499-.332.838 0 .362.108.658.328.88.22.223.506.336.861.336.103 0 .22-.016.346-.052v-.54c-.116.034-.216.051-.303.051a.545.545 0 01-.422-.177c-.106-.12-.16-.278-.16-.48 0-.19.053-.348.156-.468a.498.498 0 01.397-.181c.103 0 .212.015.332.049v-.537a1.394 1.394 0 00-.363-.045zm-9.598.06l-.29 2.264h.579l.156-1.559.395 1.559h.412l.379-1.555.164 1.555h.603l-.304-2.264h-.791l-.12.508c-.03.13-.06.264-.087.4l-.067.352a29.97 29.97 0 00-.258-1.26h-.771zm2.768 0l-.29 2.264h.579l.156-1.559.396 1.559h.412l.375-1.555.165 1.555h.603l-.305-2.264h-.789l-.119.508c-.03.13-.06.264-.086.4l-.066.352c-.063-.352-.15-.771-.26-1.26h-.771zm3.988 0v2.264h.611v-1.031h.012l.494 1.03h.645l-.489-1.019a.61.61 0 00.37-.552.598.598 0 00-.25-.506c-.167-.123-.394-.186-.68-.186h-.713zm3.377 0v2.264H24v-.483h-.63v-.414h.54v-.468h-.54v-.416h.626v-.483H22.76zm-4.793.004v2.264h1.24v-.483h-.627v-.416h.541v-.468h-.54v-.415h.622v-.482h-1.236zm2.025.432c.146.003.25.025.313.072.063.046.091.12.091.227 0 .156-.135.236-.404.24v-.54zm-15.22.011c-.104 0-.205.069-.301.211a1.078 1.078 0 00-.2.639c0 .096.02.2.06.303.049.13.117.198.196.215.083.016.173-.02.27-.106.123-.11.205-.273.252-.492.016-.077.023-.16.023-.246 0-.097-.02-.2-.06-.303-.05-.13-.116-.198-.196-.215a.246.246 0 00-.045-.006zm2.083 0c-.103 0-.204.069-.3.211a1.078 1.078 0 00-.2.639c0 .096.02.2.06.303.049.13.117.198.196.215.083.016.173-.02.27-.106.123-.11.205-.273.252-.492.013-.077.023-.16.023-.246 0-.097-.02-.2-.06-.303-.05-.13-.116-.198-.196-.215a.246.246 0 00-.045-.006zm4.428.006c.233 0 .354.218.354.66-.004.273-.038.46-.098.553a.293.293 0 01-.262.139.266.266 0 01-.242-.139c-.056-.093-.084-.28-.084-.562 0-.436.11-.65.332-.65Z'/%3E%3C/svg%3E"); }
.s-logo-yoast { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.61 0 11.4 14.477 8.806 6.36H5.941l3.804 9.77a4.017 4.017 0 0 1 0 2.925c-.387.993-1.073 2.158-2.96 2.505V24c1.512-.06 2.692-.562 3.694-1.57 1.032-1.036 1.919-2.655 2.79-5.091L19.739 0ZM5.357 3.274a3.706 3.706 0 0 0-3.695 3.695v10.358a3.706 3.706 0 0 0 3.695 3.694h.817l.26-.034c1.76-.237 2.37-1.224 2.733-2.158a3.4 3.4 0 0 0 0-2.475L5.035 5.738H9.26l2.174 6.81 3.339-9.274Zm13.792.08L13.853 17.55c-.502 1.403-1.015 2.54-1.559 3.47h10.044V6.97a3.706 3.706 0 0 0-3.19-3.616Z'/%3E%3C/svg%3E"); }
.s-logo-rankmath { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='55 70 240 190'%3E%3Cpath d='M291.667 168.519L253.211 170.174L259.899 180.431L197.157 221.174L132.255 194.859L58.3334 224.804L63.4683 237.138L132.243 209.234L198.699 236.176L267.256 191.681L273.944 201.939L291.667 168.519Z'/%3E%3Cpath d='M84.5846 161.67H131.721V187.418L84.5846 206.522V161.67Z'/%3E%3Cpath d='M138.112 130.269H185.248V208.95L138.112 189.891V130.269Z'/%3E%3Cpath d='M191.639 94.7135H238.775V186.197L196.633 213.552L191.639 211.541V94.7135Z'/%3E%3C/svg%3E"); }
.s-logo-aioseo { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 73 72'%3E%3Cpath fill-rule='evenodd' d='M36.6097 72C56.492 72 72.6097 55.8823 72.6097 36C72.6097 16.1177 56.492 0 36.6097 0C16.7275 0 0.609741 16.1177 0.609741 36C0.609741 55.8823 16.7275 72 36.6097 72ZM30.8774 13.1759C30.3897 12.4327 29.4864 12.0852 28.6581 12.3778C27.7146 12.7111 26.7918 13.1031 25.8952 13.5514C25.1081 13.945 24.7132 14.8439 24.8865 15.7207L25.5038 18.8445C25.6627 19.6485 25.3346 20.4645 24.7117 20.9829C23.7272 21.8022 22.8184 22.7285 22.0041 23.7537C21.498 24.3909 20.6994 24.7287 19.9109 24.5694L16.8487 23.9508C15.9884 23.777 15.1085 24.1836 14.7259 24.9888C14.5098 25.4437 14.3057 25.9081 14.1144 26.3817C13.9231 26.8554 13.7472 27.3316 13.5864 27.8098C13.302 28.6563 13.6456 29.5775 14.376 30.0726L16.9761 31.8354C17.6456 32.2893 17.9791 33.1031 17.8982 33.9192C17.768 35.2321 17.7733 36.5428 17.9062 37.832C17.9902 38.6477 17.6595 39.4627 16.9916 39.919L14.3965 41.6918C13.6682 42.1893 13.3276 43.1111 13.6144 43.9563C13.941 44.9191 14.3252 45.8607 14.7645 46.7756C15.1502 47.5788 16.0312 47.9817 16.8904 47.8049L19.9518 47.175C20.7397 47.0129 21.5394 47.3477 22.0474 47.9833C22.8503 48.9878 23.7581 49.9152 24.7628 50.7461C25.3872 51.2625 25.7183 52.0774 25.5621 52.882L24.9559 56.0068C24.7856 56.8845 25.1841 57.7824 25.9731 58.1728C26.4189 58.3934 26.874 58.6016 27.3382 58.7968C27.8024 58.992 28.2691 59.1715 28.7378 59.3355C30.1088 59.8154 32.0277 58.0978 33.4464 56.8279C34.146 56.2017 34.5775 55.3155 34.5821 54.3666C34.5821 54.3616 34.5821 54.3565 34.5821 54.3514L34.5821 49.1261C34.5821 49.0708 34.5842 49.0159 34.5884 48.9616C30.3981 47.9393 27.2828 44.0927 27.2828 39.5037V33.9551C27.2828 33.5334 27.6178 33.1915 28.0312 33.1915H30.6265V27.7323C30.6265 26.9786 31.2253 26.3675 31.964 26.3675C32.7027 26.3675 33.3015 26.9786 33.3015 27.7323V33.1915H40.3234V27.7323C40.3234 26.9786 40.9222 26.3675 41.6609 26.3675C42.3996 26.3675 42.9984 26.9786 42.9984 27.7323V33.1915H45.5938C46.0071 33.1915 46.3421 33.5334 46.3421 33.9551V39.5037C46.3421 44.2378 43.0268 48.1818 38.6359 49.05C38.6368 49.0752 38.6373 49.1006 38.6373 49.1261L38.6373 54.3289C38.6373 55.2962 39.0817 56.1985 39.8023 56.8269C41.2463 58.0862 43.1983 59.7886 44.5613 59.3071C45.5048 58.9737 46.4276 58.5817 47.3242 58.1334C48.1113 57.7399 48.5062 56.8409 48.3329 55.9642L47.7156 52.8403C47.5567 52.0363 47.8848 51.2202 48.5077 50.7019C49.4922 49.8826 50.401 48.9563 51.2153 47.9311C51.7214 47.2939 52.5199 46.9562 53.3084 47.1154L56.3707 47.7341C57.231 47.9079 58.1109 47.5012 58.4935 46.6961C58.7097 46.2412 58.9137 45.7768 59.105 45.3031C59.2963 44.8295 59.4722 44.3533 59.6329 43.8751C59.9174 43.0286 59.5738 42.1074 58.8434 41.6123L56.2432 39.8495C55.5737 39.3956 55.2403 38.5817 55.3212 37.7657C55.4513 36.4527 55.446 35.142 55.3132 33.8529C55.2292 33.0372 55.5598 32.2222 56.2278 31.7659L58.8229 29.9931C59.5512 29.4955 59.8918 28.5737 59.605 27.7286C59.2784 26.7658 58.8942 25.8241 58.4548 24.9093C58.0692 24.1061 57.1882 23.7032 56.329 23.88L53.2677 24.5099C52.4797 24.672 51.68 24.3372 51.172 23.7016C50.3691 22.6971 49.4614 21.7697 48.4566 20.9388C47.8321 20.4223 47.5011 19.6075 47.6573 18.8029L48.2635 15.6781C48.4338 14.8003 48.0353 13.9024 47.2463 13.512C46.8005 13.2915 46.3454 13.0833 45.8812 12.8881C45.417 12.6928 44.9503 12.5133 44.4817 12.3493C43.6522 12.059 42.7494 12.4097 42.2641 13.155L40.5366 15.8081C40.0918 16.4913 39.2942 16.8316 38.4945 16.749C37.2078 16.6163 35.9233 16.6216 34.6599 16.7572C33.8605 16.8429 33.0619 16.5055 32.6147 15.8239L30.8774 13.1759Z'/%3E%3C/svg%3E"); }
.s-logo-unsplash { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 6.75V0h9v6.75h-9zm9 3.75H24V24H0V10.5h7.5v6.75h9V10.5z'/%3E%3C/svg%3E"); }

/* ---- pricing: Go, Pro and Reach (saddle-cloud spec 0022, 2026-10-19), three cards of one shape
   (name, who it is for, price, one button, refund, the number that matters, then what the plan
   adds) and one compare table, after Semrush's and chatseo.app's pricing pages. Each card has
   its own 5 / 20 / 50 sites picker: pricing.js sets data-size on the card (and on the Reach
   band, which follows Reach's card), and only that size's figures show (.s-sz-<sites>);
   every card starts at 5 sites, and without the script the 5-site figures show. */
.s-tier:not([data-size]) .s-sz:not(.s-sz-5),
.s-reach:not([data-size]) .s-sz:not(.s-sz-5),
[data-size="5"] .s-sz:not(.s-sz-5),
[data-size="20"] .s-sz:not(.s-sz-20),
[data-size="50"] .s-sz:not(.s-sz-50) { display: none !important; }

.s-section.s-pricing-top { background: linear-gradient(180deg, var(--s-sky) 0%, #fafafb 62%, #fff 100%); }

.s-section .s-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; margin-top: 48px; text-align: left; }
/* The sites picker under the refund line, like chatseo.app's credits picker, and under it the
   number that matters: calls a day, or credits on Reach. Before pricing.js runs it reads
   "5 sites" in the same box, without the arrow. 16px keeps phones from zooming in. */
.s-section .s-tier-sites { margin: 18px 0 0; padding: 11px 14px; border: 1px solid var(--s-line); border-radius: 10px; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--s-ink); }
.s-section .s-tier-sites:has(select) { padding: 0; border: 0; }
.s-section .s-pick-select { display: block; width: 100%; margin: 0; padding: 11px 40px 11px 14px; border: 1px solid var(--s-line); border-radius: 10px; background: #fff var(--s-chevron) right 14px center / 16px 16px no-repeat; color: var(--s-ink); font: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; transition: border-color 0.15s; }
.s-section .s-pick-select:hover { border-color: var(--s-ink-2); }
.s-section .s-pick-select:focus-visible { outline: 2px solid var(--s-brand); outline-offset: 2px; }
.s-section .s-tier.is-popular .s-pick-select { border-color: var(--s-brand); }
.s-section .s-tier-note { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: var(--s-ink-2); }
.s-section { --s-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23262624' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.s-section .s-tier { position: relative; display: flex; flex-direction: column; padding: 28px 24px 24px; border: 1px solid var(--s-line); border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 0.04); }
.s-section .s-tier.is-popular { border-color: var(--s-brand); box-shadow: inset 0 0 0 1px var(--s-brand), 0 28px 56px -32px rgb(208 0 196 / 0.35); }
.s-section .s-tier-badge { position: absolute; top: -1px; right: 20px; margin: 0; padding: 4px 10px; border-radius: 0 0 8px 8px; background: var(--s-brand); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.3; }
.s-section .s-tier-name { margin: 0; font-size: 22px; font-weight: 650; line-height: 1.2; letter-spacing: -0.01em; color: var(--s-ink); }
.s-section .s-tier-for { min-height: 2.9em; margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: var(--s-ink-2); }
.s-section .s-tier-price { margin: 18px 0 0; font-size: 15px; color: var(--s-ink-2); }
.s-section .s-tier-price strong { font-size: 42px; font-weight: 650; line-height: 1; letter-spacing: -0.035em; color: var(--s-ink); }
.s-section .s-tier-bill { margin: 6px 0 0; font-size: 13px; color: var(--s-ink-2); }
.s-section .s-tier-buy { display: block; margin: 20px 0 0; }
.s-section .s-tier-buy .wp-block-button { display: block; width: 100%; }
.s-section .s-tier-buy .wp-block-button__link { display: block; width: 100%; text-align: center; }
.s-section .s-tier-buy .is-style-dark .wp-block-button__link { background: var(--s-ink); border-color: var(--s-ink); color: #fff; }
.s-section .s-tier-buy .is-style-dark .wp-block-button__link:hover { background: #000; border-color: #000; color: #fff; }
/* The 7-day money-back guarantee in green with a shield, like chatseo.app's (Fahim, 2026-10-21:
   "7 Days moneyback guarantee ... make green"). The one green on the page, theme.json's status
   ok: #2f7d3b on white is 5.1:1. Iconoir 7.12.1 shield-check. */
.s-section .s-tier-refund { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px 0 0; font-size: 13px; font-weight: 500; color: var(--wp--custom--status--ok, #2f7d3b); }
.s-section .s-tier-refund::before { content: ''; flex: none; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--s-shield) center / contain no-repeat; mask: var(--s-shield) center / contain no-repeat; }
.s-section { --s-shield: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' stroke-width='1.5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.5 11.5L11.5 14.5L16.5 9.5' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5 18L3.13036 4.91253C3.05646 4.39524 3.39389 3.91247 3.90398 3.79912L11.5661 2.09641C11.8519 2.03291 12.1481 2.03291 12.4339 2.09641L20.096 3.79912C20.6061 3.91247 20.9435 4.39524 20.8696 4.91252L19 18C18.9293 18.495 18.5 21.5 12 21.5C5.5 21.5 5.07071 18.495 5 18Z' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.s-section .s-tier-inc { margin: 22px 0 0; padding-top: 20px; border-top: 1px solid var(--s-line-2); font-size: 14px; font-weight: 600; color: var(--s-ink); }
.s-section .s-tier-list { margin: 10px 0 0; padding: 0; list-style: none; }
.s-section .s-tier-list li { position: relative; padding: 5px 0 5px 26px; font-size: 14px; line-height: 1.45; color: var(--s-ink); }
.s-section .s-tier-list li::before { content: ''; position: absolute; left: 0; top: 7px; width: 16px; height: 16px; background: var(--s-brand); -webkit-mask: var(--s-tick) center / contain no-repeat; mask: var(--s-tick) center / contain no-repeat; }
.s-section .s-tier-list .s-soon { margin-left: 4px; font-size: 11px; }
.s-section { --s-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

.s-section.s-pricing-compare figure.wp-block-table.s-compare { margin-top: 32px; }
.s-section.s-pricing-compare .s-compare thead th { background: #fff; font-size: 17px; border-bottom: 1px solid var(--s-line); }
.s-section.s-pricing-compare .s-compare td:not(:first-child), .s-section.s-pricing-compare .s-compare th:not(:first-child) { width: 16%; }
.s-section .s-addon { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 40px; padding: 24px 28px; border: 1px solid var(--s-line); border-radius: 16px; background: #fff; }
.s-section .s-addon-copy { flex: 1 1 420px; }
.s-section .s-addon-title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 18px; font-weight: 600; color: var(--s-ink); }
.s-section .s-addon-title::before { content: ''; flex: none; width: 20px; height: 20px; background: var(--s-brand); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.s-section .s-addon .s-mut { margin: 6px 0 0 30px; font-size: 15px; }
.s-section .s-addon .wp-block-buttons { margin: 0; }

/* A month on Reach: a magenta band after firstindex.com's pricing. The price
   and a short line on the left, what the credits buy on the right. White
   text only: on #d000c4 it passes 4.5:1, and nothing paler does. */
.s-section.s-reach-band { margin-top: 96px; padding-bottom: 96px; background-color: var(--s-brand); background-image: radial-gradient(rgb(255 255 255 / 0.16) 1px, transparent 1.4px); background-size: 18px 18px; color: #fff; }
.s-section .s-reach { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 64px; align-items: start; text-align: left; }
.s-section.s-reach-band .s-reach-kicker { font-size: 17px; font-weight: 600; line-height: 1.4; letter-spacing: 0; color: #fff; }
.s-section .s-reach-price { margin-top: 10px; font-size: clamp(96px, 14vw, 176px); font-weight: 650; line-height: 0.9; letter-spacing: -0.05em; color: #fff; }
.s-section .s-reach-line { margin-top: 18px; font-size: clamp(28px, 3.4vw, 40px); font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; color: #fff; }
.s-section .s-reach-note { max-width: 520px; margin-top: 20px; font-size: 16px; line-height: 1.6; color: #fff; }
.s-section .s-reach-lead { margin-top: 8px; font-size: 15px; font-weight: 600; color: #fff; }
.s-section .s-reach-list { margin: 14px 0 0; padding: 0; list-style: none; }
.s-section .s-reach-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 13px 0; border-bottom: 1px solid rgb(255 255 255 / 0.3); font-size: 19px; line-height: 1.35; color: #fff; }
.s-section .s-reach-n { flex: none; font-weight: 650; font-variant-numeric: tabular-nums; }
.s-section .s-reach-n.is-yes { align-self: center; width: 18px; height: 18px; background: #fff; -webkit-mask: var(--s-tick) center / contain no-repeat; mask: var(--s-tick) center / contain no-repeat; }
.s-section .s-reach-buy { margin-top: 28px; }
.s-section .s-reach-buy .wp-block-button__link { background: #fff; border-color: #fff; color: var(--s-brand-text); }
.s-section .s-reach-buy .wp-block-button__link:hover { background: var(--s-brand-tint); border-color: var(--s-brand-tint); color: var(--s-brand-text); }
.s-section .s-reach-foot { margin-top: 14px; font-size: 14px; color: #fff; }

@media (max-width: 900px) {
	.s-section .s-tiers { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-left: auto; margin-right: auto; }
	.s-section .s-tier-for { min-height: 0; }
	.s-section .s-reach { grid-template-columns: minmax(0, 1fr); gap: 40px; max-width: 560px; margin-left: auto; margin-right: auto; }
	.s-section .s-reach-list li { font-size: 17px; }
}
@media (max-width: 640px) {
	.s-section .s-addon .s-mut { margin-left: 0; }
}

/* =====================================================================
   One system (Fahim, 2026-10-16: "whole site is inconsistent... blog page
   headline center, pricing page that left"). Every page head, card grid,
   article column and closing CTA uses the rules below. Page CSS above may
   add art, never a second head or a second card.
   - Page head (.s-head): eyebrow, H1, one subline, optional buttons, centered
     on the sky band. Every page but home; home keeps its hero.
   - Section head: .s-section.s-center centers the eyebrow, H2 and sub. Only a
     two-column split (.s-feat, .s-faq) reads left.
   - Card (.s-tile): white, a hairline, 16px corners. Pricing tiers and the
     Works with cards share the same shape.
   - The closing CTA is one pattern, saddle/cta, on every page and template.
   ===================================================================== */
.s-section.s-head { padding-top: 64px; padding-bottom: 64px; text-align: center; }
.s-section.s-head .s-h1 { max-width: 900px; margin: 0 auto; font-size: 56px; line-height: 1.05; letter-spacing: -0.04em; }
.s-section.s-head .s-label + .s-h1 { margin-top: 12px; }
.s-section.s-head .s-h1 ~ .s-sub { max-width: 620px; margin: 16px auto 0; font-size: 19px; line-height: 1.55; color: var(--s-ink-2); }
/* Links to the parts of the page, or to the lists of a section (features,
   recipe groups): a row of pills under the subline. */
.s-section.s-head .s-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 760px; margin: 28px auto 0; padding: 0; list-style: none; }
.s-section.s-head .s-pills li { margin: 0; }
.s-section.s-head .s-pills a { display: inline-flex; padding: 7px 14px; border: 1px solid var(--s-line); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--s-ink); text-decoration: none; }
.s-section.s-head .s-pills a:hover, .s-section.s-head .s-pills a[aria-current] { border-color: var(--s-brand); color: var(--s-brand-text); }
.s-section.s-head > .wp-block-buttons { margin-top: 32px; justify-content: center; }
.s-section.s-head > .s-chip { margin-top: 20px; }
@media (max-width: 900px) {
	.s-section.s-head { padding-top: 48px; padding-bottom: 48px; }
	.s-section.s-head .s-h1 { font-size: 44px; }
}
@media (max-width: 520px) {
	.s-section.s-head .s-h1 { font-size: 36px; }
	.s-section.s-head .s-h1 ~ .s-sub { font-size: 17px; }
}

/* Cards in a grid: three or two across, each a title, a line, and maybe a link. */
.s-section .s-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 40px 0 0; text-align: left; }
.s-section .s-grid.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.s-section .s-tile { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 28px; background: #fff; border: 1px solid var(--s-line); border-radius: 16px; box-sizing: border-box; }
.s-section .s-tile > .s-ico { margin-bottom: 6px; }
.s-section .s-tile-title { font-size: 20px; font-weight: 650; line-height: 1.3; letter-spacing: -0.01em; color: var(--s-ink); }
.s-section .s-tile > .s-mut { font-size: 16px; line-height: 1.55; }
.s-section .s-tile > .s-more { margin-top: auto; padding-top: 6px; font-size: 15px; }
.s-section .s-num { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-bottom: 6px; border-radius: 999px; background: var(--s-ink); color: #fff; font-size: 15px; font-weight: 600; }
@media (max-width: 900px) { .s-section .s-grid, .s-section .s-grid.is-2 { grid-template-columns: minmax(0, 1fr); margin-top: 32px; } }

/* Today and With Saddle (home): two cards, each a small schematic of the work. */
.s-section .s-tile-kicker { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--s-ink-2); }
.s-section .s-tile.is-saddle .s-tile-kicker { color: var(--s-brand-text); }
.s-section .s-tile.is-saddle { border-color: var(--s-brand); box-shadow: inset 0 0 0 1px var(--s-brand); }
.s-section .s-lines { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.s-section .s-lines li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 10px; background: var(--s-panel); font-size: 15px; line-height: 1.4; color: var(--s-ink); }
.s-section .s-lines li span { flex: none; font-size: 13px; color: var(--s-ink-2); }
.s-section .s-lines.is-done li { justify-content: flex-start; }
.s-section .s-lines.is-done li::before { content: ''; flex: none; width: 16px; height: 16px; background: var(--s-brand); -webkit-mask: var(--s-tick) center / contain no-repeat; mask: var(--s-tick) center / contain no-repeat; }
.s-section .s-ask { align-self: flex-start; max-width: 100%; margin: 10px 0 0; padding: 12px 16px; border-radius: 14px 14px 14px 4px; background: var(--s-ink); color: #fff; font-size: 15px; line-height: 1.45; }

/* Facts under the safety cards: short lines held apart by dots. */
.s-section .s-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin: 32px 0 0; padding: 0; list-style: none; font-size: 15px; color: var(--s-ink-2); }
.s-section .s-facts li { display: inline-flex; align-items: center; gap: 8px; }
.s-section .s-facts li::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: var(--s-brand); }

/* Posts and legal pages: the page head, then one reading column in v2 type. */
.s-section.s-article { padding-top: 64px; padding-bottom: 96px; }
.s-article .s-prose { max-width: 720px; margin: 0 auto; font-size: 17px; line-height: 1.7; color: var(--s-ink-txt); text-align: left; }
.s-article .s-prose .wp-block-post-content > * + * { margin-top: 1em; }
.s-article .s-prose .wp-block-post-content > h2 { margin: 48px 0 0; font-size: 28px; font-weight: 650; line-height: 1.2; letter-spacing: -0.02em; color: var(--s-ink); }
.s-article .s-prose .wp-block-post-content > h3 { margin: 32px 0 0; font-size: 20px; font-weight: 650; line-height: 1.3; color: var(--s-ink); }
.s-article .s-prose .wp-block-post-content > :is(h2, h3) + * { margin-top: 12px; }
.s-article .s-prose .wp-block-post-content > :first-child { margin-top: 0; }
.s-article .s-prose :is(ul, ol) { padding-left: 22px; }
.s-article .s-prose li + li { margin-top: 6px; }
.s-article .s-prose img { max-width: 100%; height: auto; border-radius: 12px; }
.s-article .s-prose.legal { counter-reset: legal; }
.s-article .s-prose.legal .wp-block-post-content > h2 { counter-increment: legal; font-size: 22px; }
.s-article .s-prose.legal .wp-block-post-content > h2::before { content: counter(legal) '. '; color: var(--s-ink-2); }
.s-article .s-prose .legal-updated { font: 400 15px/1.5 var(--sans); letter-spacing: 0; color: var(--s-ink-2); }
.s-article .s-post-nav { display: flex; justify-content: space-between; gap: 24px; max-width: 720px; margin: 56px auto 0; padding-top: 24px; border-top: 1px solid var(--s-line); font-size: 15px; }
.s-section.s-head .wp-block-post-date.s-label time { font: inherit; }

/* Post rows (blog, archive, search): a title and a line in a card, the date above. */
.s-section .s-posts { max-width: 880px; margin: 0 auto; }
.s-section .s-posts .wp-block-post-template { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.s-section .s-post { position: relative; text-align: left; }
.s-section .s-post .wp-block-post-date { font-size: 14px; color: var(--s-ink-2); }
.s-section .s-post .wp-block-post-title { margin: 0; font-size: 22px; font-weight: 650; line-height: 1.3; letter-spacing: -0.01em; }
.s-section .s-post .wp-block-post-title a { color: var(--s-ink); text-decoration: none; }
.s-section .s-post .wp-block-post-title a::after { content: ''; position: absolute; inset: 0; }
.s-section .s-post:hover { border-color: var(--s-line-3); }
.s-section .s-post .wp-block-post-excerpt p { margin: 0; font-size: 16px; color: var(--s-ink-2); }
.s-section .s-posts .wp-block-query-pagination { margin-top: 32px; font-size: 15px; }
.s-section .s-posts .wp-block-query-no-results p { text-align: center; color: var(--s-ink-2); }
.s-section .s-tile > .s-ask { margin-top: 8px; }
.s-section .s-tile-with { margin-top: auto; padding-top: 12px; font-size: 14px; color: var(--s-ink-2); }
.s-section .s-tile-with::before { content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 8px 2px 0; border-radius: 999px; background: var(--s-brand); }
.s-section.s-center > .s-more { margin-top: 32px; }
/* One card on its own, centered under its section head (About's contact card). */
.s-section .s-tile.s-tile-one { max-width: 560px; margin: 40px auto 0; align-items: center; text-align: center; }
.s-section.s-head .wp-block-search.s-search { max-width: 520px; margin: 28px auto 0; }
.s-section.s-head .s-search .wp-block-search__inside-wrapper { gap: 8px; }
.s-section.s-head .s-search .wp-block-search__input { min-width: 0; padding: 12px 16px; border: 1px solid var(--s-line); border-radius: 6px; background: #fff; font: 400 16px/1.2 var(--sans); }
.s-section.s-head .s-search .wp-block-search__button { margin: 0; padding: 12px 18px; border: 0; border-radius: 6px; background: var(--s-brand); color: #fff; font: 400 16px/1.15 var(--sans); }

/* ---- Zigzag rows (home, Fahim 2026-10-16: "use zigzag or sidebar content... clear art of image /
   example demo... solid art of bg, like cursor.com"). Copy on one side, art on the other, sides
   alternating. The art is Saddle's own: a solid sky with the pixel hills along its foot, and a
   window of the real work on top. Demo windows use real Saddle tool names. */
.s-section .s-zz { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin: 0; border-radius: 20px; background: var(--s-panel); overflow: hidden; text-align: left; }
.s-section .s-zz + .s-zz { margin-top: 20px; }
.s-section .s-h2 + .s-zz, .s-section .s-sub + .s-zz { margin-top: 48px; }
.s-section .s-zz.is-flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.s-section .s-zz.is-flip > .s-zz-copy { order: 2; }
.s-section .s-zz-copy { display: flex; flex-direction: column; justify-content: center; padding: 56px 48px; }
.s-section .s-zz-copy .s-zz-title { margin: 14px 0 0; font-size: 34px; font-weight: 650; line-height: 1.12; letter-spacing: -0.03em; color: var(--s-ink); text-wrap: balance; }
.s-section .s-zz-copy .s-sub { margin-top: 14px; font-size: 18px; }
.s-section .s-zz-copy .s-more { margin-top: 24px; }
.s-section .s-scene {
	position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
	min-height: 500px; margin: 10px; padding: 48px 40px 104px; box-sizing: border-box; border-radius: 14px; overflow: hidden;
	background: url('../img/pixel-hero-7.png?v=2026-10-22') center bottom / auto 160px repeat-x, var(--s-sky);
}
.s-section .s-scene.is-mist { background-image: url('../img/pixel-cta-19.png?v=2026-10-22'); background-color: #e3e3e8; background-size: auto 120px; }
.s-section .s-scene.is-dusk { background-image: url('../img/pixel-dusk.png?v=2026-10-22'); background-color: #1d1b1f; }
.s-section .s-scene { image-rendering: pixelated; }
.s-section .s-scene > * { image-rendering: auto; }
.s-section .s-win { width: 100%; max-width: 540px; border: 1px solid rgb(38 38 36 / 0.08); border-radius: 12px; background: #fff; box-shadow: 0 30px 60px -28px rgb(20 20 24 / 0.45); text-align: left; }
.s-section .s-win-bar { position: relative; padding: 10px 14px; border-bottom: 1px solid var(--s-line-2); font-size: 12px; font-weight: 500; line-height: 1.3; text-align: center; color: var(--s-ink-2); }
.s-section .s-win-bar::before { content: ''; position: absolute; left: 14px; top: 50%; width: 42px; height: 10px; margin-top: -5px; background: radial-gradient(circle at 5px 5px, #dcdce1 4px, transparent 4.5px) 0 0 / 16px 10px repeat-x; }
.s-section .s-win-body { display: flex; flex-direction: column; gap: 10px; padding: 18px; }
.s-section .s-you { align-self: flex-end; max-width: 85%; padding: 10px 14px; border-radius: 12px 12px 4px 12px; background: var(--s-panel); font-size: 14px; line-height: 1.45; color: var(--s-ink); }
.s-section .s-ai { font-size: 14px; line-height: 1.5; color: var(--s-ink); }
.s-section .s-tools { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.s-section .s-tools li { display: flex; align-items: center; gap: 8px; font: 400 12.5px/1.4 var(--mono); color: var(--s-ink-2); }
.s-section .s-tools li::before { content: ''; flex: none; width: 14px; height: 14px; background: var(--s-brand); -webkit-mask: var(--s-tick) center / contain no-repeat; mask: var(--s-tick) center / contain no-repeat; }
.s-section .s-tools li span { color: var(--s-ink); }
.s-section .s-win .s-lines { margin: 0; gap: 6px; }
.s-section .s-win .s-lines li { padding: 10px 12px; font-size: 14px; }
.s-section .s-win .s-lines li span { font-size: 12.5px; }
.s-section .s-win .s-lines li span.is-alert { color: var(--s-brand-text); font-weight: 600; }
.s-section .s-win .s-lines li span.is-ok { color: var(--s-ink-2); }
.s-section .s-win-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 600; color: var(--s-ink); }
.s-section .s-win-head span { font-size: 12.5px; font-weight: 400; color: var(--s-ink-2); }
.s-section .s-win .s-okc { margin-top: 4px; }
.s-section .s-win .s-okc .wp-block-buttons { margin-top: 12px; }
.s-section .s-win .s-okc .wp-block-button__link { padding: 8px 16px; font-size: 14px; }
/* A small page, drawn, for the page-building demo. */
.s-section .s-wire { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 8px; background: var(--s-panel-2); box-shadow: inset 0 0 0 1px var(--s-line-2); }
.s-section .s-wire-hero { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 12px; border-radius: 6px; background: #fff; }
.s-section .s-wire-hero p { font-size: 16px; font-weight: 650; color: var(--s-ink); }
.s-section .s-wire-hero p + p { font-size: 12px; font-weight: 400; color: var(--s-ink-2); }
.s-section .s-wire-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.s-section .s-wire-cols p { padding: 12px 10px; border-radius: 6px; background: #fff; font-size: 12px; line-height: 1.35; color: var(--s-ink-2); }
.s-section .s-wire-cols p strong { display: block; margin-bottom: 4px; font-size: 15px; font-weight: 650; color: var(--s-ink); }
.s-section .s-wire-cols p.is-on { box-shadow: inset 0 0 0 1.5px var(--s-brand); }
.s-section .s-check { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--s-brand-tint); font-size: 13px; font-weight: 600; color: var(--s-brand-text); }
.s-section .s-check::before { content: ''; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--s-tick) center / contain no-repeat; mask: var(--s-tick) center / contain no-repeat; }
.s-section .s-scene .s-win.is-back { max-width: 460px; margin-bottom: -6px; opacity: 0.96; }
@media (max-width: 900px) {
	.s-section .s-zz, .s-section .s-zz.is-flip { grid-template-columns: minmax(0, 1fr); }
	.s-section .s-zz.is-flip > .s-zz-copy { order: 0; }
	.s-section .s-zz-copy { padding: 36px 24px 12px; }
	.s-section .s-zz-copy .s-zz-title { font-size: 28px; }
	.s-section .s-scene { min-height: 0; padding: 28px 16px 88px; }
}
@media (max-width: 520px) {
	.s-section .s-zz-copy { padding: 28px 20px 8px; }
	.s-section .s-scene { margin: 8px; padding: 20px 12px 72px; background-size: auto 110px; }
	.s-section .s-wire-cols { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Why Saddle: today versus with Saddle (Fahim, 2026-10-16: "Why Saddle look ver bad... make
   copy nicer.. dont use same art"). One wide panel in two halves. Its own art, not the hills:
   a grey dotted desk stacked with plugin screens, and a dark one holding a single chat. */
.s-section .s-vs { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 48px; padding: 10px; border-radius: 20px; background: var(--s-panel); text-align: left; }
.s-section .s-vs-side { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 460px; padding: 32px; box-sizing: border-box; border-radius: 14px; overflow: hidden; }
.s-section .s-vs-side.is-today { background: radial-gradient(circle, rgb(38 38 36 / 0.14) 1px, transparent 1.5px) 0 0 / 18px 18px, #e9e9ed; }
.s-section .s-vs-side.is-saddle { background: radial-gradient(circle, rgb(255 255 255 / 0.08) 1px, transparent 1.5px) 0 0 / 18px 18px, radial-gradient(ellipse 70% 55% at 70% 100%, rgb(208 0 196 / 0.22), transparent 70%), #1b1b1e; color: #fff; }
.s-section .s-vs-kicker { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--s-ink-2); }
.s-section .is-saddle .s-vs-kicker { color: var(--s-brand-soft); }
.s-section .s-vs-title { font-size: 24px; font-weight: 650; line-height: 1.25; letter-spacing: -0.02em; color: var(--s-ink); }
.s-section .is-saddle .s-vs-title { color: #fff; }
.s-section .s-vs-art { position: relative; flex: 1; min-height: 300px; margin-top: 24px; }
/* Today: three plugin screens, each a little lower and further right, like tabs left open. */
.s-section .s-vs-art .s-win.is-mini { position: absolute; width: 78%; max-width: none; box-shadow: 0 18px 40px -22px rgb(20 20 24 / 0.4); }
.s-section .s-vs-art .s-win.is-mini:nth-child(1) { left: 0; top: 0; }
.s-section .s-vs-art .s-win.is-mini:nth-child(2) { left: 11%; top: 84px; }
.s-section .s-vs-art .s-win.is-mini:nth-child(3) { left: 22%; top: 168px; }
.s-section .s-win.is-mini .s-win-bar { text-align: left; padding-left: 64px; }
.s-section .s-win.is-mini .s-win-body { gap: 8px; padding: 14px 16px 16px; }
.s-section .s-bar { display: block; height: 9px; border-radius: 999px; background: #ececef; }
.s-section .s-bar.is-short { width: 45%; }
.s-section .s-bar.is-mid { width: 70%; }
.s-section .s-bar-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--s-ink-2); }
.s-section .s-bar-row span { flex: none; padding: 4px 10px; border-radius: 6px; background: var(--s-ink); font-size: 12px; color: #fff; }
/* With Saddle: one window, the whole job. */
.s-section .is-saddle .s-vs-art { display: flex; align-items: flex-end; }
.s-section .is-saddle .s-win { max-width: none; border-color: rgb(255 255 255 / 0.1); box-shadow: 0 30px 60px -24px rgb(0 0 0 / 0.6); }
/* The arrow between the halves. */
.s-section .s-vs-arrow { position: absolute; left: 50%; top: 50%; z-index: 2; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 999px; background: var(--s-brand); box-shadow: 0 0 0 8px var(--s-panel); }
.s-section .s-vs-arrow::before { content: ''; width: 22px; height: 22px; background: #fff; -webkit-mask: var(--s-arrow) center / contain no-repeat; mask: var(--s-arrow) center / contain no-repeat; }
.s-section .s-vs-arrow > * { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 900px) {
	.s-section .s-vs { grid-template-columns: minmax(0, 1fr); gap: 34px; }
	.s-section .s-vs-side { min-height: 0; padding: 24px; }
	.s-section .s-vs-art { min-height: 290px; }
	.s-section .is-saddle .s-vs-art { min-height: 0; }
	.s-section .s-vs-arrow { transform: rotate(90deg); }
}
@media (max-width: 520px) {
	.s-section .s-vs-side { padding: 20px 16px; }
	.s-section .s-vs-art .s-win.is-mini { width: 86%; }
	.s-section .s-vs-art .s-win.is-mini:nth-child(2) { left: 7%; }
	.s-section .s-vs-art .s-win.is-mini:nth-child(3) { left: 14%; }
}

/* ---- A little color and play in the art (Fahim, 2026-10-16: "make little playful and add little
   color to art"). Soft skies behind the grey hills, a pixel sun and cloud in each scene, colored
   tags on the plugin screens, a pixel cursor and pink sparkles. Color stays in the art; the UI
   keeps the one magenta. */
:root { --s-px-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' shape-rendering='crispEdges' fill='black'%3E%3Crect x='2' y='0' width='1' height='1'/%3E%3Crect x='3' y='0' width='1' height='1'/%3E%3Crect x='4' y='0' width='1' height='1'/%3E%3Crect x='5' y='0' width='1' height='1'/%3E%3Crect x='6' y='0' width='1' height='1'/%3E%3Crect x='1' y='1' width='1' height='1'/%3E%3Crect x='2' y='1' width='1' height='1'/%3E%3Crect x='3' y='1' width='1' height='1'/%3E%3Crect x='4' y='1' width='1' height='1'/%3E%3Crect x='5' y='1' width='1' height='1'/%3E%3Crect x='6' y='1' width='1' height='1'/%3E%3Crect x='7' y='1' width='1' height='1'/%3E%3Crect x='0' y='2' width='1' height='1'/%3E%3Crect x='1' y='2' width='1' height='1'/%3E%3Crect x='2' y='2' width='1' height='1'/%3E%3Crect x='3' y='2' width='1' height='1'/%3E%3Crect x='4' y='2' width='1' height='1'/%3E%3Crect x='5' y='2' width='1' height='1'/%3E%3Crect x='6' y='2' width='1' height='1'/%3E%3Crect x='7' y='2' width='1' height='1'/%3E%3Crect x='8' y='2' width='1' height='1'/%3E%3Crect x='0' y='3' width='1' height='1'/%3E%3Crect x='1' y='3' width='1' height='1'/%3E%3Crect x='2' y='3' width='1' height='1'/%3E%3Crect x='3' y='3' width='1' height='1'/%3E%3Crect x='4' y='3' width='1' height='1'/%3E%3Crect x='5' y='3' width='1' height='1'/%3E%3Crect x='6' y='3' width='1' height='1'/%3E%3Crect x='7' y='3' width='1' height='1'/%3E%3Crect x='8' y='3' width='1' height='1'/%3E%3Crect x='0' y='4' width='1' height='1'/%3E%3Crect x='1' y='4' width='1' height='1'/%3E%3Crect x='2' y='4' width='1' height='1'/%3E%3Crect x='3' y='4' width='1' height='1'/%3E%3Crect x='4' y='4' width='1' height='1'/%3E%3Crect x='5' y='4' width='1' height='1'/%3E%3Crect x='6' y='4' width='1' height='1'/%3E%3Crect x='7' y='4' width='1' height='1'/%3E%3Crect x='8' y='4' width='1' height='1'/%3E%3Crect x='0' y='5' width='1' height='1'/%3E%3Crect x='1' y='5' width='1' height='1'/%3E%3Crect x='2' y='5' width='1' height='1'/%3E%3Crect x='3' y='5' width='1' height='1'/%3E%3Crect x='4' y='5' width='1' height='1'/%3E%3Crect x='5' y='5' width='1' height='1'/%3E%3Crect x='6' y='5' width='1' height='1'/%3E%3Crect x='7' y='5' width='1' height='1'/%3E%3Crect x='8' y='5' width='1' height='1'/%3E%3Crect x='0' y='6' width='1' height='1'/%3E%3Crect x='1' y='6' width='1' height='1'/%3E%3Crect x='2' y='6' width='1' height='1'/%3E%3Crect x='3' y='6' width='1' height='1'/%3E%3Crect x='4' y='6' width='1' height='1'/%3E%3Crect x='5' y='6' width='1' height='1'/%3E%3Crect x='6' y='6' width='1' height='1'/%3E%3Crect x='7' y='6' width='1' height='1'/%3E%3Crect x='8' y='6' width='1' height='1'/%3E%3Crect x='1' y='7' width='1' height='1'/%3E%3Crect x='2' y='7' width='1' height='1'/%3E%3Crect x='3' y='7' width='1' height='1'/%3E%3Crect x='4' y='7' width='1' height='1'/%3E%3Crect x='5' y='7' width='1' height='1'/%3E%3Crect x='6' y='7' width='1' height='1'/%3E%3Crect x='7' y='7' width='1' height='1'/%3E%3Crect x='2' y='8' width='1' height='1'/%3E%3Crect x='3' y='8' width='1' height='1'/%3E%3Crect x='4' y='8' width='1' height='1'/%3E%3Crect x='5' y='8' width='1' height='1'/%3E%3Crect x='6' y='8' width='1' height='1'/%3E%3C/svg%3E"); --s-px-cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 4' shape-rendering='crispEdges' fill='black'%3E%3Crect x='4' y='0' width='1' height='1'/%3E%3Crect x='5' y='0' width='1' height='1'/%3E%3Crect x='6' y='0' width='1' height='1'/%3E%3Crect x='7' y='0' width='1' height='1'/%3E%3Crect x='2' y='1' width='1' height='1'/%3E%3Crect x='3' y='1' width='1' height='1'/%3E%3Crect x='4' y='1' width='1' height='1'/%3E%3Crect x='5' y='1' width='1' height='1'/%3E%3Crect x='6' y='1' width='1' height='1'/%3E%3Crect x='7' y='1' width='1' height='1'/%3E%3Crect x='8' y='1' width='1' height='1'/%3E%3Crect x='9' y='1' width='1' height='1'/%3E%3Crect x='10' y='1' width='1' height='1'/%3E%3Crect x='0' y='2' width='1' height='1'/%3E%3Crect x='1' y='2' width='1' height='1'/%3E%3Crect x='2' y='2' width='1' height='1'/%3E%3Crect x='3' y='2' width='1' height='1'/%3E%3Crect x='4' y='2' width='1' height='1'/%3E%3Crect x='5' y='2' width='1' height='1'/%3E%3Crect x='6' y='2' width='1' height='1'/%3E%3Crect x='7' y='2' width='1' height='1'/%3E%3Crect x='8' y='2' width='1' height='1'/%3E%3Crect x='9' y='2' width='1' height='1'/%3E%3Crect x='10' y='2' width='1' height='1'/%3E%3Crect x='11' y='2' width='1' height='1'/%3E%3Crect x='1' y='3' width='1' height='1'/%3E%3Crect x='2' y='3' width='1' height='1'/%3E%3Crect x='3' y='3' width='1' height='1'/%3E%3Crect x='4' y='3' width='1' height='1'/%3E%3Crect x='5' y='3' width='1' height='1'/%3E%3Crect x='6' y='3' width='1' height='1'/%3E%3Crect x='7' y='3' width='1' height='1'/%3E%3Crect x='8' y='3' width='1' height='1'/%3E%3Crect x='9' y='3' width='1' height='1'/%3E%3Crect x='10' y='3' width='1' height='1'/%3E%3C/svg%3E"); --s-px-spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges' fill='black'%3E%3Crect x='3' y='0' width='1' height='1'/%3E%3Crect x='3' y='1' width='1' height='1'/%3E%3Crect x='2' y='2' width='1' height='1'/%3E%3Crect x='3' y='2' width='1' height='1'/%3E%3Crect x='4' y='2' width='1' height='1'/%3E%3Crect x='0' y='3' width='1' height='1'/%3E%3Crect x='1' y='3' width='1' height='1'/%3E%3Crect x='2' y='3' width='1' height='1'/%3E%3Crect x='3' y='3' width='1' height='1'/%3E%3Crect x='4' y='3' width='1' height='1'/%3E%3Crect x='5' y='3' width='1' height='1'/%3E%3Crect x='6' y='3' width='1' height='1'/%3E%3Crect x='2' y='4' width='1' height='1'/%3E%3Crect x='3' y='4' width='1' height='1'/%3E%3Crect x='4' y='4' width='1' height='1'/%3E%3Crect x='3' y='5' width='1' height='1'/%3E%3Crect x='3' y='6' width='1' height='1'/%3E%3C/svg%3E"); --s-px-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 13' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='1' height='1' fill='%23262624'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%23262624'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23262624'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%23262624'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23262624'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%23262624'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='3' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%23262624'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%23262624'/%3E%3Crect x='1' y='4' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='4' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='3' y='4' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='4' y='4' width='1' height='1' fill='%23262624'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%23262624'/%3E%3Crect x='1' y='5' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='5' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='3' y='5' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='4' y='5' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='5' y='5' width='1' height='1' fill='%23262624'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%23262624'/%3E%3Crect x='1' y='6' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='6' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='3' y='6' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='4' y='6' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='5' y='6' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='6' y='6' width='1' height='1' fill='%23262624'/%3E%3Crect x='0' y='7' width='1' height='1' fill='%23262624'/%3E%3Crect x='1' y='7' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='7' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='3' y='7' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='4' y='7' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='5' y='7' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='6' y='7' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='7' y='7' width='1' height='1' fill='%23262624'/%3E%3Crect x='0' y='8' width='1' height='1' fill='%23262624'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='8' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='3' y='8' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='4' y='8' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='5' y='8' width='1' height='1' fill='%23262624'/%3E%3Crect x='6' y='8' width='1' height='1' fill='%23262624'/%3E%3Crect x='7' y='8' width='1' height='1' fill='%23262624'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%23262624'/%3E%3Crect x='0' y='9' width='1' height='1' fill='%23262624'/%3E%3Crect x='1' y='9' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='9' width='1' height='1' fill='%23262624'/%3E%3Crect x='3' y='9' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='4' y='9' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='5' y='9' width='1' height='1' fill='%23262624'/%3E%3Crect x='0' y='10' width='1' height='1' fill='%23262624'/%3E%3Crect x='1' y='10' width='1' height='1' fill='%23262624'/%3E%3Crect x='3' y='10' width='1' height='1' fill='%23262624'/%3E%3Crect x='4' y='10' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='5' y='10' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='6' y='10' width='1' height='1' fill='%23262624'/%3E%3Crect x='0' y='11' width='1' height='1' fill='%23262624'/%3E%3Crect x='4' y='11' width='1' height='1' fill='%23262624'/%3E%3Crect x='5' y='11' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='6' y='11' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='7' y='11' width='1' height='1' fill='%23262624'/%3E%3Crect x='5' y='12' width='1' height='1' fill='%23262624'/%3E%3Crect x='6' y='12' width='1' height='1' fill='%23262624'/%3E%3C/svg%3E"); }
.s-section .s-scene.is-blue { background-color: #dfe8f6; }
.s-section .s-scene.is-peach { background-color: #f6e6d8; }
.s-section .s-scene.is-lilac { background-color: #e8e2f4; }
.s-section .s-scene.is-sand { background-color: #efe9dc; }
.s-section .s-scene::before, .s-section .s-scene::after { content: ''; position: absolute; z-index: 0; pointer-events: none; image-rendering: pixelated; }
.s-section .s-scene::before { top: 28px; right: 40px; width: 54px; height: 54px; background: #ffd27a; -webkit-mask: var(--s-px-sun) center / contain no-repeat; mask: var(--s-px-sun) center / contain no-repeat; }
.s-section .s-scene::after { top: 64px; left: 36px; width: 96px; height: 32px; background: #fff; opacity: 0.9; -webkit-mask: var(--s-px-cloud) center / contain no-repeat; mask: var(--s-px-cloud) center / contain no-repeat; }
.s-section .s-scene.is-blue::before { background: #fff3c4; }
.s-section .s-scene.is-lilac::before { background: var(--s-brand-soft); }
.s-section .s-scene.is-dusk::before { background: #f1f1f4; width: 40px; height: 40px; }
.s-section .s-scene.is-dusk::after { opacity: 0.12; }
.s-section .s-scene > .s-win { position: relative; z-index: 1; }
.s-section .s-zz.is-flip .s-scene::before { right: auto; left: 40px; }
.s-section .s-zz.is-flip .s-scene::after { left: auto; right: 36px; }
/* Colored tags on the plugin screens. */
.s-section .s-tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.s-section .s-tag::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: currentColor; }
.s-section .s-tag.is-blue { background: #e4ecfb; color: #2846a8; }
.s-section .s-tag.is-peach { background: #fdeedd; color: #8a4300; }
.s-section .s-tag.is-lilac { background: #eee6fb; color: #5b2a9e; }
.s-section .s-win.is-mini .s-win-bar { padding-top: 8px; padding-bottom: 8px; }
.s-section .s-bar.is-blue { background: #dbe5fa; }
.s-section .s-bar.is-peach { background: #fbe3c8; }
.s-section .s-bar.is-lilac { background: #e7dcfa; }
/* Play: the open screens sit a little crooked, a pixel cursor hunts for the next button,
   and the Saddle side sparkles. Still under reduced motion. */
.s-section .s-vs-art .s-win.is-mini:nth-child(1) { rotate: -2deg; }
.s-section .s-vs-art .s-win.is-mini:nth-child(2) { rotate: 1.5deg; }
.s-section .s-vs-art .s-win.is-mini:nth-child(3) { rotate: -1deg; }
.s-section .is-today .s-vs-art::after { content: ''; position: absolute; z-index: 3; right: 10%; bottom: 6px; width: 30px; height: 39px; background: var(--s-px-cursor) center / contain no-repeat; image-rendering: pixelated; animation: s-hunt 3.2s ease-in-out infinite; }
@keyframes s-hunt { 0%, 100% { translate: 0 0; } 40% { translate: -46px -18px; } 70% { translate: -12px -40px; } }
.s-section .is-saddle .s-vs-art::before, .s-section .is-saddle .s-vs-art::after { content: ''; position: absolute; z-index: 0; width: 22px; height: 22px; background: var(--s-brand-soft); -webkit-mask: var(--s-px-spark) center / contain no-repeat; mask: var(--s-px-spark) center / contain no-repeat; image-rendering: pixelated; animation: s-spark 2.4s ease-in-out infinite alternate; }
.s-section .is-saddle .s-vs-art::before { top: 6px; right: 14%; }
.s-section .is-saddle .s-vs-art::after { top: 64px; left: 6%; width: 14px; height: 14px; background: #fff; animation-delay: 1.2s; }
@keyframes s-spark { from { opacity: 0.35; scale: 0.8; } to { opacity: 1; scale: 1; } }
.s-section .is-saddle .s-win { position: relative; z-index: 1; }
@media (max-width: 520px) { .s-section .s-scene::before { width: 40px; height: 40px; top: 16px; right: 20px; } .s-section .s-scene::after { top: 40px; left: 16px; width: 72px; height: 24px; } }
/* Room for each open screen's last line, and the sun and cloud kept clear of the window. */
.s-section .s-vs-art { min-height: 350px; }
.s-section .s-vs-art .s-win.is-mini:nth-child(2) { top: 108px; }
.s-section .s-vs-art .s-win.is-mini:nth-child(3) { top: 216px; }
.s-section .s-scene::before { top: 14px; right: 18px; width: 40px; height: 40px; }
.s-section .s-scene::after { top: 18px; left: 22px; width: 84px; height: 28px; }
.s-section .s-zz.is-flip .s-scene::before { left: 18px; }
.s-section .s-zz.is-flip .s-scene::after { right: 22px; }
.s-section .s-scene { padding-top: 64px; }
/* A tool name never breaks; on narrow windows its note drops under it. */
.s-section .s-tools li { flex-wrap: wrap; column-gap: 8px; row-gap: 0; }
.s-section .s-tools li span { white-space: nowrap; }
@media (max-width: 520px) { .s-section .s-tools li { padding-left: 22px; text-indent: 0; position: relative; } .s-section .s-tools li::before { position: absolute; left: 0; top: 2px; } }

/* Plan icon (Fahim, 2026-10-17: "use 2 type sub batch icon like crown for pro
   and cloud for saddle cloud.. with main saddle icon.. instead label use icon
   with tooltip"). The Saddle mark with a small ink badge, by the plan that
   brings the feature (saddle-cloud spec 0022): a cloud for Saddle Cloud on
   every plan, a crown for Pro and Reach (Saddle Pro), a magnifier for Reach.
   Its plan shows in a tooltip on hover and on keyboard focus; screen readers
   read the aria-label. Markup:
   <span class="s-pmark is-pro" role="img" tabindex="0" aria-label="Needs the Pro or Reach plan" data-tip="Pro and Reach"></span> */
.s-pmark { position: relative; display: inline-block; flex: none; width: 22px; height: 22px; vertical-align: -5px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 280'%3E%3Cpath fill='%23d000c4' fill-rule='evenodd' d='M140 0C217.32 0 280 62.6801 280 140C280 217.32 217.32 280 140 280C62.6801 280 1.9021e-06 217.32 0 140C0 62.6801 62.6801 1.47276e-06 140 0ZM185.037 71.0938C167.923 71.0938 159.816 92.6963 140 92.6963C120.184 92.6963 112.077 71.0938 94.9629 71.0938C77.8491 71.0939 63.4375 85.0455 63.4375 104.848V199.358C63.4375 201.746 64.387 204.035 66.0762 205.723C67.7654 207.411 70.0564 208.359 72.4453 208.359H94.9629C97.3518 208.359 99.6428 207.411 101.332 205.723C103.021 204.035 103.971 201.746 103.971 199.358V158.854C103.971 149.305 107.767 140.147 114.523 133.395C121.28 126.643 130.445 122.85 140 122.85C149.555 122.85 158.72 126.643 165.477 133.395C172.233 140.147 176.029 149.305 176.029 158.854V199.358C176.029 201.746 176.979 204.035 178.668 205.723C180.357 207.411 182.648 208.359 185.037 208.359H207.555C209.944 208.359 212.235 207.411 213.924 205.723C215.613 204.035 216.562 201.746 216.562 199.358V104.848C216.562 85.0455 202.151 71.0939 185.037 71.0938Z'/%3E%3C/svg%3E") center / contain no-repeat; border-radius: 50%; outline-offset: 3px; cursor: help; }
.s-pmark::after { content: ''; position: absolute; right: -5px; bottom: -4px; width: 14px; height: 14px; box-sizing: border-box; border: 2px solid #fff; border-radius: 50%; background: var(--s-ink) center / 8px no-repeat; }
.s-pmark.is-pro::after, .s-header .s-mega .s-mh.s-c2 > .wp-block-navigation-item__content::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M2.5 7.5l5 4.2L12 5l4.5 6.7 5-4.2-2 11.5h-15z'/%3E%3C/svg%3E"); }
.s-pmark.is-cloud::after, .s-header .s-mega .s-mh.s-c3 > .wp-block-navigation-item__content::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M7 19.5h10.5a4.5 4.5 0 0 0 .6-8.96A6.5 6.5 0 0 0 5.6 10.1 4.75 4.75 0 0 0 7 19.5z'/%3E%3C/svg%3E"); }
/* Reach (saddle-cloud spec 0022): a magnifier, for SEO research and tracking. */
.s-pmark.is-reach::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='5.5' fill='none' stroke='%23fff' stroke-width='3'/%3E%3Cpath d='M15 15l5 5' stroke='%23fff' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.s-pmark::before { content: attr(data-tip); position: absolute; z-index: 5; bottom: calc(100% + 10px); left: 50%; padding: 5px 9px; border-radius: 6px; background: var(--s-ink); font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: 0; color: #fff; white-space: nowrap; opacity: 0; transform: translate(-50%, 4px); transition: opacity 0.15s ease, transform 0.15s ease; pointer-events: none; }
.s-pmark:hover::before, .s-pmark:focus-visible::before { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .s-pmark::before { transition: none; } }
/* Sign in (/account/, 2026-10-17): two cards under the page head, by what the visitor came
   to do. Left-aligned inside, the button at each card's foot so the two line up. */
.s-section.s-signin .s-grid { max-width: 760px; margin: 40px auto 0; }
.s-section.s-signin .s-tile { padding: 28px; }
.s-section.s-signin .s-tile > .wp-block-buttons { margin-top: auto; padding-top: 12px; }
.s-section.s-signin .s-tile .wp-block-button, .s-section.s-signin .s-tile .wp-block-button__link { width: 100%; }

/* Zigzag pages (/features/, /about/; 2026-10-17): the home page's zigzag rows.
   The copy side lists that job's features; the scene shows the job being
   done. Rows alternate sides, as on home. */
.s-section.s-fz { padding-top: 56px; }
.s-section.s-fz .s-zz[id] { scroll-margin-top: 104px; }
.s-section.s-fz .s-zz-copy .s-zz-title { margin-top: 0; }
.s-section .s-zz-title .s-pmark { width: 26px; height: 26px; margin-left: 8px; vertical-align: -2px; }
/* The OK card fades in on home with its task; here it is simply there. */
.s-section.s-fz .s-okc { animation: none; }
/* Easy to read (Fahim, 2026-10-17: "each secton alook worried... dont over dump"): three or four
   features a row, a 16px line icon, the name and one short line, with air between rows. */
.s-section.s-fz .s-zz + .s-zz { margin-top: 32px; }
.s-section.s-fz .s-zz-copy .s-sub { margin-top: 12px; font-size: 17px; }
.s-section .s-zz-copy .s-fx-list { display: flex; flex-direction: column; gap: 18px; margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--s-line); }
.s-fx-item { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 14px; }
.s-fx-item::before { content: ''; grid-row: 1 / span 2; width: 16px; height: 16px; margin-top: 3px; background: var(--s-ink-2); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.s-fx-item > * { grid-column: 2; }
.s-section .s-fx-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; line-height: 22px; color: var(--s-ink); }
.s-section .s-fx-text { margin-top: 1px; font-size: 14px; line-height: 20px; color: var(--s-ink-2); }
.s-section .s-fx-title .s-pmark { width: 18px; height: 18px; vertical-align: middle; }
.s-section .s-fx-title .s-pmark::after { right: -4px; bottom: -3px; width: 12px; height: 12px; background-size: 7px; }

/* How it works and Works with on home (Fahim, 2026-10-17: "look very odinary..
   make pro with out border.. better spacing better gap"). No card borders:
   each sits on one soft panel, rounded like the zigzag rows, with room
   between the items. */
.s-section .s-how { --how-gap: 64px; --how-pad: 24px; margin-top: 48px; padding: 64px 64px 56px; border-radius: 20px; background: var(--s-panel); }
/* How it works, drawn (Fahim, 2026-10-17: "How it works make in visiualize.. show ai
   agent logos to work with wbesite"): the AI apps, then Saddle inside the dashed line of
   your site, then the dashboard where big changes wait. Each part sits over its step, and
   one dot runs the wire from the apps, through Saddle, to the dashboard. */
.s-section .s-flow {
	--wire-a: calc((100% - 2 * var(--how-gap)) / 6 + 116px);
	--wire-b: calc(100% - (100% - 2 * var(--how-gap)) / 6);
	position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--how-gap); align-items: center;
}
.s-section .s-flow > * { position: relative; z-index: 1; }
.s-section .s-flow::before { content: ''; position: absolute; top: 50%; left: var(--wire-a); right: calc(100% - var(--wire-b)); height: 2px; margin-top: -1px; background: linear-gradient(90deg, var(--s-line-3), var(--s-brand-soft)); }
.s-section .s-flow::after { content: ''; position: absolute; top: 50%; left: var(--wire-a); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--s-brand); box-shadow: 0 0 0 5px rgb(208 0 196 / 0.16); opacity: 0; animation: s-wire 6s linear infinite; }
@keyframes s-wire {
	0% { left: var(--wire-a); opacity: 0; }
	5% { opacity: 1; }
	62% { left: var(--wire-b); opacity: 1; }
	66%, 100% { left: var(--wire-b); opacity: 0; }
}
/* The apps, in their own colors, named under each tile like a phone's home screen. */
.s-section .s-agents { display: grid; grid-template-columns: repeat(3, 76px); justify-content: center; gap: 18px 6px; margin: 0; padding: 0; list-style: none; }
.s-section .s-agents li { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; font-size: 12px; font-weight: 500; line-height: 16px; color: var(--s-ink-2); white-space: nowrap; }
.s-section .s-agents li::before { content: ''; width: 56px; height: 56px; border-radius: 16px; background: var(--logo) center / 28px no-repeat, #fff; box-shadow: inset 0 0 0 1px rgb(38 38 36 / 0.06), 0 10px 22px -12px rgb(20 20 24 / 0.35); }
.s-section .s-agents .is-claude { --logo: var(--s-logo-claude); }
.s-section .s-agents .is-chatgpt { --logo: var(--s-logo-chatgpt); }
.s-section .s-agents .is-cursor { --logo: var(--s-logo-cursor); }
.s-section .s-agents .is-codex { --logo: var(--s-logo-codex); }
.s-section .s-agents .is-gemini-cli { --logo: var(--s-logo-gemini-cli); }
.s-section .s-agents .is-claude-code { --logo: var(--s-logo-claude-code); }
/* Your site: a dashed line around Saddle and its dashboard, so nothing in between leaves it. */
.s-section .s-flow-site {
	grid-column: 2 / 4; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--how-gap) + 2 * var(--how-pad)); align-items: center;
	padding: 40px var(--how-pad); border: 1.5px dashed var(--s-line-3); border-radius: 20px;
}
.s-section .s-flow-url { position: absolute; top: -13px; left: 20px; display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 2px 10px; border-radius: 999px; background: var(--s-panel); font-size: 12.5px; font-weight: 600; line-height: 22px; color: var(--s-ink-2); }
.s-section .s-flow-url::before { content: ''; width: 14px; height: 14px; background: var(--s-ink-2); -webkit-mask: var(--s-logo-wp) center / contain no-repeat; mask: var(--s-logo-wp) center / contain no-repeat; }
.s-section .s-flow-saddle { justify-self: center; position: relative; width: 80px; height: 80px; }
.s-section .s-flow-saddle::before { content: ''; position: absolute; inset: 0; border-radius: 24px; background: var(--s-brand); box-shadow: 0 0 0 10px rgb(208 0 196 / 0.08), 0 22px 40px -16px rgb(208 0 196 / 0.6); }
.s-section .s-flow-saddle::after { content: ''; position: absolute; inset: 18px; background: #fff; -webkit-mask: var(--s-mark-brand) center / contain no-repeat; mask: var(--s-mark-brand) center / contain no-repeat; }
.s-section .s-flow-name, .s-section .s-flow-note { position: absolute; left: 50%; margin: 0; white-space: nowrap; transform: translateX(-50%); }
.s-section .s-flow-name { top: calc(100% + 18px); font-size: 15px; font-weight: 650; line-height: 20px; color: var(--s-ink); }
.s-section .s-flow-note { top: calc(100% + 40px); font-size: 13px; line-height: 18px; color: var(--s-ink-2); }
.s-section .s-flow-win { position: relative; justify-self: stretch; max-width: none; box-shadow: 0 24px 48px -26px rgb(20 20 24 / 0.45); }
.s-section .s-flow-win .s-win-bar { padding: 9px 12px 9px 64px; font-size: 11.5px; text-align: left; }
.s-section .s-flow-win .s-lines { padding: 10px; }
.s-section .s-flow-win .s-lines li { padding: 8px 10px; font-size: 13px; line-height: 1.35; white-space: nowrap; }
.s-section .s-flow-win .s-lines li span { font-size: 12px; }
/* Done is a tick; the word stays for screen readers. */
.s-section .s-flow-win .s-lines li span.is-ok { width: 16px; height: 16px; font-size: 0; background: var(--s-ink-2); -webkit-mask: var(--s-tick) center / contain no-repeat; mask: var(--s-tick) center / contain no-repeat; }
.s-section .s-flow-win .s-lines li span.is-ask { padding: 2px 9px; border-radius: 999px; background: var(--s-brand); font-weight: 600; color: #fff; }
/* The steps, centered under their part of the picture. */
.s-section .s-steps { gap: var(--how-gap); margin-top: 56px; text-align: center; }
.s-section .s-steps > .s-tile { align-items: center; gap: 10px; padding: 0; border: 0; border-radius: 0; background: none; }
.s-section .s-steps .s-num { width: 36px; height: 36px; margin-bottom: 6px; background: #fff; color: var(--s-ink); font-size: 15px; font-weight: 700; box-shadow: inset 0 0 0 1px var(--s-line), 0 8px 18px -10px rgb(20 20 24 / 0.35); }
.s-section .s-steps .s-tile-title { font-size: 20px; }
.s-section .s-steps .s-mut { max-width: 32ch; font-size: 16px; line-height: 1.6; text-wrap: pretty; }
.s-section .s-ints { gap: 44px 64px; margin-top: 48px; padding: 56px 64px; border-radius: 20px; background: var(--s-panel); }
.s-section .s-ints > .s-int { gap: 8px; padding: 0; border: 0; border-radius: 0; background: none; }
.s-section .s-ints > .s-int:hover { box-shadow: none; }
.s-section .s-ints .s-int-head::before { background: #fff; box-shadow: 0 6px 14px -8px rgb(20 20 24 / 0.3); }
@media (max-width: 1100px) {
	.s-section .s-how { --how-gap: 32px; --how-pad: 8px; padding: 56px 32px 48px; }
	.s-section .s-flow-win .s-lines li { padding: 8px; font-size: 12.5px; }
	.s-section .s-agents { grid-template-columns: repeat(3, 68px); }
	.s-section .s-agents li::before { width: 50px; height: 50px; border-radius: 14px; background-size: 25px; }
	.s-section .s-flow { --wire-a: calc((100% - 2 * var(--how-gap)) / 6 + 106px); }
}
/* Phones and tablets: the picture runs top to bottom, then the steps. */
@media (max-width: 900px) {
	.s-section .s-how { padding: 48px 24px 40px; }
	/* Two short wires instead of one long one: apps down to Saddle, then Saddle's name down to
	   the dashboard. The dot drops from the apps into Saddle. */
	.s-section .s-flow { grid-template-columns: minmax(0, 1fr); row-gap: 56px; }
	.s-section .s-flow::before, .s-section .s-flow::after { content: none; }
	.s-section .s-flow-site { grid-column: auto; grid-template-columns: minmax(0, 1fr); row-gap: 48px; padding: 48px 20px 28px; }
	.s-section .s-flow-site::after, .s-section .s-flow-win::before { content: ''; position: absolute; left: 50%; z-index: -1; width: 2px; margin-left: -1px; background: linear-gradient(180deg, var(--s-line-3), var(--s-brand-soft)); }
	.s-section .s-flow-site::after { top: -58px; height: 108px; }
	.s-section .s-flow-win::before { bottom: calc(100% + 6px); height: 30px; background: var(--s-brand-soft); }
	.s-section .s-flow-site::before { content: ''; position: absolute; left: 50%; top: -58px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--s-brand); box-shadow: 0 0 0 5px rgb(208 0 196 / 0.16); opacity: 0; animation: s-wire-down 6s linear infinite; }
	.s-section .s-flow-saddle { margin-bottom: 52px; }
	.s-section .s-flow-win { justify-self: center; width: 100%; max-width: 340px; }
	.s-section .s-steps { gap: 36px; margin-top: 48px; }
	.s-section .s-ints { gap: 32px 32px; padding: 36px 28px; }
}
@keyframes s-wire-down {
	0% { top: -58px; opacity: 0; }
	5% { opacity: 1; }
	45% { top: 70px; opacity: 1; }
	50%, 100% { top: 70px; opacity: 0; }
}
@media (max-width: 560px) {
	.s-section .s-ints { margin-top: 32px; padding: 28px 20px; }
	.s-section .s-how { padding: 40px 16px 32px; }
}

/* The menu on phones and tablets (Fahim, 2026-10-17: "make header menu better
   and mobile friendly, make canvas style"). Below 900px the links fold into
   WordPress's own navigation overlay (focus trap, Escape, aria come with it),
   drawn as a drawer from the right over a dimmed page. The Features groups
   show with their icons; Sign in and Choose your plan sit at the foot. The
   last two links exist only in the drawer. */
.s-header .s-nav-drawer { display: none; }
/* The bar's blur would make it the frame of the fixed drawer; it goes while the menu is open. */
html.has-modal-open .wp-block-group.s-header, html.has-modal-open .wp-block-template-part.site-header { -webkit-backdrop-filter: none; backdrop-filter: none; animation: none; }
.s-header .wp-block-navigation__responsive-container-open { width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid var(--s-line); border-radius: 10px; background: #fff; color: var(--s-ink); cursor: pointer; }
.s-header .wp-block-navigation__responsive-container-open svg { width: 22px; height: 22px; }
@media (max-width: 900px) {
	.s-header .s-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: inline-flex; }
	.s-header .s-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; }
}
.s-header .wp-block-navigation__responsive-container.is-menu-open {
	position: fixed; inset: 0; z-index: 100000; display: flex; flex-direction: row !important; justify-content: flex-end;
	padding: 0; background: rgb(20 20 24 / 0.45) !important; color: var(--s-ink); animation: s-scrim 0.2s ease both;
}
.s-header .is-menu-open .wp-block-navigation__responsive-close { width: min(380px, calc(100vw - 40px)); max-width: none; height: 100%; margin: 0; overflow-y: auto; background: #fff; box-shadow: -24px 0 60px -24px rgb(20 20 24 / 0.4); animation: s-drawer 0.28s var(--s-ease) both; }
.s-header .is-menu-open .wp-block-navigation__responsive-dialog { position: relative; min-height: 100%; margin: 0; padding: 76px 24px 28px; box-sizing: border-box; display: flex; flex-direction: column; }
.s-header .is-menu-open .wp-block-navigation__responsive-container-close { position: absolute; top: 18px; right: 18px; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--s-panel); color: var(--s-ink); }
.s-header .is-menu-open .wp-block-navigation__responsive-container-content { flex: 1; display: flex; flex-direction: column; align-items: stretch; padding: 0 !important; }
.s-header .is-menu-open .wp-block-navigation__container { flex: 1; flex-direction: column; align-items: stretch !important; gap: 0 !important; }
.s-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item { display: block; width: 100%; border-bottom: 1px solid var(--s-line-2); }
.s-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { display: block; padding: 16px 2px; font-size: 18px; font-weight: 600; color: var(--s-ink); }
/* Features: the parent link is the group title, its panel opens in place. */
.s-header .is-menu-open .s-mega > .wp-block-navigation-item__content { padding-bottom: 8px !important; }
.s-header .is-menu-open .s-mega > .wp-block-navigation-submenu__toggle { display: none; }
.s-header .is-menu-open .s-mega > .wp-block-navigation__submenu-container {
	position: static; display: block; width: auto; min-width: 0; height: auto; margin: 0 0 12px; padding: 0 !important; transform: none;
	border: 0; border-radius: 0; background: none; box-shadow: none; opacity: 1; visibility: visible; overflow: visible;
}
.s-header .is-menu-open .s-mega > .wp-block-navigation__submenu-container::before { content: none; }
.s-header .is-menu-open .s-mega .wp-block-navigation-item { display: block; width: 100%; }
.s-header .is-menu-open .s-mega .s-mh { margin: 0; padding: 0; border: 0; }
.s-header .wp-block-navigation .is-menu-open .s-mega .s-mh.wp-block-navigation-item > .wp-block-navigation-item__content { padding: 14px 0 6px; }
.s-header .is-menu-open .s-mega .s-mh.s-c2 > .wp-block-navigation-item__content::after,
.s-header .is-menu-open .s-mega .s-mh.s-c3 > .wp-block-navigation-item__content::after { top: 24px; }
.s-header .wp-block-navigation .is-menu-open .s-mega .s-mi.wp-block-navigation-item > .wp-block-navigation-item__content { padding: 8px 0; grid-template-columns: 20px minmax(0, 1fr); align-items: center; }
.s-header .is-menu-open .s-mega .s-mi > .wp-block-navigation-item__content::before { width: 16px; height: 16px; margin: 0 2px; }
.s-header .is-menu-open .s-mega .s-mi .wp-block-navigation-item__label { font-size: 15px; }
.s-header .is-menu-open .s-mega .s-mi .wp-block-navigation-item__description { display: none; }
.s-header .wp-block-navigation .is-menu-open .s-mega .s-mi.wp-block-navigation-item > .wp-block-navigation-item__content { padding: 6px 0; }
.s-header .is-menu-open .s-mega .s-mi-more { margin: 10px 0 0; padding: 0; border: 0; background: none; }
.s-header .wp-block-navigation .is-menu-open .s-mega .s-mi-more.wp-block-navigation-item > .wp-block-navigation-item__content { justify-content: flex-start; padding: 8px 0; }
/* The foot: Sign in as a quiet link, Choose your plan as the one brand button. */
.s-header .is-menu-open .s-nav-drawer { display: block; }
.s-header .is-menu-open .wp-block-navigation__container > .s-nav-drawer:not(.s-nav-cta) { margin-top: auto; border-top: 1px solid var(--s-line-2); }
.s-header .is-menu-open .wp-block-navigation__container > .s-nav-cta { padding-top: 16px; border-bottom: 0; }
.s-header .is-menu-open .wp-block-navigation__container > .s-nav-cta > .wp-block-navigation-item__content { display: flex; justify-content: center; padding: 14px 18px; border-radius: 10px; background: var(--s-brand); font-size: 16px; color: #fff; }
.s-header .is-menu-open .wp-block-navigation__container > .s-nav-cta > .wp-block-navigation-item__content:hover { background: var(--s-brand-hover, #b000a6); color: #fff; }
@keyframes s-scrim { from { background-color: rgb(20 20 24 / 0); } }
@keyframes s-drawer { from { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
	.s-header .wp-block-navigation__responsive-container.is-menu-open, .s-header .is-menu-open .wp-block-navigation__responsive-close { animation: none; }
}

/* ---- Recipes (Fahim, 2026-10-20, after spacefast.com/recipes: "need recipes like this ... like
   real world user use", and "saddle how work with gutenburg"). /recipes/ reads like a book: the
   chapters beside the cards on wide screens, each card a peek at its prompt, its title, one line
   and what it needs. A recipe opens with the job done in an AI app's window (the art of
   /features/), then what you get, what you provide, the prompt and what it needs. The words are
   data/recipes.json; the markup is inc/recipes.php and the recipe templates. */
.s-section .s-rsteps { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin: 30px auto 0; padding: 0; list-style: none; counter-reset: s-rstep; }
.s-section .s-rsteps li { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; font-weight: 500; color: var(--s-ink); counter-increment: s-rstep; }
.s-section .s-rsteps li::before { content: counter(s-rstep); display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--s-brand-tint); font-size: 13px; font-weight: 700; color: var(--s-brand-text); }

.s-section.s-recipes { padding-top: 72px; padding-bottom: 96px; text-align: left; }
.s-recipes .s-rbook { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 56px; }
.s-recipes .s-rnav { position: sticky; top: 104px; align-self: start; }
.admin-bar .s-recipes .s-rnav { top: 136px; }
.s-recipes .s-rnav-label { margin: 0 0 8px 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--s-ink-2); }
.s-recipes .s-rnav-list { margin: 0; padding: 0; list-style: none; }
.s-recipes .s-rnav-list li { margin: 0; }
.s-recipes .s-rnav-list a { display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px; border-radius: 8px; font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--s-ink); text-decoration: none; }
.s-recipes .s-rnav-list a:hover { background: var(--s-panel); }
.s-recipes .s-rnav-list a span { font-size: 13px; font-weight: 400; color: var(--s-ink-2); }

.s-recipes .s-rchapter { scroll-margin-top: 104px; }
.s-recipes .s-rchapter + .s-rchapter { margin-top: 80px; }
.s-recipes .s-rchapter-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--s-line); }
.s-recipes .s-rchapter-title { margin: 0; font-size: 34px; font-weight: 700; line-height: 1.15; letter-spacing: -0.03em; }
.s-recipes .s-rchapter-title a { color: var(--s-ink); text-decoration: none; }
.s-recipes .s-rchapter-title a:hover { color: var(--s-brand-text); }
.s-recipes .s-rchapter-count { flex: none; font-size: 14px; color: var(--s-ink-2); }
.s-section .s-rchapter-line { max-width: 640px; margin-top: 14px; font-size: 17px; line-height: 1.55; color: var(--s-ink-2); }

/* Cards: the prompt's first sentence in mono over a dashed rule, like a recipe card. The title's
   link covers the card; the plan mark sits above it so its tip still shows on hover. */
.s-recipes .s-rcards { margin-top: 28px; }
.s-recipes .s-rcards .wp-block-post-template { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.s-recipes.is-one .s-rcards .wp-block-post-template { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.s-recipes .s-rcards .wp-block-post-template > li { display: flex; margin: 0; }
.s-recipes .s-rcard { position: relative; display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 22px 24px 20px; box-sizing: border-box; background: #fff; border: 1px solid var(--s-line); border-radius: 16px; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.s-recipes .s-rcard:hover { border-color: var(--s-line-3); box-shadow: 0 16px 32px -22px rgb(20 20 24 / 0.35); }
.s-section .s-rcard-peek { display: -webkit-box; overflow: hidden; font: 400 12.5px/1.6 var(--mono); color: var(--s-ink-2); -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
/* The dashed rule is the title's, not the peek's: a clamped box would show its cut lines in its own padding. */
.s-recipes .s-rcard-title { margin: 4px 0 0; padding-top: 16px; border-top: 1px dashed var(--s-line-3); font-size: 20px; font-weight: 650; line-height: 1.3; letter-spacing: -0.01em; }
.s-recipes .s-rcard-title a { color: var(--s-ink); text-decoration: none; }
.s-recipes .s-rcard-title a::after { content: ''; position: absolute; inset: 0; border-radius: 16px; }
.s-recipes .s-rcard-title a:hover { color: var(--s-brand-text); }
.s-recipes .s-rcard-text p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--s-ink-2); }
.s-section .s-rcard-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: auto; padding-top: 8px; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--s-ink-txt); }
.s-section .s-rcard-foot::after { content: ''; width: 18px; height: 18px; margin-left: auto; background: var(--s-ink-2); -webkit-mask: var(--s-arrow) center / contain no-repeat; mask: var(--s-arrow) center / contain no-repeat; transition: transform 0.15s ease, background-color 0.15s ease; }
.s-recipes .s-rcard:hover .s-rcard-foot::after { background: var(--s-brand); transform: translateX(3px); }
.s-rneed { display: inline-flex; align-items: center; gap: 8px; }
.s-rcard-foot .s-pmark { z-index: 1; }

/* How Saddle works with Gutenberg (patterns/recipes-gutenberg.php). */
.s-section .s-rhow { margin-top: 28px; padding: 28px; border-radius: 16px; background: var(--s-panel); }
.s-section .s-rhow-title { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--s-ink); }
.s-section .s-rhow-sub { margin-top: 6px; font-size: 15.5px; line-height: 1.55; color: var(--s-ink-2); }
.s-section .s-rhow-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 20px 0 0; padding: 0; list-style: none; counter-reset: s-rhow; }
.s-section .s-rhow-steps li { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 18px; border-radius: 12px; background: #fff; font-size: 14px; line-height: 1.5; color: var(--s-ink-2); counter-increment: s-rhow; }
.s-section .s-rhow-steps li::before { content: counter(s-rhow); display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-bottom: 4px; border-radius: 50%; background: var(--s-brand-tint); font-size: 13px; font-weight: 700; color: var(--s-brand-text); }
.s-section .s-rhow-steps strong { font-size: 15px; font-weight: 650; color: var(--s-ink); }
.s-section .s-rhow-steps code { margin-top: auto; padding: 8px 0 0; border: 0; border-radius: 0; background: none; font: 400 12px/1.4 var(--mono); color: var(--s-brand-text); overflow-wrap: anywhere; }

/* A group page (one list) and a recipe's "More recipes like this". */
.s-recipes.is-one .s-rhow { margin: 0 0 32px; }
.s-recipes.is-one .s-rcards { margin-top: 0; }
.s-section.s-recipes.is-more { padding-top: 0; }
.s-recipes.is-more > * { max-width: 880px; margin-left: auto; margin-right: auto; }
.s-section.s-article:has(+ .s-recipes.is-more) { padding-bottom: 64px; }
.s-recipes .s-rmore-title { margin: 0; padding-top: 48px; border-top: 1px solid var(--s-line); font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }

/* A recipe's head: what it needs as chips, and the copy button. */
.s-section.s-head .s-rmeta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 24px; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--s-ink-txt); }
.s-head .s-rmeta .s-rneed { padding: 6px 12px; border: 1px solid var(--s-line); border-radius: 999px; background: #fff; }
.s-head .s-rmeta:empty { display: none; }
.s-section.s-head .s-rhead-buttons { margin-top: 28px; }
.s-head .s-label a { color: inherit; text-decoration: none; }

/* The job, done in the app's window, at the top of a recipe. The prose column's list and margin
   rules would indent the tool list, so they are undone here. */
.s-article .s-prose .s-rrun { min-height: 0; margin: 0 0 16px; padding: 44px 28px 120px; }
.s-article .s-prose .s-rrun .s-win { max-width: 560px; }
.s-article .s-prose .s-rrun .s-tools { padding-left: 0; }
.s-article .s-prose .s-rrun li + li { margin-top: 0; }
.s-article .s-prose .wp-block-post-content > .s-rrun + * { margin-top: 40px; }
.s-article .s-prose #prompt { scroll-margin-top: 104px; }

@media (max-width: 900px) {
	.s-section.s-recipes { padding-top: 48px; }
	.s-recipes .s-rbook { grid-template-columns: minmax(0, 1fr); gap: 36px; }
	.s-recipes .s-rnav { position: static; }
	.s-recipes .s-rnav-label { margin-left: 0; }
	.s-recipes .s-rnav-list { display: flex; flex-wrap: wrap; gap: 8px; }
	.s-recipes .s-rnav-list a { gap: 8px; padding: 7px 14px; border: 1px solid var(--s-line); border-radius: 999px; background: #fff; font-size: 14px; }
	.s-recipes .s-rchapter + .s-rchapter { margin-top: 64px; }
	.s-recipes .s-rchapter-title { font-size: 28px; }
	.s-recipes .s-rcards .wp-block-post-template, .s-recipes.is-one .s-rcards .wp-block-post-template { grid-template-columns: minmax(0, 1fr); }
	.s-section .s-rhow-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
	.s-section .s-rsteps { flex-direction: column; align-items: flex-start; width: max-content; max-width: 100%; }
	.s-section .s-rhow { padding: 20px; }
	.s-section .s-rhow-steps { grid-template-columns: minmax(0, 1fr); }
	.s-recipes .s-rcard { padding: 20px; }
	.s-article .s-prose .s-rrun { padding: 22px 12px 88px; }
}
@media (prefers-reduced-motion: reduce) {
	.s-recipes .s-rcard, .s-section .s-rcard-foot::after { transition: none; }
}

/* =====================================================================
   The notch and the live stage (Fahim, 2026-10-21: "the website hero and header, make notch
   hero"; then 2026-10-22, after vantaui.com's "Notch Hero": the words centred and the demo under
   them; the same day the header became a light bar, so the hero's tabs are the one notch).
   ===================================================================== */

/* ---- the notch hero (Fahim, 2026-10-22, after vantaui.com's "Notch Hero": "hero should center
   content bottom demo"). The words centred on white. Under them the meadow band: a white notch
   hangs from the words' edge with the five features as tabs (the site's one notch), and the live stage
   stands below it on the hills. The band holds the meadow canvas (motion.js) and, without JS,
   its picture. The headline is two lines from 601px ("Your WordPress [job]" / "done by [app]")
   and three below, so a changing word never moves a line break. */
.s-section.s-bg-sky.s-hero.s-hero-notch { padding-top: 56px; background: #fff; }
body:has(#main > .wp-block-post-content > .s-hero-notch:first-child) .wp-block-template-part.site-header:not(.is-scrolled) { background: #fff; }
.s-hero-notch > .s-hero-copy { position: relative; z-index: 3; max-width: 960px; margin: 0 auto; padding-bottom: 72px; }
.s-hero-notch > .s-hero-copy > .s-news, .s-hero-notch > .s-hero-copy > .s-h1, .s-hero-notch > .s-hero-copy > .s-sub, .s-hero-notch > .s-hero-copy > .wp-block-buttons { animation: s-rise 0.8s var(--s-ease) both; }
.s-hero-notch > .s-hero-copy > .s-h1 { animation-delay: 0.12s; }
.s-hero-notch > .s-hero-copy > .s-sub { animation-delay: 0.22s; }
.s-hero-notch > .s-hero-copy > .wp-block-buttons { animation-delay: 0.3s; }
.s-section.s-hero-notch .s-h1.s-h1-swap { margin: 0 auto; font-size: clamp(40px, 6.2vw, 80px); line-height: 1.02; }
.s-section.s-hero-notch .s-hero-copy .s-sub { max-width: 560px; margin: 24px auto 0; }
.s-section.s-center.s-hero-notch .s-hero-copy .wp-block-buttons { justify-content: center; margin: 32px auto 0; }
@media (min-width: 601px) { .s-hero-notch .s-br-sm { display: none; } }
@media (max-width: 600px) {
	.s-hero-notch .s-br-lg { display: none; }
	.s-section.s-hero-notch .s-h1.s-h1-swap { font-size: clamp(38px, 11.4vw, 56px); }
	.s-hero-notch > .s-hero-copy { padding-bottom: 56px; }
}

/* The band, edge to edge: a sky over the hills that takes the playing feature's color, the same
   as that feature's row further down (SEO blue, Pages peach, Store sand, Monitor lilac; MCP the
   hero's grey), with the rows' pixel sun. */
.s-section .s-band {
	position: relative; isolation: isolate; margin: 0 calc(-1 * var(--s-pad)); padding: 0 var(--s-pad) 200px;
	background: #ebebf0; transition: background-color 0.7s ease;
}
.s-section .s-band.is-seo { background-color: #dfe8f6; }
.s-section .s-band.is-pages { background-color: #f6e6d8; }
.s-section .s-band.is-store { background-color: #efe9dc; }
.s-section .s-band.is-monitor { background-color: #e8e2f4; }
.s-section .s-band::before {
	content: ''; position: absolute; top: 84px; right: max(20px, calc(var(--s-pad) - 84px)); z-index: 0; width: 54px; height: 54px;
	background: #ffd27a; -webkit-mask: var(--s-px-sun) center / contain no-repeat; mask: var(--s-px-sun) center / contain no-repeat;
	image-rendering: pixelated; pointer-events: none; transition: background-color 0.7s ease;
}
.s-section .s-band.is-seo::before { background-color: #fff3c4; }
.s-section .s-band.is-monitor::before { background-color: var(--s-brand-soft); }
.s-band > .s-pix { position: absolute; left: 0; top: 0; z-index: -1; display: block; width: 100%; height: 100%; pointer-events: none; image-rendering: pixelated; }
.s-section .s-band > .s-meadow { position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; height: 216px; margin: 0; }
.s-section .s-band.has-meadow > .s-meadow { background: none; }

/* The notch: white like the words above it, with concave ears, and Saddle's features as 40px
   pills 6px in from its 26px corners, like the header's. motion.js turns each feature into a
   button that plays its scene. */
.s-section .s-jobs {
	--s-ear: 24px; position: relative; z-index: 5; display: flex; gap: 2px; width: max-content; max-width: calc(100% - 2 * var(--s-ear));
	margin: 0 auto; padding: 0 6px 6px; box-sizing: border-box; border-radius: 0 0 26px 26px; background: #fff;
}
.s-jobs::before, .s-jobs::after { content: ''; position: absolute; top: 0; width: var(--s-ear); height: var(--s-ear); background: #fff; pointer-events: none; }
.s-jobs::before { right: calc(100% - 0.5px); -webkit-mask: radial-gradient(circle at 0 100%, transparent calc(var(--s-ear) - 0.5px), #000 var(--s-ear)); mask: radial-gradient(circle at 0 100%, transparent calc(var(--s-ear) - 0.5px), #000 var(--s-ear)); }
.s-jobs::after { left: calc(100% - 0.5px); -webkit-mask: radial-gradient(circle at 100% 100%, transparent calc(var(--s-ear) - 0.5px), #000 var(--s-ear)); mask: radial-gradient(circle at 100% 100%, transparent calc(var(--s-ear) - 0.5px), #000 var(--s-ear)); }
.s-job {
	display: inline-flex; align-items: center; gap: 8px; height: 40px; margin: 0; padding: 0 18px; box-sizing: border-box;
	border: 0; border-radius: 999px; background: transparent; font: 500 15px/1 var(--sans); color: var(--s-ink-2); white-space: nowrap;
	transition: background-color 0.2s, color 0.2s;
}
.s-job::before { content: ''; flex: none; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
button.s-job { cursor: pointer; }
button.s-job:hover { color: var(--s-ink); }
.s-job.is-on { background: var(--s-panel); color: var(--s-ink); }
button.s-job:focus-visible { outline: 2px solid var(--s-brand); outline-offset: -2px; }
@media (max-width: 600px) {
	.s-section .s-jobs { --s-ear: 18px; }
	.s-job { padding: 0 12px; font-size: 14px; }
	.s-job::before { display: none; }
}
@media (max-width: 400px) {
	.s-job { padding: 0 9px; font-size: 13px; }
}

/* ---- the stage (.s-live): the AI app and the site as two of the rows' windows (.s-win, .s-you,
   .s-tools, .s-lines, .s-tag, .s-wire), with Saddle on the wire between them. motion.js adds .js
   and plays one scene per feature (.s-act-<job> and .s-view-<job> carry .is-on); each tool line
   goes from .is-run to .is-done, and each thing on the site gets .is-new when it changes.
   Without the script the first scene shows, finished. */
@keyframes s-land { 0% { box-shadow: 0 0 0 2px var(--s-brand); } 100% { box-shadow: 0 0 0 2px rgb(208 0 196 / 0); } }
.s-live { position: relative; z-index: 4; animation: s-rise 1s var(--s-ease) 0.35s both; }
.s-live:not(.js) .s-act:not(:first-child), .s-live:not(.js) .s-view:not(:first-child),
.s-live.js .s-act:not(.is-on), .s-live.js .s-view:not(.is-on) { display: none; }
.s-live.is-still *, .s-live.is-still *::before, .s-live.is-still *::after { animation: none !important; }

/* The windows. */
.s-section .s-live .s-win { display: flex; flex-direction: column; max-width: none; overflow: hidden; border-radius: 14px; }
.s-live .s-act, .s-live .s-view { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.s-section .s-live .s-win-bar { flex: none; }
.s-section .s-live .s-win-body { flex: 1; gap: 10px; padding: 18px; }
/* The AI apps wear their own logos, as in the headline. */
.s-chat-app { display: inline-flex; align-items: center; gap: 7px; }
.s-chat-app::before { content: ''; flex: none; width: 16px; height: 16px; background: var(--logo-c) center / contain no-repeat; }
.s-chat-app.s-app-claude { --logo-c: var(--s-logo-claude); }
.s-chat-app.s-app-codex { --logo-c: var(--s-logo-codex); }
.s-chat-app.s-app-cursor { --logo-c: var(--s-logo-cursor); }
.s-chat-app.s-app-chatgpt { --logo-c: var(--s-logo-chatgpt); }
.s-live .s-win-bar .s-chat-app { gap: 6px; font-weight: 600; color: var(--s-ink); }
.s-live .s-win-bar .s-chat-app::before { width: 14px; height: 14px; }
/* Lists in the windows run full width (a centred section would shrink them). */
.s-section .s-live ul { align-items: stretch; text-align: left; }

/* The AI app: the ask, Saddle's tools one by one, then the answer or "Needs your OK". */
.s-live.js .s-tools li { opacity: 0; transform: translateY(6px); transition: opacity 0.35s ease, transform 0.35s var(--s-ease); }
.s-live.js .s-tools li.is-run, .s-live.js .s-tools li.is-done { opacity: 1; transform: none; }
.s-live.js .s-tools li.is-run::before { box-sizing: border-box; border: 2px solid var(--s-line); border-top-color: var(--s-brand); border-radius: 50%; background: none; -webkit-mask: none; mask: none; animation: s-spin 0.8s linear infinite; }
.s-live.js .s-tools li.is-done::before { animation: s-pop 0.35s var(--s-ease) both; }
.s-live .s-act.is-on .s-you { animation: s-step 0.5s var(--s-ease) both; }
.s-section .s-live .s-done { display: none; margin: 2px 0 0; padding: 0; border-radius: 0; background: none; font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--s-ink); }
.s-section .s-live .s-done::before { content: none; }
.s-live:not(.js) .s-act:first-child .s-done-yes, .s-live .s-act.is-yes .s-done-yes, .s-live .s-act.is-no .s-done-no { display: block; animation: s-step 0.45s var(--s-ease) both; }
.s-section .s-live .s-okc { display: none; grid-template-columns: minmax(0, 1fr); margin-top: 2px; animation: none; }
.s-section .s-live .s-okc .wp-block-buttons { grid-column: 1; grid-row: auto; justify-content: flex-start; margin-top: 10px; }
/* The pair is a fit-content grid that a centred section would push to the middle. */
.s-section.s-hero-notch .s-live .s-okc .wp-block-buttons { margin: 10px 0 0; }
.s-section .s-live .s-act.is-ask .s-okc { display: grid; animation: s-step 0.45s var(--s-ease) both; }
.s-live .s-okc .wp-block-button__link { transition: transform 0.15s ease, background-color 0.15s ease; }
.s-live .s-okc .wp-block-button.is-press .wp-block-button__link { transform: scale(0.94); }
.s-section .s-live .s-chat-input {
	flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 12px 12px; padding: 8px 8px 8px 14px;
	border: 1px solid var(--s-line); border-radius: 12px; background: #fff; font-size: 14px; line-height: 1.3; color: var(--s-ink-2); text-align: left;
}
.s-live .s-chat-input::after { content: ''; flex: none; width: 28px; height: 28px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%23262624'/%3E%3Cpath d='M14 19V9M9.5 13.5L14 9l4.5 4.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Saddle, between the app and the site. A pulse runs while a tool is on its way. */
.s-section .s-relay { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 7px 14px 7px 8px; border: 1px solid rgb(38 38 36 / 0.08); border-radius: 999px; background: #fff; box-shadow: 0 12px 28px -16px rgb(38 38 36 / 0.45); font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--s-ink); }
.s-section .s-relay::before { content: ''; flex: none; width: 22px; height: 22px; background: var(--s-mark-brand) center / contain no-repeat; border-radius: 50%; }
.s-live.is-busy .s-relay::before { animation: s-ping-ring 1.2s var(--s-ease) infinite; }

/* The site's screens. Each change lands with a short magenta ring, like a block picked in the editor. */
.s-section .s-live .s-check { animation: none; }
.s-live.js .s-view .s-check:not(.is-new) { opacity: 0; }
.s-live.js .s-view .s-check.is-new { animation: s-step 0.4s var(--s-ease) both; }

/* MCP: the app the person just let in joins the list, with the role they chose. */
.s-section .s-live .s-apps li > .s-chat-app { font-size: 14px; font-weight: 600; color: var(--s-ink); }
.s-section .s-live .s-apps li > .s-chat-app::before { width: 18px; height: 18px; }
.s-section .s-live .s-apps .s-tag { flex: none; font-size: 12px; }
.s-live.js .s-apps li.is-added:not(.is-new) { display: none; }
.s-live.js .s-apps li.is-added.is-new { animation: s-step 0.4s var(--s-ease) both, s-land 1.1s ease both; }

/* SEO: a search, and each result's title goes from the bare slug to a written one. */
.s-section .s-live .s-query { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border: 1px solid var(--s-line); border-radius: 999px; box-shadow: 0 1px 6px rgb(32 33 36 / 0.08); font-size: 14px; line-height: 1.3; color: var(--s-ink); }
.s-live .s-query::before { content: ''; flex: none; width: 16px; height: 16px; background: var(--s-ink-2); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.s-section .s-results { margin: 0; padding: 0; list-style: none; }
.s-results li { position: relative; margin: 0; padding: 9px 10px; border-radius: 10px; }
.s-results li::after { content: ''; display: block; width: 86%; height: 6px; margin: 8px 0 10px; border-radius: 9px; background: var(--s-line-2); box-shadow: 0 10px 0 var(--s-line-2); }
.s-r-url { display: block; font-size: 12px; line-height: 1.4; color: var(--s-ink-2); }
.s-r-old, .s-r-new { display: block; margin-top: 2px; font-size: 16px; font-weight: 600; line-height: 1.3; }
.s-r-old { color: var(--s-ink-2); font-weight: 400; font-style: italic; }
.s-r-new { color: #2846a8; }
.s-live:not(.js) .s-r-old, .s-live.js .s-results li.is-new .s-r-old, .s-live.js .s-results li:not(.is-new) .s-r-new { display: none; }
.s-live.js .s-results li.is-new { animation: s-land 1.1s ease both; }
.s-live.js .s-results li.is-new .s-r-new { animation: s-type 0.6s steps(24) both; }

/* Pages: the rows' drawn page, block by block, with a menu and questions added. */
.s-section .s-live .s-wire { gap: 8px; }
.s-section .s-wire-nav { height: 28px; border-radius: 6px; background: radial-gradient(circle at 16px 50%, var(--s-ink) 5px, transparent 5.5px), linear-gradient(var(--s-line), var(--s-line)) right 100px center / 34px 6px no-repeat, linear-gradient(var(--s-line), var(--s-line)) right 56px center / 34px 6px no-repeat, linear-gradient(var(--s-line), var(--s-line)) right 12px center / 34px 6px no-repeat, #fff; }
.s-section .s-wire-faq { height: 62px; border-radius: 6px; background: linear-gradient(var(--s-line), var(--s-line)) 12px 12px / 54% 6px no-repeat, linear-gradient(var(--s-line-2), var(--s-line-2)) 12px 25px / calc(100% - 24px) 1px no-repeat, linear-gradient(var(--s-line), var(--s-line)) 12px 34px / 46% 6px no-repeat, linear-gradient(var(--s-line-2), var(--s-line-2)) 12px 47px / calc(100% - 24px) 1px no-repeat, #fff; }
.s-section .s-live .s-wire-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 520px) {
	.s-section .s-live .s-wire { padding: 10px; }
	.s-section .s-live .s-wire-cols p { padding: 10px 8px; font-size: 11px; }
	.s-section .s-live .s-wire-cols p strong { font-size: 13px; }
}
.s-live.js .s-wire > .wp-block-group:not(.is-new) { opacity: 0; transform: translateY(6px); }
.s-live.js .s-wire > .wp-block-group.is-new { animation: s-step 0.4s var(--s-ease) both, s-land 1.1s ease both; }

/* Store: prices change only after Approve. Each product has a soft sky of its own. */
.s-section .s-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.s-products li { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 8px 8px 10px; border: 1px solid var(--s-line-2); border-radius: 10px; }
.s-p-img { display: block; aspect-ratio: 1; margin-bottom: 4px; border-radius: 7px; background: radial-gradient(circle at 50% 62%, #fff 0 22%, transparent 23%), #f6e6d8; }
.s-products li:nth-child(2) .s-p-img { background-color: #dfe8f6; }
.s-products li:nth-child(3) .s-p-img { background-color: #e8e2f4; }
.s-p-name { font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--s-ink); }
.s-p-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; font-size: 13px; font-variant-numeric: tabular-nums; }
.s-p-old { color: var(--s-ink); text-decoration: none; }
.s-p-new { font-weight: 650; color: var(--s-brand-text); }
.s-live:not(.js) .s-p-old, .s-live.js .s-products li.is-new .s-p-old { color: var(--s-ink-2); text-decoration: line-through; font-size: 11px; }
.s-live.js .s-products li:not(.is-new) .s-p-new { display: none; }
.s-live.js .s-products li.is-new { animation: s-land 1.1s ease both; }
.s-live.js .s-products li.is-new .s-p-new { animation: s-pop 0.35s var(--s-ease) both; }

/* Monitor: Saddle Cloud's sites, each with a status light; the updates land after Approve. */
.s-sites .s-site-name { display: inline-flex; align-items: center; gap: 10px; }
.s-section .s-live .s-sites li > .s-site-name { font-size: 14px; color: var(--s-ink); }
.s-sites .s-site-name::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #2f9e68; box-shadow: 0 0 0 3px rgb(47 158 104 / 0.16); }
.s-live:not(.js) .s-sites .s-old, .s-live.js .s-sites li:not(.is-new) .s-new, .s-live.js .s-sites li.is-new .s-old { display: none; }
.s-live.js .s-sites li.is-new { animation: s-land 1.1s ease both; }

/* Desktop: the AI app on the left, the site on the right, and Saddle on the wire between. */
.s-hero-notch .s-live { max-width: 1120px; margin: 56px auto 0; }
@keyframes s-wire-run { 0% { opacity: 0; transform: translateX(0); } 15%, 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(var(--wire)); } }
@media (min-width: 1101px) {
	.s-hero-notch .s-live { display: grid; grid-template-columns: minmax(0, 400px) var(--wire) minmax(0, 1fr); align-items: stretch; --wire: 148px; }
	.s-hero-notch .s-live::before { content: ''; position: absolute; top: 50%; left: 400px; width: var(--wire); height: 2px; margin-top: -1px; background: repeating-linear-gradient(90deg, rgb(38 38 36 / 0.22) 0 6px, transparent 6px 12px); }
	.s-hero-notch .s-live::after { content: ''; position: absolute; top: 50%; left: 400px; z-index: 1; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--s-brand); box-shadow: 0 0 0 5px rgb(208 0 196 / 0.16); opacity: 0; }
	.s-hero-notch .s-live.is-busy::after { animation: s-wire-run 0.8s linear infinite; }
	.s-section.s-hero-notch .s-live .s-app { grid-column: 1; grid-row: 1; }
	.s-section.s-hero-notch .s-live .s-relay { grid-column: 2; grid-row: 1; align-self: center; justify-self: center; position: relative; z-index: 2; }
	.s-section.s-hero-notch .s-live .s-site { grid-column: 3; grid-row: 1; }
}
/* Up to 1100px: one column under the words, the app, then Saddle, then the site. */
@media (max-width: 1100px) {
	.s-hero-notch .s-live { max-width: 560px; margin-top: 40px; }
	.s-section .s-live .s-relay { display: flex; width: fit-content; margin: -6px auto; position: relative; z-index: 3; }
	.s-section .s-band { padding-bottom: 152px; }
}
@media (max-width: 600px) {
	.s-section .s-live .s-chat-input { display: none; }
	.s-section .s-live .s-win-body { padding: 14px 12px 16px; }
	.s-hero-notch .s-live { margin-top: 32px; }
}
/* Each window keeps one height through every scene, the tallest scene's at that width
   (measured from 360 to 1920px: the Store and Monitor asks in the app, the new page on the
   site), so nothing under the stage moves while scenes change. */
.s-section.s-hero-notch .s-live .s-app, .s-section.s-hero-notch .s-live .s-site { height: 420px; }
@media (max-width: 1100px) { .s-section.s-hero-notch .s-live .s-app { height: 372px; } }