:root {
	--avg-color-bg: #f8fafc;
	--avg-color-surface: #ffffff;
	--avg-color-border: #e2e8f0;
	--avg-color-text: #0f172a;
	--avg-color-text-muted: #64748b;
	--avg-color-primary: #2563eb;
	--avg-color-primary-dark: #1d4ed8;
	--avg-color-secondary: #5b47f9;
	--avg-color-success: #16a34a;
	--avg-radius: 12px;
	--avg-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08);
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	overflow-x: clip;
}

/* Safety net for editor-inserted content images (Quick Verdict, the review
   content sections, etc.) -- without this, a "Full Size" image can be wider
   than its card and break out of the layout. Every image that needs its own
   fixed dimensions (logos, badges, gallery thumbnails) does so via a class
   selector, so it still overrides this. */
img {
	max-width: 100%;
	height: auto;
}

body {
	margin: 0;
	background: var(--avg-color-bg);
	color: var(--avg-color-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.5;
	/* Lets the hero mascot peek past the right edge without a horizontal
	   scrollbar. "clip" (unlike hidden) doesn't create a scroll container, so
	   the sticky filters sidebar keeps working. */
	overflow-x: clip;
}

a {
	color: inherit;
}

.avg-container {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 24px;
}

/* Header */
#site-header {
	background: var(--avg-color-surface);
	border-bottom: 1px solid var(--avg-color-border);
}

.avg-header__inner {
	display: flex;
	align-items: center;
	gap: 32px;
	padding: 16px 24px;
}

.avg-header__logo {
	display: flex;
	align-items: center;
	text-decoration: none;
}

.avg-logo {
	font-size: 1.3rem;
	font-weight: 800;
	color: var(--avg-color-text);
	white-space: nowrap;
}

/* Follows the Primary Color from Site Settings rather than a fixed purple, so
   changing that colour carries the logo with it. */
.avg-logo__vr {
	display: inline-block;
	background: var(--avg-color-primary);
	color: #fff;
	border-radius: 6px;
	padding: 0 4px;
	margin: 0 1px;
	font-family: monospace;
	font-style: italic;
	font-weight: 900;
}

.avg-logo--footer {
	color: #fff;
}

.avg-header__nav {
	flex: 1;
}

.avg-header__menu {
	display: flex;
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.avg-header__menu a {
	text-decoration: none;
	color: var(--avg-color-text);
	font-size: 0.9rem;
	font-weight: 600;
	padding-bottom: 4px;
	border-bottom: 2px solid transparent;
}

.avg-header__menu a:hover {
	color: var(--avg-color-primary);
}

.avg-header__menu .current-menu-item > a,
.avg-header__menu .current_page_item > a {
	color: var(--avg-color-primary);
	border-bottom-color: var(--avg-color-primary);
}

.avg-header__search {
	display: flex;
	align-items: center;
	gap: 6px;
	border: 1px solid var(--avg-color-border);
	border-radius: 8px;
	padding: 6px 10px;
}

.avg-header__search-input {
	border: none;
	outline: none;
	font-size: 0.85rem;
	width: 180px;
}

.avg-header__search-btn {
	display: flex;
	background: none;
	border: none;
	color: var(--avg-color-text-muted);
	cursor: pointer;
	padding: 0;
}

.avg-header__search-btn .avg-icon {
	width: 16px;
	height: 16px;
}

/*
 * Dark header, matching the footer (#0f172a). Everything inside is scoped to
 * .avg-header--dark so dropping that class in header.php restores the white
 * bar without touching anything else.
 *
 * The brand purple is too dark to sit on navy -- #5b47f9 on #0f172a lands at
 * about 3:1 -- so links and accents use a lightened mix of it instead. Mixing
 * rather than hard-coding keeps it following the colour set in Site Settings.
 */
/* The id prefix is needed: the base bar is styled as #site-header, so a plain
   class here loses on specificity and the background stays white. */
#site-header.avg-header--dark {
	--avg-header-accent: color-mix(in srgb, var(--avg-color-primary) 45%, #fff);
	background: #0f172a;
	border-bottom-color: rgba(255, 255, 255, 0.08);
}

.avg-header--dark .avg-logo {
	color: #fff;
}

.avg-header--dark .avg-header__menu a {
	color: #f1f5f9;
}

.avg-header--dark .avg-header__menu a:hover {
	color: var(--avg-header-accent);
}

.avg-header--dark .avg-header__menu .current-menu-item > a,
.avg-header--dark .avg-header__menu .current_page_item > a {
	color: var(--avg-header-accent);
	border-bottom-color: var(--avg-header-accent);
}

.avg-header--dark .avg-header__search {
	border-color: rgba(255, 255, 255, 0.28);
	background: rgba(255, 255, 255, 0.12);
}

.avg-header--dark .avg-header__search:focus-within {
	border-color: var(--avg-header-accent);
}

/* The input keeps the browser's white background otherwise, which would leave
   a bright slab in the middle of the dark bar. */
.avg-header--dark .avg-header__search-input {
	background: transparent;
	color: #f8fafc;
}

.avg-header--dark .avg-header__search-input::placeholder {
	color: #b4c0d0;
	opacity: 1; /* Firefox dims placeholders by default, which undoes the lift. */
}

.avg-header--dark .avg-header__search-btn {
	color: #cbd5e1;
}

.avg-header--dark .avg-header__search-btn:hover {
	color: var(--avg-header-accent);
}


/* Hero */
.avg-hero {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 340px 150px;
	gap: 24px;
	align-items: start;
	padding: 40px 24px 24px;
	text-align: left;
	border-radius: var(--avg-radius);
	/* A wash of the primary colour, strongest behind the mascot on the right.
	   Painted on the section itself rather than bled to the window edges: a
	   100vw layer overflows sideways as soon as a scrollbar is present. */
	background:
		radial-gradient(58% 78% at 82% 26%, color-mix(in srgb, var(--avg-color-primary) 20%, transparent), transparent 68%),
		radial-gradient(70% 90% at 12% 4%, color-mix(in srgb, var(--avg-color-primary) 9%, transparent), transparent 70%),
		linear-gradient(180deg, color-mix(in srgb, var(--avg-color-primary) 6%, var(--avg-color-bg)), var(--avg-color-bg));
}

.avg-hero__title-accent {
	color: var(--avg-color-primary);
}

/* Inline here, so the heading reads as one sentence and wraps where the width
   runs out; the phone breakpoint turns each typed line into its own row. */
.avg-hero__title-line {
	display: inline;
}

/* Mascot overlays the "How We Score" card: its flat left edge sits at the
   card's right, body peeks past it, and the loose paw grips the card's top. */
.avg-hero__mascot {
	position: absolute;
	bottom: -2px;
	right: -200px;
	width: 300px;
	height: auto;
	z-index: 3;
	pointer-events: none;
	user-select: none;
}

.avg-hero h1 {
	font-size: 2.25rem;
	margin: 0 0 12px;
}

.avg-hero p {
	color: var(--avg-color-text-muted);
	max-width: 640px;
	margin: 0 0 20px;
}

.avg-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.avg-hero__badge {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.85rem;
	color: var(--avg-color-text-muted);
}

/* Two classes: .avg-icon sets its own size and colour further down the file,
   and a single-class rule here would lose to it on source order. */
.avg-icon.avg-hero__badge-icon,
.avg-hero__badge .avg-icon {
	width: 18px;
	height: 18px;
	color: var(--avg-color-primary);
}

/* Two-class selector so this padding beats the .avg-card { padding: 24px }
   shorthand that is defined later in the file. */
.avg-card.avg-hero__score-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	padding-bottom: 42px;
}

.avg-hero__score-card h3 {
	margin: 0 0 6px;
	font-size: 1rem;
}

.avg-hero__score-card p {
	margin: 0 0 8px;
	font-size: 0.8rem;
	color: var(--avg-color-text-muted);
}

.avg-hero__score-card a {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--avg-color-primary);
	text-decoration: none;
}

.avg-icon.avg-hero__score-card-icon {
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	color: var(--avg-color-primary);
}

/* Two classes, not one: .avg-btn sets display:inline-flex further down the
   file, and a single-class rule here would lose to it on source order. */
.avg-btn.avg-hero__cta {
	display: none;
}

/* Its counterpart is the wide cutout above, which the desktop layout uses. */
.avg-hero__mascot-mobile {
	display: none;
}


/* Homepage layout */
.avg-homepage-layout {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 24px;
	align-items: start;
	/* padding-block, not the shorthand: this element is also .avg-container,
	   whose side padding is the page gutter. "padding: 24px 0" wiped that out,
	   which only showed on a phone -- there the list ran into both edges. */
	padding-block: 24px;
}

.avg-homepage-sidebar {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.avg-homepage-main {
	min-width: 0;
}

.avg-review-list__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}

.avg-review-list__count {
	margin: 0;
	color: var(--avg-color-text-muted);
	font-size: 0.85rem;
}

.avg-review-list__controls {
	display: flex;
	gap: 16px;
}

.avg-review-list__control {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.85rem;
	color: var(--avg-color-text-muted);
}

.avg-review-list__control select {
	padding: 6px 8px;
	border: 1px solid var(--avg-color-border);
	border-radius: 6px;
	color: var(--avg-color-text);
}


/* Filters */
/* Deliberately not sticky. The panel runs to about 1600px -- well past any
   viewport -- so pinning it did nothing useful and, being positioned, it was
   painted over the newsletter sitting below it in the sidebar, which was
   therefore never visible on a wide screen. */
.avg-filters {
	background: var(--avg-color-surface);
	border: 1px solid var(--avg-color-border);
	border-radius: var(--avg-radius);
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.avg-filters__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.avg-filters__header h2 {
	margin: 0;
	font-size: 1rem;
}

.avg-filters__clear {
	background: none;
	border: none;
	color: var(--avg-color-secondary);
	font-size: 0.8rem;
	cursor: pointer;
	padding: 0;
}

.avg-filters__group {
	border: none;
	border-top: 1px solid var(--avg-color-border);
	padding: 12px 0 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.avg-filters__group legend {
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--avg-color-text-muted);
	padding: 0 0 6px;
}

.avg-filters__group label {
	font-size: 0.88rem;
	align-items: center;
	gap: 6px;
}

.avg-filters__group label:not([hidden]) {
	display: flex;
}

.avg-filters__group select {
	width: 100%;
	padding: 6px 8px;
	border: 1px solid var(--avg-color-border);
	border-radius: 6px;
}

.avg-filters__show-more {
	align-self: flex-start;
	background: none;
	border: none;
	color: var(--avg-color-secondary);
	font-size: 0.8rem;
	font-weight: 700;
	cursor: pointer;
	padding: 0;
	margin-top: 2px;
}

.avg-newsletter {
	background: var(--avg-color-bg);
	border: 1px solid var(--avg-color-border);
	border-radius: var(--avg-radius);
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.avg-newsletter h3 {
	margin: 0;
	font-size: 0.9rem;
}

.avg-newsletter p {
	margin: 0;
	font-size: 0.8rem;
	color: var(--avg-color-text-muted);
}

.avg-newsletter__input {
	padding: 8px 10px;
	border: 1px solid var(--avg-color-border);
	border-radius: 6px;
	font-size: 0.85rem;
}

.avg-newsletter__submit {
	width: 100%;
}

.avg-newsletter__note {
	font-size: 0.72rem;
	color: var(--avg-color-text-muted);
	text-align: center;
}

.avg-filters__slider {
	width: 100%;
	accent-color: var(--avg-color-secondary);
}

.avg-filters__slider-value {
	font-size: 0.8rem;
	color: var(--avg-color-text-muted);
}

/*
 * Raised from 900px to 1200px 2026-09-04: the fixed 280px sidebar column
 * left the review list too narrow anywhere from 901px up to just under
 * 1200px -- at 1024px (iPad landscape) the description column measured
 * 108px and the price/buttons ran 51-255px past the card's own right edge.
 * Below 1200px the list gets the full row instead, matching the width the
 * drawer breakpoint below already proved comfortable; the .avg-filters
 * sidebar becomes the same overlay sheet used on a phone (see "Filters as a
 * drawer on a phone" further down) rather than a second, wider tier of its
 * own -- one mechanism, applied over a wider range, rather than a new one.
 */
@media (max-width: 1200px) {
	.avg-homepage-layout {
		grid-template-columns: 1fr;
	}

}

/* Review list */
.avg-review-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Review list pagination */
.avg-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 32px;
}

.avg-pagination__btn {
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--avg-color-border);
	background: var(--avg-color-surface);
	color: var(--avg-color-text);
	border-radius: 8px;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.avg-pagination__btn:hover:not(:disabled):not(.is-active) {
	border-color: var(--avg-color-primary);
	color: var(--avg-color-primary);
}

.avg-pagination__btn.is-active {
	background: var(--avg-color-primary);
	border-color: var(--avg-color-primary);
	color: #fff;
	cursor: default;
}

.avg-pagination__btn:disabled {
	opacity: 0.4;
	cursor: default;
}

.avg-pagination__ellipsis {
	padding: 0 4px;
	color: var(--avg-color-text-muted);
}

.avg-review-card {
	background: var(--avg-color-surface);
	border: 1px solid var(--avg-color-border);
	border-radius: var(--avg-radius);
	box-shadow: var(--avg-shadow);
	overflow: hidden;
}

.avg-review-card__summary {
	display: flex;
	flex-direction: column;
}

.avg-review-card__top-row {
	display: grid;
	grid-template-columns: auto auto 1fr auto auto auto;
	align-items: start;
	gap: 20px;
	padding: 16px 20px;
}

/* Only the row below the "At a Glance" divider is clickable/hoverable for the
   foldout -- hovering the logo, title, description, Trust Score or User
   Rating above it gives no expand affordance, so it's clear those aren't
   interactive (users were mistaking the whole card summary for one big
   button and not understanding what triggered the expand). */
.avg-review-card__stats-row {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 28px;
	padding: 14px 20px 18px;
	padding-left: 44px;
	cursor: pointer;
}

.avg-review-card--no-review .avg-review-card__stats-row {
	cursor: default;
}

.avg-review-card__stats-row::before {
	content: '';
	position: absolute;
	top: 0;
	left: 20px;
	right: 20px;
	border-top: 1px solid var(--avg-color-border);
}

.avg-review-card__stats-group {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex-shrink: 0;
}

.avg-review-card__stats-group--devices {
	flex: 1;
	min-width: 0;
	padding-left: 24px;
	border-left: 1px solid var(--avg-color-border);
}

.avg-review-card__stats-heading {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--avg-color-text-muted);
}

.avg-review-card__stats {
	display: flex;
	align-items: center;
	gap: 28px;
}

.avg-stat-badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
	min-width: 72px;
}

.avg-stat-badge .avg-icon {
	width: 26px;
	height: 26px;
	color: var(--avg-color-primary);
}

.avg-stat-badge__value {
	font-weight: 700;
	font-size: 1.05rem;
}

.avg-stat-badge__label {
	font-size: 0.78rem;
	color: var(--avg-color-text-muted);
}

.avg-review-card__stats-devices {
	display: flex;
	align-items: center;
	gap: 16px;
}

.avg-review-card__stats-devices .avg-device-badge {
	background: none;
	border: none;
	padding: 0;
	flex-direction: column;
	gap: 4px;
	font-size: 0.7rem;
}

.avg-review-card__cta.avg-review-card__cta--inline {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 16px;
	margin-left: auto;
	flex-shrink: 0;
}

.avg-review-card__cta-buttons {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
}

/* "Read Full Review" sits right under the primary Visit Site button, where a
   plain grey outline disappeared. Scoped to the review card so the secondary
   buttons elsewhere (guides, community) keep their quieter treatment. */
.avg-review-card__cta-buttons .avg-btn--secondary {
	border-color: var(--avg-color-primary);
}

.avg-review-card__cta.avg-review-card__cta--inline .avg-btn {
	width: 180px;
	text-align: center;
}

@media (max-width: 900px) {
	.avg-review-card__stats-row {
		flex-wrap: wrap;
	}

	.avg-review-card__stats-group--devices {
		border-left: none;
		padding-left: 0;
	}

	.avg-review-card__cta.avg-review-card__cta--inline {
		margin-left: 0;
		flex-wrap: wrap;
	}

	.avg-review-card__cta.avg-review-card__cta--inline .avg-btn {
		width: 100%;
	}
}

.avg-review-card__rank {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: start;
	justify-self: start;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: var(--avg-color-primary);
	color: #fff;
	font-weight: 700;
	font-size: 0.85rem;
}

.avg-review-card__logo {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 124px;
	height: 124px;
	border-radius: 8px;
	background: #1e293b;
	padding: 8px;
}

/* Logo box background is chosen per logo (see adultvrguide_get_logo_bg_class):
   a dark logo gets this light box instead of the default dark one, so it
   stays legible. */
.avg-review-card__logo.avg-logo-bg--light,
.avg-review-hero__logo-card.avg-logo-bg--light {
	background: var(--avg-color-bg);
	border: 1px solid var(--avg-color-border);
}

.avg-review-card__logo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.avg-icon.avg-review-card__logo-link-icon {
	position: absolute;
	top: 5px;
	right: 5px;
	width: 13px;
	height: 13px;
}

.avg-review-card__value-tags {
	display: flex;
	gap: 6px;
	margin-bottom: 6px;
	flex-wrap: wrap;
}

/* The phone card lines the logo up with the site's name instead of the top of
   the row -- see the rule in the max-width: 640px block. The wide card keeps
   its top alignment: it has room for the rank badge to sit in the corner, and
   dropping the number to the name's height there looked arbitrary. */

.avg-value-tag {
	font-size: 0.75rem;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 999px;
}

.avg-review-card__title {
	margin: 0 0 4px;
	font-size: 1.1rem;
}

.avg-review-card__title a {
	text-decoration: none;
}

.avg-icon.avg-icon--light {
	color: #fff;
}

.avg-icon.avg-review-card__logo-link-icon {
	color: var(--avg-color-secondary);
}

.avg-review-card__description {
	margin: 0 0 8px;
	color: var(--avg-color-text-muted);
	font-size: 0.9rem;
}

.avg-review-card__mini-tags {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.avg-mini-tag {
	font-size: 0.7rem;
	color: var(--avg-color-text-muted);
	background: var(--avg-color-bg);
	border: 1px solid var(--avg-color-border);
	padding: 2px 8px;
	border-radius: 999px;
}

.avg-mini-tag--more {
	font-weight: 700;
	color: var(--avg-color-primary);
}

/* Invisible to the layout: the grid sees the two score columns themselves, so
   the desktop card is unaffected. The phone breakpoint turns it into a real
   element and moves both columns onto a row of their own. */
.avg-review-card__scores {
	display: contents;
}

/* The wide card shows the segmented bar; the stars are the phone's version. */
.avg-trust-score__stars {
	display: none;
}

.avg-review-card__col {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	align-self: stretch;
	text-align: center;
	padding-left: 20px;
	border-left: 1px solid var(--avg-color-border);
	min-width: 90px;
	gap: 10px;
}

.avg-review-card__col .avg-score-bar {
	margin-bottom: 0;
}

.avg-trust-score__heading {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.4em;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--avg-color-text-muted);
}

.avg-trust-score__value {
	display: block;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--avg-color-text);
}

.avg-trust-score__label {
	display: block;
	font-size: 0.7rem;
	color: var(--avg-color-text-muted);
}

.avg-trust-score__coming-soon {
	display: block;
	font-style: italic;
	font-size: 0.85rem;
	color: var(--avg-color-text-muted);
}

/* Two-class selector so this reliably wins over the base .avg-user-rating-card
   rule's "padding: 16px 14px" (meant for the standalone hero card) regardless
   of source order -- that shorthand was resetting all four sides, silently
   re-adding top padding that pushed this column's content down vs. Trust Score. */
.avg-user-rating-card.avg-user-rating-card--compact {
	padding: 0 0 0 20px;
}

/* .avg-review-card__col already spaces children via flex gap -- the label's
   own margin-bottom (needed in the hero card, which has no such gap) would
   stack on top of that here and throw the two columns' rows out of sync. */
.avg-user-rating-card--compact .avg-user-rating-card__label {
	margin-bottom: 0;
}

.avg-user-rating-card--compact .avg-user-rating-card__stars .avg-star {
	width: 18px;
	height: 18px;
}

.avg-user-rating-card--compact .avg-user-rating-card__value {
	font-size: 1.5rem;
}

/* Compact card: drop the divider and tighten the gap between the score and the
   vote row so the whole card stays narrow. */
.avg-user-rating-card--compact .avg-user-rating-card__vote {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

/* Once the visitor has voted, show their own rating in a distinct lighter
   purple so it reads apart from the community-average stars. */
.avg-user-rating-card__vote.is-rated .avg-vote-star__fg {
	fill: #9e97d5;
}

.avg-review-card__cta-pricing {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 6px;
	padding: 12px 16px;
	background: var(--avg-color-bg);
	border-radius: var(--avg-radius);
	margin-right: 8px;
}

.avg-review-card__cta-pricing .avg-price__discount-badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	background: #fee2e2;
	color: #dc2626;
}

.avg-review-card__cta-pricing .avg-price {
	text-align: left;
}

.avg-price {
	text-align: right;
	white-space: nowrap;
}

.avg-price__from {
	display: block;
	font-size: 0.7rem;
	color: var(--avg-color-text-muted);
}

.avg-price__current {
	font-size: 1.2rem;
	font-weight: 700;
}

.avg-price__period {
	font-size: 0.8rem;
	color: var(--avg-color-text-muted);
}

.avg-price__original {
	display: block;
	font-size: 0.8rem;
	color: var(--avg-color-text-muted);
	text-decoration: line-through;
}

.avg-badge {
	display: inline-block;
	margin-top: 4px;
	font-size: 0.7rem;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 999px;
}

.avg-badge--trial {
	background: #dcfce7;
	color: #166534;
}

