/* =========================================================================
   HomeRise Blog 2026 — single post component CSS
   Scope: every class is prefixed .hr-blog__ or .hr-cta__ or .hr-sticky-cta
   Mobile-first. Loaded only on single.php. Depends on global.css for tokens.

   Visual language mirrors the staging template (WPCode snippet #2257):
   teal for structure, GOLD for action + accent (links, eyebrows, CTA buttons,
   stars). Cream + mint warm tints for trust/quality callouts.
   ========================================================================= */

/* ---------- Reading progress bar ----------
   Thin gold bar pinned to the top of the viewport that fills as the reader
   scrolls. JS (blog.js) updates the width; pure CSS handles position. */
.hr-blog__progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 0%;
	height: 3px;
	background: linear-gradient(90deg, var(--hr-color-gold), var(--hr-color-gold-light));
	z-index: 9999;
	transition: width 120ms linear;
	pointer-events: none;
}

/* ---------- Layout shell ----------
   NOTE: `overflow-x: clip` instead of `hidden` is deliberate. `hidden` makes
   this element a scroll container, which silently breaks `position: sticky`
   on any descendant (our aside TOC). `clip` gives the same visual result
   without creating a scroll container. Do not change back to hidden.

   --hr-header-h is the clearance reserved for the site's sticky/fixed header.
   It's used both as scroll-padding (so in-page anchors land below the header)
   and as top padding on .hr-blog (so breadcrumbs aren't covered on page load).
   Override from the theme customizer if the header height changes. */
:root {
	--hr-header-h: clamp(64px, 9vw, 96px);
}

/* Ensure anchor jumps (TOC clicks) land below the sticky header. */
html { scroll-padding-top: calc(var(--hr-header-h) + 0.5rem); }

.hr-blog {
	background: var(--hr-color-white);
	padding: calc(var(--hr-header-h) + 0.75rem) 1rem 4rem;
	overflow-x: clip;
}

.hr-blog__article {
	width: var(--hr-content-w);
	margin: 0 auto;
}

/* ---------- Breadcrumbs ----------
   Sits at the very top of .hr-blog, just below the sticky header clearance.
   Extra top margin gives the crumbs visual breathing room from the header. */
.hr-blog__breadcrumbs {
	padding: 0.25rem 0 0.75rem;
	font-size: var(--hr-fs-xs);
	color: var(--hr-color-gray-500);
}
.hr-blog__breadcrumbs-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.4rem;
}
.hr-blog__breadcrumbs-item {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}
.hr-blog__breadcrumbs-item a {
	color: var(--hr-color-teal-light);
	text-decoration: none;
}
.hr-blog__breadcrumbs-item a:hover { color: var(--hr-color-gold); text-decoration: underline; }
.hr-blog__breadcrumbs-item [aria-current="page"] {
	color: var(--hr-color-ink);
	font-weight: 500;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.hr-blog__breadcrumbs-sep { color: var(--hr-color-gray-300); }

/* ---------- Hero ---------- */
.hr-blog__hero { padding: 1.25rem 0 1.5rem; }

/* Category chip — GOLD eyebrow matching staging's uppercase category label */
.hr-blog__chip {
	display: inline-block;
	padding: 0;
	background: transparent;
	color: var(--hr-color-gold);
	font: 600 var(--hr-fs-xs)/1 var(--hr-font-sans);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
}
.hr-blog__chip:hover { color: var(--hr-color-gold-light); }

.hr-blog__h1 {
	font: 700 var(--hr-fs-3xl)/1.2 var(--hr-font-sans);
	letter-spacing: -0.02em;
	color: var(--hr-color-teal);
	margin: 0.75rem 0 1.25rem;
	max-width: 24ch;
	text-wrap: balance;
}

.hr-blog__byline {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0.5rem 0 1rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--hr-color-gray-200);
	flex-wrap: wrap;
}
.hr-blog__avatar {
	border-radius: 50%;
	width: 48px; height: 48px;
	background: var(--hr-color-bg-soft);
	object-fit: cover;
	border: 2px solid var(--hr-color-gold-bg);
	flex-shrink: 0;
}
.hr-blog__byline-text { display: flex; flex-direction: column; gap: 2px; font-size: var(--hr-fs-sm); min-width: 0; }
.hr-blog__byline-author { color: var(--hr-color-teal); font-weight: 600; font-size: var(--hr-fs-sm); }
.hr-blog__byline-author a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.hr-blog__byline-author a:hover { color: var(--hr-color-gold); border-bottom-color: currentColor; }
.hr-blog__byline-credentials { color: var(--hr-color-gray-500); font-weight: 400; font-size: var(--hr-fs-xs); }
.hr-blog__byline-meta { color: var(--hr-color-gray-500); font-size: var(--hr-fs-xs); }
.hr-blog__byline-updated { color: var(--hr-color-teal-light); font-weight: 600; }

