/* =============================================================
   COMPONENTS — one section per component, matching
   application/views/components/. Order: cards, verdict system,
   content, commerce, conversion, ui.
   ============================================================= */

/* ---- Card foundation ---- */
.card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: transform var(--t-base) var(--ease-out),
		box-shadow var(--t-base) var(--ease-out),
		border-color var(--t-base) var(--ease-out);
}
.card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
	border-color: var(--border-strong);
}
.card__body {
	padding: var(--s-5);
}
.card__media {
	aspect-ratio: 16 / 9;
	background: var(--surface-alt);
}
.card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.card__meta {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	font-size: var(--text-caption);
	color: var(--text-muted);
}
.card__title {
	font-size: var(--text-h4);
	margin-bottom: var(--s-2);
}
.card__title a {
	color: var(--text-heading);
}
.card__title a:hover {
	color: var(--color-primary);
	text-decoration: none;
}
.card__excerpt {
	font-size: var(--text-small);
	color: var(--text-muted);
	margin: 0;
}

/* ---- Verdict score — the signature element.
   A score chip + 5-notch segmented meter used identically on
   cards, reviews, tables. One visual language for "how good". */
.verdict {
	display: inline-flex;
	align-items: center;
	gap: var(--s-3);
}
.verdict__score {
	font-family: var(--font-data);
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--text-heading);
	background: var(--color-accent-soft);
	border-radius: var(--radius-sm);
	padding: 0.15em 0.45em;
	line-height: 1.3;
}
.verdict__meter {
	display: inline-flex;
	gap: 3px;
}
.verdict__notch {
	width: 14px;
	height: 6px;
	border-radius: 2px;
	background: var(--border);
}
.verdict__notch.is-on {
	background: var(--color-accent);
}
.verdict__notch.is-half {
	background: linear-gradient(
		90deg,
		var(--color-accent) 50%,
		var(--border) 50%
	);
}
.verdict__label {
	font-size: var(--text-caption);
	color: var(--text-muted);
}
.verdict--lg .verdict__score {
	font-size: 1.6rem;
	padding: 0.2em 0.5em;
}
.verdict--lg .verdict__notch {
	width: 22px;
	height: 8px;
}

/* ---- Product card ---- */
.product-card {
	position: relative;
}
.product-card__head {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	margin-bottom: var(--s-4);
}
.product-card__logo {
	width: 52px;
	height: 52px;
	flex-shrink: 0;
	border-radius: var(--radius-md);
	border: 1px solid var(--border);
	background: var(--surface-alt);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.2rem;
	color: var(--color-primary);
	overflow: hidden;
}
.product-card__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.product-card__rank {
	position: absolute;
	top: -1px;
	left: var(--s-5);
	background: var(--harbor-900);
	color: #fff;
	font-family: var(--font-data);
	font-size: var(--text-caption);
	padding: 0.35em 0.8em;
	border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.product-card__badge {
	position: absolute;
	top: var(--s-4);
	right: var(--s-4);
}
.product-card__price {
	font-family: var(--font-data);
	font-size: var(--text-small);
	color: var(--text-heading);
}
.product-card__actions {
	display: flex;
	gap: var(--s-3);
	margin-top: var(--s-4);
}

/* ---- Category card ---- */
.category-card {
	display: flex;
	align-items: flex-start;
	gap: var(--s-4);
	padding: var(--s-5);
}
.category-card__icon {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-md);
	background: var(--color-primary-soft);
	color: var(--color-primary);
	font-size: 1.2rem;
}
.category-card h3 {
	font-size: var(--text-h5);
	margin-bottom: var(--s-1);
}
.category-card p {
	font-size: var(--text-caption);
	color: var(--text-muted);
	margin: 0;
}

/* ---- Comparison (vs) card ---- */
.vs-card__pair {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--s-3);
	margin-bottom: var(--s-4);
}
.vs-card__side {
	text-align: center;
}
.vs-card__vs {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--text-caption);
	color: var(--text-muted);
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	padding: 0.4em 0.7em;
}

/* ---- Author card ---- */
.author-card {
	display: flex;
	gap: var(--s-4);
	align-items: center;
	max-width: 100%;
}
.author-card__avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--color-primary-soft);
	color: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-weight: 600;
	overflow: hidden;
	flex-shrink: 0;
}
.author-card__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* The text block next to the avatar has no intrinsic min-width in a flex
   row, so a long author name/title combo (name · date · reading time)
   was overflowing past the avatar instead of wrapping. */
.author-card > div {
	min-width: 0;
}
.author-card__name {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--text-heading);
	overflow-wrap: break-word;
	word-break: break-word;
}
.author-card__title {
	font-size: var(--text-caption);
	color: var(--text-muted);
	overflow-wrap: break-word;
	word-break: break-word;
}

/* ---- Article prose ---- */
/* This content is the money pages: article/guide/review/comparison/best-list
   bodies come straight from the CKEditor field in the CMS, so we cannot
   control what markup ends up in $content_html — pasted tables, code
   blocks, embeds, oversized images, long URLs. Every element that can be
   wider than its container gets an explicit constraint here so no single
   editor paste can break the layout on a phone. `.prose` itself is also
   a block-formatting context (overflow: hidden picks up any accidental
   negative-margin or absolutely-positioned child) as a final backstop. */
.prose {
	max-width: 100ch;
	overflow-wrap: break-word;
	word-break: break-word;
	overflow-x: hidden;
}
.prose * {
	max-width: 100%;
}
.prose h2 {
	margin-top: var(--s-7);
	scroll-margin-top: calc(var(--header-h) + var(--s-4));
}
.prose h3 {
	margin-top: var(--s-6);
	scroll-margin-top: calc(var(--header-h) + var(--s-4));
}
.prose img,
.prose video,
.prose iframe,
.prose embed,
.prose object {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
	margin-block: var(--s-5);
	display: block;
}
/* Long unbroken strings (email addresses, bare URLs, mailto: links in the
   legal pages) have no natural break point, so on a narrow phone viewport
   they were overflowing past the edge of the screen instead of wrapping. */
.prose a {
	text-decoration: underline;
	text-underline-offset: 3px;
	overflow-wrap: break-word;
	word-break: break-word;
}
/* Pasted tables (fee comparisons, spec grids) are usually wider than a
   phone screen no matter how much we shrink the font — rather than
   crushing every cell unreadably small, let the table scroll horizontally
   within its own box instead of blowing out the page width. */
.prose table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-collapse: collapse;
	margin-block: var(--s-5);
	font-size: var(--text-small);
}
.prose th,
.prose td {
	padding: var(--s-2) var(--s-3);
	border: 1px solid var(--border);
	white-space: nowrap;
}
.prose pre {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding: var(--s-4);
	border-radius: var(--radius-md);
	background: var(--surface-alt);
	white-space: pre-wrap;
	word-break: break-word;
}
.prose code {
	overflow-wrap: break-word;
	word-break: break-word;
}
.prose blockquote {
	max-width: 100%;
	margin: var(--s-5) 0;
	padding: var(--s-4) var(--s-5);
	border-left: 3px solid var(--color-accent);
	background: var(--surface-alt);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.prose ul,
.prose ol {
	padding-left: var(--s-6);
}
@media (max-width: 560px) {
	.prose ul,
	.prose ol {
		padding-left: var(--s-5);
	}
	.prose blockquote {
		padding: var(--s-3) var(--s-4);
	}
	.prose h3 {
		font-size: 1.15rem;
	}
	.prose h4 {
		font-size: 1.05rem;
	}
}

/* ---- Table of contents ---- */
.toc {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: var(--s-5);
	max-width: 100%;
	box-sizing: border-box;
}
.prose > .toc {
	margin-bottom: var(--s-6);
}
.toc__title {
	font-size: var(--text-h6);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--text-muted);
	margin-bottom: var(--s-3);
	font-family: var(--font-display);
	font-weight: 600;
}
.toc ol {
	list-style: none;
	margin: 0;
	padding: 0;
}
.toc li {
	margin: 0;
}
.toc a {
	display: block;
	font-size: var(--text-small);
	color: var(--text-muted);
	padding: var(--s-2) var(--s-3);
	border-left: 2px solid var(--border);
	overflow-wrap: break-word;
	word-break: break-word;
}
.toc a:hover,
.toc a.is-active {
	color: var(--color-primary);
	border-left-color: var(--color-accent);
	text-decoration: none;
	background: var(--surface-alt);
}
.toc .toc--h3 a {
	padding-left: var(--s-5);
}