.avg-review-card__cta {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.avg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	text-align: center;
	padding: 10px 18px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 0.85rem;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.avg-btn--primary {
	background: var(--avg-color-primary);
	color: #fff;
}

.avg-btn--primary:hover {
	background: var(--avg-color-primary-dark);
}

.avg-btn--secondary {
	background: transparent;
	border: 1px solid var(--avg-color-border);
	color: var(--avg-color-text);
}

/* Expand affordance: a chevron centred at the bottom of the stats row that
   appears and gently bounces on hover of that row only (see the
   .avg-review-card__stats-row comment above for why it's scoped there). */
.avg-review-card__expand-hint {
	position: absolute;
	left: 50%;
	bottom: 3px;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 20px;
	border-radius: 999px;
	background: var(--avg-color-surface);
	box-shadow: 0 4px 5px -2px rgba(15, 23, 42, 0.16);
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
}

/* The CTA buttons (Visit Site / Read Full Review) are real links inside this
   same row -- don't bounce the expand hint while hovering those. */
.avg-review-card__stats-row:hover:not(:has(a:hover)) .avg-review-card__expand-hint {
	opacity: 1;
	animation: avg-expand-hint-bounce 0.9s ease-in-out infinite;
}

/* Touch devices can't hover, so keep a subtle static hint. */
@media (hover: none) {
	.avg-review-card__expand-hint {
		opacity: 0.4;
	}
}

@keyframes avg-expand-hint-bounce {
	0%, 100% {
		transform: translateX(-50%) translateY(0);
	}
	50% {
		transform: translateX(-50%) translateY(3px);
	}
}

.avg-icon-chevron {
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--avg-color-text-muted);
	border-bottom: 2px solid var(--avg-color-text-muted);
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.avg-review-card.is-expanded .avg-icon-chevron {
	transform: rotate(225deg);
}

/* Expanded details */
.avg-review-card__details {
	border-top: 1px solid var(--avg-color-border);
	padding: 20px;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	align-items: start;
}

.avg-review-card__details:not([hidden]) {
	display: grid;
}

/* Fixed split: left = Quick Verdict, Features, Screenshots; right = Trust Score,
   Devices. Each column stacks its cards, so Trust always sits top-right next to
   Quick Verdict and the whitespace stays evenly used. */
.avg-review-card__details-col {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

.avg-review-card__quick-verdict-card {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

@media (max-width: 800px) {
	.avg-review-card__details:not([hidden]) {
		grid-template-columns: 1fr;
	}
}

.avg-review-card__quick-verdict h4,
.avg-pros-cons h5,
.avg-gallery h5,
.avg-devices h5,
.avg-review-card__features-card h5,
.avg-card-trust-breakdown h5 {
	margin: 0 0 8px;
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--avg-color-text-muted);
}

.avg-card-trust-breakdown h5 {
	margin-bottom: 20px;
}

.avg-pros-cons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.avg-pros-cons ul,
.avg-quick-summary__col ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.avg-pros-cons ul li,
.avg-quick-summary__col ul li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.avg-pro-icon,
.avg-con-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	flex-shrink: 0;
	margin-top: 2px;
}

.avg-pro-icon {
	background: var(--avg-color-success);
}

.avg-con-icon {
	background: #dc2626;
}

.avg-devices__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.avg-device-badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	font-size: 0.8rem;
	color: var(--avg-color-text-muted);
	text-align: center;
	width: 76px;
}

.avg-device-badge img {
	width: 60px;
	height: 60px;
	object-fit: contain;
}

.avg-gallery__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 10px;
}

.avg-gallery__item {
	flex-shrink: 0;
}

.avg-gallery__item img {
	width: 200px;
	height: 130px;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}

/* Guides */
.avg-guides__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
}

/* FAQ */
.avg-faq {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.avg-faq__item {
	background: var(--avg-color-surface);
	border: 1px solid var(--avg-color-border);
	border-radius: 8px;
	padding: 14px 18px;
}

.avg-faq__item summary {
	cursor: pointer;
	font-weight: 600;
}

.avg-faq__item p {
	margin: 10px 0 0;
	color: var(--avg-color-text-muted);
}

/* Breadcrumb */
.avg-breadcrumb {
	padding: 16px 24px 0;
	font-size: 0.8rem;
	color: var(--avg-color-text-muted);
	display: flex;
	gap: 8px;
}

.avg-breadcrumb a {
	color: var(--avg-color-text-muted);
	text-decoration: none;
}

.avg-breadcrumb a:hover {
	color: var(--avg-color-primary);
}

/* Generic card */
.avg-card {
	background: var(--avg-color-surface);
	border: 1px solid var(--avg-color-border);
	border-radius: var(--avg-radius);
	box-shadow: var(--avg-shadow);
	padding: 24px;
}

/* Default icon size/color -- SVGs with no explicit width/height render at the
   browser's default replaced-element size (300x150) otherwise, so every icon
   needs a size from somewhere; this is the fallback when nothing more
   specific (avg-icon--inline, .avg-stat-badge .avg-icon, etc.) applies. */
.avg-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var(--avg-color-secondary);
}

.avg-icon--inline {
	width: 24px;
	height: 24px;
	vertical-align: -3px;
}

/* Score color bands */
.avg-score-band--low {
	color: #dc2626;
}

.avg-score-band--mid {
	color: #97a113;
}

.avg-score-band--high {
	color: #16a34a;
}

/* Review page hero */
.avg-review-hero {
	padding: 24px 24px 0;
	margin-bottom: 16px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.avg-review-hero__top {
	display: grid;
	grid-template-columns: 180px 1fr 340px;
	gap: 24px;
	align-items: start;
}

.avg-review-hero__logo-card {
	padding: 16px;
	background: #1e293b;
	display: flex;
	align-items: center;
	justify-content: center;
}

.avg-review-hero__logo-card img {
	width: 100%;
	height: 140px;
	object-fit: contain;
}

.avg-review-hero__identity {
	padding-top: 4px;
}

.avg-review-hero__value-tags {
	display: flex;
	gap: 8px;
	margin-bottom: 14px;
	flex-wrap: wrap;
}

.avg-review-hero__identity h1 {
	margin: 0 0 12px;
	font-size: 2.1rem;
	display: flex;
	align-items: center;
	gap: 10px;
}

.avg-review-hero__site-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: inherit;
	text-decoration: none;
}

.avg-review-hero__description {
	margin: 0 0 16px;
	color: #475569;
	font-size: 1.05rem;
	max-width: 60ch;
}

.avg-review-hero__mini-tags {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.avg-review-hero__side {
	display: flex;
	gap: 14px;
}

.avg-trust-score-card {
	flex: 1;
	min-width: 0;
	text-align: center;
	padding: 16px 14px;
}

.avg-trust-score-card__label {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 2.4em;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--avg-color-text-muted);
	margin-bottom: 6px;
}

.avg-tooltip-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--avg-color-border);
	color: var(--avg-color-text-muted);
	font-size: 10px;
	font-weight: 700;
	cursor: help;
}

.avg-trust-score-card__value {
	display: block;
	font-size: 2rem;
	font-weight: 700;
	color: var(--avg-color-text);
	line-height: 1.1;
}

.avg-trust-score-card__rating {
	display: block;
	font-size: 0.85rem;
	color: var(--avg-color-text-muted);
	margin-bottom: 10px;
}

.avg-score-bar {
	display: flex;
	gap: 4px;
	justify-content: center;
	margin-bottom: 10px;
}

.avg-score-bar__seg {
	position: relative;
	width: 20px;
	height: 6px;
	border-radius: 999px;
	background: var(--avg-color-border);
	overflow: hidden;
}

.avg-score-bar__seg-fill {
	position: absolute;
	inset: 0;
	width: 0;
}

.avg-score-band--low .avg-score-bar__seg-fill {
	background: #dc2626;
}

.avg-score-band--mid .avg-score-bar__seg-fill {
	background: #97a113;
}

.avg-score-band--high .avg-score-bar__seg-fill {
	background: #16a34a;
}

.avg-trust-score-card__link {
	font-size: 0.8rem;
	color: var(--avg-color-primary);
	text-decoration: none;
}

.avg-user-rating-card {
	flex: 1;
	min-width: 0;
	text-align: center;
	padding: 16px 14px;
}

.avg-user-rating-card__empty {
	display: block;
	font-size: 0.8rem;
	color: var(--avg-color-text-muted);
	margin: 10px 0;
}

.avg-user-rating-card__vote {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--avg-color-border);
}

.avg-user-rating-card__vote-label {
	display: block;
	font-size: 0.72rem;
	color: var(--avg-color-text-muted);
	margin-bottom: 6px;
}

.avg-user-rating-card__vote-stars {
	display: flex;
	justify-content: center;
	gap: 4px;
}

.avg-vote-star {
	position: relative;
	display: inline-block;
	width: 20px;
	height: 20px;
}

/*
 * Rating stars big enough to hit, on any touch-width screen rather than just
 * a phone. Each star carries two buttons, a half and a full, so a 20px star
 * gives two 10x20 targets -- a tenth of the 44px a finger is reckoned to
 * need, on the one control here that asks the visitor to do something. At
 * 40px they become 20x40, four times the area.
 *
 * Both places the widget appears -- the User Rating card (hero or homepage
 * card) and the Community Rating block -- share these classes, so this
 * covers both. 900px rather than the usual 640px: a tablet is touched too,
 * and this was still 20px (10x20 hit targets) at 768px until this rule.
 */
@media (max-width: 900px) {
	.avg-vote-star {
		width: 40px;
		height: 40px;
	}

	.avg-user-rating-card__vote-stars {
		gap: 6px;
	}
}

.avg-vote-star__bg,
.avg-vote-star__fg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.avg-vote-star__bg {
	fill: var(--avg-color-border);
}

.avg-vote-star__fg {
	fill: var(--avg-color-primary);
	clip-path: inset( 0 calc(100% - var(--avg-star-fill, 0%)) 0 0 );
}

.avg-vote-star__hit {
	position: absolute;
	top: 0;
	height: 100%;
	width: 50%;
	padding: 0;
	margin: 0;
	background: none;
	border: none;
	cursor: pointer;
	z-index: 1;
}

.avg-vote-star__hit--half {
	left: 0;
}

.avg-vote-star__hit--full {
	left: 50%;
}

.avg-vote-star__hit:disabled {
	cursor: default;
}

.avg-user-rating-card__thanks:not([hidden]) {
	display: block;
	font-size: 0.8rem;
	color: var(--avg-color-primary);
	font-weight: 600;
	margin-top: 10px;
}

.avg-user-rating-card__label {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.4em;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--avg-color-text-muted);
	margin-bottom: 6px;
}

.avg-user-rating-card__value {
	display: block;
	font-size: 2rem;
	font-weight: 700;
	color: var(--avg-color-text);
	line-height: 1.1;
}

.avg-user-rating-card__value-suffix {
	font-size: 1rem;
	font-weight: 400;
	color: var(--avg-color-text-muted);
}

.avg-user-rating-card__stars {
	display: flex;
	justify-content: center;
	gap: 2px;
	margin: 6px 0 10px;
}

.avg-user-rating-card__count {
	display: block;
	font-size: 0.8rem;
	color: var(--avg-color-text-muted);
}

.avg-star {
	position: relative;
	display: inline-block;
	width: 18px;
	height: 18px;
}

.avg-star svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.avg-star__bg {
	fill: var(--avg-color-border);
}

.avg-star__fg {
	fill: var(--avg-color-primary);
	clip-path: inset( 0 calc(100% - var(--avg-star-fill)) 0 0 );
}

.avg-review-hero__price-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.avg-price-block {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.avg-price-block__offer {
	display: flex;
	align-items: center;
	gap: 10px;
}

.avg-price-block__offer-label {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	background: #dcfce7;
	color: #16a34a;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.avg-price-block__row {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.avg-review-hero__price-card .avg-price {
	display: flex;
	align-items: baseline;
	gap: 6px;
}

.avg-review-hero__price-card .avg-price__current {
	font-size: 1.6rem;
	font-weight: 700;
}

.avg-review-hero__price-card .avg-price__period {
	font-size: 0.85rem;
	color: var(--avg-color-text-muted);
}

.avg-review-hero__price-card .avg-price__original {
	font-size: 1rem;
	color: var(--avg-color-text-muted);
	text-decoration: line-through;
}

.avg-price__discount-badge {
	font-size: 0.75rem;
	font-weight: 700;
	color: #dc2626;
}

.avg-price-block__trial {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.85rem;
	color: var(--avg-color-text);
}

.avg-price-block__trial-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--avg-color-success);
	flex-shrink: 0;
}

.avg-price-block__trial-icon .avg-icon {
	width: 12px;
	height: 12px;
	color: #fff;
	stroke-width: 2.4;
}

.avg-review-hero__price-cta {
	width: 260px;
	flex-shrink: 0;
}

.avg-btn--large {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	font-size: 0.95rem;
}

@media (max-width: 900px) {
	/*
	 * Centred once the card stacks, to match the Trust Score and User Rating
	 * cards above it and the At a Glance figures below, which all centre their
	 * contents. Stacked and left-aligned, the price and the button sat against
	 * the left edge of a card the width of the screen while everything around
	 * them was centred -- at 768px the button ended 400px short of the card's
	 * right edge.
	 */
	.avg-review-hero__price-card {
		flex-direction: column;
		align-items: center;
	}

	.avg-price-block {
		align-items: center;
	}

	.avg-price-block__offer,
	.avg-price-block__row {
		justify-content: center;
	}
}

/* A phone still needs .avg-review-hero__top and .avg-review-hero__side to
   stack full-width -- the 641-900px rule below that puts Trust Score, User
   Rating and the price card side by side does not fit in 375px (a first
   version of that rule applied across the whole ≤900px range and ran the
   price card 258px past a 375px viewport before this was split out). */
@media (max-width: 640px) {
	.avg-review-hero__top {
		grid-template-columns: 1fr;
	}

	.avg-review-hero__side {
		flex-direction: column;
	}
}

/*
 * Trust Score, User Rating and the price+button in one card instead of
 * three, and side by side rather than stacked -- the user's own correction
 * after a first attempt stacked them into one continuous card instead.
 *
 * 641px and up only: below that a phone needs the full width for each (see
 * the ≤640px block above), which is also why this can't just widen the
 * ≤900px block that already centres the price card -- that one still has to
 * apply to a phone too.
 *
 * No DOM move: .avg-review-hero__top (the desktop grid holding the logo, the
 * identity block and .avg-review-hero__side) dissolves via display:contents
 * at this width, so its three children fall out to become items of
 * .avg-review-hero's own grid instead -- logo and identity keep the full
 * width, and .avg-review-hero__side lands beside .avg-review-hero__price-card
 * in the row below, which is where the price card already was in the DOM
 * (.avg-review-hero's next child after .top). .side itself keeps its row
 * layout -- unaffected by any of this -- so Trust Score and User Rating still
 * sit paired inside it. Desktop is untouched: display:contents only applies
 * in this query, so .avg-review-hero__top's own grid keeps doing exactly what
 * it does above 900px.
 */
@media (min-width: 641px) and (max-width: 900px) {
	.avg-review-hero {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"logo logo"
			"identity identity"
			"side price";
		gap: 16px;
	}

	.avg-review-hero__top {
		display: contents;
	}

	.avg-review-hero__logo-card {
		grid-area: logo;
	}

	.avg-review-hero__identity {
		grid-area: identity;
	}

	.avg-review-hero__side {
		grid-area: side;
		height: 100%;
		/* The base rule leaves flex-direction unset (row), which is exactly what
		   is wanted here -- stated explicitly since it would be easy to assume
		   this needs setting given how much else in this block does. .side now
		   has its own ~345px half of the row, and 163+14+163=340 still fits, so
		   Trust Score and User Rating pair the same way they do on desktop
		   rather than in some third, different arrangement. */
		flex-direction: row;
	}

	.avg-review-hero__price-card {
		grid-area: price;
		height: 100%;
		justify-content: center;
	}

	.avg-trust-score-card,
	.avg-user-rating-card {
		padding: 14px 10px;
	}

	.avg-trust-score-card__label,
	.avg-user-rating-card__label {
		min-height: 0;
	}

	.avg-review-hero__price-cta {
		width: 100%;
	}
}

/* Quick summary (Quick Verdict / Pros / Cons) */
.avg-quick-summary__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	grid-template-areas:
		"verdict pros cons"
		"verdict features features";
	column-gap: 32px;
	row-gap: 0;
	align-items: start;
}

.avg-quick-summary__col--verdict { grid-area: verdict; }
.avg-quick-summary__col--pros { grid-area: pros; }
.avg-quick-summary__col--cons { grid-area: cons; }

.avg-quick-summary__col {
	min-width: 0;
}

/* One continuous vertical divider between Quick Verdict and the Pros/Cons/
   Features area. It sits on the verdict column, which spans both grid rows,
   so it runs the full height as a single inset line. */
.avg-quick-summary__col--verdict {
	position: relative;
}

.avg-quick-summary__col--verdict::after {
	content: '';
	position: absolute;
	top: 6px;
	bottom: 6px;
	right: -16px;
	width: 1px;
	background: var(--avg-color-border);
}

/* Stretch all columns to the block's full height so the vertical dividers
   always run top-to-bottom, regardless of how short the Quick Verdict text is,
   and so the Pros/Cons divider can meet the horizontal Features divider. */
.avg-quick-summary__col--verdict,
.avg-quick-summary__col--pros,
.avg-quick-summary__col--cons {
	align-self: stretch;
}

/* Vertical divider between Pros and Cons. Stops with the normal inset above
   the horizontal Features divider (no T-junction). */
.avg-quick-summary__col--cons {
	position: relative;
}

.avg-quick-summary__col--cons::before {
	content: '';
	position: absolute;
	top: 6px;
	bottom: 6px;
	left: -16px;
	width: 1px;
	background: var(--avg-color-border);
}

.avg-quick-summary__col h5 {
	margin: 0 0 10px;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--avg-color-text-muted);
	display: flex;
	align-items: center;
	gap: 6px;
}

.avg-quick-summary__jump {
	display: inline-block;
	margin-top: 10px;
	font-size: 0.8rem;
	font-style: normal;
	font-weight: 700;
	color: var(--avg-color-primary);
	text-decoration: none;
}

/* Features tucked into the empty space under Pros/Cons on the review page.
   The Quick Verdict column spans both grid rows, so it keeps its full height. */
.avg-quick-summary__features {
	grid-area: features;
	position: relative;
	margin-top: 24px;
	padding-top: 24px;
}

/* Horizontal divider between Pros/Cons and Features, inset from both ends. */
.avg-quick-summary__features::before {
	content: '';
	position: absolute;
	top: 0;
	left: 6px;
	right: 6px;
	height: 1px;
	background: var(--avg-color-border);
}

.avg-quick-summary__features h5 {
	margin: 0 0 16px;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--avg-color-text-muted);
}

.avg-feature-group + .avg-feature-group {
	margin-top: 16px;
}

.avg-feature-group__label {
	display: block;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--avg-color-text);
	margin-bottom: 10px;
}

.avg-feature-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.avg-feature-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	border-radius: 999px;
	font-size: 0.85rem;
	line-height: 1;
	border: 1px solid var(--avg-color-border);
	background: var(--avg-color-surface);
	color: var(--avg-color-text);
}

.avg-feature-pill::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex-shrink: 0;
}

.avg-feature-pill--available::before {
	background: #22c55e;
}

.avg-feature-pill--unavailable {
	background: #fef2f2;
	border-color: #fecaca;
	color: #991b1b;
}

.avg-feature-pill--unavailable::before {
	background: #ef4444;
}

@media (max-width: 800px) {
	.avg-quick-summary__grid {
		grid-template-columns: 1fr;
		grid-template-areas:
			"verdict"
			"pros"
			"cons"
			"features";
		row-gap: 20px;
	}

	.avg-quick-summary__col--verdict::after,
	.avg-quick-summary__col--cons::before {
		display: none;
	}

	.avg-quick-summary__features {
		margin-top: 4px;
	}
}

/* Key Features + Supported Devices row */
.avg-features-devices-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.avg-at-a-glance-card,
.avg-devices-card {
	min-width: 0;
}

.avg-at-a-glance-card h5,
.avg-devices-card h5 {
	margin: 0 0 14px;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--avg-color-text-muted);
}

.avg-scroll-row-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
}

.avg-scroll-row-wrap [data-scroll-row] {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
	flex: 1;
	min-width: 0;
}

.avg-scroll-row-wrap [data-scroll-row]::-webkit-scrollbar {
	display: none;
}

.avg-scroll-row-wrap .avg-devices__grid > * {
	flex-shrink: 0;
}

.avg-scroll-row__btn {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid var(--avg-color-border);
	background: var(--avg-color-surface);
	color: var(--avg-color-text);
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
}

/*
 * On a phone the row is swiped, not clicked. The two buttons took 56px of a
 * 277px card -- a fifth of it -- to do what a thumb does for free, leaving
 * room for two of the eight devices. They go, and a fade at whichever edge
 * still has content behind it says the row carries on: without the buttons
 * there is otherwise nothing to say so. scroll-row.js sets the classes as the
 * row is scrolled, so the fade is only ever on a side there is more to see.
 */
