/**
 * Homepage layout. Enqueued only when is_front_page() is true.
 *
 * Layout only — buttons, cards, headings, chips, badges, icon plates and
 * the focus ring all come from components.css, which loads site-wide.
 * Anything defined here is genuinely homepage-specific.
 *
 * Every value resolves to a --rtq-* token (WORDPRESS.md §13); nesting is
 * kept to 3 levels. Motion is limited to hover and focus, and tokens.css
 * zeroes transition duration under prefers-reduced-motion.
 */

/* ---------------------------------------------------------------
 * GeneratePress container reset (front page only)
 * GP's .site-main carries its own margin/padding for the default blog
 * layout. The homepage sections manage their own full-bleed backgrounds
 * and inner widths, so that wrapper spacing is neutralised here. High
 * specificity rather than !important, per WORDPRESS.md §13.
 * --------------------------------------------------------------- */
body.home .site-content .content-area {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
}

body.home .site-content .content-area .site-main {
	margin: 0;
	padding: 0;
}

/* ---------------------------------------------------------------
 * Section shell
 * --------------------------------------------------------------- */
.rtq-section {
	padding-block: var(--rtq-section-y);
}

.rtq-section--alt {
	background: var(--rtq-surface-alt);
}

.rtq-section__inner,
.rtq-hero__inner,
.rtq-trustbar__inner {
	max-width: var(--rtq-container);
	margin-inline: auto;
	padding-inline: var(--rtq-gutter);
}

.rtq-section__more {
	margin: var(--rtq-space-xl) 0 0;
	text-align: center;
}

/* Legacy aliases: the Phase 3 sections below still use these names.
   They resolve to the same tokens as the components.css equivalents. */
.rtq-section__head {
	max-width: 46rem;
	margin-bottom: var(--rtq-space-lg);
}

.rtq-section__head--center {
	margin-inline: auto;
	text-align: center;
}

.rtq-section__title {
	font-size: var(--rtq-text-h2);
	line-height: var(--rtq-leading-snug);
	letter-spacing: var(--rtq-tracking-snug);
	color: var(--rtq-ink);
	margin: 0 0 var(--rtq-space-xs);
}

.rtq-section__sub {
	font-size: var(--rtq-text-lead);
	line-height: var(--rtq-leading-body);
	color: var(--rtq-body);
	margin: 0;
}

.rtq-inline-link {
	color: var(--rtq-accent);
	font-weight: 600;
	text-underline-offset: 0.18em;
}

/* ---------------------------------------------------------------
 * Hero
 * --------------------------------------------------------------- */
.rtq-hero {
	position: relative;
	padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 4vw, 3.5rem);
	background:
		radial-gradient(60rem 32rem at 78% -10%, var(--rtq-primary-wash) 0%, transparent 62%),
		var(--rtq-surface);
}

.rtq-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--rtq-space-xl);
	align-items: center;
}

.rtq-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--rtq-space-3xs);
	margin: 0 0 var(--rtq-space-sm);
	padding: 0.35rem 0.8rem;
	border: 1px solid var(--rtq-border);
	border-radius: var(--rtq-radius-pill);
	background: var(--rtq-surface);
	box-shadow: var(--rtq-shadow-xs);
	font-size: var(--rtq-text-xs);
	font-weight: 600;
	color: var(--rtq-body);
}

.rtq-hero__eyebrow .rtq-icon {
	color: var(--rtq-accent);
}

.rtq-hero__title {
	font-size: var(--rtq-text-display);
	line-height: var(--rtq-leading-tight);
	letter-spacing: var(--rtq-tracking-tight);
	color: var(--rtq-ink);
	margin: 0 0 var(--rtq-space-sm);
	max-width: 16ch;
	text-wrap: balance;
}

/* Accent stroke under the second headline line. Painted as a background
   gradient rather than text-decoration so its thickness and vertical
   position are controllable and it sits behind descenders. */
.rtq-hero__title-accent {
	display: inline;
	background-image: linear-gradient(var(--rtq-accent), var(--rtq-accent));
	background-repeat: no-repeat;
	background-size: 100% 0.1em;
	background-position: 0 92%;
	padding-bottom: 0.05em;
}