/* Reviewed badge — trust cue below byline, shield icon + label */
.hr-blog__reviewed {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1.25rem;
	padding: 0.5rem 0.75rem;
	background: var(--hr-color-gray-50);
	border: 1px solid var(--hr-color-gray-200);
	border-radius: var(--hr-radius-sm);
	font-size: var(--hr-fs-xs);
	color: var(--hr-color-teal-light);
	line-height: 1.3;
}
.hr-blog__reviewed svg { width: 16px; height: 16px; flex-shrink: 0; }

.hr-blog__trust {
	display: none; /* replaced by .hr-blog__reviewed in hero; keep rule for back-compat */
}

.hr-blog__hero-img {
	margin: 1.25rem 0 0;
	overflow: hidden;
	border-radius: var(--hr-radius-lg);
	background: var(--hr-color-bg-soft);
}
.hr-blog__hero-img img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16/10;
	object-fit: cover;
}

/* ---------- Body (content + optional TOC aside) ---------- */
.hr-blog__body {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	margin-top: 2rem;
}

.hr-blog__aside { order: -1; }

.hr-blog__content {
	font-family: var(--hr-font-sans);
	font-size: var(--hr-fs-base);
	line-height: 1.78;
	color: var(--hr-color-text);
}
.hr-blog__content p,
.hr-blog__content ul,
.hr-blog__content ol,
.hr-blog__content blockquote,
.hr-blog__content pre { margin: 0 0 1.25em; }

.hr-blog__content figure { margin: 1.75em 0; }

.hr-blog__content p,
.hr-blog__content li { max-width: 65ch; }

.hr-blog__content h2,
.hr-blog__content h3,
.hr-blog__content h4 {
	font-family: var(--hr-font-sans);
	color: var(--hr-color-teal);
	font-weight: 700;
	letter-spacing: -0.015em;
	text-wrap: balance;
	scroll-margin-top: 100px;
}
.hr-blog__content h2 {
	font-size: var(--hr-fs-2xl);
	line-height: 1.25;
	margin: 2.25em 0 0.6em;
}
.hr-blog__content h3 {
	font-size: var(--hr-fs-xl);
	line-height: 1.35;
	margin: 1.75em 0 0.5em;
	font-weight: 600;
}
.hr-blog__content h4 {
	font-size: var(--hr-fs-lg);
	line-height: 1.4;
	margin: 1.5em 0 0.4em;
	font-weight: 600;
	letter-spacing: -0.01em;
}
/* Tighten spacing when one heading directly follows another */
.hr-blog__content h2 + h3,
.hr-blog__content h3 + h4 { margin-top: 0.75em; }
/* First heading in the post shouldn't have a huge top margin */
.hr-blog__content > h2:first-child,
.hr-blog__content > h3:first-child { margin-top: 0.25em; }

/* Links in content — GOLD, matching staging */
.hr-blog__content a {
	color: var(--hr-color-gold);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 150ms ease;
}
.hr-blog__content a:hover { color: var(--hr-color-teal); }

.hr-blog__content strong { font-weight: 600; color: var(--hr-color-gray-800); }

.hr-blog__content blockquote {
	padding: 1rem 1.25rem;
	border-left: 4px solid var(--hr-color-gold);
	background: var(--hr-color-gold-bg);
	border-radius: 0 var(--hr-radius-sm) var(--hr-radius-sm) 0;
	color: var(--hr-color-teal);
	font-style: italic;
	font-size: var(--hr-fs-lg);
}

/* Content images — unified treatment so disparate source graphics (infographics,
   photos, screenshots) all read as a consistent set. */
.hr-blog__content img,
.hr-blog__content figure img {
	max-width: 100%;
	height: auto;
	display: block;
	margin-inline: auto;
	border-radius: var(--hr-radius-lg);
	border: 1px solid var(--hr-color-border-soft);
	box-shadow: var(--hr-shadow-sm);
	background: var(--hr-color-bg-soft);
}
.hr-blog__content > img,
.hr-blog__content p > img { margin-block: 1.75em; }
.hr-blog__content figure {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.hr-blog__content figcaption {
	font-size: var(--hr-fs-xs);
	color: var(--hr-color-gray-500);
	text-align: center;
	margin-top: 0.5rem;
	max-width: 60ch;
	line-height: 1.5;
}

.hr-blog__content ul,
.hr-blog__content ol { padding-left: 1.5em; }
.hr-blog__content li { margin-bottom: 0.5em; }

/* Inline code / pre */
.hr-blog__content code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	background: var(--hr-color-bg-soft);
	padding: 0.1em 0.35em;
	border-radius: var(--hr-radius-sm);
	font-size: 0.92em;
}

