/* VoltRoute — main stylesheet (mobile-first). Design tokens first; every colour comes from them. */

/* ---------- 1. Tokens ---------- */
:root {
	--sn-page: #f4f4f5;
	--sn-bg: #ffffff;
	--sn-surface: #f4f4f5;
	--sn-surface-2: #e9e9ec;
	--sn-border: #e4e4e7;
	--sn-line: #cfcfd5;
	--sn-border-strong: #8b8b95;
	--sn-text: #18181b;
	--sn-text-2: #3f3f46;
	--sn-muted: #63636c;
	--sn-accent: #087e57;
	--sn-accent-hover: #066547;
	--sn-accent-soft: #dcfce9;
	--sn-on-accent: #ffffff;
	--sn-highlight: #f59e0b;
	--sn-highlight-soft: #fef3c7;
	--sn-on-highlight: #451a03;
	--sn-success: #15803d;
	--sn-success-soft: #e7f6ec;
	--sn-danger: #b91c1c;
	--sn-danger-soft: #fdeceb;
	--sn-warning: #b45309;
	--sn-warning-soft: #fef3e2;
	--sn-whatsapp: #15803d;
	/* Ink: the charcoal header, footer and bands. */
	--sn-ink: #1f2328;
	--sn-ink-2: #2a2f36;
	--sn-ink-border: #3a4049;
	--sn-ink-text: #f1f2f4;
	--sn-ink-muted: #a8afb9;
	--sn-ink-accent: #8becc4;
	--sn-deep: #0c4534;

	--sn-font-display: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--sn-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--sn-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--sn-container: 1200px;
	--sn-gutter: 16px;
	--sn-radius-sm: 6px;
	--sn-radius: 8px;
	--sn-radius-lg: 12px;
	--sn-shadow: 0 1px 2px rgba(24, 24, 27, 0.06), 0 6px 18px rgba(24, 24, 27, 0.08);
	--sn-header-offset: 0px;
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--sn-page: #0f1115;
		--sn-bg: #171a1f;
		--sn-surface: #1d2127;
		--sn-surface-2: #252a31;
		--sn-border: #2c3138;
		--sn-line: #3b414a;
		--sn-border-strong: #6f7682;
		--sn-text: #eceef1;
		--sn-text-2: #c5c9d0;
		--sn-muted: #9aa1ac;
		--sn-accent: #52dfad;
		--sn-accent-hover: #8becc4;
		--sn-accent-soft: #0b3327;
		--sn-on-accent: #06281e;
		--sn-highlight: #fbbf24;
		--sn-highlight-soft: #2d2106;
		--sn-on-highlight: #1c1203;
		--sn-success: #4ade80;
		--sn-success-soft: #0f2a1a;
		--sn-danger: #f87171;
		--sn-danger-soft: #2b1212;
		--sn-warning: #fbbf24;
		--sn-warning-soft: #2a1e08;
		--sn-whatsapp: #15803d;
		--sn-ink: #0b0d10;
		--sn-ink-2: #171a1f;
		--sn-ink-border: #2c3138;
		--sn-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 18px rgba(0, 0, 0, 0.4);
		color-scheme: dark;
	}
}

:root[data-theme="dark"] {
	--sn-page: #0f1115;
	--sn-bg: #171a1f;
	--sn-surface: #1d2127;
	--sn-surface-2: #252a31;
	--sn-border: #2c3138;
	--sn-line: #3b414a;
	--sn-border-strong: #6f7682;
	--sn-text: #eceef1;
	--sn-text-2: #c5c9d0;
	--sn-muted: #9aa1ac;
	--sn-accent: #52dfad;
	--sn-accent-hover: #8becc4;
	--sn-accent-soft: #0b3327;
	--sn-on-accent: #06281e;
	--sn-highlight: #fbbf24;
	--sn-highlight-soft: #2d2106;
	--sn-on-highlight: #1c1203;
	--sn-success: #4ade80;
	--sn-success-soft: #0f2a1a;
	--sn-danger: #f87171;
	--sn-danger-soft: #2b1212;
	--sn-warning: #fbbf24;
	--sn-warning-soft: #2a1e08;
	--sn-whatsapp: #15803d;
	--sn-ink: #0b0d10;
	--sn-ink-2: #171a1f;
	--sn-ink-border: #2c3138;
	--sn-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 18px rgba(0, 0, 0, 0.4);
	color-scheme: dark;
}

@media (min-width: 768px) {
	:root { --sn-gutter: 24px; }
}

/* ---------- 2. Base + GeneratePress resets ---------- */
html { scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body {
	background: var(--sn-page);
	color: var(--sn-text);
	font-family: var(--sn-font-body);
	font-size: 16px;
	line-height: 1.55;
	font-variant-numeric: tabular-nums;
	-webkit-font-smoothing: antialiased;
}
a { color: var(--sn-accent); text-underline-offset: 3px; }
a:hover, a:focus { color: var(--sn-accent-hover); }
:focus-visible { outline: 2px solid var(--sn-accent); outline-offset: 2px; }
h1, h2, h3, h4, h5, h6 { font-family: var(--sn-font-display); color: var(--sn-text); letter-spacing: -0.015em; text-wrap: balance; }
img { max-width: 100%; height: auto; }
.site.grid-container { max-width: none; padding: 0; }
.site-content { display: block; }
.sn-main { min-height: 50vh; }

/* ---------- 3. Layout ---------- */
.sn-container { width: 100%; max-width: var(--sn-container); margin-inline: auto; padding-inline: var(--sn-gutter); box-sizing: border-box; }
.sn-section { padding-block: 36px 4px; }
.sn-section--tight { padding-block: 24px 48px; }
.sn-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.sn-section__title { margin: 0; font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.65rem); font-weight: 800; }
.sn-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.sn-grid__full { grid-column: 1 / -1; }
@media (min-width: 560px) {
	.sn-grid--3, .sn-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
	.sn-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sn-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
	.sn-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.sn-stack { display: grid; gap: 12px; }
.sn-muted { color: var(--sn-muted); }
.sn-only-mobile { display: inline-grid; }
@media (min-width: 900px) { .sn-only-mobile, button.sn-only-mobile, .sn-icon-btn.sn-only-mobile { display: none; } }

/* ---------- 4. Small components ---------- */
.sn-btn,
a.sn-btn,
button.sn-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 48px; padding: 0 22px; border: 0; border-radius: 12px;
	background: var(--sn-accent); color: var(--sn-on-accent);
	font-family: var(--sn-font-display); font-weight: 700; font-size: 15px; line-height: 1;
	text-decoration: none; cursor: pointer;
}
.sn-btn:hover, .sn-btn:focus { background: var(--sn-accent-hover); color: var(--sn-on-accent); }
.sn-btn--ghost, a.sn-btn--ghost { background: var(--sn-bg); color: var(--sn-text); border: 1px solid var(--sn-line); }
.sn-btn--ghost:hover, .sn-btn--ghost:focus { background: var(--sn-surface); color: var(--sn-text); }
.sn-btn--whatsapp, a.sn-btn--whatsapp { background: var(--sn-whatsapp); color: #ffffff; }
.sn-btn--whatsapp:hover, .sn-btn--whatsapp:focus { background: #116b33; color: #ffffff; }

.sn-icon-btn,
button.sn-icon-btn {
	display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
	border: 0; border-radius: 10px; background: transparent; color: var(--sn-text); cursor: pointer;
}
.sn-icon-btn:hover, .sn-icon-btn:focus { background: var(--sn-surface); color: var(--sn-text); }

.sn-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sn-chip,
a.sn-chip,
button.sn-chip {
	display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px;
	border: 1px solid var(--sn-border); border-radius: 999px; background: var(--sn-bg);
	color: var(--sn-text-2); font: 600 14px/1 var(--sn-font-body); text-decoration: none; cursor: pointer;
}
.sn-chip:hover, .sn-chip:focus { background: var(--sn-surface); color: var(--sn-text); border-color: var(--sn-line); }

.sn-badge {
	display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 999px;
	background: var(--sn-accent-soft); color: var(--sn-accent);
	font: 700 11px/1.2 var(--sn-font-body); letter-spacing: 0.04em; text-transform: uppercase;
}
.sn-badge--how-to { background: var(--sn-warning-soft); color: var(--sn-warning); }
.sn-badge--comparison, .sn-badge--news { background: var(--sn-ink); color: #ffffff; }
.sn-badge--review { background: var(--sn-success-soft); color: var(--sn-success); }

.sn-eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 700 12px/1.3 var(--sn-font-body); letter-spacing: 0.07em; text-transform: uppercase; color: var(--sn-accent); }
.sn-eyebrow--warn { color: var(--sn-warning); }
.sn-eyebrow--ink { color: var(--sn-ink-accent); }

.sn-link-more { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; }

.sn-proof { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font: 700 12px/1.3 var(--sn-font-body); }
.sn-proof--tested { background: var(--sn-success-soft); color: var(--sn-success); }
.sn-proof--research { background: var(--sn-surface-2); color: var(--sn-text-2); }

.sn-avatar { display: inline-block; flex: none; border-radius: 50%; object-fit: cover; vertical-align: middle; }
.sn-avatar--initials { display: inline-grid; place-items: center; background: var(--sn-text); color: var(--sn-bg); font-family: var(--sn-font-display); font-weight: 800; }

/* ---------- 5. Header ---------- */
.sn-header { position: sticky; top: var(--sn-header-offset); z-index: 60; background: var(--sn-bg); border-bottom: 1px solid var(--sn-border); }
.admin-bar .sn-header { --sn-header-offset: 32px; }
@media (max-width: 782px) { .admin-bar .sn-header { --sn-header-offset: 46px; } }
@media (max-width: 600px) { .admin-bar .sn-header { --sn-header-offset: 0px; } }
.sn-header__bar { display: flex; align-items: center; gap: 12px; min-height: 60px; }
.sn-header__search { display: none; flex: 1 1 auto; }
.sn-header__actions { display: flex; align-items: center; gap: 2px; margin-left: auto; }
@media (min-width: 900px) {
	.sn-header__bar { gap: 24px; min-height: 72px; }
	.sn-header__search { display: block; max-width: 640px; }
	.sn-header__actions { margin-left: auto; }
}

.sn-logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; flex: none; }
.sn-logo:hover, .sn-logo:focus { text-decoration: none; }
.sn-logo__mark { display: block; width: 34px; height: 34px; flex: none; }
.sn-logo__mark img { display: block; width: 100%; height: 100%; }
.sn-logo__word { font: 800 20px/1 var(--sn-font-display); letter-spacing: -0.02em; color: var(--sn-text); }
.sn-logo__b { color: var(--sn-accent); }
@media (min-width: 900px) {
	.sn-logo__mark { width: 38px; height: 38px; }
	.sn-logo__word { font-size: 22px; }
}

.sn-search { position: relative; display: flex; align-items: center; margin: 0; }
.sn-search__icon { position: absolute; left: 14px; color: var(--sn-muted); pointer-events: none; }
.sn-search input[type="search"] {
	width: 100%; height: 48px; margin: 0; padding: 0 16px 0 42px; box-sizing: border-box;
	border: 1px solid var(--sn-border); border-radius: 12px; background: var(--sn-surface);
	color: var(--sn-text); font: 15px/1 var(--sn-font-body);
}
.sn-search input[type="search"]::placeholder { color: var(--sn-muted); }
.sn-search input[type="search"]:focus { border-color: var(--sn-accent); background: var(--sn-bg); outline: 2px solid var(--sn-accent-soft); outline-offset: 0; }

.sn-theme-toggle__sun { display: none; }
:root[data-theme="dark"] .sn-theme-toggle__sun { display: block; }
:root[data-theme="dark"] .sn-theme-toggle__moon { display: none; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .sn-theme-toggle__sun { display: block; }
	:root:not([data-theme="light"]) .sn-theme-toggle__moon { display: none; }
}

.sn-catbar { border-top: 1px solid var(--sn-border); }
.sn-catbar__list { display: flex; gap: 4px; margin: 0; padding: 6px 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.sn-catbar__list::-webkit-scrollbar { display: none; }
.sn-catbar__list li { flex: none; margin: 0; }
.sn-catbar__list a { display: flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 8px; color: var(--sn-text-2); font: 600 14px/1 var(--sn-font-body); text-decoration: none; white-space: nowrap; }
.sn-catbar__list a:hover, .sn-catbar__list a:focus, .sn-catbar__list .current-menu-item > a { background: var(--sn-surface); color: var(--sn-text); }

/* ---------- 6. Dialogs ---------- */
.sn-dialog { border: 0; padding: 0; max-width: none; max-height: none; background: var(--sn-bg); color: var(--sn-text); box-shadow: var(--sn-shadow); }
.sn-dialog::backdrop { background: rgba(11, 13, 18, 0.55); }
.sn-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--sn-border); }
.sn-dialog--drawer { margin: 0 0 0 auto; width: min(88vw, 360px); height: 100%; overflow-y: auto; }
.sn-dialog--search { margin: 0 auto auto; width: 100%; }
.sn-dialog--search .sn-search { flex: 1; }
.sn-drawer__list { margin: 0; padding: 8px; list-style: none; }
.sn-drawer__list a { display: flex; align-items: center; min-height: 48px; padding: 0 12px; border-radius: 10px; color: var(--sn-text); font: 700 16px/1.2 var(--sn-font-display); text-decoration: none; }
.sn-drawer__list a:hover, .sn-drawer__list a:focus { background: var(--sn-surface); }
.sn-drawer__list--small { border-top: 1px solid var(--sn-border); }
.sn-drawer__list--small a { font: 500 15px/1.2 var(--sn-font-body); color: var(--sn-text-2); min-height: 44px; }