.rtq-hero__lead {
	font-size: var(--rtq-text-lead);
	line-height: var(--rtq-leading-body);
	color: var(--rtq-body);
	margin: 0 0 var(--rtq-space-md);
	max-width: 56ch;
	text-wrap: pretty;
}

.rtq-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rtq-space-xs);
	margin-top: var(--rtq-space-md);
}

.rtq-hero__art {
	display: none;
}

/* Search --------------------------------------------------------- */
.rtq-search {
	max-width: 34rem;
}

.rtq-search__control {
	display: flex;
	align-items: center;
	gap: var(--rtq-space-2xs);
	background: var(--rtq-surface);
	border: 1px solid var(--rtq-border-strong);
	border-radius: var(--rtq-radius);
	box-shadow: var(--rtq-shadow-sm);
	padding: 0.35rem 0.35rem 0.35rem 0.9rem;
	transition: border-color var(--rtq-transition), box-shadow var(--rtq-transition);
}

.rtq-search__control:focus-within {
	border-color: var(--rtq-primary);
	box-shadow: var(--rtq-ring);
}

.rtq-search__icon {
	display: inline-flex;
	flex: none;
	color: var(--rtq-muted);
}

.rtq-search__input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 0.65rem 0.25rem;
	font-size: var(--rtq-text-base);
	color: var(--rtq-ink);
}

/* The wrapper shows the focus state via :focus-within, so the bare
   input doesn't also draw its own ring inside it. */
.rtq-search__input:focus,
.rtq-search__input:focus-visible {
	outline: none;
}

.rtq-search__submit {
	flex: none;
	border: 0;
	border-radius: var(--rtq-radius-sm);
	background: var(--rtq-primary);
	color: var(--rtq-on-dark);
	font-family: inherit;
	font-size: var(--rtq-text-sm);
	font-weight: 600;
	padding: 0.7rem 1.2rem;
	cursor: pointer;
	transition: background-color var(--rtq-transition);
}

.rtq-search__submit:hover {
	background: var(--rtq-primary-hover);
}

/* ---------------------------------------------------------------
 * Trust bar
 * --------------------------------------------------------------- */
.rtq-trustbar {
	background: var(--rtq-surface-alt);
	border-block: 1px solid var(--rtq-border);
	padding-block: var(--rtq-space-sm);
}

.rtq-trustbar__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--rtq-space-2xs) var(--rtq-space-xs);
	list-style: none;
	margin: 0;
	padding: 0;
}

.rtq-trustbar__item {
	display: flex;
}

.rtq-badge--link {
	text-decoration: none;
	transition: border-color var(--rtq-transition), color var(--rtq-transition);
}

.rtq-badge--link:hover {
	border-color: var(--rtq-primary);
	color: var(--rtq-primary);
}

/* ---------------------------------------------------------------
 * Categories
 * --------------------------------------------------------------- */
.rtq-cats {
	background: var(--rtq-surface);
}

/* One or two real categories: wider cards, so the row reads as a
   deliberate layout instead of a lone tile in a 4-up grid. Flex rather
   than auto-fit grid, which leaves collapsed 0px tracks (and their
   gaps) trailing after the real cards. */
.rtq-cats__grid.is-sparse {
	display: flex;
	flex-wrap: wrap;
}

.rtq-cats__grid.is-sparse > .rtq-cat {
	flex: 1 1 18rem;
	max-width: 24rem;
}

.rtq-cat .rtq-card__body {
	gap: var(--rtq-space-xs);
}

.rtq-cat__count {
	font-weight: 600;
}

.rtq-cat__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--rtq-space-3xs);
	font-weight: 600;
	color: var(--rtq-accent);
}

.rtq-cat:hover .rtq-cat__cta .rtq-icon {
	transform: translateX(3px);
}

.rtq-cat__cta .rtq-icon {
	transition: transform var(--rtq-transition);
}


/* ---------------------------------------------------------------
 * Reviews
 * --------------------------------------------------------------- */