/* ---------- TOC ---------- */
.hr-blog__toc {
	border: 1px solid var(--hr-color-gray-200);
	border-radius: var(--hr-radius-md);
	overflow: hidden;
	background: #fff;
}
.hr-blog__toc-title {
	font: 700 var(--hr-fs-sm)/1.2 var(--hr-font-sans);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--hr-color-teal);
	margin: 0;
	padding: 1rem 1.25rem;
	background: var(--hr-color-gray-50);
	border-bottom: 1px solid var(--hr-color-gray-200);
}
.hr-blog__toc-list {
	list-style: none;
	margin: 0; padding: 0.5rem 1.25rem 1rem;
	counter-reset: hrtoc;
}
.hr-blog__toc-item {
	margin: 0;
	counter-increment: hrtoc;
	border-bottom: 1px solid var(--hr-color-gray-100);
}
.hr-blog__toc-item:last-child { border-bottom: none; }
.hr-blog__toc-item a {
	display: block;
	padding: 0.55rem 0;
	color: var(--hr-color-gray-600);
	text-decoration: none;
	font-size: var(--hr-fs-sm);
	line-height: 1.4;
	transition: color 150ms ease;
}
.hr-blog__toc-item a:hover,
.hr-blog__toc-item a.is-active { color: var(--hr-color-gold); font-weight: 600; }
.hr-blog__toc-item--sub { padding-left: 0.75rem; }
.hr-blog__toc-item--sub a { font-size: var(--hr-fs-xs); color: var(--hr-color-gray-500); }

/* ---------- Social proof block (FSBO-pattern) ----------
   Mirrors "Sellers Who Kept Their Commission" on homerise.com/for-sale-by-owner/.
   Header + trust stats row + 3-card testimonial grid, each card surfaces a
   quantified savings figure in HomeRise gold. */
.hr-trust {
	margin: 2.75rem 0;
	padding: 1.5rem 1.25rem;
	background: var(--hr-color-cream);
	border: 1px solid var(--hr-color-border-warm);
	border-radius: var(--hr-radius-lg);
}
.hr-trust__head {
	text-align: center;
	margin: 0 0 1.25rem;
}
.hr-trust__eyebrow {
	display: inline-block;
	font: 600 var(--hr-fs-xs)/1 var(--hr-font-sans);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--hr-color-teal-light);
	margin: 0 0 0.5rem;
}
.hr-trust__title {
	font: 700 clamp(1.25rem, 1.05rem + 1vw, 1.625rem)/1.2 var(--hr-font-sans);
	color: var(--hr-color-teal);
	margin: 0;
	letter-spacing: -0.015em;
}

/* Stats row — 3 columns, gold figures on the cream card */
.hr-trust__stats {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0.875rem 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.5rem;
	border-top: 1px solid var(--hr-color-border-warm);
	border-bottom: 1px solid var(--hr-color-border-warm);
	text-align: center;
}
.hr-trust__stat {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}
.hr-trust__stat-fig {
	font: 700 clamp(1.125rem, 0.95rem + 1.25vw, 1.625rem)/1 var(--hr-font-sans);
	color: var(--hr-color-gold);
	letter-spacing: -0.01em;
}
.hr-trust__stat-label {
	font-size: var(--hr-fs-xs);
	color: var(--hr-color-gray-600);
	line-height: 1.3;
}

/* Card grid — 1 col mobile, 3 cols desktop. Cards are equal height via flex
   so the "Saved $X" savings pill always bottoms out aligned across the row. */
.hr-trust__cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.875rem;
	align-items: stretch;
}
.hr-trust__card {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	padding: 1rem 1.125rem 1.125rem;
	background: #fff;
	border: 1px solid var(--hr-color-border-warm);
	border-radius: var(--hr-radius-md);
	box-shadow: 0 1px 2px rgba(4,42,50,0.04);
	text-align: left;
	height: 100%;
}
.hr-trust__stars {
	display: inline-flex;
	gap: 2px;
	color: var(--hr-color-gold);
	line-height: 0;
}
.hr-trust__quote {
	margin: 0;
	font-size: var(--hr-fs-sm);
	line-height: 1.5;
	color: var(--hr-color-gray-800);
	flex: 1;
}
/* Attribution: two-row stack — row 1 = name + city (flex left-aligned),
   row 2 = full-width savings pill aligned right. Predictable on every width. */
