/*
Theme Name: SERPInsight Blog
Theme URI: https://serpinsight.com/blog
Author: SERPInsight
Author URI: https://serpinsight.com
Description: Production WordPress theme for the SERPInsight blog — dynamic post index, category archives, and a standards-first plugin-compatible article system built on the brand's design system.
Version: 2.1.1
Requires at least: 7.0
Requires PHP: 8.0
Tested up to: 7.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: serpinsight-blog
*/

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('assets/fonts/InterVariable.woff2') format('woff2');
}

/* =========================================================================
   Shared design tokens

   The brand portion of this block mirrors the canonical marketing-site
   contract in /style.css. Blog-only editorial tokens use the --si-* prefix.
   Run design-system-sync.mjs whenever the marketing system changes.
   ========================================================================= */

:root {
	/* Brand */
	--color-brand-lime: #aad200;
	--color-brand-lime-hover: #9bbf00;
	--color-brand-dark: #040520;
	--color-brand-navy: #0c0f38;
	--color-brand-dark-hover: #0c0f38;
	--color-navy-blue: var(--color-brand-navy);

	/* Surfaces */
	--color-surface-page: #ffffff;
	--color-surface-subtle: #f8fafc;
	--color-surface-border: #e2e8f0;
	--color-surface-border-subtle: #f1f5f9;
	--color-border-on-dark: color-mix(in srgb, var(--color-text-on-dark) 8%, transparent);

	/* Text hierarchy */
	--color-text-heading: var(--color-brand-dark);
	--color-text-body: #475569;
	--color-text-muted: #94a3b8;
	--color-text-on-dark: #f8fafc;
	--color-text-on-dark-muted: #94a3b8;
	--color-text-on-lime: var(--color-brand-dark);

	/* Button accent */
	--color-btn-dark-hover: var(--color-brand-dark-hover);

	/* Font */
	--font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;

	/* ---------------------------------------------------------------------
	   DRY design-system scale — one source of truth for the post template.
	   Components reference these tokens, never raw values, so the entire
	   article design can be re-skinned by editing this block alone.
	   --------------------------------------------------------------------- */

	/* Spacing scale */
	--si-space-3xs: 0.25rem;
	--si-space-2xs: 0.5rem;
	--si-space-xs: 0.75rem;
	--si-space-sm: 1rem;
	--si-space-md: 1.5rem;
	--si-space-lg: 2rem;
	--si-space-xl: 3rem;
	--si-space-2xl: 4rem;
	--si-space-3xl: 5.5rem;

	/* Rhythm inside the article column */
	--si-flow-gap: 1.5rem;      /* between body blocks (p, ul, table…) */
	--si-block-gap: 2.75rem;    /* around large in-content components */

	/* Corner radii */
	--si-radius-xs: 0.5rem;
	--si-radius-sm: 0.75rem;
	--si-radius-md: 1rem;
	--si-radius-lg: 1.25rem;
	--si-radius-xl: 1.75rem;
	--si-radius-pill: 999px;

	/* Elevation — soft, brand-tinted shadows instead of hard borders */
	--si-shadow-xs: 0 1px 2px color-mix(in srgb, var(--color-brand-dark) 6%, transparent);
	--si-shadow-sm: 0 4px 14px -6px color-mix(in srgb, var(--color-brand-dark) 12%, transparent);
	--si-shadow-md: 0 12px 32px -12px color-mix(in srgb, var(--color-brand-dark) 16%, transparent);
	--si-shadow-lg: 0 28px 60px -20px color-mix(in srgb, var(--color-brand-dark) 24%, transparent);

	/* Motion */
	--si-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--si-transition: 0.2s var(--si-ease);
	--si-transition-slow: 0.35s var(--si-ease);

	/* Focus ring — consistent, accessible, on-brand */
	--si-focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-brand-lime) 55%, transparent);

	/* Accessible small text on light surfaces (AA at normal text sizes). */
	--si-color-text-secondary: #64748b;
	--si-color-accent-text: #526600;

	/* Article type scale */
	--si-font-body: 1.0625rem;
	--si-font-lead: 1.1875rem;
	--si-font-h2: 1.5rem;
	--si-font-h3: 1.1875rem;
	--si-font-h4: 1rem;
	--si-line-body: 1.8;

	/* Layout */
	--si-header-height: 64px;
	--container-max: 1280px;

	/* Single-post rail.
	   Derived, not guessed: TOC (220) + gap (48) + reading measure (680) = 948.
	   Every band on the article page (breadcrumb, title, cover, sidebar, body)
	   shares this width so left AND right edges line up at every breakpoint. */
	--si-toc-width: 220px;
	--si-post-gap: 3rem;
	--si-measure: 680px;
	--si-rail: calc(var(--si-toc-width) + var(--si-post-gap) + var(--si-measure));

	/* Lime grain texture */
	--si-lime-grain-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	--si-lime-grain-opacity: 0.14;
	--si-lime-grain-size: 140px;
}

/* =========================================================================
   Base / resets
   ========================================================================= */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	/* Anchor jumps (TOC) clear the sticky header instead of hiding under it. */
	scroll-padding-top: calc(var(--si-header-height) + 1.5rem);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--color-surface-page);
	color: var(--color-text-body);
	font-family: var(--font-sans);
	font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

main {
	flex: 1 0 auto;
}

img {
	max-width: 100%;
	height: auto;
}

/* Theme-owned controls use the brand focus ring. Third-party forms and consent
   interfaces keep their own focus treatment instead of inheriting a reset. */
:where(a, button, summary, input, textarea, [tabindex])[class^="si-"]:focus-visible,
:where(a, button, summary, input, textarea, [tabindex])[class*=" si-"]:focus-visible,
:where(.si-header, .si-drawer, .si-footer-bar, .si-blog-comments, .si-blog-newsletter-form, .si-blog-newsletter-cta-form) :where(a, button, summary, input, textarea, [tabindex]):focus-visible {
	outline: none;
	box-shadow: var(--si-focus-ring);
	border-radius: var(--si-radius-xs);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	:where([class^="si-"], [class*=" si-"]),
	:where([class^="si-"], [class*=" si-"])::before,
	:where([class^="si-"], [class*=" si-"])::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

.si-container {
	width: 100%;
	max-width: var(--container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.si-skip-link {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 300;
	background: var(--color-brand-lime);
	color: var(--color-brand-dark);
	padding: 0.75rem 1.25rem;
	border-radius: 0.5rem;
	font-weight: 700;
	text-decoration: none;
	transition: top 0.2s ease;
}

.si-skip-link:focus {
	top: 1rem;
}

/* =========================================================================
   Buttons
   ========================================================================= */

.si-btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	background-color: var(--color-brand-lime);
	color: var(--color-brand-dark);
	font-size: 0.875rem;
	font-weight: 700;
	border-radius: 0.5rem;
	border: 1px solid var(--color-brand-lime);
	transition: all 0.3s ease;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.si-btn-primary:hover {
	background-color: var(--color-surface-page);
	border-color: var(--color-brand-dark);
	color: var(--color-brand-dark);
	transform: translateY(-2px);
}

.si-btn-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	background-color: transparent;
	border: 1px solid #475569;
	color: var(--color-text-on-dark);
	font-size: 0.875rem;
	font-weight: 500;
	border-radius: 0.5rem;
	transition: all 0.3s ease;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.si-btn-ghost:hover {
	background-color: var(--color-brand-navy);
	border-color: #64748b;
	transform: translateY(-2px);
}

.si-btn-sm {
	padding: 0.5rem 1rem;
	font-size: 0.75rem;
}

.si-btn-primary svg,
.si-btn-ghost svg {
	width: 1.05em;
	height: 1.05em;
	flex: 0 0 auto;
}

.si-btn-primary,
.si-btn-ghost,
.si-btn-primary:hover,
.si-btn-ghost:hover,
.si-btn-primary:active,
.si-btn-ghost:active,
.si-btn-primary:focus-visible,
.si-btn-ghost:focus-visible {
	box-shadow: none;
}

/*
 * The marketing-site reset above is mirrored verbatim. This theme also
 * removes browser outlines globally, so blog controls need an explicit,
 * high-contrast focus treatment after that shared reset.
 */
.si-btn-primary:focus-visible,
.si-header-marketplace:focus-visible,
.si-blog-final-cta a:focus-visible,
.si-blog-mobile-bar a:focus-visible {
	outline: 2px solid var(--color-brand-dark);
	outline-offset: 3px;
	box-shadow: 0 0 0 5px var(--color-surface-page);
}

.si-btn-ghost:focus-visible {
	outline: 2px solid var(--color-brand-lime);
	outline-offset: 3px;
	box-shadow: 0 0 0 5px var(--color-brand-dark);
}

/* =========================================================================
   Section surfaces / lime grain
   ========================================================================= */

.si-section-subtle {
	background-color: var(--color-surface-subtle);
	color: var(--color-text-body);
}

.si-lime-grain {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.si-lime-grain::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: var(--si-lime-grain-image);
	background-size: var(--si-lime-grain-size);
	opacity: var(--si-lime-grain-opacity);
	mix-blend-mode: multiply;
	pointer-events: none;
	z-index: 0;
}

.si-lime-grain-layer {
	position: absolute;
	inset: 0;
	background-image: var(--si-lime-grain-image);
	background-size: var(--si-lime-grain-size);
	opacity: var(--si-lime-grain-opacity);
	mix-blend-mode: multiply;
	pointer-events: none;
	z-index: 0;
}

.si-section-lime {
	background-color: var(--color-brand-lime);
	color: var(--color-text-on-lime);
}

.si-section-lime .si-container {
	position: relative;
	z-index: 1;
}

/* =========================================================================
   Header / nav / mobile drawer
   ========================================================================= */

.si-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	height: var(--si-header-height);
	transition: background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease, transform 0.3s ease;
}

.si-header--hidden {
	transform: translateY(-100%);
}

.si-header--transparent {
	background: transparent;
	border-bottom: 1px solid transparent;
}

.si-header--solid {
	background: var(--color-brand-dark);
	border-bottom: 1px solid var(--color-border-on-dark);
	backdrop-filter: blur(12px) saturate(1.4);
}

.si-header-inner {
	max-width: var(--container-max);
	margin: 0 auto;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 1.5rem;
	gap: 1.5rem;
}

.si-header-logo {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-shrink: 0;
	text-decoration: none;
	color: inherit;
	transition: opacity 0.2s ease;
}

.si-header-logo:hover {
	opacity: 0.8;
}

.si-header-logo-mark {
	width: 2.25rem;
	height: 2.25rem;
	border: 2px solid var(--color-brand-lime);
	border-radius: 0.25rem;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 3px;
	padding: 3px;
	flex-shrink: 0;
}

.si-header-logo-bar-short,
.si-header-logo-bar-tall {
	width: 6px;
	background-color: var(--color-brand-lime);
}

.si-header-logo-bar-short {
	height: 12px;
}

.si-header-logo-bar-tall {
	height: 20px;
}

.si-header-logo-wordmark {
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--color-brand-lime);
	white-space: nowrap;
}

.si-header-logo-wordmark span {
	font-weight: 400;
	color: var(--color-text-on-dark);
}

.si-brand-custom-logo {
	display: block;
	width: auto;
	max-height: 2.25rem;
}

.si-header-nav {
	display: none;
	align-items: center;
	justify-content: center;
	flex: 1;
	gap: 1.75rem;
}

.si-nav-list,
.si-drawer-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.si-nav-list {
	display: flex;
	align-items: center;
	gap: 1.75rem;
}

.si-nav-link {
	color: var(--color-text-on-dark-muted);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: color 0.2s ease;
	white-space: nowrap;
}

.si-nav-link:hover {
	color: var(--color-text-on-dark);
}

.si-nav-link--active {
	color: var(--color-brand-lime);
}

.si-header-cta {
	display: none;
	align-items: center;
	gap: 0.75rem;
	flex-shrink: 0;
}

.si-header-signin {
	color: var(--color-text-on-dark-muted);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: color 0.2s ease;
	white-space: nowrap;
}

.si-header-signin:hover {
	color: var(--color-text-on-dark);
}

.si-header-marketplace {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-brand-lime);
	color: var(--color-brand-dark);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 0.5rem 1.25rem;
	border-radius: 9999px;
	text-decoration: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
	white-space: nowrap;
}

.si-header-marketplace:hover {
	opacity: 0.92;
	transform: translateY(-1px);
}

.si-drawer-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
	margin: 0;
	border: none;
	background: transparent;
	color: var(--color-text-on-dark);
	cursor: pointer;
	flex-shrink: 0;
}

.si-drawer-btn > span {
	display: inline-flex;
}

.si-drawer-btn > span[hidden] {
	display: none;
}

.si-drawer-btn svg {
	width: 1.75rem;
	height: 1.75rem;
}

.si-drawer-btn:focus-visible {
	outline: 2px solid var(--color-brand-lime);
	outline-offset: 2px;
	border-radius: 0.25rem;
}