.rtq-grid--reviews {
	grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
}

.rtq-rev {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--rtq-surface);
	border: 1px solid var(--rtq-border);
	border-radius: var(--rtq-radius);
	box-shadow: var(--rtq-shadow-sm);
	transition: box-shadow var(--rtq-transition), border-color var(--rtq-transition), transform var(--rtq-transition);
}

.rtq-rev:hover {
	border-color: var(--rtq-border-strong);
	box-shadow: var(--rtq-shadow-lift);
	transform: translateY(-2px);
}

/* The media box owns the aspect ratio and the image fills it absolutely.
   Sizing the <img> itself with height:100% instead creates a cyclic
   dependency (item stretches to the flex line, line depends on the item)
   which browsers resolve to a runaway height -- measured at 1500px on a
   ~280px card before this was restructured. Absolute positioning takes
   the image out of the height calculation entirely, and the ratio on the
   box reserves layout space up front, so there is no CLS either. */
.rtq-rev__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--rtq-surface-alt);
}

.rtq-rev__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rtq-rev__body {
	display: flex;
	flex-direction: column;
	gap: var(--rtq-space-xs);
	padding: var(--rtq-space-md);
}

.rtq-rev__eyebrow {
	align-self: flex-start;
	background: var(--rtq-primary-wash);
	color: var(--rtq-primary);
	font-size: var(--rtq-text-xs);
	font-weight: 650;
	letter-spacing: 0.01em;
	padding: 0.25rem 0.6rem;
	border-radius: 999px;
}

.rtq-rev__title {
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.015em;
	margin: 0;
	color: var(--rtq-ink);
}

.rtq-rev__title a {
	color: inherit;
	text-decoration: none;
}

.rtq-rev__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.rtq-rev__excerpt {
	font-size: var(--rtq-text-sm);
	line-height: 1.65;
	color: var(--rtq-body);
	margin: 0;
}

.rtq-rev__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--rtq-space-xs);
	margin-top: var(--rtq-space-xs);
	padding-top: var(--rtq-space-sm);
	border-top: 1px solid var(--rtq-border);
}

.rtq-rev__date {
	font-size: var(--rtq-text-xs);
	color: var(--rtq-muted);
}

.rtq-rev__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--rtq-space-2xs);
	font-size: var(--rtq-text-sm);
	font-weight: 650;
	color: var(--rtq-primary);
}

.rtq-rev:hover .rtq-rev__cta svg {
	transform: translateX(3px);
}

.rtq-rev__cta svg {
	transition: transform var(--rtq-transition);
}

/* ---------------------------------------------------------------
 * E-E-A-T
 * --------------------------------------------------------------- */
.rtq-eeat {
	background: var(--rtq-surface-alt);
}

.rtq-grid--eeat {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
	gap: var(--rtq-space-md);
}

.rtq-eeat__item {
	background: var(--rtq-surface);
	border: 1px solid var(--rtq-border);
	border-radius: var(--rtq-radius);
	box-shadow: var(--rtq-shadow-sm);
	padding: var(--rtq-space-md);
}

.rtq-eeat__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--rtq-radius-sm);
	background: var(--rtq-primary-wash);
	color: var(--rtq-primary);
	margin-bottom: var(--rtq-space-sm);
}

.rtq-eeat__title {
	font-size: var(--rtq-text-h3);
	font-weight: 650;
	line-height: 1.35;
	color: var(--rtq-ink);
	margin: 0 0 var(--rtq-space-xs);
}

.rtq-eeat__item p {
	font-size: var(--rtq-text-sm);
	line-height: var(--rtq-leading-body);
	color: var(--rtq-body);
	margin: 0;
}

/* ---------------------------------------------------------------
 * Process timeline
 * --------------------------------------------------------------- */
.rtq-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: var(--rtq-space-md);
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: rtq-step;
}

.rtq-step {
	position: relative;
	padding-top: var(--rtq-space-sm);
}

.rtq-step__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--rtq-surface);
	border: 1px solid var(--rtq-border-strong);
	color: var(--rtq-primary);
	margin-bottom: var(--rtq-space-sm);
}