@media (max-width: 640px) {
	.avg-scroll-row__btn {
		display: none;
	}

	.avg-scroll-row-wrap--more-right [data-scroll-row] {
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
		mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
	}

	.avg-scroll-row-wrap--more-left [data-scroll-row] {
		-webkit-mask-image: linear-gradient(to right, transparent, #000 36px);
		mask-image: linear-gradient(to right, transparent, #000 36px);
	}

	.avg-scroll-row-wrap--more-left.avg-scroll-row-wrap--more-right [data-scroll-row] {
		-webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
		mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
	}
}

@media (max-width: 800px) {
	.avg-features-devices-row {
		grid-template-columns: 1fr;
	}
}

/* Review page body (Full Review + sticky Trust Score Breakdown) */
.avg-review-page__body {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 16px;
	padding: 0 24px;
	margin-bottom: 16px;
}

/* Grid items default to min-width: auto, which lets an oversized child (e.g.
   a "Full Size" content image) force the whole column -- and the layout
   around it -- to stretch to fit. min-width: 0 makes the column respect its
   assigned grid width instead, so the image's own max-width: 100% actually
   has something fixed to measure against. */
.avg-full-review-card {
	min-width: 0;
}

.avg-full-review-card h2,
.avg-trust-breakdown-card h2 {
	margin: 0 0 16px;
	font-size: 1.2rem;
	display: flex;
	align-items: center;
	gap: 8px;
}

.avg-full-review-card h2 {
	font-size: 1.6rem;
}

.avg-trust-breakdown-card {
	position: sticky;
	top: 24px;
	align-self: start;
}

.avg-trust-breakdown__row {
	display: grid;
	grid-template-columns: 24px 1fr auto;
	align-items: start;
	gap: 10px;
	padding: 12px 0;
	border-top: 1px solid var(--avg-color-border);
}

.avg-trust-breakdown__row:first-of-type {
	border-top: none;
	padding-top: 0;
}

.avg-trust-breakdown__icon {
	width: 18px;
	height: 18px;
	margin-top: 2px;
}

.avg-trust-breakdown__label strong {
	display: block;
	font-size: 0.9rem;
}

.avg-trust-breakdown__label span {
	font-size: 0.78rem;
	color: var(--avg-color-text-muted);
}

.avg-trust-breakdown__score {
	font-weight: 700;
	white-space: nowrap;
}

.avg-trust-breakdown__score-suffix {
	font-weight: 400;
	font-size: 0.8rem;
	color: var(--avg-color-text-muted);
}

/* Trust Score Breakdown gradient bar (Review Card variant only) */
.avg-card-trust-breakdown .avg-trust-breakdown__row {
	grid-template-columns: 20px 140px 1fr auto;
	align-items: center;
	gap: 12px;
}

.avg-card-trust-breakdown .avg-trust-breakdown__icon {
	margin-top: 0;
}

.avg-trust-breakdown__bar {
	position: relative;
	height: 6px;
	border-radius: 999px;
	background: var(--avg-color-border);
	overflow: hidden;
}

.avg-trust-breakdown__bar-fill {
	position: absolute;
	inset: 0;
	width: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, #93c5fd, var(--avg-color-primary));
}

.avg-card-trust-breakdown__overall {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 8px;
	padding-top: 16px;
	border-top: 1px solid var(--avg-color-border);
}

.avg-card-trust-breakdown__overall-label {
	font-weight: 700;
	font-size: 0.85rem;
	white-space: nowrap;
}

.avg-card-trust-breakdown__overall .avg-score-bar {
	flex: 1;
	justify-content: flex-end;
	margin-bottom: 0;
}

.avg-card-trust-breakdown__overall-value {
	font-weight: 800;
	font-size: 1.6rem;
	color: var(--avg-color-text);
}

.avg-trust-breakdown__methodology-link {
	display: block;
	margin-top: 16px;
	font-size: 0.8rem;
	color: var(--avg-color-primary);
	text-decoration: none;
}

.avg-trust-breakdown__cta {
	margin-top: 16px;
	width: 100%;
}

/* Trust Score Breakdown doubling as an in-page navigator (single Review page
   sidebar only -- the homepage card's static breakdown keeps plain <div> rows
   and is unaffected since it's scoped under .avg-card-trust-breakdown instead). */
.avg-trust-breakdown-card .avg-trust-breakdown__row {
	position: relative;
	margin: 0 -24px;
	padding: 12px 24px;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.avg-trust-breakdown-card .avg-trust-breakdown__row:first-of-type {
	border-top: none;
	padding-top: 0;
}

.avg-trust-breakdown-card .avg-trust-breakdown__row::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: transparent;
	transition: background-color 0.15s ease;
}

.avg-trust-breakdown-card .avg-trust-breakdown__row:hover {
	background-color: rgba(15, 23, 42, 0.025);
}

.avg-trust-breakdown-card .avg-trust-breakdown__row.is-active {
	background-color: rgba(15, 23, 42, 0.045);
}

.avg-trust-breakdown-card .avg-trust-breakdown__row.is-active::before {
	background-color: var(--avg-color-secondary);
}

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

	.avg-trust-breakdown-card {
		position: static;
	}

	/*
	 * Below this width the rows are not links -- review-nav.js takes the href
	 * away, because this panel sits under the full review rather than beside
	 * it (the same 900px collapse as .avg-review-page__body above), so every
	 * one of them pointed back up past what the reader had just scrolled
	 * through. Everything that offered them as navigation goes with it: the
	 * pointer, the hover, and the reading-position highlight, which on a panel
	 * below the article only ever marks a section already read (and lands on
	 * the last row once you reach the bottom of the page, which reads as a
	 * stray selection). The panel itself stays -- it is a good place for the
	 * overview. Was 640px; widened because a tablet in this same stacked
	 * layout had the identical problem, just not yet fixed for it.
	 */
	.avg-trust-breakdown-card .avg-trust-breakdown__row {
		cursor: default;
	}

	.avg-trust-breakdown-card .avg-trust-breakdown__row:hover,
	.avg-trust-breakdown-card .avg-trust-breakdown__row.is-active {
		background-color: transparent;
	}

	.avg-trust-breakdown-card .avg-trust-breakdown__row.is-active::before {
		background-color: transparent;
	}
}

/* Related reviews + guides */
.avg-related-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.avg-related-row h2 {
	margin: 0 0 16px;
	font-size: 1.2rem;
}

.avg-related-reviews-card__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}

.avg-related-reviews-card__header h5 {
	margin: 0;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--avg-color-text-muted);
}

.avg-related-reviews-card__view-all {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--avg-color-primary);
	text-decoration: none;
}

.avg-review-grid-compact {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

@media (max-width: 480px) {
	.avg-review-grid-compact {
		grid-template-columns: 1fr;
	}
}

.avg-review-card-compact {
	display: flex;
	flex-direction: column;
	padding: 0; /* The two halves carry their own padding so the tint reaches the edges. */
	overflow: hidden;
	text-decoration: none;
	color: var(--avg-color-text);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.avg-review-card-compact:hover {
	transform: translateY(-2px);
	border-color: var(--avg-color-primary);
	box-shadow: 0 12px 22px -14px color-mix(in srgb, var(--avg-color-primary) 60%, transparent);
}

/* Identity and score sit on a neutral wash rather than a purple one -- four of
   these next to the purple guide banner made the row far too heavy. */
.avg-review-card-compact__top {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px 14px 12px;
	background: rgba(15, 23, 42, 0.045);
	border-bottom: 1px solid var(--avg-color-border);
}

.avg-review-card-compact__bottom {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
	padding: 12px 14px 13px;
}

.avg-review-card-compact__head {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.avg-review-card-compact__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	padding: 5px;
	border-radius: 8px;
	overflow: hidden;
	background: #1e293b; /* Same dark default as the large cards; see the logo-bg note above. */
}

.avg-review-card-compact__logo.avg-logo-bg--light {
	background: var(--avg-color-surface);
	border: 1px solid var(--avg-color-border);
}

.avg-review-card-compact__logo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.avg-review-card-compact__name {
	font-size: 0.92rem;
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.avg-review-card-compact__score-row {
	display: flex;
	align-items: baseline;
	gap: 7px;
}

.avg-review-card-compact__score-value {
	font-size: 1.05rem;
	font-weight: 800;
}

.avg-review-card-compact__score-label {
	font-size: 0.75rem;
	font-weight: 700;
}

.avg-review-card-compact__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

/* Pushed to the bottom so the price line stays level across cards of
   different heights -- one may have two genre tags and its neighbour none. */
.avg-review-card-compact__foot {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin-top: auto;
	padding-top: 4px;
}

.avg-review-card-compact__price-value {
	font-size: 0.95rem;
	font-weight: 800;
	color: var(--avg-color-text);
}

.avg-review-card-compact__price-period {
	font-size: 0.72rem;
	color: #64748b;
}

.avg-review-card-compact__cta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--avg-color-primary);
	white-space: nowrap;
}

.avg-review-card-compact__cta .avg-icon {
	width: 13px;
	height: 13px;
	transition: transform 0.18s ease;
}

.avg-review-card-compact:hover .avg-review-card-compact__cta .avg-icon {
	transform: translateX(3px);
}

.avg-score-bar--small {
	justify-content: flex-start;
	margin-bottom: 0;
}

.avg-score-bar--small .avg-score-bar__seg {
	width: 14px;
	height: 5px;
}

@media (max-width: 800px) {
	.avg-related-row {
		grid-template-columns: 1fr;
	}
}

/* Full review */
.avg-full-review__section {
	padding: 20px 0;
	border-top: 1px solid var(--avg-color-border);
	/* Establishes a new block formatting context so a floated WYSIWYG image
	   (alignleft/alignright) is contained inside this section instead of
	   hanging below it uncleared -- otherwise, when the float is the last
	   thing in the content, it visually bleeds into whatever comes right
	   after (e.g. the site footer on a generic Page). */
	display: flow-root;
}

/* External links typed into WYSIWYG content (Quick Verdict, review sections,
   Conclusion) -- auto-tagged by adultvrguide_add_external_link_icons(). */
.avg-content-link {
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.avg-icon.avg-content-link__icon {
	width: 13px;
	height: 13px;
	vertical-align: -1px;
	margin-left: 2px;
	color: currentColor;
}

/* Aggregator / Studio block -- deliberately set apart from the plain review
   sections above/below it (accent border + tinted eyebrow) since it's
   supplementary context about the site, not part of the review itself. */
.avg-aggregator-block {
	margin: 20px 0;
	padding: 20px;
	border: 1px solid var(--avg-color-border);
	border-left: 4px solid var(--avg-color-secondary);
	border-radius: var(--avg-radius);
	background: var(--avg-color-bg);
}

.avg-aggregator-block__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--avg-color-secondary);
	margin-bottom: 8px;
}

.avg-aggregator-block__eyebrow-icon {
	width: 14px;
	height: 14px;
	color: var(--avg-color-secondary);
}

.avg-aggregator-block h3 {
	margin: 0 0 8px;
	font-size: 1.1rem;
}

.avg-aggregator-block p {
	margin: 0 0 14px;
	color: var(--avg-color-text-muted);
	font-size: 0.92rem;
}

.avg-aggregator-block__platforms {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.avg-aggregator-block__platform {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--avg-color-secondary);
	background: var(--avg-color-surface);
	border: 1px solid var(--avg-color-border);
	padding: 4px 12px;
	border-radius: 999px;
	text-decoration: none;
}

.avg-aggregator-block__platform:hover {
	border-color: var(--avg-color-secondary);
}

.avg-aggregator-block__rows {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.avg-aggregator-block__row {
	display: grid;
	grid-template-columns: 110px 1fr auto;
	align-items: center;
	gap: 12px;
}

.avg-aggregator-block__row-label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--avg-color-text);
	text-decoration: none;
}

.avg-aggregator-block__row-label:hover {
	color: var(--avg-color-secondary);
}

.avg-aggregator-block__row-bar {
	position: relative;
	height: 8px;
	border-radius: 999px;
	background: var(--avg-color-border);
	overflow: hidden;
}

.avg-aggregator-block__row-bar-fill {
	position: absolute;
	inset: 0;
	width: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--avg-color-secondary), var(--avg-color-primary));
}

.avg-aggregator-block__row-value {
	font-size: 0.85rem;
	font-weight: 700;
	min-width: 36px;
	text-align: right;
}

@media (max-width: 500px) {
	.avg-aggregator-block__row {
		grid-template-columns: 90px 1fr auto;
		gap: 8px;
	}
}

/* Standard WordPress content image classes -- the editor's chosen size/alignment
   is only respected on the frontend if the theme styles these itself. */
.avg-full-review__section img {
	max-width: 100%;
	height: auto;
	cursor: zoom-in;
}

/* Card artwork inside a section (device logos, the explainer mascot) is not
   WYSIWYG content: it must not offer the lightbox, and it sets its own size.
   lightbox.js skips the same class. */
.avg-full-review__section img.avg-no-zoom {
	cursor: inherit;
}

/* WordPress's classic "Create Gallery" shortcode, insertable from the Add
   Media button in any of the Content WYSIWYG fields. WP prints each
   .gallery-item with an inline width based on column count -- overridden
   here so our grid controls the layout instead. */
.gallery {
	display: grid;
	gap: 10px;
	margin: 16px 0;
}

.gallery-columns-1 { grid-template-columns: 1fr; }
.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-columns-5 { grid-template-columns: repeat(5, 1fr); }
.gallery-columns-6 { grid-template-columns: repeat(6, 1fr); }
.gallery-columns-7 { grid-template-columns: repeat(7, 1fr); }
.gallery-columns-8 { grid-template-columns: repeat(8, 1fr); }
.gallery-columns-9 { grid-template-columns: repeat(9, 1fr); }

.gallery-item {
	width: auto !important;
	margin: 0 !important;
}

.gallery-icon {
	margin: 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 8px;
}

/* A lone leftover image on the gallery's last row spans the full width as a
   wide "hero" tile instead of leaving empty grid cells next to it. */
.gallery-columns-2 .gallery-item:last-child:nth-child(2n + 1),
.gallery-columns-3 .gallery-item:last-child:nth-child(3n + 1),
.gallery-columns-4 .gallery-item:last-child:nth-child(4n + 1) {
	grid-column: 1 / -1;
}

.gallery-columns-2 .gallery-item:last-child:nth-child(2n + 1) .gallery-icon,
.gallery-columns-3 .gallery-item:last-child:nth-child(3n + 1) .gallery-icon,
.gallery-columns-4 .gallery-item:last-child:nth-child(4n + 1) .gallery-icon {
	aspect-ratio: 21 / 9;
}

.gallery-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
	display: block;
	cursor: zoom-in;
}

.gallery-caption {
	font-size: 0.8rem;
	color: var(--avg-color-text-muted);
	text-align: center;
	margin-top: 4px;
}

@media (max-width: 600px) {
	.gallery-columns-3,
	.gallery-columns-4,
	.gallery-columns-5,
	.gallery-columns-6,
	.gallery-columns-7,
	.gallery-columns-8,
	.gallery-columns-9 {
		grid-template-columns: repeat(2, 1fr);
	}
}

.avg-full-review__section .alignleft {
	float: left;
	margin: 4px 20px 16px 0;
}

.avg-full-review__section .alignright {
	float: right;
	margin: 4px 0 16px 20px;
}

.avg-full-review__section .aligncenter {
	display: block;
	margin: 16px auto;
}

.avg-full-review__section .alignnone {
	margin: 16px 0;
}

.avg-full-review__section .wp-caption {
	max-width: 100%;
}

.avg-full-review__section .wp-caption img {
	display: block;
	width: 100%;
}

.avg-full-review__section .wp-caption-text {
	font-size: 0.8rem;
	color: var(--avg-color-text-muted);
	text-align: center;
	margin-top: 6px;
}

.avg-full-review__section:first-of-type {
	border-top: none;
	padding-top: 0;
}

.avg-full-review__cta {
	margin-top: 20px;
	width: 100%;
}

.avg-full-review__section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.avg-full-review__section-header h3 {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
}

.avg-full-review__score {
	font-size: 1.3rem;
	font-weight: 700;
	/* Colour comes from the .avg-score-band--* class so it matches the score in
	   the AVG Trust Score Breakdown (green/amber/red per band). */
}

.avg-full-review__score-suffix {
	font-size: 0.85rem;
	font-weight: 400;
	color: var(--avg-color-text-muted);
}

/* Chic pull-quotes: any blockquote from the editor inside the review content
   gets big decorative quote marks and centred text. Marks use the same light
   purple as a visitor's own submitted rating (#9e97d5). */
.avg-full-review__section blockquote {
	position: relative;
	margin: 28px auto;
	max-width: 88%;
	padding: 10px 46px;
	border: 0;
	text-align: center;
	font-size: 1.05rem;
	line-height: 1.75;
	color: var(--avg-color-text);
}

.avg-full-review__section blockquote p {
	margin: 0 0 8px;
}

.avg-full-review__section blockquote p:last-child {
	margin-bottom: 0;
}

.avg-full-review__section blockquote::before,
.avg-full-review__section blockquote::after {
	position: absolute;
	font-family: Georgia, "Times New Roman", serif;
	font-weight: 700;
	font-size: 3rem;
	line-height: 1;
	color: #9e97d5;
}

.avg-full-review__section blockquote::before {
	content: "\201C";
	top: 2px;
	left: 6px;
}

.avg-full-review__section blockquote::after {
	content: "\201D";
	right: 6px;
	bottom: -16px;
}

/* Generic WP Page template (About, Privacy, Contact, etc.) -- a single
   centered card narrower than .avg-container's 1320px, since unconstrained
   prose at that width would run far too long per line to read comfortably. */
.avg-page {
	padding-top: 8px;
	padding-bottom: 60px;
}

.avg-page__card {
	max-width: 820px;
	margin: 0 auto;
	padding-left: 40px;
	padding-right: 40px;
}

.avg-page__title {
	margin: 0 0 20px;
	font-size: 2rem;
	font-weight: 800;
	color: var(--avg-color-text);
}

.avg-page__content.avg-full-review__section {
	border-top: none;
	padding: 0;
}

/* About Us (currently the only Page using core wp:columns blocks): at
   641-900px WordPress's own block-library CSS stacks every columns block
   full-width below 782px (`@media (max-width: 781px)`, !important), so the
   intro photo renders at the full ~620px content width instead of beside
   the text. Un-stacked just for the first columns block (the intro photo),
   with the photo pinned to a narrow fixed column instead of an even 50/50
   split, matching the "smaller, beside the text" ask -- needs !important to
   beat WP's own. The second columns block (Foxxie at the very end) stays
   stacked as WP renders it; only its image is capped smaller in size, not
   given the whole 641-900px block since not asked for. Phone (<=640px) and
   desktop (>=901px) are untouched -- neither was reported as a problem. */
@media (min-width: 641px) and (max-width: 900px) {
	.avg-page__content .wp-block-columns:first-of-type {
		flex-wrap: nowrap;
	}

	.avg-page__content .wp-block-columns:first-of-type > .wp-block-column {
		flex-basis: 0 !important;
		flex-grow: 1;
	}

	.avg-page__content .wp-block-columns:first-of-type > .wp-block-column:last-child {
		flex-basis: 200px !important;
		flex-grow: 0;
		flex-shrink: 0;
	}

	.avg-page__content .wp-block-columns:last-of-type img {
		max-width: 200px;
		height: auto;
	}
}

/* Single Guide -- built on the generic Page card/typography, plus a
   featured-image hero up top since Guides read more like articles. */
.avg-guide__hero {
	margin: -24px -40px 24px;
	border-radius: var(--avg-radius) var(--avg-radius) 0 0;
	overflow: hidden;
}

.avg-guide__hero img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 420px;
	object-fit: cover;
}

/* Guides archive (/guides/) */
.avg-guide-archive {
	padding: 40px 0 60px;
}

.avg-guide-archive__header {
	max-width: 640px;
	margin: 0 auto 32px;
	text-align: center;
}

.avg-guide-archive__header h1 {
	margin: 0 0 10px;
	font-size: 2rem;
	font-weight: 800;
	color: var(--avg-color-text);
}

.avg-guide-archive__header p {
	margin: 0;
	color: var(--avg-color-text-muted);
}

.avg-guide-archive__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
}


/* WP core's the_posts_pagination() markup, restyled to match .avg-pagination. */
.avg-guide-pagination.pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 40px;
}

.avg-guide-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.avg-guide-pagination .page-numbers {
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--avg-color-border);
	background: var(--avg-color-surface);
	color: var(--avg-color-text);
	border-radius: 8px;
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.avg-guide-pagination .page-numbers.dots {
	border: none;
	background: none;
	color: var(--avg-color-text-muted);
}

.avg-guide-pagination a.page-numbers:hover {
	border-color: var(--avg-color-primary);
	color: var(--avg-color-primary);
}

.avg-guide-pagination .page-numbers.current {
	background: var(--avg-color-primary);
	border-color: var(--avg-color-primary);
	color: #fff;
}

/* Rich Guide hero (used only once a Guide has content-block/hero fields
   filled in -- see $has_rich_content in single-guide.php). color-mix() keeps
   the tint correct against whatever primary colour Site Settings picks. */
.avg-guide-hero {
	display: grid;
	grid-template-columns: 1fr 420px;
	gap: 24px;
	align-items: center;
	margin: 24px auto 40px;
	padding: 36px 40px;
	border-radius: var(--avg-radius);
	background: linear-gradient(100deg, var(--avg-color-bg) 20%, color-mix(in srgb, var(--avg-color-primary) 12%, var(--avg-color-bg)) 100%);
	border: 1px solid var(--avg-color-border);
}

/* Small decorative dot above the title -- a fixed brand flourish, not
   per-guide content, so it isn't an ACF field. */
.avg-guide-hero__dot {
	display: block;
	width: 10px;
	height: 10px;
	margin-bottom: 14px;
	border-radius: 3px;
	background: linear-gradient(135deg, var(--avg-color-primary), var(--avg-color-secondary));
	transform: rotate(45deg);
}

/* Inter is loaded only on Guide pages (see adultvrguide_enqueue_assets);
   the stack falls back to the body font everywhere it isn't available. */
.avg-guide-hero__title,
.avg-guide-hero__subtitle {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.avg-guide-hero__title {
	margin: 0 0 12px;
	font-size: 3.25rem;
	font-weight: 800;
	line-height: 1.06;
	text-transform: uppercase;
	letter-spacing: -0.035em;
	color: var(--avg-color-text);
}

@media (max-width: 1100px) {
	.avg-guide-hero__title {
		font-size: 2.6rem;
	}
}

/* width: fit-content is load-bearing: as a full-width block the gradient box
   would stretch across the whole container while the text only covers its
   left third, so the letters would pick up just the first slice of the ramp
   and read as one flat colour. Shrinking the box to the text makes the full
   gradient land on the glyphs. */
.avg-guide-hero__title-accent {
	display: block;
	width: fit-content;
	color: var(--avg-color-primary);
}

/* Purple-to-violet, deliberately not running into --avg-color-secondary
   (blue) the way the site's other gradients do -- the accent line should
   stay within the purple family. */
@supports ( background-clip: text ) or ( -webkit-background-clip: text ) {
	.avg-guide-hero__title-accent {
		background: linear-gradient(100deg, #4f46e5 0%, #7c3aed 45%, #a855f7 100%);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
}

.avg-guide-hero__subtitle {
	margin: 0 0 14px;
	font-size: 1.15rem;
	font-weight: 500;
	color: var(--avg-color-text);
}

/* One step darker than --avg-color-text-muted (#64748b): in the hero these
   sit on a tinted background where the muted tone washes out. */
.avg-guide-hero__description {
	max-width: 460px;
	margin: 0 0 24px;
	color: #475569;
}

.avg-guide-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 24px 28px;
}

.avg-guide-hero__badge {
	display: flex;
	align-items: center;
	gap: 8px;
}

.avg-guide-hero__badge-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	border-radius: 8px;
	background: color-mix(in srgb, var(--avg-color-primary) 12%, transparent);
}

.avg-guide-hero__badge-icon .avg-icon {
	width: 16px;
	height: 16px;
	color: var(--avg-color-primary);
}

.avg-guide-hero__badge-text {
	display: flex;
	flex-direction: column;
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--avg-color-text);
}