.hr-trust__attr {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"identity savings";
	align-items: center;
	column-gap: 0.75rem;
	margin-top: auto;
	padding-top: 0.625rem;
	border-top: 1px dashed var(--hr-color-border-warm);
	font-size: var(--hr-fs-xs);
	line-height: 1.3;
}
.hr-trust__name {
	grid-area: identity;
	font-weight: 700;
	color: var(--hr-color-teal);
	font-size: var(--hr-fs-sm);
}
.hr-trust__city {
	grid-area: identity;
	align-self: end;
	margin-top: 0.1rem;
	color: var(--hr-color-gray-500);
	font-size: var(--hr-fs-xs);
}
/* Stack identity rows (name then city) by setting auto row on parent */
.hr-trust__attr {
	grid-template-rows: auto auto;
	grid-template-areas:
		"name     savings"
		"city     savings";
}
.hr-trust__name { grid-area: name; }
.hr-trust__city { grid-area: city; align-self: start; margin: 0; }
.hr-trust__savings {
	grid-area: savings;
	align-self: center;
	justify-self: end;
	padding: 0.2rem 0.6rem;
	background: var(--hr-color-gold-bg);
	color: var(--hr-color-teal);
	border: 1px solid var(--hr-color-border-warm);
	border-radius: 999px;
	font-weight: 700;
	font-size: var(--hr-fs-xs);
	letter-spacing: -0.005em;
	white-space: nowrap;
}

/* ---------- Trust callout end-of-article CTA ----------
   Primary conversion moment in the article body. Green home-page CTA pattern
   on the cream trust-card surface. Mobile-first: full-width button, centered,
   with supporting copy above and fine print below. */
.hr-trust__cta {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--hr-color-border-warm);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.hr-trust__cta > * { width: 100%; }

.hr-trust__cta-sub {
	margin: 0 auto 0.875rem;
	max-width: 48ch;
	font-size: var(--hr-fs-sm);
	color: var(--hr-color-gray-600, #4a5a60);
	line-height: 1.5;
	text-wrap: balance;
}

.hr-trust__cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 420px;
	min-height: 56px;
	padding: 16px 28px;
	background: var(--hr-color-cta);
	color: #fff !important;
	font: 700 clamp(1rem, 1.5vw, 1.125rem)/1.2 var(--hr-font-sans);
	text-decoration: none;
	border: 2px solid var(--hr-color-cta-border);
	border-radius: 10px;
	letter-spacing: -0.005em;
	box-shadow: 0 6px 18px rgba(4, 42, 50, 0.18);
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
	margin: 0 auto;
}
.hr-trust__cta-btn:hover {
	background: var(--hr-color-cta-hover);
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: 0 10px 24px rgba(4, 42, 50, 0.24);
}
.hr-trust__cta-btn:focus-visible {
	outline: none;
	box-shadow: var(--hr-focus), 0 6px 18px rgba(4, 42, 50, 0.18);
}

.hr-trust__cta-fine {
	margin: 0.75rem auto 0;
	max-width: 44ch;
	font-size: var(--hr-fs-xs);
	color: var(--hr-color-gray-500);
	line-height: 1.4;
	text-wrap: balance;
}

/* ---------- Market data callout ---------- */
.hr-blog__market {
	margin: 2rem 0;
	padding: 1.25rem 1.25rem 1rem;
	background: linear-gradient(135deg, var(--hr-color-teal), var(--hr-color-primary-ink));
	color: #fff;
	border-radius: var(--hr-radius-lg);
	box-shadow: var(--hr-shadow-md);
}
.hr-blog__market-head {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin-bottom: 0.75rem;
}
.hr-blog__market-kicker {
	font-size: var(--hr-fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--hr-color-gold);
}
.hr-blog__market-city {
	font: 700 var(--hr-fs-xl)/1.1 var(--hr-font-sans);
	margin: 0;
}
.hr-blog__market-updated { font-size: var(--hr-fs-xs); opacity: 0.7; }
.hr-blog__market-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem;
	margin: 0;
}
.hr-blog__market-grid div {
	background: rgba(255,255,255,0.08);
	padding: 0.75rem;
	border-radius: var(--hr-radius-md);
}
.hr-blog__market-grid dt {
	font-size: var(--hr-fs-xs);
	opacity: 0.75;
	margin: 0 0 0.2rem;
	font-weight: 400;
}
.hr-blog__market-grid dd {
	font: 700 var(--hr-fs-lg)/1 var(--hr-font-sans);
	margin: 0;
	color: var(--hr-color-gold);
}

/* ---------- Inline CTA ----------
   Teal background + gold pill button — the staging pattern. */