.rtq-step__num {
	display: inline-block;
	font-size: var(--rtq-text-xs);
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--rtq-accent);
	margin-bottom: var(--rtq-space-2xs);
}

.rtq-step__title {
	font-size: var(--rtq-text-h3);
	font-weight: 650;
	color: var(--rtq-ink);
	margin: 0 0 var(--rtq-space-2xs);
}

.rtq-step__copy {
	font-size: var(--rtq-text-sm);
	line-height: var(--rtq-leading-body);
	color: var(--rtq-body);
	margin: 0;
}

/* ---------------------------------------------------------------
 * Closing CTA
 * --------------------------------------------------------------- */
.rtq-cta {
	padding-block: clamp(2rem, 3vw, 2.75rem);
	background: var(--rtq-navy);
}

.rtq-cta__inner {
	text-align: center;
	max-width: var(--rtq-container-narrow);
}

.rtq-cta__title {
	font-size: clamp(1.45rem, 2.4vw, 1.9rem);
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: #fff;
	margin: 0 0 var(--rtq-space-sm);
}

.rtq-cta__copy {
	font-size: var(--rtq-text-sm);
	line-height: 1.6;
	color: #cbd5e1;
	margin: 0 0 var(--rtq-space-md);
}

.rtq-cta .rtq-btn:focus-visible {
	outline-color: #fff;
}

/* ---------------------------------------------------------------
 * Breakpoints
 * --------------------------------------------------------------- */
@media (min-width: 48rem) {
	.rtq-rev__title {
		font-size: 1.35rem;
	}

	/* A single real review becomes a wide, deliberate featured card
	   rather than one narrow tile in an otherwise empty row. */
	.rtq-grid--reviews.is-single {
		grid-template-columns: minmax(0, 1fr);
		max-width: 54rem;
	}

	.rtq-grid--reviews.is-single .rtq-rev {
		flex-direction: row;
		align-items: stretch;
	}

	/* Media becomes a stretched side panel: drop the fixed ratio and let
	   it take its height from the flex line (i.e. from the body copy),
	   with the absolutely-positioned image covering whatever that is. */
	.rtq-grid--reviews.is-single .rtq-rev__media {
		flex: 0 0 42%;
		align-self: stretch;
		aspect-ratio: auto;
		min-height: 14rem;
	}

	.rtq-grid--reviews.is-single .rtq-rev__body {
		flex: 1 1 auto;
		min-width: 0;
		justify-content: center;
		padding: var(--rtq-space-lg);
	}
}

@media (min-width: 62rem) {
	.rtq-hero__inner {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	}

	.rtq-hero__art {
		display: block;
		justify-self: center;
		max-width: 26rem;
		width: 100%;
	}

	.rtq-hero__art svg {
		width: 100%;
		height: auto;
	}
}

/* ---------------------------------------------------------------
 * Hero breakpoint: art appears only when there's room for it to be
 * an asset rather than a squeeze. Below this it stays display:none,
 * costing nothing but the inline markup.
 * --------------------------------------------------------------- */
@media (min-width: 62rem) {
	.rtq-hero__inner {
		grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
	}

	.rtq-hero__art {
		display: block;
		justify-self: center;
		width: 100%;
		max-width: 30rem;
	}

	.rtq-hero__art svg {
		width: 100%;
		height: auto;
	}
}

/* ---------------------------------------------------------------
 * Phase 3A additions
 * --------------------------------------------------------------- */

/* Hero: category shortcuts + recently-updated pointer --------------- */
.rtq-hero__shortcuts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rtq-space-2xs);
	margin-top: var(--rtq-space-sm);
}

.rtq-hero__shortcuts-label {
	font-size: var(--rtq-text-xs);
	font-weight: 600;
	color: var(--rtq-muted);
}

.rtq-hero__shortcuts-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rtq-space-3xs);
	list-style: none;
	margin: 0;
	padding: 0;
}

.rtq-chip--link {
	border: 1px solid transparent;
	transition: background-color var(--rtq-transition), border-color var(--rtq-transition);
}

