/**
 * WFA — brand layer
 * Upload to: /wp-content/themes/{child}/wfa/wfa-brand.css
 * Loads AFTER wfa.css and redefines its tokens, so the jobs pages inherit
 * the brand without needing their own rules.
 *
 * Dials: VARIANCE 7, MOTION 4, DENSITY 3.
 * Type: Fraunces (display) + Public Sans (UI).
 * No gradients, no glass, no scroll hijack.
 */

:root {
	--wfa-paper: #faf7f2;
	--wfa-ink: #14171a;
	--wfa-text: #14171a;
	--wfa-muted: #5f6a70;
	--wfa-line: #e2dcd2;
	--wfa-bg: #faf7f2;
	--wfa-surface: #f2ede4;
	--wfa-accent: #0f5548;
	--wfa-accent-soft: #e4ece9;
	--wfa-flag: #b4562f;
	--wfa-radius: 2px;

	--wfa-display: "Fraunces", Georgia, "Times New Roman", serif;
	--wfa-ui: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

	--wfa-measure: 68ch;
}

@media (prefers-color-scheme: dark) {
	:root {
		--wfa-paper: #14161a;
		--wfa-ink: #f2efe9;
		--wfa-text: #f2efe9;
		--wfa-muted: #9aa3a9;
		--wfa-line: #2a2f35;
		--wfa-bg: #14161a;
		--wfa-surface: #1b1f24;
		--wfa-accent: #7fc9b4;
		--wfa-accent-soft: #1d2a28;
		--wfa-flag: #d98a63;
	}
}

body {
	background: var(--wfa-bg);
	color: var(--wfa-text);
	font-family: var(--wfa-ui);
	font-size: 1rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3,
.wfa-hero__title,
.wfa-band__title {
	font-family: var(--wfa-display);
	font-weight: 400;
	letter-spacing: -0.015em;
	line-height: 1.1;
}

/* Hero: asymmetric, offset from centre, not a centred stack */
.wfa-hero {
	padding: clamp(3rem, 9vw, 7rem) 1rem clamp(2.5rem, 6vw, 4.5rem);
	border-bottom: 1px solid var(--wfa-line);
}

.wfa-hero__inner {
	max-width: 1100px;
	margin: 0 auto;
}

@media (min-width: 900px) {
	.wfa-hero__inner {
		padding-right: 22%;
	}
}

.wfa-hero__eyebrow {
	margin: 0 0 1.25rem;
	font-size: .78rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wfa-muted);
}

.wfa-hero__title {
	margin: 0 0 1.25rem;
	font-size: clamp(2.4rem, 7vw, 4.6rem);
}

.wfa-hero__title em {
	font-style: italic;
	color: var(--wfa-accent);
}

.wfa-hero__lead {
	margin: 0 0 2rem;
	max-width: 46ch;
	font-size: clamp(1.05rem, 2.2vw, 1.25rem);
	color: var(--wfa-muted);
}

.wfa-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-bottom: 2.5rem;
}

.wfa-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 2.5rem;
	margin: 0;
	padding-top: 1.75rem;
	border-top: 1px solid var(--wfa-line);
}

.wfa-hero__stats dt {
	font-size: .75rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wfa-muted);
}

.wfa-hero__stats dd {
	margin: .2rem 0 0;
	font-family: var(--wfa-display);
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	line-height: 1;
}

/* Claim band: full-bleed ink, used once */
.wfa-band--claim {
	padding: clamp(3rem, 7vw, 5rem) 0;
	background: var(--wfa-ink);
	color: var(--wfa-paper);
}

.wfa-band__title {
	margin: 0 0 .75rem;
	font-size: clamp(1.6rem, 4.5vw, 2.6rem);
	max-width: 22ch;
}

.wfa-band__body {
	margin: 0;
	max-width: 52ch;
	color: rgba(250, 247, 242, .78);
}

@media (prefers-color-scheme: dark) {
	.wfa-band--claim {
		background: var(--wfa-surface);
		color: var(--wfa-text);
	}

	.wfa-band__body {
		color: var(--wfa-muted);
	}
}

/* Sections */
.wfa-section {
	padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}

.wfa-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.75rem;
	padding-bottom: .75rem;
	border-bottom: 1px solid var(--wfa-line);
}