/* ---- Pros & cons ---- */
.proscons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s-4);
	margin-block: var(--s-5);
}
.proscons__col {
	border-radius: var(--radius-lg);
	padding: var(--s-5);
}
.proscons__col--pros {
	background: var(--color-accent-soft);
}
.proscons__col--cons {
	background: var(--signal-red-bg);
}
.proscons h4 {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	font-size: var(--text-h5);
}
.proscons__col--pros h4 {
	color: var(--color-success);
}
.proscons__col--cons h4 {
	color: var(--color-danger);
}
.proscons ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.proscons li {
	display: flex;
	gap: var(--s-2);
	font-size: var(--text-small);
	margin-bottom: var(--s-2);
	color: var(--text-heading);
}
.proscons li::before {
	flex-shrink: 0;
	font-weight: 700;
}
.proscons__col--pros li::before {
	content: "+";
	color: var(--color-success);
}
.proscons__col--cons li::before {
	content: "–";
	color: var(--color-danger);
}
@media (max-width: 640px) {
	.proscons {
		grid-template-columns: 1fr;
	}
}

/* ---- FAQ (accessible accordion) ---- */
.faq {
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--surface);
	overflow: hidden;
}
.faq details {
	border-bottom: 1px solid var(--border);
}
.faq details:last-child {
	border-bottom: 0;
}
.faq summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--s-4);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--text-h5);
	color: var(--text-heading);
	padding: var(--s-4) var(--s-5);
}
.faq summary::-webkit-details-marker {
	display: none;
}
.faq summary::after {
	content: "+";
	font-size: 1.3rem;
	color: var(--text-muted);
	transition: transform var(--t-fast) var(--ease-out);
}
.faq details[open] summary::after {
	transform: rotate(45deg);
}
.faq details > div {
	padding: 0 var(--s-5) var(--s-5);
	font-size: var(--text-small);
}

/* ---- Spec table ---- */
.spec-table {
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--surface);
}
.spec-table td:first-child {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--text-heading);
	width: 40%;
}
.spec-table td:last-child {
	font-family: var(--font-data);
	font-size: var(--text-small);
}

/* ---- Comparison table ---- */
.compare-wrap {
	overflow-x: auto;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--surface);
}
.compare-table {
	min-width: 640px;
}
.compare-table thead th {
	background: var(--surface-alt);
	position: sticky;
	top: 0;
}
.compare-table th:first-child,
.compare-table td:first-child {
	position: sticky;
	left: 0;
	background: var(--surface);
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--text-heading);
}
.compare-table .is-winner {
	background: var(--color-accent-soft);
}
.compare-table__product {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	align-items: flex-start;
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--text-small);
}

/* ---- Rating stars (reviews summary) ---- */
.stars {
	display: inline-flex;
	gap: 2px;
	color: var(--color-accent);
}

/* ---- Newsletter ---- */
.newsletter {
	background: var(--harbor-900);
	border-radius: var(--radius-lg);
	color: #c9d6e2;
	padding: var(--s-6);
	scroll-margin-top: calc(var(--header-h) + var(--s-5));
}
[data-theme="dark"] .newsletter {
	background: var(--surface);
	border: 1px solid var(--border);
	color: var(--text-body);
}
.newsletter h3 {
	color: #fff;
}
[data-theme="dark"] .newsletter h3 {
	color: var(--text-heading);
}
.newsletter form {
	display: flex;
	gap: var(--s-3);
	margin-top: var(--s-4);
}
.newsletter .input {
	border-color: transparent;
}
.newsletter__note {
	font-size: var(--text-caption);
	margin: var(--s-3) 0 0;
	opacity: 0.75;
}
@media (max-width: 560px) {
	.newsletter form {
		flex-direction: column;
	}
}

/* ---- Affiliate CTA panel ---- */
.affiliate-cta {
	display: flex;
	align-items: center;
	gap: var(--s-5);
	background: var(--surface);
	border: 1px solid var(--border);
	border-left: 4px solid var(--color-accent);
	border-radius: var(--radius-lg);
	padding: var(--s-5);
	margin-block: var(--s-6);
}
.affiliate-cta__body {
	flex: 1;
}
.affiliate-cta__body h4 {
	margin-bottom: var(--s-1);
}
.affiliate-cta__body p {
	margin: 0;
	font-size: var(--text-small);
	color: var(--text-muted);
}
@media (max-width: 640px) {
	.affiliate-cta {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ---- Sticky CTA bar ---- */
.sticky-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	background: var(--surface);
	border-top: 1px solid var(--border);
	box-shadow: 0 -8px 30px rgba(16, 32, 48, 0.1);
	transform: translateY(110%);
	transition: transform var(--t-base) var(--ease-out);
}
.sticky-cta.is-visible {
	transform: translateY(0);
}
.sticky-cta__inner {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	padding-block: var(--s-3);
}
.sticky-cta__inner .verdict {
	margin-left: auto;
}
@media (max-width: 640px) {
	.sticky-cta__name,
	.sticky-cta .verdict__meter {
		display: none;
	}
}

/* ---- Lead form ---- */
.lead-form {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: var(--s-5);
}
.lead-form__success {
	color: var(--color-success);
	font-weight: 600;
	font-size: var(--text-small);
}

/* ---- Trust strip ---- */
.trust-strip {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-5);
	align-items: center;
	font-size: var(--text-caption);
	color: var(--text-muted);
}
.trust-strip__item {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
}
.trust-strip__item svg {
	color: var(--color-accent);
}

/* ---- Pagination ---- */
.pagination {
	display: flex;
	gap: var(--s-2);
	justify-content: center;
	margin-top: var(--s-7);
}
.pagination a,
.pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: var(--s-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	font-family: var(--font-data);
	font-size: var(--text-small);
	color: var(--text-body);
}
.pagination a:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
	text-decoration: none;
}
.pagination .is-current {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}

/* ---- Section head ---- */
.section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--s-3) var(--s-4);
	margin-bottom: var(--s-6);
}
.section-head > div {
	min-width: 0;
}
.section-head h2 {
	margin: 0;
}
.section-head__more {
	font-family: var(--font-display);
	font-size: var(--text-small);
	font-weight: 600;
	white-space: nowrap;
}
/* On narrow screens a long heading + a nowrap "View all →" link on the
   same row doesn't fit — it was pushing content past the edge of the
   viewport. Drop the link onto its own line under the heading instead. */
@media (max-width: 560px) {
	.section-head {
		flex-direction: column;
		align-items: flex-start;
	}
	.section-head__more {
		white-space: normal;
	}
}