.rtq-chip--link:hover {
	background: var(--rtq-surface);
	border-color: var(--rtq-primary);
}

.rtq-hero__latest {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rtq-space-3xs);
	margin: var(--rtq-space-md) 0 0;
	font-size: var(--rtq-text-xs);
	color: var(--rtq-muted);
}

.rtq-hero__latest a {
	color: var(--rtq-ink);
	font-weight: 600;
	text-underline-offset: 0.18em;
}

.rtq-hero__latest a:hover {
	color: var(--rtq-primary);
}

/* Small "fresh" indicator. Static — no pulse, no animation. */
.rtq-hero__latest-dot {
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: var(--rtq-accent);
	flex: none;
}

/* Categories: per-type counts ------------------------------------- */
.rtq-cat__counts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rtq-space-3xs) var(--rtq-space-2xs);
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--rtq-text-xs);
	font-weight: 600;
	color: var(--rtq-muted);
}

.rtq-cat__counts li + li::before {
	content: "·";
	margin-right: var(--rtq-space-2xs);
	color: var(--rtq-border-strong);
}

/* Guide cards ------------------------------------------------------ */
.rtq-latest__facts {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rtq-space-3xs);
}

.rtq-latest__dot {
	color: var(--rtq-border-strong);
}

.rtq-latest__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--rtq-space-3xs);
	font-weight: 600;
	color: var(--rtq-accent);
}

.rtq-latest__cta .rtq-icon {
	transition: transform var(--rtq-transition);
}

.rtq-latest__card:hover .rtq-latest__cta .rtq-icon {
	transform: translateX(3px);
}

@media (min-width: 48rem) {
	/* A single real guide becomes a wide featured card rather than one
	   narrow tile in an otherwise empty row. */
	.rtq-latest__grid.is-single {
		grid-template-columns: minmax(0, 1fr);
		max-width: 56rem;
	}

	.rtq-latest__grid.is-single .rtq-guide {
		flex-direction: row;
	}

	.rtq-latest__grid.is-single .rtq-card__media {
		flex: 0 0 40%;
		aspect-ratio: auto;
		align-self: stretch;
		min-height: 15rem;
	}

	.rtq-latest__grid.is-single .rtq-card__body {
		flex: 1 1 auto;
		min-width: 0;
		justify-content: center;
		padding: var(--rtq-space-lg);
	}
}

/* ---------------------------------------------------------------
 * Phase 3B: comparisons, best-of guides, collections
 * --------------------------------------------------------------- */

/* Comparison cards ------------------------------------------------- */
.rtq-compare__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--rtq-radius-sm);
	background: var(--rtq-accent-wash);
	color: var(--rtq-accent);
	margin-bottom: var(--rtq-space-3xs);
}

/* Collections ------------------------------------------------------ */
.rtq-collections__grid {
	gap: var(--rtq-space-sm);
}

.rtq-collection .rtq-card__body {
	gap: var(--rtq-space-2xs);
	padding: var(--rtq-space-sm);
}

.rtq-collection .rtq-iconplate {
	width: 2.25rem;
	height: 2.25rem;
}

.rtq-collection .rtq-card__title {
	font-size: var(--rtq-text-base);
}

.rtq-collection__count {
	font-size: var(--rtq-text-xs);
	font-weight: 600;
	color: var(--rtq-muted);
}

/* Roundups reuse the latest-guide card metrics; only the grid differs. */
.rtq-roundups__grid .rtq-card__media {
	aspect-ratio: 16 / 9;
}

/* ==========================================================================
   Hero trust badges
   Each badge links to the page that substantiates its claim. Styled as a
   quiet row rather than loud pills: these are verifiable statements, and
   over-styling them would read as the decorative badge-spam they exist to
   avoid. Transition only on colour -- no transform, no motion.
   ========================================================================== */

.rtq-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rtq-space-2xs) var(--rtq-space-sm);
	margin: var(--rtq-space-md) 0 0;
	padding: 0;
	list-style: none;
}