.wfa-section__head h2 {
	margin: 0;
	font-size: clamp(1.4rem, 3.5vw, 2rem);
}

.wfa-section__head a {
	font-size: .9rem;
	color: var(--wfa-muted);
}

/* Destination grid: deliberately uneven cell sizes */
.wfa-dest-grid {
	display: grid;
	gap: 1px;
	grid-template-columns: 1fr;
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--wfa-line);
	border: 1px solid var(--wfa-line);
}

@media (min-width: 700px) {
	.wfa-dest-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.wfa-dest-grid__item:first-child {
		grid-column: span 2;
		grid-row: span 2;
	}
}

.wfa-dest-grid__item a {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	min-height: 150px;
	padding: 1.25rem;
	background: var(--wfa-bg);
	text-decoration: none;
	color: inherit;
	transition: background .18s ease;
}

.wfa-dest-grid__item a:hover,
.wfa-dest-grid__item a:focus-visible {
	background: var(--wfa-accent-soft);
}

.wfa-dest-grid__name {
	font-family: var(--wfa-display);
	font-size: 1.35rem;
}

.wfa-dest-grid__note {
	margin-top: .35rem;
	font-size: .85rem;
	color: var(--wfa-muted);
}

/* Guide lists */
.wfa-guide-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--wfa-line);
}

.wfa-guide-list li {
	border-bottom: 1px solid var(--wfa-line);
}

.wfa-guide-list a {
	display: block;
	padding: 1.25rem 0;
	text-decoration: none;
	color: inherit;
}

.wfa-guide-list h3 {
	margin: 0 0 .3rem;
	font-size: 1.25rem;
}

.wfa-guide-list p {
	margin: 0;
	color: var(--wfa-muted);
	font-size: .92rem;
}

/* Guide article */
.wfa-guide {
	display: grid;
	gap: 3rem;
	grid-template-columns: 1fr;
}

@media (min-width: 960px) {
	.wfa-guide {
		grid-template-columns: minmax(0, 1fr) 280px;
	}
}

.wfa-guide__head h1 {
	font-size: clamp(2rem, 5.5vw, 3.2rem);
	margin: 0 0 1rem;
	max-width: 20ch;
}

.wfa-guide__standfirst {
	max-width: 52ch;
	font-size: 1.15rem;
	color: var(--wfa-muted);
}

.wfa-guide__byline {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 1.5rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--wfa-line);
	font-size: .82rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--wfa-muted);
}

.wfa-guide__body {
	max-width: var(--wfa-measure);
	font-size: 1.08rem;
	line-height: 1.75;
}

.wfa-guide__body h2 {
	margin: 2.5rem 0 .75rem;
	font-size: 1.7rem;
}

.wfa-guide__body h3 {
	margin: 2rem 0 .5rem;
	font-size: 1.3rem;
}

.wfa-guide__body a {
	color: var(--wfa-accent);
	text-underline-offset: 3px;
}

.wfa-sources {
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--wfa-line);
	font-size: .9rem;
}

.wfa-sources h2 {
	font-size: .8rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wfa-muted);
	margin: 0 0 .6rem;
}

.wfa-sources ul {
	margin: 0;
	padding-left: 1.1rem;
	color: var(--wfa-muted);
}

/* Destination hero */
.wfa-dest-hero {
	border-bottom: 1px solid var(--wfa-line);
}

.wfa-dest-hero__media img {
	display: block;
	width: 100%;
	height: clamp(200px, 38vh, 420px);
	object-fit: cover;
}

.wfa-dest-hero__text {
	padding: clamp(2rem, 5vw, 3.5rem) 1rem;
}

.wfa-dest-hero__text h1 {
	margin: 0 0 1rem;
	font-size: clamp(2.2rem, 6vw, 3.6rem);
}

.wfa-dest-hero__intro {
	max-width: 56ch;
	color: var(--wfa-muted);
}

.wfa-dest-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	margin: 1.75rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--wfa-line);
}

.wfa-dest-facts dt {
	font-size: .72rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wfa-muted);
}

.wfa-dest-facts dd {
	margin: .2rem 0 0;
	font-family: var(--wfa-display);
	font-size: 1.3rem;
}

/* Buttons inherit from wfa.css, refined here */
.wfa-btn {
	font-family: var(--wfa-ui);
	font-weight: 500;
	transition: background .18s ease, color .18s ease;
}