.si-drawer-backdrop {
	position: fixed;
	inset: 0;
	z-index: 90;
	background-color: color-mix(in srgb, #000 60%, transparent);
}

.si-drawer-backdrop[hidden] {
	display: none;
}

.si-drawer {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 95;
	width: 18rem;
	max-width: 80vw;
	height: 100%;
	background-color: var(--color-brand-dark);
	border-left: 1px solid var(--color-border-on-dark);
	transform: translateX(100%);
	transition: transform 0.3s ease;
	overflow-y: auto;
}

.si-drawer--open {
	transform: translateX(0);
}

.si-drawer-inner {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	padding: 5rem 1.5rem 2rem;
}

.si-drawer-nav-link {
	display: block;
	padding: 0.875rem 0;
	color: var(--color-text-on-dark-muted);
	font-size: 1rem;
	font-weight: 500;
	text-decoration: none;
	border-bottom: 1px solid var(--color-border-on-dark);
	transition: color 0.2s ease;
}

.si-drawer-nav-link:hover,
.si-drawer-nav-link.si-nav-link--active {
	color: var(--color-brand-lime);
}

.si-drawer-cta {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: auto;
	padding-top: 2rem;
}

.si-drawer-signin {
	display: block;
	padding: 0.875rem 0;
	color: var(--color-text-on-dark-muted);
	font-size: 0.9375rem;
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	transition: color 0.2s ease;
}

.si-drawer-signin:hover {
	color: var(--color-text-on-dark);
}

.si-drawer-cta .si-header-marketplace {
	width: 100%;
	text-align: center;
}

.si-header-offset {
	padding-top: var(--si-header-height);
}

body.admin-bar .si-header,
body.admin-bar .si-drawer {
	top: 32px;
}

body.admin-bar .si-drawer {
	height: calc(100% - 32px);
}

body.admin-bar .si-blog-progress {
	top: calc(var(--si-header-height) + 32px);
}

/* When the nav hides for an admin, the fixed WP toolbar is still on screen, so
   the progress bar stops just below it (32px) rather than at 0 where the
   toolbar would cover it. */
body.admin-bar.si-header-is-hidden .si-blog-progress {
	top: 32px;
}

body.admin-bar .si-blog-toc {
	top: calc(var(--si-header-height) + 32px + 1.75rem);
}

@media (min-width: 1024px) {
	.si-header-nav {
		display: flex;
	}

	.si-header-cta {
		display: flex;
	}

	.si-drawer-btn {
		display: none;
	}
}

@media (max-width: 782px) {
	body.admin-bar .si-header,
	body.admin-bar .si-drawer {
		top: 46px;
	}

	body.admin-bar .si-drawer {
		height: calc(100% - 46px);
	}

	body.admin-bar .si-blog-progress {
		top: calc(var(--si-header-height) + 46px);
	}

	/* On mobile the WP toolbar is position:absolute and scrolls away with the
	   page, so once the nav is hidden the very top is clear — the bar rides all
	   the way up. */
	body.admin-bar.si-header-is-hidden .si-blog-progress {
		top: 0;
	}

	body.admin-bar .si-blog-toc {
		top: calc(var(--si-header-height) + 46px + 1.75rem);
	}
}

/* =========================================================================
   Footer
   ========================================================================= */

.si-footer {
	margin-top: auto;
	background-color: var(--color-brand-dark);
	color: var(--color-text-on-dark-muted);
	font-size: 0.875rem;
}

.si-footer-logo {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	opacity: 1;
	transition: opacity 0.2s ease;
	text-decoration: none;
}

.si-footer-logo:hover {
	opacity: 0.8;
}

.si-footer-logo-mark {
	width: 2.25rem;
	height: 2.25rem;
	border: 2px solid var(--color-brand-lime);
	border-radius: 0.25rem;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 3px;
	padding: 3px;
	flex-shrink: 0;
}

.si-footer-logo-bar-short {
	width: 6px;
	height: 12px;
	background-color: var(--color-brand-lime);
}

.si-footer-logo-bar-tall {
	width: 6px;
	height: 20px;
	background-color: var(--color-brand-lime);
}

.si-footer-logo-wordmark {
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--color-brand-lime);
}

.si-footer-logo-wordmark span {
	font-weight: 400;
	color: var(--color-text-on-dark);
}

.si-footer-body {
	padding-top: 4rem;
	padding-bottom: 3rem;
}

.si-footer-cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	align-items: start;
}

@media (min-width: 768px) {
	.si-footer-cols {
		grid-template-columns: repeat(3, 1fr);
	}

	.si-footer-col--brand {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1024px) {
	.si-footer-cols {
		grid-template-columns: 2fr 1fr 1fr 1fr;
		gap: 3rem;
	}

	.si-footer-col--brand {
		grid-column: auto;
	}
}

.si-footer-col--brand {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	align-items: flex-start;
	text-align: left;
}

.si-footer-tagline {
	font-size: 0.875rem;
	line-height: 1.7;
	color: var(--color-text-on-dark-muted);
	max-width: 26rem;
	margin: 0;
}

.si-footer-social {
	display: flex;
	gap: 0.75rem;
}

.si-footer-social-icon {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--color-text-on-dark) 10%, transparent);
	border: 1px solid var(--color-border-on-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text-on-dark-muted);
	transition: background-color 0.2s ease, color 0.2s ease;
	text-decoration: none;
}

.si-footer-social-icon:hover {
	background-color: var(--color-brand-lime);
	color: var(--color-brand-dark);
	border-color: var(--color-brand-lime);
}

.si-footer-social-icon svg {
	width: 1rem;
	height: 1rem;
}

.si-footer-col-heading {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--color-text-on-dark);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin: 0 0 1.5rem;
	padding-bottom: 0.875rem;
	border-bottom: 1px solid var(--color-border-on-dark);
	text-align: left;
}

.si-footer-links {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.si-footer-link {
	display: inline-flex;
	align-items: center;
	color: var(--color-text-on-dark-muted);
	font-size: 0.8125rem;
	text-decoration: none;
	transition: color 0.2s ease, transform 0.2s ease;
}

.si-footer-link:hover {
	color: var(--color-text-on-dark);
	transform: translateX(4px);
}

.si-footer-link--accent {
	color: var(--color-brand-lime);
	font-weight: 600;
}

.si-footer-link--accent:hover {
	color: var(--color-text-on-dark);
}

.si-footer-bar {
	padding-top: 1.25rem;
	padding-bottom: 1.25rem;
	border-top: 1px solid var(--color-border-on-dark);
}

.si-footer-bar-inner {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: center;
}

@media (min-width: 768px) {
	.si-footer-bar-inner {
		flex-direction: row;
		justify-content: space-between;
	}

	.si-footer-copy {
		text-align: left;
	}
}

.si-footer-copy {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--color-text-on-dark-muted);
	text-align: center;
}

.si-footer-copy a {
	color: var(--color-brand-lime);
	text-decoration: none;
}

.si-footer-copy a:hover {
	text-decoration: underline;
}

.si-footer-top-btn {
	width: 2rem;
	height: 2rem;
	border-radius: 0.25rem;
	background-color: var(--color-brand-lime);
	color: var(--color-brand-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background-color 0.2s ease;
	text-decoration: none;
}

.si-footer-top-btn:hover {
	background-color: var(--color-brand-lime-hover);
}

.si-footer-top-btn svg {
	width: 1rem;
	height: 1rem;
}

/* =========================================================================
   Blog index / homepage hero + category chips
   ========================================================================= */

.si-blog-hero {
	position: relative;
	background: linear-gradient(180deg, var(--color-brand-dark) 0%, #060a1e 50%, var(--color-brand-dark) 100%);
	color: var(--color-text-on-dark);
	padding: 5rem 1.5rem 3.5rem;
	text-align: center;
	overflow: hidden;
}

.si-blog-hero-inner {
	max-width: 44rem;
}

.si-blog-hero-eyebrow {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-brand-lime);
	opacity: 0.75;
}

.si-blog-hero-title {
	margin: 1rem 0 0.75rem;
	font-size: clamp(2.25rem, 4.5vw, 3.25rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.15;
	color: var(--color-text-on-dark);
}

.si-blog-hero-sub {
	font-size: 1.0625rem;
	color: var(--color-text-on-dark-muted);
	line-height: 1.7;
	max-width: 32rem;
	margin: 0 auto;
}

.si-blog-chips {
	display: flex;
	gap: 0.625rem;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 2rem;
	position: relative;
	z-index: 1;
	padding: 0 1.5rem;
}

.si-chip {
	background: transparent;
	color: var(--color-text-on-dark-muted);
	border: 1px solid var(--color-border-on-dark);
	font-size: 0.8125rem;
	font-weight: 600;
	padding: 0.5rem 1.125rem;
	border-radius: 9999px;
	text-decoration: none;
	transition: all 0.2s ease;
	display: inline-flex;
}

.si-chip:hover {
	border-color: color-mix(in srgb, var(--color-brand-lime) 60%, transparent);
	color: var(--color-text-on-dark);
}

.si-chip.is-active {
	background: var(--color-brand-lime);
	color: var(--color-brand-dark);
	border-color: var(--color-brand-lime);
}

.si-chip--light {
	color: var(--si-color-text-secondary);
	border-color: var(--color-surface-border);
}

.si-chip--light:hover {
	color: var(--color-text-heading);
}

.si-chip--light.is-active {
	color: var(--color-brand-dark);
}

/* =========================================================================
   Featured (sticky) post banner
   ========================================================================= */

.si-blog-featured-wrap {
	background: var(--color-surface-page);
	padding: 3.5rem 1.5rem 1rem;
}

.si-blog-featured {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 0;
	min-height: 320px;
	border: 1px solid var(--color-surface-border);
	border-radius: 1rem;
	overflow: hidden;
	background: var(--color-brand-navy);
	transition: all 0.3s ease;
	text-decoration: none;
}

.si-blog-featured:hover {
	border-color: color-mix(in srgb, var(--color-brand-lime) 50%, transparent);
}

.si-blog-featured-cover {
	position: relative;
	height: 100%;
	min-height: 220px;
	background:
		radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--color-brand-lime) 35%, transparent), transparent 55%),
		var(--color-brand-navy);
}

.si-blog-featured-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.si-blog-featured-body {
	padding: 2.5rem 2.5rem 2.5rem 2rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.si-blog-featured-badge {
	display: inline-flex;
	align-self: flex-start;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: var(--color-brand-lime);
	color: var(--color-text-on-lime);
	padding: 0.375rem 0.75rem;
	border-radius: 0.375rem;
}

.si-blog-featured-title {
	margin: 1rem 0 0.75rem;
	font-size: 1.625rem;
	font-weight: 700;
	color: var(--color-text-on-dark);
	letter-spacing: -0.02em;
	line-height: 1.25;
}

.si-blog-featured-excerpt {
	color: var(--color-text-on-dark-muted);
	font-size: 0.9375rem;
	line-height: 1.6;
	margin: 0 0 1.25rem;
}

.si-blog-featured-meta {
	color: var(--color-text-on-dark-muted);
	font-size: 0.8125rem;
}

/* =========================================================================
   Post grid + card (index, archive, search, related)
   ========================================================================= */

.si-blog-index {
	padding: var(--si-space-xl) var(--si-space-md) var(--si-space-3xl);
}

.si-blog-index-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin: 0 0 var(--si-space-lg);
	flex-wrap: wrap;
	gap: var(--si-space-2xs);
}

.si-blog-index-head h2 {
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--color-text-heading);
	letter-spacing: -0.02em;
	margin: 0;
}

.si-blog-index-count {
	font-size: 0.8125rem;
	color: var(--si-color-text-secondary);
}

.si-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--si-space-lg);
}

.si-blog-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--color-surface-page);
	border: 1px solid color-mix(in srgb, var(--color-brand-navy) 12%, var(--color-surface-border));
	border-radius: var(--si-radius-md);
	overflow: hidden;
	transition: border-color var(--si-transition), transform var(--si-transition), box-shadow var(--si-transition);
	text-decoration: none;
}

.si-blog-card:hover {
	border-color: color-mix(in srgb, var(--color-brand-lime) 55%, transparent);
	transform: translateY(-2px);
	box-shadow: var(--si-shadow-sm);
}

.si-blog-card:hover .si-blog-card-title {
	color: var(--si-color-accent-text);
}

.si-blog-card-cover {
	position: relative;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	flex-shrink: 0;
	background: var(--color-brand-navy);
}

.si-blog-card-cover img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	display: block;
}

.si-blog-card-cover-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: color-mix(in srgb, var(--color-brand-lime) 55%, transparent);
	display: inline-flex;
}

.si-blog-card-cover-icon svg {
	width: 36px;
	height: 36px;
}

.si-blog-card-body {
	padding: var(--si-space-md);
	display: flex;
	flex-direction: column;
	gap: 0;
	flex: 1;
}

.si-blog-card-title {
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--color-text-heading);
	line-height: 1.4;
	letter-spacing: -0.01em;
	margin: 0;
	min-height: calc(1.4em * 2);
	transition: color var(--si-transition);
}

/* Home Latest Articles — branded presentation */
.si-blog-index--home {
	padding-top: var(--si-space-2xl);
	padding-bottom: var(--si-space-3xl);
}

.si-blog-index--home .si-blog-index-head {
	margin-bottom: var(--si-space-xl);
	align-items: center;
}

.si-blog-index--home .si-blog-index-head h2 {
	display: flex;
	align-items: center;
	gap: var(--si-space-xs);
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -0.025em;
}

.si-blog-index--home .si-blog-index-head h2::before {
	content: '';
	display: block;
	width: 3px;
	height: 1.15em;
	border-radius: 2px;
	background: var(--color-brand-lime);
	flex-shrink: 0;
}

.si-blog-index--home .si-blog-index-count {
	font-size: 0.875rem;
	font-weight: 500;
}

.si-blog-index--home .si-blog-grid {
	gap: var(--si-space-xl);
}

.si-blog-empty {
	text-align: center;
	padding: 3rem 1rem;
}

.si-blog-empty h2 {
	color: var(--color-text-heading);
}

.si-blog-pagination {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 2.5rem;
	flex-wrap: wrap;
}

.si-blog-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 0.5rem;
	border-radius: 0.5rem;
	border: 1px solid var(--color-surface-border);
	color: var(--color-text-body);
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
}

.si-blog-pagination .page-numbers.current {
	background: var(--color-brand-dark);
	color: var(--color-brand-lime);
	border-color: var(--color-brand-dark);
}

.si-blog-pagination .page-numbers:hover:not(.current) {
	border-color: color-mix(in srgb, var(--color-brand-lime) 50%, transparent);
}

/* =========================================================================
   Archive / search header
   ========================================================================= */