.avg-guide-hero__badge-text small {
	font-size: 0.76rem;
	font-weight: 400;
	color: #475569;
}

.avg-guide-hero__image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--avg-radius);
}

@media (max-width: 900px) {
	.avg-guide-hero {
		grid-template-columns: 1fr;
		padding: 28px 24px;
	}

	.avg-guide-hero__image {
		max-width: 220px;
		margin: 0 auto;
	}
}

/* 641-900px: the plain single-column stack above is a tall, top-heavy hero
   -- title, subtitle, description, badges, then Foxxie centred full-width
   below all of it, ~620px tall at 768px wide. Goes back to the same
   side-by-side grid desktop uses (text column | image column), just with a
   narrower image column, instead of collapsing to one column -- title
   already wraps fine against a narrower text column on desktop, so it wraps
   the same way here. The badges go 2x2 within that text column rather than
   wrapping across the whole row, and Foxxie sits beside them, vertically
   centred against the whole text block same as on desktop. Phone (<=640px)
   keeps the plain stack -- there's no width left for two columns at all. */
@media (min-width: 641px) and (max-width: 900px) {
	.avg-guide-hero {
		grid-template-columns: 1fr 230px;
	}

	.avg-guide-hero__badges {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px 20px;
	}

	.avg-guide-hero__image {
		max-width: 230px;
		margin: 0;
	}
}

/* Guide body: sticky "On this page" + Foxxie's Tip sidebar, content on the
   right -- mirrors the Review page's sticky Trust Score Breakdown pattern. */
.avg-guide-layout {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 32px;
	align-items: start;
	margin-bottom: 60px;
}

/* The tip card's mascot overhangs its top edge, so the gap has to clear that
   overhang as well as space the two cards. */
.avg-guide-sidebar {
	position: sticky;
	top: 24px;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.avg-guide-toc {
	display: flex;
	flex-direction: column;
	padding: 18px;
}

.avg-guide-toc__heading {
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--avg-color-text);
	margin-bottom: 10px;
}

.avg-guide-toc__link {
	position: relative;
	padding: 7px 8px;
	margin: 0 -8px;
	border-radius: 6px;
	font-size: 0.88rem;
	color: #334155;
	text-decoration: none;
}

.avg-guide-toc__link:hover {
	color: var(--avg-color-text);
}

.avg-guide-toc__link.is-active {
	color: var(--avg-color-primary);
	font-weight: 700;
}

/* Current position is marked with a thin purple tick on both edges of the
   row, rather than a filled background -- matches the mockup's cleaner look. */
.avg-guide-toc__link.is-active::before,
.avg-guide-toc__link.is-active::after {
	content: '';
	position: absolute;
	top: 50%;
	width: 2px;
	height: 60%;
	transform: translateY(-50%);
	background: var(--avg-color-primary);
	border-radius: 999px;
}

.avg-guide-toc__link.is-active::before {
	left: 0;
}

.avg-guide-toc__link.is-active::after {
	right: 0;
}

.avg-guide-tip {
	position: relative;
	overflow: visible;
	padding: 34px 18px 18px;
	background: color-mix(in srgb, var(--avg-color-primary) 6%, var(--avg-color-surface));
}

/* Foxxie sits inside the card at full size (not cropped to a circle) --
   pulled up just enough that the tips of his ears poke past the card's
   top edge. Needs the transparent-background asset to read correctly. */
.avg-guide-tip__mascot {
	display: block;
	width: 150px;
	height: auto;
	margin: -54px auto 10px;
}

.avg-guide-tip__heading {
	justify-content: center;
	text-align: center;
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--avg-color-text);
	margin-bottom: 6px;
}

.avg-guide-tip__heading .avg-icon {
	color: #f5b31b;
}

.avg-guide-tip p {
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--avg-color-text-muted);
}

/* .avg-guide-sidebar collapses to a static full-width column at <=900px (see
   .avg-guide-layout below), so this card grows from a narrow 280px sidebar
   slot to the full content width -- at 768px, ~705px. The mascot-on-top,
   centred-text layout was sized for the narrow column; that wide a card
   leaves Foxxie looking small and adrift above a paragraph with no side
   framing. Mascot beside the heading/text instead, sized down since it's now
   a side element, not the card's focal point. Phone (<=640px) keeps the
   original layout -- the card is narrow there too, closer to what this was
   designed for. */
@media (min-width: 641px) and (max-width: 900px) {
	.avg-guide-tip {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-areas:
			"mascot heading"
			"mascot text";
		align-items: center;
		column-gap: 16px;
		padding: 18px;
	}

	.avg-guide-tip__mascot {
		grid-area: mascot;
		width: 90px;
		margin: 0;
	}

	.avg-guide-tip__heading {
		grid-area: heading;
		justify-content: flex-start;
		text-align: left;
	}

	.avg-guide-tip p {
		grid-area: text;
		max-width: 480px;
	}
}

.avg-guide-content {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* Each Section block is its own card in a Guide (unlike the Review page,
   where sections are just divided by a border). Scoped to .avg-guide-content
   so .avg-full-review__section keeps its plain divider look everywhere else;
   two classes beats the base rule's specificity regardless of source order. */
.avg-guide-content .avg-full-review__section {
	background: var(--avg-color-surface);
	border: 1px solid var(--avg-color-border);
	border-radius: var(--avg-radius);
	box-shadow: var(--avg-shadow);
	padding: 28px 32px;
	border-top: none;
}

.avg-guide-content .avg-full-review__section p {
	color: var(--avg-color-text);
}

.avg-guide-section__split {
	display: grid;
	grid-template-columns: 1fr 2.3fr;
	gap: 24px;
	align-items: start;
}

@media (max-width: 800px) {
	.avg-guide-section__split {
		grid-template-columns: 1fr;
	}

	/* The button (e.g. Section 5's "Read our privacy tips") sits inside
	   .split-text, right after the intro, so it beside the cards column on a
	   wide screen it reads as "text, then a CTA, then the cards" -- fine
	   there since cards are to the right, not below. Stacked in one column
	   here, that same order puts the button in the middle of the card,
	   between the intro and the info/device list under it. display: contents
	   un-boxes .split-text so its children (intro, button) become direct
	   items of this grid alongside .split-cards, without moving any markup --
	   same technique as the review-hero three-column layout elsewhere in this
	   file -- and order puts the button last, after the cards, as a closing
	   CTA instead of an interruption. */
	.avg-guide-section__split-text {
		display: contents;
	}

	.avg-guide-section__split-cards {
		order: 2;
	}

	/* Grid items default to justify-items: stretch on their inline axis, which
	   is why the button ran the full grid column's width the moment it
	   became a direct grid item here -- it never needed sizing before, since
	   as a plain block child of .split-text it just sat at its own content
	   width. justify-self: start opts it back out, same as every other
	   button on this page. */
	.avg-guide-section__split .avg-guide-section__btn {
		order: 3;
		justify-self: start;
		margin-top: 0;
	}
}

/* Plain container -- the paired block (Pros/Cons or Device Cards) brings its
   own grid, since the two need different column behaviour. */
.avg-guide-section__split-cards {
	min-width: 0;
}

.avg-guide-section__split-cards .avg-guide-devices {
	grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
	gap: 10px;
}

/* Beside the section text there is less room, so let the compact cards sit
   closer together than they would across the full width. */
.avg-guide-section__split-cards .avg-guide-cards {
	gap: 12px;
}

.avg-guide-section__split-cards .avg-guide-device {
	padding: 12px 8px;
}

.avg-guide-section__split-cards .avg-guide-device__shot {
	height: 56px;
}

.avg-guide-section__split-cards .avg-guide-device__shot img {
	max-height: 56px;
}

.avg-guide-pros-cons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

@media (max-width: 700px) {
	.avg-guide-pros-cons {
		grid-template-columns: 1fr;
	}
}

.avg-guide-pros-cons__col {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.avg-guide-pros-cons__heading {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 1rem;
	font-weight: 700;
	color: var(--avg-color-text);
}

.avg-guide-pros-cons__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	border-radius: 50%;
}

.avg-guide-pros-cons__icon .avg-icon {
	width: 15px;
	height: 15px;
}

.avg-guide-pros-cons__icon--good {
	background: color-mix(in srgb, #16a34a 28%, transparent);
	color: #16a34a;
}

.avg-guide-pros-cons__icon--bad {
	background: color-mix(in srgb, #dc2626 28%, transparent);
	color: #dc2626;
}

/* Reuses the "plus" icon rotated 45° as an X, rather than adding a new icon
   just for this. */
.avg-guide-pros-cons__icon--bad .avg-icon {
	transform: rotate(45deg);
}

.avg-guide-pros-cons__col ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.avg-guide-pros-cons__col li {
	position: relative;
	padding-left: 16px;
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--avg-color-text);
}

.avg-guide-pros-cons__col li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: currentColor;
}

.avg-guide-pros-cons__col--good li::before {
	color: #16a34a;
}

.avg-guide-pros-cons__col--bad li::before {
	color: #dc2626;
}

.avg-guide-content .avg-full-review__section-header h3 {
	font-size: 1.4rem;
}

.avg-guide-section__btn {
	margin-top: 16px;
}

.avg-icon.avg-guide-section__btn-icon {
	width: 15px;
	height: 15px;
	color: var(--avg-color-primary);
}

/* Device row: logos come from the Device CPT entries, so the cards adapt to
   however many are picked rather than assuming a fixed count. */
.avg-guide-devices {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 14px;
}

.avg-guide-device {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 4px;
	padding: 16px 12px;
	text-decoration: none;
	color: inherit;
}

.avg-guide-device__shot {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 74px;
	margin-bottom: 4px;
}

/* These sit inside .avg-full-review__section, which gives content images a
   zoom-in cursor for the lightbox -- but these are card artwork, not content
   (lightbox.js skips them too). */
.avg-guide-device__shot img {
	max-width: 100%;
	max-height: 74px;
	width: auto;
	object-fit: contain;
	cursor: inherit;
	transition: transform 0.18s ease;
}

.avg-guide-device__name {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--avg-color-text);
}

.avg-guide-device__tagline {
	font-size: 0.75rem;
	color: #475569;
}

/* Whole card is the link: lift it, warm the border and nudge the product shot
   so the hover target reads as one unit rather than just the title. */
.avg-guide-device--link {
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.avg-guide-device--link:hover {
	transform: translateY(-3px);
	border-color: var(--avg-color-primary);
	box-shadow: 0 12px 20px -10px color-mix(in srgb, var(--avg-color-primary) 55%, transparent);
}

.avg-guide-device--link:hover .avg-guide-device__shot img {
	transform: scale(1.06);
}

.avg-guide-device--link:hover .avg-guide-device__name {
	color: var(--avg-color-primary);
}

.avg-guide-device--more {
	justify-content: center;
	border-style: dashed;
}

.avg-guide-device--more:hover {
	border-color: var(--avg-color-primary);
}

.avg-guide-device__plus {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin-bottom: 12px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--avg-color-primary) 12%, transparent);
	color: var(--avg-color-primary);
}

/* Nested inside a Section card it falls outside .avg-guide-content's flex
   gap, so it needs its own breathing room from the content above. */
.avg-full-review__section .avg-guide-info-strip {
	margin-top: 24px;
}

/* Supporting facts under a section -- a tinted bar rather than cards, so it
   reads as a footnote to the block above instead of competing with it. */
.avg-guide-info-strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 18px 24px;
	padding: 18px 22px;
	border-radius: var(--avg-radius);
	background: color-mix(in srgb, var(--avg-color-primary) 6%, var(--avg-color-bg));
	border: 1px solid var(--avg-color-border);
}

/* Plain variant: the same icon/label pairs without the bar, for a checklist
   sitting beside a section's text instead of summarising below it. The margin
   reset undoes the nested-in-a-section spacing, which only the bar needs. */
.avg-guide-info-strip--plain,
.avg-full-review__section .avg-guide-info-strip--plain {
	padding: 0;
	margin-top: 0;
	background: none;
	border: none;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px 20px;
}

.avg-guide-info-strip--plain .avg-guide-info-strip__icon {
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: color-mix(in srgb, var(--avg-color-primary) 10%, transparent);
}

.avg-guide-info-strip--plain .avg-guide-info-strip__icon .avg-icon {
	width: 16px;
	height: 16px;
}

.avg-guide-info-strip--plain .avg-guide-info-strip__text {
	font-size: 0.85rem;
	font-weight: 600;
}

.avg-guide-info-strip__item {
	display: flex;
	align-items: center;
	gap: 10px;
}

.avg-guide-info-strip__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--avg-color-primary);
}

.avg-guide-info-strip__icon .avg-icon {
	width: 20px;
	height: 20px;
}

.avg-guide-info-strip__text {
	display: flex;
	flex-direction: column;
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--avg-color-text);
}

.avg-guide-info-strip__text small {
	font-size: 0.76rem;
	font-weight: 400;
	color: #475569;
}

.avg-guide-cards {
	display: grid;
	gap: 16px;
}

/* minmax(0, 1fr), not a bare 1fr: a bare fr track won't shrink below its
   content's min-content width, so a card with more text than its siblings
   (e.g. "VR aggregators" against "Free sites") pushes the whole grid wider
   than its container instead of wrapping -- confirmed at 768px, the third
   column running 81px past the grid's own right edge. */
.avg-guide-cards--cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.avg-guide-cards--cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.avg-guide-cards--cols-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 700px) {
	.avg-guide-cards--cols-2,
	.avg-guide-cards--cols-3,
	.avg-guide-cards--cols-4 {
		grid-template-columns: 1fr;
	}
}

.avg-guide-cards__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.avg-guide-cards__head {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Compact variant: icon in a tinted tile above a centred title, for rows of
   short "here are your options" cards rather than the fuller cards that carry
   a description and checklist. */
.avg-guide-cards--compact .avg-guide-cards__card {
	align-items: center;
	text-align: center;
	gap: 6px;
	padding: 14px 8px;
}

.avg-guide-cards--compact .avg-guide-cards__head {
	flex-direction: column;
	gap: 10px;
}

.avg-guide-cards--compact .avg-guide-cards__icon {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--avg-color-primary) 10%, transparent);
}

.avg-guide-cards--compact .avg-guide-cards__title {
	font-size: 0.92rem;
	color: var(--avg-color-text);
}

.avg-guide-cards--compact .avg-guide-cards__description {
	font-size: 0.8rem;
}

.avg-guide-cards__footer-btn {
	display: flex;
	width: fit-content;
	margin: 18px auto 0;
}

/* Centred is a deliberate desktop choice, but it reads as inconsistent next
   to the section 5 and checklist buttons beside it once those two learned to
   sit bottom-left in this range (see .avg-guide-section__btn and
   .avg-guide-checklist__btn above) -- all three should match. */
@media (min-width: 641px) and (max-width: 900px) {
	.avg-guide-cards__footer-btn {
		margin: 18px 0 0;
	}
}

.avg-guide-cards__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--avg-color-primary);
}

.avg-guide-cards__icon .avg-icon {
	width: 22px;
	height: 22px;
}

.avg-guide-cards__title {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--avg-color-primary);
}

.avg-guide-cards__list {
	margin: 2px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 7px;
	width: 100%;
}

.avg-guide-cards__list-item {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 0.84rem;
	line-height: 1.4;
	color: var(--avg-color-text);
}

.avg-guide-cards__list-item .avg-icon {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	margin-top: 2px;
}

.avg-guide-cards__list-item--pro .avg-icon {
	color: #16a34a;
}

/* Reuses the plus icon rotated into an X, as the pros/cons cards do. */
.avg-guide-cards__list-item--con .avg-icon {
	color: #dc2626;
	transform: rotate(45deg);
}

.avg-guide-cards__description {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--avg-color-text-muted);
}

.avg-guide-cards__btn {
	max-width: 100%;
	margin-top: auto;
	padding-top: 8px;
}

/* Comparison table + its explainer aside. The aside is fixed-width so the
   table keeps as much room as possible for its columns. */
.avg-guide-table-split {
	display: grid;
	grid-template-columns: 1fr 260px;
	gap: 20px;
	align-items: start;
	margin-top: 24px;
}

@media (max-width: 900px) {
	.avg-guide-table-split {
		grid-template-columns: 1fr;
	}
}

.avg-guide-table {
	min-width: 0;
}

.avg-guide-table__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.avg-guide-table__heading {
	margin: 0 0 4px;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--avg-color-text);
}

.avg-guide-table__intro {
	margin: 0;
	max-width: 420px;
	font-size: 0.78rem;
	color: #475569;
}

.avg-guide-table__legend {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 0.75rem;
	color: #475569;
}

.avg-guide-table__legend span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.avg-guide-table__legend .avg-icon {
	width: 13px;
	height: 13px;
}

.avg-guide-table__mark--yes {
	color: #16a34a;
}

.avg-guide-table__dash {
	color: #94a3b8;
}

/* Narrow screens scroll the grid rather than crushing the columns. */
.avg-guide-table__scroll {
	overflow-x: auto;
	border: 1px solid var(--avg-color-border);
	border-radius: var(--avg-radius);
}

.avg-guide-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.82rem;
}

.avg-guide-table th {
	text-align: left;
	font-weight: 700;
	color: var(--avg-color-text);
	background: var(--avg-color-bg);
	padding: 10px 14px;
	white-space: nowrap;
}

.avg-guide-table td {
	padding: 9px 14px;
	border-top: 1px solid var(--avg-color-border);
}

.avg-guide-table__label {
	color: var(--avg-color-text);
	white-space: nowrap;
}

.avg-guide-table__cell {
	text-align: center;
	width: 1%;
}

.avg-guide-table__cell .avg-icon {
	width: 15px;
	height: 15px;
	vertical-align: middle;
}

.avg-guide-table__cell--yes .avg-icon {
	color: #16a34a;
}

.avg-guide-table__cell--star .avg-icon {
	color: #f5b31b;
	fill: #f5b31b;
}

.avg-guide-table__btn {
	margin: 16px auto 0;
	display: inline-flex;
}

/* ==========================================================================
   Studio × Aggregator distribution table (the studio-distribution-table
   block, adultvrguide_render_studio_distribution_table() in functions.php)
   ==========================================================================
   Deliberately its own class family rather than reusing .avg-guide-table:
   that class is scoped to the guide flexible-content block, and this block
   renders in ordinary post content -- sharing one class risks a width- or
   context-specific rule written for one silently landing on the other,
   which has already happened twice this session with other shared classes.
   Same visual language (scroll wrapper, border, cell padding) on purpose;
   just kept independently editable. */
.avg-distribution-table {
	margin: 24px 0;
}

.avg-distribution-table__scroll {
	overflow-x: auto;
	border: 1px solid var(--avg-color-border);
	border-radius: var(--avg-radius);
}

.avg-distribution-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.85rem;
}

.avg-distribution-table th,
.avg-distribution-table td {
	padding: 10px 16px;
	white-space: nowrap;
}

.avg-distribution-table thead th {
	text-align: center;
	font-weight: 700;
	color: var(--avg-color-text);
	/* Same purple as the blockquote pull-quote marks (see main.css ~2950),
	   tinted down to a background-safe strength. */
	background: rgba(158, 151, 213, 0.15);
	border-bottom: 1px solid var(--avg-color-border);
}

/* The Studio column heading, top-left -- left-aligned like the row labels
   below it, where every other header cell (the Aggregators) is centred over
   a column of centred percentages. */
.avg-distribution-table thead th:first-child {
	text-align: left;
}

.avg-distribution-table thead th a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--avg-color-text);
	text-decoration: none;
}

.avg-distribution-table thead th a:hover {
	color: var(--avg-color-secondary);
}

.avg-distribution-table tbody th {
	text-align: left;
	font-weight: 600;
	background: var(--avg-color-surface);
}

.avg-distribution-table tbody th a {
	color: var(--avg-color-text);
	text-decoration: none;
}

.avg-distribution-table tbody th a:hover {
	color: var(--avg-color-secondary);
	text-decoration: underline;
}

.avg-distribution-table tbody tr:not(:last-child) th,
.avg-distribution-table tbody tr:not(:last-child) td {
	border-bottom: 1px solid var(--avg-color-border);
}

.avg-distribution-table__cell {
	text-align: center;
	font-weight: 700;
	color: var(--avg-color-text);
}

.avg-distribution-table__cell--empty {
	font-weight: 400;
	color: var(--avg-color-text-muted);
}

.avg-distribution-table__note {
	margin: 10px 4px 0;
	font-size: 0.78rem;
	color: var(--avg-color-text-muted);
}

.avg-guide-table > .avg-guide-table__btn {
	display: flex;
	width: fit-content;
}

.avg-guide-explainer {
	display: flex;
	flex-direction: column;
	padding: 20px;
	border-radius: var(--avg-radius);
	background: color-mix(in srgb, var(--avg-color-primary) 7%, var(--avg-color-surface));
	border: 1px solid var(--avg-color-border);
}

.avg-guide-explainer__heading {
	margin: 0 0 8px;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--avg-color-text);
}

.avg-guide-explainer__text {
	font-size: 0.82rem;
	line-height: 1.5;
	color: #475569;
}

.avg-guide-explainer__text p {
	margin: 0 0 8px;
}

/* Two classes so this beats ".avg-full-review__section img { max-width: 100% }",
   which is more specific than a single class and would otherwise size it. */
.avg-guide-explainer .avg-guide-explainer__image {
	display: block;
	width: 100%;
	max-width: 80%;
	height: auto;
	margin: 4px auto 10px;
}

.avg-guide-explainer__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: auto;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--avg-color-primary);
	text-decoration: none;
}

.avg-guide-explainer__link .avg-icon {
	width: 13px;
	height: 13px;
}

/* At 641-900px .avg-guide-table-split (the table + this card) has already
   collapsed to one column (@media max-width: 900px below), so this card
   goes from a narrow 260px sidebar to the full content width -- the image's
   existing max-width: 80% turns Foxxie into a ~500px image sitting under two
   lines of text. Small and beside the text instead, like the guide tip
   card's mascot. Phone (<=640px) keeps the stacked column layout: the card
   is narrow enough there that a small image beside the text would squeeze
   both. */