.wfa-btn:hover,
.wfa-btn:focus-visible {
	background: var(--wfa-accent);
	color: var(--wfa-paper);
}

:focus-visible {
	outline: 2px solid var(--wfa-accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}

/* ---------------------------------------------------------------
   Product pages
   --------------------------------------------------------------- */

.wfa-product__head h1 {
	margin: 0 0 1rem;
	font-size: clamp(2rem, 5.5vw, 3.2rem);
	max-width: 20ch;
}

.wfa-product__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem;
	margin: 2rem 0 1rem;
	padding: 1.25rem;
	border: 1px solid var(--wfa-line);
	background: var(--wfa-surface);
}

.wfa-product__price {
	display: flex;
	align-items: baseline;
	gap: .45rem;
}

.wfa-product__price-label,
.wfa-product__price-period {
	font-size: .78rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wfa-muted);
}

.wfa-product__price-value {
	font-family: var(--wfa-display);
	font-size: clamp(1.8rem, 4vw, 2.4rem);
	line-height: 1;
}

.wfa-product__unavailable {
	margin: 0;
	color: var(--wfa-flag);
	font-size: .92rem;
}

.wfa-product__disclosure,
.wfa-product__verified {
	margin: 0 0 2rem;
	font-size: .78rem;
	line-height: 1.55;
	color: var(--wfa-muted);
	max-width: 60ch;
}

.wfa-product__verdict {
	margin: 0 0 2.5rem;
	padding-left: 1.25rem;
	border-left: 3px solid var(--wfa-accent);
	max-width: var(--wfa-measure);
}

.wfa-product__verdict h2 {
	margin: 0 0 .4rem;
	font-size: .8rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wfa-muted);
	font-family: var(--wfa-ui);
}

.wfa-product__verdict p {
	margin: 0;
	font-family: var(--wfa-display);
	font-size: 1.25rem;
	line-height: 1.5;
}

/* Pros and cons: two columns, never equal-weight cards */
.wfa-proscons {
	display: grid;
	gap: 0;
	grid-template-columns: 1fr;
	margin: 0 0 2.5rem;
	border: 1px solid var(--wfa-line);
}

@media (min-width: 700px) {
	.wfa-proscons {
		grid-template-columns: 1fr 1fr;
	}

	.wfa-proscons__col--con {
		border-left: 1px solid var(--wfa-line);
	}
}

.wfa-proscons__col {
	padding: 1.25rem;
}

.wfa-proscons__col--con {
	border-top: 1px solid var(--wfa-line);
}

@media (min-width: 700px) {
	.wfa-proscons__col--con {
		border-top: 0;
	}
}

.wfa-proscons h3 {
	margin: 0 0 .6rem;
	font-family: var(--wfa-ui);
	font-size: .78rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wfa-muted);
}

.wfa-proscons ul {
	margin: 0;
	padding-left: 1.1rem;
	font-size: .95rem;
	line-height: 1.7;
}

.wfa-proscons__col--pro li::marker {
	color: var(--wfa-accent);
}

.wfa-proscons__col--con li::marker {
	color: var(--wfa-flag);
}

/* Comparison rows */
.wfa-compare {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	border-top: 1px solid var(--wfa-line);
}

.wfa-compare__row {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
	padding: 1.75rem 0;
	border-bottom: 1px solid var(--wfa-line);
}

@media (min-width: 760px) {
	.wfa-compare__row {
		grid-template-columns: minmax(0, 1fr) 210px;
		align-items: start;
	}
}

.wfa-compare__main h2 {
	margin: 0 0 .2rem;
	font-size: 1.5rem;
}

.wfa-compare__main h2 a {
	color: inherit;
	text-decoration: none;
}

.wfa-compare__merchant {
	margin: 0 0 .6rem;
	font-size: .78rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wfa-muted);
}

.wfa-compare__verdict {
	margin: 0;
	max-width: 58ch;
	color: var(--wfa-muted);
	font-size: .95rem;
}

.wfa-compare__side {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .6rem;
}

.wfa-compare__price {
	margin: 0;
	font-family: var(--wfa-display);
	font-size: 1.5rem;
	line-height: 1;
}

.wfa-compare__price span {
	display: block;
	margin-top: .2rem;
	font-family: var(--wfa-ui);
	font-size: .72rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wfa-muted);
}