.si-blog-archive-head {
	background: var(--color-surface-page);
	padding: 3rem 1.5rem 2rem;
	text-align: center;
}

.si-blog-archive-title {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--color-text-heading);
	margin: 0.5rem 0;
}

.si-blog-archive-desc {
	color: var(--color-text-body);
	max-width: 40rem;
	margin: 0 auto;
}

.si-blog-archive-head .si-blog-crumb {
	justify-content: center;
}

/* =========================================================================
   Shared site CTA + blog newsletter banner
   ========================================================================= */

.si-cta {
	position: relative;
	isolation: isolate;
	background-color: var(--color-brand-lime);
	color: var(--color-brand-navy);
	overflow: hidden;
	padding-top: 5rem;
	padding-bottom: 5rem;
}

.si-cta .si-lime-grain-layer {
	opacity: 0.12;
}

.si-cta::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 70%;
	height: 1px;
	background: linear-gradient(
		to right,
		transparent,
		color-mix(in srgb, var(--color-brand-navy) 30%, transparent) 30%,
		color-mix(in srgb, var(--color-brand-navy) 30%, transparent) 70%,
		transparent
	);
	pointer-events: none;
	z-index: 2;
}

.si-cta-inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1.5rem;
	max-width: 52rem;
	width: 100%;
}

.si-cta-eyebrow {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--color-brand-navy) 70%, transparent);
	margin: 0;
}

.si-cta-title {
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: var(--color-brand-dark);
	margin: 0;
}

.si-cta-title-lead {
	color: color-mix(in srgb, var(--color-brand-navy) 48%, transparent);
	font-weight: 600;
}

.si-cta-title-accent {
	display: inline-block;
	color: var(--color-brand-dark);
	font-weight: 700;
}

.si-cta-sub {
	font-size: 1.125rem;
	color: color-mix(in srgb, var(--color-brand-navy) 72%, transparent);
	line-height: 1.65;
	max-width: 42rem;
	margin: 0;
}

.si-cta-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin-top: 0.5rem;
	width: 100%;
	max-width: 38rem;
}

.si-cta-actions .si-btn-primary,
.si-cta-actions .si-btn-ghost {
	text-decoration: none;
}

.si-cta-actions .si-cta-btn-primary {
	background-color: var(--color-brand-dark);
	border: 1px solid var(--color-brand-dark);
	color: var(--color-brand-lime);
	border-radius: 9999px;
	padding: 0.875rem 2rem;
	font-size: 1rem;
	font-weight: 700;
}

.si-cta-actions .si-cta-btn-primary:hover {
	background-color: var(--color-brand-navy);
	border-color: var(--color-brand-navy);
	color: var(--color-brand-lime);
	transform: translateY(-1px);
}

.si-cta-actions .si-cta-btn-ghost {
	background-color: color-mix(in srgb, var(--color-brand-navy) 14%, var(--color-brand-lime));
	border: 1px solid color-mix(in srgb, var(--color-brand-navy) 45%, transparent);
	color: var(--color-brand-navy);
	border-radius: 9999px;
	padding: 0.875rem 2rem;
	font-size: 1rem;
	font-weight: 700;
}

.si-cta-actions .si-cta-btn-ghost:hover {
	background-color: color-mix(in srgb, var(--color-brand-navy) 22%, var(--color-brand-lime));
	border-color: var(--color-brand-navy);
	color: var(--color-brand-navy);
	transform: translateY(-1px);
}

.si-cta-btn-icon {
	width: 1.125rem;
	height: 1.125rem;
	flex-shrink: 0;
}

.si-cta-trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem 1.5rem;
	list-style: none;
	margin: 0.25rem 0 0;
	padding: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	color: color-mix(in srgb, var(--color-brand-navy) 70%, transparent);
}

.si-cta-trust li {
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

.si-cta-trust-check {
	width: 0.875rem;
	height: 0.875rem;
	flex-shrink: 0;
	color: var(--color-brand-dark);
}

@media (max-width: 479px) {
	.si-cta-actions {
		flex-direction: column;
	}

	.si-cta-actions .si-btn-primary,
	.si-cta-actions .si-btn-ghost {
		width: 100%;
		justify-content: center;
	}
}

.si-blog-newsletter-cta {
	padding: 5rem 1.5rem;
	text-align: center;
}

.si-blog-newsletter-cta-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 40rem;
	margin: 0 auto;
}

.si-blog-cta-eyebrow {
	margin: 0 0 0.75rem;
	color: color-mix(in srgb, var(--color-brand-navy) 70%, transparent);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.si-blog-cta-title {
	margin: 0;
	color: var(--color-brand-dark);
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.si-blog-cta-sub {
	max-width: 34rem;
	margin: 1rem 0 2rem;
	color: color-mix(in srgb, var(--color-brand-navy) 72%, transparent);
	font-size: 1rem;
	line-height: 1.65;
}

.si-blog-newsletter-cta-form {
	display: flex;
	gap: 0.75rem;
	justify-content: center;
	align-items: stretch;
	flex-wrap: wrap;
	width: 100%;
}

.si-blog-newsletter-cta-form input {
	flex: 1 1 16rem;
	padding: 0.875rem 1.125rem;
	border-radius: 0.625rem;
	border: 1px solid var(--color-brand-dark);
	min-width: min(16rem, 100%);
	font-size: 0.9375rem;
	font-family: var(--font-sans);
	box-sizing: border-box;
}

.si-blog-newsletter-cta-form button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.875rem 1.5rem;
	background: var(--color-brand-dark);
	color: var(--color-brand-lime);
	font-weight: 700;
	font-size: 0.875rem;
	border-radius: 0.625rem;
	border: none;
	cursor: pointer;
}

.si-blog-newsletter-cta-form input:focus-visible,
.si-blog-newsletter-cta-form button:focus-visible {
	outline: 2px solid var(--color-brand-dark);
	outline-offset: 3px;
	box-shadow: 0 0 0 5px var(--color-surface-page);
}

/* Newsletter status banner + honeypot (shared by both forms) */

.si-blog-newsletter-status {
	font-size: 0.875rem;
	font-weight: 600;
	padding: 0.625rem 1rem;
	border-radius: var(--si-radius-xs);
	margin: 0 auto 1.25rem;
	max-width: 28rem;
}

.si-blog-newsletter-status--success {
	background: color-mix(in srgb, var(--color-brand-dark) 12%, transparent);
	color: var(--color-brand-dark);
}

.si-blog-newsletter-status--error {
	background: rgba(220, 38, 38, 0.12);
	color: #b91c1c;
}

.si-blog-newsletter .si-blog-newsletter-status,
.si-blog-callout .si-blog-newsletter-status {
	margin-left: 0;
	margin-right: 0;
	max-width: 30rem;
}

/* The in-content newsletter card sits on navy, so its status banner flips to
   light-on-dark for contrast. */
.si-blog-newsletter .si-blog-newsletter-status--success {
	background: color-mix(in srgb, var(--color-brand-lime) 20%, transparent);
	color: var(--color-brand-lime);
}

.si-blog-newsletter .si-blog-newsletter-status--error {
	background: rgba(248, 113, 113, 0.18);
	color: #fca5a5;
}

/* --- Newsletter AJAX enhancement: inline feedback + button spinner -------- */
.si-blog-newsletter-feedback {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s var(--si-ease, ease);
}

.si-blog-newsletter-feedback.is-open {
	grid-template-rows: 1fr;
}

.si-blog-newsletter-feedback-track {
	overflow: hidden;
	min-height: 0;
}

.si-blog-newsletter-feedback .si-blog-newsletter-status {
	margin: 0.875rem 0 0;
	max-width: none;
	opacity: 0;
	transform: translateY(-3px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.si-blog-newsletter-feedback.is-open .si-blog-newsletter-status {
	opacity: 1;
	transform: none;
}

.si-blog-newsletter-feedback--cta {
	justify-items: center;
}

.si-blog-newsletter-feedback--cta .si-blog-newsletter-status {
	text-align: center;
	max-width: 30rem;
}

/* Loading: hide the label (so the button keeps its width) and spin a ring. */
.si-blog-newsletter-form.is-loading button,
.si-blog-newsletter-cta-form.is-loading button {
	position: relative;
	color: transparent;
	pointer-events: none;
}

.si-blog-newsletter-form.is-loading button::after,
.si-blog-newsletter-cta-form.is-loading button::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1rem;
	height: 1rem;
	margin: -0.5rem 0 0 -0.5rem;
	border-radius: 50%;
	border: 2px solid transparent;
	animation: si-newsletter-spin 0.6s linear infinite;
}

.si-blog-newsletter-form.is-loading button::after {
	border-color: color-mix(in srgb, var(--color-brand-dark) 30%, transparent);
	border-top-color: var(--color-brand-dark);
}

.si-blog-newsletter-cta-form.is-loading button::after {
	border-color: color-mix(in srgb, var(--color-brand-lime) 40%, transparent);
	border-top-color: var(--color-brand-lime);
}

@keyframes si-newsletter-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Subscribed: gently fade the now-locked form so the success note leads. */
.si-blog-newsletter-form.is-done,
.si-blog-newsletter-cta-form.is-done {
	opacity: 0.5;
	transition: opacity 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
	.si-blog-newsletter-feedback,
	.si-blog-newsletter-feedback .si-blog-newsletter-status {
		transition: none;
	}

	.si-blog-newsletter-form.is-loading button::after,
	.si-blog-newsletter-cta-form.is-loading button::after {
		animation-duration: 1.2s;
	}
}

.si-blog-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* =========================================================================
   Single article
   ========================================================================= */

.si-blog-progress {
	position: sticky;
	top: var(--si-header-height);
	z-index: 80;
	height: 3px;
	background: var(--color-surface-border-subtle);
	/* Rides with the hide-on-scroll header: its transition matches the header's
	   transform (0.3s ease) so the two move as one. */
	transition: top 0.3s ease;
}

/* When the nav has slid away, the progress bar follows it to the very top
   rather than floating below an empty 64px band. */
body.si-header-is-hidden .si-blog-progress {
	top: 0;
}

.si-blog-progress-bar {
	height: 100%;
	background: var(--color-brand-lime);
	width: 0%;
	transition: width 0.1s linear;
}

/* The article opens on a subtle tinted band with a soft lime glow — the hero
   surface the feature image floats up and overlaps, matching the design system.
   The generous bottom padding is the room the cover pulls up into. */
.si-blog-post-header {
	position: relative;
	overflow: hidden;
	background: var(--color-surface-subtle);
	padding: clamp(2.5rem, 5vw, 3.5rem) 1.5rem 7rem;
}

.si-blog-post-header::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 65% 55% at 50% -10%, color-mix(in srgb, var(--color-brand-lime) 12%, transparent), transparent 70%);
	pointer-events: none;
}

.si-blog-post-header-inner {
	position: relative;
	max-width: var(--si-rail);
	margin: 0 auto;
}

/* Headline and byline span the full rail so the header block ends flush with
   the cover below it — no ragged right edge. */

.si-blog-crumb {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--si-color-text-secondary);
	margin-bottom: 1.5rem;
	flex-wrap: wrap;
}

.si-blog-crumb a {
	color: var(--si-color-text-secondary);
	text-decoration: none;
	transition: color var(--si-transition);
}

.si-blog-crumb a:hover,
.si-blog-crumb a:focus-visible {
	color: var(--si-color-accent-text);
	text-decoration: none;
}

.si-blog-crumb-sep,
.si-blog-crumb .separator,
.si-blog-crumb .breadcrumb_last + .separator {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: color-mix(in srgb, var(--si-color-text-secondary) 55%, transparent);
	flex-shrink: 0;
	user-select: none;
	pointer-events: none;
}

.si-blog-crumb-sep-icon {
	width: 0.875rem;
	height: 0.875rem;
	display: block;
}

/* Provider trails often emit " - " or "/" as plain separator text — mute them. */
.si-blog-crumb > span:not([aria-current]):not(.si-blog-crumb-sep):not(.si-blog-crumb-current) {
	color: color-mix(in srgb, var(--si-color-text-secondary) 55%, transparent);
	font-weight: 400;
}

.si-blog-crumb-current,
.si-blog-crumb [aria-current="page"],
.si-blog-crumb .breadcrumb_last,
.si-blog-crumb .last {
	color: var(--color-text-heading);
	font-weight: 500;
	text-decoration: none;
}

.si-blog-badge {
	display: inline-flex;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-brand-dark);
	background: var(--color-brand-lime);
	padding: 0.375rem 0.875rem;
	border-radius: var(--si-radius-pill);
	margin-bottom: 1.125rem;
	text-decoration: none;
	transition: background-color var(--si-transition);
}

.si-blog-badge:hover {
	background-color: var(--color-brand-lime-hover);
	color: var(--color-brand-dark);
}

.si-blog-title {
	font-size: clamp(2rem, 4.5vw, 3rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.12;
	/* Greedy wrap fills each line to the full container width (fewer, longer
	   lines) — `balance`/`pretty` both equalise line lengths and left the
	   headline stranded in a narrow column, wasting the available width. */
	text-wrap: wrap;
	color: var(--color-text-heading);
	margin: 0 0 1.5rem;
}

.si-blog-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--color-surface-border);
}

.si-blog-meta-author {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
}

.si-blog-meta-copy {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	min-width: 0;
}

.si-blog-meta-name {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-text-heading);
	margin: 0;
	line-height: 1.3;
}

.si-blog-meta-name a {
	color: inherit;
	text-decoration: none;
}

.si-blog-meta-name a:hover {
	color: var(--si-color-accent-text);
}

.si-blog-meta-line {
	font-size: 0.8125rem;
	color: var(--si-color-text-secondary);
	margin: 0;
	line-height: 1.4;
}

.si-blog-meta-actions {
	display: flex;
	gap: 0.625rem;
}

