/**
 * Shared components for Pillar pages, Keyword Hubs and (later) product pages, scoped under .hr-ui.
 * One rule set per component; every value comes from tokens.css.
 * Page files (pillar-page.css, hub-page.css) only hold page layout.
 */

/* Base type */
.hr-ui {
	color: var(--hr-color-text);
	line-height: var(--hr-lh-body);
	overflow-wrap: break-word;
}

.hr-ui p {
	line-height: var(--hr-lh-body);
}

.hr-ui a:not(.hr-btn) {
	color: var(--hr-color-link);
}

.hr-ui a:not(.hr-btn):hover {
	color: var(--hr-color-link-hover);
}

.hr-ui :is(h1, h2, h3, h4) {
	color: var(--hr-color-heading);
}

.hr-ui h1 {
	font-size: var(--hr-fs-h1);
	line-height: 1.2;
	margin: 0 0 16px;
}

.hr-ui h2 {
	font-size: var(--hr-fs-h2);
	line-height: var(--hr-lh-heading);
	margin: 0 0 var(--hr-heading-gap);
}

.hr-ui h3 a:not(.hr-btn) {
	color: var(--hr-color-heading);
	text-decoration: none;
}

.hr-ui h3 a:not(.hr-btn):hover {
	text-decoration: underline;
}

.hr-note {
	color: var(--hr-color-muted);
	font-size: var(--hr-fs-small);
}

/* Buttons */
.hr-ui .hr-btn {
	display: inline-block;
	padding: var(--hr-btn-padding);
	border: var(--hr-btn-border) solid var(--hr-color-accent);
	border-radius: var(--hr-radius-sm);
	font-weight: var(--hr-btn-weight);
	line-height: var(--hr-lh-body);
	text-align: center;
	text-decoration: none;
}

/* --light / --outline-light are the CTA band's buttons: the same accent fill and accent outline. */
.hr-ui :is(.hr-btn--primary, .hr-btn--light),
.hr-ui :is(.hr-btn--primary, .hr-btn--light):focus {
	background: var(--hr-color-accent);
	border-color: var(--hr-color-accent);
	color: var(--hr-color-on-accent);
}

.hr-ui :is(.hr-btn--primary, .hr-btn--light):hover {
	background: var(--hr-color-accent-hover);
	border-color: var(--hr-color-accent-hover);
	color: var(--hr-color-on-accent);
}

.hr-ui :is(.hr-btn--outline, .hr-btn--outline-light),
.hr-ui :is(.hr-btn--outline, .hr-btn--outline-light):hover,
.hr-ui :is(.hr-btn--outline, .hr-btn--outline-light):focus {
	background: transparent;
	border-color: var(--hr-btn-outline);
	color: var(--hr-btn-outline);
}

.hr-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 1.5rem;
}

/* Breadcrumb (spacing is padding so the section band colour runs through it) */
.hr-breadcrumb {
	font-size: var(--hr-fs-small);
	padding: 18px 0 24px;
	margin: 0;
}

.hr-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hr-breadcrumb li + li::before {
	content: "›";
	margin-right: 4px;
	color: var(--hr-color-muted);
}

.hr-breadcrumb span {
	color: var(--hr-color-muted);
}

/* Hero: subtitle, answer summary, key numbers, review line, image */
.hr-ui .hr-hero__subtitle {
	margin: 0 0 1rem;
	font-size: var(--hr-fs-h3);
	font-weight: 600;
	line-height: 1.4;
	color: var(--hr-color-eyebrow);
}

.hr-ui .hr-hero__summary {
	margin: 0 0 16px;
	font-size: var(--hr-fs-lead);
	color: var(--hr-color-text);
}

.hr-ui .hr-hero__file-note {
	margin: 0.5rem 0 0;
	font-size: var(--hr-fs-xs);
	color: var(--hr-color-muted);
}

.hr-ui .hr-hero__review {
	margin: 1rem 0 0;
	font-size: var(--hr-fs-small);
	color: var(--hr-color-muted);
}

.hr-hero__img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--hr-radius-lg);
	background: var(--hr-color-placeholder);
}

/* Key numbers: as many columns as numbers (max 4); never one number alone on a row. */
.hr-ui .hr-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 1.5rem 0;
}

.hr-ui .hr-stats.hr-stats--1 {
	grid-template-columns: minmax(0, 1fr);
}