/* Guides archive lead item */
.wfa-lead-guide {
	margin: 0 0 2.5rem;
	border-top: 1px solid var(--wfa-line);
	border-bottom: 1px solid var(--wfa-line);
}

.wfa-lead-guide a {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
	padding: 1.75rem 0;
	text-decoration: none;
	color: inherit;
}

@media (min-width: 800px) {
	.wfa-lead-guide a {
		grid-template-columns: 1.1fr 1fr;
		align-items: center;
	}
}

.wfa-lead-guide__media img {
	display: block;
	width: 100%;
	height: clamp(180px, 30vh, 320px);
	object-fit: cover;
}

.wfa-lead-guide__text h2 {
	margin: 0 0 .6rem;
	font-size: clamp(1.7rem, 4vw, 2.4rem);
}

.wfa-lead-guide__text p {
	margin: 0;
	color: var(--wfa-muted);
}

/* ---------------------------------------------------------------
   Hero video band
   600px full bleed, copy sitting over the footage.
   --------------------------------------------------------------- */

/* Full width, no offset maths.
   The band is rendered on generate_after_header, OUTSIDE GeneratePress's
   content container, so plain width: 100% is the real browser width.
   The old margin-left: calc(50% - 50vw) approach only works when the
   parent is centred in the viewport, which it is not inside GP's
   wrapper, and it pushed the band off to the left. */
.wfa-hero--video {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 600px;
	min-height: 600px;
	padding: 0;
	overflow: hidden;
	border-bottom: 0;
	background: var(--wfa-ink, #14171a);
}

/* The copy keeps the site measure even though the band does not */
.wfa-hero--video .wfa-hero__inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 1rem;
}

/* Header and search bar sit over the video on the homepage, so the copy
   needs to clear them. 70px header plus the search bar. */
.home .wfa-hero--video .wfa-hero__inner {
	padding-top: 150px;
}

/* The poster is set inline as a background-image by the PHP, so it is
   the first paint and stays visible wherever the video is not loaded:
   phones, reduced motion, data saver, JavaScript off. */
.wfa-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: var(--wfa-ink, #14171a);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.wfa-hero__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Scrim. Without it the headline is unreadable the moment the footage
   cuts to sky or sand. */
.wfa-hero__scrim {
	position: absolute;
	inset: 0;
	background: #0d1114;
	pointer-events: none;
}

/* Placeholder shown until a video is set */
.wfa-hero__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	width: 100%;
	height: 100%;
	background:
		repeating-linear-gradient(
			45deg,
			rgba(255, 255, 255, .03) 0,
			rgba(255, 255, 255, .03) 12px,
			transparent 12px,
			transparent 24px
		),
		#1d2328;
	color: rgba(255, 255, 255, .45);
	text-align: center;
}

.wfa-hero__placeholder-label {
	font-family: var(--wfa-ui, system-ui, sans-serif);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.wfa-hero__placeholder-spec {
	font-family: var(--wfa-ui, system-ui, sans-serif);
	font-size: .74rem;
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .3);
}

/* Copy sits above the media */
.wfa-hero--video .wfa-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
}

.wfa-hero--video .wfa-hero__eyebrow {
	color: rgba(255, 255, 255, .7);
}

.wfa-hero--video .wfa-hero__title {
	color: #fff;
}

.wfa-hero--video .wfa-hero__title em {
	color: #fff;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 8px;
}

.wfa-hero--video .wfa-hero__lead {
	color: rgba(255, 255, 255, .82);
}

.wfa-hero--video .wfa-hero__stats {
	border-top-color: rgba(255, 255, 255, .22);
}

.wfa-hero--video .wfa-hero__stats dt {
	color: rgba(255, 255, 255, .6);
}

.wfa-hero--video .wfa-hero__stats dd {
	color: #fff;
}

.wfa-hero--video .wfa-btn {
	border-color: rgba(255, 255, 255, .55);
	color: #fff;
}