.si-blog-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: var(--si-radius-pill);
	background: var(--color-brand-dark);
	color: var(--color-brand-lime);
	font-weight: 700;
	letter-spacing: 0.02em;
}

.si-blog-avatar-photo {
	display: block;
	flex-shrink: 0;
	width: var(--si-avatar-size, 40px);
	height: var(--si-avatar-size, 40px);
	border-radius: var(--si-radius-pill);
	object-fit: cover;
}

.si-blog-action-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.5rem 0.9375rem;
	border: 1px solid var(--color-surface-border);
	border-radius: var(--si-radius-pill);
	background: none;
	color: var(--color-text-body);
	font-size: 0.8125rem;
	font-weight: 600;
	cursor: pointer;
	font-family: var(--font-sans);
	transition: border-color var(--si-transition), color var(--si-transition), background-color var(--si-transition);
}

.si-blog-action-btn svg {
	width: 14px;
	height: 14px;
}

.si-blog-action-btn:hover {
	border-color: color-mix(in srgb, var(--color-brand-lime) 55%, transparent);
	background: color-mix(in srgb, var(--color-brand-lime) 8%, transparent);
	color: var(--color-text-heading);
}

/* The cover rides up over the hero band, so it reads as a card lifting off the
   page rather than a flat strip below the title. */
.si-blog-cover-wrap {
	position: relative;
	z-index: 1;
	padding: 0 1.5rem;
	margin-top: -5rem;
}

.si-blog-cover {
	position: relative;
	max-width: var(--si-rail);
	margin: 0 auto;
	height: clamp(220px, 48vw, 440px);
	border-radius: var(--si-radius-md);
	overflow: hidden;
	border: 1px solid var(--color-surface-border);
	box-shadow: var(--si-shadow-lg);
	background:
		radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--color-brand-lime) 35%, transparent), transparent 55%),
		var(--color-brand-navy);
}

.si-blog-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.si-blog-body {
	padding: clamp(2.5rem, 5vw, 4rem) 1.5rem clamp(2.5rem, 6vw, 4.5rem);
}

/* No feature image: there's nothing to overlap, so the band closes up to a
   normal hero height instead of leaving the big cover gutter empty. */
.si-blog-post--no-cover .si-blog-post-header {
	padding-bottom: clamp(2rem, 3.5vw, 2.75rem);
}

.si-blog-post--no-cover .si-blog-body {
	padding-top: clamp(1.25rem, 3vw, 2rem);
}

.si-blog-layout {
	max-width: var(--si-rail);
	margin: 0 auto;
	display: grid;
	grid-template-columns: var(--si-toc-width) minmax(0, var(--si-measure));
	gap: var(--si-post-gap);
	align-items: start;
}

/* Posts with no H2s render no TOC at any width — collapse the rail to the
   measure so cover, headline and body stay edge-aligned instead of the cover
   overhanging a narrower body. */
.si-blog-post--no-toc {
	--si-rail: var(--si-measure);
}

.si-blog-layout--no-toc {
	grid-template-columns: minmax(0, var(--si-measure));
	justify-content: center;
}

.si-blog-toc {
	position: sticky;
	top: calc(var(--si-header-height) + 1.75rem);
}

.si-blog-toc-label {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--si-color-text-secondary);
	margin-bottom: 1rem;
	padding-left: 1rem;
}

/* A hairline rail runs the length of the list; the active item lights a lime
   segment of it, giving the reader a live "you are here" as they scroll. */
.si-blog-toc-nav {
	display: flex;
	flex-direction: column;
	border-left: 2px solid var(--color-surface-border);
}

.si-blog-toc-nav a {
	position: relative;
	color: var(--si-color-text-secondary);
	font-size: 0.8438rem;
	line-height: 1.45;
	text-decoration: none;
	padding: 0.4375rem 0 0.4375rem 1rem;
	margin-left: -2px;
	border-left: 2px solid transparent;
	transition: color var(--si-transition), border-color var(--si-transition);
}

.si-blog-toc-nav a:hover {
	color: var(--color-text-heading);
}

.si-blog-toc-nav a.is-active {
	color: var(--color-brand-dark);
	font-weight: 600;
	border-left-color: var(--color-brand-lime);
}

.si-blog-toc-promo {
	margin-top: 2rem;
	padding: 1.25rem;
	border-radius: var(--si-radius-sm);
	background: var(--color-brand-dark);
}

.si-blog-toc-promo-title {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--color-text-on-dark);
	margin-bottom: 0.5rem;
}

.si-blog-toc-promo-text {
	font-size: 0.75rem;
	color: var(--color-text-on-dark-muted);
	line-height: 1.5;
	margin: 0 0 0.875rem;
}

.si-blog-toc-promo-cta {
	display: inline-flex;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--color-brand-dark);
	background: var(--color-brand-lime);
	padding: 0.5rem 0.875rem;
	border-radius: var(--si-radius-xs);
	text-decoration: none;
	transition: background-color var(--si-transition);
}

.si-blog-toc-promo-cta:hover {
	background-color: var(--color-brand-lime-hover);
	color: var(--color-brand-dark);
}

.si-blog-article {
	width: 100%;
	max-width: 680px;
	min-width: 0;
	color: var(--color-text-body);
	font-size: var(--si-font-body);
	line-height: var(--si-line-body);
	letter-spacing: -0.003em;
	overflow-wrap: break-word;
	hyphens: none;
}

.si-blog-article > :first-child {
	margin-top: 0;
}

/* Tighten spacing between a heading and the paragraph it introduces so each
   section reads as one connected unit, with generous air before the heading. */
.si-blog-article h2 + *,
.si-blog-article h3 + *,
.si-blog-article h4 + * {
	margin-top: 0;
}

/* Content-safety: anything an editor can paste must never break the column */
.si-blog-article iframe,
.si-blog-article video,
.si-blog-article embed,
.si-blog-article object {
	max-width: 100%;
}

.si-blog-article iframe {
	aspect-ratio: 16 / 9;
	height: auto;
	width: 100%;
	border: 0;
	border-radius: var(--si-radius-sm);
}

/* Theme/plain and core tables scroll without restyling plugin-owned tables. */
.si-blog-article :where(table:not([class]), .wp-block-table table, table.si-blog-compare) {
	display: block;
	width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	margin: var(--si-space-md) 0 var(--si-block-gap);
	font-size: 0.9375rem;
	border: 1px solid var(--color-surface-border);
	border-radius: var(--si-radius-md);
	box-shadow: var(--si-shadow-sm);
	-webkit-overflow-scrolling: touch;
}

/* A plain HTML table has no wrapper, so its row groups become full-width table
   boxes inside the scroll shell. Gutenberg tables keep their native table
   display because `.wp-block-table` already provides the wrapper. */
.si-blog-article > table:not([class]) > :where(thead, tbody, tfoot) {
	display: table;
	width: 100%;
	table-layout: fixed;
}

.si-blog-article :where(table:not([class]), .wp-block-table table, table.si-blog-compare) :where(th, td) {
	padding: 0.875rem 1.25rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--color-surface-border);
	line-height: 1.5;
}

.si-blog-article :where(table:not([class]), .wp-block-table table, table.si-blog-compare) tr:last-child > :where(td, th) {
	border-bottom: none;
}

.si-blog-article :where(table:not([class]), .wp-block-table table, table.si-blog-compare) th {
	background: var(--color-brand-navy);
	color: var(--color-text-on-dark);
	font-weight: 700;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	white-space: nowrap;
}

/* First column carries the row label, so it reads as a heading, not data. */
.si-blog-article :where(table:not([class]), .wp-block-table table, table.si-blog-compare) tbody td:first-child {
	font-weight: 600;
	color: var(--color-text-heading);
}

.si-blog-article :where(table:not([class]), .wp-block-table table, table.si-blog-compare) tbody tr:nth-child(even) {
	background: var(--color-surface-subtle);
}

.si-blog-article :where(table:not([class]), .wp-block-table table, table.si-blog-compare) tbody tr {
	transition: background-color var(--si-transition);
}

.si-blog-article :where(table:not([class]), .wp-block-table table, table.si-blog-compare) tbody tr:hover {
	background: color-mix(in srgb, var(--color-brand-lime) 8%, var(--color-surface-page));
}

.si-blog-article pre {
	overflow-x: auto;
	background: var(--color-surface-subtle);
	border: 1px solid var(--color-surface-border);
	border-radius: 0.75rem;
	padding: 1.25rem;
	font-size: 0.875rem;
	margin: 0 0 1.25rem;
}

.si-blog-article code {
	word-break: break-word;
}

.si-blog-article p {
	margin: 0 0 var(--si-flow-gap);
}

/* The opening line reads larger and darker — an intentional entry point that
   pulls a skimming reader in before the body settles into its normal size. */
.si-blog-article > p:first-of-type {
	font-size: var(--si-font-lead);
	line-height: 1.6;
	color: var(--color-text-heading);
	margin-bottom: 1.75rem;
}

.si-blog-article h2 {
	position: relative;
	font-size: var(--si-font-h2);
	font-weight: 800;
	color: var(--color-text-heading);
	letter-spacing: -0.022em;
	line-height: 1.25;
	margin: var(--si-block-gap) 0 1.25rem;
	scroll-margin-top: calc(var(--si-header-height) + 1.5rem);
}

.si-blog-article > h2:first-of-type {
	margin-top: var(--si-space-lg);
}

/* Section headings carry a bold, rounded lime bar down their left edge — a
   familiar magazine-style accent that makes the article scannable at a glance.
   Component-owned headings (e.g. FAQ titles) opt out via
   data-si-component-heading so only true article sections get the marker. */
.si-blog-article h2:not([data-si-component-heading]) {
	padding-left: 1.125rem;
}

.si-blog-article h2:not([data-si-component-heading])::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.12em;
	bottom: 0.12em;
	width: 0.28rem;
	border-radius: var(--si-radius-pill);
	background: linear-gradient(180deg, var(--color-brand-lime), color-mix(in srgb, var(--color-brand-lime) 45%, transparent));
}

/* Only h2 sections carry the bold left bar. Subsections use a small inline dot
   marker instead — a deliberately different, lighter cue so the eye reads h3 as
   subordinate to an h2 rather than as a peer with a thinner bar. */
.si-blog-article h3 {
	display: flex;
	align-items: baseline;
	gap: 0.625rem;
	font-size: var(--si-font-h3);
	font-weight: 700;
	color: var(--color-text-heading);
	letter-spacing: -0.015em;
	line-height: 1.35;
	margin: var(--si-space-xl) 0 0.875rem;
	scroll-margin-top: calc(var(--si-header-height) + 1.5rem);
}

.si-blog-article h3:not([data-si-component-heading])::before {
	content: "";
	flex: 0 0 auto;
	align-self: center;
	width: 0.4375rem;
	height: 0.4375rem;
	border-radius: var(--si-radius-pill);
	background: var(--color-brand-lime);
}

.si-blog-article h4 {
	font-size: var(--si-font-h4);
	font-weight: 700;
	color: var(--color-text-heading);
	letter-spacing: -0.01em;
	margin: var(--si-space-lg) 0 0.75rem;
}

.si-blog-article ul,
.si-blog-article ol {
	display: grid;
	gap: 0.75rem;
	list-style: none;
	padding-left: 0;
	margin: 0 0 var(--si-flow-gap);
}

.si-blog-article ul li,
.si-blog-article ol li {
	position: relative;
	padding-left: 1.875rem;
	line-height: 1.65;
}

/* Nested lists stay compact and indented rather than resetting to full gaps. */
.si-blog-article li > ul,
.si-blog-article li > ol {
	margin: 0.75rem 0 0;
}

.si-blog-article strong,
.si-blog-article b {
	font-weight: 700;
	color: var(--color-text-heading);
}

.si-blog-article hr {
	height: 1px;
	border: 0;
	margin: var(--si-space-xl) 0;
	background: linear-gradient(90deg, transparent, var(--color-surface-border) 20%, var(--color-surface-border) 80%, transparent);
}

/* Bulleted lists get a tighter, purpose-built indent: a small dot doesn't need
   the numbered badge's column, so the marker reads as attached to its line
   instead of stranded ~20px to its left. */
.si-blog-article ul li {
	padding-left: 1.375rem;
}

.si-blog-article ul li::before {
	content: "";
	position: absolute;
	left: 0.375rem;
	top: 0.62em;
	width: 0.4375rem;
	height: 0.4375rem;
	border-radius: 999px;
	background: var(--color-brand-lime);
}

.si-blog-article ol {
	counter-reset: si-ol;
}

/* Adjacent sibling lists continue numbering if merge ever misses a fragment. */
.si-blog-article ol + ol {
	counter-reset: none;
}

/* Nested ordered lists still restart at 1. */
.si-blog-article li > ol {
	counter-reset: si-ol;
}

.si-blog-article ol li {
	counter-increment: si-ol;
}

.si-blog-article ol li::before {
	content: counter(si-ol);
	position: absolute;
	left: 0;
	top: 0.0625rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.375rem;
	height: 1.375rem;
	border-radius: 999px;
	background: var(--color-surface-subtle);
	border: 1px solid var(--color-surface-border);
	color: var(--color-brand-dark);
	font-size: 0.6875rem;
	font-weight: 700;
}

/* In-post images share the feature image's card language: rounded corners and a
   hairline border rather than a drop shadow, so figures sit cleanly in the
   reading column. */
.si-blog-article img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--si-radius-sm);
	border: 1px solid var(--color-surface-border);
	margin: 0;
}

.si-blog-article figure {
	margin: var(--si-space-lg) 0;
}

.si-blog-article figure img {
	width: 100%;
}

.si-blog-article figcaption {
	margin-top: 0.75rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--si-color-text-secondary);
	text-align: center;
}