.hr-ui .hr-stats.hr-stats--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Four numbers: 2 × 2 in a hero text column (about 600px next to the image, where four columns
   left 116–145px per card and split words); four in a row only when the container is wide. */
.hr-ui :has(> .hr-stats) {
	container-type: inline-size;
}

.hr-ui .hr-stats.hr-stats--4 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@container (min-width: 720px) {
	.hr-ui .hr-stats.hr-stats--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.hr-stats > div {
	background: var(--hr-color-surface);
	border: 1px solid var(--hr-color-border);
	box-shadow: var(--hr-shadow-card);
	border-radius: var(--hr-radius-md);
	padding: 14px 16px;
}

/* Wrap only between words: no mid-word breaks, no hyphens (overrides inherited break-word). */
.hr-stats dt,
.hr-stats dd {
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
}

.hr-stats dt {
	font-size: var(--hr-fs-xs);
	color: var(--hr-color-muted);
}

.hr-stats dd {
	margin: 4px 0 0;
	font-size: var(--hr-fs-stat);
	font-weight: 700;
	line-height: 1.2;
	color: var(--hr-color-stat);
}

/* Table of contents */
.hr-toc {
	background: var(--hr-color-surface);
	border: 1px solid var(--hr-color-border);
	box-shadow: var(--hr-shadow-card);
	border-radius: var(--hr-radius-md);
	padding: 20px 24px;
}

.hr-ui .hr-toc h3 {
	font-size: var(--hr-fs-h3);
	line-height: 1.35;
	margin: 0 0 0.5rem;
}

.hr-toc ol {
	margin: 0;
	padding-left: 1.2em;
}

.hr-toc li {
	margin: 0.4rem 0;
	line-height: 1.4;
}

/* Cards (products) */
.hr-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--hr-card-gap);
}

.hr-card {
	display: flex;
	flex-direction: column;
	background: var(--hr-color-surface);
	border: 1px solid var(--hr-color-border);
	box-shadow: var(--hr-shadow-card);
	border-radius: var(--hr-radius-lg);
	padding: 16px;
	min-width: 0;
}

.hr-card__media {
	display: block;
	margin: -16px -16px 16px;
}

.hr-card__img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: var(--hr-color-surface);
	border-radius: var(--hr-radius-lg) var(--hr-radius-lg) 0 0;
}

.hr-ui .hr-card h3 {
	font-size: var(--hr-fs-h3);
	line-height: 1.35;
}

.hr-ui .hr-card__link {
	margin-top: auto;
	font-weight: 600;
	text-decoration: none;
}

/* Product cards: title (two lines max), model, key specs. */
.hr-card-title--clamp {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

.hr-ui .hr-product-model {
	margin: 0 0 0.5rem;
	font-size: 0.9375rem;
	color: var(--hr-color-muted);
}

.hr-product-model strong {
	color: var(--hr-color-heading);
}

.hr-product-specs {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	font-size: var(--hr-fs-small);
	color: var(--hr-color-muted);
}

.hr-product-specs li {
	margin: 0.2rem 0;
	padding-left: 0.9em;
	position: relative;
}

.hr-product-specs li::before {
	content: "·";
	position: absolute;
	left: 0;
	font-weight: 700;
}

/* Hub cards (Pillar directory, Hub "related topics"): 3 per row (2 on tablets, 1 on phones);
   fewer cards, or an unfilled last row, are centred instead of leaving a gap. */
.hr-hubcards {
	--hr-hubcard-cols: 3;
	--hr-hubcard-gap: var(--hr-card-grid-gap);
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--hr-hubcard-gap);
}

.hr-hubcard {
	flex: 0 0 calc((100% - (var(--hr-hubcard-cols) - 1) * var(--hr-hubcard-gap)) / var(--hr-hubcard-cols));
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--hr-color-surface);
	border: 1px solid var(--hr-color-border);
	box-shadow: var(--hr-shadow-card);
	border-radius: var(--hr-radius-lg);
	padding: var(--hr-card-padding);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@media (hover: hover) {
	.hr-hubcard:hover {
		transform: translateY(-8px);
		box-shadow: var(--hr-shadow-hover);
	}
}

.hr-hubcard__image {
	height: 180px;
	overflow: hidden;
	margin-bottom: 25px;
}

.hr-hubcard__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--hr-radius-md);
}