@media (min-width: 641px) and (max-width: 900px) {
	.avg-guide-explainer {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"heading image"
			"text    image"
			"link    image";
		align-items: center;
		column-gap: 20px;
	}

	.avg-guide-explainer__heading {
		grid-area: heading;
		align-self: end;
	}

	.avg-guide-explainer__text {
		grid-area: text;
	}

	.avg-guide-explainer__link {
		grid-area: link;
		align-self: start;
	}

	.avg-guide-explainer .avg-guide-explainer__image {
		grid-area: image;
		width: 110px;
		max-width: 110px;
		margin: 0;
		align-self: center;
	}
}

/* "This versus that" panel. Laid out as rows of [left | divider | right] so
   the two sides stay aligned regardless of how long either side's copy runs --
   two independent columns would drift apart. */
.avg-guide-versus {
	padding: 22px 24px 24px;
	border-radius: var(--avg-radius);
	background: color-mix(in srgb, var(--avg-color-primary) 5%, var(--avg-color-bg));
	border: 1px solid var(--avg-color-border);
}

.avg-guide-versus__heading {
	margin: 0 0 16px;
	text-align: center;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--avg-color-text);
}

.avg-guide-versus__row {
	display: grid;
	grid-template-columns: 1fr 52px 1fr;
	align-items: stretch;
}

.avg-guide-versus__row--heads {
	margin-bottom: 6px;
	text-align: center;
}

.avg-guide-versus__pill {
	display: block;
	padding: 7px 14px;
	border-radius: 8px;
	background: var(--avg-color-border);
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--avg-color-text);
}

.avg-guide-versus__pill--accent {
	background: var(--avg-color-primary);
	color: #fff;
}

/* The divider column carries a continuous hairline; the VS badge sits on it
   in the first row only. */
.avg-guide-versus__divider {
	position: relative;
}

.avg-guide-versus__divider::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--avg-color-border);
}

.avg-guide-versus__row--heads .avg-guide-versus__divider::before {
	display: none;
}

.avg-guide-versus__vs {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--avg-color-surface);
	border: 1px solid var(--avg-color-border);
	font-size: 0.68rem;
	font-weight: 800;
	color: var(--avg-color-text-muted);
}

.avg-guide-versus__cell {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
}

.avg-guide-versus__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	border-radius: 10px;
	background: var(--avg-color-surface);
	border: 1px solid var(--avg-color-border);
	color: var(--avg-color-text-muted);
}

.avg-guide-versus__icon .avg-icon {
	width: 18px;
	height: 18px;
}

.avg-guide-versus__icon-blank {
	font-size: 0.9rem;
	color: #94a3b8;
}

.avg-guide-versus__cell--accent .avg-guide-versus__icon {
	background: color-mix(in srgb, var(--avg-color-primary) 12%, var(--avg-color-surface));
	border-color: color-mix(in srgb, var(--avg-color-primary) 25%, transparent);
	color: var(--avg-color-primary);
}

.avg-guide-versus__copy {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.avg-guide-versus__copy strong {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--avg-color-text);
}

.avg-guide-versus__copy small {
	font-size: 0.78rem;
	line-height: 1.4;
	color: #475569;
}

@media (max-width: 640px) {
	.avg-guide-versus__row {
		grid-template-columns: 1fr;
	}

	.avg-guide-versus__divider {
		display: none;
	}
}

/* Before/during/after summary band. Sits outside the numbered section cards,
   so it spans the full content column and carries its own tint. */
.avg-guide-checklist {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 26px;
	padding: 24px 28px;
	border-radius: var(--avg-radius);
	background: color-mix(in srgb, var(--avg-color-primary) 9%, var(--avg-color-bg));
	border: 1px solid var(--avg-color-border);
}

/* The mascot leans out of the band's top-left rather than sitting in flow,
   so the columns keep the full width to divide between them. */
.avg-guide-checklist--has-mascot {
	padding-left: 150px;
}

.avg-guide-checklist__mascot {
	position: absolute;
	left: 6px;
	bottom: 0;
	width: 140px;
	height: auto;
	pointer-events: none;
}

.avg-guide-checklist__intro {
	flex: 0 0 210px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.avg-guide-checklist__heading {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 0.98rem;
	font-weight: 700;
	color: var(--avg-color-text);
}

.avg-guide-checklist__heading .avg-icon {
	width: 17px;
	height: 17px;
	color: var(--avg-color-primary);
}

.avg-guide-checklist__text {
	margin: 0;
	font-size: 0.8rem;
	line-height: 1.45;
	color: #475569;
}

.avg-guide-checklist__btn {
	margin-top: 6px;
	background: var(--avg-color-surface);
}

.avg-guide-checklist__col {
	flex: 1;
	min-width: 0;
	padding-left: 26px;
	border-left: 1px solid var(--avg-color-border);
}

.avg-guide-checklist__col-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}

.avg-guide-checklist__col-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--avg-color-surface);
	color: var(--avg-color-primary);
}

.avg-guide-checklist__col-icon .avg-icon {
	width: 17px;
	height: 17px;
}

.avg-guide-checklist__col-title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--avg-color-primary);
}

.avg-guide-checklist__col ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.avg-guide-checklist__col li {
	font-size: 0.8rem;
	line-height: 1.45;
	color: #475569;
}

/* Switches from flex to grid: flex-wrap only wraps an item onto a new line
   when it genuinely doesn't fit, and .col's flex: 1 (flex-basis: 0%) lets
   the three columns shrink as far as needed to make room -- so the button,
   placed after them with `order`, kept landing squeezed onto their row
   instead of wrapping to its own line below (confirmed at 768px: columns
   crushed to 40px so the button could fit beside them). Grid's explicit
   rows don't have that "always technically fits" escape hatch. */
@media (max-width: 900px) {
	.avg-guide-checklist {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
	}

	.avg-guide-checklist--has-mascot {
		padding-left: 28px;
	}

	.avg-guide-checklist__mascot {
		display: none;
	}

	/* The "View the full checklist" button sits inside .intro, right after
	   the text, so on a wide screen (where intro is a narrow side column) it
	   reads fine as "heading, text, CTA" beside the Before/During/After
	   columns. Once .intro goes full-width above those columns, that same
	   position puts the button between the text and the columns instead of
	   after them. display: contents promotes intro's children (heading,
	   text, button) to be direct grid items alongside the three .col
	   columns, so each can be placed independently. */
	.avg-guide-checklist__intro {
		display: contents;
	}

	/* Full-width span forces each onto its own row: an item spanning every
	   column can't share a row with anything else, and whatever comes after
	   it starts fresh on the next row -- heading (row 1), text (row 2), then
	   the three .col columns (not spanning, so they fill row 3 side by side,
	   one per column), then the button (row 4, since row 3 is already full).
	   Row order follows placement order, not DOM order: without `order` the
	   button -- before the columns in the markup, nested inside .intro --
	   still gets placed into row 3 ahead of them, same bug as before just in
	   its own row instead of squeezed into theirs. `order` moves it after
	   the (default order: 0) columns in the placement sequence; the span
	   above puts it on its own row once there. */
	.avg-guide-checklist__heading,
	.avg-guide-checklist__text,
	.avg-guide-checklist__btn {
		grid-column: 1 / -1;
	}

	/* Grid items default to justify-items: stretch on their inline axis --
	   same fix as the guide section button above, for the same reason. */
	.avg-guide-checklist__btn {
		order: 1;
		justify-self: start;
	}
}

@media (max-width: 600px) {
	.avg-guide-checklist {
		grid-template-columns: 1fr;
	}

	.avg-guide-checklist__col {
		padding-left: 0;
		border-left: none;
	}
}

.avg-guide-cta {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 28px 32px;
	border-radius: var(--avg-radius);
	background: linear-gradient(135deg, var(--avg-color-primary), color-mix(in srgb, var(--avg-color-primary) 60%, var(--avg-color-secondary)));
	color: #fff;
}

/* Light variant: a plain card that lets the filled button carry the emphasis,
   for a closing CTA that shouldn't shout as loudly as a mid-page one. */
.avg-guide-cta--light {
	background: var(--avg-color-surface);
	border: 1px solid var(--avg-color-border);
	box-shadow: var(--avg-shadow);
	color: var(--avg-color-text);
}

.avg-guide-cta--light .avg-guide-cta__icon {
	background: color-mix(in srgb, var(--avg-color-primary) 12%, transparent);
}

.avg-guide-cta--light .avg-guide-cta__icon .avg-icon {
	color: var(--avg-color-primary);
}

.avg-guide-cta--light .avg-guide-cta__text {
	color: #475569;
	opacity: 1;
}

.avg-guide-cta--light .avg-guide-cta__btn.avg-btn--primary {
	background: var(--avg-color-primary);
	color: #fff;
}

.avg-guide-cta--light .avg-guide-cta__btn.avg-btn--primary:hover {
	background: var(--avg-color-primary-dark);
}

.avg-guide-cta__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.16);
}

.avg-guide-cta__icon .avg-icon {
	width: 24px;
	height: 24px;
	color: #fff;
}

.avg-guide-cta__body {
	flex: 1;
	min-width: 0;
}

.avg-guide-cta__heading {
	margin: 0 0 4px;
	font-size: 1.15rem;
	font-weight: 800;
}

.avg-guide-cta__text {
	margin: 0;
	font-size: 0.9rem;
	opacity: 0.9;
}

.avg-guide-cta__btn.avg-btn--primary {
	flex-shrink: 0;
	background: #fff;
	color: var(--avg-color-primary);
}

.avg-guide-cta__btn.avg-btn--primary:hover {
	background: rgba(255, 255, 255, 0.85);
}

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

	.avg-guide-sidebar {
		position: static;
	}
}

@media (max-width: 600px) {
	.avg-guide-cta {
		flex-direction: column;
		text-align: center;
	}
}

/* Site sections */
.avg-section {
	padding: 0 24px;
	margin-bottom: 16px;
}

.avg-section h2 {
	margin: 0 0 20px;
}

/* Section heading with a link pushed to the far right, e.g. "View all guides".
   The heading gives up its own bottom margin so the row keeps the same gap. */
.avg-section__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.avg-section__header h2 {
	margin: 0;
}

.avg-section__header-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--avg-color-primary);
	text-decoration: none;
}

.avg-section__header-link .avg-icon {
	width: 15px;
	height: 15px;
	transition: transform 0.18s ease;
}

.avg-section__header-link:hover .avg-icon {
	transform: translateX(3px);
}

.avg-why-trust__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.avg-why-trust__icon {
	width: 28px;
	height: 28px;
	margin-bottom: 10px;
}

.avg-why-trust__item strong {
	display: block;
	margin-bottom: 6px;
}

.avg-why-trust__item p {
	margin: 0;
	font-size: 0.85rem;
	color: var(--avg-color-text-muted);
}

@media (max-width: 800px) {
	.avg-why-trust__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Footer */
#site-footer {
	position: relative;
	background: #0f172a;
	color: #94a3b8;
	overflow: hidden;
}

.avg-footer__inner {
	display: grid;
	grid-template-columns: 1.7fr 0.85fr 0.85fr 0.85fr 2.5fr;
	grid-template-areas:
		"brand explore resources legal badge";
	gap: 40px 28px;
	padding: 56px 24px 44px;
	align-items: start;
}

/* Brand + mascot */
.avg-footer__brand {
	grid-area: brand;
	display: flex;
	align-items: flex-end;
	gap: 30px;
}

.avg-footer__fox {
	width: auto;
	height: 166px;
	flex-shrink: 0;
	align-self: flex-end;
}

.avg-footer__brand-text {
	padding-bottom: 6px;
}

.avg-footer__brand-text p {
	font-size: 0.9rem;
	line-height: 1.6;
	margin: 14px 0 18px;
	max-width: 34ch;
	color: #94a3b8;
}

.avg-footer__social {
	display: flex;
	gap: 10px;
}

.avg-footer__social {
	gap: 16px;
}

.avg-footer__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.avg-footer__social a:hover {
	color: var(--avg-color-primary);
}

.avg-footer__social .avg-icon {
	width: 20px;
	height: 20px;
	color: inherit;
	fill: currentColor;
	stroke: none;
}

/* Link columns */
.avg-footer__col--explore { grid-area: explore; }
.avg-footer__col--resources { grid-area: resources; }
.avg-footer__col--legal { grid-area: legal; }

.avg-footer__col h4 {
	color: #fff;
	margin: 0 0 18px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.avg-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.avg-footer__col a {
	color: #94a3b8;
	text-decoration: none;
	font-size: 0.875rem;
}

.avg-footer__col a:hover {
	color: #fff;
}

/* Approved trust badge */
.avg-footer__badge {
	grid-area: badge;
	align-self: center;
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	background: #1e293b;
	border: 1px solid #334155;
	border-radius: 16px;
	padding: 14px 14px 14px 18px;
	min-height: 88px;
}

.avg-footer__badge-check {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.avg-footer__badge-check .avg-icon {
	width: 44px;
	height: 44px;
}

/* Same shield as the hero "How We Score" card, but filled with the primary
   colour and a white checkmark inside. */
.avg-footer__badge-check .avg-icon path:first-child {
	fill: var(--avg-color-primary);
	stroke: var(--avg-color-primary);
}

.avg-footer__badge-check .avg-icon path:last-child {
	fill: none;
	stroke: #fff;
	stroke-width: 2;
}

.avg-footer__badge-text {
	flex: 1;
}

.avg-footer__badge-text strong {
	display: block;
	color: #fff;
	font-size: 0.95rem;
	margin-bottom: 4px;
	white-space: nowrap;
}

.avg-footer__badge-text p {
	margin: 0;
	font-size: 0.8rem;
	line-height: 1.5;
	color: #94a3b8;
}

.avg-footer__badge-fox {
	width: 138px;
	height: auto;
	flex-shrink: 0;
	align-self: flex-end;
	margin: -26px -6px -16px -8px;
	/* Visual-only nudge toward the text: transform doesn't change the flex
	   layout, so the badge text keeps its nicer line breaks. */
	transform: translateX(-12px);
}

/* Bottom bar */
.avg-footer__bottom {
	padding: 18px 24px;
	border-top: 1px solid #1e293b;
	font-size: 0.8rem;
}

/*
 * Larger tablets (901-1200px, e.g. a 1024px landscape iPad): the same 2-column
 * grid used to start at 1000px, which put a 1024px-wide screen one pixel into
 * the *desktop* 5-column row instead -- five columns of ~100px each, cramped
 * enough that every column's text wrapped and the row heights went ragged
 * (132/216/168px). Widened to 1200px, matching the homepage filters-drawer
 * breakpoint fix elsewhere in this file for the same "landscape tablet is
 * wider than a phone but not as wide as desktop" reason.
 *
 * A first pass kept the existing 2-column grid (explore+resources one row,
 * legal+badge the next) and only hid the badge fox -- still wrong on its own
 * terms, each column a fixed half of the row, far wider than the link text
 * inside it. A second pass put explore/resources/legal in one content-sized
 * row beside the badge. The user's actual preference, from a screenshot at
 * 1024px: drop the "Foxxie Approved" badge entirely at this width (it's
 * already the least essential piece -- a trust blurb, not navigation) and
 * put the three link columns beside the brand block instead of below it, one
 * single row: Foxxie + logo/tagline/social, then Explore, Resources, Legal.
 */
@media (min-width: 901px) and (max-width: 1200px) {
	.avg-footer__inner {
		grid-template-columns: max-content repeat(3, minmax(0, max-content));
		grid-template-areas: "brand explore resources legal";
		align-items: start;
		gap: 36px 40px;
	}

	.avg-footer__badge {
		display: none;
	}
}

@media (max-width: 900px) {
	/*
	 * Brand only. Stacked, the three link columns and the badge made the footer
	 * far taller than a phone or narrow tablet screen, and every link in
	 * it is already in the header's menu, which the panel now carries (see
	 * .avg-header__panel-links). What is left is the logo, the tagline, one
	 * Foxxie, the social icons, the rule, and the copyright. Matches the
	 * header's own hamburger-menu breakpoint, so the switch to a panel and the
	 * footer simplifying happen at the same width.
	 */
	.avg-footer__inner {
		grid-template-columns: 1fr;
		grid-template-areas: "brand";
		padding: 36px 24px 32px;
	}

	.avg-footer__col,
	.avg-footer__badge {
		display: none;
	}

	/*
	 * Beside Foxxie rather than stacked under him. Measured: the text column
	 * (logo, tagline, social row) has 199px to work with next to a 108px-wide
	 * Foxxie, and at that width it comes to 159px tall -- shorter than
	 * Foxxie's own 166px -- so the row is no taller than Foxxie was on its
	 * own, against roughly 300px stacked. The tagline goes from two lines to
	 * three; nothing in the column is close to forcing the row wider than it
	 * has. No override needed here: the base .avg-footer__brand rule is
	 * already row/flex-end, the same layout desktop uses -- this block used to
	 * force it to a column specifically for the width this fixes.
	 */
}

@media (max-width: 800px) {
	.avg-review-card__summary {
		grid-template-columns: 1fr;
	}

	.avg-review-card__pricing,
	.avg-trust-score {
		text-align: left;
	}

	.avg-pros-cons {
		grid-template-columns: 1fr;
	}
}

/* Lightbox */
.avg-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.78);
	display: none;
	align-items: center;
	justify-content: center;
	padding: 40px;
	z-index: 1000;
}

.avg-lightbox.is-open {
	display: flex;
}

.avg-lightbox__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	max-width: 90vw;
	max-height: 90vh;
}

.avg-lightbox__figure {
	margin: 0;
	max-width: 90vw;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.avg-lightbox__img {
	max-width: 90vw;
	max-height: 65vh;
	object-fit: contain;
	border-radius: 8px;
}

.avg-lightbox__caption {
	color: #fff;
	font-size: 0.85rem;
	margin-top: 12px;
	text-align: center;
}

.avg-lightbox__caption:empty {
	display: none;
}

.avg-lightbox__thumbs {
	gap: 8px;
	overflow-x: auto;
	max-width: 90vw;
	padding: 4px 2px;
}

.avg-lightbox__thumbs:not([hidden]) {
	display: flex;
}

.avg-lightbox__thumb {
	flex-shrink: 0;
	width: 64px;
	height: 44px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 6px;
	overflow: hidden;
	background: none;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.15s, border-color 0.15s;
}

.avg-lightbox__thumb:hover {
	opacity: 0.85;
}

.avg-lightbox__thumb.is-active {
	opacity: 1;
	border-color: #fff;
}

.avg-lightbox__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.avg-lightbox__close {
	position: absolute;
	top: 20px;
	right: 24px;
	background: none;
	border: none;
	color: #fff;
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
	z-index: 1;
}

.avg-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
}

.avg-lightbox__nav:hover {
	background: rgba(255, 255, 255, 0.24);
}

.avg-lightbox__nav[hidden] {
	display: none;
}

.avg-lightbox__nav--prev {
	left: 24px;
}

.avg-lightbox__nav--next {
	right: 24px;
}

/* --- Community Rating / user reviews --------------------------------- */
.avg-community__layout {
	display: grid;
	grid-template-columns: 220px auto 1fr;
	gap: 24px;
	align-items: stretch;
}

.avg-community__summary {
	text-align: center;
	padding: 8px 8px;
}

/* Vertical "or" divider between the rating summary and the review column */
.avg-community__divider {
	position: relative;
	width: 1px;
	background: var(--avg-color-border);
	justify-self: center;
}

.avg-community__or {
	position: absolute;
	top: 34px;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--avg-color-surface);
	border: 1px solid var(--avg-color-border);
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--avg-color-text-muted);
}

.avg-community__vote {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--avg-color-border);
}

.avg-community__vote .avg-user-rating-card__vote {
	margin: 0;
	padding: 0;
	border: none;
}

.avg-community__vote .avg-user-rating-card__vote-label {
	font-weight: 600;
	color: var(--avg-color-text);
	margin-bottom: 8px;
}

.avg-community__score {
	display: block;
	font-size: 2.6rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--avg-color-text);
}

.avg-community__stars {
	display: flex;
	justify-content: center;
	gap: 3px;
	margin: 8px 0;
}

.avg-community__stars .avg-star {
	width: 24px;
	height: 24px;
}

.avg-community__count,
.avg-community__empty {
	display: block;
	font-size: 0.85rem;
	color: var(--avg-color-text-muted);
}

.avg-community__main {
	padding-left: 16px;
}

.avg-community__actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.avg-community__write-btn {
	flex-shrink: 0;
}

.avg-community__actions-note {
	font-size: 0.9rem;
	color: var(--avg-color-text-muted);
}

.avg-community__confirm {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--avg-color-success);
}

/* Write-a-review form */
.avg-review-form {
	background: var(--avg-color-bg);
	border: 1px solid var(--avg-color-border);
	border-radius: var(--avg-radius);
	padding: 20px;
	margin-bottom: 24px;
}

.avg-review-form__row {
	margin-bottom: 14px;
}

.avg-review-form__label {
	display: block;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--avg-color-text-muted);
	margin-bottom: 6px;
}

.avg-review-form__stars {
	display: flex;
	gap: 4px;
}

.avg-review-form__input,
.avg-review-form__textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--avg-color-border);
	border-radius: 8px;
	font: inherit;
	background: var(--avg-color-surface);
	color: var(--avg-color-text);
}

.avg-review-form__textarea {
	resize: vertical;
}

.avg-review-form__input:focus,
.avg-review-form__textarea:focus {
	outline: none;
	border-color: var(--avg-color-primary);
}