.rtq-hero__badge a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	/* 24px min target height (WCAG 2.2 SC 2.5.8) via padding, not a fixed
	   height, so the label can wrap on narrow screens without clipping. */
	min-height: 24px;
	padding: 4px 2px;
	color: var(--rtq-muted);
	font-size: var(--rtq-text-xs);
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color var(--rtq-transition), border-color var(--rtq-transition);
}

.rtq-hero__badge a:hover,
.rtq-hero__badge a:focus-visible {
	color: var(--rtq-primary);
	border-bottom-color: var(--rtq-primary);
}

.rtq-hero__badge svg {
	flex: none;
	color: var(--rtq-accent);
}

/* ==========================================================================
   Trust block -- policy links
   The claims above are assertions; these are the openable documents behind
   them. Grid auto-fits so the row reflows without a media query and never
   leaves a stranded single card on its own line.
   ========================================================================== */

.rtq-eeat__policies {
	margin-top: var(--rtq-space-xl);
	padding-top: var(--rtq-space-lg);
	border-top: 1px solid var(--rtq-border);
}

.rtq-eeat__policies-title {
	margin: 0 0 var(--rtq-space-sm);
	color: var(--rtq-muted);
	font-size: var(--rtq-text-xs);
	font-weight: 700;
	letter-spacing: var(--rtq-tracking-wide);
	text-transform: uppercase;
	text-align: center;
}