.hr-cta--inline {
	margin: 2.5rem 0;
	padding: 1.75rem 1.5rem;
	background: var(--hr-color-teal);
	border-radius: var(--hr-radius-lg);
	text-align: center;
	position: relative;
	overflow: hidden;
	color: #fff;
}
.hr-cta--inline::before {
	content: '';
	position: absolute;
	top: -50%; right: -20%;
	width: 200px; height: 200px;
	background: radial-gradient(circle, rgba(212,148,58,0.15) 0%, transparent 70%);
	border-radius: 50%;
	pointer-events: none;
}
.hr-cta__eyebrow {
	display: inline-block;
	font: 600 var(--hr-fs-xs)/1 var(--hr-font-sans);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hr-color-gold);
	margin-bottom: 0.75rem;
	position: relative;
}
.hr-cta__title {
	font: 700 clamp(1.375rem, 1.1rem + 1.4vw, 1.875rem)/1.15 var(--hr-font-sans);
	color: #fff;
	margin: 0 auto 0.625rem;
	max-width: 22ch;
	position: relative;
	letter-spacing: -0.02em;
}
.hr-cta__sub {
	font-size: var(--hr-fs-sm);
	color: rgba(255,255,255,0.78);
	margin: 0 auto 1.25rem;
	max-width: 46ch;
	line-height: 1.5;
	position: relative;
}
.hr-cta__points {
	list-style: none;
	margin: 0 auto 1.375rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	align-items: flex-start;
	max-width: 22rem;
	position: relative;
}
.hr-cta__points li {
	font-size: var(--hr-fs-sm);
	color: rgba(255,255,255,0.92);
	display: flex;
	gap: 0.5rem;
	align-items: center;
	line-height: 1.3;
}
.hr-cta__points li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px; height: 18px;
	flex-shrink: 0;
	background: rgba(212,148,58,0.22);
	color: var(--hr-color-gold);
	border-radius: 50%;
	font-size: 0.75rem;
	font-weight: 700;
}
/* Home-page CTA pattern — green fill, white text, dark-teal border, 10px
   radius. Matches .hr-pkg-cta.hr-pkg-cta-filled on homerise.com. */
.hr-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	max-width: 360px;
	min-height: 52px;
	padding: 14px 28px;
	background: var(--hr-color-cta);
	color: #fff !important;
	font: 700 clamp(1rem, 0.9rem + 0.4vw, 1.0625rem)/1.2 var(--hr-font-sans);
	text-decoration: none;
	border: 2px solid var(--hr-color-cta-border);
	border-radius: 10px;
	letter-spacing: -0.005em;
	box-shadow: 0 6px 18px rgba(0,0,0,0.22);
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
	position: relative;
}
.hr-cta__btn:hover,
.hr-cta__btn:focus-visible {
	background: var(--hr-color-cta-hover);
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: 0 10px 24px rgba(0,0,0,0.28);
}
.hr-cta__btn:focus-visible { outline: none; box-shadow: var(--hr-focus), 0 10px 24px rgba(0,0,0,0.28); }
.hr-cta__fine {
	font-size: var(--hr-fs-xs);
	color: rgba(255,255,255,0.6);
	margin: 0.875rem 0 0;
	line-height: 1.4;
	position: relative;
}

/* ---------- Rail CTA (desktop aside card) ----------
   Cream card with the home-page green button pattern. Button carries the
   price label so the action is unmistakable even in the narrow sidebar. */
.hr-rail-cta {
	display: none;
	background: var(--hr-color-cream);
	border: 1px solid var(--hr-color-border-warm);
	border-radius: var(--hr-radius-md);
	padding: 1.125rem 1rem 1rem;
	text-align: center;
}
@media (min-width: 1024px) {
	.hr-rail-cta { display: block; }
}
.hr-rail-cta__kicker {
	font: 600 0.6875rem/1 var(--hr-font-sans);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--hr-color-gold);
	margin: 0 0 0.5rem;
}
.hr-rail-cta__title {
	font: 700 0.9375rem/1.35 var(--hr-font-sans);
	color: var(--hr-color-teal);
	margin: 0 0 0.875rem;
	letter-spacing: -0.01em;
	text-wrap: balance;
}
.hr-rail-cta__btn {
	display: block;
	width: 100%;
	min-height: 48px;
	padding: 12px 18px;
	background: var(--hr-color-cta);
	color: #fff !important;
	font: 700 14px/1.3 var(--hr-font-sans);
	text-align: center;
	text-decoration: none;
	border: 2px solid var(--hr-color-cta-border);
	border-radius: 10px;
	cursor: pointer;
	box-shadow: 0 3px 10px rgba(4,42,50,0.14);
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.hr-rail-cta__btn:hover {
	background: var(--hr-color-cta-hover);
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 14px rgba(4,42,50,0.20);
}
.hr-rail-cta__btn:focus-visible { outline: none; box-shadow: var(--hr-focus); }
.hr-rail-cta__trust {
	margin: 0.75rem 0 0;
	font-size: 0.6875rem;
	color: var(--hr-color-gray-500);
	text-align: center;
	letter-spacing: 0.01em;
}

/* ---------- Share row ---------- */
.hr-blog__share {
	margin: 2.5rem 0 0;
	padding: 1rem 0;
	border-top: 1px solid var(--hr-color-gray-200);
	border-bottom: 1px solid var(--hr-color-gray-200);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
}
.hr-blog__share-label {
	font: 600 var(--hr-fs-xs)/1 var(--hr-font-sans);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--hr-color-gray-500);
	margin-right: 0.5rem;
}
.hr-blog__share-list {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}
.hr-blog__share-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px; height: 40px;
	border-radius: 50%;
	background: var(--hr-color-white);
	border: 1px solid var(--hr-color-gray-200);
	color: var(--hr-color-gray-600);
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 600;
	transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.hr-blog__share-link:hover {
	background: var(--hr-color-teal);
	color: #fff;
	border-color: var(--hr-color-teal);
}
.hr-blog__share-link:focus-visible { outline: none; box-shadow: var(--hr-focus); }

