/* =========================================================================
   Verdict
   Every colour comes from a custom property set by the active palette.
   Nothing here hard-codes a hue, so switching palettes reskins everything.
   ========================================================================= */

/* --- Reset ------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--vrd-bg);
	color: var(--vrd-ink);
	font-family: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

/* --- Typography -------------------------------------------------------- */
/* A modular scale at 1.25. Display face carries the personality; body face
   stays quiet so long reviews remain readable. */

.vrd-h1, .vrd-h2, .vrd-h3, .vrd-h4,
h1, h2, h3, h4 {
	font-family: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.025em;
	margin: 0 0 .5em;
	text-wrap: balance;
}

.vrd-h1, h1 { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem); }
.vrd-h2, h2 { font-size: clamp(1.75rem, 1.25rem + 2.1vw, 2.75rem); }
.vrd-h3, h3 { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem); }
.vrd-h4, h4 { font-size: 1.15rem; letter-spacing: -0.015em; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--vrd-brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--vrd-brand-hi); }

.vrd-muted { color: var(--vrd-ink2); }
.vrd-lede { font-size: 1.2rem; color: var(--vrd-ink2); max-width: 62ch; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap; border: 0;
}

.vrd-skip {
	position: absolute; left: -9999px;
	z-index: 999; padding: .75rem 1.25rem;
	background: var(--vrd-brand); color: var(--vrd-onbrand);
	border-radius: 0 0 var(--vrd-radius-sm) 0;
	font-weight: 600;
}
.vrd-skip:focus { left: 0; top: 0; }

/* Visible focus everywhere. */
:focus-visible {
	outline: 2px solid var(--vrd-brand);
	outline-offset: 3px;
	border-radius: 3px;
}

/* --- Layout ------------------------------------------------------------ */

.vrd-container {
	width: min(100% - 2.5rem, var(--vrd-container));
	margin-inline: auto;
}

.vrd-section { padding-block: clamp(3rem, 6vw, 5.5rem); }
.vrd-section--tight { padding-block: clamp(2rem, 4vw, 3.5rem); }

.vrd-section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: 2.25rem;
	flex-wrap: wrap;
}
.vrd-section__head p { max-width: 56ch; color: var(--vrd-ink2); margin: .35rem 0 0; }
.vrd-section__head h2 { margin: 0; }

.vrd-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; }
@media (max-width: 640px) { .vrd-grid-2 { grid-template-columns: 1fr; } }

.vrd-with-sidebar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}
@media (max-width: 1000px) { .vrd-with-sidebar { grid-template-columns: 1fr; } }

/* --- Buttons ----------------------------------------------------------- */

.vrd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .8rem 1.4rem;
	border: 1px solid transparent;
	border-radius: var(--vrd-radius-sm);
	font-weight: 600;
	font-size: .975rem;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s, background-color .18s, border-color .18s;
	will-change: transform;
}

.vrd-btn--brand {
	background: var(--vrd-brand);
	color: var(--vrd-onbrand);
	box-shadow: 0 1px 0 var(--vrd-sheen) inset, var(--vrd-shadow-sm);
}
.vrd-btn--brand:hover {
	background: var(--vrd-brand-hi);
	color: var(--vrd-onbrand);
	transform: translateY(-2px);
	box-shadow: 0 1px 0 var(--vrd-sheen) inset, 0 8px 22px -8px rgba(var(--vrd-brand-rgb), .65);
}
.vrd-btn--brand:active { transform: translateY(0); }

.vrd-btn--ghost {
	background: transparent;
	border-color: var(--vrd-line);
	color: var(--vrd-ink);
}
.vrd-btn--ghost:hover {
	border-color: var(--vrd-brand);
	color: var(--vrd-brand);
	transform: translateY(-2px);
}

.vrd-btn--sm { padding: .5rem .9rem; font-size: .875rem; }
.vrd-btn--block { width: 100%; }

/* --- Pills and tags ---------------------------------------------------- */

.vrd-pill {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .25rem .6rem;
	border-radius: 999px;
	font-size: .75rem;
	font-weight: 600;
	background: var(--vrd-bg3);
	color: var(--vrd-ink2);
	border: 1px solid var(--vrd-line);
	white-space: nowrap;
}
.vrd-pill--pos { background: rgba(var(--vrd-pos-rgb), .14); color: var(--vrd-pos); border-color: rgba(var(--vrd-pos-rgb), .3); }
.vrd-pill--warn { background: rgba(var(--vrd-warn-rgb), .14); color: var(--vrd-warn); border-color: rgba(var(--vrd-warn-rgb), .3); }
.vrd-pill--neg { background: rgba(var(--vrd-neg-rgb), .14); color: var(--vrd-neg); border-color: rgba(var(--vrd-neg-rgb), .3); }
.vrd-pill--brand { background: rgba(var(--vrd-brand-rgb), .14); color: var(--vrd-brand); border-color: rgba(var(--vrd-brand-rgb), .32); }

/* --- Score dial -------------------------------------------------------- */
/* The sweep is drawn with stroke-dasharray so it can animate from empty to
   the real value when it scrolls into view — motion that shows a measurement,
   not decoration. */

.vrd-dial {
	position: relative;
	display: grid;
	place-items: center;
	flex: none;
	aspect-ratio: 1;
}
.vrd-dial--lg { width: 132px; }
.vrd-dial--md { width: 84px; }
.vrd-dial--sm { width: 58px; }

.vrd-dial svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }

.vrd-dial__track {
	fill: none;
	stroke: var(--vrd-line);
	stroke-width: 9;
}
.vrd-dial__sweep {
	fill: none;
	stroke-width: 9;
	stroke-linecap: round;
	stroke-dasharray: var(--dial-circ);
	stroke-dashoffset: var(--dial-circ);
	transition: stroke-dashoffset 1.1s cubic-bezier(.16,.84,.32,1);
}
.vrd-dial.is-pos .vrd-dial__sweep { stroke: var(--vrd-pos); }
.vrd-dial.is-warn .vrd-dial__sweep { stroke: var(--vrd-warn); }
.vrd-dial.is-neg .vrd-dial__sweep { stroke: var(--vrd-neg); }