.rtq-policylinks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: var(--rtq-space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.rtq-policylink {
	display: flex;
	align-items: center;
	gap: var(--rtq-space-2xs);
	min-height: 48px;
	padding: var(--rtq-space-2xs) var(--rtq-space-sm);
	color: var(--rtq-ink);
	font-size: var(--rtq-text-sm);
	font-weight: 600;
	text-decoration: none;
	background: var(--rtq-surface);
	border: 1px solid var(--rtq-border);
	border-radius: var(--rtq-radius);
	transition: border-color var(--rtq-transition), background-color var(--rtq-transition), color var(--rtq-transition);
}

.rtq-policylink:hover,
.rtq-policylink:focus-visible {
	color: var(--rtq-primary);
	background: var(--rtq-primary-wash);
	border-color: var(--rtq-primary);
}

.rtq-policylink__icon {
	display: inline-flex;
	flex: none;
	color: var(--rtq-accent);
}

.rtq-policylink__label {
	flex: 1 1 auto;
}

.rtq-policylink__arrow {
	display: inline-flex;
	flex: none;
	color: var(--rtq-border-strong);
	transition: color var(--rtq-transition);
}

.rtq-policylink:hover .rtq-policylink__arrow,
.rtq-policylink:focus-visible .rtq-policylink__arrow {
	color: var(--rtq-primary);
}


/* Focus rings for the new trust components.
   The hover rules above change colour only; on their own that makes the
   focus state indistinguishable from hover and leans entirely on colour
   perception (WCAG 2.4.7). These add the same 2px ring the rest of the
   site already uses for .rtq-btn / .rtq-footer__col a, so keyboard focus
   is unmistakable and consistent site-wide. */

.rtq-hero__badge a:focus-visible,
.rtq-policylink:focus-visible {
	outline: 2px solid var(--rtq-primary);
	outline-offset: 2px;
	border-radius: var(--rtq-radius-xs);
}

/* ==========================================================================
   V2 LAYOUT — full-bleed bands, wide content shell
   ==========================================================================
   The homepage previously sat inside GeneratePress's #page.grid-container,
   which caps at 1200px. That cap was what made section backgrounds stop
   short of the viewport edge and left ~350px of dead margin either side at
   1920px: the bands were never full-bleed, they were just as wide as the
   wrapper allowed.

   Unlocking #page is the whole fix. GP's header and footer sit OUTSIDE
   #page and carry their own .grid-container inner wrappers, so they need
   widening too, or the logo and footer sit narrower than the content.

   THAT PART NOW LIVES IN components.css, not here. It was originally
   scoped to body.home, which was wrong: the header and footer are shared
   furniture, so the chrome rendered 1560px wide on the homepage and
   1200px on every other template, and the logo visibly jumped between
   them. Worse, the brand rules lived in this sheet too, so on any
   non-home template the lock-up had no height at all -- SVGO strips
   width/height, and nothing else constrained it.

   What remains below is genuinely homepage-only: the section inners, the
   band tones, and the grid caps. Content width stays a per-template
   concern -- .rtq-article sets its own reading column in single.css.
   ========================================================================== */

/* Section content: wide shell for layout, generous fluid gutter. */
body.home .rtq-section__inner,
body.home .rtq-hero__inner,
body.home .rtq-trustbar__inner {
	max-width: var(--rtq-container-xl);
}

body.home .rtq-trustbar__inner,
.rtq-footer__inner {
	max-width: var(--rtq-container-xl);
}

/* --------------------------------------------------------------------------
   Readable measure
   Running prose is capped independently of the container, so a headline
   grid can use all 1560px while body copy stays at a comfortable measure.
   Centred blocks get auto margins; left-aligned blocks (hero lead) do not,
   so they stay flush with the headline above them.
   -------------------------------------------------------------------------- */

body.home .rtq-section__sub,
body.home .rtq-head__sub {
	max-width: var(--rtq-measure);
	margin-inline: auto;
}

body.home .rtq-hero__lead {
	max-width: var(--rtq-measure);
}

body.home .rtq-eeat__item p {
	max-width: var(--rtq-measure);
}

/* --------------------------------------------------------------------------
   Vertical rhythm + band alternation
   Subtle tonal steps rather than white/grey stripes. The trust block picks
   up the tint tone so it separates from the collections grid above it
   without introducing a hard edge.
   -------------------------------------------------------------------------- */

body.home .rtq-eeat {
	background: var(--rtq-surface-tint);
}

body.home .rtq-cats {
	background: var(--rtq-surface);
}

/* Hairlines between same-toned neighbours keep bands legible where the
   tonal step alone is too subtle to read as a boundary. */
body.home .rtq-collections {
	border-block: 1px solid var(--rtq-border);
}

/* --------------------------------------------------------------------------
   Grid behaviour at any item count
   auto-fill is kept (not auto-fit) so a single card kept at its natural
   width rather than stretched across 1560px; the low-count modifiers below
   handle the "one lonely card on the left" case by centring the track
   instead of inventing filler content.
   -------------------------------------------------------------------------- */

body.home .rtq-grid {
	justify-content: center;
}

body.home .rtq-grid > * {
	min-width: 0; /* let long titles wrap instead of forcing track overflow */
}

/* --------------------------------------------------------------------------
   V2: hero art scales with the wider shell
   The art column is ~700px at 1560, but the illustration was capped at 26rem
   and left ~220px of dead space beside it. Raised only at large viewports so
   the existing 1024-1439px composition is untouched.
   -------------------------------------------------------------------------- */

@media (min-width: 90rem) {
	body.home .rtq-hero__art {
		max-width: 38rem;
	}
}

/* --------------------------------------------------------------------------
   V2: grids read as deliberate at any item count
   auto-fill leaves empty tracks when there are few items, which at 1560px
   left a single card marooned in open space. These caps constrain the grid
   itself for low counts so the row stays visually intentional, and stop
   applying from four items up, where the full shell is genuinely filled.

   :has() does the counting -- ":last-child that is also nth-child(n)" is
   exactly "the grid has n children". Browsers without :has() simply skip
   these rules and get the previous uncapped behaviour, so this degrades to
   no worse than before rather than breaking.
   -------------------------------------------------------------------------- */

body.home .rtq-grid:has(> :last-child:nth-child(1)) {
	max-width: 26rem;
}

body.home .rtq-grid:has(> :last-child:nth-child(2)) {
	max-width: 54rem;
}

body.home .rtq-grid:has(> :last-child:nth-child(3)) {
	max-width: 82rem;
}

body.home .rtq-grid {
	margin-inline: auto;
}

/* The single-guide layout has its own deliberate horizontal composition and
   its own width; it just needs centring inside the wider shell. */
body.home .rtq-latest__grid.is-single {
	margin-inline: auto;
}