.si-blog-article a {
	color: var(--color-brand-dark);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 0.15em;
	text-decoration-color: color-mix(in srgb, var(--color-brand-lime) 55%, transparent);
	transition: color var(--si-transition), text-decoration-color var(--si-transition);
}

.si-blog-article a:hover {
	color: var(--si-color-accent-text);
	text-decoration-color: var(--color-brand-lime);
}

.si-blog-article blockquote {
	position: relative;
	margin: var(--si-space-lg) 0;
	padding: 1.5rem 1.75rem 1.5rem 2.5rem;
	background: var(--color-surface-subtle);
	border-radius: var(--si-radius-sm);
	border-left: 3px solid var(--color-brand-lime);
}

.si-blog-article blockquote::before {
	content: "\201C";
	position: absolute;
	top: 0.35rem;
	left: 0.85rem;
	font-size: 2.25rem;
	line-height: 1;
	font-weight: 800;
	color: color-mix(in srgb, var(--color-brand-lime) 55%, transparent);
}

.si-blog-article blockquote p {
	font-size: var(--si-font-lead);
	font-weight: 600;
	color: var(--color-text-heading);
	line-height: 1.55;
	margin: 0;
}

.si-blog-article blockquote > :last-child {
	margin-bottom: 0;
}

/* =========================================================================
   Complete editorial element system

   WordPress can emit far more than paragraphs, headings and images. These
   rules cover the semantic HTML vocabulary plus the core blocks an editor can
   reasonably place in a post. The editor uses this exact stylesheet, so these
   are not duplicated in an admin-only approximation.
   ========================================================================= */

:is(.si-blog-article, .editor-styles-wrapper) h5,
:is(.si-blog-article, .editor-styles-wrapper) h6 {
	color: var(--color-text-heading);
	font-weight: 700;
	line-height: 1.4;
	margin: var(--si-space-lg) 0 var(--si-space-xs);
}

:is(.si-blog-article, .editor-styles-wrapper) h5 {
	font-size: 0.9375rem;
	letter-spacing: 0.01em;
}

:is(.si-blog-article, .editor-styles-wrapper) h6 {
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

:is(.si-blog-article, .editor-styles-wrapper) :where(em, i) {
	color: color-mix(in srgb, var(--color-text-heading) 82%, var(--color-text-body));
}

:is(.si-blog-article, .editor-styles-wrapper) :where(mark, .has-inline-color) {
	padding: 0.08em 0.22em;
	border-radius: 0.2em;
	background: color-mix(in srgb, var(--color-brand-lime) 28%, var(--color-surface-page));
	color: var(--color-text-heading);
}

/* Header cells whose text was pasted as bold (`<th><strong>…</strong></th>`,
   common from Docs/Word and after header promotion) must let nested text
   carriers inherit the cell's on-dark colour. Uses :is() and sits after the
   article strong/em/mark/link colour rules so equal-or-lower specificity
   cannot paint labels dark-on-navy again. .si-blog-compare keeps its own
   light-header treatment. */
.si-blog-article :where(table:not([class]), .wp-block-table table) th :is(strong, b, a, em, mark, .has-inline-color) {
	color: inherit;
}

:is(.si-blog-article, .editor-styles-wrapper) :where(s, del) {
	color: var(--si-color-text-secondary);
	text-decoration-thickness: 1.5px;
}

:is(.si-blog-article, .editor-styles-wrapper) ins {
	padding-inline: 0.15em;
	background: color-mix(in srgb, var(--color-brand-lime) 16%, transparent);
	color: var(--color-text-heading);
	text-decoration-color: var(--color-brand-lime-hover);
	text-underline-offset: 0.15em;
}

:is(.si-blog-article, .editor-styles-wrapper) :where(abbr[title], acronym[title]) {
	cursor: help;
	text-decoration: underline dotted var(--si-color-text-secondary);
	text-underline-offset: 0.18em;
}

:is(.si-blog-article, .editor-styles-wrapper) :where(sup, sub) {
	position: relative;
	font-size: 0.72em;
	line-height: 0;
	vertical-align: baseline;
}

:is(.si-blog-article, .editor-styles-wrapper) sup {
	top: -0.45em;
}

:is(.si-blog-article, .editor-styles-wrapper) sub {
	bottom: -0.2em;
}

:is(.si-blog-article, .editor-styles-wrapper) :where(kbd, samp, var) {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 0.84em;
}

:is(.si-blog-article, .editor-styles-wrapper) kbd {
	display: inline-block;
	padding: 0.12rem 0.4rem;
	border: 1px solid var(--color-surface-border);
	border-bottom-width: 2px;
	border-radius: 0.35rem;
	background: var(--color-surface-subtle);
	box-shadow: var(--si-shadow-xs);
	color: var(--color-text-heading);
	font-weight: 600;
	white-space: nowrap;
}

:is(.si-blog-article, .editor-styles-wrapper) :not(pre) > code {
	padding: 0.14rem 0.38rem;
	border: 1px solid var(--color-surface-border);
	border-radius: 0.35rem;
	background: var(--color-surface-subtle);
	color: var(--color-brand-navy);
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 0.84em;
	overflow-wrap: anywhere;
}

:is(.si-blog-article, .editor-styles-wrapper) pre {
	position: relative;
	padding: 1.25rem 1.375rem;
	border: 1px solid color-mix(in srgb, var(--color-text-on-dark) 9%, transparent);
	border-radius: var(--si-radius-sm);
	background: var(--color-brand-navy);
	box-shadow: var(--si-shadow-sm);
	color: var(--color-text-on-dark);
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	line-height: 1.65;
	tab-size: 2;
	white-space: pre;
	-webkit-overflow-scrolling: touch;
}

:is(.si-blog-article, .editor-styles-wrapper) pre code {
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: inherit;
	white-space: inherit;
	word-break: normal;
}

:is(.si-blog-article, .editor-styles-wrapper) q {
	color: var(--color-text-heading);
	font-weight: 600;
}

:is(.si-blog-article, .editor-styles-wrapper) cite {
	color: var(--si-color-text-secondary);
	font-size: 0.875rem;
	font-style: normal;
}

:is(.si-blog-article, .editor-styles-wrapper) small {
	color: var(--si-color-text-secondary);
	font-size: 0.8125rem;
	line-height: 1.55;
}

:is(.si-blog-article, .editor-styles-wrapper) address:not(.si-blog-author) {
	margin: 0 0 var(--si-flow-gap);
	padding: 1.125rem 1.25rem;
	border: 1px solid var(--color-surface-border);
	border-radius: var(--si-radius-sm);
	background: var(--color-surface-subtle);
	font-style: normal;
	line-height: 1.65;
}

:is(.si-blog-article, .editor-styles-wrapper) dl {
	display: grid;
	grid-template-columns: minmax(8rem, 0.35fr) minmax(0, 1fr);
	margin: 0 0 var(--si-flow-gap);
	border: 1px solid var(--color-surface-border);
	border-radius: var(--si-radius-sm);
	background: var(--color-surface-page);
	overflow: hidden;
}

:is(.si-blog-article, .editor-styles-wrapper) :where(dt, dd) {
	margin: 0;
	padding: 0.875rem 1rem;
	border-bottom: 1px solid var(--color-surface-border);
}

:is(.si-blog-article, .editor-styles-wrapper) dt {
	background: var(--color-surface-subtle);
	color: var(--color-text-heading);
	font-weight: 700;
}

:is(.si-blog-article, .editor-styles-wrapper) dd:nth-last-child(-n + 2),
:is(.si-blog-article, .editor-styles-wrapper) dt:nth-last-child(-n + 2) {
	border-bottom: 0;
}

:is(.si-blog-article, .editor-styles-wrapper) :where(details:not(.si-blog-faq), .wp-block-details) {
	margin: 0 0 var(--si-space-sm);
	border: 1px solid var(--color-surface-border);
	border-radius: var(--si-radius-sm);
	background: var(--color-surface-page);
	overflow: clip;
}

:is(.si-blog-article, .editor-styles-wrapper) :where(details:not(.si-blog-faq), .wp-block-details) > summary {
	padding: 1rem 1.125rem;
	cursor: pointer;
	color: var(--color-text-heading);
	font-weight: 700;
	line-height: 1.45;
}

:is(.si-blog-article, .editor-styles-wrapper) :where(details:not(.si-blog-faq), .wp-block-details)[open] {
	border-color: color-mix(in srgb, var(--color-brand-lime) 55%, var(--color-surface-border));
	box-shadow: var(--si-shadow-xs);
}

:is(.si-blog-article, .editor-styles-wrapper) :where(details:not(.si-blog-faq), .wp-block-details) > :not(summary) {
	margin-inline: 1.125rem;
}

:is(.si-blog-article, .editor-styles-wrapper) :where(details:not(.si-blog-faq), .wp-block-details) > :last-child {
	margin-bottom: 1.125rem;
}

/* Unclassed editorial forms receive a baseline. Plugin forms carry their own
   classes and therefore retain their plugin-provided layout and controls. */
:is(.si-blog-article, .editor-styles-wrapper) :where(fieldset:not([class]), form:not([class])) {
	min-width: 0;
}

:is(.si-blog-article, .editor-styles-wrapper) :where(form:not([class]), fieldset:not([class])) fieldset:not([class]) {
	margin: 0 0 var(--si-flow-gap);
	padding: 1.25rem;
	border: 1px solid var(--color-surface-border);
	border-radius: var(--si-radius-sm);
}

:is(.si-blog-article, .editor-styles-wrapper) :where(form:not([class]), fieldset:not([class])) :where(legend, label) {
	color: var(--color-text-heading);
	font-size: 0.875rem;
	font-weight: 700;
}

:is(.si-blog-article, .editor-styles-wrapper) :where(form:not([class]), fieldset:not([class])) legend {
	padding-inline: 0.4rem;
}

:is(.si-blog-article, .editor-styles-wrapper) :where(form:not([class]), fieldset:not([class])) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), select, textarea) {
	width: 100%;
	min-height: 2.875rem;
	margin-top: 0.375rem;
	padding: 0.75rem 0.875rem;
	border: 1px solid var(--color-surface-border);
	border-radius: var(--si-radius-xs);
	background: var(--color-surface-page);
	color: var(--color-text-heading);
	font: inherit;
	line-height: 1.4;
	transition: border-color var(--si-transition), box-shadow var(--si-transition);
}

:is(.si-blog-article, .editor-styles-wrapper) :where(form:not([class]), fieldset:not([class])) textarea {
	min-height: 8rem;
	resize: vertical;
}

:is(.si-blog-article, .editor-styles-wrapper) :where(form:not([class]), fieldset:not([class])) :where(input, select, textarea)::placeholder {
	color: var(--color-text-muted);
}

:is(.si-blog-article, .editor-styles-wrapper) :where(form:not([class]), fieldset:not([class])) :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
	outline: 0;
	border-color: var(--color-brand-lime-hover);
	box-shadow: var(--si-focus-ring);
}

:is(.si-blog-article, .editor-styles-wrapper) :where(form:not([class]), fieldset:not([class])) :where(button, input[type="button"], input[type="submit"], input[type="reset"]) {
	min-height: 2.75rem;
	padding: 0.7rem 1.125rem;
	border: 1px solid var(--color-brand-lime);
	border-radius: var(--si-radius-xs);
	background: var(--color-brand-lime);
	color: var(--color-brand-dark);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 700;
	cursor: pointer;
}

:is(.si-blog-article, .editor-styles-wrapper) :where(form:not([class]), fieldset:not([class])) :where(input[type="checkbox"], input[type="radio"]) {
	accent-color: var(--color-brand-lime-hover);
}

:is(.si-blog-article, .editor-styles-wrapper) :where(progress, meter) {
	width: 100%;
	height: 0.75rem;
	accent-color: var(--color-brand-lime-hover);
}

/* Core media blocks */
:is(.si-blog-article, .editor-styles-wrapper) :where(.wp-block-image, .wp-block-video, .wp-block-audio, .wp-block-embed, .wp-block-gallery) {
	margin-block: var(--si-space-lg);
}

:is(.si-blog-article, .editor-styles-wrapper) :where(.wp-block-image, .wp-block-gallery) img {
	border-radius: var(--si-radius-sm);
	border: 1px solid var(--color-surface-border);
}

:is(.si-blog-article, .editor-styles-wrapper) :where(.wp-element-caption, .wp-block-image figcaption, .wp-block-gallery figcaption, .wp-block-video figcaption, .wp-block-audio figcaption, .wp-block-embed figcaption) {
	margin: 0.75rem auto 0;
	color: var(--si-color-text-secondary);
	font-size: 0.8125rem;
	line-height: 1.5;
	text-align: center;
}

:is(.si-blog-article, .editor-styles-wrapper) .wp-block-gallery {
	gap: var(--si-space-xs) !important;
}

:is(.si-blog-article, .editor-styles-wrapper) .wp-block-gallery figure {
	margin: 0;
}

:is(.si-blog-article, .editor-styles-wrapper) :where(audio, .wp-block-audio audio) {
	width: 100%;
}

:is(.si-blog-article, .editor-styles-wrapper) :where(video, .wp-block-video video) {
	width: 100%;
	border-radius: var(--si-radius-sm);
	background: var(--color-brand-dark);
	box-shadow: var(--si-shadow-sm);
}

:is(.si-blog-article, .editor-styles-wrapper) :where(.wp-block-embed__wrapper, .wp-has-aspect-ratio) {
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: var(--si-radius-sm);
}

:is(.si-blog-article, .editor-styles-wrapper) .wp-block-cover {
	min-height: clamp(18rem, 50vw, 30rem);
	margin-block: var(--si-space-lg);
	border-radius: var(--si-radius-md);
	box-shadow: var(--si-shadow-sm);
	overflow: hidden;
}

:is(.si-blog-article, .editor-styles-wrapper) .wp-block-cover .wp-block-cover__inner-container {
	width: min(100%, 34rem);
	padding: clamp(1.5rem, 5vw, 3rem);
	color: var(--color-text-on-dark);
}