.hr-ui .hr-hubcard__text {
	font-size: var(--hr-card-text-size);
	line-height: var(--hr-card-text-lh);
	color: var(--hr-color-muted);
	margin: 0 0 20px;
}

.hr-ui .hr-hubcard__button {
	margin-top: auto;
	align-self: flex-start;
}

/* Steps: numbered circles joined by arrows, one row on wide screens, one column on phones. */
.hr-ui ol.hr-steps {
	--hr-step-num: 56px;
	--hr-step-gap: 32px;
	list-style: none;
	margin: 2.5rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--hr-steps, 4), minmax(0, 1fr));
	gap: var(--hr-step-gap);
}

.hr-ui .hr-steps > li {
	position: relative;
	min-width: 0;
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
}

.hr-ui .hr-steps .hr-steps__num {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--hr-step-num);
	height: var(--hr-step-num);
	margin: 0 0 1.25rem;
	border-radius: 50%;
	background: var(--hr-step-num-bg);
	color: var(--hr-step-num-text);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1;
}

/* Connector line from this number to the next, ending in an arrowhead. */
.hr-ui .hr-steps > li:not(:last-child)::after,
.hr-ui .hr-steps > li:not(:last-child)::before {
	content: "";
	position: absolute;
	pointer-events: none;
}

.hr-ui .hr-steps > li:not(:last-child)::after {
	top: calc(var(--hr-step-num) / 2 - 1px);
	left: calc(var(--hr-step-num) + 8px);
	right: calc(-1 * var(--hr-step-gap) + 10px);
	height: 2px;
	background: var(--hr-step-line);
	opacity: 0.6;
}

.hr-ui .hr-steps > li:not(:last-child)::before {
	top: calc(var(--hr-step-num) / 2 - 6px);
	right: calc(-1 * var(--hr-step-gap) + 4px);
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 8px solid var(--hr-step-line);
	opacity: 0.6;
}

.hr-ui .hr-steps > li > h3 {
	font-size: var(--hr-fs-title);
	line-height: 1.35;
}

.hr-ui .hr-steps p {
	margin: 0;
	font-size: var(--hr-fs-body);
}

/* Steps with images: up to 3 per row (count set inline), 4:3 image above each step's text,
   no connectors (they would point across row breaks). Steps without an image keep number + text. */
.hr-ui ol.hr-steps.hr-steps--media {
	--hr-step-num: 44px;
	row-gap: calc(var(--hr-step-gap) * 1.5);
}

.hr-ui .hr-steps--media > li:not(:last-child)::after,
.hr-ui .hr-steps--media > li:not(:last-child)::before {
	content: none;
}

.hr-ui .hr-steps__img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--hr-radius-md);
	margin-bottom: 1.25rem;
	background: var(--hr-color-placeholder);
}

/* Card with a photo: 16:9 across the top, edge to edge. */
.hr-ui .hr-card--photo {
	overflow: hidden;
}

.hr-ui .hr-card__photo {
	display: block;
	width: calc(100% + 2 * var(--hr-card-padding));
	max-width: none;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	margin: calc(-1 * var(--hr-card-padding)) calc(-1 * var(--hr-card-padding)) 1.5rem;
}

/* Badge: a card's key value, e.g. "6 testers". */
.hr-ui .hr-badge {
	display: inline-block;
	margin-bottom: 0.875rem;
	padding: 4px 12px;
	border-radius: var(--hr-radius-pill);
	background: var(--hr-color-accent);
	color: var(--hr-color-on-accent);
	font-size: var(--hr-fs-small);
	font-weight: 700;
	line-height: 1.5;
}

/* FAQ: accordion of white cards on the section band, first answer open */
.hr-faq {
	display: grid;
	gap: 12px;
	max-width: 880px;
}

.hr-faq__item {
	background: var(--hr-color-surface);
	border: 1px solid var(--hr-color-border);
	border-radius: var(--hr-radius-lg);
	box-shadow: var(--hr-shadow-card);
	padding: 0 24px;
}

.hr-faq__item summary {
	cursor: pointer;
	list-style: none;
	padding: 18px 36px 18px 0;
	position: relative;
}

.hr-faq__item summary::-webkit-details-marker {
	display: none;
}

.hr-faq__item summary::after {
	content: "+";
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.5rem;
	line-height: 1;
	color: var(--hr-color-muted);
}

.hr-faq__item[open] summary::after {
	content: "−";
}