.avg-review-form__avatars {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.avg-review-form__avatar {
	width: 48px;
	height: 48px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 50%;
	overflow: hidden;
	cursor: pointer;
	background: none;
	opacity: 0.75;
	transition: opacity 0.15s, border-color 0.15s;
}

.avg-review-form__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.avg-review-form__avatar:hover {
	opacity: 1;
}

.avg-review-form__avatar.is-selected {
	opacity: 1;
	border-color: var(--avg-color-primary);
}

/* Visually-hidden honeypot */
.avg-review-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.avg-review-form__footer {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.avg-review-form__message {
	font-size: 0.85rem;
	color: var(--avg-color-success);
}

.avg-review-form__message.is-error {
	color: #dc2626;
}

/* Recent reviews list */
.avg-community__reviews-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.avg-community__reviews-head h3 {
	margin: 0;
	font-size: 1.05rem;
}

.avg-community__sort:not([hidden]) {
	font-size: 0.8rem;
	color: var(--avg-color-text-muted);
	display: flex;
	align-items: center;
	gap: 6px;
}

.avg-community__sort select {
	font: inherit;
	font-size: 0.8rem;
	padding: 4px 6px;
	border: 1px solid var(--avg-color-border);
	border-radius: 6px;
	background: var(--avg-color-surface);
}

.avg-review-item {
	display: flex;
	gap: 12px;
	padding: 14px 0;
	border-top: 1px solid var(--avg-color-border);
}

.avg-review-item:first-child {
	border-top: none;
}

.avg-review-item__avatar {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	overflow: hidden;
}

.avg-review-item__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.avg-review-item__avatar-initial {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: var(--avg-color-primary);
	color: #fff;
	font-weight: 700;
	font-size: 1.1rem;
}

.avg-review-item__body {
	flex: 1;
	min-width: 0;
}

.avg-review-item__head {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 4px;
}

.avg-review-item__author {
	font-weight: 600;
}

.avg-review-item__stars {
	display: inline-flex;
	gap: 2px;
}

.avg-review-item__stars .avg-star {
	width: 16px;
	height: 16px;
}

.avg-review-item__time {
	font-size: 0.78rem;
	color: var(--avg-color-text-muted);
}

.avg-review-item__text {
	margin: 0;
	color: #475569;
}

.avg-community__no-reviews {
	color: var(--avg-color-text-muted);
}

.avg-community__load-more {
	margin-top: 16px;
}

/* .avg-btn sets display:inline-flex unconditionally, which would beat the
   [hidden] attribute -- keep the button truly hidden when there's nothing more. */
.avg-community__load-more[hidden] {
	display: none;
}

@media (max-width: 700px) {
	.avg-community__layout {
		grid-template-columns: 1fr;
	}

	.avg-community__summary {
		border-bottom: 1px solid var(--avg-color-border);
		padding: 0 0 16px;
	}

	.avg-community__divider {
		display: none;
	}

	.avg-community__main {
		padding-left: 0;
	}
}

/* ---------------------------------------------------------------- 404 --- */

.avg-404__hero {
	position: relative;
	overflow: hidden;
	margin-bottom: 48px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--avg-color-primary) 7%, var(--avg-color-bg)), var(--avg-color-bg));
}

/* The scenery is decorative: it sits behind the content and never intercepts
   clicks. Tints derive from the primary colour so it follows Site Settings. */
.avg-404__scenery {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.avg-404__scenery-sun {
	fill: color-mix(in srgb, var(--avg-color-primary) 7%, transparent);
}

.avg-404__scenery-far {
	fill: color-mix(in srgb, var(--avg-color-primary) 13%, transparent);
}

.avg-404__scenery-trees path {
	fill: color-mix(in srgb, var(--avg-color-primary) 22%, transparent);
}

.avg-404__scenery-near {
	fill: color-mix(in srgb, var(--avg-color-primary) 18%, transparent);
}

.avg-404__hero-inner {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 420px;
	gap: 32px;
	align-items: center;
	padding-top: 56px;
	padding-bottom: 56px;
}

.avg-404__code {
	display: block;
	font-size: 6rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--avg-color-primary);
}

.avg-404__title {
	margin: 4px 0 12px;
	font-size: 2.4rem;
	font-weight: 800;
	color: var(--avg-color-text);
}

.avg-404__lead {
	max-width: 380px;
	margin: 0 0 14px;
	font-size: 1.02rem;
	color: #475569;
}

.avg-404__accent {
	margin: 0 0 26px;
	font-size: 1.02rem;
	font-weight: 700;
	color: var(--avg-color-primary);
}

.avg-404__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.avg-404__btn {
	min-width: 260px;
	justify-content: flex-start;
	gap: 10px;
	padding: 13px 20px;
	font-size: 0.92rem;
}

.avg-icon.avg-404__btn-icon {
	color: var(--avg-color-primary);
}

.avg-404__mascot img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 900px) {
	.avg-404__hero-inner {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.avg-404__lead {
		margin-left: auto;
		margin-right: auto;
	}

	.avg-404__actions {
		align-items: center;
	}

	.avg-404__mascot {
		max-width: 300px;
		margin: 0 auto;
	}
}

/* "Maybe one of these can help?" */
.avg-404__help {
	margin-bottom: 40px;
}

.avg-404__help-heading {
	margin: 0 0 22px;
	text-align: center;
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--avg-color-text);
}

.avg-404__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 18px;
}

.avg-404__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	padding: 24px 18px 18px;
	text-decoration: none;
	color: inherit;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.avg-404__card:hover {
	transform: translateY(-3px);
	border-color: var(--avg-color-primary);
	box-shadow: 0 12px 20px -10px color-mix(in srgb, var(--avg-color-primary) 55%, transparent);
}

.avg-404__card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--avg-color-primary);
	margin-bottom: 2px;
}

.avg-404__card-icon .avg-icon {
	width: 32px;
	height: 32px;
}

.avg-404__card-title {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--avg-color-text);
}

.avg-404__card-text {
	font-size: 0.84rem;
	line-height: 1.45;
	color: #475569;
}

.avg-404__card-arrow {
	margin-top: 6px;
	color: var(--avg-color-primary);
}

.avg-404__card-arrow .avg-icon {
	width: 18px;
	height: 18px;
	transition: transform 0.18s ease;
}

.avg-404__card:hover .avg-404__card-arrow .avg-icon {
	transform: translateX(4px);
}

/* "Still lost?" band */
.avg-404__still {
	margin-bottom: 60px;
}

.avg-404__still-inner {
	position: relative;
	display: flex;
	align-items: center;
	gap: 22px;
	padding: 20px 26px;
	border-radius: var(--avg-radius);
	background: color-mix(in srgb, var(--avg-color-primary) 8%, var(--avg-color-bg));
	border: 1px solid var(--avg-color-border);
}

/* Like the checklist band's mascot: positioned rather than in flow, so the
   text and search field divide the full width between them. */
.avg-404__still-inner--has-mascot {
	padding-left: 150px;
}

.avg-404__still-mascot {
	position: absolute;
	left: 10px;
	bottom: 0;
	width: 130px;
	height: auto;
	pointer-events: none;
}

.avg-404__still-body {
	flex: 1;
	min-width: 0;
}

.avg-404__still-body h3 {
	margin: 0 0 4px;
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--avg-color-text);
}

.avg-404__still-body p {
	margin: 0;
	font-size: 0.86rem;
	line-height: 1.45;
	color: #475569;
}

.avg-404__search {
	position: relative;
	flex: 0 0 300px;
}

.avg-404__search-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.avg-icon.avg-404__search-icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 17px;
	height: 17px;
	color: var(--avg-color-text-muted);
	pointer-events: none;
}

.avg-404__search input {
	width: 100%;
	padding: 12px 16px 12px 40px;
	border-radius: 999px;
	border: 1px solid var(--avg-color-border);
	background: var(--avg-color-surface);
	font-size: 0.88rem;
	color: var(--avg-color-text);
}

.avg-404__search input:focus {
	outline: none;
	border-color: var(--avg-color-primary);
}

@media (max-width: 800px) {
	.avg-404__still-inner,
	.avg-404__still-inner--has-mascot {
		flex-wrap: wrap;
		padding-left: 26px;
		text-align: center;
	}

	.avg-404__still-mascot {
		display: none;
	}

	.avg-404__search {
		flex-basis: 100%;
	}
}

/* Inter is loaded on the 404 the same way it is on guides; the stack falls
   back to the body font wherever it isn't available. */
.avg-404 {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.avg-404__code {
	letter-spacing: -0.05em;
}

/* On the scenery a transparent outline button all but disappears, so this one
   gets a solid ground of its own. */
.avg-404__btn.avg-btn--secondary {
	background: var(--avg-color-surface);
	border-color: color-mix(in srgb, var(--avg-color-primary) 35%, var(--avg-color-border));
}

.avg-404__btn.avg-btn--secondary:hover {
	border-color: var(--avg-color-primary);
}

/* Starts just past the end of the "find your way back!" line and sweeps
   across to the mascot. */
.avg-404__trail {
	position: absolute;
	left: 30%;
	bottom: 186px;
	width: 300px;
	height: 162px;
	color: color-mix(in srgb, var(--avg-color-primary) 55%, transparent);
	pointer-events: none;
}

.avg-404__mascot {
	position: relative;
}

/* The artwork's own contact shadow is very faint, which leaves him floating
   over the scenery -- this grounds him without touching the asset. */
.avg-404__mascot::before {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 2%;
	transform: translateX(-50%);
	width: 58%;
	height: 30px;
	border-radius: 50%;
	background: radial-gradient(ellipse at center, color-mix(in srgb, var(--avg-color-primary) 42%, transparent) 0%, color-mix(in srgb, var(--avg-color-primary) 18%, transparent) 55%, transparent 76%);
}

.avg-404__mascot img {
	position: relative;
	z-index: 1;
}

/* Pulled toward the text so the pair reads as one scene rather than two
   things at opposite edges. Only while they sit side by side -- below 900px
   the mascot is centred under the text instead. */
@media (min-width: 901px) {
	.avg-404__mascot {
		transform: translateX(-52px);
	}

	/* Extra breathing room from the left edge; the container's own 24px left
	   the headline almost touching it. */
	.avg-404__hero-inner {
		padding-left: 88px;
	}

	/* The trail starts just past the copy, so it has to travel the same
	   distance the copy just did. */
	.avg-404__trail {
		left: calc(30% + 64px);
	}
}

/* Sits over the goggles' centre line rather than the image's, so it reads as
   being above his head. */
.avg-404__mascot-q {
	position: absolute;
	left: 52%;
	top: -2%;
	transform: translateX(-50%);
	font-size: 3.4rem;
	font-weight: 800;
	line-height: 1;
	color: var(--avg-color-primary);
}

@media (max-width: 1100px) {
	.avg-404__trail {
		display: none;
	}
}

@media (max-width: 900px) {
	.avg-404__mascot-q {
		font-size: 2.6rem;
	}
}

/* ------------------------------------------------- Work in Progress --- */

.avg-wip {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.avg-wip__inner {
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: 40px;
	align-items: center;
	padding-top: 48px;
	padding-bottom: 24px;
}

.avg-wip__title {
	margin: 0 0 20px;
	font-size: 4.2rem;
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.035em;
}

.avg-wip__title-plain,
.avg-wip__title-accent {
	display: block;
}

.avg-wip__title-plain {
	color: var(--avg-color-text);
}

.avg-wip__title-accent {
	color: var(--avg-color-primary);
}

.avg-wip__intro p {
	max-width: 420px;
	margin: 0 0 26px;
	font-size: 1.02rem;
	line-height: 1.6;
	color: #475569;
}

.avg-wip__wait {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	max-width: 420px;
	margin-bottom: 26px;
	padding: 18px 20px;
	border-radius: var(--avg-radius);
	background: color-mix(in srgb, var(--avg-color-primary) 8%, var(--avg-color-bg));
}

.avg-wip__wait-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--avg-color-surface);
	color: var(--avg-color-primary);
}

.avg-wip__wait-icon .avg-icon {
	width: 20px;
	height: 20px;
}

.avg-wip__wait strong {
	display: block;
	margin-bottom: 2px;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--avg-color-primary);
}

.avg-wip__wait p {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.5;
	color: #475569;
}

.avg-wip__btn {
	gap: 10px;
	padding: 15px 26px;
	font-size: 1rem;
}

/* Scene: the drawn backdrop sits behind the supplied artwork. */
.avg-wip__scene {
	position: relative;
}

.avg-wip__doodles {
	position: absolute;
	inset: -6% -4% 0 0;
	width: 108%;
	height: 106%;
	pointer-events: none;
}

.avg-wip__blob {
	fill: color-mix(in srgb, var(--avg-color-primary) 7%, transparent);
}

.avg-wip__doodle-lines path,
.avg-wip__doodle-lines circle {
	fill: none;
	stroke: color-mix(in srgb, var(--avg-color-primary) 26%, transparent);
	stroke-width: 2.4;
	stroke-linecap: round;
}

.avg-wip__doodle-gears use {
	fill: none;
	stroke: color-mix(in srgb, var(--avg-color-primary) 20%, transparent);
	stroke-width: 2;
	stroke-linejoin: round;
}

.avg-wip__fox {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
}

/* Footnote strip */
.avg-wip__footnote {
	padding-bottom: 56px;
}

.avg-wip__footnote-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px 12px;
	padding: 16px 24px;
	border-radius: var(--avg-radius);
	background: var(--avg-color-surface);
	border: 1px solid var(--avg-color-border);
	font-size: 0.92rem;
	color: #475569;
}

.avg-wip__footnote-inner strong {
	color: var(--avg-color-text);
	font-weight: 700;
}

.avg-wip__footnote-icon {
	display: flex;
	color: var(--avg-color-primary);
}

.avg-wip__footnote-icon .avg-icon {
	width: 20px;
	height: 20px;
}

@media (max-width: 1000px) {
	.avg-wip__inner {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.avg-wip__title {
		font-size: 3.2rem;
	}

	.avg-wip__intro p,
	.avg-wip__wait {
		max-width: none;
	}
}

.avg-wip__footnote-heart {
	display: flex;
	color: var(--avg-color-primary);
}

.avg-wip__footnote-heart .avg-icon {
	width: 17px;
	height: 17px;
}

/* ------------------------------------------------------- Blog post --- */

.avg-post__hero {
	padding-top: 8px;
	padding-bottom: 28px;
}

/*
 * width: 100% pins width as the dimension the aspect-ratio below is computed
 * from. Without it, once min-height's 300px floor exceeds what the aspect
 * ratio would give from the container's own width -- true below 700px on the
 * 21:9 desktop ratio, below 533px on the 16:9 one the ≤900px block switches
 * to -- the browser flips direction and derives WIDTH from that 300px height
 * instead, ignoring the container entirely. On a 327px-wide phone card that
 * produced a 533px-wide hero, bleeding 206px past the card's rounded edge.
 * With width pinned, min-height still floors the height on narrow screens
 * (so the banner doesn't go wafer-thin) but can no longer push width past
 * 100%.
 */
.avg-post__hero-media {
	position: relative;
	display: flex;
	align-items: flex-end;
	width: 100%;
	border-radius: var(--avg-radius);
	overflow: hidden;
	min-height: 300px;
	background: color-mix(in srgb, var(--avg-color-primary) 9%, var(--avg-color-bg));
	border: 1px solid var(--avg-color-border);
}

.avg-post__hero-media--image {
	aspect-ratio: 21 / 9;
	border: none;
}

/* Direct child only: the featured image is the hero's own child, while the
   author photo sits deeper inside the text block. Without the ">" that photo
   was also stretched to fill the whole hero. */
.avg-post__hero-media--image > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Readability over an unknown photo needs some insurance, but darkening the
   whole frame costs the picture. Two lighter measures do the same work: a
   scrim confined to the lower third, plus a shadow on the type itself -- so
   the top half of the image stays untouched. */
.avg-post__hero-media--image::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(9, 12, 28, 0.72) 0%, rgba(9, 12, 28, 0.34) 22%, rgba(9, 12, 28, 0) 52%);
}

.avg-post__hero-media--image .avg-post__title {
	text-shadow: 0 2px 18px rgba(9, 12, 28, 0.65), 0 1px 3px rgba(9, 12, 28, 0.45);
}

.avg-post__hero-media--image .avg-post__meta {
	text-shadow: 0 1px 10px rgba(9, 12, 28, 0.6);
}

.avg-post__hero-body {
	position: relative;
	z-index: 1;
	max-width: 820px;
	padding: 32px 36px;
}

/* Over a photo everything flips to light type; without one the block keeps the
   normal palette. */
.avg-post__hero-media--image .avg-post__title,
.avg-post__hero-media--image .avg-post__meta,
.avg-post__hero-media--image .avg-post__author-text strong,
.avg-post__hero-media--image .avg-post__author-text small,
.avg-post__hero-media--image .avg-post__meta-item {
	color: #fff;
}

.avg-post__hero-media--image .avg-post__meta,
.avg-post__hero-media--image .avg-post__author-text small {
	color: rgba(255, 255, 255, 0.82);
}

.avg-post__hero-media--image .avg-post__meta-item .avg-icon {
	color: rgba(255, 255, 255, 0.9);
}

.avg-post__hero-media--image .avg-post__cat {
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
}

.avg-post__hero-media--image .avg-post__author-initial {
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
}

.avg-post__cats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}

.avg-post__cat {
	padding: 4px 12px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--avg-color-primary) 12%, transparent);
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--avg-color-primary);
	text-decoration: none;
}

.avg-post__title {
	margin: 0 0 18px;
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: var(--avg-color-text);
}

.avg-post__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px 24px;
	font-size: 0.85rem;
	color: #475569;
}

.avg-post__author {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Two classes so the size holds regardless of what else styles images inside
   the hero. */
.avg-post__author .avg-post__author-photo,
.avg-post__author .avg-post__author-initial {
	position: static;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	flex-shrink: 0;
	object-fit: cover;
}

.avg-post__author-initial {
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--avg-color-primary) 14%, transparent);
	color: var(--avg-color-primary);
	font-weight: 800;
}

.avg-post__author-text {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.avg-post__author-text strong {
	font-weight: 700;
	color: var(--avg-color-text);
}

.avg-post__author-text small {
	font-size: 0.78rem;
	color: #475569;
}

.avg-post__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.avg-post__meta-item .avg-icon {
	width: 15px;
	height: 15px;
	color: var(--avg-color-primary);
}

/* Body: sticky contents + share on the left, prose on the right -- the same
   shape the guides use. */
.avg-post__layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 40px;
	align-items: start;
	padding-bottom: 60px;
}

.avg-post__sidebar {
	position: sticky;
	top: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}


.avg-post__share {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	border-radius: var(--avg-radius);
	background: var(--avg-color-surface);
	border: 1px solid var(--avg-color-border);
}

.avg-post__share-label {
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--avg-color-text-muted);
}

.avg-post__share-links {
	display: flex;
	align-items: center;
	gap: 6px;
}

.avg-post__share-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--avg-color-border);
	background: var(--avg-color-surface);
	color: var(--avg-color-text-muted);
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.avg-post__share-link .avg-icon {
	width: 16px;
	height: 16px;
}

.avg-post__share-link:hover {
	color: var(--avg-color-primary);
	border-color: var(--avg-color-primary);
	background: color-mix(in srgb, var(--avg-color-primary) 8%, transparent);
}

/* Confirmation for the copy button, which otherwise gives no sign it worked. */
.avg-post__share-copy.is-copied {
	color: #16a34a;
	border-color: #16a34a;
	background: color-mix(in srgb, #16a34a 10%, transparent);
}

/* Two classes so the roomier prose padding beats .avg-card's own shorthand,
   which is defined earlier in the file. */
.avg-card.avg-post__content {
	min-width: 0;
	border-top: none;
	padding: 34px 40px 40px;
}

.avg-post__content > *:first-child {
	margin-top: 0;
}

/* Offset so a heading jumped to from the contents isn't flush with the top
   of the viewport. */
.avg-post__content h2,
.avg-post__content h3 {
	scroll-margin-top: 24px;
}

/* Long-form spacing. Browser defaults give a heading about the same margin as
   a paragraph, and since adjacent margins collapse to the larger of the two
   rather than adding up, a heading ends up sitting almost on the text above
   it. The top margins here are deliberately much larger than the bottom ones,
   so each heading groups with the text it introduces. Sizes are in em, so they
   scale with each heading's own size. */
.avg-post__content h2 {
	margin: 2.1em 0 0.8em;
	font-size: 1.6rem;
	font-weight: 800;
	line-height: 1.25;
	color: var(--avg-color-text);
}

.avg-post__content h3 {
	margin: 1.9em 0 0.85em;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--avg-color-text);
}

.avg-post__content h4 {
	margin: 1.7em 0 0.8em;
	font-size: 1.02rem;
	font-weight: 700;
	color: var(--avg-color-text);
}

.avg-post__content p {
	margin: 0 0 1.15em;
	line-height: 1.7;
}

.avg-post__content ul,
.avg-post__content ol {
	margin: 0 0 1.3em;
	padding-left: 1.3em;
	line-height: 1.7;
}

.avg-post__content li {
	margin-bottom: 0.4em;
}

.avg-post__content blockquote {
	margin: 1.8em 0;
}

/* The zoom-in cursor from .avg-full-review__section img is kept here: the
   lightbox is loaded on posts, so it reflects what a click actually does. */
.avg-card.avg-post__content img {
	margin: 0.6em 0;
}

@media (max-width: 900px) {
	.avg-post__layout {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.avg-post__sidebar {
		position: static;
	}

	.avg-post__title {
		font-size: 2rem;
	}

	.avg-post__hero-media--image {
		aspect-ratio: 16 / 9;
	}

	.avg-post__hero-body {
		padding: 22px 22px 24px;
	}

	.avg-card.avg-post__content {
		padding: 24px 22px 28px;
	}
}

/* ---------------------------------------------------- Blog overview --- */

/*
 * Cards and sidebar share one grid rather than sitting in two columns. The
 * sidebar is pinned to the last column for the first two card rows; below that
 * the cards carry on into that column, so the space it leaves is used.
 *
 * Explicitly placed items are positioned before auto-placed ones, so the
 * sidebar claims its cell regardless of coming after the cards in the markup.
 */
.avg-blog {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	align-items: start;
	padding-top: 8px;
	padding-bottom: 60px;
}

.avg-blog__header,
.avg-blog__pagination {
	grid-column: 1 / -1;
}

/* One column, so it sits beside the sidebar on the first card row instead of
   claiming a row of its own above it. */
.avg-blog__empty {
	grid-column: 1;
}

.avg-blog__sidebar {
	grid-column: 3;
	/* Row 1 is the heading; the cards start on row 2. One row only -- the two
	   widgets come to about the height of a single card, and claiming a second
	   row would leave exactly the gap this layout is meant to fill. */
	grid-row: 2;
}

.avg-blog__result-count {
	margin: 14px 0 0;
	font-size: 0.88rem;
	font-style: italic;
	color: #475569;
}

/* The link stays upright, so it reads as an action rather than part of the
   sentence around it. */
.avg-blog__result-count a {
	font-style: normal;
}

.avg-blog__result-count a,
.avg-blog__empty a {
	margin-left: 8px;
	font-weight: 700;
	color: var(--avg-color-primary);
}

.avg-blog__header {
	margin-bottom: 4px;
}

.avg-blog__header h1 {
	margin: 0 0 10px;
	font-size: 2.6rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--avg-color-text);
}