/* ---------- 7. Cards ---------- */
.sn-card { position: relative; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--sn-border); border-radius: var(--sn-radius); background: var(--sn-bg); overflow: hidden; }
.sn-card__media { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--sn-surface); overflow: hidden; }
/* contain, not cover: square and wide featured images show whole, never cropped. */
.sn-card__img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sn-card__placeholder { display: grid; place-items: center; width: 100%; height: 100%; color: var(--sn-accent); background: var(--sn-accent-soft); }
.sn-card__media .sn-badge { position: absolute; top: 10px; left: 10px; }
.sn-card__body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 14px 16px 16px; }
/* At most two lines; a longer title ends with "...". */
.sn-card__title { display: -webkit-box; overflow: hidden; margin: 0; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; font-size: 17px; font-weight: 700; line-height: 1.3; text-wrap: pretty; }
.sn-card__title a { color: var(--sn-text); text-decoration: none; }
.sn-card__title a::after { content: ""; position: absolute; inset: 0; }
.sn-card__title a:hover, .sn-card__title a:focus { color: var(--sn-accent); }
.sn-card__excerpt { margin: 0; color: var(--sn-text-2); font-size: 14px; }
.sn-card__meta { display: flex; gap: 6px; margin: auto 0 0; padding-top: 4px; color: var(--sn-muted); font-size: 13px; }
.sn-card:hover { border-color: var(--sn-line); box-shadow: var(--sn-shadow); }
.sn-card:focus-within { outline: 2px solid var(--sn-accent); outline-offset: 2px; }
.sn-card__title a:focus-visible { outline: none; }

/* Phones: listing cards become compact rows (thumbnail left), like a shop listing. */
@media (max-width: 559px) {
	.sn-grid--3 .sn-card, .sn-grid--4 .sn-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); }
	.sn-grid--3 .sn-card__media, .sn-grid--4 .sn-card__media { aspect-ratio: auto; height: 100%; min-height: 96px; }
	.sn-grid--3 .sn-card__placeholder .sn-icon, .sn-grid--4 .sn-card__placeholder .sn-icon { width: 28px; height: 28px; }
	.sn-grid--3 .sn-card__media .sn-badge, .sn-grid--4 .sn-card__media .sn-badge { top: 6px; left: 6px; padding: 3px 6px; font-size: 9px; }
	.sn-grid--3 .sn-card__body, .sn-grid--4 .sn-card__body { padding: 10px 12px; }
	.sn-grid--3 .sn-card__title, .sn-grid--4 .sn-card__title { font-size: 15px; }
	.sn-grid { gap: 10px; }
}
.sn-card--row { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: stretch; }
.sn-card--row .sn-card__media { aspect-ratio: auto; height: 100%; min-height: 90px; }
.sn-card--row .sn-card__media .sn-badge { display: none; }
.sn-card--row .sn-card__body { padding: 12px 14px; }
.sn-card--row .sn-card__title { font-size: 16px; }

/* ---------- 8. Homepage ---------- */
/* Modern Image Formats wraps images in <picture>; let the <img> fill the box directly. */
.sn-card__media picture, .sn-article__image picture { display: contents; }