/* ---------- Author bio ---------- */
.hr-blog__author {
	margin: 2.5rem 0 2rem;
	padding: 1.5rem;
	background: var(--hr-color-gray-50);
	border: 1px solid var(--hr-color-gray-200);
	border-radius: var(--hr-radius-lg);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.hr-blog__author-img {
	border-radius: 50%;
	width: 88px; height: 88px;
	object-fit: cover;
	border: 3px solid var(--hr-color-gold-bg);
}
.hr-blog__author-kicker {
	font-size: var(--hr-fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--hr-color-gray-500);
	margin: 0;
}
.hr-blog__author-name {
	font: 700 var(--hr-fs-xl)/1.2 var(--hr-font-sans);
	margin: 0.15rem 0 0.15rem;
}
.hr-blog__author-name a { color: var(--hr-color-teal); text-decoration: none; }
.hr-blog__author-name a:hover { color: var(--hr-color-gold); }
.hr-blog__author-title {
	font-size: var(--hr-fs-sm);
	color: var(--hr-color-gray-500);
	margin: 0 0 0.5rem;
}
.hr-blog__author-facts {
	list-style: none;
	padding: 0;
	margin: 0 0 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	font-size: var(--hr-fs-sm);
	color: var(--hr-color-gray-600);
}
.hr-blog__author-bio {
	font-size: var(--hr-fs-sm);
	color: var(--hr-color-gray-600);
	margin: 0 0 0.75rem;
	line-height: 1.7;
}
.hr-blog__author-links {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 0;
	font-size: var(--hr-fs-xs);
}
.hr-blog__author-link {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	color: var(--hr-color-gold);
	text-decoration: none;
	font-weight: 600;
}
.hr-blog__author-link:hover { color: var(--hr-color-teal); }

/* ---------- Related ---------- */
.hr-blog__related {
	margin: 3rem 0 1rem;
	padding-top: 2rem;
	border-top: 1px solid var(--hr-color-gray-200);
}
.hr-blog__related-title {
	font: 700 var(--hr-fs-xl)/1.2 var(--hr-font-sans);
	color: var(--hr-color-teal);
	margin: 0 0 1.25rem;
}
.hr-blog__related-list {
	list-style: none;
	margin: 0; padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}
.hr-blog__related-card {
	display: block;
	color: inherit;
	text-decoration: none;
	background: #fff;
	border: 1px solid var(--hr-color-gray-200);
	border-radius: var(--hr-radius-md);
	overflow: hidden;
	transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.hr-blog__related-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--hr-shadow-md);
	border-color: var(--hr-color-gold);
}
.hr-blog__related-img img {
	width: 100%;
	height: auto;
	aspect-ratio: 16/9;
	object-fit: cover;
	display: block;
}
.hr-blog__related-meta { padding: 0.9rem 1rem 1rem; }
.hr-blog__related-cat {
	font: 600 var(--hr-fs-xs)/1 var(--hr-font-sans);
	color: var(--hr-color-gold);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.hr-blog__related-headline {
	font: 600 var(--hr-fs-base)/1.35 var(--hr-font-sans);
	margin: 0.35rem 0 0.4rem;
	color: var(--hr-color-teal);
}
.hr-blog__related-read {
	font-size: var(--hr-fs-xs);
	color: var(--hr-color-gray-500);
}

/* ---------- Bottom CTA banner ----------
   The conversion hero at the end of the article. Dark teal banner with a
   subtle radial-gradient accent. The button is the star — large, green,
   home-page pattern, price baked into the label. */
.hr-cta--bottom {
	margin: 3rem -1rem 1rem;
	padding: 2.5rem 1.5rem;
	background: var(--hr-color-teal);
	border-radius: 0;
	text-align: center;
	position: relative;
	overflow: hidden;
	color: #fff;
}
.hr-cta--bottom::before {
	content: '';
	position: absolute;
	bottom: -40%; left: -10%;
	width: 300px; height: 300px;
	background: radial-gradient(circle, rgba(85,162,156,0.2) 0%, transparent 70%);
	border-radius: 50%;
	pointer-events: none;
}
.hr-cta--bottom::after {
	content: '';
	position: absolute;
	top: -30%; right: -10%;
	width: 250px; height: 250px;
	background: radial-gradient(circle, rgba(212,148,58,0.12) 0%, transparent 70%);
	border-radius: 50%;
	pointer-events: none;
}
.hr-cta--bottom__inner {
	position: relative;
	z-index: 1;
	max-width: 560px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.hr-cta--bottom__inner > * { width: 100%; }
.hr-cta--bottom__eyebrow {
	display: inline-block;
	font: 600 var(--hr-fs-xs)/1 var(--hr-font-sans);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--hr-color-gold);
	margin: 0 0 0.5rem;
}
.hr-cta--bottom__title {
	font: 700 var(--hr-fs-2xl)/1.15 var(--hr-font-sans);
	color: #fff;
	margin: 0 0 0.625rem;
	letter-spacing: -0.02em;
	text-wrap: balance;
}
.hr-cta--bottom__sub {
	font-size: var(--hr-fs-base);
	color: rgba(255,255,255,0.78);
	margin: 0 auto 1.5rem;
	line-height: 1.55;
	max-width: 46ch;
}
.hr-cta--bottom__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 420px;
	min-height: 56px;
	padding: 16px 28px;
	background: var(--hr-color-cta);
	color: #fff !important;
	font: 700 clamp(1rem, 1.5vw, 1.125rem)/1.2 var(--hr-font-sans);
	text-decoration: none;
	border: 2px solid var(--hr-color-cta-border);
	border-radius: 10px;
	letter-spacing: -0.005em;
	box-shadow: 0 6px 18px rgba(0,0,0,0.28);
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.hr-cta--bottom__btn:hover {
	background: var(--hr-color-cta-hover);
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: 0 10px 24px rgba(0,0,0,0.32);
}
.hr-cta--bottom__btn:focus-visible { outline: none; box-shadow: var(--hr-focus), 0 6px 18px rgba(0,0,0,0.28); }

/* Strikethrough savings comparison, home-page pattern.
   text-wrap: balance keeps the two phrases from splitting mid-word on mobile. */
.hr-cta--bottom__compare {
	margin: 0.875rem auto 0;
	max-width: 40ch;
	font-size: var(--hr-fs-sm);
	color: rgba(255,255,255,0.72);
	line-height: 1.45;
	text-wrap: balance;
}
.hr-cta--bottom__compare-strike {
	display: inline;
	color: rgba(255,255,255,0.55);
	text-decoration: line-through;
	text-decoration-color: rgba(255,255,255,0.45);
	text-decoration-thickness: 1px;
	margin-right: 0.25rem;
}
.hr-cta--bottom__fine {
	margin: 0.75rem auto 0;
	font-size: var(--hr-fs-xs);
	color: rgba(255,255,255,0.55);
	line-height: 1.45;
	letter-spacing: 0.01em;
}

/* ---------- Sticky mobile CTA ---------- */
.hr-sticky-cta {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	background: #fff;
	border-top: 1px solid var(--hr-color-gray-200);
	box-shadow: 0 -6px 20px rgba(15,26,42,0.08);
	z-index: 60;
	transform: translateY(100%);
	transition: transform 220ms ease;
	padding-bottom: env(safe-area-inset-bottom);
}
.hr-sticky-cta.is-visible { transform: translateY(0); }

.hr-sticky-cta__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	max-width: 900px;
	margin: 0 auto;
}
.hr-sticky-cta__copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hr-sticky-cta__label {
	font: 700 var(--hr-fs-sm)/1.2 var(--hr-font-sans);
	color: var(--hr-color-teal);
}
.hr-sticky-cta__sub {
	font-size: var(--hr-fs-xs);
	color: var(--hr-color-gray-500);
}
.hr-sticky-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 20px;
	background: var(--hr-color-cta);
	color: #fff !important;
	font: 600 14px/1.3 var(--hr-font-sans);
	text-decoration: none;
	border: 2px solid var(--hr-color-cta-border);
	border-radius: 10px;
	flex-shrink: 0;
	white-space: nowrap;
	transition: background 0.2s ease, color 0.2s ease;
}
.hr-sticky-cta__btn:hover { background: var(--hr-color-cta-hover); color: #fff !important; }
.hr-sticky-cta__btn:focus-visible { outline: none; box-shadow: var(--hr-focus); }

/* Hide sticky on tablet+ */
@media (min-width: 768px) {
	.hr-sticky-cta { display: none !important; }
	body { padding-bottom: 0 !important; }
}

/* ---------- Back to top button ---------- */
.hr-blog__back-top {
	position: fixed;
	bottom: 80px;
	right: 16px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--hr-color-teal);
	color: #fff;
	border: none;
	cursor: pointer;
	display: none;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
	transition: background-color 200ms ease, transform 200ms ease;
	z-index: 55;
}
.hr-blog__back-top:hover { background: var(--hr-color-teal-light); transform: translateY(-2px); }
.hr-blog__back-top.is-visible { display: inline-flex; }
.hr-blog__back-top svg { width: 20px; height: 20px; }
@media (min-width: 768px) {
	.hr-blog__back-top { bottom: 24px; }
}