.vrd-dial.is-visible .vrd-dial__sweep { stroke-dashoffset: var(--dial-offset); }

.vrd-dial__value {
	position: absolute;
	display: flex;
	align-items: baseline;
	gap: 1px;
	font-family: "Bricolage Grotesque", system-ui, sans-serif;
	font-weight: 800;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
}
.vrd-dial--lg .vrd-dial__num { font-size: 2.6rem; }
.vrd-dial--md .vrd-dial__num { font-size: 1.6rem; }
.vrd-dial--sm .vrd-dial__num { font-size: 1.1rem; }
.vrd-dial__den { font-size: .7em; color: var(--vrd-ink2); font-weight: 600; }
.vrd-dial--sm .vrd-dial__den { display: none; }

/* --- Stars ------------------------------------------------------------- */

.vrd-stars { display: inline-flex; align-items: center; gap: 2px; }
.vrd-star { width: 16px; height: 16px; fill: var(--vrd-line); flex: none; }
.vrd-star.is-on { fill: var(--vrd-warn); }
.vrd-stars__text { margin-left: .45rem; font-size: .85rem; color: var(--vrd-ink2); }

/* --- Header ------------------------------------------------------------ */

.vrd-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--vrd-glass);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--vrd-line);
	transition: box-shadow .25s, background-color .25s;
}
.vrd-header.is-stuck { box-shadow: var(--vrd-shadow-md); }

.vrd-header__inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: 72px;
}

.vrd-brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--vrd-ink); flex: none; }
.vrd-brand img { max-height: 44px; width: auto; }
.vrd-brand__name {
	font-family: "Bricolage Grotesque", system-ui, sans-serif;
	font-weight: 800;
	font-size: 1.25rem;
	letter-spacing: -0.03em;
}
.vrd-brand__tag { display: block; font-size: .7rem; font-weight: 500; color: var(--vrd-ink2); letter-spacing: 0; }

.vrd-nav { margin-left: auto; }
.vrd-nav ul { display: flex; align-items: center; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.vrd-nav a {
	position: relative;
	display: block;
	padding: .5rem .8rem;
	border-radius: var(--vrd-radius-sm);
	color: var(--vrd-ink);
	text-decoration: none;
	font-weight: 500;
	font-size: .95rem;
	transition: background-color .18s, color .18s;
}
.vrd-nav a:hover,
.vrd-nav .current-menu-item > a { background: var(--vrd-bg3); color: var(--vrd-brand); }

/* Sub-menus */
.vrd-nav li { position: relative; }
.vrd-nav .sub-menu {
	position: absolute;
	top: calc(100% + .35rem);
	left: 0;
	min-width: 220px;
	flex-direction: column;
	gap: 0;
	padding: .4rem;
	background: var(--vrd-bg2);
	border: 1px solid var(--vrd-line);
	border-radius: var(--vrd-radius-sm);
	box-shadow: var(--vrd-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .18s, transform .18s, visibility .18s;
}
.vrd-nav li:hover > .sub-menu,
.vrd-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }

.vrd-header__actions { display: flex; align-items: center; gap: .5rem; flex: none; }

.vrd-burger {
	display: none;
	width: 44px; height: 44px;
	align-items: center; justify-content: center;
	background: transparent;
	border: 1px solid var(--vrd-line);
	border-radius: var(--vrd-radius-sm);
	cursor: pointer;
}
.vrd-burger span { display: block; width: 18px; height: 2px; background: var(--vrd-ink); position: relative; transition: transform .25s, background-color .25s; }
.vrd-burger span::before,
.vrd-burger span::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--vrd-ink); transition: transform .25s; }
.vrd-burger span::before { top: -6px; }
.vrd-burger span::after { top: 6px; }
.vrd-burger[aria-expanded="true"] span { background: transparent; }
.vrd-burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.vrd-burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 960px) {
	.vrd-burger { display: flex; }
	.vrd-nav {
		position: fixed;
		inset: 72px 0 auto 0;
		background: var(--vrd-bg2);
		border-bottom: 1px solid var(--vrd-line);
		padding: 1rem 1.25rem 1.5rem;
		box-shadow: var(--vrd-shadow-lg);
		display: none;
		max-height: calc(100dvh - 72px);
		overflow-y: auto;
	}
	.vrd-nav.is-open { display: block; }
	.vrd-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
	.vrd-nav a { padding: .85rem .5rem; border-bottom: 1px solid var(--vrd-line); border-radius: 0; }
	.vrd-nav .sub-menu {
		position: static; opacity: 1; visibility: visible; transform: none;
		box-shadow: none; border: 0; padding: 0 0 0 1rem; background: transparent;
	}
	.vrd-header__actions .vrd-btn--ghost { display: none; }
}

/* --- Hero -------------------------------------------------------------- */
/* The one place where the design spends its boldness. */

.vrd-hero {
	position: relative;
	padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem);
	overflow: hidden;
}

.vrd-has-glow .vrd-hero::before {
	content: "";
	position: absolute;
	top: -30%;
	right: -10%;
	width: 70vw;
	height: 70vw;
	max-width: 900px;
	max-height: 900px;
	background: radial-gradient(circle at center,
		rgba(var(--vrd-brand-rgb), .22) 0%,
		rgba(var(--vrd-brand2-rgb), .12) 38%,
		transparent 68%);
	filter: blur(20px);
	pointer-events: none;
	z-index: 0;
}

.vrd-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}
@media (max-width: 940px) {
	.vrd-hero__inner { grid-template-columns: 1fr; }
}

.vrd-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .35rem .75rem .35rem .4rem;
	margin-bottom: 1.25rem;
	border: 1px solid var(--vrd-line);
	border-radius: 999px;
	background: var(--vrd-bg2);
	font-size: .8rem;
	font-weight: 600;
	color: var(--vrd-ink2);
}
.vrd-hero__eyebrow::before {
	content: "";
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--vrd-pos);
	box-shadow: 0 0 0 4px rgba(var(--vrd-pos-rgb), .18);
	margin-left: .35rem;
}

.vrd-hero__title { margin-bottom: 1rem; }
.vrd-hero__text { font-size: 1.15rem; color: var(--vrd-ink2); max-width: 52ch; margin-bottom: 2rem; }