/* Layout blocks remain fluid inside the editorial rail. */
:is(.si-blog-article, .editor-styles-wrapper) :where(.wp-block-group, .wp-block-columns, .wp-block-media-text) {
	margin-block: var(--si-space-lg);
}

:is(.si-blog-article, .editor-styles-wrapper) .wp-block-group.has-background {
	padding: clamp(1.25rem, 4vw, 2rem);
	border-radius: var(--si-radius-md);
}

:is(.si-blog-article, .editor-styles-wrapper) .wp-block-columns {
	gap: var(--si-space-md);
}

:is(.si-blog-article, .editor-styles-wrapper) .wp-block-column {
	min-width: 0;
}

:is(.si-blog-article, .editor-styles-wrapper) .wp-block-column.has-background {
	padding: 1.25rem;
	border-radius: var(--si-radius-sm);
}

:is(.si-blog-article, .editor-styles-wrapper) .wp-block-media-text {
	gap: var(--si-space-md);
	border: 1px solid var(--color-surface-border);
	border-radius: var(--si-radius-md);
	background: var(--color-surface-page);
	box-shadow: var(--si-shadow-xs);
	overflow: hidden;
}

:is(.si-blog-article, .editor-styles-wrapper) .wp-block-media-text__content {
	padding: clamp(1.25rem, 4vw, 2rem);
}

:is(.si-blog-article, .editor-styles-wrapper) .wp-block-media-text__media img {
	width: 100%;
	height: 100%;
	border-radius: 0;
	box-shadow: none;
	object-fit: cover;
}

/* Quotes, verse and code */
:is(.si-blog-article, .editor-styles-wrapper) .wp-block-quote cite {
	display: block;
	margin-top: 0.875rem;
}

:is(.si-blog-article, .editor-styles-wrapper) .wp-block-pullquote {
	margin: var(--si-block-gap) 0;
	padding: 2rem clamp(1.5rem, 5vw, 3rem);
	border-top: 3px solid var(--color-brand-lime);
	border-bottom: 3px solid var(--color-brand-lime);
	background: color-mix(in srgb, var(--color-brand-lime) 7%, var(--color-surface-page));
	text-align: center;
}

:is(.si-blog-article, .editor-styles-wrapper) .wp-block-pullquote blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

:is(.si-blog-article, .editor-styles-wrapper) .wp-block-pullquote blockquote::before {
	display: none;
}

:is(.si-blog-article, .editor-styles-wrapper) .wp-block-pullquote p {
	font-size: clamp(1.25rem, 3vw, 1.625rem);
	line-height: 1.45;
}

:is(.si-blog-article, .editor-styles-wrapper) :where(.wp-block-verse, .wp-block-preformatted) {
	padding: 1.25rem 1.375rem;
	border: 1px solid var(--color-surface-border);
	border-radius: var(--si-radius-sm);
	background: var(--color-surface-subtle);
	color: var(--color-text-heading);
	font-family: inherit;
	font-size: 0.9375rem;
	line-height: 1.75;
	white-space: pre-wrap;
}

/* Files, buttons and navigation-like blocks */
:is(.si-blog-article, .editor-styles-wrapper) .wp-block-file {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-block: var(--si-space-lg);
	padding: 1rem 1.125rem;
	border: 1px solid var(--color-surface-border);
	border-radius: var(--si-radius-sm);
	background: var(--color-surface-subtle);
}

:is(.si-blog-article, .editor-styles-wrapper) .wp-block-file > a:first-child {
	overflow-wrap: anywhere;
}

:is(.si-blog-article, .editor-styles-wrapper) :where(.wp-block-file__button, .wp-block-button__link, .wp-element-button) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.7rem 1.25rem;
	border: 1px solid var(--color-brand-lime);
	border-radius: var(--si-radius-xs);
	background: var(--color-brand-lime);
	color: var(--color-brand-dark);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color var(--si-transition), transform var(--si-transition);
}

:is(.si-blog-article, .editor-styles-wrapper) :where(.wp-block-file__button, .wp-block-button__link, .wp-element-button):hover {
	background: var(--color-brand-lime-hover);
	color: var(--color-brand-dark);
	transform: translateY(-1px);
}

:is(.si-blog-article, .editor-styles-wrapper) .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: var(--color-brand-dark);
	background: transparent;
	color: var(--color-brand-dark);
}

:is(.si-blog-article, .editor-styles-wrapper) .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--color-brand-dark);
	color: var(--color-brand-lime);
}

:is(.si-blog-article, .editor-styles-wrapper) .wp-block-buttons {
	gap: 0.75rem;
	margin-block: var(--si-space-lg);
}

:is(.si-blog-article, .editor-styles-wrapper) .wp-block-social-links {
	gap: 0.625rem;
	margin-block: var(--si-space-lg);
	padding: 0;
}

:is(.si-blog-article, .editor-styles-wrapper) .wp-block-social-links li {
	padding: 0;
}

:is(.si-blog-article, .editor-styles-wrapper) .wp-block-social-links li::before {
	display: none;
}

/* Utility, data and collection blocks */
:is(.si-blog-article, .editor-styles-wrapper) :where(.wp-block-separator, hr.wp-block-separator) {
	width: min(100%, 12rem);
	height: 1px;
	margin: var(--si-space-xl) auto;
	border: 0;
	background: linear-gradient(90deg, transparent, var(--color-surface-border) 20%, var(--color-surface-border) 80%, transparent);
	opacity: 1;
}

:is(.si-blog-article, .editor-styles-wrapper) .wp-block-separator.is-style-wide {
	width: 100%;
}

:is(.si-blog-article, .editor-styles-wrapper) .wp-block-separator.is-style-dots {
	width: auto;
	height: auto;
	background: none;
	color: var(--color-brand-lime-hover);
	letter-spacing: 1em;
}

:is(.si-blog-article, .editor-styles-wrapper) .wp-block-table {
	max-width: 100%;
	margin: var(--si-space-md) 0 var(--si-block-gap);
	overflow-x: auto;
	border-radius: var(--si-radius-md);
	box-shadow: var(--si-shadow-sm);
	-webkit-overflow-scrolling: touch;
}

:is(.si-blog-article, .editor-styles-wrapper) .wp-block-table table {
	display: table;
	margin: 0;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
}

:is(.si-blog-article, .editor-styles-wrapper) .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background: var(--color-surface-subtle);
}

:is(.si-blog-article, .editor-styles-wrapper) .wp-block-table figcaption {
	padding-bottom: 0.75rem;
}

:is(.si-blog-article, .editor-styles-wrapper) :where(.wp-block-latest-posts, .wp-block-categories-list, .wp-block-archives-list) {
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--color-surface-border);
	border-radius: var(--si-radius-sm);
	background: var(--color-surface-subtle);
}

:is(.si-blog-article, .editor-styles-wrapper) .wp-block-latest-posts__post-date {
	display: block;
	margin-top: 0.2rem;
	color: var(--si-color-text-secondary);
	font-size: 0.75rem;
}

:is(.si-blog-article, .editor-styles-wrapper) :where(.wp-block-post-template, .wp-block-query-loop) {
	list-style: none;
	padding: 0;
}

:is(.si-blog-article, .editor-styles-wrapper) .wp-block-calendar table {
	display: table;
	table-layout: fixed;
}

:is(.si-blog-article, .editor-styles-wrapper) .wp-block-calendar th,
:is(.si-blog-article, .editor-styles-wrapper) .wp-block-calendar td {
	padding: 0.5rem 0.25rem;
	text-align: center;
}

:is(.si-blog-article, .editor-styles-wrapper) .wp-block-footnotes {
	margin-top: var(--si-space-xl);
	padding-top: var(--si-space-md);
	border-top: 1px solid var(--color-surface-border);
	color: var(--si-color-text-secondary);
	font-size: 0.875rem;
}

:is(.si-blog-article, .editor-styles-wrapper) .has-drop-cap:not(:focus)::first-letter {
	float: left;
	margin: 0.08em 0.12em 0 0;
	color: var(--color-brand-dark);
	font-size: 4em;
	font-weight: 800;
	line-height: 0.8;
}

:is(.si-blog-article, .editor-styles-wrapper) :where(.alignleft, .alignright) {
	max-width: min(50%, 20rem);
	margin-bottom: 1rem;
}

:is(.si-blog-article, .editor-styles-wrapper) .alignleft {
	float: left;
	margin-right: 1.5rem;
}

:is(.si-blog-article, .editor-styles-wrapper) .alignright {
	float: right;
	margin-left: 1.5rem;
}

:is(.si-blog-article, .editor-styles-wrapper) .aligncenter {
	margin-inline: auto;
}

:is(.si-blog-article, .editor-styles-wrapper)::after {
	content: "";
	display: table;
	clear: both;
}

/* --- Inline soft CTA: a low-pressure nudge, not the end-of-article hard ask -- */
.si-blog-callout {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	align-items: center;
	justify-content: space-between;
	margin: var(--si-block-gap) 0;
	padding: 1.5rem 1.75rem;
	border-radius: var(--si-radius-md);
	background: var(--color-surface-subtle);
	border: 1px solid var(--color-surface-border);
	border-left: 3px solid var(--color-brand-lime);
	color: var(--color-text-body);
}

.si-blog-callout p {
	flex: 1 1 15rem;
	font-size: 0.9375rem;
	line-height: 1.55;
	margin: 0;
	color: var(--color-text-body);
}

.si-blog-callout p strong {
	display: block;
	margin-bottom: 0.125rem;
	font-size: 1rem;
	color: var(--color-text-heading);
}

.si-blog-callout .si-btn-primary {
	flex: 0 0 auto;
}

/* --- Newsletter: value-first lead magnet, visually its own moment ----------- */
.si-blog-newsletter {
	position: relative;
	margin: var(--si-block-gap) 0;
	padding: 1.875rem 2rem;
	border-radius: var(--si-radius-lg);
	background: var(--color-brand-navy);
	overflow: hidden;
	color: var(--color-text-on-dark);
}

.si-blog-newsletter::before {
	content: "";
	position: absolute;
	top: -40%;
	right: -10%;
	width: 16rem;
	height: 16rem;
	border-radius: var(--si-radius-pill);
	background: radial-gradient(circle, color-mix(in srgb, var(--color-brand-lime) 22%, transparent), transparent 70%);
	pointer-events: none;
}

.si-blog-newsletter > * {
	position: relative;
}

.si-blog-newsletter p {
	font-size: 0.9375rem;
	color: var(--color-text-on-dark-muted);
	line-height: 1.6;
	margin: 0.375rem 0 1.25rem;
	max-width: 34rem;
}

.si-blog-newsletter p strong {
	display: block;
	margin-bottom: 0.25rem;
	font-size: 1.1875rem;
	font-weight: 700;
	color: var(--color-text-on-dark);
}

.si-blog-newsletter-form {
	display: flex;
	gap: 0.625rem;
	flex-wrap: wrap;
	max-width: 30rem;
}

.si-blog-newsletter-form input {
	flex: 1;
	min-width: 12rem;
	padding: 0.8125rem 1rem;
	border-radius: var(--si-radius-xs);
	border: 1px solid color-mix(in srgb, var(--color-text-on-dark) 16%, transparent);
	background: color-mix(in srgb, var(--color-text-on-dark) 8%, transparent);
	color: var(--color-text-on-dark);
	font-size: 0.9375rem;
	font-family: var(--font-sans);
	box-sizing: border-box;
	transition: border-color var(--si-transition), background-color var(--si-transition);
}

.si-blog-newsletter-form input::placeholder {
	color: var(--color-text-on-dark-muted);
}

.si-blog-newsletter-form input:focus {
	outline: none;
	border-color: var(--color-brand-lime);
	background: color-mix(in srgb, var(--color-text-on-dark) 12%, transparent);
}

.si-blog-newsletter-form button {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.8125rem 1.375rem;
	background: var(--color-brand-lime);
	color: var(--color-brand-dark);
	font-weight: 700;
	font-size: 0.875rem;
	border-radius: var(--si-radius-xs);
	border: none;
	cursor: pointer;
	white-space: nowrap;
	transition: transform var(--si-transition), background-color var(--si-transition);
}

.si-blog-newsletter-form button:hover {
	background: var(--color-brand-lime-hover);
	transform: translateY(-1px);
}

/* --- Note / callout aside -------------------------------------------------- */
.si-blog-note {
	display: flex;
	gap: 0.875rem;
	align-items: flex-start;
	margin: var(--si-space-lg) 0;
	padding: 1.25rem 1.375rem;
	border-radius: var(--si-radius-md);
	background: color-mix(in srgb, var(--color-brand-lime) 7%, var(--color-surface-page));
	border: 1px solid color-mix(in srgb, var(--color-brand-lime) 32%, var(--color-surface-border));
}

.si-blog-note--warning {
	background: #fff9ed;
	border-color: #f6d38a;
}

.si-blog-note--success {
	background: #f3faee;
	border-color: #badc9e;
}

.si-blog-note-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	margin-top: 0.1rem;
	border-radius: var(--si-radius-xs);
	background: color-mix(in srgb, var(--color-brand-lime) 18%, var(--color-surface-page));
	color: var(--si-color-accent-text);
}

.si-blog-note-icon svg {
	width: 1rem;
	height: 1rem;
}

.si-blog-note > div {
	min-width: 0;
	flex: 1;
}

.si-blog-note-title {
	display: block;
	margin-bottom: 0.375rem;
	font-weight: 700;
	color: var(--color-text-heading);
}

.si-blog-note p {
	font-size: 0.9375rem;
	line-height: 1.65;
}

.si-blog-note > div > :last-child {
	margin-bottom: 0;
}

/* --- Feature/vetting cards from the BlogPost reference -------------------- */
.si-blog-content-cards {
	margin: var(--si-space-md) 0 var(--si-block-gap);
}