/* ---- Hero (home) ---- */
.hero {
	position: relative;
	overflow: hidden;
	padding-block: var(--s-9) var(--s-8);
	background: radial-gradient(
		120% 100% at 82% 0%,
		var(--brand-100) 0%,
		transparent 55%
	);
}
[data-theme="dark"] .hero {
	background: radial-gradient(
		120% 100% at 82% 0%,
		var(--brand-800) 0%,
		transparent 55%
	);
}
.hero__grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: var(--s-8);
	align-items: center;
}
.hero__inner {
	max-width: 640px;
}
.hero__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	padding: 0.4em 0.9em 0.4em 0.5em;
	font-size: var(--text-caption);
	font-weight: 600;
	color: var(--text-heading);
	box-shadow: var(--shadow-sm);
	margin-bottom: var(--s-5);
}
.hero__badge span.dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-accent);
	flex-shrink: 0;
}
.hero h1 em {
	font-style: italic;
	color: var(--color-primary);
}
.hero h1 .hero__accent {
	color: var(--color-accent);
	font-style: italic;
}
.hero__search {
	margin-top: var(--s-6);
	max-width: 560px;
}
.searchbox {
	display: flex;
	background: var(--surface);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-pill);
	padding: var(--s-1);
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--t-base) var(--ease-out),
		border-color var(--t-base) var(--ease-out);
}
.searchbox:focus-within {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 4px var(--color-primary-soft);
}
.searchbox input {
	flex: 1;
	border: 0;
	background: none;
	font-size: var(--text-small);
	padding: 0.7em 1.2em;
	color: var(--text-body);
}
.searchbox input:focus {
	outline: none;
}
.searchbox .btn {
	border-radius: var(--radius-pill);
	background: var(--color-accent);
	flex-shrink: 0;
}
.searchbox .btn:hover {
	background: var(--color-accent-strong);
}
/* Small screens: the pill row (input + button side by side) doesn't have
   room for both at full size, so the button was pushed past the edge of
   the viewport. Stack it below the input instead, centered. */
@media (max-width: 560px) {
	.searchbox {
		flex-direction: column;
		border-radius: var(--radius-lg);
		padding: var(--s-3);
		gap: var(--s-3);
	}
	.searchbox input {
		width: 100%;
		text-align: center;
		padding: 0.8em 1em;
	}
	.searchbox .btn {
		align-self: center;
		width: auto;
		min-width: 140px;
	}
}
.hero__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	margin-top: var(--s-4);
}
.hero__chips a {
	font-size: var(--text-caption);
}
.hero__stats {
	display: flex;
	gap: var(--s-6);
	margin-top: var(--s-7);
	flex-wrap: wrap;
}
.stat__value {
	font-family: var(--font-data);
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--color-primary);
}
.stat__label {
	font-size: var(--text-caption);
	color: var(--text-muted);
}

/* ---- Hero visual: verdict scorecard deck ----
   A stack of up to 3 tilted, overlapping product cards. The front card
   is upright and in focus; the two behind fan up-and-right. Gentle idle
   float; hovering the deck spreads the cards further apart. */
.hero__visual {
	position: relative;
}
.hero-deck {
	position: relative;
	height: 350px;
	margin-inline: auto;
	max-width: min(360px, 90vw);
	animation: hero-deck-float 6s var(--ease-out) infinite;
}
.hero-deck__card {
	position: absolute;
	inset: 0;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	padding: var(--s-5) var(--s-6);
	display: flex;
	flex-direction: column;
	transition: transform var(--t-slow) var(--ease-spring),
		box-shadow var(--t-base) var(--ease-out);
	transform-origin: bottom center;
	overflow: hidden;
}
.hero-deck__card--3 {
	z-index: 1;
	transform: translate(34px, -34px) rotate(6deg) scale(0.92);
	box-shadow: var(--shadow-md);
}
.hero-deck__card--2 {
	z-index: 2;
	transform: translate(17px, -17px) rotate(3deg) scale(0.96);
	box-shadow: var(--shadow-md);
}
.hero-deck__card--1 {
	z-index: 3;
	transform: translate(0, 0) rotate(0) scale(1);
	box-shadow: var(--shadow-lg);
}
/* Fan open on hover / focus of the visual */
.hero__visual:hover .hero-deck__card--3,
.hero-deck:focus-within .hero-deck__card--3 {
	transform: translate(52px, -46px) rotate(8deg) scale(0.92);
}
.hero__visual:hover .hero-deck__card--2,
.hero-deck:focus-within .hero-deck__card--2 {
	transform: translate(28px, -24px) rotate(4.5deg) scale(0.96);
}

.hero-deck__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--s-4);
}
.hero-deck__logo {
	width: 42px;
	height: 42px;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--brand-100);
	color: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.1rem;
}
.hero-deck__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.hero-deck__rank {
	font-family: var(--font-data);
	font-weight: 700;
	font-size: var(--text-caption);
	color: var(--color-accent-strong);
	background: var(--color-accent-soft);
	padding: 0.2em 0.6em;
	border-radius: var(--radius-pill);
	white-space: nowrap;
}
.hero-deck__meta {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	flex-wrap: wrap;
	margin-bottom: var(--s-2);
}
.hero-deck__cat {
	font-size: var(--text-caption);
	font-weight: 600;
	color: var(--color-primary);
	background: var(--color-primary-soft);
	padding: 0.2em 0.6em;
	border-radius: var(--radius-pill);
}
.hero-deck__meta .badge--pick {
	font-size: 10.5px;
	padding: 0.2em 0.55em;
}
.hero-deck__name {
	font-size: var(--text-h4);
	margin-bottom: var(--s-1);
}
.hero-deck__tagline {
	font-size: var(--text-small);
	color: var(--text-muted);
	margin: 0 0 var(--s-3);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.hero-deck__why {
	display: flex;
	align-items: flex-start;
	gap: var(--s-2);
	font-size: var(--text-small);
	color: var(--text-heading);
	font-weight: 500;
	margin: 0 0 var(--s-4);
}
.hero-deck__why span {
	color: var(--color-success);
	font-weight: 700;
	flex-shrink: 0;
}
.hero-deck__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
	flex-wrap: wrap;
	margin-top: auto;
}
.hero-deck__price {
	font-family: var(--font-data);
	font-size: var(--text-caption);
	font-weight: 700;
	color: var(--text-heading);
}

/* Shuffle control */
.hero-deck__controls {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	justify-content: center;
	margin-top: var(--s-6);
}
.hero-deck__btn {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	font-family: var(--font-display);
	font-size: var(--text-small);
	font-weight: 600;
	color: var(--color-primary);
	background: var(--surface);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-pill);
	padding: 0.55em 1.1em;
	cursor: pointer;
	transition: border-color var(--t-fast) var(--ease-out),
		color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.hero-deck__btn:hover {
	border-color: var(--color-accent);
	color: var(--color-accent-strong);
}
.hero-deck__btn:active {
	transform: scale(0.96);
}
.hero-deck__btn svg {
	transition: transform var(--t-base) var(--ease-out);
}
.hero-deck__btn:hover svg {
	transform: rotate(90deg);
}
.hero-deck__hint {
	color: var(--text-muted);
}
@media (max-width: 480px) {
	.hero-deck__hint {
		display: none;
	}
}

@keyframes hero-deck-float {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-8px);
	}
}

.hero-card__float {
	position: absolute;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	padding: var(--s-3) var(--s-4);
	font-size: var(--text-caption);
	font-weight: 600;
	z-index: 4;
}
.hero-card__float--top {
	top: -14px;
	right: -8px;
	color: var(--color-success);
}
.hero-card__float--bottom {
	bottom: -10px;
	left: -16px;
	color: var(--color-primary);
}
@media (max-width: 1024px) {
	.hero__grid {
		grid-template-columns: 1fr;
	}
	.hero__visual {
		max-width: 420px;
		margin-inline: auto;
	}
}
/* Hero deck on mobile/tablet (single-column hero): drop the fanned overlap
   entirely. Show ONE full-width, fully-readable card at a time — the shuffle
   button + autoplay cycle which product is shown. No absolute stacking, so
   nothing overflows and the text is never clipped. */