.vrd-hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 2.5rem; }

.vrd-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--vrd-line);
}
.vrd-hero__stat-num {
	display: block;
	font-family: "Bricolage Grotesque", system-ui, sans-serif;
	font-size: 1.9rem;
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.vrd-hero__stat-label { font-size: .85rem; color: var(--vrd-ink2); }

/* --- 3D card stack ----------------------------------------------------- */
/* Cards are arranged in real 3D space and tilt toward the pointer as a group.
   preserve-3d on the scene is what gives the stack genuine depth rather than a
   flat parallax fake. */

.vrd-stack {
	position: relative;
	perspective: 1400px;
	perspective-origin: 50% 40%;
	min-height: 420px;
	display: grid;
	place-items: center;
}

.vrd-stack__scene {
	position: relative;
	width: min(100%, 380px);
	height: 420px;
	transform-style: preserve-3d;
	transition: transform .5s cubic-bezier(.2,.8,.3,1);
}

.vrd-stack__card {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	gap: .9rem;
	padding: 1.5rem;
	background: linear-gradient(160deg,
		rgba(var(--vrd-bg2-rgb), .96) 0%,
		rgba(var(--vrd-bg3-rgb), .96) 100%);
	border: 1px solid var(--vrd-line);
	border-radius: var(--vrd-radius-lg);
	box-shadow: var(--vrd-shadow-lg);
	transform-style: preserve-3d;
	backface-visibility: hidden;
	/* Set per card by inline style: --i is the depth index. */
	transform:
		translate3d(calc(var(--i) * 22px), calc(var(--i) * -16px), calc(var(--i) * -70px))
		rotateY(calc(var(--i) * -3deg));
	transition: transform .6s cubic-bezier(.2,.8,.3,1), opacity .6s;
	opacity: calc(1 - (var(--i) * 0.18));
}

/* Top edge highlight — reads as a physical bevel under the light. */
.vrd-stack__card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(180deg, var(--vrd-sheen), transparent 45%);
	pointer-events: none;
}

.vrd-stack__rank {
	position: absolute;
	top: -14px; left: -14px;
	width: 46px; height: 46px;
	display: grid; place-items: center;
	background: var(--vrd-brand);
	color: var(--vrd-onbrand);
	border-radius: 14px;
	font-family: "Bricolage Grotesque", system-ui, sans-serif;
	font-weight: 800;
	font-size: 1.15rem;
	box-shadow: var(--vrd-shadow-md);
	transform: translateZ(30px);
}

.vrd-stack__logo {
	height: 56px;
	display: flex;
	align-items: center;
	transform: translateZ(22px);
}
.vrd-stack__logo img { max-height: 56px; width: auto; object-fit: contain; }
.vrd-stack__logo-text {
	font-family: "Bricolage Grotesque", system-ui, sans-serif;
	font-size: 1.4rem;
	font-weight: 800;
	letter-spacing: -0.03em;
}

.vrd-stack__name {
	font-family: "Bricolage Grotesque", system-ui, sans-serif;
	font-size: 1.35rem;
	font-weight: 800;
	letter-spacing: -0.025em;
	margin: 0;
	transform: translateZ(18px);
}
.vrd-stack__name a { color: inherit; text-decoration: none; }

.vrd-stack__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	transform: translateZ(14px);
}

.vrd-stack__bonus {
	padding: .7rem .9rem;
	background: rgba(var(--vrd-brand-rgb), .1);
	border: 1px dashed rgba(var(--vrd-brand-rgb), .4);
	border-radius: var(--vrd-radius-sm);
	font-size: .9rem;
	font-weight: 600;
	transform: translateZ(12px);
}
.vrd-stack__bonus span { display: block; font-size: .72rem; font-weight: 500; color: var(--vrd-ink2); margin-bottom: .15rem; }

.vrd-stack__facts { display: grid; gap: .4rem; font-size: .85rem; color: var(--vrd-ink2); transform: translateZ(8px); }
.vrd-stack__facts div { display: flex; justify-content: space-between; gap: 1rem; }
.vrd-stack__facts strong { color: var(--vrd-ink); font-weight: 600; }

.vrd-stack__foot { margin-top: auto; transform: translateZ(26px); }

/* Load sequence: cards assemble into the stack once, on arrival. */
@media (prefers-reduced-motion: no-preference) {
	.vrd-stack__card { animation: vrd-deal .9s cubic-bezier(.2,.9,.3,1) backwards; animation-delay: calc(var(--i) * 110ms + 150ms); }
}
@keyframes vrd-deal {
	from { opacity: 0; transform: translate3d(0, 60px, -300px) rotateY(-18deg) scale(.9); }
}

/* Pointer tilt is applied to the scene by JS via --rx / --ry. */
.vrd-has-tilt .vrd-stack__scene {
	transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}

@media (max-width: 940px) {
	.vrd-stack { min-height: 0; }
	.vrd-stack__scene { height: auto; }
	.vrd-stack__card { position: relative; inset: auto; transform: none; opacity: 1; margin-bottom: 1rem; animation: none; }
	.vrd-stack__card:not(:first-child) { display: none; }
}

/* --- Ranked ladder ----------------------------------------------------- */
/* The #1 slot is a wide feature; everything below is a compact row. A grid of
   identical cards would hide the ranking, which is the actual content. */

.vrd-toplist { display: grid; gap: 1rem; }

.vrd-feature {
	position: relative;
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr) 230px;
	gap: 2rem;
	align-items: center;
	padding: 1.75rem;
	background: var(--vrd-bg2);
	border: 1px solid var(--vrd-line);
	border-radius: var(--vrd-radius-lg);
	box-shadow: var(--vrd-shadow-md);
	overflow: hidden;
	transition: transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s, border-color .3s;
}
.vrd-feature::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, rgba(var(--vrd-brand-rgb), .07), transparent 55%);
	pointer-events: none;
}
.vrd-feature:hover {
	transform: translateY(-4px);
	border-color: rgba(var(--vrd-brand-rgb), .45);
	box-shadow: var(--vrd-shadow-lg);
}