.si-blog-content-cards-list {
	display: grid !important;
	gap: var(--si-space-sm) !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.si-blog-content-cards-list--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.si-blog-content-cards-list--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.si-blog-content-cards .si-blog-content-card {
	display: flex;
	gap: 0.875rem;
	align-items: flex-start;
	min-width: 0;
	padding: 1.125rem 1.25rem;
	border: 1px solid var(--color-surface-border);
	border-radius: 0.875rem;
	background: var(--color-surface-page);
	box-shadow: var(--si-shadow-xs);
	transition: border-color var(--si-transition), box-shadow var(--si-transition), transform var(--si-transition);
}

.si-blog-content-cards .si-blog-content-card::before {
	display: none;
}

.si-blog-content-cards--vetting .si-blog-content-card {
	display: block;
	padding: 1.25rem;
	background: var(--color-surface-subtle);
	box-shadow: none;
}

.si-blog-content-card:hover {
	border-color: color-mix(in srgb, var(--color-brand-lime) 45%, var(--color-surface-border));
	box-shadow: var(--si-shadow-sm);
	transform: translateY(-2px);
}

.si-blog-content-card-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid color-mix(in srgb, var(--color-brand-lime) 34%, transparent);
	border-radius: var(--si-radius-xs);
	background: color-mix(in srgb, var(--color-brand-lime) 15%, var(--color-surface-page));
	color: var(--si-color-accent-text);
}

.si-blog-content-cards--vetting .si-blog-content-card-icon {
	margin-bottom: 0.75rem;
	background: color-mix(in srgb, var(--color-brand-lime) 20%, var(--color-surface-page));
}

.si-blog-content-card-icon svg {
	width: 1.125rem;
	height: 1.125rem;
}

.si-blog-content-card > div {
	min-width: 0;
}

.si-blog-content-card strong {
	display: block;
	margin-bottom: 0.15rem;
	color: var(--color-text-heading);
	font-size: 0.90625rem;
	font-weight: 700;
	line-height: 1.4;
}

.si-blog-content-card p {
	margin: 0;
	color: var(--color-text-body);
	font-size: 0.8125rem;
	line-height: 1.55;
}

.si-blog-faq {
	margin: 0.875rem 0;
	border: 1px solid var(--color-surface-border);
	border-radius: 0.875rem;
	background: var(--color-surface-page);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.si-blog-faq:hover {
	border-color: color-mix(in srgb, var(--color-brand-lime) 35%, var(--color-surface-border));
}

.si-blog-faq[open] {
	border-color: var(--color-brand-lime);
	box-shadow: 0 1px 2px color-mix(in srgb, var(--color-brand-dark) 4%, transparent);
}

.si-blog-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.125rem 1.375rem;
	cursor: pointer;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.45;
	color: var(--color-text-heading);
	list-style: none;
}

.si-blog-faq summary::-webkit-details-marker {
	display: none;
}

.si-blog-faq-chevron {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.625rem;
	height: 1.625rem;
	border-radius: 999px;
	background: var(--color-surface-subtle);
	color: var(--si-color-text-secondary);
	transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.si-blog-faq-chevron svg {
	width: 0.875rem;
	height: 0.875rem;
}

.si-blog-faq[open] .si-blog-faq-chevron {
	transform: rotate(180deg);
	background: var(--color-brand-lime);
	color: var(--color-brand-dark);
}

.si-blog-faq-answer {
	padding: 0 1.375rem 1.25rem;
}

.si-blog-faq-answer p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--color-text-body);
}

/* --- Semantic comparison matrix ------------------------------------------- */
.si-blog-compare-wrap {
	max-width: 100%;
	margin: var(--si-space-md) 0 var(--si-block-gap);
	border: 1px solid var(--color-surface-border);
	border-radius: var(--si-radius-md);
	background: var(--color-surface-page);
	box-shadow: var(--si-shadow-sm);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.si-blog-article .si-blog-compare,
.editor-styles-wrapper .si-blog-compare {
	display: table;
	width: 100%;
	min-width: 36rem;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	overflow: visible;
}

.si-blog-article .si-blog-compare th,
.si-blog-article .si-blog-compare td,
.editor-styles-wrapper .si-blog-compare th,
.editor-styles-wrapper .si-blog-compare td {
	width: 33.333%;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--color-surface-border);
	background: transparent;
	color: var(--color-text-body);
	font-size: 0.875rem;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.5;
	text-transform: none;
	white-space: normal;
}

.si-blog-article .si-blog-compare thead th,
.editor-styles-wrapper .si-blog-compare thead th {
	background: var(--color-surface-subtle);
	/* Body-strength label colour, not the muted secondary: the muted tone only
	   reached ~4.5:1 on the subtle header fill, which reads as washed-out on
	   small uppercase text. --color-text-body clears AA comfortably (~7:1). */
	color: var(--color-text-body);
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Echo the reference design: the positive column header carries the brand's
   lime-dark accent so the "good" side reads at a glance, still well above AA. */
.si-blog-article .si-blog-compare thead th:nth-child(2),
.editor-styles-wrapper .si-blog-compare thead th:nth-child(2) {
	color: color-mix(in srgb, var(--color-brand-lime-hover) 45%, var(--color-brand-dark));
}

.si-blog-article .si-blog-compare tbody th,
.editor-styles-wrapper .si-blog-compare tbody th {
	color: var(--color-text-heading);
	font-size: 0.90625rem;
	font-weight: 700;
}

.si-blog-article .si-blog-compare tr:last-child > *,
.editor-styles-wrapper .si-blog-compare tr:last-child > * {
	border-bottom: 0;
}

.si-blog-compare-icon {
	display: inline-flex;
	width: 0.95rem;
	height: 0.95rem;
	margin-right: 0.45rem;
	color: var(--si-color-text-secondary);
	vertical-align: -0.16em;
}

.si-blog-compare-icon--good {
	color: var(--si-color-accent-text);
}

/* --- Numbered workflow ----------------------------------------------------- */
.si-blog-steps {
	margin: var(--si-space-md) 0 var(--si-block-gap);
}

.si-blog-article .si-blog-steps ol,
.editor-styles-wrapper .si-blog-steps ol {
	display: grid;
	gap: 1.125rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: si-component-step;
}

.si-blog-article .si-blog-steps li,
.editor-styles-wrapper .si-blog-steps li {
	display: grid;
	grid-template-columns: 1.75rem minmax(0, 1fr);
	gap: 1rem;
	align-items: start;
	padding: 0;
	counter-increment: si-component-step;
}

.si-blog-article .si-blog-steps li::before,
.editor-styles-wrapper .si-blog-steps li::before {
	content: counter(si-component-step);
	position: static;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border: 0;
	border-radius: var(--si-radius-xs);
	background: var(--color-brand-lime);
	box-shadow: 0 4px 12px -6px color-mix(in srgb, var(--color-brand-lime) 70%, transparent);
	color: var(--color-brand-dark);
	font-size: 0.8125rem;
	font-weight: 800;
	line-height: 1;
}

.si-blog-steps li > div {
	min-width: 0;
	padding-top: 0.08rem;
	line-height: 1.65;
}

.si-blog-steps strong {
	color: var(--color-text-heading);
}

.si-blog-steps strong::after {
	content: " ";
}

.si-blog-guarantee {
	display: flex;
	gap: 1rem;
	align-items: center;
	margin: var(--si-space-lg) 0;
	padding: 1.25rem 1.5rem;
	border-radius: var(--si-radius-md);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--color-brand-lime) 7%, var(--color-surface-page)), var(--color-surface-page));
	border: 1px solid color-mix(in srgb, var(--color-brand-lime) 24%, var(--color-surface-border));
}

.si-blog-guarantee-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--si-radius-pill);
	background: var(--color-brand-lime);
	color: var(--color-brand-dark);
	box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--color-brand-lime) 60%, transparent);
}

.si-blog-guarantee-icon svg {
	width: 1.125rem;
	height: 1.125rem;
}

.si-blog-guarantee p {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--color-text-body);
	line-height: 1.55;
}

.si-blog-guarantee strong {
	display: block;
	margin-bottom: 0.0625rem;
	color: var(--color-text-heading);
}

/* End-of-article CTA: the "hard" ask, reached only after the full read. This is
   the one deliberately bold, high-contrast conversion moment on the page. */
.si-blog-final-cta {
	position: relative;
	margin-top: var(--si-block-gap);
	padding: clamp(2rem, 5vw, 2.75rem);
	border-radius: var(--si-radius-lg);
	background:
		radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--color-brand-lime) 22%, transparent), transparent 45%),
		var(--color-brand-navy);
	box-shadow: var(--si-shadow-md);
	text-align: center;
	overflow: hidden;
}

.si-blog-final-cta-title {
	font-size: 1.375rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--color-text-on-dark);
	margin-bottom: 0.5rem;
}

.si-blog-final-cta p {
	font-size: 0.9375rem;
	color: var(--color-text-on-dark-muted);
	line-height: 1.6;
	max-width: 28rem;
	margin: 0 auto 1.5rem;
}

.si-blog-final-cta a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--color-brand-lime);
	color: var(--color-brand-dark);
	font-weight: 700;
	font-size: 0.9375rem;
	padding: 0.875rem 2rem;
	border-radius: var(--si-radius-xs);
	text-decoration: none;
	transition: transform var(--si-transition), background-color var(--si-transition);
}

.si-blog-final-cta a:hover {
	background: var(--color-brand-lime-hover);
	transform: translateY(-2px);
}

.si-blog-author {
	display: flex;
	gap: 0.875rem;
	align-items: center;
	margin-top: var(--si-block-gap);
	margin-bottom: 2rem;
	padding: 1rem 1.25rem;
	border-radius: var(--si-radius-md);
	background: var(--color-surface-subtle);
	border: 1px solid var(--color-surface-border);
	font-style: normal;
	line-height: 1.4;
}

.si-blog-author:has(p),
.si-blog-author:has(.si-blog-author-role) {
	align-items: flex-start;
}

.si-blog-final-cta + .si-blog-author {
	margin-top: 2rem;
}

.si-blog-author + .si-blog-newsletter {
	margin-top: 1.5rem;
	margin-bottom: 0;
}

.si-blog-author:has(+ .si-blog-newsletter) {
	margin-bottom: 0;
}

.si-blog-author-copy {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	flex: 1;
	min-width: 0;
}

.si-blog-author-name {
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--color-text-heading);
	margin: 0;
	line-height: 1.3;
}

.si-blog-author-name a {
	color: inherit;
	text-decoration: none;
}

.si-blog-author-name a:hover {
	color: var(--si-color-accent-text);
}

.si-blog-author-role {
	font-size: 0.8125rem;
	color: var(--si-color-accent-text);
	font-weight: 600;
	margin: 0;
	line-height: 1.4;
}

.si-blog-author p {
	font-size: 0.9375rem;
	color: var(--color-text-body);
	line-height: 1.6;
	margin: 0;
}

/* =========================================================================
   Related posts
   ========================================================================= */

.si-blog-related {
	padding: 1.5rem 1.5rem 5rem;
}

.si-blog-related h2 {
	font-size: 1.375rem;
	font-weight: 800;
	color: var(--color-text-heading);
	letter-spacing: -0.02em;
	margin: 2rem 0 1.75rem;
}

.si-blog-related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
}

/* =========================================================================
   Mobile sticky CTA bar (single article)
   ========================================================================= */

.si-blog-mobile-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	/* Shared drawer/backdrop/header occupy layers 90/95/100. */
	z-index: 80;
	background: var(--color-brand-dark);
	border-top: 1px solid var(--color-border-on-dark);
	box-shadow: 0 -8px 24px -12px color-mix(in srgb, var(--color-brand-dark) 50%, transparent);
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
	transform: translateY(100%);
	transition: transform var(--si-transition-slow);
	box-sizing: border-box;
}

.si-blog-mobile-bar--visible {
	transform: translateY(0);
}

body.si-drawer-is-open .si-blog-mobile-bar {
	transform: translateY(100%);
	pointer-events: none;
}

.si-blog-mobile-bar-text {
	min-width: 0;
	overflow: hidden;
}

.si-blog-mobile-bar-title {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--color-text-on-dark);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.si-blog-mobile-bar-sub {
	font-size: 0.75rem;
	color: var(--color-text-on-dark-muted);
	white-space: nowrap;
}

.si-blog-mobile-bar a {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	background: var(--color-brand-lime);
	color: var(--color-brand-dark);
	font-size: 0.8125rem;
	font-weight: 700;
	padding: 0.625rem 1.125rem;
	border-radius: 0.5rem;
	white-space: nowrap;
	text-decoration: none;
}

/* =========================================================================
   Comments
   ========================================================================= */

.si-blog-comments-wrap {
	padding: clamp(3rem, 6vw, 4.5rem) 1.5rem 4.5rem;
}

/* Any band below the article that must sit on the shared post rail. */
.si-blog-rail {
	max-width: var(--si-rail);
	margin: 0 auto;
}

/* Comments belong to the reading column. Below the TOC breakpoint the rail
   equals the measure so they simply fill it; above it they take the same
   fixed sidebar offset the grid uses, which keeps them locked to the article
   even when the rail is squeezed narrower than its ideal width. */
.si-blog-comments {
	max-width: var(--si-measure);
}

@media (min-width: 996px) {
	.si-blog-comments {
		margin-left: calc(var(--si-toc-width) + var(--si-post-gap));
	}

	/* ...but a post with no TOC has no sidebar to clear, so no offset. */
	.si-blog-post--no-toc .si-blog-comments {
		margin-left: auto;
		margin-right: auto;
	}
}

.si-blog-comments-title {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--color-text-heading);
	margin: 0 0 1.5rem;
}