@media (max-width: 900px) {
	.hero__visual {
		margin-top: var(--s-5);
		max-width: 520px;
	}
	.hero-deck {
		position: static;
		height: auto;
		max-width: 100%;
		animation: none;
		transform: none;
	}
	.hero-deck__card {
		position: static;
		inset: auto;
		width: 100%;
		transform: none !important;
		box-shadow: var(--shadow-md);
	}
	.hero-deck__card--2,
	.hero-deck__card--3 {
		display: none;
	}
	.hero-card__float {
		display: none;
	}
	.hero-deck__controls {
		margin-top: var(--s-4);
	}
}

/* ---- Feature list (about etc.) ---- */
.feature-card {
	padding: var(--s-5);
}
.feature-card__icon {
	width: 44px;
	height: 44px;
	border-radius: var(--radius-md);
	background: var(--color-accent-soft);
	color: var(--color-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--s-4);
	flex-shrink: 0;
}
.feature-card__icon--brand {
	background: var(--color-primary-soft);
	color: var(--color-primary);
}
.feature-card__icon--ok {
	background: var(--signal-green-bg);
	color: var(--signal-green);
}
.feature-card__icon--warn {
	background: var(--signal-amber-bg);
	color: var(--color-warning);
}

/* ---- About page extras ---- */
.proof-list__icon--no {
	background: var(--signal-red-bg);
	color: var(--color-danger);
}
.about-rubric {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-3) var(--s-4);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: var(--s-4) var(--s-5);
}
.about-rubric .chip-row {
	gap: var(--s-2);
}
.about-rubric .tag {
	background: var(--color-primary-soft);
	color: var(--color-primary);
	border-color: transparent;
	font-weight: 600;
}
.cat-showcase__item--soon {
	opacity: 0.82;
	cursor: default;
}
.cat-showcase__item--soon:hover {
	transform: none;
	box-shadow: var(--shadow-sm);
}
.about-placeholder {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	text-align: center;
	margin-top: var(--s-6);
	padding: var(--s-6);
	border: 2px dashed var(--border-strong);
	border-radius: var(--radius-lg);
	background: var(--surface-alt);
	color: var(--text-muted);
	font-size: var(--text-small);
}
.about-placeholder strong {
	font-family: var(--font-data);
	color: var(--color-primary);
	letter-spacing: 0.04em;
}
.about-callout {
	display: flex;
	gap: var(--s-4);
	align-items: flex-start;
	background: linear-gradient(155deg, var(--brand-50), var(--surface));
	border: 1px solid var(--brand-100);
	border-radius: var(--radius-lg);
	padding: var(--s-5) var(--s-6);
}
[data-theme="dark"] .about-callout {
	background: var(--surface-alt);
	border-color: var(--border);
}
.about-callout__icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--color-accent-soft);
	color: var(--color-accent-strong);
	display: flex;
	align-items: center;
	justify-content: center;
}
.about-callout p {
	margin: 0;
	font-size: var(--text-small);
	color: var(--text-heading);
}

/* ---- Calculator ---- */
.calc {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s-6);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	padding: var(--s-6);
	box-shadow: var(--shadow-md);
}
.calc__result {
	background: linear-gradient(155deg, var(--brand-800), var(--brand-900));
	color: #fff;
	border-radius: var(--radius-lg);
	padding: var(--s-6);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.calc__result .t-caption {
	color: #b7adef;
}
.calc__headline {
	font-family: var(--font-data);
	font-size: 2.4rem;
	font-weight: 700;
	color: var(--spark-400);
}
.calc__rows {
	margin-top: var(--s-4);
	display: grid;
	gap: var(--s-2);
	font-size: var(--text-small);
}
.calc__row {
	display: flex;
	justify-content: space-between;
	border-bottom: 1px dashed rgba(255, 255, 255, 0.18);
	padding-bottom: var(--s-2);
}
.calc__row span {
	color: #c9c1f2;
}
.calc__row strong {
	font-family: var(--font-data);
	color: #fff;
}
@media (max-width: 768px) {
	.calc {
		grid-template-columns: 1fr;
	}
}

/* ---- Tabs (secondary-color pill tabs) ---- */
.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
}
.tabs__btn span:first-child {
	margin-right: 0.35em;
}
.tabs__btn {
	font-family: var(--font-display);
	font-size: var(--text-small);
	font-weight: 600;
	padding: 0.65em 1.3em;
	border-radius: var(--radius-pill);
	border: 1px solid var(--border-strong);
	background: var(--surface);
	color: var(--text-body);
	cursor: pointer;
	transition: all var(--t-fast) var(--ease-out);
}
.tabs__btn:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
}
.tabs__btn.is-active {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: #fff;
	box-shadow: var(--shadow-sm);
}

/* ---- Category showcase (home) ---- */
.cat-showcase {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--s-5);
}
.cat-showcase__item {
	display: block;
	padding: var(--s-6) var(--s-5);
	border-radius: var(--radius-lg);
	background: var(--surface);
	border: 1px solid var(--border);
	transition: transform var(--t-base) var(--ease-out),
		box-shadow var(--t-base) var(--ease-out),
		border-color var(--t-base) var(--ease-out);
}
.cat-showcase__item:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
	border-color: var(--border-strong);
	text-decoration: none;
}
.cat-showcase__icon {
	width: 52px;
	height: 52px;
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	margin-bottom: var(--s-4);
	background: var(--brand-100);
	color: var(--color-primary);
}
.cat-showcase__item:nth-child(2) .cat-showcase__icon {
	background: var(--spark-100);
	color: var(--spark-600);
}
.cat-showcase__item:nth-child(3) .cat-showcase__icon {
	background: var(--signal-green-bg);
	color: var(--signal-green);
}
.cat-showcase__item h3 {
	font-size: var(--text-h4);
	margin-bottom: var(--s-2);
}
.cat-showcase__item p {
	font-size: var(--text-small);
	color: var(--text-muted);
	margin-bottom: var(--s-3);
}
.cat-showcase__count {
	font-family: var(--font-data);
	font-size: var(--text-caption);
	color: var(--color-accent);
	font-weight: 700;
}
@media (max-width: 1024px) {
	.cat-showcase {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 560px) {
	.cat-showcase {
		grid-template-columns: 1fr;
	}
}

/* ---- Methodology / steps (home "how we test") ---- */
.steps {
	counter-reset: step;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--s-5);
}
.step {
	position: relative;
	padding: var(--s-5);
	border-radius: var(--radius-lg);
	background: var(--surface);
	border: 1px solid var(--border);
}
.step__num {
	counter-increment: step;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--color-primary);
	color: #fff;
	font-family: var(--font-data);
	font-weight: 700;
	margin-bottom: var(--s-4);
}
.step__num::before {
	content: counter(step);
}
.step h3 {
	font-size: var(--text-h5);
	margin-bottom: var(--s-2);
}
.step p {
	font-size: var(--text-small);
	color: var(--text-muted);
	margin: 0;
}
@media (max-width: 1024px) {
	.steps {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 560px) {
	.steps {
		grid-template-columns: 1fr;
	}
}

/* ---- Review hero verdict box ---- */
.review-verdict {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--s-5);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: var(--s-5);
	margin-block: var(--s-5);
}
@media (max-width: 768px) {
	.review-verdict {
		grid-template-columns: 1fr;
	}
}