.vrd-feature__rank {
	position: absolute;
	top: 0; left: 0;
	padding: .3rem .9rem .4rem .75rem;
	background: var(--vrd-brand);
	color: var(--vrd-onbrand);
	border-radius: var(--vrd-radius-lg) 0 var(--vrd-radius) 0;
	font-family: "Bricolage Grotesque", system-ui, sans-serif;
	font-weight: 800;
	font-size: .85rem;
	z-index: 2;
}

.vrd-feature__media { display: grid; gap: .75rem; justify-items: center; text-align: center; }
.vrd-feature__logo {
	width: 100%;
	aspect-ratio: 2 / 1;
	display: grid;
	place-items: center;
	padding: .75rem;
	background: var(--vrd-bg3);
	border-radius: var(--vrd-radius-sm);
	overflow: hidden;
}
.vrd-feature__logo img { max-height: 100%; width: auto; object-fit: contain; }

.vrd-feature__body { min-width: 0; }
.vrd-feature__title { font-size: 1.5rem; margin: 0 0 .35rem; }
.vrd-feature__title a { color: inherit; text-decoration: none; }
.vrd-feature__title a:hover { color: var(--vrd-brand); }

.vrd-feature__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: .9rem; }

.vrd-feature__bonus {
	padding: .65rem .85rem;
	margin-bottom: .9rem;
	background: rgba(var(--vrd-brand-rgb), .09);
	border-left: 3px solid var(--vrd-brand);
	border-radius: 0 var(--vrd-radius-sm) var(--vrd-radius-sm) 0;
	font-weight: 600;
	font-size: .95rem;
}
.vrd-feature__bonus small { display: block; font-weight: 500; color: var(--vrd-ink2); font-size: .78rem; margin-top: .2rem; }

.vrd-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1.5rem; font-size: .9rem; }
.vrd-proscons ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.vrd-proscons li { position: relative; padding-left: 1.4rem; color: var(--vrd-ink2); }
.vrd-proscons li::before {
	position: absolute; left: 0; top: 0;
	font-weight: 700;
}
.vrd-proscons__pro li::before { content: "+"; color: var(--vrd-pos); }
.vrd-proscons__con li::before { content: "−"; color: var(--vrd-neg); }
@media (max-width: 560px) { .vrd-proscons { grid-template-columns: 1fr; } }

.vrd-feature__aside { display: grid; gap: .75rem; justify-items: center; }
.vrd-feature__verdict-label { font-weight: 700; font-size: .95rem; }

@media (max-width: 900px) {
	.vrd-feature { grid-template-columns: 1fr; gap: 1.25rem; padding: 1.5rem 1.25rem 1.25rem; }
	.vrd-feature__media { grid-template-columns: 120px 1fr; justify-items: start; align-items: center; text-align: left; }
	.vrd-feature__aside { justify-items: stretch; }
	.vrd-feature__aside .vrd-dial { justify-self: center; }
}

/* Compact ranked rows */
.vrd-row {
	display: grid;
	grid-template-columns: 44px 120px minmax(0, 1fr) auto auto;
	gap: 1.25rem;
	align-items: center;
	padding: 1rem 1.25rem;
	background: var(--vrd-bg2);
	border: 1px solid var(--vrd-line);
	border-radius: var(--vrd-radius);
	transition: transform .22s cubic-bezier(.2,.8,.3,1), border-color .22s, box-shadow .22s;
}
.vrd-row:hover {
	transform: translateX(4px);
	border-color: rgba(var(--vrd-brand-rgb), .45);
	box-shadow: var(--vrd-shadow-md);
}

.vrd-row__rank {
	font-family: "Bricolage Grotesque", system-ui, sans-serif;
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--vrd-ink2);
	text-align: center;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.04em;
}

.vrd-row__logo {
	aspect-ratio: 2 / 1;
	display: grid;
	place-items: center;
	padding: .4rem;
	background: var(--vrd-bg3);
	border-radius: var(--vrd-radius-sm);
	overflow: hidden;
}
.vrd-row__logo img { max-height: 100%; width: auto; object-fit: contain; }

.vrd-row__body { min-width: 0; }
.vrd-row__title { font-size: 1.1rem; margin: 0 0 .2rem; }
.vrd-row__title a { color: inherit; text-decoration: none; }
.vrd-row__title a:hover { color: var(--vrd-brand); }
.vrd-row__bonus { font-size: .88rem; color: var(--vrd-ink2); }
.vrd-row__meta { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: .3rem; }

@media (max-width: 800px) {
	.vrd-row { grid-template-columns: 40px 90px minmax(0, 1fr); grid-template-areas: "rank logo body" "cta cta cta"; gap: .75rem 1rem; }
	.vrd-row__rank { grid-area: rank; }
	.vrd-row__logo { grid-area: logo; }
	.vrd-row__body { grid-area: body; }
	.vrd-row .vrd-dial { display: none; }
	.vrd-row__cta { grid-area: cta; }
	.vrd-row__cta .vrd-btn { width: 100%; }
}

/* --- Cards (blog, reviews) --------------------------------------------- */

.vrd-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; }

.vrd-card {
	display: flex;
	flex-direction: column;
	background: var(--vrd-bg2);
	border: 1px solid var(--vrd-line);
	border-radius: var(--vrd-radius);
	overflow: hidden;
	transition: transform .28s cubic-bezier(.2,.8,.3,1), box-shadow .28s, border-color .28s;
}
.vrd-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--vrd-shadow-lg);
	border-color: rgba(var(--vrd-brand-rgb), .4);
}

.vrd-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--vrd-bg3); }
.vrd-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.8,.3,1); }
.vrd-card:hover .vrd-card__media img { transform: scale(1.05); }

.vrd-card__cat {
	position: absolute;
	left: .75rem; bottom: .75rem;
	padding: .25rem .65rem;
	background: var(--vrd-bg);
	color: var(--vrd-brand);
	border-radius: 999px;
	font-size: .72rem;
	font-weight: 700;
	text-decoration: none;
}