.avg-blog__header p {
	max-width: 560px;
	margin: 0;
	color: #475569;
}


.avg-blog-card {
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.avg-blog-card:hover {
	transform: translateY(-3px);
	border-color: var(--avg-color-primary);
	box-shadow: 0 12px 22px -12px color-mix(in srgb, var(--avg-color-primary) 55%, transparent);
}

.avg-blog-card__thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	background: color-mix(in srgb, var(--avg-color-primary) 8%, var(--avg-color-bg));
	overflow: hidden;
}

.avg-blog-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.avg-blog-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 5px 12px;
	border-radius: 6px;
	background: var(--avg-color-primary);
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #fff;
}

.avg-blog-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px 20px 20px;
}

.avg-blog-card__date {
	font-size: 0.78rem;
	color: var(--avg-color-text-muted);
}

.avg-blog-card__title {
	margin: 0;
	font-size: 1.08rem;
	font-weight: 700;
	line-height: 1.35;
}

.avg-blog-card__title a {
	color: var(--avg-color-text);
	text-decoration: none;
}

.avg-blog-card:hover .avg-blog-card__title a {
	color: var(--avg-color-primary);
}

.avg-blog-card__excerpt {
	margin: 0;
	font-size: 0.87rem;
	line-height: 1.5;
	color: #475569;
}

.avg-blog-card__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--avg-color-primary);
	text-decoration: none;
}

.avg-blog-card__more .avg-icon {
	width: 16px;
	height: 16px;
	transition: transform 0.18s ease;
}

.avg-blog-card:hover .avg-blog-card__more .avg-icon {
	transform: translateX(4px);
}

/* Sidebar */
.avg-blog__sidebar {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.avg-blog__widget-title {
	margin: 0 0 14px;
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--avg-color-text);
}

.avg-blog__search {
	position: relative;
}

.avg-blog__search input {
	width: 100%;
	padding: 12px 46px 12px 16px;
	border-radius: 8px;
	border: 1px solid var(--avg-color-border);
	background: var(--avg-color-bg);
	font-size: 0.88rem;
	color: var(--avg-color-text);
}

.avg-blog__search input:focus {
	outline: none;
	border-color: var(--avg-color-primary);
}

.avg-blog__search button {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: none;
	background: none;
	color: var(--avg-color-text-muted);
	cursor: pointer;
}

.avg-blog__search button:hover {
	color: var(--avg-color-primary);
}

.avg-blog__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.avg-blog__list-item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.avg-blog__list-thumb {
	display: block;
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	border-radius: 8px;
	overflow: hidden;
	background: color-mix(in srgb, var(--avg-color-primary) 8%, var(--avg-color-bg));
}

.avg-blog__list-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.avg-blog__list-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.avg-blog__list-title {
	font-size: 0.87rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--avg-color-text);
	text-decoration: none;
}

.avg-blog__list-title:hover {
	color: var(--avg-color-primary);
}

.avg-blog__list-number {
	color: var(--avg-color-primary);
}

.avg-blog__list-body time {
	font-size: 0.76rem;
	color: var(--avg-color-text-muted);
}

/* Two card columns with the sidebar beside them; then one of everything. */
@media (max-width: 1100px) {
	.avg-blog {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Still pinned to the first card row -- letting it auto-place here would
	   push every card down a row and leave the cell beside it empty. */
	.avg-blog__sidebar {
		grid-column: 2;
		grid-row: 2;
	}
}

@media (max-width: 780px) {
	.avg-blog {
		grid-template-columns: 1fr;
	}

	/* Released from its fixed desktop row so it can flow naturally in the
	   single column -- it comes first in the markup, so search and latest
	   posts land above the articles instead of below them. */
	.avg-blog__sidebar {
		grid-column: 1;
		grid-row: auto;
	}

	.avg-blog__pagination {
		order: 2;
	}
}

/* ------------------------------------------- Editor button blocks --- */

/* WordPress's own Button block, restyled to match .avg-btn. Using the core
   block rather than a shortcode means the normal editor UI (link picker,
   alignment, the outline variation) keeps working. Scoped to the shared
   content class, so it applies wherever the editor is used: posts, pages and
   the WYSIWYG areas of reviews and guides. */
/*
 * inline-block, not flex. This is Gutenberg content -- an editor can bold
 * part of a button's label ("Find the Best **Premium VR Porn** site for
 * you") without knowing anything about the CSS. Flex blockifies every
 * element child, and a run of text broken up by an element boundary (the
 * <strong>) becomes three separate anonymous flex items rather than one --
 * "Find the Best", the bold span, and "site for you" each wrapped and
 * centred on their own, which is what produced three ragged lines instead
 * of one label. inline-block lets the <strong> stay a normal inline run, so
 * the whole label wraps as one paragraph like any other text.
 *
 * The gap the flex layout gave an appended icon isn't missed: an icon here
 * only ever arrives via adultvrguide_add_external_link_icons() carrying
 * .avg-content-link__icon, which already sets its own inline spacing
 * (margin-left, vertical-align) for exactly this un-flexed context -- it's
 * the same class prose links elsewhere in this content use.
 */
.avg-full-review__section .wp-block-button__link {
	display: inline-block;
	text-align: center;
	padding: 13px 24px;
	border-radius: 8px;
	background: var(--avg-color-primary);
	color: #fff;
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.avg-full-review__section .wp-block-button__link:hover {
	background: var(--avg-color-primary-dark);
	color: #fff;
}

/* The "Outline" style variation in the block sidebar. */
.avg-full-review__section .is-style-outline .wp-block-button__link,
.avg-full-review__section .wp-block-button.is-style-outline > .wp-block-button__link {
	background: var(--avg-color-surface);
	border-color: var(--avg-color-primary);
	color: var(--avg-color-primary);
}

.avg-full-review__section .is-style-outline .wp-block-button__link:hover {
	background: color-mix(in srgb, var(--avg-color-primary) 8%, var(--avg-color-surface));
	color: var(--avg-color-primary);
}

/* The block's own external-link handling already ran over this markup, so keep
   the appended icon in step with the button's text colour. */
.avg-full-review__section .wp-block-button__link .avg-icon {
	color: currentColor;
}

.avg-full-review__section .wp-block-buttons {
	margin: 1.6em 0;
}

/* ---------------------------------------------------------- Contact --- */

.avg-contact {
	padding-top: 8px;
	padding-bottom: 60px;
}

.avg-contact__header {
	max-width: 620px;
	margin-bottom: 30px;
}

.avg-contact__header h1 {
	margin: 0 0 10px;
	font-size: 2.4rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--avg-color-text);
}

.avg-contact__header p {
	margin: 0;
	color: #475569;
	line-height: 1.6;
}

.avg-contact__layout {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 28px;
	align-items: start;
}

.avg-contact__form {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 30px 32px 32px;
}

.avg-contact__row {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.avg-contact__row label {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--avg-color-text);
}

.avg-contact__row input,
.avg-contact__row textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--avg-color-border);
	border-radius: 8px;
	background: var(--avg-color-bg);
	font-family: inherit;
	font-size: 0.92rem;
	color: var(--avg-color-text);
}

.avg-contact__row textarea {
	resize: vertical;
	min-height: 150px;
	line-height: 1.6;
}

.avg-contact__row input:focus,
.avg-contact__row textarea:focus {
	outline: none;
	border-color: var(--avg-color-primary);
	background: var(--avg-color-surface);
}

/* Off-screen rather than display:none -- bots skip hidden fields, which is
   exactly what this one is meant to catch. */
.avg-contact__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.avg-contact__footer {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 2px;
}

.avg-contact__submit {
	padding: 13px 26px;
	font-size: 0.95rem;
}

.avg-contact__submit:disabled {
	opacity: 0.6;
	cursor: default;
}

.avg-contact__message {
	font-size: 0.88rem;
	font-weight: 600;
	color: #16a34a;
}

.avg-contact__message.is-error {
	color: #dc2626;
}

.avg-contact__aside {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.avg-contact__card {
	padding: 22px;
}

.avg-contact__card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-bottom: 12px;
	border-radius: 10px;
	background: color-mix(in srgb, var(--avg-color-primary) 11%, transparent);
	color: var(--avg-color-primary);
}

.avg-contact__card-icon .avg-icon {
	width: 20px;
	height: 20px;
}

.avg-contact__card h2 {
	margin: 0 0 6px;
	font-size: 1rem;
	font-weight: 700;
	color: var(--avg-color-text);
}

.avg-contact__card p {
	margin: 0 0 8px;
	font-size: 0.86rem;
	line-height: 1.55;
	color: #475569;
}

.avg-contact__card a {
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--avg-color-primary);
	text-decoration: none;
	word-break: break-word;
}

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

	.avg-contact__form {
		padding: 24px 22px 26px;
	}
}

/* Browsers italicise <address> by default; font-family is not touched, so it
   stays on the site face like everything else. */
.avg-contact__address {
	margin: 0;
	font-style: normal;
	font-size: 0.82rem;
	line-height: 1.6;
	color: var(--avg-color-text);
}

/* --------------------------------------------------- Guides overview --- */

.avg-guides {
	padding-top: 8px;
	padding-bottom: 60px;
}

.avg-guides__header {
	max-width: 620px;
	margin-bottom: 34px;
}

.avg-guides__header h1 {
	margin: 0 0 10px;
	font-size: 2.9rem;
	font-weight: 800;
	letter-spacing: -0.025em;
	color: var(--avg-color-text);
}

.avg-guides__header p {
	margin: 0;
	line-height: 1.6;
	color: #475569;
}

.avg-guides__section {
	margin-bottom: 40px;
}

.avg-guides__section-title {
	margin: 0 0 16px;
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--avg-color-text);
}

/* Essential guide banner */
.avg-guides__feature {
	display: flex;
	align-items: center;
	gap: 32px;
	padding: 30px 36px;
	border-radius: var(--avg-radius);
	background: color-mix(in srgb, var(--avg-color-primary) 8%, var(--avg-color-bg));
	border: 1px solid var(--avg-color-border);
}

/* The mascot leans out of the banner's top edge, so the panel needs headroom
   rather than the image being squeezed inside it. */
.avg-guides__feature--has-mascot {
	padding-top: 34px;
}

/*
 * Narrow-column version, used beside a review. Same side-by-side layout as the
 * full-width banner, only scaled down: a smaller mascot that leans less far out
 * of the panel, and tighter type, so the card stays short.
 */
.avg-guides__feature--compact {
	gap: 18px;
	padding: 18px 20px;
}

.avg-guides__feature--compact.avg-guides__feature--has-mascot {
	padding-top: 20px;
}

.avg-guides__feature--compact .avg-guides__feature-mascot {
	width: 165px;
	max-width: 38%;
	margin: -22px 0 -14px;
}

.avg-guides__feature--compact .avg-guides__badge {
	margin-bottom: 8px;
}

.avg-guides__feature--compact .avg-guides__feature-title {
	margin-bottom: 7px;
	font-size: 1.15rem;
}

.avg-guides__feature--compact .avg-guides__feature-text {
	margin-bottom: 11px;
	font-size: 0.86rem;
}

.avg-guides__feature--compact .avg-guides__feature-link {
	font-size: 0.85rem;
}

.avg-guides__feature-mascot {
	width: 300px;
	max-width: 40%;
	height: auto;
	flex-shrink: 0;
	margin: -46px 0 -30px;
}

.avg-guides__feature-body {
	min-width: 0;
}

.avg-guides__badge {
	display: inline-block;
	margin-bottom: 12px;
	padding: 5px 12px;
	border-radius: 6px;
	background: var(--avg-color-primary);
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
}

.avg-guides__feature-title {
	margin: 0 0 10px;
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.25;
}

.avg-guides__feature-title a {
	color: var(--avg-color-text);
	text-decoration: none;
}

.avg-guides__feature-title a:hover {
	color: var(--avg-color-primary);
}

.avg-guides__feature-text {
	max-width: 520px;
	margin: 0 0 16px;
	line-height: 1.6;
	color: #475569;
}

.avg-guides__feature-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--avg-color-primary);
	text-decoration: none;
}

.avg-guides__feature-link .avg-icon {
	width: 17px;
	height: 17px;
	transition: transform 0.18s ease;
}

.avg-guides__feature-link:hover .avg-icon {
	transform: translateX(4px);
}

/* Tiles */
.avg-guides__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 20px;
}

.avg-guide-tile {
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.avg-guide-tile:hover {
	transform: translateY(-3px);
	border-color: var(--avg-color-primary);
	box-shadow: 0 12px 22px -12px color-mix(in srgb, var(--avg-color-primary) 55%, transparent);
}

.avg-guide-tile__shot {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 10;
	background: color-mix(in srgb, var(--avg-color-primary) 7%, var(--avg-color-bg));
	overflow: hidden;
}

.avg-guide-tile__shot img {
	max-width: 78%;
	max-height: 78%;
	width: auto;
	height: auto;
	object-fit: contain;
	transition: transform 0.18s ease;
}

.avg-guide-tile:hover .avg-guide-tile__shot img {
	transform: scale(1.05);
}

.avg-icon.avg-guide-tile__fallback {
	width: 42px;
	height: 42px;
	color: color-mix(in srgb, var(--avg-color-primary) 45%, transparent);
}

.avg-guide-tile__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px 18px 18px;
}

.avg-guide-tile__title {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--avg-color-text);
}

.avg-guide-tile:hover .avg-guide-tile__title {
	color: var(--avg-color-primary);
}

.avg-guide-tile__text {
	font-size: 0.82rem;
	line-height: 1.5;
	color: #475569;
}

.avg-guide-tile__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	font-size: 0.83rem;
	font-weight: 700;
	color: var(--avg-color-primary);
}

.avg-guide-tile__link .avg-icon {
	width: 15px;
	height: 15px;
	transition: transform 0.18s ease;
}

.avg-guide-tile:hover .avg-guide-tile__link .avg-icon {
	transform: translateX(4px);
}

/*
 * A device whose guide isn't written yet. It keeps its place in the grid but
 * leads nowhere, so every hover cue above has to be undone -- these rules sit
 * after the ones they cancel and match them selector for selector.
 */
.avg-guide-tile--soon {
	cursor: default;
}

.avg-guide-tile--soon:hover {
	transform: none;
	border-color: var(--avg-color-border);
	box-shadow: var(--avg-shadow); /* The card's own shadow, not none -- otherwise it blinks away on hover. */
}

.avg-guide-tile--soon:hover .avg-guide-tile__shot img {
	transform: none;
}

.avg-guide-tile--soon:hover .avg-guide-tile__title {
	color: var(--avg-color-text);
}

/* Muted picture, so the tile reads as dormant before you get to the label. */
.avg-guide-tile--soon .avg-guide-tile__shot {
	background: color-mix(in srgb, var(--avg-color-text) 4%, var(--avg-color-bg));
}

.avg-guide-tile--soon .avg-guide-tile__shot img {
	filter: grayscale(1);
	opacity: 0.55;
}

.avg-guide-tile--soon .avg-icon.avg-guide-tile__fallback {
	color: color-mix(in srgb, var(--avg-color-text) 22%, transparent);
}

.avg-guide-tile__soon {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	margin-top: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--avg-color-text) 7%, transparent);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #64748b;
}

@media (max-width: 700px) {
	.avg-guides__feature {
		flex-direction: column;
		text-align: center;
		padding: 24px;
	}

	.avg-guides__feature-mascot {
		max-width: 220px;
		margin: -40px auto 0;
	}

	.avg-guides__header h1 {
		font-size: 2.2rem;
	}
}

/* ==========================================================================
   Outbound link warning
   ========================================================================== */

/* Declared with :not([hidden]) on purpose: a bare display rule in an author
   stylesheet beats the browser's [hidden] { display: none }, so the dialog
   would sit open on every page. */
.avg-exit:not([hidden]) {
	display: flex;
}

.avg-exit {
	position: fixed;
	inset: 0;
	align-items: center;
	justify-content: center;
	padding: 24px;
	z-index: 1200;
}

.avg-exit__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(2, 6, 18, 0.72);
	backdrop-filter: blur(3px);
}

.avg-exit__dialog {
	position: relative;
	width: 100%;
	max-width: 460px;
	padding: 32px 34px 24px;
	border-radius: 18px;
	background: #131c30;
	border: 1px solid rgba(255, 255, 255, 0.09);
	box-shadow: 0 30px 60px -20px rgba(2, 6, 18, 0.9);
	text-align: center;
}

.avg-exit__badge {
	display: inline-block;
	margin-bottom: 18px;
	padding: 7px 16px;
	border-radius: 999px;
	background: #f5b027;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #2b1d00;
}

.avg-exit__title {
	margin: 0 0 14px;
	font-size: 1.4rem;
	font-weight: 800;
	line-height: 1.3;
	color: #fff;
}

.avg-exit__text {
	margin: 0 0 24px;
	font-size: 0.92rem;
	line-height: 1.6;
	color: #b6c2d6;
}

.avg-exit__actions {
	display: flex;
	gap: 12px;
}

/* Sized to their text rather than split down the middle: an equal half is too
   narrow for "Continue - I'm over 18", which then wrapped onto two lines and
   made that button taller than the one beside it. */
.avg-exit__btn {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	padding: 13px 18px;
	border-radius: 10px;
	border: 1px solid transparent;
	font-family: inherit;
	font-size: 0.92rem;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.avg-exit__btn--go {
	background: var(--avg-color-primary);
	color: #fff;
}

.avg-exit__btn--go:hover {
	background: color-mix(in srgb, var(--avg-color-primary) 82%, #fff);
}

.avg-exit__btn--back {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.22);
	color: #e2e8f0;
}

.avg-exit__btn--back:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.34);
}

.avg-exit__btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.avg-exit__remember {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 18px;
	font-size: 0.8rem;
	color: #94a3b8;
	cursor: pointer;
}

.avg-exit__remember input {
	width: 15px;
	height: 15px;
	accent-color: var(--avg-color-primary);
	cursor: pointer;
}

/* The page behind must not scroll away under the dialog. */
body.avg-exit-open {
	overflow: hidden;
}

@media (max-width: 480px) {
	.avg-exit__dialog {
		padding: 26px 22px 20px;
	}

	.avg-exit__title {
		font-size: 1.2rem;
	}

	.avg-exit__actions {
		flex-direction: column;
	}
}

/* Nothing matched the search box. Sits where the review cards would be. */
.avg-review-list__empty {
	margin: 0;
	padding: 28px 24px;
	border: 1px dashed var(--avg-color-border);
	border-radius: var(--avg-radius);
	background: var(--avg-color-surface);
	text-align: center;
	color: #475569;
}

.avg-review-list__empty a {
	margin-left: 6px;
	font-weight: 700;
	color: var(--avg-color-primary);
}

/* ==========================================================================
   Review card on a phone
   ==========================================================================
   The desktop card is one wide row: rank, logo, title, Trust Score, User
   Rating. Squeezed into 375px those last two became 90px and 21px wide while
   the description ran 367px down the page, giving a card 790px tall -- barely
   one per screen. Below this width the card is rebuilt rather than compressed. */