/* ---- Testimonials ---- */
.testimonials-section {
	background: var(--surface);
	border-block: 1px solid var(--border);
}
.testimonials {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s-5);
}
.testimonial-card {
	margin: 0;
	background: var(--surface-alt);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: var(--s-5);
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
}
.testimonial-card__stars {
	color: var(--color-accent);
	font-size: 0.9rem;
	letter-spacing: 0.1em;
}
.testimonial-card blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--font-display);
	font-size: 1.05rem;
	color: var(--text-heading);
	font-weight: 500;
}
.testimonial-card figcaption {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	margin-top: auto;
}
.testimonial-card__avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	flex-shrink: 0;
	background: var(--color-primary-soft);
	color: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-weight: 700;
}
.testimonial-card figcaption strong {
	display: block;
	font-size: var(--text-small);
	color: var(--text-heading);
}
@media (max-width: 900px) {
	.testimonials {
		grid-template-columns: 1fr;
	}
}

/* ---- CTA banner ---- */
.cta-banner {
	position: relative;
	overflow: hidden;
	background: linear-gradient(
		155deg,
		var(--brand-800),
		var(--brand-900) 65%,
		#08051f
	);
	border-radius: var(--radius-xl);
	padding: var(--s-8) var(--s-7);
	text-align: center;
}
.cta-banner__glow {
	position: absolute;
	inset: -40% -10% auto auto;
	width: 60%;
	aspect-ratio: 1;
	background: radial-gradient(circle, rgba(253, 113, 0, 0.35), transparent 70%);
	filter: blur(10px);
	pointer-events: none;
}
.cta-banner__content {
	position: relative;
	max-width: 620px;
	margin-inline: auto;
}
.cta-banner h2 {
	color: #fff;
	margin-bottom: var(--s-3);
}
.cta-banner p {
	color: #c9c1f2;
	margin-bottom: var(--s-6);
}
.eyebrow--invert {
	color: var(--spark-400);
}
.cta-banner__actions {
	display: flex;
	gap: var(--s-4);
	justify-content: center;
	flex-wrap: wrap;
}
.cta-banner__ghost {
	border-color: rgba(255, 255, 255, 0.3);
	color: #fff;
}
.cta-banner__ghost:hover {
	border-color: #fff;
	color: #fff;
}
@media (max-width: 640px) {
	.cta-banner {
		padding: var(--s-7) var(--s-5);
	}
}

/* ---- Trust bar ---- */
.trust-bar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-6);
	justify-content: center;
	align-items: center;
	padding-block: var(--s-5);
	font-size: var(--text-small);
	color: var(--text-body);
}
.trust-bar__item {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
}
.trust-bar__icon {
	color: var(--color-accent);
	display: inline-flex;
}
.trust-bar__item strong {
	color: var(--text-heading);
}
@media (max-width: 640px) {
	.trust-bar {
		justify-content: flex-start;
		gap: var(--s-4);
	}
}

/* ---- Lead form engagement extras ---- */
.lead-form__kicker {
	margin-bottom: var(--s-3);
}
.lead-form__fine {
	margin: var(--s-3) 0 0;
}
.lead-form__fine a {
	color: inherit;
	text-decoration: underline;
}

/* ---- Split panel (text + proof card) ---- */
.split-panel {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: var(--s-8);
	align-items: center;
	margin-bottom: var(--s-7);
}
.split-panel h2 {
	margin-bottom: var(--s-4);
}
.split-panel > div:first-child > p {
	margin-bottom: var(--s-4);
}

.quote-pull {
	margin: var(--s-5) 0;
	padding: var(--s-2) 0 var(--s-2) var(--s-5);
	border-left: 3px solid var(--color-accent);
	background: none;
	border-radius: 0;
	font-family: var(--font-display);
	font-size: 1.2rem;
	font-weight: 500;
	color: var(--text-heading);
	line-height: var(--leading-heading);
}

.proof-card {
	background: linear-gradient(165deg, var(--surface), var(--surface-alt));
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	padding: var(--s-6);
	box-shadow: var(--shadow-md);
}
.proof-card h6 {
	font-family: var(--font-display);
	font-size: var(--text-h6);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-primary);
	margin-bottom: var(--s-5);
}
.proof-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--s-4);
}
.proof-list li {
	display: flex;
	gap: var(--s-3);
	align-items: flex-start;
	font-size: var(--text-small);
	color: var(--text-body);
}
.proof-list__icon {
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--color-accent-soft);
	color: var(--color-accent-strong);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.8rem;
}
.proof-list strong {
	color: var(--text-heading);
}
@media (max-width: 900px) {
	.split-panel {
		grid-template-columns: 1fr;
	}
}

/* ---- Mini feature grid (per-vertical proof points) ---- */
.mini-feature-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--s-5);
}
.mini-feature {
	display: block;
	padding: var(--s-5);
	border-radius: var(--radius-lg);
	background: var(--surface);
	border: 1px solid var(--border);
	border-top: 3px solid var(--color-primary);
	transition: transform var(--t-base) var(--ease-out),
		box-shadow var(--t-base) var(--ease-out);
}
.mini-feature:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
	text-decoration: none;
}
.mini-feature--2 {
	border-top-color: var(--color-accent);
}
.mini-feature--3 {
	border-top-color: var(--signal-green);
}
.mini-feature--4 {
	border-top-color: var(--brand-500);
}
.mini-feature-grid--3 {
	grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
	.mini-feature-grid--3 {
		grid-template-columns: 1fr;
	}
}
.mini-feature__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-md);
	background: var(--color-primary-soft);
	color: var(--color-primary);
	font-size: 1.15rem;
	margin-bottom: var(--s-4);
}
.mini-feature h4 {
	font-size: var(--text-h5);
	margin-bottom: var(--s-2);
	color: var(--text-heading);
}
.mini-feature p {
	font-size: var(--text-small);
	color: var(--text-muted);
	margin-bottom: var(--s-3);
}
.mini-feature__link {
	font-family: var(--font-display);
	font-size: var(--text-caption);
	font-weight: 600;
	color: var(--color-primary);
}
@media (max-width: 1024px) {
	.mini-feature-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 560px) {
	.mini-feature-grid {
		grid-template-columns: 1fr;
	}
}