.wfa-hero--video .wfa-btn:hover,
.wfa-hero--video .wfa-btn:focus-visible {
	background: #fff;
	border-color: #fff;
	color: var(--wfa-ink, #14171a);
}

.wfa-hero--video .wfa-btn--primary {
	background: #fff;
	border-color: #fff;
	color: var(--wfa-ink, #14171a);
}

.wfa-hero--video .wfa-btn--primary:hover,
.wfa-hero--video .wfa-btn--primary:focus-visible {
	background: transparent;
	border-color: rgba(255, 255, 255, .55);
	color: #fff;
}

/* Shorter on phones: 600px of video on a small screen pushes everything
   else off, and the copy needs the room more than the footage does. */
@media (max-width: 680px) {
	.wfa-hero--video {
		height: 460px;
		min-height: 460px;
	}

	.home .wfa-hero--video .wfa-hero__inner {
		padding-top: 120px;
	}
}

/* Motion sensitivity: hold the poster frame instead of playing.
   The poster background now lives on .wfa-hero__media unconditionally,
   so hiding the video is all that is needed here. The script also skips
   fetching the video entirely in this case. */
@media (prefers-reduced-motion: reduce) {
	.wfa-hero__video {
		display: none;
	}
}

/* ---------------------------------------------------------------
   Vertical landing page
   --------------------------------------------------------------- */

.wfa-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.wfa-vertical__head {
	max-width: var(--wfa-measure);
	margin-bottom: 2.5rem;
}

.wfa-vertical__head h1 {
	margin: 0 0 .6rem;
	font-size: clamp(2rem, 5.5vw, 3.2rem);
}

.wfa-vertical__question {
	margin: 0 0 1rem;
	font-size: 1.15rem;
	line-height: 1.5;
	color: var(--wfa-muted);
}

.wfa-vertical__updated {
	margin: 0 0 1.25rem;
	font-size: .76rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wfa-muted);
}

.wfa-vertical__intro {
	margin: 0;
	font-size: 1rem;
	line-height: 1.7;
}

.wfa-vertical__h2 {
	margin: 0 0 1.25rem;
	padding-bottom: .7rem;
	border-bottom: 1px solid var(--wfa-line);
	font-size: clamp(1.3rem, 3.2vw, 1.8rem);
}

.wfa-vertical__disclosure {
	margin: 1rem 0 0;
	max-width: 70ch;
	font-size: .76rem;
	line-height: 1.6;
	color: var(--wfa-muted);
}

/* 1. Top pick */
.wfa-pick {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
	margin-bottom: 3rem;
	padding: 1.75rem;
	border: 1px solid var(--wfa-line);
	border-left: 4px solid var(--wfa-accent);
	background: var(--wfa-surface);
}

@media (min-width: 760px) {
	.wfa-pick {
		grid-template-columns: minmax(0, 1fr) 240px;
		align-items: center;
	}
}

.wfa-pick__flag {
	margin: 0 0 .4rem;
	font-family: var(--wfa-ui);
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wfa-accent);
}

.wfa-pick__title {
	margin: 0 0 .2rem;
	font-size: clamp(1.5rem, 3.5vw, 2rem);
}

.wfa-pick__merchant {
	margin: 0 0 .9rem;
	font-size: .78rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wfa-muted);
}

.wfa-pick__reason {
	margin: 0 0 .9rem;
	max-width: 56ch;
	font-size: 1.05rem;
	line-height: 1.6;
}

/* The caveat is deliberate. A recommendation with a stated downside
   converts better than one without, and it is honest. */
.wfa-pick__caveat {
	margin: 0;
	max-width: 56ch;
	font-size: .88rem;
	line-height: 1.6;
	color: var(--wfa-muted);
}

.wfa-pick__action {
	text-align: center;
}

.wfa-pick__price {
	margin: 0 0 .8rem;
}

.wfa-pick__price span {
	display: block;
	font-size: .72rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wfa-muted);
}

.wfa-pick__price strong {
	font-family: var(--wfa-display);
	font-size: 2.2rem;
	font-weight: 400;
	line-height: 1.1;
}

.wfa-btn--block {
	display: block;
	width: 100%;
	text-align: center;
}

.wfa-pick__read {
	display: inline-block;
	margin-top: .7rem;
	font-size: .85rem;
	color: var(--wfa-muted);
}

/* 2. Alternatives */
.wfa-alts {
	margin-bottom: 3rem;
}

.wfa-alts__grid {
	display: grid;
	gap: 1px;
	grid-template-columns: 1fr;
	background: var(--wfa-line);
	border: 1px solid var(--wfa-line);
}