.vrd-card__body { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; flex: 1; gap: .5rem; }
.vrd-card__title { font-size: 1.15rem; margin: 0; line-height: 1.25; }
.vrd-card__title a { color: inherit; text-decoration: none; }
.vrd-card__title a:hover { color: var(--vrd-brand); }
.vrd-card__excerpt { font-size: .93rem; color: var(--vrd-ink2); margin: 0; }
.vrd-card__meta { margin-top: auto; padding-top: .75rem; font-size: .8rem; color: var(--vrd-ink2); display: flex; gap: .6rem; align-items: center; }
.vrd-card__meta span + span::before { content: "·"; margin-right: .6rem; opacity: .6; }

/* Lead story: first post gets double width on wide screens. */
.vrd-cards--magazine .vrd-card:first-child { grid-column: span 2; }
.vrd-cards--magazine .vrd-card:first-child .vrd-card__media { aspect-ratio: 21 / 9; }
.vrd-cards--magazine .vrd-card:first-child .vrd-card__title { font-size: 1.6rem; }
@media (max-width: 900px) { .vrd-cards--magazine .vrd-card:first-child { grid-column: span 1; } }

/* --- Review items ------------------------------------------------------ */

.vrd-reviews { display: grid; gap: 1rem; }

.vrd-review {
	padding: 1.25rem 1.4rem;
	background: var(--vrd-bg2);
	border: 1px solid var(--vrd-line);
	border-radius: var(--vrd-radius);
	border-left: 3px solid var(--vrd-line);
	transition: border-left-color .25s, transform .25s;
}
.vrd-review:hover { transform: translateX(3px); }
.vrd-review[data-rating="5"], .vrd-review[data-rating="4"] { border-left-color: var(--vrd-pos); }
.vrd-review[data-rating="3"] { border-left-color: var(--vrd-warn); }
.vrd-review[data-rating="2"], .vrd-review[data-rating="1"] { border-left-color: var(--vrd-neg); }

.vrd-review__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.vrd-review__title { font-size: 1.05rem; margin: 0 0 .4rem; }
.vrd-review__text { font-size: .95rem; color: var(--vrd-ink2); margin: 0 0 .75rem; }
.vrd-review__foot { display: flex; align-items: center; gap: .6rem; font-size: .82rem; color: var(--vrd-ink2); }
.vrd-review__avatar { width: 28px; height: 28px; border-radius: 50%; }
.vrd-review__for { font-size: .82rem; }
.vrd-review__for a { font-weight: 600; }

/* --- Rating breakdown bars --------------------------------------------- */

.vrd-breakdown { display: grid; gap: .45rem; }
.vrd-breakdown__row { display: grid; grid-template-columns: 46px 1fr 42px; gap: .75rem; align-items: center; font-size: .85rem; color: var(--vrd-ink2); }
.vrd-breakdown__bar { height: 8px; background: var(--vrd-bg3); border-radius: 999px; overflow: hidden; }
.vrd-breakdown__fill {
	height: 100%;
	width: 0;
	background: var(--vrd-warn);
	border-radius: 999px;
	transition: width 1s cubic-bezier(.16,.84,.32,1);
}
.is-visible .vrd-breakdown__fill { width: var(--pct, 0%); }

/* Sub-score bars on the casino page */
.vrd-subscores { display: grid; gap: .85rem; }
.vrd-subscore__head { display: flex; justify-content: space-between; font-size: .9rem; margin-bottom: .3rem; }
.vrd-subscore__head strong { font-variant-numeric: tabular-nums; }
.vrd-subscore__bar { height: 10px; background: var(--vrd-bg3); border-radius: 999px; overflow: hidden; }
.vrd-subscore__fill {
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--vrd-brand2), var(--vrd-brand));
	transition: width 1.1s cubic-bezier(.16,.84,.32,1);
}
.is-visible .vrd-subscore__fill { width: var(--pct, 0%); }

/* --- Casino single page ------------------------------------------------ */

.vrd-casino-hero {
	position: relative;
	padding-block: clamp(2rem, 4vw, 3.5rem);
	background: linear-gradient(180deg, var(--vrd-bg2), var(--vrd-bg));
	border-bottom: 1px solid var(--vrd-line);
	overflow: hidden;
}
.vrd-casino-hero__inner {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr) 260px;
	gap: 2rem;
	align-items: center;
}
@media (max-width: 900px) {
	.vrd-casino-hero__inner { grid-template-columns: 1fr; gap: 1.5rem; text-align: center; }
	.vrd-casino-hero__inner .vrd-dial { justify-self: center; }
	.vrd-casino-hero__meta { justify-content: center; }
}

.vrd-casino-hero__logo {
	aspect-ratio: 2 / 1;
	display: grid; place-items: center;
	padding: 1rem;
	background: var(--vrd-bg2);
	border: 1px solid var(--vrd-line);
	border-radius: var(--vrd-radius);
	box-shadow: var(--vrd-shadow-md);
}
.vrd-casino-hero__logo img { max-height: 100%; width: auto; object-fit: contain; }

.vrd-casino-hero__meta { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: 1rem; }
.vrd-casino-hero__aside { display: grid; gap: .85rem; justify-items: center; }

.vrd-factgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1px;
	background: var(--vrd-line);
	border: 1px solid var(--vrd-line);
	border-radius: var(--vrd-radius);
	overflow: hidden;
	margin-bottom: 2rem;
}
.vrd-factgrid__item { padding: 1rem 1.1rem; background: var(--vrd-bg2); }
.vrd-factgrid__label { display: block; font-size: .75rem; color: var(--vrd-ink2); margin-bottom: .25rem; }
.vrd-factgrid__value { font-weight: 600; font-size: .98rem; }

/* Sticky verdict panel in the sidebar */
.vrd-verdict-panel {
	position: sticky;
	top: 96px;
	padding: 1.4rem;
	background: var(--vrd-bg2);
	border: 1px solid var(--vrd-line);
	border-radius: var(--vrd-radius);
	box-shadow: var(--vrd-shadow-md);
	display: grid;
	gap: 1rem;
	justify-items: center;
	text-align: center;
}

/* --- FAQ accordion ----------------------------------------------------- */