/* ---- Process (3-step visual walkthrough) ---- */
.process-head {
	max-width: 60ch;
	margin-bottom: var(--s-7);
}
.process-head p {
	margin-top: var(--s-3);
}
.process {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s-5);
}
.process::before {
	content: "";
	position: absolute;
	top: 24px;
	left: 12%;
	right: 12%;
	height: 2px;
	background: repeating-linear-gradient(
		90deg,
		var(--border-strong) 0 8px,
		transparent 8px 16px
	);
	z-index: 0;
}
.process__step {
	position: relative;
	z-index: 1;
	display: block;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: var(--s-6) var(--s-5) var(--s-5);
	transition: transform var(--t-base) var(--ease-out),
		box-shadow var(--t-base) var(--ease-out),
		border-color var(--t-base) var(--ease-out);
}
.process__step:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
	border-color: var(--color-accent);
	text-decoration: none;
}
.process__num {
	position: absolute;
	top: -14px;
	left: var(--s-5);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: linear-gradient(155deg, var(--brand-700), var(--brand-500));
	color: #fff;
	font-family: var(--font-data);
	font-weight: 700;
	font-size: 0.85rem;
	box-shadow: var(--shadow-sm);
}
.process__icon {
	display: inline-flex;
	color: var(--color-accent);
	margin: var(--s-3) 0 var(--s-4);
}
.process__step h3 {
	font-size: var(--text-h4);
	margin-bottom: var(--s-2);
}
.process__step p {
	font-size: var(--text-small);
	color: var(--text-muted);
	margin-bottom: var(--s-4);
}
.process__cta {
	font-family: var(--font-display);
	font-size: var(--text-caption);
	font-weight: 700;
	color: var(--color-primary);
}
@media (max-width: 900px) {
	.process {
		grid-template-columns: 1fr;
	}
	.process::before {
		display: none;
	}
}
.process--4 {
	grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1024px) {
	.process--4 {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 900px) {
	.process--4 {
		grid-template-columns: 1fr;
	}
}

/* ---- Shared section intro paragraph (eyebrow/title lede) ---- */
.section-intro {
	max-width: 70ch;
	margin-top: calc(var(--s-6) * -1 + var(--s-2));
	margin-bottom: var(--s-6);
}
@media (max-width: 768px) {
	.section-intro {
		margin-top: calc(var(--s-5) * -1 + var(--s-2));
		margin-bottom: var(--s-4);
	}
}

/* ---- Calculator suite v2: sliders, pills, gradient result card,
   donut/bar visuals, bracket table. Used on /calculators/* and home. ---- */

/* Styled range sliders */
.calc-field {
	margin-bottom: var(--s-5);
}
.calc-field__top {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--s-3);
	margin-bottom: var(--s-2);
}
.calc-field__top label {
	font-family: var(--font-display);
	font-size: var(--text-caption);
	font-weight: 700;
	color: var(--color-primary);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.calc-pill {
	font-family: var(--font-data);
	font-size: var(--text-small);
	font-weight: 700;
	color: var(--color-accent-strong);
	background: var(--color-accent-soft);
	padding: 0.25em 0.65em;
	border-radius: var(--radius-sm);
	white-space: nowrap;
}
.calc-range {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	border-radius: var(--radius-pill);
	background: var(--border-strong);
	outline: none;
}
.calc-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--color-accent);
	cursor: pointer;
	border: 3px solid var(--surface);
	box-shadow: 0 2px 8px rgba(253, 113, 0, 0.45);
}
.calc-range::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--color-accent);
	cursor: pointer;
	border: 3px solid var(--surface);
	box-shadow: 0 2px 8px rgba(253, 113, 0, 0.45);
}
.calc-field-2col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s-4);
}
@media (max-width: 560px) {
	.calc-field-2col {
		grid-template-columns: 1fr;
	}
}

/* Toggle group (filing status etc.) */
.calc-toggle-row {
	display: flex;
	gap: var(--s-2);
}
.calc-toggle-btn {
	flex: 1;
	padding: 0.7em;
	border-radius: var(--radius-md);
	border: 1.5px solid var(--border-strong);
	font-family: var(--font-display);
	font-size: var(--text-small);
	font-weight: 700;
	color: var(--text-muted);
	text-align: center;
	background: var(--surface);
	cursor: pointer;
	transition: all var(--t-fast) var(--ease-out);
}
.calc-toggle-btn.is-active {
	border-color: var(--color-accent);
	background: var(--color-accent-soft);
	color: var(--color-primary);
}

/* Quick-switch tab row between the 4 dedicated calculator pages */
.calc-tabs {
	display: flex;
	gap: var(--s-2);
	overflow-x: auto;
	padding-bottom: var(--s-2);
	margin-bottom: var(--s-6);
	scrollbar-width: none;
}
.calc-tabs::-webkit-scrollbar {
	display: none;
}
.calc-tabs__btn {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	flex-shrink: 0;
	padding: 0.75em 1.2em;
	border-radius: var(--radius-pill);
	border: 1.5px solid var(--border);
	background: var(--surface);
	font-family: var(--font-display);
	font-size: var(--text-small);
	font-weight: 700;
	color: var(--text-body);
	white-space: nowrap;
}
.calc-tabs__btn:hover {
	border-color: var(--color-accent);
	text-decoration: none;
	color: var(--text-heading);
}
.calc-tabs__btn.is-active {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}

/* Input card + results card layout (mirrors .calc but with more surface area) */
.calc-v2 {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: var(--s-6);
	align-items: start;
}
.calc-v2__inputs {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	padding: var(--s-6);
	box-shadow: var(--shadow-sm);
}
@media (max-width: 1000px) {
	.calc-v2 {
		grid-template-columns: 1fr;
	}
}

.calc-result-card {
	position: sticky;
	/* top: calc(var(--header-h) + var(--s-5)); */
	background: linear-gradient(
		150deg,
		var(--brand-700) 0%,
		var(--brand-800) 65%,
		var(--brand-900) 100%
	);
	border-radius: var(--radius-xl);
	padding: var(--s-6);
	color: #fff;
	box-shadow: var(--shadow-lg);
	position: relative;
	overflow: hidden;
}
.calc-result-card::after {
	content: "";
	position: absolute;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: var(--spark-500);
	opacity: 0.16;
	bottom: -100px;
	right: -70px;
	pointer-events: none;
}
/* Keep position:relative on mobile (not static) so overflow:hidden still
   clips the ::after glow — static detaches it and it escapes over the page. */
@media (max-width: 1000px) {
	.calc-result-card {
		position: relative;
		top: auto;
	}
}
.calc-result-card__label {
	font-family: var(--font-data);
	font-size: var(--text-caption);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #c9c1f2;
	position: relative;
}
.calc-result-card__hero {
	font-family: var(--font-display);
	font-size: clamp(1.9rem, 3.4vw, 2.6rem);
	font-weight: 700;
	margin-top: var(--s-2);
	position: relative;
	color: #fff;
}
.calc-result-card__sub {
	font-size: var(--text-small);
	color: #c9c1f2;
	margin-top: var(--s-1);
	position: relative;
}
/* Base result-row layout (used inside gradient result cards AND plain
   result blocks across the calculator suite) — this was previously
   undefined, so rows rendered with no spacing, no divider, and cramped
   text against each other. */
.result-rows {
	position: relative;
	margin-top: var(--s-5);
	padding-top: var(--s-4);
	border-top: 1px solid var(--border);
	display: grid;
	gap: var(--s-3);
}
.result-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s-3);
	font-size: var(--text-small);
}
.result-row span:first-child {
	color: var(--text-muted);
}
.result-row span:last-child,
.result-row strong {
	font-family: var(--font-data);
	font-weight: 700;
	color: var(--text-heading);
	white-space: nowrap;
}

.calc-result-card .result-rows {
	border-top-color: rgba(255, 255, 255, 0.16);
}
.calc-result-card .result-row span:first-child {
	color: #c9c1f2;
}
.calc-result-card .result-row span:last-child,
.calc-result-card .result-row strong {
	color: #fff;
	font-family: var(--font-data);
}

/* Donut chart (conic-gradient, mortgage breakdown) */
.calc-donut-wrap {
	display: flex;
	align-items: center;
	gap: var(--s-5);
	margin-top: var(--s-6);
	position: relative;
}
.calc-donut {
	width: 118px;
	height: 118px;
	border-radius: 50%;
	flex-shrink: 0;
	position: relative;
}
.calc-donut__inner {
	position: absolute;
	inset: 16px;
	background: var(--brand-800);
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-family: var(--font-data);
	font-size: var(--text-caption);
	text-align: center;
	color: #fff;
}
.calc-donut__inner span:last-child {
	opacity: 0.7;
	font-size: 10px;
}
.calc-legend {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	flex: 1;
	position: relative;
}
.calc-legend__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: var(--text-caption);
	gap: var(--s-3);
}
.calc-legend__label {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	color: #e3defa;
}
.calc-legend__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex-shrink: 0;
}
.calc-legend__val {
	font-family: var(--font-data);
	font-weight: 700;
	color: #fff;
}
@media (max-width: 480px) {
	.calc-donut-wrap {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Chart card (bar chart for retirement/compound growth) */
.calc-chart-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: var(--s-5) var(--s-6);
	margin-top: var(--s-5);
}
.calc-chart-card h4 {
	font-family: var(--font-data);
	font-size: var(--text-caption);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-primary);
	margin-bottom: var(--s-4);
}
.calc-bar-chart {
	display: flex;
	align-items: flex-end;
	gap: var(--s-2);
	height: 150px;
	padding-top: var(--s-3);
}
.calc-bar-col {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	height: 100%;
	gap: var(--s-1);
}
.calc-bar-stack {
	width: 100%;
	max-width: 28px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	border-radius: 5px 5px 0 0;
	overflow: hidden;
}
.calc-bar-seg--growth {
	background: var(--color-accent);
}
.calc-bar-seg--contrib {
	background: var(--brand-100);
}
.calc-bar-label {
	font-size: 10px;
	color: var(--text-muted);
	font-family: var(--font-data);
	margin-top: var(--s-1);
}
.calc-chart-legend {
	display: flex;
	gap: var(--s-4);
	margin-top: var(--s-4);
	font-size: var(--text-caption);
	color: var(--text-muted);
}
.calc-chart-legend span {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
}
.calc-chart-legend .calc-legend__dot {
	border-radius: 3px;
}