.si-blog-comment-list {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.si-blog-comment-list .comment-body {
	border: 1px solid var(--color-surface-border);
	border-radius: 0.75rem;
	padding: 1.25rem;
	background: var(--color-surface-page);
	box-shadow: var(--si-shadow-xs);
}

.si-blog-comment-list .comment-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1rem;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}

.si-blog-comment-list .comment-author {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	color: var(--color-text-heading);
	font-size: 0.875rem;
}

.si-blog-comment-list .comment-author .avatar {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	object-fit: cover;
}

.si-blog-comment-list .comment-author .fn,
.si-blog-comment-list .comment-author .fn a {
	color: var(--color-text-heading);
	font-style: normal;
	font-weight: 700;
	text-decoration: none;
}

.si-blog-comment-list .comment-author .says {
	color: var(--si-color-text-secondary);
}

.si-blog-comment-list .comment-metadata {
	margin-left: auto;
	font-size: 0.75rem;
	color: var(--si-color-text-secondary);
}

.si-blog-comment-list .comment-metadata a {
	color: inherit;
	text-decoration: none;
}

.si-blog-comment-list .comment-metadata a:hover {
	color: var(--si-color-accent-text);
}

.si-blog-comment-list .comment-content {
	color: var(--color-text-body);
	font-size: 0.9375rem;
	line-height: 1.7;
}

.si-blog-comment-list .comment-content > :first-child {
	margin-top: 0;
}

.si-blog-comment-list .comment-content > :last-child {
	margin-bottom: 0;
}

.si-blog-comment-list .reply {
	margin-top: 1rem;
}

.si-blog-comment-list .comment-reply-link {
	color: var(--si-color-accent-text);
	font-size: 0.8125rem;
	font-weight: 700;
	text-decoration: none;
}

.si-blog-comment-list .children {
	list-style: none;
	margin: 1rem 0 0 1.5rem;
	padding: 0 0 0 1.25rem;
	border-left: 2px solid var(--color-surface-border);
}

.si-blog-comment-list .children > li + li {
	margin-top: 1rem;
}

.si-blog-comments .comment-respond {
	margin-top: 2rem;
	padding-top: 2rem;
	border-top: 1px solid var(--color-surface-border);
}

.si-blog-comments .comment-reply-title {
	margin: 0 0 0.75rem;
	color: var(--color-text-heading);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.si-blog-comments .comment-reply-title small {
	margin-left: 0.625rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0;
}

.si-blog-comments .comment-reply-title small a,
.si-blog-comments .logged-in-as a {
	color: var(--si-color-accent-text);
}

.si-blog-comments .logged-in-as,
.si-blog-comments .must-log-in,
.si-blog-comments-closed {
	color: var(--si-color-text-secondary);
	font-size: 0.875rem;
	line-height: 1.6;
}

.si-blog-comments .comment-form > p {
	margin-top: 0;
}

.si-blog-comments .comment-form input:not([type="checkbox"]):not([type="submit"]),
.si-blog-comments .comment-form textarea {
	width: 100%;
	padding: 0.75rem 1rem;
	border-radius: 0.5rem;
	border: 1px solid var(--color-surface-border);
	font-family: var(--font-sans);
	font-size: 0.9375rem;
	margin-bottom: 1rem;
	box-sizing: border-box;
}

.si-blog-comments .comment-form textarea {
	min-height: 10rem;
	resize: vertical;
}

.si-blog-comments .comment-form label {
	display: block;
	margin-bottom: 0.375rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-text-heading);
}

.si-blog-comments .comment-notes {
	color: var(--si-color-text-secondary);
	font-size: 0.875rem;
	line-height: 1.6;
}

.si-blog-comments .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	margin: 0.25rem 0 1.5rem;
}

.si-blog-comments .comment-form-cookies-consent input[type="checkbox"] {
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
	margin: 0.2rem 0 0;
	accent-color: var(--color-brand-lime);
}

.si-blog-comments .comment-form-cookies-consent label {
	margin: 0;
	font-weight: 400;
	color: var(--color-text-body);
	line-height: 1.55;
}

.si-blog-comments .form-submit {
	margin: 0;
}

.si-blog-comments .form-submit .si-btn-primary {
	min-width: 10rem;
}

/* =========================================================================
   404
   ========================================================================= */

.si-blog-404 {
	padding: 6rem 1.5rem;
	text-align: center;
}

.si-blog-404 .si-container {
	max-width: 32rem;
}

.si-blog-404 h1 {
	font-size: clamp(1.75rem, 4vw, 2.25rem);
	color: var(--color-text-heading);
	margin: 0.5rem 0 1rem;
}

.si-blog-404 form {
	margin: 1.5rem 0;
}

/* Native get_search_form() markup */
.search-form {
	display: flex;
	gap: 0.625rem;
	flex-wrap: wrap;
	justify-content: center;
	margin: 1.5rem 0;
}

.search-form .search-field {
	flex: 1;
	min-width: 12rem;
	padding: 0.75rem 1rem;
	border-radius: 0.5rem;
	border: 1px solid var(--color-surface-border);
	font-size: 0.9375rem;
	font-family: var(--font-sans);
	box-sizing: border-box;
}

.search-form .search-submit {
	display: inline-flex;
	align-items: center;
	padding: 0.75rem 1.25rem;
	background: var(--color-brand-dark);
	color: var(--color-brand-lime);
	font-weight: 700;
	font-size: 0.8125rem;
	border-radius: 0.5rem;
	border: none;
	cursor: pointer;
}

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

@media (max-width: 1000px) {
	.si-blog-related-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Article page: drop the TOC as soon as the full rail can no longer fit
   (rail 948 + 2x24 gutter = 996), so the reading column is never squeezed
   below its intended measure just to keep a sidebar on screen. */
@media (max-width: 995px) {
	.si-blog-toc {
		display: none;
	}

	/* Single column — collapse the whole rail to the measure so the cover,
	   headline, body, comments and related strip all share one width and one
	   left edge. Set at :root so it also reaches the related-articles section,
	   which sits outside the <article> element. */
	:root {
		--si-rail: var(--si-measure);
	}

	.si-blog-layout {
		grid-template-columns: minmax(0, var(--si-measure));
		gap: 2rem;
	}
}

@media (max-width: 900px) {
	.si-blog-featured {
		grid-template-columns: 1fr;
	}

	.si-blog-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 720px) {
	.si-blog-related-grid {
		grid-template-columns: 1fr;
	}

	.si-blog-content-cards-list--2,
	.si-blog-content-cards-list--3 {
		grid-template-columns: 1fr;
	}

	.si-blog-mobile-bar {
		display: flex;
	}

	/* Reserve room so the fixed CTA bar never covers the last content */
	body.single-post .si-footer-bar-inner {
		padding-bottom: calc(1.25rem + 64px + env(safe-area-inset-bottom));
	}
}

@media (max-width: 640px) {
	.si-blog-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	:is(.si-blog-article, .editor-styles-wrapper) .wp-block-media-text {
		grid-template-columns: 1fr !important;
	}

	:is(.si-blog-article, .editor-styles-wrapper) .wp-block-media-text .wp-block-media-text__media,
	:is(.si-blog-article, .editor-styles-wrapper) .wp-block-media-text .wp-block-media-text__content {
		grid-column: 1;
	}

	:is(.si-blog-article, .editor-styles-wrapper) .wp-block-media-text .wp-block-media-text__media {
		grid-row: 1;
	}

	:is(.si-blog-article, .editor-styles-wrapper) .wp-block-media-text .wp-block-media-text__content {
		grid-row: 2;
	}
}

@media (max-width: 560px) {
	/* Stack byline and share buttons instead of squeezing them side-by-side */
	.si-blog-meta {
		flex-direction: column;
		align-items: flex-start;
	}

	.si-blog-meta-actions {
		width: 100%;
	}

	.si-blog-meta-actions .si-blog-action-btn {
		flex: 1;
		justify-content: center;
		/* Comfortable ~44px touch target for the share/copy controls. */
		min-height: 2.75rem;
	}

	.si-blog-comments-wrap {
		padding-bottom: 2rem;
	}

	.si-blog-cover-wrap {
		padding: 0 1rem;
		/* Smaller band and overlap on phones so the tinted hero stays compact. */
		margin-top: -3.5rem;
	}

	.si-blog-post-header {
		padding-bottom: 5rem;
	}

	.si-blog-body,
	.si-blog-post-header,
	.si-blog-comments-wrap,
	.si-blog-related {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.si-blog-article blockquote {
		padding: 1.25rem 1.25rem;
	}

	.si-blog-callout {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
		padding: 1.25rem 1.375rem;
	}

	.si-blog-callout .si-btn-primary {
		width: 100%;
	}

	.si-blog-callout p {
		flex: 0 1 auto;
		width: 100%;
	}

	.si-blog-newsletter {
		padding: 1.5rem 1.375rem;
	}

	:is(.si-blog-article, .editor-styles-wrapper) dl {
		grid-template-columns: 1fr;
	}

	:is(.si-blog-article, .editor-styles-wrapper) dt,
	:is(.si-blog-article, .editor-styles-wrapper) dd {
		border-bottom: 1px solid var(--color-surface-border);
	}

	:is(.si-blog-article, .editor-styles-wrapper) dd:last-child {
		border-bottom: 0;
	}

	:is(.si-blog-article, .editor-styles-wrapper) :where(.alignleft, .alignright) {
		float: none;
		max-width: 100%;
		margin-inline: 0;
	}

	.si-blog-article .si-blog-compare,
	.editor-styles-wrapper .si-blog-compare {
		display: block;
		min-width: 0;
	}

	.si-blog-compare thead {
		display: none;
	}

	.si-blog-compare tbody,
	.si-blog-compare tr,
	.si-blog-article .si-blog-compare th,
	.si-blog-article .si-blog-compare td,
	.editor-styles-wrapper .si-blog-compare th,
	.editor-styles-wrapper .si-blog-compare td {
		display: block;
		width: 100%;
	}

	.si-blog-compare tr {
		padding: 1rem 1.125rem;
		border-top: 1px solid var(--color-surface-border);
	}

	.si-blog-compare tr:first-child {
		border-top: 0;
	}

	.si-blog-article .si-blog-compare tbody th,
	.si-blog-article .si-blog-compare tbody td,
	.editor-styles-wrapper .si-blog-compare tbody th,
	.editor-styles-wrapper .si-blog-compare tbody td {
		padding: 0;
		border: 0;
	}

	.si-blog-article .si-blog-compare tbody th,
	.editor-styles-wrapper .si-blog-compare tbody th {
		margin-bottom: 0.625rem;
	}

	.si-blog-article .si-blog-compare tbody td,
	.editor-styles-wrapper .si-blog-compare tbody td {
		padding-block: 0.25rem;
	}

	.si-blog-compare td::before {
		content: attr(data-label);
		display: inline-block;
		width: 4.5rem;
		color: var(--si-color-text-secondary);
		font-size: 0.625rem;
		font-weight: 800;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		vertical-align: 0.05em;
	}

	.si-blog-guarantee {
		padding: 1.125rem 1.25rem;
	}

	.si-blog-newsletter-form input {
		min-width: 100%;
	}

	.si-blog-newsletter-form button {
		width: 100%;
		justify-content: center;
	}

	.si-blog-newsletter-cta {
		padding: 4rem 1rem;
	}

	.si-blog-newsletter-cta-form input,
	.si-blog-newsletter-cta-form button {
		width: 100%;
	}

	.si-blog-final-cta {
		padding: 1.75rem 1.375rem;
	}

	.si-blog-author {
		gap: 0.75rem;
		padding: 0.875rem 1rem;
	}

	.si-blog-comment-list .comment-body {
		padding: 1rem;
	}

	.si-blog-comment-list .children {
		margin-left: 0.5rem;
		padding-left: 0.75rem;
	}
}

@media (max-width: 400px) {
	.si-blog-title {
		font-size: 1.625rem;
	}

	.si-blog-mobile-bar-sub {
		display: none;
	}
}

/* Touch devices: every tappable control on the article page clears the 44px
   minimum target size, regardless of viewport width (covers tablets too). */
@media (pointer: coarse) {
	.si-blog-action-btn,
	.si-blog-mobile-bar a,
	.si-blog-newsletter-form button,
	.si-blog-newsletter-form input,
	.si-blog-final-cta a {
		min-height: 44px;
	}

	.si-blog-toc-nav a {
		padding-block: 0.25rem;
	}

	/* iOS Safari zooms the whole page when a focused field is under 16px, which
	   yanks the layout around on every tap into a field. Holding post, comment,
	   and newsletter fields at 16px keeps typing on a phone jump-free. */
	.single-post input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
	.single-post textarea,
	.single-post select {
		font-size: 16px;
	}
}

/* =========================================================================
   Generic pages and plugin-owned singular content
   ========================================================================= */

.si-generic-singular {
	padding: clamp(3rem, 7vw, 6rem) 1.5rem;
	background: var(--color-surface-page);
}

.si-generic-singular-inner {
	max-width: var(--si-wide);
}

.si-generic-entry {
	min-width: 0;
}

.si-generic-entry-header,
.si-generic-entry-cover,
.si-generic-entry-content,
.si-generic-singular > .si-container > .si-blog-comments {
	width: min(100%, var(--si-measure));
	margin-inline: auto;
}

.si-generic-entry-header {
	margin-bottom: 2rem;
}

.si-generic-entry-title {
	margin: 0;
	font-size: clamp(2rem, 5vw, 3rem);
}

.si-generic-entry-cover {
	margin-bottom: 2rem;
}

.si-generic-entry-cover img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--si-radius-lg);
}

.si-generic-entry-content {
	min-width: 0;
}

.si-generic-entry-content::after {
	display: table;
	clear: both;
	content: "";
}

.si-generic-entry-content > :first-child {
	margin-top: 0;
}

.si-generic-entry-content > :last-child {
	margin-bottom: 0;
}