.vrd-faq { display: grid; gap: .6rem; }
.vrd-faq__item {
	background: var(--vrd-bg2);
	border: 1px solid var(--vrd-line);
	border-radius: var(--vrd-radius-sm);
	overflow: hidden;
}
.vrd-faq__q {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.15rem;
	background: transparent;
	border: 0;
	text-align: left;
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
}
.vrd-faq__q::after {
	content: "";
	flex: none;
	width: 10px; height: 10px;
	border-right: 2px solid var(--vrd-ink2);
	border-bottom: 2px solid var(--vrd-ink2);
	transform: rotate(45deg) translateY(-2px);
	transition: transform .25s;
}
.vrd-faq__q[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-2px); }
.vrd-faq__a { padding: 0 1.15rem 1.15rem; color: var(--vrd-ink2); font-size: .95rem; }
.vrd-faq__a[hidden] { display: none; }

/* --- Forms ------------------------------------------------------------- */

.vrd-field { display: grid; gap: .35rem; margin-bottom: 1rem; }
.vrd-field label { font-weight: 600; font-size: .9rem; }
.vrd-field input[type="text"],
.vrd-field input[type="email"],
.vrd-field input[type="url"],
.vrd-field input[type="password"],
.vrd-field input[type="search"],
.vrd-field textarea,
.vrd-field select {
	width: 100%;
	padding: .75rem .9rem;
	background: var(--vrd-bg3);
	border: 1px solid var(--vrd-line);
	border-radius: var(--vrd-radius-sm);
	color: var(--vrd-ink);
	transition: border-color .2s, box-shadow .2s;
}
.vrd-field input:focus,
.vrd-field textarea:focus,
.vrd-field select:focus {
	outline: none;
	border-color: var(--vrd-brand);
	box-shadow: 0 0 0 3px rgba(var(--vrd-brand-rgb), .2);
}
.vrd-hint, .vrd-counter { font-size: .8rem; color: var(--vrd-ink2); }
.vrd-counter.is-ready { color: var(--vrd-pos); }
.vrd-checkline { font-size: .9rem; margin-bottom: 1rem; }
.vrd-checkline label { display: flex; align-items: flex-start; gap: .5rem; }

/* Honeypot — off-screen rather than display:none, which some bots detect. */
.vrd-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Star input: radios reversed in DOM so a CSS sibling selector can light up
   the stars to the left of the hovered one without any JavaScript. */
.vrd-stars-input { border: 0; padding: 0; margin: 0 0 1.25rem; }
.vrd-stars-input legend { font-weight: 600; font-size: .9rem; margin-bottom: .4rem; padding: 0; }
.vrd-stars-input__row { display: inline-flex; flex-direction: row-reverse; gap: .25rem; }
.vrd-stars-input input { position: absolute; opacity: 0; width: 0; height: 0; }
.vrd-stars-input label { cursor: pointer; padding: 2px; }
.vrd-stars-input svg { width: 30px; height: 30px; fill: var(--vrd-line); transition: fill .15s, transform .15s; }
.vrd-stars-input label:hover svg,
.vrd-stars-input label:hover ~ label svg,
.vrd-stars-input input:checked ~ label svg { fill: var(--vrd-warn); }
.vrd-stars-input label:hover svg { transform: scale(1.15); }
.vrd-stars-input input:focus-visible + label svg { outline: 2px solid var(--vrd-brand); outline-offset: 2px; }