/* ---------- Breakpoints ---------- */

/* Small phones (<480px) — tighten CTA padding so nothing feels cramped. */
@media (max-width: 479px) {
	.hr-blog { padding: calc(var(--hr-header-h) + 0.5rem) 0.875rem 3rem; }
	.hr-cta--inline { margin: 2rem -0.25rem; padding: 1.75rem 1.25rem; }
	.hr-cta--bottom { margin: 2.25rem -0.875rem 1rem; padding: 2rem 1.25rem; }
	.hr-cta__title { font-size: var(--hr-fs-xl); }
	.hr-cta--bottom__title { font-size: var(--hr-fs-xl); }
	.hr-cta--bottom__sub { margin-bottom: 1.25rem; }
	.hr-cta--bottom__btn { min-height: 52px; padding: 14px 20px; font-size: 1rem; }
	.hr-cta__btn { min-height: 50px; padding: 13px 20px; }
	.hr-trust { margin: 2rem -0.25rem; padding: 1.25rem 1rem; }
	.hr-trust__stats { gap: 0.25rem; }
	.hr-trust__stat-label { font-size: 0.7rem; }
	.hr-trust__cta { margin-top: 1.25rem; padding-top: 1rem; }
	.hr-trust__cta-btn { min-height: 52px; padding: 14px 20px; font-size: 1rem; }
	.hr-blog__hero { padding: 1rem 0 1.25rem; }
	.hr-blog__share { flex-wrap: wrap; }
}