.hr-ui .hr-faq__item summary h3 {
	display: inline;
	margin: 0;
	font-size: var(--hr-fs-h3);
	font-weight: 600;
	line-height: 1.3;
}

.hr-faq__answer {
	padding: 0 0 18px;
	color: var(--hr-color-text);
}

.hr-faq__answer > :last-child {
	margin-bottom: 0;
}

/* Key facts table (one card per fact on phones) */
.hr-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.hr-ui .hr-table {
	width: 100%;
	min-width: 520px;
	border-collapse: collapse;
	border: 1px solid var(--hr-color-border);
	background: var(--hr-color-surface);
	box-shadow: var(--hr-shadow-card);
	margin: 0;
}

.hr-ui .hr-table th,
.hr-ui .hr-table td {
	text-align: left;
	padding: 12px 16px;
	border: 0;
	border-bottom: 1px solid var(--hr-color-border);
	vertical-align: top;
}

.hr-ui .hr-table thead th {
	background: var(--hr-color-bg-light);
	font-size: var(--hr-fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--hr-color-muted);
}

.hr-table-wrap + .hr-note {
	margin-top: 0.75rem;
}

/* Certifications: 3 per row (2 on tablets and phones), an unfilled last row is centred. */
.hr-certs {
	--hr-cert-cols: 3;
	--hr-cert-gap: var(--hr-grid-gap);
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--hr-cert-gap);
}

.hr-cert {
	flex: 0 0 calc((100% - (var(--hr-cert-cols) - 1) * var(--hr-cert-gap)) / var(--hr-cert-cols));
	min-width: 0;
	background: var(--hr-color-surface);
	border: 1px solid var(--hr-color-border);
	box-shadow: var(--hr-shadow-card);
	border-radius: var(--hr-radius-lg);
	padding: 24px;
	text-align: center;
}

/* Portrait certificate (about A4), shown whole on a white mat; opens the original. */
.hr-cert__link {
	--hr-cert-mat: 8px;
	position: relative;
	display: block;
	max-width: 280px;
	aspect-ratio: 1 / 1.41;
	margin: 0 auto 1rem;
	background: var(--hr-color-surface);
	border: 1px solid var(--hr-color-border);
	border-radius: var(--hr-radius-sm);
}

.hr-ui .hr-cert__img {
	position: absolute;
	inset: var(--hr-cert-mat);
	width: calc(100% - 2 * var(--hr-cert-mat));
	height: calc(100% - 2 * var(--hr-cert-mat));
	object-fit: contain;
}

.hr-ui .hr-cert__name {
	font-size: var(--hr-fs-h3-xl);
	line-height: 1.3;
	margin: 0 0 0.875rem;
}

/* Reviewer */
.hr-reviewer {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	max-width: 760px;
	background: var(--hr-color-surface);
	border: 1px solid var(--hr-color-border);
	box-shadow: var(--hr-shadow-card);
	border-radius: var(--hr-radius-lg);
	padding: 24px;
}

.hr-reviewer > div {
	min-width: 0;
}

.hr-reviewer__photo {
	width: 96px;
	height: 96px;
	aspect-ratio: 1 / 1;
	flex: 0 0 96px;
	object-fit: cover;
	border-radius: 50%;
}

.hr-ui .hr-reviewer__name {
	font-size: var(--hr-fs-title);
	line-height: 1.3;
	margin: 0;
}

.hr-ui .hr-reviewer__job {
	margin: 0 0 16px;
	color: var(--hr-color-muted);
	font-weight: 600;
}

.hr-reviewer p:last-child {
	margin-bottom: 0;
}

/* CTA band (on Pillar / Hub pages page-sections.css adds the grid texture). */
.hr-ui .hr-cta {
	--hr-band: var(--hr-band-cta);
	background-color: var(--hr-band);
	color: var(--hr-color-text);
	text-align: center;
}

.hr-ui .hr-cta p {
	max-width: 640px;
	margin: 0 auto 1.5rem;
}

.hr-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

/* Card title → text spacing. */
.hr-ui :is(.capability-card, .workflow-item, .hr-steps > li, .hr-hubcard, .hr-cert, .hr-card) h3 {
	margin-top: 0;
	margin-bottom: 0.875rem;
}

/* Content cards (buyer problems, capability cards, why choose us, Hub cards): one title / text
   scale. Cards in a row share the row height (grid / flex stretch) with content from the top;
   no min-height. Capability-style cards carry an accent rule along the top. */