/* Tax bracket table + bar */
.calc-bracket-bar {
	height: 22px;
	border-radius: var(--radius-sm);
	overflow: hidden;
	display: flex;
	margin-top: var(--s-4);
	background: var(--canvas);
}
.calc-bracket-seg {
	height: 100%;
}
.calc-bracket-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: var(--s-4);
	font-size: var(--text-small);
}
.calc-bracket-table th {
	text-align: left;
	padding: var(--s-3);
	font-family: var(--font-data);
	font-size: 10.5px;
	text-transform: uppercase;
	color: var(--text-muted);
	border-bottom: 2px solid var(--border);
}
.calc-bracket-table td {
	padding: var(--s-3);
	border-bottom: 1px solid var(--border);
	color: var(--text-muted);
}
.calc-bracket-table td:first-child {
	font-weight: 700;
	color: var(--text-heading);
	font-family: var(--font-data);
	font-size: var(--text-caption);
}

/* Disclaimer + CTA-mini boxes */
.calc-disclaimer {
	display: flex;
	gap: var(--s-3);
	align-items: flex-start;
	background: var(--signal-amber-bg);
	border: 1px solid #f5d9a8;
	border-radius: var(--radius-md);
	padding: var(--s-4);
	margin-top: var(--s-5);
	font-size: var(--text-caption);
	color: #8a6416;
	line-height: 1.55;
}
[data-theme="dark"] .calc-disclaimer {
	border-color: #4a3512;
	color: #e3c583;
}
.calc-disclaimer svg {
	flex-shrink: 0;
	margin-top: 1px;
	color: var(--color-warning);
}

.calc-cta-mini {
	margin-top: var(--s-5);
	background: var(--surface);
	border: 1.5px dashed var(--color-accent);
	border-radius: var(--radius-lg);
	padding: var(--s-4) var(--s-5);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
	flex-wrap: wrap;
}
.calc-cta-mini p {
	font-size: var(--text-small);
	color: var(--text-muted);
	max-width: 32ch;
	margin: 0;
}
.calc-cta-mini strong {
	color: var(--text-heading);
	display: block;
	font-size: var(--text-small);
	margin-bottom: 2px;
}

/* ---- Search page ---- */
.search-hero {
	text-align: center;
	padding-block: var(--s-8) var(--s-6);
}
.search-hero .eyebrow {
	justify-content: center;
}
.search-hero h1 {
	max-width: 44ch;
	margin-inline: auto;
}
.search-hero .page-hero__lede {
	margin-inline: auto;
}
.search-hero__box {
	margin: var(--s-6) auto 0;
	max-width: 620px;
}
.search-hero__box input {
	font-size: var(--text-body-size);
	padding: 0.9em 1.4em;
}
.search-hero__box .btn {
	padding: 0.9em 1.8em;
}

.chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
}
.search-guide {
	display: grid;
	gap: var(--s-7);
	max-width: 900px;
	margin-inline: auto;
}
.search-guide__block h6 {
	font-family: var(--font-display);
	font-size: var(--text-h6);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--text-muted);
	margin-bottom: var(--s-4);
	text-align: center;
}

.no-results-card {
	text-align: center;
	max-width: 560px;
	margin: 0 auto;
	padding: var(--s-7) var(--s-5);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
}
.no-results-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--color-primary-soft);
	color: var(--color-primary);
	margin-bottom: var(--s-4);
}

.search-results-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
}
.search-results-empty {
	text-align: center;
	padding: var(--s-7) 0;
}
#search-results .card[hidden] {
	display: none;
}

/* Type badges on cards */
.badge--type {
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 10.5px;
}
.badge--type-review {
	background: var(--color-accent-soft);
	color: var(--color-accent-strong);
}
.badge--type-comparison {
	background: var(--brand-100);
	color: var(--color-primary);
}
.badge--type-best_list {
	background: var(--signal-green-bg);
	color: var(--signal-green);
}
.badge--type-guide {
	background: var(--surface-alt);
	color: var(--text-muted);
	border: 1px solid var(--border);
}
.badge--type-article {
	background: var(--surface-alt);
	color: var(--text-muted);
	border: 1px solid var(--border);
}
.card__meta {
	flex-wrap: wrap;
	row-gap: var(--s-2);
}

/* ---- Reading progress bar ---- */
.reading-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 200;
	background: transparent;
	pointer-events: none;
}
.reading-progress span {
	display: block;
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--color-accent), var(--brand-500));
	transition: width 80ms linear;
}

/* ---- Article hero ---- */
.page-hero--article {
	padding-block: var(--s-8) var(--s-6);
}
.page-hero--article h1 {
	font-size: clamp(1.75rem, 4vw, 2.7rem);
}
.page-hero--article .eyebrow {
	cursor: pointer;
}
@media (max-width: 480px) {
	.page-hero--article {
		padding-block: var(--s-6) var(--s-5);
	}
	.page-hero--article h1 {
		font-size: 1.5rem;
	}
	.page-hero--article .page-hero__lede {
		font-size: var(--text-body-size);
	}
}
.article-meta-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
	flex-wrap: wrap;
	margin-top: var(--s-5);
	padding-top: var(--s-5);
	border-top: 1px solid var(--border);
}

.share-row {
	display: flex;
	align-items: center;
	gap: var(--s-2);
}
.share-row__label {
	margin-right: var(--s-1);
}
.share-row__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--text-muted);
	cursor: pointer;
	transition: all var(--t-fast) var(--ease-out);
}
.share-row__btn:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
	text-decoration: none;
}
.share-row__msg {
	font-size: var(--text-caption);
	color: var(--color-success);
	font-weight: 600;
}

/* ---- Cover image (magazine-style with caption bar) ---- */
.article-cover {
	margin: 0;
	position: relative;
	border-radius: var(--radius-xl);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
}
.article-cover img {
	width: 100%;
	aspect-ratio: 16/9;
	object-fit: cover;
}
.article-cover figcaption {
	display: flex;
	gap: var(--s-4);
	flex-wrap: wrap;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: var(--s-4) var(--s-5);
	background: linear-gradient(0deg, rgba(11, 4, 40, 0.82), transparent);
	color: #fff;
	font-size: var(--text-caption);
	font-weight: 600;
}