/* Anti-overflow safety on the article body — long URLs / code shouldn't
   break the mobile viewport. */
.hr-blog__content,
.hr-blog__content p,
.hr-blog__content li {
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Tablet */
@media (min-width: 768px) {
	/* Keep header-clearance top padding so breadcrumb is never covered. */
	.hr-blog { padding: calc(var(--hr-header-h) + 1rem) 2rem 5rem; }
	.hr-blog__article { width: var(--hr-content-w); }
	.hr-blog__hero-img img { aspect-ratio: 21/9; }
	.hr-blog__h1 { max-width: 24ch; }
	.hr-blog__market-grid { grid-template-columns: repeat(4, 1fr); }
	.hr-blog__author {
		flex-direction: row;
		align-items: flex-start;
		padding: 2rem;
	}
	.hr-blog__author-img { flex-shrink: 0; }
	.hr-blog__related-list { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
	.hr-cta--bottom { margin: 3rem 0 1rem; border-radius: var(--hr-radius-lg); padding: 3rem 2.5rem; }
	.hr-cta--inline { padding: 2.5rem 2rem; }
	.hr-trust { padding: 2rem 2rem 1.875rem; }
	.hr-trust__cards { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
	.hr-trust__stats { gap: 1rem; padding: 1rem 0; }
	.hr-trust__cta { margin-top: 2rem; padding-top: 1.75rem; }
	.hr-blog__breadcrumbs { padding: 0.5rem 0 1rem; }
}

/* Desktop — show TOC + sticky rail CTA alongside body */
@media (min-width: 1024px) {
	.hr-blog__article { width: min(100% - 3rem, 1180px); }
	.hr-blog__body {
		grid-template-columns: minmax(0, 1fr) 280px;
		gap: 3rem;
		align-items: start;
	}
	/* Content on the left, aside (TOC + CTA) on the right. */
	.hr-blog__aside {
		order: 2;
		position: sticky;
		top: calc(var(--hr-header-h) + 1rem);
		align-self: start;
		display: flex;
		flex-direction: column;
		gap: 1.25rem;
		max-height: calc(100vh - var(--hr-header-h) - 2rem);
	}
	.hr-blog__toc {
		max-height: 45vh;
		overflow-y: auto;
	}
}

/* Wide desktop */
@media (min-width: 1280px) {
	.hr-blog__body { grid-template-columns: minmax(0, 1fr) 320px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.hr-blog__related-card,
	.hr-cta__btn,
	.hr-cta--bottom__btn,
	.hr-trust__cta-btn,
	.hr-rail-cta__btn,
	.hr-sticky-cta,
	.hr-blog__back-top,
	.hr-blog__progress { transition: none !important; }
	.hr-blog__related-card:hover,
	.hr-cta__btn:hover,
	.hr-cta--bottom__btn:hover,
	.hr-trust__cta-btn:hover { transform: none; }
}