.vrd-review-form-wrap, .vrd-review-gate {
	padding: 1.6rem;
	background: var(--vrd-bg2);
	border: 1px solid var(--vrd-line);
	border-radius: var(--vrd-radius);
	margin-block: 2rem;
}
.vrd-form-foot { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.vrd-form-msg { margin-top: 1rem; }
.vrd-form-msg:empty { margin: 0; }

.vrd-notice { padding: .85rem 1.1rem; border-radius: var(--vrd-radius-sm); font-size: .92rem; margin-bottom: 1rem; }
.vrd-notice--ok { background: rgba(var(--vrd-pos-rgb), .12); color: var(--vrd-pos); border: 1px solid rgba(var(--vrd-pos-rgb), .3); }
.vrd-notice--bad { background: rgba(var(--vrd-neg-rgb), .12); color: var(--vrd-neg); border: 1px solid rgba(var(--vrd-neg-rgb), .3); }

/* --- Auth pages -------------------------------------------------------- */

.vrd-auth { max-width: 440px; margin-inline: auto; padding-block: clamp(2rem, 5vw, 4rem); }
.vrd-auth__card {
	padding: 2rem;
	background: var(--vrd-bg2);
	border: 1px solid var(--vrd-line);
	border-radius: var(--vrd-radius-lg);
	box-shadow: var(--vrd-shadow-lg);
}
.vrd-auth__alt { margin-top: 1.25rem; text-align: center; font-size: .9rem; color: var(--vrd-ink2); }

.vrd-account__head { display: flex; gap: 1.25rem; align-items: center; margin-bottom: 2rem; flex-wrap: wrap; }
.vrd-account__avatar { border-radius: 50%; }
.vrd-account__reviews { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.vrd-account__review { padding: 1.15rem; background: var(--vrd-bg2); border: 1px solid var(--vrd-line); border-radius: var(--vrd-radius); }
.vrd-account__review-head { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .4rem; font-size: .9rem; }
.vrd-account__review-title { font-size: 1.05rem; margin: 0 0 .3rem; }

/* --- Disclosure and responsible gambling ------------------------------- */

.vrd-disclosure {
	display: flex;
	gap: .75rem;
	align-items: flex-start;
	padding: .85rem 1.1rem;
	background: var(--vrd-bg3);
	border: 1px solid var(--vrd-line);
	border-radius: var(--vrd-radius-sm);
	font-size: .85rem;
	color: var(--vrd-ink2);
	margin-bottom: 1.5rem;
}
.vrd-disclosure__icon { width: 18px; height: 18px; flex: none; fill: var(--vrd-ink2); margin-top: 2px; }
.vrd-disclosure p { margin: 0; }
.vrd-disclosure--compact { padding: .6rem .85rem; font-size: .8rem; }

.vrd-rg {
	padding-block: 2rem;
	background: var(--vrd-bg2);
	border-top: 1px solid var(--vrd-line);
}
.vrd-rg__inner { display: flex; gap: 1.5rem; align-items: flex-start; }
.vrd-rg__badge {
	flex: none;
	width: 60px; height: 60px;
	display: grid; place-items: center;
	border: 3px solid var(--vrd-neg);
	border-radius: 50%;
	color: var(--vrd-neg);
	font-family: "Bricolage Grotesque", system-ui, sans-serif;
	font-weight: 800;
	font-size: 1.15rem;
}
.vrd-rg__title { font-size: 1.15rem; margin: 0 0 .35rem; }
.vrd-rg__body p { font-size: .92rem; color: var(--vrd-ink2); margin: 0 0 .5rem; max-width: 75ch; }
.vrd-rg__links { font-size: .88rem; }
.vrd-rg__links a { margin-inline: .15rem; }
@media (max-width: 600px) { .vrd-rg__inner { flex-direction: column; gap: 1rem; } }

/* --- Ads --------------------------------------------------------------- */
/* Height reserved up front. An ad appearing in unreserved space is the
   commonest cause of layout shift on publisher sites. */

.vrd-ad {
	display: grid;
	gap: .35rem;
	justify-items: center;
	margin-block: 2rem;
}
.vrd-ad__label {
	font-size: .65rem;
	letter-spacing: .06em;
	color: var(--vrd-ink2);
	opacity: .7;
}
.vrd-ad__inner {
	width: 100%;
	min-height: var(--ad-h-m, 250px);
	display: grid;
	place-items: center;
	overflow: hidden;
}
@media (min-width: 768px) {
	.vrd-ad__inner { min-height: var(--ad-h-d, 250px); }
}
.vrd-ad--sidebar { margin-block: 0 1.5rem; }

/* --- How we rate strip ------------------------------------------------- */

.vrd-method { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem; }
.vrd-method__item {
	padding: 1.35rem;
	background: var(--vrd-bg2);
	border: 1px solid var(--vrd-line);
	border-radius: var(--vrd-radius);
	transition: transform .25s cubic-bezier(.2,.8,.3,1), border-color .25s;
}
.vrd-method__item:hover { transform: translateY(-4px); border-color: rgba(var(--vrd-brand-rgb), .4); }
.vrd-method__weight {
	font-family: "Bricolage Grotesque", system-ui, sans-serif;
	font-size: 1.9rem;
	font-weight: 800;
	color: var(--vrd-brand);
	letter-spacing: -0.04em;
	line-height: 1;
	display: block;
	margin-bottom: .5rem;
}
.vrd-method__item h3 { font-size: 1.02rem; margin: 0 0 .3rem; }
.vrd-method__item p { font-size: .88rem; color: var(--vrd-ink2); margin: 0; }

/* --- Type shortcuts ---------------------------------------------------- */

.vrd-types { display: flex; flex-wrap: wrap; gap: .65rem; }
.vrd-type {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .6rem 1rem;
	background: var(--vrd-bg2);
	border: 1px solid var(--vrd-line);
	border-radius: 999px;
	text-decoration: none;
	color: var(--vrd-ink);
	font-weight: 600;
	font-size: .92rem;
	transition: transform .2s cubic-bezier(.2,.8,.3,1), border-color .2s, background-color .2s;
}
.vrd-type:hover { transform: translateY(-3px); border-color: var(--vrd-brand); color: var(--vrd-brand); }
.vrd-type span { font-size: .78rem; color: var(--vrd-ink2); font-weight: 500; }

/* --- Breadcrumbs ------------------------------------------------------- */

.vrd-crumbs { padding-block: .9rem; border-bottom: 1px solid var(--vrd-line); font-size: .85rem; }
.vrd-crumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; color: var(--vrd-ink2); }
.vrd-crumbs li:not(:last-child)::after { content: "/"; margin-left: .4rem; opacity: .5; }
.vrd-crumbs a { color: var(--vrd-ink2); text-decoration: none; }
.vrd-crumbs a:hover { color: var(--vrd-brand); }

/* --- Content ----------------------------------------------------------- */

.vrd-content { max-width: 72ch; }
.vrd-content h2 { margin-top: 2.25em; }
.vrd-content h3 { margin-top: 1.75em; }
.vrd-content img { border-radius: var(--vrd-radius-sm); }
.vrd-content ul, .vrd-content ol { padding-left: 1.4rem; margin-bottom: 1.25em; }
.vrd-content li { margin-bottom: .4em; }
.vrd-content blockquote {
	margin: 1.75em 0;
	padding: 1rem 1.35rem;
	border-left: 3px solid var(--vrd-brand);
	background: var(--vrd-bg2);
	border-radius: 0 var(--vrd-radius-sm) var(--vrd-radius-sm) 0;
	font-size: 1.08rem;
}
.vrd-content table { width: 100%; border-collapse: collapse; margin-bottom: 1.5em; font-size: .95rem; }
.vrd-content th, .vrd-content td { padding: .7rem .85rem; border-bottom: 1px solid var(--vrd-line); text-align: left; }
.vrd-content th { background: var(--vrd-bg3); font-weight: 600; }
.vrd-content code {
	padding: .15em .4em;
	background: var(--vrd-bg3);
	border-radius: 4px;
	font-size: .9em;
}
.vrd-content pre { padding: 1rem; background: var(--vrd-bg3); border-radius: var(--vrd-radius-sm); overflow-x: auto; }

.vrd-article__head { padding-block: clamp(2rem, 4vw, 3rem) 1.5rem; }
.vrd-article__meta { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; font-size: .88rem; color: var(--vrd-ink2); margin-bottom: 1rem; }
.vrd-article__lead { margin-bottom: 2rem; border-radius: var(--vrd-radius); overflow: hidden; }

/* --- Sidebar / widgets ------------------------------------------------- */

.vrd-sidebar { display: grid; gap: 1.5rem; align-content: start; }
.vrd-widget {
	padding: 1.35rem;
	background: var(--vrd-bg2);
	border: 1px solid var(--vrd-line);
	border-radius: var(--vrd-radius);
}
.vrd-widget__title { font-size: 1.05rem; margin: 0 0 .9rem; }
.vrd-widget ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.vrd-widget li a { color: var(--vrd-ink); text-decoration: none; font-size: .93rem; }
.vrd-widget li a:hover { color: var(--vrd-brand); }
.vrd-widget--sticky { position: sticky; top: 96px; }

/* --- Pagination -------------------------------------------------------- */

.vrd-pagination { margin-top: 2.5rem; }
.vrd-pagination ul { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; justify-content: center; }
.vrd-pagination a, .vrd-pagination span {
	display: grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding-inline: .75rem;
	background: var(--vrd-bg2);
	border: 1px solid var(--vrd-line);
	border-radius: var(--vrd-radius-sm);
	text-decoration: none;
	color: var(--vrd-ink);
	font-weight: 600;
	font-size: .92rem;
	transition: background-color .2s, border-color .2s, transform .2s;
}
.vrd-pagination a:hover { border-color: var(--vrd-brand); color: var(--vrd-brand); transform: translateY(-2px); }
.vrd-pagination .current { background: var(--vrd-brand); border-color: var(--vrd-brand); color: var(--vrd-onbrand); }

/* --- Footer ------------------------------------------------------------ */

.vrd-footer { background: var(--vrd-bg2); border-top: 1px solid var(--vrd-line); padding-block: clamp(2.5rem, 5vw, 4rem) 0; }
.vrd-footer__cols {
	display: grid;
	grid-template-columns: 1.4fr repeat(3, 1fr);
	gap: 2.5rem;
	padding-bottom: 2.5rem;
}
@media (max-width: 900px) { .vrd-footer__cols { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 560px) { .vrd-footer__cols { grid-template-columns: 1fr; } }

.vrd-footer__about p { font-size: .9rem; color: var(--vrd-ink2); max-width: 40ch; }
.vrd-footer .vrd-widget { background: transparent; border: 0; padding: 0; }

.vrd-footer__social { display: flex; gap: .5rem; margin-top: 1rem; }
.vrd-footer__social a {
	width: 38px; height: 38px;
	display: grid; place-items: center;
	background: var(--vrd-bg3);
	border: 1px solid var(--vrd-line);
	border-radius: var(--vrd-radius-sm);
	transition: transform .2s, border-color .2s;
}
.vrd-footer__social a:hover { transform: translateY(-3px); border-color: var(--vrd-brand); }
.vrd-footer__social svg { width: 17px; height: 17px; fill: var(--vrd-ink2); }
.vrd-footer__social a:hover svg { fill: var(--vrd-brand); }

.vrd-footer__legal { border-top: 1px solid var(--vrd-line); padding-block: 1.25rem; }
.vrd-footer__legal ul { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; list-style: none; margin: 0; padding: 0; font-size: .85rem; }
.vrd-footer__legal a { color: var(--vrd-ink2); text-decoration: none; }
.vrd-footer__legal a:hover { color: var(--vrd-brand); }

.vrd-footer__bar {
	border-top: 1px solid var(--vrd-line);
	padding-block: 1.25rem;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	align-items: center;
	justify-content: space-between;
	font-size: .85rem;
	color: var(--vrd-ink2);
}
.vrd-footer__bar a { font-weight: 600; }

/* --- Mobile bottom bar ------------------------------------------------- */

.vrd-mobilebar {
	position: fixed;
	bottom: 0; left: 0; right: 0;
	z-index: 90;
	display: none;
	background: var(--vrd-glass);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-top: 1px solid var(--vrd-line);
	padding-bottom: env(safe-area-inset-bottom);
}
.vrd-mobilebar ul { display: flex; list-style: none; margin: 0; padding: 0; }
.vrd-mobilebar li { flex: 1; }
.vrd-mobilebar a {
	display: grid;
	place-items: center;
	gap: 2px;
	padding: .6rem .25rem;
	font-size: .7rem;
	font-weight: 600;
	color: var(--vrd-ink2);
	text-decoration: none;
}
.vrd-mobilebar a:hover, .vrd-mobilebar .current-menu-item a { color: var(--vrd-brand); }
@media (max-width: 700px) {
	.vrd-mobilebar { display: block; }
	body { padding-bottom: 60px; }
}

/* --- Age gate ---------------------------------------------------------- */

.vrd-agegate {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	padding: 1.5rem;
	background: rgba(var(--vrd-bg-rgb), .96);
	backdrop-filter: blur(8px);
}
.vrd-agegate__card {
	max-width: 440px;
	padding: 2rem;
	text-align: center;
	background: var(--vrd-bg2);
	border: 1px solid var(--vrd-line);
	border-radius: var(--vrd-radius-lg);
	box-shadow: var(--vrd-shadow-lg);
}
.vrd-agegate__actions { display: flex; gap: .75rem; justify-content: center; margin-top: 1.5rem; flex-wrap: wrap; }

/* --- Empty states ------------------------------------------------------ */

.vrd-empty {
	padding: 3rem 1.5rem;
	text-align: center;
	background: var(--vrd-bg2);
	border: 1px dashed var(--vrd-line);
	border-radius: var(--vrd-radius);
}
.vrd-empty p { color: var(--vrd-ink2); margin-bottom: 1rem; }

/* --- Scroll reveal ----------------------------------------------------- */
/* One shared mechanism rather than per-section animations. */

@media (prefers-reduced-motion: no-preference) {
	.vrd-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.3,1); }
	.vrd-reveal.is-visible { opacity: 1; transform: none; }
}

/* --- Reduced motion ---------------------------------------------------- */
/* Anyone who has asked the OS for less motion gets the layout without the
   movement. Transitions that communicate state (dial sweeps, bar fills) are
   collapsed to instant rather than removed, so the information still lands. */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	.vrd-stack__card { transform: none !important; position: relative; inset: auto; opacity: 1; margin-bottom: 1rem; }
	.vrd-stack__card:not(:first-child) { display: none; }
	.vrd-stack__scene { height: auto; }
}

/* --- Print ------------------------------------------------------------- */

@media print {
	.vrd-header, .vrd-footer, .vrd-ad, .vrd-mobilebar, .vrd-review-form-wrap, .vrd-stack { display: none !important; }
	body { background: #fff; color: #000; }
}