/* Brand hero: headline, search and shortcuts on the left, a phone mock-up on the right. */
.sn-hero-band { position: relative; overflow: hidden; background: radial-gradient(circle at 85% 35%, rgba(190, 18, 60, 0.38), transparent 46%), radial-gradient(circle at 8% 110%, rgba(245, 158, 11, 0.12), transparent 40%), var(--sn-ink); color: var(--sn-ink-text); }
.sn-hero { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 40px; padding-block: 40px 48px; }
@media (min-width: 960px) { .sn-hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 56px; padding-block: 64px 72px; } }
.sn-hero__text { min-width: 0; }
.sn-hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: var(--sn-ink-accent); font: 600 13px/1.2 var(--sn-font-body); }
.sn-hero__title { margin: 0; color: #ffffff; font-size: clamp(2.1rem, 1.45rem + 2.8vw, 3.6rem); font-weight: 800; line-height: 1.06; letter-spacing: -0.03em; }
.sn-hero__title span { display: block; color: var(--sn-ink-accent); }
.sn-hero__lead { max-width: 56ch; margin: 18px 0 0; color: #c9ced6; font-size: 17px; line-height: 1.6; }
@media (min-width: 768px) { .sn-hero__lead { font-size: 18px; } }

.sn-hero__search { position: relative; display: flex; align-items: center; gap: 8px; max-width: 600px; margin: 28px 0 0; padding: 6px; border-radius: 12px; background: #ffffff; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); }
.sn-hero__search-icon { position: absolute; left: 18px; color: #63636c; pointer-events: none; }
.sn-hero__search input[type="search"] { flex: 1; min-width: 0; height: 48px; margin: 0; padding: 0 12px 0 42px; border: 0; border-radius: 8px; background: transparent; color: #18181b; font: 16px/1 var(--sn-font-body); }
.sn-hero__search input[type="search"]::placeholder { color: #71717a; }
.sn-hero__search input[type="search"]:focus { outline: none; }
.sn-hero__search:focus-within { box-shadow: 0 0 0 3px rgba(253, 164, 175, 0.55), 0 12px 32px rgba(0, 0, 0, 0.35); }
.sn-hero__search .sn-btn { flex: none; min-height: 48px; padding: 0 22px; background: var(--sn-accent); color: #ffffff; }
.sn-hero__search .sn-btn:hover, .sn-hero__search .sn-btn:focus { background: #066547; color: #ffffff; }
@media (max-width: 479px) {
	.sn-hero__search .sn-btn { padding: 0 14px; }
	.sn-hero__search input[type="search"] { font-size: 15px; }
}

.sn-hero__popular { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 18px; }
.sn-hero__popular-label { color: var(--sn-ink-muted); font-size: 14px; }
.sn-hero__popular ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sn-hero__popular li { margin: 0; }
.sn-hero__chip { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; color: #ffffff; font: 600 13px/1 var(--sn-font-body); text-decoration: none; }
.sn-hero__chip:hover, .sn-hero__chip:focus { border-color: var(--sn-accent); background: var(--sn-accent); color: #ffffff; }

.sn-hero__trust { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 30px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.1); list-style: none; }
.sn-hero__trust li { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: #e4e6ea; font-size: 14px; font-weight: 600; }
.sn-hero__trust .sn-icon { color: var(--sn-highlight); }

/* Phone mock-up (decorative). */
.sn-hero__art { position: relative; display: none; justify-self: center; width: 300px; height: 520px; }
@media (min-width: 960px) { .sn-hero__art { display: block; } }
.sn-hero__phone { position: absolute; inset: 0 20px; padding: 12px; border: 1px solid #3a4049; border-radius: 44px; background: #0b0d10; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), inset 0 0 0 2px #2a2f36; transform: rotate(4deg); }
.sn-hero__notch { position: absolute; top: 22px; left: 50%; width: 70px; height: 18px; border-radius: 10px; background: #0b0d10; transform: translateX(-50%); z-index: 1; }
.sn-hero__screen { height: 100%; box-sizing: border-box; padding: 54px 18px 18px; border-radius: 34px; background: #ffffff; color: #18181b; }
.sn-hero__app { margin: 0; color: #087e57; font: 700 11px/1.2 var(--sn-font-body); letter-spacing: 0.08em; text-transform: uppercase; }
.sn-hero__q { margin: 6px 0 16px; font: 800 22px/1.2 var(--sn-font-display); letter-spacing: -0.02em; }
.sn-hero__steps { margin: 0; padding: 0; list-style: none; counter-reset: sn-hero; }
.sn-hero__steps li { position: relative; margin: 0 0 10px; padding: 11px 12px 11px 44px; border-radius: 10px; background: #f4f4f5; color: #3f3f46; font-size: 13px; font-weight: 600; line-height: 1.35; counter-increment: sn-hero; }
.sn-hero__steps li::before { content: counter(sn-hero); position: absolute; left: 12px; top: 50%; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: #e4e4e7; color: #3f3f46; font-size: 12px; font-weight: 800; transform: translateY(-50%); }
.sn-hero__steps li.is-done { background: #e7f6ec; color: #14532d; }
.sn-hero__steps li.is-done::before { content: "✓"; background: #15803d; color: #ffffff; }
.sn-hero__steps li.is-now { background: #dcfce9; color: #0c4534; box-shadow: inset 0 0 0 2px #087e57; }
.sn-hero__steps li.is-now::before { background: #087e57; color: #ffffff; }
.sn-hero__progress { height: 8px; margin: 18px 0 0; border-radius: 99px; background: #e4e4e7; overflow: hidden; }
.sn-hero__progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #087e57, #f59e0b); }

.sn-hero__float { position: absolute; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: #ffffff; color: #18181b; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35); font-size: 13px; line-height: 1.3; }
.sn-hero__float strong { display: block; font-family: var(--sn-font-display); }
.sn-hero__float--a { bottom: 30px; left: -52px; transform: rotate(-3deg); }
.sn-hero__float--a strong { font-size: 14px; }
.sn-hero__float-icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 9px; background: #15803d; color: #ffffff; }
.sn-hero__float--b { top: -14px; right: -46px; flex-direction: column; align-items: flex-start; gap: 2px; max-width: 150px; transform: rotate(3deg); }
.sn-hero__float--b strong { color: #087e57; font-size: 30px; line-height: 1; }
.sn-hero__float--b span { color: #3f3f46; }

.sn-tiles { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sn-tiles li { margin: 0; }
@media (min-width: 640px) { .sn-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sn-tiles--cats { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
@media (min-width: 1100px) {
	.sn-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
	/* Few categories yet: let the tiles share the row instead of leaving it half empty. */
	.sn-tiles--cats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}
.sn-tile { display: flex; flex-direction: column; gap: 2px; height: 100%; box-sizing: border-box; padding: 14px 16px; border: 1px solid var(--sn-border); border-radius: var(--sn-radius); background: var(--sn-bg); color: var(--sn-text); text-decoration: none; }
.sn-tile:hover, .sn-tile:focus { border-color: var(--sn-accent); color: var(--sn-text); box-shadow: var(--sn-shadow); }
.sn-tile__value { font: 800 18px/1.25 var(--sn-font-display); }
.sn-tile__more { color: var(--sn-accent); font-size: 13px; font-weight: 600; }
.sn-tile--cat { align-items: center; text-align: center; gap: 8px; padding: 18px 12px; }
.sn-tile--cat .sn-tile__value { font-size: 15px; }
.sn-tile--cat .sn-tile__more { color: var(--sn-muted); font-weight: 500; }
.sn-tile__icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: var(--sn-accent-soft); color: var(--sn-accent); }

.sn-split { display: grid; gap: 28px; }
@media (min-width: 900px) {
	.sn-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
	.sn-split--single { grid-template-columns: minmax(0, 1fr); }
	.sn-split--single .sn-fixlist { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}
.sn-split__col { min-width: 0; }
.sn-fixlist { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sn-fixlist li { display: flex; margin: 0; }
.sn-fixlist li > a { flex: 1; }
.sn-fixlist a { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--sn-border); border-radius: var(--sn-radius); color: var(--sn-text); text-decoration: none; }
.sn-fixlist a:hover, .sn-fixlist a:focus { border-color: var(--sn-line); box-shadow: var(--sn-shadow); color: var(--sn-text); }
.sn-fixlist__icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--sn-warning-soft); color: var(--sn-warning); }
.sn-fixlist__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sn-fixlist__title { font-weight: 700; font-size: 15px; line-height: 1.35; }
.sn-fixlist__meta { color: var(--sn-muted); font-size: 12px; }

/* Full-width tinted band (homepage "From our store counter"). */
.sn-band { margin-top: 36px; padding-block: 36px; background: var(--sn-surface); border-block: 1px solid var(--sn-border); }
.sn-band .sn-section__head { margin-bottom: 6px; }
.sn-section__intro { margin: 0 0 18px; color: var(--sn-text-2); font-size: 15px; }
.sn-tips { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .sn-tips { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; } }
/* Phones: swipe through the tips instead of scrolling past three tall cards. */
@media (max-width: 759px) {
	.sn-tips { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; overflow-x: auto; margin-inline: calc(-1 * var(--sn-gutter, 16px)); padding: 0 var(--sn-gutter, 16px) 4px; scroll-padding-inline: var(--sn-gutter, 16px); scroll-snap-type: x mandatory; scrollbar-width: none; }
	.sn-tips::-webkit-scrollbar { display: none; }
	.sn-tipcard { scroll-snap-align: start; }
}
.sn-tipcard { position: relative; display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 20px; border: 1px solid var(--sn-border); border-radius: var(--sn-radius-lg); background: var(--sn-bg); }
.sn-tipcard::before { content: "\201C"; position: absolute; top: 10px; right: 18px; color: var(--sn-accent-soft); font: 800 72px/1 var(--sn-font-display); pointer-events: none; }
.sn-tipcard__who { position: relative; display: flex; align-items: center; gap: 10px; margin: 0; color: var(--sn-muted); font-size: 13px; }
.sn-tipcard__who strong { color: var(--sn-text); }
.sn-tipcard__icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--sn-accent-soft); color: var(--sn-accent); }
.sn-tipcard__text { position: relative; margin: 0; padding: 0; border: 0; font-style: normal; quotes: none; }
.sn-tipcard__text p { margin: 0; color: var(--sn-text); font-size: 16px; line-height: 1.6; }
.sn-tipcard__src { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--sn-border); color: var(--sn-accent); font-weight: 700; font-size: 14px; text-decoration: none; }
.sn-tipcard__src span { overflow: hidden; min-width: 0; white-space: nowrap; text-overflow: ellipsis; }
.sn-tipcard__src .sn-icon { flex: none; transition: transform 0.15s ease; }
.sn-tipcard__src:hover .sn-icon, .sn-tipcard__src:focus-visible .sn-icon { transform: translateX(3px); }

/* "Ask your question" call-to-action band. */
.sn-ask { display: grid; gap: 16px; justify-items: start; padding: 24px; border: 1px solid var(--sn-border); border-radius: 24px; background: linear-gradient(135deg, var(--sn-accent-soft) 0%, var(--sn-bg) 100%); }
@media (min-width: 900px) { .sn-ask { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 28px 36px; } }
.sn-ask__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--sn-accent); color: var(--sn-on-accent); }
.sn-ask__title { margin: 0 0 6px; font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem); font-weight: 800; line-height: 1.25; }
.sn-ask__text p { margin: 0; max-width: 62ch; color: var(--sn-text-2); font-size: 15px; }

/* Homepage "Handy codes & official links". */
.sn-codes { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
@media (min-width: 560px) { .sn-codes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sn-codes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.sn-code { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0; padding: 18px; border: 1px solid var(--sn-border); border-radius: var(--sn-radius-lg); background: var(--sn-bg); }
.sn-code__key { display: inline-grid; place-items: center; min-width: 44px; height: 44px; margin-bottom: 4px; padding: 0 12px; border-radius: 12px; background: var(--sn-accent-soft); color: var(--sn-accent); font: 800 18px/1 var(--sn-font-display); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.sn-code__key--icon { width: 44px; padding: 0; }
.sn-code__title { margin: 0; font-size: 16px; font-weight: 800; line-height: 1.3; }
.sn-code__desc { margin: 0; color: var(--sn-text-2); font-size: 14px; line-height: 1.5; }
.sn-code__links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: auto 0 0; padding-top: 6px; }
.sn-code__links a { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 14px; text-decoration: none; }
.sn-code__links a:hover, .sn-code__links a:focus-visible { text-decoration: underline; }
/* Phones: compact rows, code on the left. */
@media (max-width: 559px) {
	.sn-code { display: grid; grid-template-columns: 68px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; padding: 14px; }
	.sn-code__key { grid-row: 1 / span 3; width: 68px; min-width: 0; margin: 0; padding: 0 6px; font-size: 14px; }
	.sn-code__title, .sn-code__desc, .sn-code__links { grid-column: 2; }
	.sn-code__title { font-size: 15px; }
	.sn-code__links { padding-top: 4px; }
}

.sn-trust { display: grid; gap: 24px; padding: 28px 22px; border-radius: 24px; background: var(--sn-ink); color: var(--sn-ink-text); }
@media (min-width: 900px) { .sn-trust { grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); align-items: center; padding: 40px; gap: 40px; } }
.sn-trust__title { margin: 0; color: #ffffff; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); font-weight: 800; line-height: 1.18; }
.sn-trust__person { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; font-size: 14px; line-height: 1.4; color: var(--sn-ink-muted); }
.sn-trust__person strong { color: #ffffff; }
.sn-trust .sn-avatar--initials { background: #ffffff; color: #0b0d12; }
.sn-trust__points { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .sn-trust__points { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sn-trust__points li { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 18px; border: 1px solid var(--sn-ink-border); border-radius: 16px; background: var(--sn-ink-2); color: var(--sn-ink-muted); font-size: 14px; }
.sn-trust__points .sn-icon { color: var(--sn-ink-accent); }
.sn-trust__points strong { color: #ffffff; font: 700 16px/1.3 var(--sn-font-display); }

/* ---------- 9. Archives, search, empty, 404, pagination ---------- */
.sn-archive-head { background: var(--sn-surface); border-bottom: 1px solid var(--sn-border); padding-block: 16px 24px; }
.sn-archive-head__row { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.sn-archive-head__icon { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 16px; background: var(--sn-bg); border: 1px solid var(--sn-border); color: var(--sn-accent); }
.sn-archive-head__title { margin: 0; font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); font-weight: 800; line-height: 1.12; }
.sn-archive-head__desc { max-width: 72ch; margin-top: 12px; color: var(--sn-text-2); font-size: 16px; }
.sn-archive-head__desc p { margin: 0 0 0.6em; }
.sn-archive-head__search { max-width: 640px; margin-top: 14px; }

.sn-empty { display: grid; gap: 8px; justify-items: start; max-width: 620px; padding: 28px; border: 1px dashed var(--sn-line); border-radius: var(--sn-radius-lg); }
.sn-empty p { margin: 0; color: var(--sn-text-2); }
.sn-empty__title { color: var(--sn-text) !important; font: 800 20px/1.3 var(--sn-font-display); }
.sn-empty .sn-search { width: 100%; margin-top: 8px; }

.sn-404 { display: grid; gap: 16px; justify-items: start; max-width: 680px; padding-block: 48px 64px; }
.sn-404 p { margin: 0; color: var(--sn-text-2); }
.sn-404__code { font: 800 72px/1 var(--sn-font-display) !important; color: var(--sn-accent) !important; letter-spacing: -0.04em; }
.sn-404 .sn-search { width: 100%; }

.sn-pagination { margin-top: 32px; }
.sn-pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.sn-pagination .page-numbers { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 14px; box-sizing: border-box; border: 1px solid var(--sn-border); border-radius: 10px; color: var(--sn-text); font-weight: 700; font-size: 14px; text-decoration: none; }
.sn-pagination .page-numbers.current { background: var(--sn-text); border-color: var(--sn-text); color: var(--sn-bg); }
.sn-pagination a.page-numbers:hover, .sn-pagination a.page-numbers:focus { border-color: var(--sn-accent); color: var(--sn-accent); }

/* ---------- 10. Single article ---------- */
.sn-crumbs { padding-top: 14px; font-size: 13px; color: var(--sn-muted); }
.sn-crumbs ol { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; min-width: 0; }
.sn-crumbs li { margin: 0; white-space: nowrap; }
.sn-crumbs li:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sn-crumbs li + li::before { content: "›"; margin-right: 6px; color: var(--sn-border-strong); }
.sn-crumbs a { color: var(--sn-muted); text-decoration: none; }
.sn-crumbs a:hover, .sn-crumbs a:focus { color: var(--sn-accent); text-decoration: underline; }
.sn-crumbs .rank-math-breadcrumb p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sn-crumbs .separator { margin: 0 4px; color: var(--sn-border-strong); }

.sn-single__layout { display: grid; gap: 40px; padding-block: 16px 8px; }
.sn-article { min-width: 0; width: 100%; max-width: 760px; margin-inline: auto; }
@media (min-width: 1200px) {
	.sn-single__layout.has-aside { grid-template-columns: minmax(0, 760px) 300px; justify-content: center; }
	.sn-single__layout.has-aside .sn-article { margin-inline: 0; }
}
.sn-single__aside { display: none; }
@media (min-width: 1200px) { .sn-single__aside { display: block; } }
.sn-single__sticky { position: sticky; top: 140px; }

.sn-article__header { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.sn-article__badges { display: flex; flex-wrap: wrap; gap: 8px; }
.sn-article__badges:empty { display: none; }
.sn-article__title { margin: 0; font-size: clamp(1.8rem, 1.3rem + 2.2vw, 2.6rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.025em; }
.sn-article__dek { margin: 0; color: var(--sn-text-2); font-size: 18px; line-height: 1.55; }
.sn-article__meta { display: flex; align-items: center; gap: 10px; color: var(--sn-muted); font-size: 14px; }
.sn-article__meta p { margin: 0; }
.sn-article__author { color: var(--sn-text); font-weight: 700; text-decoration: none; }
.sn-article__checked { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--sn-warning-soft); color: var(--sn-text-2); font-size: 14px; }
.sn-article__checked .sn-icon { flex: none; margin-top: 2px; color: var(--sn-warning); }
.sn-article__meta-line { margin: 0; color: var(--sn-muted); font-size: 14px; }
.sn-article__image { margin: 0 0 24px; }
/* The featured image keeps its own shape (square, 16:9, ...); very tall ones are capped by height. */
.sn-article__image img { display: block; width: auto; max-width: 100%; height: auto; max-height: 80vh; margin-inline: auto; border-radius: var(--sn-radius-lg); background: var(--sn-surface); }
.sn-article__image figcaption { margin-top: 8px; color: var(--sn-muted); font-size: 13px; }
.sn-article__footer { display: grid; gap: 20px; margin-top: 36px; }
.sn-page { max-width: 860px; padding-bottom: 48px; }
.sn-page .sn-article { max-width: none; padding-top: 16px; }

/* Prose */
.sn-prose { font-size: 17px; line-height: 1.75; color: var(--sn-text); overflow-wrap: break-word; }
@media (min-width: 768px) { .sn-prose { font-size: 18px; } }
.sn-prose > * { margin-top: 0; margin-bottom: 0; }
.sn-prose > * + * { margin-top: 1.1em; }
.sn-prose h2 { margin-top: 1.9em; font-size: 1.55em; font-weight: 800; line-height: 1.22; }
.sn-prose h3 { margin-top: 1.6em; font-size: 1.22em; font-weight: 700; line-height: 1.3; }
.sn-prose h4 { margin-top: 1.4em; font-size: 1.05em; font-weight: 700; }
.sn-prose a { color: var(--sn-accent); text-decoration: underline; text-decoration-thickness: 1px; }
.sn-prose ul, .sn-prose ol { margin-left: 0; margin-right: 0; margin-bottom: 0; padding-left: 1.3em; }
.sn-prose p, .sn-prose figure, .sn-prose .wp-block-columns { margin-bottom: 0; }
.sn-prose figure { margin-left: 0; margin-right: 0; }
.sn-prose .wp-block-columns { gap: 1.25em 2em; }
.sn-prose .wp-block-column > * + * { margin-top: 0.7em; }
.sn-prose li { margin: 0.35em 0; }
.sn-prose li::marker { color: var(--sn-muted); }
.sn-prose img { border-radius: 12px; }
.sn-prose figcaption, .sn-prose .wp-element-caption { margin-top: 8px; color: var(--sn-muted); font-size: 14px; text-align: left; }
.sn-prose blockquote { margin-left: 0; margin-right: 0; padding: 16px 20px; border: 0; border-radius: var(--sn-radius); background: var(--sn-surface); font-style: normal; }
.sn-prose blockquote p { margin: 0; }
.sn-prose code, .sn-prose kbd { padding: 0.12em 0.35em; border-radius: 6px; background: var(--sn-surface-2); font: 0.85em var(--sn-font-mono); }
.sn-prose hr { border: 0; border-top: 1px solid var(--sn-border); }
.sn-prose strong { color: var(--sn-text); }
.sn-prose .wp-block-table { overflow-x: auto; margin-left: 0; margin-right: 0; }
.sn-prose table { width: 100%; margin: 0; border-collapse: collapse; border: 1px solid var(--sn-border); font-size: 0.9em; line-height: 1.5; }
.sn-prose th, .sn-prose td,
.sn-prose .wp-block-table th, .sn-prose .wp-block-table td { padding: 10px 12px; border: 1px solid var(--sn-border); text-align: left; vertical-align: top; }
.sn-prose .wp-block-table thead, .sn-prose .wp-block-table tfoot { border: 0; }
.sn-prose thead th, .sn-prose tr:first-child th { background: var(--sn-surface-2); font-family: var(--sn-font-display); }
.sn-prose .wp-block-details { padding: 0 16px; border: 1px solid var(--sn-border); border-radius: 12px; }
.sn-prose .wp-block-details + .wp-block-details { margin-top: 8px; }
.sn-prose .wp-block-details summary { display: flex; align-items: center; min-height: 52px; font-weight: 700; cursor: pointer; }
.sn-prose .wp-block-details > :last-child { margin-bottom: 14px; }
.sn-prose .wp-block-button__link { border-radius: 12px; background: var(--sn-accent); color: var(--sn-on-accent); font-family: var(--sn-font-display); font-weight: 700; text-decoration: none; padding: 12px 20px; }
.sn-prose .wp-block-button__link:hover, .sn-prose .wp-block-button__link:focus { background: var(--sn-accent-hover); color: var(--sn-on-accent); }
.sn-prose .is-style-outline .wp-block-button__link { background: transparent; color: var(--sn-text); border: 1px solid var(--sn-line); }

/* Table of contents */
.sn-toc { margin: 1.2em 0 0; border: 1px solid var(--sn-border); border-radius: var(--sn-radius); background: var(--sn-surface); font-size: 16px; }
.sn-toc summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 16px; font: 700 16px/1.2 var(--sn-font-display); cursor: pointer; }
.sn-toc__count { color: var(--sn-muted); font: 500 13px/1 var(--sn-font-body); }
.sn-toc ol { margin: 0; padding: 0 16px 14px 36px; }
.sn-toc li { margin: 6px 0; }
.sn-toc a { color: var(--sn-text-2); text-decoration: none; }
.sn-toc a:hover, .sn-toc a:focus { color: var(--sn-accent); text-decoration: underline; }

/* Block styles */
.sn-prose .is-style-sn-quick-answer,
.sn-prose .is-style-sn-note,
.sn-prose .is-style-sn-tip,
.sn-prose .is-style-sn-warning,
.sn-prose .is-style-sn-verdict,
.sn-prose .is-style-sn-product,
.sn-prose .is-style-sn-store { padding: 18px 20px; border-radius: var(--sn-radius); }
.sn-prose .is-style-sn-quick-answer > * + *,
.sn-prose .is-style-sn-note > * + *,
.sn-prose .is-style-sn-tip > * + *,
.sn-prose .is-style-sn-warning > * + *,
.sn-prose .is-style-sn-verdict > * + *,
.sn-prose .is-style-sn-product > * + *,
.sn-prose .is-style-sn-store > * + *,
.sn-prose .wp-block-group__inner-container > * + * { margin-top: 0.7em; }
.sn-prose .wp-block-group__inner-container > :first-child { margin-top: 0; }
.sn-prose [class*="is-style-sn-"] h2, .sn-prose [class*="is-style-sn-"] h3, .sn-prose [class*="is-style-sn-"] h4 { margin-top: 0; }

.sn-prose .is-style-sn-quick-answer { background: var(--sn-accent-soft); }
.sn-prose .is-style-sn-quick-answer .sn-label,
.sn-prose .is-style-sn-verdict .sn-label { display: block; color: var(--sn-accent); font: 700 12px/1.3 var(--sn-font-body); letter-spacing: 0.07em; text-transform: uppercase; }
.sn-prose .is-style-sn-note { background: var(--sn-surface); border: 1px solid var(--sn-border); }
.sn-prose .is-style-sn-tip { background: var(--sn-success-soft); }
.sn-prose .is-style-sn-warning { background: var(--sn-warning-soft); }
.sn-prose .is-style-sn-verdict { border: 2px solid var(--sn-accent); background: var(--sn-bg); }
.sn-prose .is-style-sn-product { border: 1px solid var(--sn-border); background: var(--sn-bg); box-shadow: var(--sn-shadow); }
.sn-prose .is-style-sn-product .wp-block-columns { margin-bottom: 0; gap: 20px; }
.sn-prose .is-style-sn-product .wp-block-image img { aspect-ratio: 1; object-fit: contain; background: var(--sn-surface); border-radius: 12px; }
.sn-prose .is-style-sn-product .sn-price { font: 800 1.35em/1.2 var(--sn-font-display); color: var(--sn-text); }
.sn-prose .is-style-sn-store { background: var(--sn-ink); color: var(--sn-ink-text); }
.sn-prose .is-style-sn-store strong, .sn-prose .is-style-sn-store h3, .sn-prose .is-style-sn-store h4 { color: #ffffff; }
.sn-prose .is-style-sn-store a { color: var(--sn-ink-accent); }

.sn-prose .is-style-sn-specs table td:first-child, .sn-prose .is-style-sn-specs table th:first-child { width: 36%; color: var(--sn-muted); font-weight: 600; background: var(--sn-surface); }
.sn-prose .is-style-sn-specs table { border-radius: 12px; }
.sn-prose .is-style-sn-compare table { min-width: 560px; }
.sn-prose .is-style-sn-compare thead th { position: sticky; top: 0; }
.sn-prose .is-style-sn-compare td:first-child, .sn-prose .is-style-sn-compare th:first-child { position: sticky; left: 0; z-index: 1; background: var(--sn-surface); font-weight: 700; }
/* The header's first cell stays dark like the rest of the header row; it sticks on both axes, so it sits on top. */
.sn-prose .is-style-sn-compare thead th:first-child { z-index: 2; background: var(--sn-ink); }

.sn-prose .is-style-sn-pros, .sn-prose .is-style-sn-cons, .sn-prose .is-style-sn-steps, .sn-prose .is-style-sn-chips { padding-left: 0; list-style: none; }
.sn-prose .is-style-sn-pros li, .sn-prose .is-style-sn-cons li { position: relative; padding-left: 30px; }
.sn-prose .is-style-sn-pros li::before, .sn-prose .is-style-sn-cons li::before {
	content: ""; position: absolute; left: 0; top: 0.3em; width: 20px; height: 20px; border-radius: 50%;
	-webkit-mask: var(--sn-mark) center / 14px no-repeat; mask: var(--sn-mark) center / 14px no-repeat;
}
.sn-prose .is-style-sn-pros li::before { background: var(--sn-success); --sn-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E"); }
.sn-prose .is-style-sn-cons li::before { background: var(--sn-danger); --sn-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
.sn-prose .is-style-sn-steps { counter-reset: sn-step; }
.sn-prose .is-style-sn-steps > li { counter-increment: sn-step; position: relative; min-height: 32px; padding-left: 46px; margin: 0.9em 0; }
.sn-prose .is-style-sn-steps > li::before { content: counter(sn-step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--sn-accent); color: var(--sn-on-accent); font: 700 14px/1 var(--sn-font-display); }
.sn-prose .is-style-sn-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sn-prose .is-style-sn-chips li { margin: 0; padding: 3px 10px; border-radius: 8px; background: var(--sn-surface-2); color: var(--sn-text-2); font-size: 0.8em; }
.sn-prose .is-style-sn-screenshot img { display: block; max-width: 300px; margin-inline: auto; border: 6px solid #0b0d12; border-radius: 28px; }
.sn-prose .is-style-sn-screenshot figcaption { text-align: center; }

/* Share, author, aside */
.sn-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sn-share__label { margin-right: 4px; color: var(--sn-muted); font-size: 14px; font-weight: 600; }
.sn-share [data-copied] .sn-share__done::after { content: " ✓"; }
.sn-author { display: flex; gap: 16px; align-items: flex-start; padding: 20px; border: 1px solid var(--sn-border); border-radius: var(--sn-radius-lg); }
.sn-author__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sn-author__body p { margin: 0; }
.sn-author__name { font: 800 17px/1.3 var(--sn-font-display); }
.sn-author__name a { color: var(--sn-text); text-decoration: none; }
.sn-author__role { color: var(--sn-text-2); font-size: 14px; }
.sn-author__bio { color: var(--sn-text-2); font-size: 15px; }
.sn-author__made { margin-top: 6px !important; padding: 10px 12px; border-radius: 10px; background: var(--sn-surface); color: var(--sn-muted); font-size: 13px; }
.sn-author__made strong { color: var(--sn-text); }

/* ---------- 11. Ads (reserved space so nothing jumps) ---------- */
.sn-ad { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 28px auto; text-align: center; }
.sn-ad__label { color: var(--sn-muted); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.sn-ad--incontent, .sn-ad--infeed { min-height: 268px; }
.sn-ad--sidebar { min-height: 618px; margin: 0; }
@media (min-width: 768px) {
	.sn-ad--incontent { min-height: 298px; }
	.sn-ad--infeed { min-height: 108px; }
}
.sn-prose > .sn-ad { margin-block: 1.8em; }
.sn-ad__unit--incontent, .sn-ad__unit--infeed { width: 300px; height: 250px; }
@media (min-width: 768px) { .sn-ad__unit--incontent { width: 336px; height: 280px; } .sn-ad__unit--infeed { width: 728px; height: 90px; } }
.sn-ad__unit--sidebar { width: 300px; height: 600px; }


/* ---------- 12. Follow band + footer ---------- */
.sn-follow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-block: 32px; padding-block: 22px; border-radius: var(--sn-radius-lg); background: var(--sn-accent-soft); }
.sn-follow.sn-container { padding-inline: 24px; width: calc(100% - 2 * var(--sn-gutter)); }
.sn-follow__title { margin: 0; font-size: 19px; font-weight: 800; }
.sn-follow__text p { margin: 4px 0 0; color: var(--sn-text-2); font-size: 14px; }
.sn-follow__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.site-footer { background: var(--sn-surface); }
.sn-footer { border-top: 1px solid var(--sn-border); background: var(--sn-surface); color: var(--sn-text-2); }
.sn-footer__grid { display: grid; gap: 28px; padding-block: 36px 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .sn-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .sn-footer__grid { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); } }
.sn-footer__brand p { max-width: 36ch; margin: 12px 0 0; font-size: 14px; color: var(--sn-muted); }
.sn-footer__title { margin: 0 0 8px; color: var(--sn-muted); font: 700 12px/1.3 var(--sn-font-body); letter-spacing: 0.07em; text-transform: uppercase; }
.sn-footer__list { margin: 0; padding: 0; list-style: none; }
.sn-footer__list li { margin: 0; }
.sn-footer__list a { display: inline-flex; align-items: center; min-height: 34px; color: var(--sn-text-2); font-size: 14px; text-decoration: none; }
.sn-footer__list a:hover, .sn-footer__list a:focus { color: var(--sn-accent); text-decoration: underline; }
.sn-footer__bottom { padding-block: 16px 28px; border-top: 1px solid var(--sn-border); font-size: 13px; color: var(--sn-muted); }
.sn-footer__bottom p { margin: 0; }

/* ---------- 13. Editor ---------- */
.editor-styles-wrapper { background: var(--sn-bg); color: var(--sn-text); font-family: var(--sn-font-body); }

/* ---------- 14. Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
	.sn-card, .sn-tile, .sn-fixlist a { transition: box-shadow 0.15s ease, border-color 0.15s ease; }
}

/* Fluent Forms (Contact page): match the site's inputs and buttons, light and dark. */
.fluentform .ff-el-input--label label { color: var(--sn-text); font-weight: 600; }
.fluentform .ff-el-form-control { background: var(--sn-bg); color: var(--sn-text); border: 1px solid var(--sn-line); border-radius: 10px; padding: 11px 14px; }
.fluentform .ff-el-form-control::placeholder { color: var(--sn-muted); }
.fluentform .ff-el-form-control:focus { border-color: var(--sn-accent); box-shadow: 0 0 0 3px var(--sn-accent-soft); outline: none; }
.fluentform .ff-btn-submit.ff-btn-submit { background-color: var(--sn-accent) !important; color: var(--sn-on-accent) !important; border: 0; border-radius: 10px; padding: 12px 22px; font: 700 15px/1.2 var(--sn-font-display); }
.fluentform .ff-btn-submit.ff-btn-submit:hover, .fluentform .ff-btn-submit.ff-btn-submit:focus { background-color: var(--sn-accent-hover) !important; opacity: 1; }

/* ---------- 15. VoltRoute look: charcoal chrome, crimson accents, squarer shapes ---------- */
.sn-btn, a.sn-btn, button.sn-btn { border-radius: var(--sn-radius); letter-spacing: 0.01em; }
.sn-icon-btn, button.sn-icon-btn { border-radius: var(--sn-radius); }
.sn-chip, a.sn-chip, button.sn-chip { border-radius: var(--sn-radius-sm); }
.sn-badge { border-radius: 4px; background: var(--sn-accent); color: var(--sn-on-accent); letter-spacing: 0.06em; }
.sn-badge--how-to { background: var(--sn-highlight); color: var(--sn-on-highlight); }
.sn-badge--comparison, .sn-badge--news { background: var(--sn-ink); color: #ffffff; }
.sn-badge--review { background: var(--sn-success); color: #ffffff; }
.sn-proof { border-radius: 4px; }

/* Header: charcoal bar with a crimson rule. */
.sn-header { background: var(--sn-ink); border-bottom: 3px solid var(--sn-accent); color: var(--sn-ink-text); }
.sn-header .sn-logo__word { color: #ffffff; }
.sn-header .sn-logo__b, .sn-footer .sn-logo__b { color: var(--sn-ink-accent); }
.sn-logo__b { margin-left: 0.28em; font-weight: 600; }
.sn-header .sn-icon-btn { color: var(--sn-ink-text); }
.sn-header .sn-icon-btn:hover, .sn-header .sn-icon-btn:focus { background: var(--sn-ink-2); color: #ffffff; }
.sn-header .sn-search input[type="search"] { border-color: var(--sn-ink-border); border-radius: var(--sn-radius); background: var(--sn-ink-2); color: #ffffff; }
.sn-header .sn-search input[type="search"]::placeholder { color: var(--sn-ink-muted); }
.sn-header .sn-search input[type="search"]:focus { border-color: var(--sn-ink-accent); background: var(--sn-ink-2); outline-color: rgba(253, 164, 175, 0.25); }
.sn-header .sn-search__icon { color: var(--sn-ink-muted); }
.sn-catbar { border-top: 1px solid var(--sn-ink-border); background: var(--sn-ink-2); }
.sn-catbar__list { padding: 0; }
.sn-catbar__list a { min-height: 42px; border-radius: 0; border-bottom: 2px solid transparent; color: var(--sn-ink-muted); }
.sn-catbar__list a:hover, .sn-catbar__list a:focus, .sn-catbar__list .current-menu-item > a { background: transparent; color: #ffffff; border-bottom-color: var(--sn-ink-accent); }
.sn-search input[type="search"] { border-radius: var(--sn-radius); }

/* Section headings carry a crimson bar. */
.sn-section__title { padding-left: 12px; border-left: 4px solid var(--sn-accent); line-height: 1.2; }
.sn-eyebrow { color: var(--sn-accent); }
.sn-eyebrow--warn { color: var(--sn-highlight); }

/* Cards: white tiles on a grey page, lift on hover. */
.sn-card { border-color: transparent; border-radius: var(--sn-radius-lg); box-shadow: var(--sn-shadow); }
.sn-card:hover { border-color: transparent; box-shadow: 0 2px 4px rgba(24, 24, 27, 0.08), 0 14px 30px rgba(24, 24, 27, 0.12); }
.sn-card__title { font-size: 16px; }
.sn-card__media .sn-badge { top: 0; left: 0; border-radius: 0 0 6px 0; }
.sn-card__placeholder { background: var(--sn-ink); color: var(--sn-ink-accent); }
@media (prefers-reduced-motion: no-preference) {
	.sn-card { transition: box-shadow 0.15s ease, transform 0.15s ease; }
	.sn-card:hover { transform: translateY(-2px); }
}

.sn-tile__icon, .sn-tipcard__icon, .sn-fixlist__icon { border-radius: var(--sn-radius); }
.sn-tile { border-radius: var(--sn-radius-lg); }
.sn-tile:hover, .sn-tile:focus { border-color: var(--sn-accent); }
.sn-fixlist a { border-radius: var(--sn-radius-lg); background: var(--sn-bg); }
.sn-band { background: var(--sn-bg); }
.sn-tipcard { border-radius: var(--sn-radius-lg); border-top: 3px solid var(--sn-accent); }
.sn-tipcard::before { color: var(--sn-surface-2); }
.sn-ask { border-radius: var(--sn-radius-lg); border: 0; border-left: 5px solid var(--sn-accent); background: var(--sn-bg); box-shadow: var(--sn-shadow); }
.sn-ask__icon { border-radius: var(--sn-radius); }
.sn-code { border-radius: var(--sn-radius-lg); }
.sn-code__key { border-radius: var(--sn-radius-sm); background: var(--sn-ink); color: #ffffff; }
.sn-code__key--icon { color: var(--sn-ink-accent); }
.sn-trust { border-radius: var(--sn-radius-lg); background: var(--sn-deep); }
.sn-trust__points li { border-radius: var(--sn-radius); border-color: rgba(255, 255, 255, 0.16); background: rgba(0, 0, 0, 0.18); color: #fbe4e8; }
.sn-trust__points .sn-icon { color: var(--sn-highlight); }
.sn-trust__person { color: #fbd0d7; }
.sn-eyebrow--ink { color: var(--sn-highlight); }

/* Archive heads, article details. */
.sn-archive-head { background: var(--sn-bg); border-bottom: 1px solid var(--sn-border); }
.sn-archive-head__icon { border-radius: var(--sn-radius); background: var(--sn-ink); border-color: var(--sn-ink); color: var(--sn-ink-accent); }
.sn-pagination .page-numbers { border-radius: var(--sn-radius-sm); background: var(--sn-bg); }
.sn-pagination .page-numbers.current { background: var(--sn-accent); border-color: var(--sn-accent); color: var(--sn-on-accent); }
.sn-article { padding: 0; }
.sn-article__title { font-weight: 700; letter-spacing: -0.02em; }
.sn-article__image img { border-radius: var(--sn-radius-lg); }
.sn-article__checked { border-radius: var(--sn-radius); border-left: 4px solid var(--sn-highlight); background: var(--sn-highlight-soft); }
.sn-article__checked .sn-icon { color: var(--sn-warning); }
/* Posts and pages sit straight on a white page (no boxed card) so phones get the full width. */
body.single-post, body.page { background: var(--sn-bg); }
.sn-author { border-radius: var(--sn-radius-lg); background: var(--sn-surface); border: 0; }
.sn-author__made { border-radius: var(--sn-radius); background: var(--sn-bg); }

/* Prose details. */
.sn-prose h2 { padding-bottom: 0.25em; border-bottom: 2px solid var(--sn-accent-soft); }
.sn-prose .wp-block-details { border-radius: var(--sn-radius); }
.sn-prose .wp-block-details[open] { border-color: var(--sn-accent); }
.sn-prose .wp-block-details summary::marker { color: var(--sn-accent); }
.sn-prose blockquote { border-left: 4px solid var(--sn-accent); border-radius: 0 var(--sn-radius) var(--sn-radius) 0; }
.sn-prose table { border-radius: var(--sn-radius); }
.sn-prose thead th, .sn-prose tr:first-child th { background: var(--sn-ink); color: #ffffff; border-color: var(--sn-ink-border); }
.sn-toc { border-radius: var(--sn-radius); border-left: 4px solid var(--sn-accent); background: var(--sn-surface); }
.sn-prose .is-style-sn-quick-answer, .sn-prose .is-style-sn-note, .sn-prose .is-style-sn-tip, .sn-prose .is-style-sn-warning,
.sn-prose .is-style-sn-verdict, .sn-prose .is-style-sn-product, .sn-prose .is-style-sn-store { border-radius: var(--sn-radius); }
.sn-prose .is-style-sn-quick-answer { border-left: 5px solid var(--sn-accent); border-radius: 0 var(--sn-radius) var(--sn-radius) 0; }
.sn-prose .is-style-sn-tip { border-left: 5px solid var(--sn-success); border-radius: 0 var(--sn-radius) var(--sn-radius) 0; }
.sn-prose .is-style-sn-warning { border-left: 5px solid var(--sn-highlight); border-radius: 0 var(--sn-radius) var(--sn-radius) 0; }
.sn-prose .is-style-sn-store { background: var(--sn-ink); }
.sn-prose .is-style-sn-store strong:first-child { color: var(--sn-highlight); }
.sn-prose .is-style-sn-steps > li::before { border-radius: 6px; background: var(--sn-ink); color: #ffffff; }
:root[data-theme="dark"] .sn-prose .is-style-sn-steps > li::before { background: var(--sn-accent); color: var(--sn-on-accent); }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .sn-prose .is-style-sn-steps > li::before { background: var(--sn-accent); color: var(--sn-on-accent); }
}

/* Footer: charcoal, matching the header. */
.site-footer { background: var(--sn-ink); }
.sn-footer { border-top: 3px solid var(--sn-accent); background: var(--sn-ink); color: var(--sn-ink-muted); }
.sn-footer .sn-logo__word { color: #ffffff; }
.sn-footer__brand p, .sn-footer__bottom { color: var(--sn-ink-muted); }
.sn-footer__title { color: #ffffff; }
.sn-footer__list a { color: var(--sn-ink-muted); }
.sn-footer__list a:hover, .sn-footer__list a:focus { color: #ffffff; }
.sn-footer__bottom { border-top-color: var(--sn-ink-border); }
.sn-follow { border-radius: var(--sn-radius-lg); }
.fluentform .ff-el-form-control { border-radius: var(--sn-radius); }
.fluentform .ff-btn-submit.ff-btn-submit { border-radius: var(--sn-radius); }

/* Buyer's guides shelf: product-listing cards with a square thumbnail, two per row from tablet width up. */
.sn-shelf { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .sn-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
.sn-shelf-card { position: relative; display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 14px; min-width: 0; padding: 0; overflow: hidden; border: 1px solid transparent; border-radius: var(--sn-radius-lg); background: var(--sn-bg); box-shadow: var(--sn-shadow); }
@media (min-width: 480px) { .sn-shelf-card { grid-template-columns: 160px minmax(0, 1fr); gap: 18px; } }
@media (min-width: 1100px) { .sn-shelf-card { grid-template-columns: 200px minmax(0, 1fr); } }
.sn-shelf-card:hover, .sn-shelf-card:focus-within { border-color: var(--sn-accent); }
/* Image runs edge to edge on the left: at least square, and as tall as the text when that is taller. */
/* A square box on the card background: square images fill it, others show whole with no dark bars. */
.sn-shelf-card__media { position: relative; display: block; align-self: center; aspect-ratio: 1; overflow: hidden; }
.sn-shelf-card__media picture { display: contents; }
.sn-shelf-card__media img, .sn-shelf-card__media .sn-card__placeholder { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.sn-shelf-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; padding: 12px 14px 12px 0; }
@media (min-width: 480px) { .sn-shelf-card__body { gap: 8px; } }
.sn-shelf-card__cat { margin: 0; color: var(--sn-accent); font: 700 11px/1.3 var(--sn-font-body); letter-spacing: 0.07em; text-transform: uppercase; }
/* At most two lines; a longer title ends with "...". */
.sn-shelf-card__title { display: -webkit-box; overflow: hidden; margin: 0; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; font-size: 15px; font-weight: 700; line-height: 1.3; }
@media (min-width: 480px) { .sn-shelf-card__title { font-size: 17px; } }
.sn-shelf-card__title a { color: var(--sn-text); text-decoration: none; }
.sn-shelf-card__title a::after { content: ""; position: absolute; inset: 0; }
.sn-shelf-card__title a:hover, .sn-shelf-card__title a:focus { color: var(--sn-accent); }
.sn-shelf-card__title a:focus-visible { outline: none; }
.sn-shelf-card__excerpt { display: -webkit-box; overflow: hidden; margin: 0; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--sn-text-2); font-size: 14px; line-height: 1.5; }
.sn-shelf-card__btn, a.sn-shelf-card__btn { position: relative; z-index: 1; min-height: 38px; margin-top: auto; padding: 0 16px; font-size: 14px; pointer-events: none; }
.sn-shelf-card:hover .sn-shelf-card__btn { background: var(--sn-accent-hover); }
@media (max-width: 479px) {
	.sn-shelf-card__excerpt { display: none; }
	.sn-shelf-card__btn { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
	.sn-shelf-card { transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease; }
	.sn-shelf-card:hover { transform: translateY(-2px); }
}


/* Related-guide cards inside articles: the homepage shelf card, with prose styles reset. */
.sn-prose .sn-inline-related { margin-top: 2em; margin-bottom: 0.4em; }
.sn-inline-related__label { display: flex; align-items: center; gap: 10px; margin: 0 0 8px !important; color: var(--sn-accent); font: 700 11px/1.3 var(--sn-font-body); letter-spacing: 0.08em; text-transform: uppercase; }
.sn-inline-related__label::after { content: ""; flex: 1; height: 1px; background: var(--sn-border); }
.sn-prose .sn-inline-related .sn-shelf-card { font-size: 16px; line-height: 1.5; }
.sn-prose .sn-inline-related a { text-decoration: none; }
.sn-prose .sn-inline-related .sn-shelf-card__title a { color: var(--sn-text); }
.sn-prose .sn-inline-related .sn-shelf-card__title a:hover, .sn-prose .sn-inline-related .sn-shelf-card__title a:focus { color: var(--sn-accent); }
.sn-prose .sn-inline-related .sn-btn { color: #ffffff; }
.sn-prose .sn-inline-related img { border-radius: 0; }
.sn-prose .sn-inline-related p { margin: 0; }

/* VoltRoute: compact stacked wordmark. */
.sn-logo__word { display: flex; flex-direction: column; gap: 3px; line-height: 1.05; }
.sn-logo__a { font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.sn-logo__b { margin-left: 0; font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
@media (min-width: 900px) {
    .sn-logo__mark { width: 40px; height: 40px; }
    .sn-logo__a { font-size: 11px; }
    .sn-logo__b { font-size: 20px; }
}
@media (max-width: 380px) {
    .sn-header__bar { gap: 6px; }
    .sn-header .sn-logo { gap: 6px; }
    .sn-header .sn-logo__mark { width: 30px; height: 30px; }
    .sn-header .sn-logo__b { font-size: 14px; }
    .sn-header__actions .sn-icon-btn { width: 36px; }
}

/* VoltRoute editorial layout. */
.sn-logo__word{display:flex;flex-direction:row;align-items:center;gap:0;font-size:23px;line-height:1.1;letter-spacing:-.06em}
.sn-logo__a,.sn-logo__b{font-size:inherit!important;font-weight:800;letter-spacing:inherit;text-transform:none;margin:0}
.sn-logo__mark{width:38px;height:38px}.sn-logo__mark svg{width:100%;height:100%}
.sn-card__media{aspect-ratio:16/10}.sn-card__img{object-fit:cover}.sn-card__placeholder{background:linear-gradient(145deg,#d7f8e8,#e8f0ec);color:#087e57}.sn-card__placeholder svg{width:78px;height:78px}
.vr-hero{background:var(--sn-ink);color:#f4faf6;padding:54px 0 36px;border-bottom:1px solid var(--sn-ink-border)}
.vr-hero-grid{display:grid;grid-template-columns:1.02fr 1fr;gap:40px;align-items:center}.vr-hero h1{font-size:clamp(34px,3.6vw,50px);line-height:1.16;letter-spacing:-.05em;margin:17px 0 22px;color:#fff}.vr-hero h1 span{color:#8becc4}.vr-dek{font-size:17px;line-height:1.75;color:#c6d5ce;max-width:620px}.vr-actions{display:flex;align-items:center;flex-wrap:wrap;gap:18px;margin:26px 0}.vr-text-link{color:#a4f0cf;font-weight:700;font-size:14px}.vr-hero-proof{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:#b3c5bd;border-top:1px solid #43534a;padding-top:20px}.vr-hero-proof span:before{content:'✓ ';color:#52dfad}.vr-hero-figure{margin:0}.vr-hero-figure img{display:block;width:100%;height:auto;border-radius:14px;box-shadow:0 20px 40px #0003}.vr-hero-figure figcaption{font-size:10px;color:#a9bcb2;margin-top:8px}
.vr-topic-section{padding-top:36px}.vr-topics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.vr-topic{padding:25px;background:var(--sn-bg);border:1px solid var(--sn-border);border-radius:12px;text-decoration:none;color:var(--sn-text)}.vr-topic:hover{border-color:var(--sn-accent);color:var(--sn-text);transform:translateY(-2px)}.vr-topic h3{font-size:20px;margin:18px 0 10px}.vr-topic p{color:var(--sn-text-2);font-size:15px;line-height:1.6}.vr-topic-icon{display:grid;place-items:center;width:62px;height:62px;background:var(--sn-accent-soft);color:var(--sn-accent);border-radius:16px}
.vr-tools-band{margin-top:42px;display:flex;align-items:center;justify-content:space-between;gap:30px;background:var(--sn-accent-soft);padding:30px;border:1px solid var(--sn-border);border-radius:12px}.vr-tools-band h2{font-size:26px;margin:8px 0 12px}.vr-tools-band p{max-width:690px;margin-bottom:0}.vr-tools-band .sn-btn{flex:none}
.vr-trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;padding-block:40px}.vr-trust-grid h2{color:white;font-size:30px;line-height:1.3}.vr-trust-grid p,.vr-trust-grid span{color:#c1cec7}.vr-trust-grid a{color:#8becc4}.vr-trust-grid ul{list-style:none;margin:0;display:grid;gap:20px}.vr-trust-grid strong,.vr-trust-grid span{display:block}.vr-trust-grid strong{color:white;margin-bottom:6px}
.vr-answer{background:var(--sn-accent-soft);border-left:4px solid var(--sn-accent);padding:22px 24px;margin:26px 0;border-radius:0 10px 10px 0}.vr-answer p:last-child{margin-bottom:0}.vr-table{overflow-x:auto;margin:24px 0}.vr-table table{min-width:500px}.vr-source-note{font-size:14px;color:var(--sn-muted);border-top:1px solid var(--sn-border);padding-top:20px}.sn-prose .vr-table th{white-space:normal}.sn-prose a{overflow-wrap:anywhere}
.vr-calculator{border:1px solid var(--sn-border);background:var(--sn-surface);border-radius:14px;padding:24px;margin:26px 0}.vr-calc-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}.vr-calc-fields label{display:block;font-size:14px;font-weight:700}.vr-calc-fields input{width:100%;display:block;margin-top:7px;border-radius:6px;padding:12px;border:1px solid var(--sn-line);background:var(--sn-bg);color:var(--sn-text)}.vr-calc-fields small{display:block;font-weight:400;color:var(--sn-muted);margin-top:5px}.vr-calc-results{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}.vr-calc-results div{padding:16px;border-radius:9px;background:var(--sn-bg)}.vr-calc-results strong{display:block;font-size:24px;color:var(--sn-accent)}.vr-calc-results span{font-size:13px}.vr-calc-error{color:var(--sn-danger)}.vr-calc-actions{display:flex;gap:10px;margin-top:18px}.vr-calc-assumptions{font-size:14px;line-height:1.6}
@media(max-width:1000px){.vr-hero-grid{grid-template-columns:1fr;gap:25px}.vr-hero-figure{max-width:760px}.vr-hero{padding-top:35px}.vr-tools-band{flex-direction:column;align-items:flex-start}}
@media(max-width:650px){.vr-topics{grid-template-columns:1fr}.vr-topic{display:grid;grid-template-columns:55px 1fr;column-gap:18px;padding:20px}.vr-topic-icon{grid-row:1/4;width:52px;height:52px}.vr-topic h3{margin:0 0 7px;font-size:18px}.vr-topic p{margin-bottom:9px}.vr-topic .sn-link-more{grid-column:2}.vr-topic-section .sn-section__head{display:block}.vr-topic-section .sn-muted{display:block;margin-top:10px}.vr-trust-grid{grid-template-columns:1fr;gap:25px}.vr-calculator{padding:18px}.vr-calc-fields{grid-template-columns:1fr}.vr-calc-results{grid-template-columns:1fr}.vr-tools-band{padding:24px 20px;width:calc(100% - 32px)}.sn-logo__word{font-size:21px}.sn-logo__mark{width:34px;height:34px}}
@media(max-width:380px){.sn-header .sn-logo__word{font-size:20px}.sn-header .sn-logo__a,.sn-header .sn-logo__b{font-size:inherit!important}.vr-actions .sn-btn{font-size:13px;padding-inline:16px}}
@media(prefers-reduced-motion:reduce){.vr-topic:hover{transform:none}}
.vr-contact label{display:block;font-weight:600;margin-bottom:8px}.vr-contact input:not([type=checkbox]),.vr-contact textarea{width:100%;max-width:100%;border:1px solid #a7b8af;border-radius:8px;padding:12px;background:var(--sn-surface);color:inherit}.vr-contact input[type=checkbox]{margin-right:8px}.vr-table{max-width:100%;overflow-x:auto}

/* Article links mirror the MobileScope shelf layout, with a visible touch target. */
.vr-card-button,a.vr-card-button,.sn-shelf-card__btn,a.sn-shelf-card__btn{display:inline-flex;position:relative;z-index:1;align-self:flex-start;align-items:center;justify-content:center;gap:8px;min-height:44px;margin-top:8px;padding:0 16px;font-size:14px;line-height:1.2;pointer-events:auto;text-decoration:none}
.vr-card-button:focus-visible,.sn-shelf-card__btn:focus-visible{outline:3px solid var(--sn-accent);outline-offset:3px}
.sn-prose a.sn-shelf-card__btn{color:#fff;text-decoration:none}
@media(max-width:767px){
 .sn-grid--3 .sn-card,.sn-grid--4 .sn-card{grid-template-columns:112px minmax(0,1fr);align-items:center}
 .sn-grid--3 .sn-card__media,.sn-grid--4 .sn-card__media{height:auto;min-height:0;aspect-ratio:1;align-self:center;background:transparent}
 .sn-grid--3 .sn-card__img,.sn-grid--4 .sn-card__img{object-fit:contain}
 .sn-grid--3 .sn-card__media .sn-badge,.sn-grid--4 .sn-card__media .sn-badge{display:none}
 .sn-card__excerpt{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:13px}
 .sn-card__meta{flex-wrap:wrap;font-size:11px;gap:4px}
 .sn-card__title,.sn-shelf-card__title{font-size:15px;line-height:1.35}
 .sn-shelf-card{grid-template-columns:108px minmax(0,1fr);gap:12px}
 .sn-shelf-card__body{padding:14px 12px 14px 0}
 .sn-shelf-card__cat{font-size:10px;letter-spacing:.04em}
 .sn-prose .sn-inline-related{margin:28px 0}
}
@media(max-width:360px){.sn-shelf-card{grid-template-columns:88px minmax(0,1fr);gap:10px}.sn-grid--3 .sn-card,.sn-grid--4 .sn-card{grid-template-columns:88px minmax(0,1fr)}.vr-card-button,a.vr-card-button,.sn-shelf-card__btn,a.sn-shelf-card__btn{padding-inline:13px}}

/* White studio vehicle images and an article-first homepage. */
.vr-editorial-intro{background:#fff;color:#202a25;border-bottom:1px solid #e1e8e3;padding:42px 0 32px}
.vr-editorial-intro h1{font-size:clamp(32px,4vw,48px);line-height:1.15;letter-spacing:-.045em;margin:12px 0 16px;color:#202a25}
.vr-editorial-intro h1 span{color:#06734d}
.vr-editorial-intro>div>p:last-of-type{max-width:690px;color:#51615a;font-size:16px;line-height:1.7;margin-bottom:22px}
.vr-category-links{display:flex;flex-wrap:wrap;gap:10px}
.vr-category-links a{display:inline-flex;gap:8px;align-items:center;min-height:44px;padding:9px 15px;border:1px solid #ceddd4;border-radius:30px;color:#164b37;background:#f5faf7;font-size:13px;font-weight:700;text-decoration:none}
.vr-category-links a:hover{background:#e3f5eb;border-color:#06734d}
.vr-guide-section{scroll-margin-top:105px}
.vr-guide-section .sn-section__head{margin-bottom:8px}
.vr-section-dek{color:var(--sn-text-2);font-size:14px;margin:0 0 22px}
.sn-card__media,.sn-shelf-card__media{background:#fff!important}
.sn-card__media{aspect-ratio:4/3}
.sn-card__img,.sn-shelf-card__media img{object-fit:contain;padding:6px}
.sn-article__image>img{object-fit:contain;background:#fff}
.vr-quick-answer{background:var(--sn-accent-soft);border-left:4px solid var(--sn-accent);padding:22px 24px;margin:26px 0;border-radius:0 10px 10px 0}
.sn-table-wrap{max-width:100%;overflow-x:auto;margin:24px 0}
.sn-table-wrap table{min-width:480px}
.sn-prose .sn-table-wrap th{white-space:normal}
@media(max-width:767px){.vr-editorial-intro{padding:27px 0 25px}.vr-editorial-intro>div>p:last-of-type{font-size:14px}.vr-category-links{gap:7px}.vr-category-links a{padding:8px 11px;font-size:12px}.vr-section-dek{font-size:13px;margin-bottom:16px}.sn-grid--3,.sn-grid--4{grid-template-columns:1fr}.sn-grid--3 .sn-card,.sn-grid--4 .sn-card{display:grid}.sn-card__img{padding:4px}}