@media (min-width: 700px) {
	.wfa-alts__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.wfa-alt {
	padding: 1.25rem;
	background: var(--wfa-bg);
}

.wfa-alt h3 {
	margin: 0 0 .5rem;
	font-size: 1.2rem;
}

.wfa-alt__verdict {
	margin: 0 0 .8rem;
	font-size: .9rem;
	line-height: 1.6;
	color: var(--wfa-muted);
}

.wfa-alt__price {
	margin: 0 0 .8rem;
	font-family: var(--wfa-display);
	font-size: 1.4rem;
}

.wfa-alt__price span {
	font-family: var(--wfa-ui);
	font-size: .72rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wfa-muted);
}

/* 3. Comparison table */
.wfa-compare-table {
	margin-bottom: 3rem;
}

.wfa-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.wfa-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .92rem;
	min-width: 560px;
}

.wfa-table th,
.wfa-table td {
	padding: .9rem 1rem;
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid var(--wfa-line);
}

.wfa-table thead th {
	font-family: var(--wfa-ui);
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wfa-muted);
	border-bottom: 2px solid var(--wfa-line);
}

.wfa-table tbody th {
	font-weight: 500;
}

.wfa-table tbody th a {
	color: inherit;
	text-decoration: none;
}

.wfa-table tr.is-pick {
	background: var(--wfa-accent-soft);
}

.wfa-table__flag {
	display: inline-block;
	margin-left: .5rem;
	padding: .1rem .4rem;
	background: var(--wfa-accent);
	color: #fff;
	font-family: var(--wfa-ui);
	font-size: .62rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	vertical-align: middle;
}

.wfa-table__period {
	font-size: .78rem;
	color: var(--wfa-muted);
}

.wfa-table__cta {
	text-align: right;
	white-space: nowrap;
}

.wfa-btn--small {
	min-height: 36px;
	padding: .4rem .9rem;
	font-size: .85rem;
}

/* 4. Reviews */
.wfa-reviews {
	margin-bottom: 3rem;
}

.wfa-review {
	padding: 1.75rem 0;
	border-bottom: 1px solid var(--wfa-line);
}

.wfa-review__head {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	margin-bottom: .9rem;
}

.wfa-review__rank {
	margin: 0;
	font-family: var(--wfa-display);
	font-size: 2rem;
	line-height: 1;
	color: var(--wfa-line);
}

.wfa-review__head h3 {
	margin: 0 0 .15rem;
	font-size: 1.4rem;
}

.wfa-review__head h3 a {
	color: inherit;
	text-decoration: none;
}

.wfa-review__merchant {
	margin: 0;
	font-size: .74rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wfa-muted);
}

.wfa-review__verdict {
	margin: 0 0 1.25rem;
	max-width: var(--wfa-measure);
	font-size: 1rem;
	line-height: 1.7;
}

.wfa-review__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
	margin-top: 1.25rem;
}

.wfa-review__verified {
	font-size: .76rem;
	color: var(--wfa-muted);
}

/* 5. Criteria */
.wfa-criteria {
	margin-bottom: 3rem;
	padding: 1.5rem 1.75rem;
	border: 1px solid var(--wfa-line);
	background: var(--wfa-surface);
}

.wfa-criteria__list {
	margin: 0;
	padding-left: 1.1rem;
	max-width: var(--wfa-measure);
	font-size: .95rem;
	line-height: 1.8;
}

.wfa-criteria__list li::marker {
	color: var(--wfa-accent);
}

/* 6. FAQ */
.wfa-faq {
	margin-bottom: 3rem;
}

.wfa-faq__item {
	border-bottom: 1px solid var(--wfa-line);
}

.wfa-faq__item summary {
	padding: 1rem 0;
	font-family: var(--wfa-display);
	font-size: 1.1rem;
	cursor: pointer;
	list-style: none;
}

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

.wfa-faq__item summary::after {
	content: "+";
	float: right;
	font-family: var(--wfa-ui);
	font-size: 1.2rem;
	color: var(--wfa-accent);
}

.wfa-faq__item[open] summary::after {
	content: "\2212";
}

.wfa-faq__item p {
	margin: 0 0 1.25rem;
	max-width: var(--wfa-measure);
	font-size: .95rem;
	line-height: 1.7;
	color: var(--wfa-muted);
}