/* ---- Quick summary / "in this guide" jump box ---- */
.quick-summary {
	background: var(--brand-50);
	border: 1px solid var(--brand-100);
	border-radius: var(--radius-lg);
	padding: var(--s-5) var(--s-6);
	margin-bottom: var(--s-6);
}
[data-theme="dark"] .quick-summary {
	background: var(--surface-alt);
	border-color: var(--border);
}
.quick-summary__label {
	display: block;
	font-family: var(--font-display);
	font-size: var(--text-caption);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-primary);
	margin-bottom: var(--s-2);
}
.quick-summary__answer p {
	margin: 0;
	color: var(--text-heading);
	font-size: var(--text-small);
	line-height: 1.6;
}
.quick-summary__jump ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--s-1);
}
.quick-summary__jump a {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	font-size: var(--text-small);
	color: var(--text-body);
	padding: 0.2rem 0;
}
.quick-summary__jump a:hover {
	color: var(--color-primary);
	text-decoration: none;
}
.quick-summary__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--surface);
	border: 1px solid var(--border-strong);
	font-family: var(--font-data);
	font-size: 10px;
	font-weight: 700;
	flex-shrink: 0;
}
@media (max-width: 700px) {
	.quick-summary {
		grid-template-columns: 1fr;
	}
}

/* ---- Prose polish: anchor links, callouts, figures ---- */
.prose h2,
.prose h3 {
	position: relative;
}
.prose h2 > a.heading-anchor,
.prose h3 > a.heading-anchor {
	display: none;
}
.prose > p:first-of-type {
	font-size: 1.15rem;
	color: var(--text-heading);
}
.prose figure {
	margin-block: var(--s-6);
}
.prose figure img {
	border-radius: var(--radius-lg);
}
.prose figcaption {
	text-align: center;
	font-size: var(--text-caption);
	color: var(--text-muted);
	margin-top: var(--s-2);
}
.prose .callout {
	background: var(--surface-alt);
	border-left: 4px solid var(--color-accent);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	padding: var(--s-4) var(--s-5);
	margin-block: var(--s-5);
	font-size: var(--text-small);
}

/* ---- Was this helpful ---- */
.helpful {
	margin-top: var(--s-7);
	padding: var(--s-5);
	background: var(--surface-alt);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	text-align: center;
}
.helpful__q {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--text-heading);
	margin-bottom: var(--s-3);
}
.helpful__btns {
	display: flex;
	gap: var(--s-3);
	justify-content: center;
}
.helpful__btn {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	padding: 0.6em 1.3em;
	border-radius: var(--radius-pill);
	border: 1px solid var(--border-strong);
	background: var(--surface);
	font-family: var(--font-display);
	font-size: var(--text-small);
	font-weight: 600;
	color: var(--text-body);
	cursor: pointer;
}
.helpful__btn:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
}
.helpful__thanks {
	color: var(--color-success);
	font-weight: 600;
	font-size: var(--text-small);
	margin: 0;
}

/* ---- Author bio (end of article) ---- */
.author-bio {
	display: flex;
	gap: var(--s-5);
	margin-top: var(--s-7);
	padding: var(--s-6);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
}
.author-bio__avatar {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	flex-shrink: 0;
	overflow: hidden;
	background: var(--color-primary-soft);
	color: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.4rem;
}
.author-bio__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.author-bio__kicker {
	display: block;
	margin-bottom: 2px;
}
.author-bio__name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--text-h5);
	color: var(--text-heading);
	display: block;
}
.author-bio__title {
	display: block;
	font-size: var(--text-caption);
	color: var(--text-muted);
	margin-bottom: var(--s-3);
}
.author-bio__text {
	font-size: var(--text-small);
	color: var(--text-body);
	margin-bottom: var(--s-3);
}
.author-bio__text p:last-child {
	margin-bottom: 0;
}
.author-bio__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-4);
	font-size: var(--text-small);
	font-weight: 600;
}
@media (max-width: 560px) {
	.author-bio {
		flex-direction: column;
	}
}

/* ---- Contact page ---- */
.contact-grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: var(--s-7);
	align-items: start;
}
.contact-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s-4);
}
@media (max-width: 560px) {
	.contact-form__row {
		grid-template-columns: 1fr;
	}
}

.contact-info-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: var(--s-5);
	margin-bottom: var(--s-5);
}
.contact-info-card--muted {
	background: var(--surface-alt);
}
.contact-info-card h6 {
	font-family: var(--font-display);
	font-size: var(--text-h6);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--text-muted);
	margin-bottom: var(--s-4);
}
.contact-info-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--s-4);
}
.contact-info-list li {
	display: flex;
	gap: var(--s-3);
	align-items: flex-start;
}
.contact-info-list__icon {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: var(--radius-md);
	background: var(--color-primary-soft);
	color: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
}
.contact-info-list strong {
	display: block;
	font-family: var(--font-display);
	font-size: var(--text-caption);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--text-muted);
	margin-bottom: 2px;
}
.contact-info-list a,
.contact-info-list span {
	font-size: var(--text-small);
	color: var(--text-heading);
}
.contact-info-list a:hover {
	color: var(--color-primary);
}

.contact-map {
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--border);
	margin-bottom: var(--s-5);
	box-shadow: var(--shadow-sm);
}
.contact-map iframe {
	display: block;
	filter: grayscale(0.15);
}
[data-theme="dark"] .contact-map iframe {
	filter: grayscale(0.4) invert(0.92) contrast(0.9);
}

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

/* ---- Highlighted card (editor's pick ribbon, any listing view) ---- */
.card {
	position: relative;
}
.card--highlighted {
	border-color: var(--color-accent);
	box-shadow: 0 0 0 1px var(--color-accent), var(--shadow-md);
}
.card__highlight-ribbon {
	position: absolute;
	top: var(--s-3);
	right: var(--s-3);
	z-index: 2;
	background: var(--color-accent);
	color: #fff;
	font-family: var(--font-display);
	font-size: var(--text-caption);
	font-weight: 700;
	padding: 0.3em 0.8em;
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-sm);
}

/* ---- AI / quick-answer summary box (review, comparison, best-list) ---- */
.ai-summary-box {
	background: var(--brand-50);
	border: 1px solid var(--brand-100);
	border-radius: var(--radius-lg);
	padding: var(--s-4) var(--s-5);
	margin-block: var(--s-5);
}
[data-theme="dark"] .ai-summary-box {
	background: var(--surface-alt);
	border-color: var(--border);
}
.ai-summary-box__label {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	font-family: var(--font-display);
	font-size: var(--text-caption);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-primary);
	margin-bottom: var(--s-2);
}
.ai-summary-box p {
	margin: 0;
	font-size: var(--text-small);
	color: var(--text-heading);
	line-height: 1.6;
}

/* ---- Alert / flash ---- */
.alert {
	border-radius: var(--radius-md);
	padding: var(--s-3) var(--s-4);
	font-size: var(--text-small);
	margin-bottom: var(--s-4);
}
.alert--success {
	background: var(--color-accent-soft);
	color: var(--color-success);
}
.alert--error {
	background: var(--signal-red-bg);
	color: var(--color-danger);
}

/* ---- Consistent mobile card padding ----
   Several boxed/card components use a larger --s-6 (or asymmetric --s-6/
   --s-5) padding on desktop, sized for the extra breathing room a wide
   layout has. On a phone that padding eats too much of the already-narrow
   width. Normalize every "card" (a bordered/background box with padding
   on all sides) down to a single --s-5 padding on small screens. */
@media (max-width: 640px) {
	.newsletter,
	.hero-deck__card,
	.about-placeholder,
	.about-callout,
	.calc,
	.calc__result,
	.cat-showcase__item,
	.proof-card,
	.process__step,
	.calc-v2__inputs,
	.calc-result-card,
	.calc-chart-card,
	.quick-summary,
	.author-bio,
	.contact-info-card,
	.card__body,
	.category-card,
	.feature-card,
	.mini-feature {
		padding: var(--s-5);
	}
}