.hr-ui :is(.capability-card, .hr-hubcard) h3 {
	font-size: var(--hr-card-title-size);
	line-height: var(--hr-card-title-lh);
	font-weight: var(--hr-card-title-weight);
	margin-bottom: var(--hr-card-title-gap);
}

.hr-ui .capability-card p:not(.hr-pillar__evidence-note) {
	font-size: var(--hr-card-text-size);
	line-height: var(--hr-card-text-lh);
}

.hr-ui .capability-card > :last-child {
	margin-bottom: 0;
}

.hr-ui .capability-card {
	border-top: var(--hr-card-accent-line) solid var(--hr-color-accent);
}

/* A card with a link: the title link stretches over the whole card. */
.hr-ui .hr-card--link {
	position: relative;
	transition: box-shadow 0.2s ease;
}

.hr-ui .hr-card__stretched::after {
	content: "";
	position: absolute;
	inset: 0;
}

.hr-ui .hr-card--link:hover {
	box-shadow: var(--hr-shadow-hover);
}

/* Product range (Pillar, under the hero): 3 columns on desktop, 2 on tablet and phone.
   The image box is 1:1 and white (at most 240px, centred, so the strip stays short); the
   product is contained and centred, never cropped. */
.hr-ui .hr-range__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--hr-card-grid-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hr-ui .hr-range__media {
	aspect-ratio: 1 / 1;
	max-width: 240px;
	margin: 0 auto 1rem;
	background: #ffffff;
	border-radius: var(--hr-radius-md);
	overflow: hidden;
}

.hr-ui .hr-range__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

/* Case studies (Pillar and Hub): 3 compact cards, 3 columns on desktop, 1 on tablet and phone.
   Cards in a row share the row height; the model line sits at the bottom. */
.hr-ui .hr-cases {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--hr-card-grid-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hr-ui .hr-case {
	display: flex;
	flex-direction: column;
}

.hr-ui .capability-card.hr-case h3.hr-case__label {
	margin-bottom: 12px;
}

.hr-ui .capability-card.hr-case .hr-case__year {
	display: block;
	margin-top: 2px;
	font-size: var(--hr-fs-small);
	font-weight: 400;
	color: var(--hr-color-muted);
}

.hr-ui .capability-card.hr-case .hr-case__kicker {
	margin: 0 0 2px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--hr-color-accent);
}

.hr-ui .capability-card.hr-case .hr-case__text {
	margin: 0 0 12px;
}

.hr-ui .hr-case__results {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin: 4px 0 14px;
	padding: 14px 0 0;
	border-top: 1px solid var(--hr-color-border);
}

.hr-ui .hr-case__results > div {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	min-width: 0;
}

.hr-ui .hr-case__results dd {
	margin: 0;
	font-family: var(--hr-font-data-number);
	font-size: 1.5rem;
	font-weight: 900;
	line-height: 1.1;
	color: var(--hr-color-accent);
	overflow-wrap: anywhere;
}

.hr-ui .hr-case__results dt {
	margin-top: 4px;
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.35;
	color: var(--hr-color-muted);
}

.hr-ui .capability-card.hr-case .hr-case__model {
	margin: auto 0 0;
	font-size: var(--hr-fs-small);
	color: var(--hr-color-muted);
}

/* Optional button under a capability block. */
.hr-ui .hr-pillar__block-actions {
	justify-content: center;
	margin-top: var(--hr-card-grid-gap);
}