@media (max-width: 640px) {
	.avg-review-card__top-row {
		grid-template-columns: auto auto minmax(0, 1fr);
		align-items: center;
		gap: 12px;
		padding: 14px 14px 0;
	}

	.avg-review-card__rank {
		width: 26px;
		height: 26px;
		font-size: 0.8rem;
		align-self: start;
	}

	.avg-review-card__logo {
		width: 76px;
		height: 76px;
		padding: 6px;
		align-self: start;
	}

	/*
	 * The logo lines up with the site's name rather than with the top of the
	 * row. A value tag ("Editor's Choice") sits above the name on some cards
	 * and not others, so a logo pinned to the top hung a pill's height above
	 * the name on exactly those cards -- and only those, which is what made it
	 * read as a mistake rather than as the layout.
	 *
	 * 30px is that pill: 24px tall (0.75rem over 1.5, plus the 3px of padding
	 * above and below in .avg-value-tag) and the 6px of margin under the row.
	 * Keep it in step with those two rules.
	 *
	 * Phone only. The rank badge has to come along or the number is left
	 * floating above a logo that moved out from under it -- there is no room
	 * beside it at this width. The wide card has that room, so it keeps the
	 * number in the corner and the logo at the top.
	 */
	.avg-review-card__top-row:has(.avg-review-card__value-tags) .avg-review-card__rank,
	.avg-review-card__top-row:has(.avg-review-card__value-tags) .avg-review-card__logo {
		margin-top: 30px;
	}

	/* Back, but held to two lines. It ran 367px down a 108px column before the
	   card was rebuilt; the trouble was the column, not the sentence. */
	.avg-review-card__description {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		margin-bottom: 2px;
		font-size: 0.85rem;
		line-height: 1.45;
	}

	.avg-review-card__title {
		font-size: 1.05rem;
	}

	.avg-review-card__main {
		align-self: start;
	}

	/* A heading that wraps to two lines left its icon and its score floating in
	   the middle of them; both belong on the first line, beside the words. */
	.avg-full-review__section-header,
	.avg-full-review__section-header h3 {
		align-items: flex-start;
	}

	/* The genre is on the review page and in the filters; on the card it was
	   one more thing to read past. Dropping it also puts the score last in the
	   text column, which is where the design ends it. */
	.avg-review-card__mini-tags {
		display: none;
	}

	/* Even air on both sides of the score. The gap above is the summary's own
	   margin plus the grid's row gap, so the margin here is zero and the
	   summary's is trimmed to match the 14px below. */
	.avg-review-card__scores {
		display: block;
		grid-column: 3;
		margin-top: 0;
		padding-bottom: 14px;
	}

	.avg-review-card__col {
		flex: 1 1 0;
		min-width: 0;
		align-self: auto;
		padding-left: 0;
		border-left: none;
		gap: 6px;
	}


	.avg-trust-score__value,
	.avg-user-rating-card--compact .avg-user-rating-card__value {
		font-size: 1.6rem;
	}

	.avg-review-card__stats-row {
		padding: 12px 14px 14px;
		gap: 12px;
	}

	/* Scoped to the row inside the card: the review page's At a Glance card
	   reuses .avg-review-card__stats, and every phone rule written for the card
	   was landing on it too. See the At a Glance block further down. */
	.avg-review-card__stats-row .avg-review-card__stats {
		flex-wrap: wrap;
		gap: 10px 16px;
	}

	.avg-review-card__cta.avg-review-card__cta--inline {
		width: 100%;
		gap: 10px;
	}

	/* Its own row, under the figures and the price. */
	.avg-review-card__cta-buttons {
		grid-column: 1 / -1;
		width: 100%;
		flex-direction: row;
		gap: 10px;
		margin-top: 4px;
	}

	.avg-review-card__cta.avg-review-card__cta--inline .avg-btn {
		flex: 1 1 0;
		width: auto;
	}

	/* "At a Glance" is a label for a row that speaks for itself; the icons and
	   figures below it are self-explanatory. */
	.avg-review-card__stats-heading {
		display: none;
	}

	/* A flex item will not shrink below its content by default, so this row
	   grew to 453px inside a 375px card and was clipped rather than wrapped --
	   which is what made it look as though only three figures fitted. */
	.avg-review-card__stats-row > * {
		min-width: 0;
	}

	/* Takes only what the figures need, so the price can share the line rather
	   than being pushed onto one of its own. */
	.avg-review-card__stats-group {
		flex: 0 1 auto;
		min-width: 0;
	}

	.avg-review-card__stats-row .avg-review-card__stats {
		justify-content: flex-start;
		gap: 22px;
	}

	/*
	 * Each figure on its own width rather than stretched to an equal share.
	 * Stretched, the box was wider than the text inside it and centred there,
	 * so the slack fell between the figures: "43,087+" is 70px in an 88px box
	 * and "6,495+" is 60, which put 41px between them but only 26 before the
	 * price. Sized to content, the gap is the one set above and the same
	 * everywhere.
	 */
	.avg-review-card__stats-row .avg-stat-badge {
		flex: 0 1 auto;
		min-width: 0;
	}

	/* Videos and Models only. The price joins them as the third item on this
	   line, so Studios, resolution and update frequency step aside -- they are
	   in the full review, and this row is meant to be scanned, not read. */
	.avg-review-card__stats-row .avg-stat-badge:nth-child(n + 3) {
		display: none;
	}

	/*
	 * display:contents, so the price and the buttons become items of the stats
	 * row itself: the price lines up beside the figures, and the buttons take
	 * the row below at full width.
	 */
	.avg-review-card__cta.avg-review-card__cta--inline {
		display: contents;
	}

	/*
	 * The figures take what is left and the price a fixed 107px: 91px for the
	 * block plus the 16px inset below. The width has to be held, not left to
	 * the content -- unwrapped the price measures 173px and would shove the
	 * figures onto a second line.
	 *
	 * 91px is what the discount pill needs. At 83px the block left it 59px of
	 * content against the 69px it wants, so "70% OFF" broke over two lines and
	 * the pill stretched into a block two rows deep -- the one thing in this
	 * row that must not wrap, being a shape as much as a word. The buttons
	 * take the whole width underneath.
	 *
	 * The 16px insets pull the line in from the card's edges without moving
	 * those buttons, which stay flush with the row's own padding and so keep
	 * their alignment with the logo and the title above. With 22px between the
	 * figures the line reads 31 / 22 / 22 / 31 -- the edges as they were, the
	 * middle a little tighter to pay for the pill.
	 */
	.avg-review-card__stats-row {
		display: grid;
		grid-template-columns: 1fr 107px;
		align-items: center;
	}

	.avg-review-card__stats-group {
		grid-column: 1;
		margin-left: 16px;
	}

	/*
	 * The review page's own At a Glance card. All five figures belong here --
	 * this is the page the card's hidden three point to -- so they wrap onto
	 * rows of three instead of running off a 277px card. The last row holds
	 * two and is centred under the first.
	 */
	.avg-at-a-glance-card .avg-review-card__stats {
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-start;
		gap: 18px 10px;
	}

	.avg-at-a-glance-card .avg-stat-badge {
		flex: 0 1 calc(33.333% - 7px);
		min-width: 0;
	}

	/* Pushed to the far end of the line the figures sit on. Capped, because a
	   flex item sized to its content measures the price unwrapped -- about
	   180px, which will not share a 297px row with the figures. */
	/* Contents flush left with each other -- the price text is left-aligned, so
	   a centred badge under it read as a misalignment. The block itself is
	   still centred in its third of the row. */
	/* No justify-self: the item stretches to its column less the inset, which is
	   what holds it to 83px and makes the price wrap inside rather than out. */
	.avg-review-card__cta-pricing {
		display: flex;
		grid-column: 2;
		margin-right: 16px;
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
		gap: 2px;
		padding: 10px 12px;
	}

	/* The chevron belongs to the fold-out and would break this line in two. */
	.avg-review-card__expand-hint {
		display: none;
	}

	/* The old price drops under the current one, as in the design -- kept on the
	   same line the block runs about 180px wide and will not share the row with
	   the figures. */
	.avg-review-card__cta-pricing .avg-price {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0 4px;
		white-space: normal;
	}

	.avg-review-card__cta-pricing .avg-price__original {
		flex: 1 0 100%;
	}

	/* nowrap says outright what the column width above is sized for: a pill
	   that breaks over two lines stops reading as a pill. The 8px of side
	   padding rather than 10 is what buys the room for it -- see that comment
	   for where the width comes from. Scoped to the card's price block, so the
	   review page's own offer badge is untouched. */
	.avg-review-card__cta-pricing .avg-price__discount-badge {
		margin-right: 0;
		padding: 2px 8px;
		white-space: nowrap;
	}

	/* One badge in the price block, not two. The discount is the offer; the
	   trial is a detail, and a green pill under a red one in a third of a card
	   read as clutter. The trial is still on the review page. */
	.avg-review-card__cta-pricing .avg-badge--trial {
		display: none;
	}

	/*
	 * One score instead of two. Trust Score and User Rating each carried a
	 * heading, a figure, a bar or stars and a verdict -- the same shape twice,
	 * side by side, taking a third of the card between them. The visitor's eye
	 * had to pick one.
	 *
	 * The Trust Score stays, laid out along a single line, because it is the
	 * site's own judgement and the reason to trust the ranking. The User Rating
	 * lives on the review page, where it can also be cast.
	 */
	.avg-user-rating-card.avg-user-rating-card--compact {
		display: none;
	}

	/* Stars and figure on one line, verdict on the next. The column is 171px and
	   the widest figure the scores produce is "9.4" at 42px, so the stars and
	   the gap have to come in under 129 or the figure is pushed off the line --
	   at 24px and an 8px gap they measured 132, which is why "9.4" wrapped while
	   the narrower "8.8" did not. 23px and a 6px gap leave 4px in hand, and the
	   verdict is given its own row below rather than left to the same accident. */
	.avg-trust-score {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
		gap: 2px 6px;
		padding: 0;
		border: none;
		text-align: left;
	}

	/* The heading and the bar are the wide card's way of saying this. */
	.avg-trust-score__heading,
	.avg-trust-score .avg-score-bar {
		display: none;
	}

	.avg-trust-score__stars {
		display: flex;
		gap: 1px;
	}

	.avg-trust-score__stars .avg-star {
		width: 23px;
		height: 23px;
	}

	/* A row to itself, so "Good" sits under the stars exactly where
	   "Exceptional" does rather than tucking in beside the figure. */
	.avg-trust-score__label {
		flex: 0 0 100%;
		font-size: 0.8rem;
	}

	/* Price on its own full-width row, so centring it lands on the card's
	   middle rather than on the width its own text happens to take. */
	.avg-review-card__cta.avg-review-card__cta--inline {
		justify-content: center;
	}

	/* Rating from the listing, not voting: tapping half-stars in a scrolling
	   list is fiddly, and the review page has the same control with room around
	   it. Dropping it also stops it stretching the Trust Score column, which
	   sits beside it and matches its height. */
	.avg-user-rating-card--compact .avg-user-rating-card__vote {
		display: none;
	}
}

/* ==========================================================================
   Review card between the phone rebuild and comfortable again -- ~641-899px
   ==========================================================================
   A narrower version of the width problem the filters-drawer breakpoint above
   fixes, but this one is the review card's own doing, not the homepage
   layout's: even at full width (no sidebar involved here -- this range was
   already below the old 900px drawer breakpoint before that fix), a
   641-899px card is too narrow for its six desktop columns and for "At a
   Glance" plus the price plus two full-width buttons to share one line.
   Confirmed at 768px: 145px description, and price+buttons wrapping onto
   their own line under "At a Glance" with the two buttons squeezed to
   roughly 148px combined against the 360px (180px each) they want.

   min-width matches where the ≤640px rebuild above stops; max-width is where
   the card copes unaided again -- 227px description measured at 850px,
   comfortable (277px) at 900px. */
@media (min-width: 641px) and (max-width: 899px) {
	/* Same reasoning as the phone breakpoint above: Trust Score is the site's
	   own judgement and stays; User Rating lives on the review page too. */
	.avg-user-rating-card.avg-user-rating-card--compact {
		display: none;
	}

	/*
	 * Price beside the figures, both buttons full-width underneath -- the
	 * same restructuring the phone card above uses, carried up to this width
	 * rather than reinvented. Unlike there, all five "At a Glance" figures
	 * stay: unconstrained they measured 501px in a 703px row at 768px, so
	 * the 1fr column here has room for them (flexbox settles them to 72px
	 * each rather than dropping any).
	 */
	.avg-review-card__stats-row {
		display: grid;
		grid-template-columns: 1fr 140px;
		align-items: center;
	}

	.avg-review-card__stats-group {
		grid-column: 1;
	}

	.avg-review-card__cta.avg-review-card__cta--inline {
		display: contents;
	}

	.avg-review-card__cta-pricing {
		display: flex;
		grid-column: 2;
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
		gap: 2px;
	}

	.avg-review-card__cta-buttons {
		grid-column: 1 / -1;
		width: 100%;
		flex-direction: row;
		gap: 10px;
		margin-top: 10px;
	}

	.avg-review-card__cta.avg-review-card__cta--inline .avg-btn {
		flex: 1 1 0;
		width: auto;
	}
}

/* ==========================================================================
   Filters as a drawer on a phone -- and, since 2026-09-04, a tablet too
   ==========================================================================
   Stacked above the results, the filter panel pushed the first card off the
   screen and — worse — ticking a box changed a list the visitor could not see.
   Below this width it becomes a sheet over the page with a running count of
   what the current selection returns.

   The width was raised from 900px to 1200px alongside .avg-homepage-layout's
   own breakpoint above: a permanent 280px sidebar column left too little room
   for the review card anywhere under roughly 1200px (confirmed broken at
   1024px, iPad landscape), and this drawer already handles the "no permanent
   sidebar" case correctly, so widening its range fixed the card without
   changing anything on the card itself. */
.avg-filters-trigger,
.avg-filters__actions,
.avg-newsletter--inline {
	display: none;
}

@media (max-width: 1200px) {
	.avg-filters-trigger {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		width: 100%;
		margin-bottom: 12px;
		padding: 12px 16px;
		border: 1px solid var(--avg-color-border);
		border-radius: 10px;
		background: var(--avg-color-surface);
		font-family: inherit;
		font-size: 0.95rem;
		font-weight: 700;
		color: var(--avg-color-text);
		cursor: pointer;
	}

	.avg-filters-trigger .avg-icon {
		width: 18px;
		height: 18px;
		color: var(--avg-color-primary);
	}

	/* Sits at the far end, so the number of active filters reads as a badge. */
	.avg-filters-trigger__count:not([hidden]) {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 22px;
		height: 22px;
		margin-left: auto;
		padding: 0 7px;
		border-radius: 999px;
		background: var(--avg-color-primary);
		font-size: 0.75rem;
		color: #fff;
	}

	.avg-homepage-sidebar {
		position: fixed;
		inset: 0;
		z-index: 1100;
		gap: 0;
		padding: 16px 16px 92px;
		background: var(--avg-color-bg);
		overflow-y: auto;
		overscroll-behavior: contain;
		transform: translateY(100%);
		visibility: hidden;
		transition: transform 0.25s ease, visibility 0.25s;
	}

	.avg-homepage-sidebar.is-open {
		transform: none;
		visibility: visible;
	}

	/* Belongs on the page, not inside the filters; the copy above the FAQ
	   takes over here. */
	.avg-newsletter--sidebar {
		display: none;
	}

	.avg-newsletter--inline {
		display: flex;
		margin: 0 24px 24px;
	}

	.avg-filters__actions {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		gap: 10px;
		padding: 12px 16px;
		background: var(--avg-color-surface);
		border-top: 1px solid var(--avg-color-border);
	}

	.avg-filters__actions .avg-btn {
		flex: 1 1 0;
		justify-content: center;
	}

	.avg-filters__apply {
		flex: 2 1 0;
	}

	/* The page behind must not scroll while the sheet is up. */
	body.avg-filters-open {
		overflow: hidden;
	}
}

/* Newsletter form and the notice the confirmation link lands on. */
.avg-newsletter__form {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Hidden from people, left in the tab order's way for bots. */
.avg-newsletter__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.avg-newsletter__message:not([hidden]) {
	display: block;
	margin: 2px 0 0;
	font-size: 0.8rem;
	color: #15803d;
}

.avg-newsletter__message.is-error {
	color: #b91c1c;
}

.avg-newsletter-notice {
	margin: 16px 0 0;
	padding: 12px 16px;
	border-radius: 10px;
	border: 1px solid var(--avg-color-border);
	background: var(--avg-color-surface);
	font-weight: 600;
}

.avg-newsletter-notice--ok {
	border-color: #86efac;
	background: #f0fdf4;
	color: #15803d;
}

.avg-newsletter-notice--error {
	border-color: #fecaca;
	background: #fef2f2;
	color: #b91c1c;
}

/* ==========================================================================
   Header menu on a phone
   ==========================================================================
   Below 900px the links used to wrap onto a second row spanning the whole
   width, with the search box beside them. They now fold into a panel behind a
   button. The wrapper is display:contents above that width, so the header bar
   itself is laid out exactly as before. */
.avg-header__panel {
	display: contents;
}

.avg-header__toggle,
.avg-header__search-toggle {
	display: none;
}

/* The footer's link columns ride along inside the panel markup at every width;
   they are only ever shown on a phone, where the footer drops them. */
.avg-header__panel-links {
	display: none;
}

.avg-header__scrim:not([hidden]) {
	display: block;
	position: fixed;
	inset: 0;
	z-index: 1090;
	background: rgba(2, 6, 18, 0.5);
}

@media (max-width: 900px) {
	.avg-header__inner {
		flex-wrap: nowrap;
		gap: 12px;
	}

	.avg-header__toggle,
	.avg-header__search-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		width: 42px;
		height: 42px;
		padding: 0;
		border: none;
		border-radius: 8px;
		background: transparent;
		/* Set outright: a button does not inherit the page's text colour, and
		   the bars are drawn with currentColor -- on the dark bar they came out
		   dark on dark and the button looked empty. */
		color: var(--avg-color-text);
		cursor: pointer;
	}

	.avg-header--dark .avg-header__toggle,
	.avg-header--dark .avg-header__search-toggle {
		color: #f1f5f9;
	}

	/* Pushes both buttons to the far end, away from the logo. */
	.avg-header__search-toggle {
		margin-left: auto;
	}

	.avg-header__search-toggle .avg-icon {
		width: 22px;
		height: 22px;
	}

	/* Three bars from one element: the middle is the element itself, the outer
	   two are its pseudo-elements. They fold into a cross when open. */
	.avg-header__toggle-bars,
	.avg-header__toggle-bars::before,
	.avg-header__toggle-bars::after {
		display: block;
		width: 22px;
		height: 2px;
		border-radius: 2px;
		background: currentColor;
		transition: transform 0.2s ease, opacity 0.2s ease;
	}

	.avg-header__toggle-bars::before,
	.avg-header__toggle-bars::after {
		content: '';
		position: relative;
	}

	.avg-header__toggle-bars::before {
		top: -7px;
	}

	.avg-header__toggle-bars::after {
		top: 5px;
	}

	.avg-header__toggle.is-open .avg-header__toggle-bars {
		background: transparent;
	}

	.avg-header__toggle.is-open .avg-header__toggle-bars::before {
		transform: translateY(7px) rotate(45deg);
	}

	.avg-header__toggle.is-open .avg-header__toggle-bars::after {
		transform: translateY(-5px) rotate(-45deg);
	}

	.avg-header__panel {
		display: flex;
		flex-direction: column;
		gap: 18px;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 1100;
		width: min(320px, 84vw);
		padding: 76px 24px 24px;
		background: var(--avg-color-surface);
		box-shadow: -12px 0 28px -18px rgba(2, 6, 18, 0.7);
		overflow-y: auto;
		overscroll-behavior: contain;
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 0.25s ease, visibility 0.25s;
	}

	.avg-header__panel.is-open {
		transform: none;
		visibility: visible;
	}

	.avg-header__nav {
		flex: 0 0 auto;
	}

	.avg-header__menu {
		flex-direction: column;
		gap: 4px;
	}

	.avg-header__menu a {
		display: block;
		padding: 12px 0;
		border-bottom: 1px solid var(--avg-color-border);
		font-size: 1rem;
	}

	.avg-header__search {
		order: -1;
	}

	.avg-header__search-input {
		width: 100%;
	}

	body.avg-nav-open {
		overflow: hidden;
	}
}

/* The panel is its own surface, so it keeps light styling even under the dark
   header -- white text on white would otherwise be invisible once opened. */
@media (max-width: 900px) {
	.avg-header--dark .avg-header__panel .avg-header__menu a {
		color: var(--avg-color-text);
	}

	.avg-header--dark .avg-header__panel .avg-header__search {
		border-color: var(--avg-color-border);
		background: var(--avg-color-bg);
	}

	.avg-header--dark .avg-header__panel .avg-header__search-input {
		color: var(--avg-color-text);
	}

	.avg-header--dark .avg-header__panel .avg-header__search-input::placeholder {
		color: var(--avg-color-text-muted);
	}

	.avg-header--dark .avg-header__panel .avg-header__search-btn {
		color: var(--avg-color-text-muted);
	}
}

/* The footer's Explore / Resources / Legal columns, shown in the panel at the
   width the footer drops them -- 900px, the footer's own phone/narrow-tablet
   breakpoint, so the links are in exactly one of the two places at any width. */
@media (max-width: 900px) {
	.avg-header__panel-links {
		display: flex;
		flex-direction: column;
		gap: 16px;
		padding-bottom: 8px;
	}

	.avg-header__panel-group h4 {
		margin: 0 0 4px;
		font-size: 0.7rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.03em;
		color: var(--avg-color-text-muted);
	}

	.avg-header__panel-group ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* No dividers and a smaller type size than the primary menu above them:
	   these are eleven secondary links, and ruling every one of them would
	   bury the four the menu is actually for. */
	.avg-header__panel-group a {
		display: block;
		padding: 7px 0;
		font-size: 0.9rem;
		color: var(--avg-color-text);
		text-decoration: none;
	}

	.avg-header__panel-group a:hover {
		color: var(--avg-color-primary);
	}
}

/* ==========================================================================
   Hero on a phone
   ==========================================================================
   Kept at the end of the file on purpose: the rules below have to beat
   .avg-card and the hero's own defaults, which are declared later than the
   place this block used to sit -- padding and display were being overridden
   there while grid placement went through, so the card kept its 24px padding
   and stayed a flex container. */
/*
 * The hero on a phone. Foxxie was hidden here, which left a wall of text; he is
 * back beside the title, and the "How We Score" card steps aside -- its message
 * is repeated by the badge row and by the Why Trust section further down.
 *
 * .avg-hero__main becomes display:contents so the heading, text, button and
 * badges are grid children in their own right. Foxxie lives inside the score
 * card in the markup, so that card stays as his container and simply drops its
 * own styling.
 */
@media (max-width: 900px) {
	.avg-hero {
		grid-template-columns: minmax(0, 1fr) 38%;
		align-items: center;
		gap: 4px 10px;
		padding-bottom: 8px;
	}

	.avg-hero__main {
		display: contents;
	}

	.avg-hero h1 {
		font-size: 1.6rem;
		line-height: 1.2;
		align-self: end;
	}

	/* Where the break typed into Hero Title takes effect. */
	.avg-hero__title-line {
		display: block;
	}

	.avg-hero p {
		margin-bottom: 14px;
		font-size: 0.88rem;
		line-height: 1.5;
	}

	.avg-btn.avg-hero__cta {
		display: inline-flex;
		align-self: start;
		width: fit-content;
	}

	/* Two classes, matching .avg-card.avg-hero__score-card above -- a single
	   class loses to it whatever the order. block rather than the flex it is on
	   desktop: as a flex item the image sized to its own content instead of the
	   column it was given. */
	.avg-card.avg-hero__score-card {
		display: block;
		grid-column: 2;
		grid-row: 1 / span 3;
		align-self: center;
		justify-self: stretch;
		width: 100%;
		padding: 0;
		border: none;
		background: none;
		box-shadow: none;
	}

	.avg-hero__score-card-icon,
	.avg-hero__score-card-text {
		display: none;
	}

	/* The wide cutout belongs to the score card, which has stepped aside. */
	.avg-hero__mascot {
		display: none;
	}

	.avg-hero__mascot-mobile {
		display: block;
		width: 100%;
		height: auto;
	}

	/* Full width under both columns, as a card of its own. */
	.avg-hero__badges {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 8px;
		margin-top: 12px;
		padding: 14px 8px;
		border: 1px solid var(--avg-color-border);
		border-radius: var(--avg-radius);
		background: var(--avg-color-surface);
	}

	.avg-hero__badge {
		flex-direction: column;
		gap: 6px;
		text-align: center;
		font-size: 0.72rem;
		line-height: 1.3;
	}

	/* Larger here: stacked above their label they carry the row, where on a
	   wide screen they sit beside the text as a small marker. */
	.avg-hero__badge .avg-icon {
		width: 26px;
		height: 26px;
	}
}