/* Tablet */
@media (max-width: 921px) {
	.hr-hubcards {
		--hr-hubcard-cols: 2;
	}

	.hr-certs {
		--hr-cert-cols: 2;
		--hr-cert-gap: var(--hr-grid-gap-sm);
	}

	.hr-ui ol.hr-steps.hr-steps--media {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hr-ui .hr-range__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hr-ui .hr-cases {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Steps turn vertical */
@media (max-width: 767px) {
	.hr-ui ol.hr-steps {
		--hr-step-num: 44px;
		--hr-step-gap: 28px;
		grid-template-columns: minmax(0, 1fr);
	}

	.hr-ui .hr-steps > li {
		padding-left: calc(var(--hr-step-num) + 16px);
		min-height: var(--hr-step-num);
	}

	.hr-ui .hr-steps .hr-steps__num {
		position: absolute;
		top: 0;
		left: 0;
		margin: 0;
		font-size: 1rem;
	}

	.hr-ui .hr-steps > li > h3 {
		padding-top: calc((var(--hr-step-num) - 1.4em) / 2);
	}

	.hr-ui .hr-steps > li:not(:last-child)::after {
		top: calc(var(--hr-step-num) + 6px);
		bottom: calc(-1 * var(--hr-step-gap) + 12px);
		left: calc(var(--hr-step-num) / 2 - 1px);
		right: auto;
		width: 2px;
		height: auto;
	}

	.hr-ui .hr-steps > li:not(:last-child)::before {
		top: auto;
		bottom: calc(-1 * var(--hr-step-gap) + 4px);
		left: calc(var(--hr-step-num) / 2 - 6px);
		right: auto;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		border-top: 8px solid var(--hr-step-line);
		border-bottom: 0;
	}

	/* Steps with images stack: image, then number and text in normal flow. */
	.hr-ui ol.hr-steps.hr-steps--media {
		grid-template-columns: minmax(0, 1fr);
	}

	.hr-ui .hr-steps--media > li {
		padding-left: 0;
	}

	.hr-ui .hr-steps--media .hr-steps__num {
		position: relative;
		margin: 0 0 1rem;
	}

	.hr-ui .hr-steps--media > li > h3 {
		padding-top: 0;
	}
}

/* Phone */
@media (max-width: 544px) {
	.hr-actions .hr-btn {
		flex: 1 1 100%;
	}

	/* Two product range cards per row: tighter padding, smaller badge and text. */
	.hr-ui .hr-range .hr-range__card {
		padding: 12px;
	}

	.hr-ui .hr-range__media {
		margin-bottom: 0.75rem;
	}

	.hr-ui .hr-range .hr-badge {
		margin-bottom: 0.5rem;
		padding: 2px 8px;
		font-size: 0.75rem;
	}

	.hr-ui .hr-range .hr-range__card h3 {
		font-size: 0.9375rem;
		margin-bottom: 4px;
	}

	.hr-ui .hr-range .hr-range__card p {
		font-size: 0.8125rem;
		line-height: 1.5;
	}

	.hr-ui .hr-stats.hr-stats--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hr-ui .hr-stats.hr-stats--3 {
		gap: 8px;
	}

	.hr-stats.hr-stats--3 > div {
		padding: 10px 8px;
	}

	.hr-stats.hr-stats--3 dt {
		font-size: 0.6875rem;
		line-height: 1.3;
	}

	.hr-stats.hr-stats--3 dd {
		font-size: 1rem;
	}

	.hr-cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.hr-hubcards {
		--hr-hubcard-cols: 1;
	}

	.hr-card__img {
		aspect-ratio: 4 / 3;
	}

	.hr-ui .hr-hubcard__button {
		align-self: stretch;
	}

	/* Certifications: two compact columns instead of one tall card per certificate. */
	.hr-certs {
		--hr-cert-gap: 12px;
	}

	.hr-cert {
		padding: 1rem 0.75rem;
	}

	.hr-cert__link {
		--hr-cert-mat: 4px;
	}


	.hr-reviewer {
		flex-direction: column;
	}

	/* Key facts: one card per fact, no horizontal scrolling. */
	.hr-table-wrap {
		overflow: visible;
	}

	.hr-ui .hr-table {
		min-width: 0;
		border: 0;
		background: transparent;
	}

	.hr-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	.hr-table,
	.hr-table tbody,
	.hr-table tr,
	.hr-table th,
	.hr-table td {
		display: block;
		width: 100%;
	}

	.hr-ui .hr-table tr {
		background: var(--hr-color-surface);
		border: 1px solid var(--hr-color-border);
		border-radius: var(--hr-radius-md);
		padding: 12px 14px;
		margin-bottom: 10px;
	}

	.hr-ui .hr-table th,
	.hr-ui .hr-table td {
		padding: 2px 0;
		border: 0;
	}

	.hr-ui .hr-table tbody td:nth-child(2) {
		font-size: 1.125rem;
		font-weight: 700;
	}

	.hr-ui .hr-table tbody td:nth-child(3) {
		font-size: var(--hr-fs-xs);
		color: var(--hr-color-muted);
	}

	/* A fact without a source gets no empty source line. */
	.hr-ui .hr-table td:empty {
		display: none;
	}
}