/**
 * 2026 homepage (site root).
 *
 * Everything is scoped under .hv2 so nothing leaks into the live site.
 * Markup: pages/new-home-2026.php + template-blocks/home-v2/.
 *
 * @package Bringits
 */

/* ==========================================================================
   Tokens
   ========================================================================== */

.hv2 {
	--hv2-primary: #291154;
	--hv2-deep: #220d47;
	--hv2-dark: #1e0c3f;
	--hv2-mid: #45225d;
	--hv2-highlight: #311858;
	--hv2-yellow: #f8c02d;
	--hv2-white: #ffffff;

	/* Derived tints of the brand purple (light surfaces, borders, readable accents). */
	--hv2-violet: #5b2d8e;
	--hv2-tint: #f6f3fb;
	--hv2-tint-strong: #efe9f7;
	--hv2-border: #e6e0ef;
	--hv2-border-strong: #cfc4e0;
	--hv2-ink: #1e0c3f;
	--hv2-body: #4f4563;
	--hv2-muted: #6f6683;

	--hv2-on-dark: #ffffff;
	--hv2-on-dark-body: rgba(255, 255, 255, 0.76);
	--hv2-on-dark-muted: rgba(255, 255, 255, 0.56);
	--hv2-on-dark-line: rgba(255, 255, 255, 0.12);

	--hv2-radius: 8px;
	--hv2-radius-card: 12px;
	--hv2-shadow: 0 1px 2px rgba(30, 12, 63, 0.04), 0 8px 24px rgba(30, 12, 63, 0.06);

	--hv2-max: 1200px;
	--hv2-gutter: clamp(16px, 4vw, 32px);
	/* Section rhythm on an 8px grid: 96 desktop, ~72 tablet, 56 phone. */
	--hv2-section-y: clamp(56px, 6.67vw, 96px);

	width: 100%;
	overflow-x: clip;
	font-family: Inter, Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.55;
	color: var(--hv2-body);
	-webkit-font-smoothing: antialiased;
}

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

/* :where() keeps the reset at element specificity so component classes win. */
:where(.hv2) :where(h1, h2, h3, p, ul, dl, dd, figure, blockquote) {
	margin: 0;
	padding: 0;
}

:where(.hv2) ul {
	list-style: none;
}

:where(.hv2) img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Visually hidden, still read by screen readers. */
.hv2 .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.hv2-container {
	width: 100%;
	max-width: calc(var(--hv2-max) + 2 * var(--hv2-gutter));
	margin: 0 auto;
	padding: 0 var(--hv2-gutter);
}

.hv2-section {
	position: relative;
	padding: var(--hv2-section-y) 0;
}

.hv2-light {
	background: var(--hv2-white);
	color: var(--hv2-body);
}

.hv2-light.hv2-tint {
	background: var(--hv2-tint);
}

.hv2-dark {
	background:
		radial-gradient(ellipse 60% 70% at 85% 30%, rgba(69, 34, 93, 0.9) 0%, rgba(69, 34, 93, 0) 70%),
		linear-gradient(165deg, var(--hv2-primary) 0%, var(--hv2-dark) 55%, var(--hv2-deep) 100%);
	color: var(--hv2-on-dark-body);
}

/* ==========================================================================
   Section header
   ========================================================================== */

.hv2-head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
	max-width: 580px;
}

.hv2-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--hv2-violet);
}

.hv2-eyebrow::before {
	content: '';
	flex: none;
	width: 20px;
	height: 2px;
	background: var(--hv2-yellow);
}

.hv2-dark .hv2-eyebrow {
	color: var(--hv2-yellow);
}

.hv2-title {
	margin: 0;
	font-family: inherit;
	font-weight: 700;
	color: var(--hv2-ink);
	text-wrap: balance;
}

.hv2-title--h1 {
	font-size: clamp(2.75rem, 1.4rem + 4.6vw, 5rem);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.035em;
}

.hv2-title--h2 {
	font-size: clamp(2rem, 1.3rem + 2.3vw, 3.25rem);
	line-height: 1.08;
	letter-spacing: -0.025em;
}

.hv2-dark .hv2-title {
	color: var(--hv2-on-dark);
}

.hv2-hl {
	color: var(--hv2-violet);
}

.hv2-dark .hv2-hl {
	color: var(--hv2-yellow);
}

/* Lighter weight for part of a heading (hero: "Web Data"). */
.hv2-regular {
	font-weight: 400;
}

/* Line break only on wider screens; on phones the line wraps naturally. */
@media (max-width: 640px) {
	.hv2-br-desktop {
		display: none;
	}
}

.hv2-lede {
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
	line-height: 1.6;
	color: var(--hv2-body);
}

.hv2-dark .hv2-lede {
	color: var(--hv2-on-dark-body);
}

.hv2-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 10px;
}

.hv2-head .hv2-actions {
	margin-top: 8px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.hv2-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 12px 22px;
	border: 1.5px solid transparent;
	border-radius: var(--hv2-radius);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.hv2-btn .hv2-icon {
	width: 18px;
	height: 18px;
	transition: transform 0.2s ease;
}

.hv2-btn:hover .hv2-icon {
	transform: translateX(3px);
}

.hv2-btn:focus-visible {
	outline: 3px solid var(--hv2-violet);
	outline-offset: 3px;
}

.hv2-dark .hv2-btn:focus-visible {
	outline-color: var(--hv2-yellow);
}

.hv2-btn--primary {
	background: var(--hv2-yellow);
	color: var(--hv2-dark);
}

.hv2-btn--primary:hover {
	background: #ffcd45;
	color: var(--hv2-dark);
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(248, 192, 45, 0.28);
}

.hv2-btn--secondary {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.45);
	color: var(--hv2-white);
}

.hv2-btn--secondary:hover {
	border-color: var(--hv2-white);
	background: rgba(255, 255, 255, 0.06);
	color: var(--hv2-white);
}

.hv2-btn--ghost {
	background: transparent;
	border-color: var(--hv2-primary);
	color: var(--hv2-primary);
}

.hv2-btn--ghost:hover {
	background: var(--hv2-primary);
	color: var(--hv2-white);
}

/* ==========================================================================
   Icons
   ========================================================================== */

.hv2-icon {
	display: block;
	width: 22px;
	height: 22px;
	flex: none;
}

/* ==========================================================================
   Visual placeholder (development only)
   ========================================================================== */

.hv2-ph {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: var(--hv2-radius-card);
	border: 1px solid var(--hv2-border-strong);
	background-color: var(--hv2-tint);
	background-image:
		linear-gradient(rgba(41, 17, 84, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(41, 17, 84, 0.06) 1px, transparent 1px);
	background-size: 32px 32px;
	background-position: center;
}

.hv2-ph--dark {
	border-color: rgba(255, 255, 255, 0.14);
	background-color: rgba(30, 12, 63, 0.55);
	background-image:
		radial-gradient(ellipse 70% 60% at 60% 40%, rgba(248, 192, 45, 0.08), transparent 70%),
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: auto, 32px 32px, 32px 32px;
}

/* Thin "data line" accent across the placeholder. */
.hv2-ph::after {
	content: '';
	position: absolute;
	left: 8%;
	right: 8%;
	top: 62%;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(248, 192, 45, 0.7), transparent);
	pointer-events: none;
}

.hv2-ph--schematic::after {
	display: none;
}

.hv2-ph__label {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	max-width: 82%;
	padding: 12px 16px;
	border-radius: 6px;
	border: 1px solid var(--hv2-border-strong);
	background: rgba(255, 255, 255, 0.85);
	text-align: center;
}

.hv2-ph__title {
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.06em;
	color: var(--hv2-mid);
}

.hv2-ph__note {
	font-size: 12px;
	line-height: 1.4;
	color: var(--hv2-muted);
}

.hv2-ph--dark .hv2-ph__label {
	border-color: rgba(255, 255, 255, 0.18);
	background: rgba(30, 12, 63, 0.75);
}

.hv2-ph--dark .hv2-ph__title {
	color: var(--hv2-white);
}

.hv2-ph--dark .hv2-ph__note {
	color: var(--hv2-on-dark-muted);
}

/* Schematic variant: label moves to the corner, schematic fills the box. */
.hv2-ph--schematic {
	align-items: stretch;
}

.hv2-ph--schematic .hv2-ph__label {
	position: absolute;
	top: 12px;
	left: 12px;
	max-width: calc(100% - 24px);
	padding: 6px 10px;
	align-items: flex-start;
}

.hv2-ph__schematic {
	width: 100%;
	display: flex;
	align-items: center;
	padding: 64px clamp(16px, 3vw, 32px) clamp(16px, 3vw, 32px);
}

/* ==========================================================================
   Hero + final CTA
   ========================================================================== */

.hv2-hero {
	padding: clamp(56px, 8vw, 120px) 0;
}

.hv2-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(32px, 5vw, 72px);
}

/* Full-bleed mountain artwork (hero only). Peak + data path sit on the right. */
.hv2-hero {
	display: flex;
	align-items: center;
	/* Holds the height the hero had with the eyebrow + capability row (removed):
	   1920 -> 682, 1440 -> 580, 1100 -> 529, 768 -> 480. */
	min-height: min(720px, max(480px, 35.5vw, calc(364px + 15vw)));
	padding: clamp(48px, 5vw, 80px) 0;
	overflow: hidden;
	background: var(--hv2-dark);
}

.hv2-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center;
	pointer-events: none;
}

/* Left-side scrim keeps the copy readable over the artwork. */
.hv2-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(30, 12, 63, 0.85) 0%, rgba(30, 12, 63, 0.55) 30%, rgba(30, 12, 63, 0) 52%),
		linear-gradient(0deg, rgba(30, 12, 63, 0.55) 0%, rgba(30, 12, 63, 0) 30%);
	pointer-events: none;
}

.hv2-hero .hv2-hero__grid {
	position: relative;
	z-index: 1;
	grid-template-columns: minmax(0, 620px);
}

.hv2-hero__text {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.hv2-hero .hv2-head {
	max-width: 620px;
}

/* 16px between the H1 and the subtitle. */
.hv2-hero:not(.hv2-hero--final) .hv2-head {
	gap: 16px;
}

.hv2-hero .hv2-lede {
	max-width: 480px;
	font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
}

.hv2-hero__text > .hv2-actions {
	margin-top: 0;
}

/* Final CTA reuses the hero's full-bleed artwork treatment (summit + light trail). */
.hv2-section.hv2-hero--final {
	background: #08022e;
}

/* Closing band: compact, centered copy over the full-bleed artwork. The light
   trail stays bright on the left and the summit on the right; only a soft
   center vignette sits behind the copy so the image keeps its own colors. */
.hv2-section.hv2-hero--final {
	min-height: 0;
	padding: clamp(48px, 4.6vw, 72px) 0;
}

.hv2-hero--final .hv2-hero__bg {
	object-position: center;
}

.hv2-hero--final::before {
	background: radial-gradient(ellipse 38% 70% at 50% 50%, rgba(8, 2, 46, 0.6) 0%, rgba(8, 2, 46, 0) 100%);
}

.hv2-hero--final .hv2-hero__grid {
	justify-items: center;
	grid-template-columns: minmax(0, 720px);
	justify-content: center;
}

.hv2-hero--final .hv2-hero__text {
	align-items: center;
	gap: 24px;
	text-align: center;
}

.hv2-hero--final .hv2-head {
	align-items: center;
	gap: 14px;
	max-width: none;
}

.hv2-hero--final .hv2-actions {
	justify-content: center;
}

.hv2-hero--final .hv2-lede {
	max-width: none;
}

@media (max-width: 640px) {
	/* Mobile: copy on top, summit as a band below (same pattern as the hero). */
	.hv2-section.hv2-hero--final {
		padding: 48px 0 260px;
	}

	.hv2-hero--final .hv2-hero__bg {
		object-position: 85% center;
	}
}

/* Stack: artwork < scrim < copy (the img comes later in the DOM than ::before). */
.hv2-hero--final .hv2-hero__bg {
	z-index: 0;
}

.hv2-hero--final::before {
	z-index: 1;
}

.hv2-hero--final .hv2-hero__grid {
	z-index: 2;
}

@media (prefers-reduced-motion: no-preference) {
	.hv2-hero:not(.hv2-hero--final) .hv2-hero__text > * {
		animation: hv2-rise 0.6s ease-out both;
	}

	.hv2-hero:not(.hv2-hero--final) .hv2-hero__text > *:nth-child(2) {
		animation-delay: 0.08s;
	}

	.hv2-hero:not(.hv2-hero--final) .hv2-hero__text > *:nth-child(3) {
		animation-delay: 0.16s;
	}

	.hv2-hero:not(.hv2-hero--final) .hv2-hero__bg {
		animation: hv2-fade 0.9s ease-out both;
	}

	/* Final CTA: same fade/rise as the hero, but played when the band scrolls into
	   view (assets/js/home-v2.js adds .is-inview). Only hidden once JS has marked
	   the page with .hv2-js, so the band is fully visible without JS. */
	.hv2-js .hv2-hero--final:not(.is-inview) .hv2-hero__bg,
	.hv2-js .hv2-hero--final:not(.is-inview) .hv2-hero__text > * {
		opacity: 0;
	}

	/* Slower than the hero so the reveal reads as a deliberate closing moment. */
	.hv2-hero--final.is-inview .hv2-hero__bg {
		animation: hv2-fade 2s ease-out both;
	}

	.hv2-hero--final.is-inview .hv2-hero__text > * {
		animation: hv2-rise-slow 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
	}

	.hv2-hero--final.is-inview .hv2-hero__text > *:nth-child(2) {
		animation-delay: 0.65s;
	}
}

@keyframes hv2-rise {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes hv2-rise-slow {
	from {
		opacity: 0;
		transform: translateY(28px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes hv2-fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* ==========================================================================
   Hero: light climbing the mountain trail
   A glowing comet travels the traced trail to the summit, then the sun flares.
   Runs once ~1.2s after load, then repeats every 8s. Hidden on mobile (the
   artwork is cropped differently there) and for reduced motion.
   ========================================================================== */

.hv2-hero__trail {
	display: none;
}

@media (min-width: 641px) and (prefers-reduced-motion: no-preference) {
	.hv2-hero__trail {
		display: block;
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
	}

	.hv2-trail__tail,
	.hv2-trail__head {
		fill: none;
		stroke-linecap: round;
		animation: hv2-trail-tail 8s linear 1.2s infinite both;
	}

	/* The trail's core is already near-white in the artwork, so the light reads
	   through a wide blurred halo that lights up the dark slope beside it
	   (measured: ~3x brighter 30px off the trail). pathLength = 1000 units. */
	.hv2-trail__tail {
		stroke: #ffe9a8;
		stroke-width: 60;
		stroke-opacity: 0.75;
		stroke-dasharray: 110 3000;
	}

	/* Bright core at the halo's leading edge (offset = tail offset - 76). */
	.hv2-trail__head {
		stroke: #ffffff;
		stroke-width: 7;
		stroke-dasharray: 34 3000;
		animation-name: hv2-trail-head;
	}

	.hv2-trail__flare {
		opacity: 0;
		transform-box: fill-box;
		transform-origin: center;
		animation: hv2-trail-flare 8s ease-out 1.2s infinite both;
	}
}

/* Travel in the first 35% of the cycle (2.8s), then rest. */
@keyframes hv2-trail-tail {
	0% {
		stroke-dashoffset: 110;
		animation-timing-function: cubic-bezier(0.45, 0, 0.3, 1);
	}
	35% {
		stroke-dashoffset: -1000;
	}
	100% {
		stroke-dashoffset: -1000;
	}
}

@keyframes hv2-trail-head {
	0% {
		stroke-dashoffset: 34;
		animation-timing-function: cubic-bezier(0.45, 0, 0.3, 1);
	}
	35% {
		stroke-dashoffset: -1076;
	}
	100% {
		stroke-dashoffset: -1076;
	}
}

/* Sun flares as the light arrives at the summit. */
@keyframes hv2-trail-flare {
	0%,
	30% {
		opacity: 0;
		transform: scale(0.6);
	}
	36% {
		opacity: 1;
		transform: scale(1);
	}
	55% {
		opacity: 0;
		transform: scale(1.25);
	}
	100% {
		opacity: 0;
		transform: scale(1.25);
	}
}

/* ==========================================================================
   Trusted strip
   ========================================================================== */

.hv2-trusted {
	padding: 40px 0;
	border-bottom: 1px solid var(--hv2-border);
}

.hv2-trusted__label {
	margin-bottom: 24px;
	font-size: 12px;
}

.hv2-trusted__logos {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 12px;
}

/* Real logo: 320x120 canvas (8:3) scaled into the cell, no frame. */
.hv2-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
}

.hv2-logo img {
	width: 100%;
	max-width: 160px;
	height: auto;
}

.hv2-logo-ph {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 8px 10px;
	border: 1px dashed var(--hv2-border-strong);
	border-radius: 6px;
	text-align: center;
}

.hv2-logo-ph__name {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--hv2-muted);
}

.hv2-logo-ph__tag {
	position: absolute;
	top: 3px;
	right: 6px;
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: #a79fb8;
}

/* ==========================================================================
   Cards
   ========================================================================== */

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

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

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

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

.hv2-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px;
	background: var(--hv2-white);
	border: 1px solid var(--hv2-border);
	border-radius: var(--hv2-radius-card);
	box-shadow: var(--hv2-shadow);
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.hv2-card__icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 8px;
	border-radius: 10px;
	background: var(--hv2-tint-strong);
	color: var(--hv2-mid);
}

.hv2-card__icon::after {
	content: '';
	position: absolute;
	right: -3px;
	bottom: -3px;
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: var(--hv2-yellow);
}

.hv2-card__title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--hv2-ink);
}

.hv2-card__title a {
	color: inherit;
	text-decoration: none;
}

.hv2-card__copy {
	font-size: 15px;
	line-height: 1.55;
	color: var(--hv2-body);
}

.hv2-card__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 12px;
	font-size: 15px;
	font-weight: 600;
	color: var(--hv2-primary);
}

.hv2-card__more .hv2-icon {
	width: 18px;
	height: 18px;
	color: var(--hv2-violet);
	transition: transform 0.2s ease;
}

/* Whole card clickable through the heading link. */
.hv2-card--link .hv2-card__title a::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.hv2-card--link:hover {
	border-color: var(--hv2-border-strong);
	transform: translateY(-2px);
}

.hv2-card--link:hover .hv2-card__more .hv2-icon {
	transform: translateX(3px);
}

.hv2-card--link:focus-within {
	outline: 3px solid var(--hv2-violet);
	outline-offset: 2px;
}

.hv2-card--link .hv2-card__title a:focus-visible {
	outline: none;
}

/* ==========================================================================
   Benefits
   ========================================================================== */

.hv2-benefits {
	display: grid;
	gap: 24px;
}

.hv2-benefits--row {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.hv2-benefit {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.hv2-benefits--row .hv2-benefit {
	flex-direction: column;
	gap: 12px;
}

.hv2-benefit__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--hv2-tint-strong);
	color: var(--hv2-mid);
}

.hv2-benefit__title {
	margin-bottom: 4px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--hv2-ink);
}

.hv2-benefit__copy {
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--hv2-muted);
}

.hv2-dark .hv2-benefit__icon {
	background: rgba(248, 192, 45, 0.1);
	border: 1px solid rgba(248, 192, 45, 0.25);
	color: var(--hv2-yellow);
}

.hv2-dark .hv2-benefit__title {
	color: var(--hv2-on-dark);
}

.hv2-dark .hv2-benefit__copy {
	color: var(--hv2-on-dark-muted);
}

/* Outline variant: bare violet outline icon, purple titles (Scale concept). */
.hv2-benefits--outline .hv2-benefit {
	gap: 16px;
}

.hv2-benefits--outline .hv2-benefit__icon {
	width: 40px;
	height: 40px;
	border-radius: 0;
	background: none;
	color: #7a4fe0;
}

.hv2-benefits--outline .hv2-benefit__icon .hv2-icon {
	width: 40px;
	height: 40px;
	stroke-width: 1.4;
}

.hv2-benefits--outline .hv2-benefit__title {
	color: var(--hv2-mid);
}

/* Badge variant: filled badge icons on dark, no tile (Infrastructure concept). */
.hv2-benefits--badge .hv2-benefit {
	gap: 16px;
	align-items: center;
}

.hv2-dark .hv2-benefits--badge .hv2-benefit__icon,
.hv2-benefits--badge .hv2-benefit__icon {
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 0;
	background: none;
	filter: drop-shadow(0 0 10px rgba(139, 92, 240, 0.45));
}

.hv2-benefits--badge .hv2-benefit__icon .hv2-icon {
	width: 44px;
	height: 44px;
}

.hv2-benefits--badge .hv2-benefit:first-child .hv2-benefit__icon {
	filter: drop-shadow(0 0 10px rgba(248, 192, 45, 0.4));
}

/* ==========================================================================
   Beyond Access
   ========================================================================== */

/* Same white background as the logo strip above (which already has a divider),
   so the two read as one block: one gap, not two stacked paddings (40 + 64). */
.hv2-section.hv2-access {
	padding-top: clamp(40px, 4.45vw, 64px);
}

/* Header on top, then one full-width row of 4 capability cards: each card gets
   the whole container width to share (~285px at 1440 vs ~180px beside the copy),
   so illustrations and titles read larger. */
.hv2-access__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(32px, 4vw, 48px);
}

.hv2-access .hv2-head {
	max-width: 640px;
}

.hv2-access .hv2-cards--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(16px, 1.6vw, 24px);
}

/* Illustration slot matches the 3:2 artwork, so it fills the card width. */
.hv2-access .hv2-card__media {
	aspect-ratio: 3 / 2;
}

.hv2-access .hv2-card {
	padding: 12px 12px 20px;
	gap: 8px;
}

.hv2-access .hv2-card__title,
.hv2-access .hv2-card__copy {
	padding: 0 6px;
}

/* Illustration slot at the top of each card (final isometric art pending). */
.hv2-card__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	margin-bottom: 8px;
	border-radius: 8px;
	background:
		radial-gradient(ellipse 60% 60% at 50% 45%, rgba(91, 45, 142, 0.14), transparent 70%),
		var(--hv2-tint);
	color: var(--hv2-violet);
}

.hv2-card__media .hv2-icon {
	width: 40px;
	height: 40px;
	stroke-width: 1.5;
}

.hv2-card__media::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 22%;
	width: 28px;
	height: 2px;
	transform: translateX(-50%);
	background: var(--hv2-yellow);
}

/* Final illustration: white-background art, so contain on white avoids cropping. */
.hv2-card__media--img {
	background: var(--hv2-white);
	overflow: hidden;
}

.hv2-card__media--img::after {
	display: none;
}

.hv2-card__media--img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.hv2-card__media-label {
	position: absolute;
	left: 8px;
	bottom: 6px;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: #a79fb8;
}

/* ==========================================================================
   Beyond Speed
   ========================================================================== */

.hv2-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

/* Speed: artwork spans the top of the section; its edges are #080232, so the
   section uses that flat color to blend seamlessly. Panels sit on the right. */
.hv2-speed {
	--hv2-speed-top: clamp(56px, 6.5vw, 96px);
	padding-top: var(--hv2-speed-top);
	padding-bottom: clamp(40px, 4vw, 64px);
	background: #080232;
	overflow: hidden;
}

.hv2-speed__bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	pointer-events: none;
}

.hv2-speed .hv2-container {
	position: relative;
	z-index: 1;
}

/* Soft scrim behind the copy so streaks don't compete with the lede (desktop). */
.hv2-speed::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 35.55vw;
	background: linear-gradient(90deg, rgba(8, 2, 50, 0.85) 0%, rgba(8, 2, 50, 0.6) 30%, rgba(8, 2, 50, 0) 50%);
	pointer-events: none;
}

/* Copy sits top-aligned so its center lands at ~42% of the artwork height,
   level with the panels and above the diagonal light streaks. */
.hv2-speed .hv2-split {
	grid-template-columns: minmax(0, 520px);
	align-items: start;
	padding-top: 2.4vw;
	/* Ends ~45px above the artwork's bottom edge (dark there), so the metrics row
	   sits close to the copy without competing with the panels. */
	min-height: min(calc(30.7vw - var(--hv2-speed-top)), 400px);
}

.hv2-speed .hv2-metrics {
	margin-top: 32px;
}

.hv2-metrics {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-top: clamp(32px, 4vw, 56px);
}

/* Icon left, value over label (matches the homepage concept). */
.hv2-metric {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		'icon value'
		'icon label';
	align-items: center;
	column-gap: 14px;
	row-gap: 4px;
	padding: 4px clamp(12px, 1.8vw, 24px);
	border-left: 1px solid var(--hv2-on-dark-line);
}

.hv2-metric:first-child {
	padding-left: 0;
	border-left: 0;
}

/* Large outline icon in bright violet with a soft glow (homepage concept). */
.hv2-metric__icon {
	grid-area: icon;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #9a6cf5;
	filter: drop-shadow(0 0 8px rgba(154, 108, 245, 0.55));
}

.hv2-metric__icon .hv2-icon {
	width: clamp(40px, 3.6vw, 52px);
	height: clamp(40px, 3.6vw, 52px);
	stroke-width: 1.6;
}

.hv2-metric__value {
	grid-area: value;
	align-self: end;
	font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--hv2-white);
}

.hv2-metric__label {
	grid-area: label;
	align-self: start;
	font-size: 14px;
	line-height: 1.35;
	color: var(--hv2-on-dark-body);
}

/* One-time emphasis when the highlighted metric (99.9%) finishes counting. */
.hv2-metric--highlight.is-highlighted .hv2-metric__value {
	animation: hv2-glow 1.6s ease-out 1;
}

@keyframes hv2-glow {
	0% {
		color: var(--hv2-white);
		text-shadow: none;
	}
	25% {
		color: var(--hv2-yellow);
		text-shadow: 0 0 18px rgba(248, 192, 45, 0.55);
	}
	100% {
		color: var(--hv2-white);
		text-shadow: none;
	}
}

.hv2-draft-mark {
	margin-left: 2px;
	font-size: 0.45em;
	vertical-align: super;
	color: var(--hv2-yellow);
}

/* ==========================================================================
   Beyond Speed: data-flow pulses
   Light pulses travel along the artwork's light trails toward (and out of) the
   panels. The overlay box matches the artwork exactly (2000x711), so each path
   is placed in artwork coordinates. Desktop only; off for reduced motion.
   ========================================================================== */

.hv2-speed__flow {
	display: none;
}

@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
	.hv2-speed__flow {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		aspect-ratio: 2000 / 711;
		pointer-events: none;
	}

	/* Pulses wait for the section: hidden and paused until .is-inview (added by
	   assets/js/home-v2.js), then the layer fades in and the first pulses start. */
	.hv2-speed__flow {
		transition: opacity 1.4s ease-out;
	}

	.hv2-js .hv2-speed:not(.is-inview) .hv2-speed__flow {
		opacity: 0;
	}

	.hv2-js .hv2-speed:not(.is-inview) .hv2-flow i {
		animation-play-state: paused;
	}

	.hv2-flow {
		position: absolute;
		height: 8px;
		margin-top: -4px;
		overflow: hidden;
		transform-origin: 0 50%;
	}

	/* The pulse: a short comet with a bright head, ~22% of its path long. */
	.hv2-flow i {
		position: absolute;
		top: 50%;
		left: 0;
		width: 22%;
		height: 2px;
		margin-top: -1px;
		border-radius: 2px;
		background: linear-gradient(90deg, rgba(248, 192, 45, 0) 0%, rgba(248, 192, 45, 0.85) 75%, #fff6d8 100%);
		box-shadow: 0 0 6px 1px rgba(248, 192, 45, 0.55);
		/* Distance to clear the path end = 100% of path / comet width. */
		--hv2-travel: 460%;
		transform: translateX(-100%);
		opacity: 0;
		animation: hv2-pulse 3.2s cubic-bezier(0.45, 0, 0.25, 1) infinite;
	}

	.hv2-flow i:nth-child(2) {
		background: linear-gradient(90deg, rgba(185, 160, 238, 0) 0%, rgba(185, 160, 238, 0.85) 75%, #ffffff 100%);
		box-shadow: 0 0 6px 1px rgba(154, 108, 245, 0.6);
		animation-delay: 1.7s;
		animation-duration: 3.6s;
	}

	.hv2-flow--in i {
		--hv2-travel: 225%;
		width: 45%;
	}

	.hv2-flow--out-a i {
		animation-delay: 1.1s;
		animation-duration: 2.8s;
	}

	.hv2-flow--out-b i {
		--hv2-travel: 390%;
		width: 26%;
		background: linear-gradient(90deg, rgba(185, 160, 238, 0) 0%, rgba(185, 160, 238, 0.8) 75%, #ffffff 100%);
		box-shadow: 0 0 6px 1px rgba(154, 108, 245, 0.55);
		animation-delay: 2.3s;
		animation-duration: 3.4s;
	}

	.hv2-flow--in {
		left: 38.00%;
		top: 49.51%;
		width: 9.19%;
		transform: rotate(-11.6deg);
	}

	.hv2-flow--out-a {
		left: 74.00%;
		top: 26.72%;
		width: 26.50%;
		transform: rotate(-11.1deg);
	}

	.hv2-flow--out-b {
		left: 86.25%;
		top: 33.05%;
		width: 14.55%;
		transform: rotate(-19.1deg);
	}
}

/* Travel the full path in the first ~60% of the cycle, then rest (intermittent flow). */
@keyframes hv2-pulse {
	0% {
		transform: translateX(-100%);
		opacity: 0;
	}
	8% {
		opacity: 1;
	}
	52% {
		opacity: 1;
	}
	60% {
		transform: translateX(var(--hv2-travel, 460%));
		opacity: 0;
	}
	100% {
		transform: translateX(var(--hv2-travel, 460%));
		opacity: 0;
	}
}

/* ==========================================================================
   Three-column layouts (Scale, Infrastructure)
   ========================================================================== */

.hv2-tri {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 0.85fr);
	gap: clamp(32px, 4vw, 56px);
	align-items: center;
}

/* Scale: on desktop the wide artwork sits centered behind the columns. Its
   width (72vw) keeps the side panels between the copy and the benefits list.
   Below 1101px the inline illustration (.hv2-visual) takes over. */
.hv2-scale__bg {
	display: none;
}

@media (min-width: 1101px) {
	/* The artwork's soft white edges act as the section's padding, so the
	   section shrinks to roughly the artwork height. */
	.hv2-scale {
		padding: clamp(32px, 3.4vw, 56px) 0;
		overflow: hidden;
	}

	.hv2-scale__bg {
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		width: min(72vw, 1180px);
		height: auto;
		transform: translate(-50%, -50%);
		pointer-events: none;
	}

	.hv2-scale__base {
		display: block;
		width: 100%;
		height: auto;
	}

	.hv2-scale__panel {
		position: absolute;
		height: auto;
	}

	/* Panels drift a few px up and down, each on its own rhythm so the
	   group never moves in lockstep. */
	@media (prefers-reduced-motion: no-preference) {
		.hv2-scale__panel {
			animation: hv2-panel-float 4.5s ease-in-out infinite alternate;
			will-change: transform;
		}

		.hv2-scale__panel--1 { animation-duration: 4.6s; animation-delay: -1.1s; }
		.hv2-scale__panel--2 { animation-duration: 5.4s; animation-delay: -3.6s; }
		.hv2-scale__panel--3 { animation-duration: 4.2s; animation-delay: -2.2s; }
		.hv2-scale__panel--4 { animation-duration: 5s; animation-delay: -4.9s; }
		.hv2-scale__panel--5 { animation-duration: 3.9s; animation-delay: -0.4s; }
		.hv2-scale__panel--6 { animation-duration: 5.2s; animation-delay: -2.9s; }
		.hv2-scale__panel--7 { animation-duration: 4.8s; animation-delay: -5.3s; }
		.hv2-scale__panel--8 { animation-duration: 5.6s; animation-delay: -1.7s; }
		.hv2-scale__panel--9 { animation-duration: 4.4s; animation-delay: -3.2s; }
	}

	.hv2-scale .hv2-tri {
		position: relative;
		z-index: 1;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, 0.8fr);
		gap: clamp(24px, 3vw, 40px);
		min-height: calc(min(72vw, 1180px) / 2.813);
	}

	.hv2-scale .hv2-tri > .hv2-head {
		grid-column: 1;
		max-width: 340px;
	}

	.hv2-scale .hv2-tri > .hv2-benefits {
		grid-column: 3;
	}

	.hv2-scale .hv2-visual {
		display: none;
	}

	.hv2-scale .hv2-title--h2 {
		font-size: clamp(2rem, 1.5rem + 1.2vw, 2.5rem);
	}
}

@keyframes hv2-panel-float {
	0% { transform: translate3d(-3px, -12px, 0); }
	50% { transform: translate3d(3px, 2px, 0); }
	100% { transform: translate3d(-1px, 12px, 0); }
}

/* Dark-background artwork: fade the edges so the image's own background
   melts into the section gradient instead of showing a rectangle. */
.hv2-visual--fade img {
	-webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%);
	mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%);
}

/* Infrastructure: on desktop the globe is the section background, centered
   and cropped top/bottom, with copy on the left and benefits on the right.
   The section takes the artwork's edge color (#06012A) so there is no seam. */
.hv2-infra__bg {
	display: none;
}

@media (min-width: 1101px) {
	/* Compact band: the globe "rises" from the bottom edge. Its top sits just
	   below the section top and its lower half is cropped by the section. */
	.hv2-section.hv2-infra {
		padding: clamp(36px, 3.2vw, 52px) 0;
		background: #06012a;
		overflow: hidden;
	}

	.hv2-infra__bg {
		display: block;
		position: absolute;
		/* Globe spans ~12%-87% of the artwork height; with height 135% and top -2%
		   its top lands ~14% below the section top, leaving a gap above it. */
		top: -2%;
		left: 52.5%;
		width: auto;
		max-width: none;
		height: 135%;
		transform: translateX(-50%);
		z-index: 0;
		pointer-events: none;
		-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
		mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
	}

	/* Scrims keep both text columns readable over the globe's glow. */
	.hv2-infra::before {
		content: '';
		position: absolute;
		inset: 0;
		z-index: 1;
		background: linear-gradient(90deg, rgba(6, 1, 42, 0.95) 0%, rgba(6, 1, 42, 0.8) 30%, rgba(6, 1, 42, 0) 42%, rgba(6, 1, 42, 0) 64%, rgba(6, 1, 42, 0.82) 73%, rgba(6, 1, 42, 0.95) 100%);
		pointer-events: none;
	}

	.hv2-infra .hv2-tri {
		position: relative;
		z-index: 2;
	}

	.hv2-infra .hv2-tri > .hv2-head {
		grid-column: 1;
		gap: 14px;
	}

	.hv2-infra .hv2-title--h2 {
		font-size: clamp(2rem, 1.5rem + 1.2vw, 2.5rem);
	}

	.hv2-infra .hv2-tri > .hv2-benefits {
		grid-column: 3;
	}

	.hv2-infra .hv2-visual {
		display: none;
	}
}

/* Final artwork slot (white-background illustrations on light sections). */
.hv2-visual img {
	width: 100%;
	height: auto;
}

.hv2-infra {
	padding: clamp(56px, 6vw, 88px) 0;
}

/* ==========================================================================
   Testimonials
   ========================================================================== */

/* Testimonials band: purple field with a warm glow on the right (stand-in for
   the Figma golden-network image until that asset is exported). */
.hv2-section.hv2-testimonials {
	background:
		radial-gradient(38% 55% at 100% 30%, rgba(255, 176, 46, 0.45) 0%, rgba(255, 140, 30, 0.12) 45%, transparent 75%),
		radial-gradient(30% 40% at 88% 85%, rgba(255, 160, 40, 0.35) 0%, transparent 70%),
		radial-gradient(60% 70% at 15% 20%, rgba(98, 38, 200, 0.55) 0%, transparent 70%),
		linear-gradient(180deg, #3d138f 0%, #3a1491 55%, #2a0b78 100%);
}

.hv2-testimonials .hv2-head {
	max-width: none;
	margin-bottom: 40px;
}

.hv2-testimonials {
	--hv2-tst-card-w: 430px; /* active card; side cards render at 0.87 (~375px) */
	--hv2-tst-card-gap: 20px;
	--hv2-tst-card-bg: rgba(255, 255, 255, 0.08);
	--hv2-tst-card-line: rgba(255, 255, 255, 0.22);
	--hv2-tst-text-muted: rgba(255, 255, 255, 0.7);
	overflow: hidden; /* side cards slide past the container edge */
}

/* Carousel: every slide sits in the same grid cell and is moved by JS-set
   --hv2-tst-offset (-1 prev, 0 active, 1 next; anything else hidden). */
.hv2-tst-track {
	display: grid;
	justify-items: center;
	align-items: stretch; /* all cards take the tallest card's height */
	margin: 0;
	padding: 0;
	list-style: none;
}

.hv2-tst-slide {
	--hv2-tst-offset: 0;
	grid-area: 1 / 1;
	width: var(--hv2-tst-card-w);
	max-width: 100%;
	opacity: 0;
	pointer-events: none;
	transform: translateX(calc(var(--hv2-tst-offset) * (var(--hv2-tst-card-w) * 0.935 + var(--hv2-tst-card-gap)))) scale(0.87);
	transition: transform 0.5s ease, opacity 0.5s ease;
}

.hv2-tst-slide.is-active,
.hv2-tst-slide.is-prev,
.hv2-tst-slide.is-next {
	opacity: 1;
	pointer-events: auto;
}

.hv2-tst-slide.is-prev,
.hv2-tst-slide.is-next {
	cursor: pointer;
}

.hv2-tst-slide.is-active {
	z-index: 1;
	transform: translateX(0) scale(1);
}

.hv2-tst-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	box-sizing: border-box;
	height: 100%;
	min-height: 340px;
	margin: 0;
	padding: 28px 30px 26px;
	border: 1px solid var(--hv2-tst-card-line);
	border-radius: 16px;
	background: var(--hv2-tst-card-bg);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 40px rgba(14, 3, 50, 0.35);
	transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.hv2-tst-slide.is-active .hv2-tst-card {
	border-color: rgba(214, 186, 255, 0.6);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 0 1px rgba(181, 133, 255, 0.25), 0 0 32px rgba(181, 133, 255, 0.35), 0 16px 48px rgba(14, 3, 50, 0.45);
}

.hv2-tst-card__mark {
	align-self: flex-start;
	height: 22px;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 44px;
	font-weight: 700;
	line-height: 1;
}

.hv2-tst-card__quote {
	margin: auto 0 0; /* with .hv2-tst-author's margin-top: auto, centers quote + stars in taller cards */
	padding-top: 12px;
}

.hv2-tst-card__quote p {
	margin: 0;
	color: var(--hv2-white);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
}

.hv2-tst-card__stars {
	display: flex;
	gap: 14px;
	margin-top: 18px;
}

.hv2-tst-card__stars svg {
	display: block;
	width: 20px;
	height: 20px;
}

/* Author row */
.hv2-tst-author {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: auto;
	padding-top: 22px;
	text-align: left;
}

.hv2-tst-author__sep {
	align-self: stretch;
	width: 1px;
	background: rgba(255, 255, 255, 0.45);
}

.hv2-tst-author__who {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.hv2-tst-author__name {
	color: var(--hv2-white);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

.hv2-tst-author__role {
	color: var(--hv2-tst-text-muted);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.3;
}

/* Company logos ship dark; render them white on the purple card. */
.hv2-tst-author__logo {
	display: block;
	width: auto;
	filter: brightness(0) invert(1);
}

.hv2-tst-author__photo {
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	background: #d9d9d9;
}

.hv2-tst-author__meta {
	display: flex;
	align-items: center;
	gap: 6px;
}

.hv2-tst-author__bar {
	width: 1px;
	height: 10px;
	background: var(--hv2-tst-text-muted);
}

.hv2-tst-author .hv2-tst-author__logo {
	height: 12px;
	opacity: 0.8;
}

/* Logos from the trusted strip (assets/images/home-v2/logos/) put the mark on a
   padded 320x120 canvas: scale the canvas so the mark is ~12px tall and pull the
   padding back with negative margins. */
.hv2-tst-author .hv2-tst-author__logo--canvas {
	flex: none;
	max-width: none;
	height: 33px;
	margin: -10.5px -24.5px;
}

/* Dots */
.hv2-tst-dots {
	display: flex;
	justify-content: center;
	gap: 14px;
	margin-top: 32px;
}

.hv2-tst-dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.4);
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.hv2-tst-dot[aria-selected='true'] {
	background: var(--hv2-white);
}

.hv2-tst-dot:focus-visible {
	outline: 2px solid var(--hv2-yellow);
	outline-offset: 3px;
}

/* Tablet / phone: only the active card, side cards peek off-canvas. */
@media (max-width: 1023px) {
	.hv2-testimonials {
		--hv2-tst-card-w: min(375px, calc(100vw - 48px));
	}

	.hv2-tst-slide.is-prev,
	.hv2-tst-slide.is-next {
		opacity: 0.35;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hv2-tst-slide,
	.hv2-tst-card,
	.hv2-tst-dot {
		transition: none;
	}
}

/* ==========================================================================
   Solutions (E-Commerce / LLM)
   ========================================================================== */

.hv2-solution__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	grid-template-areas:
		'text visual'
		'benefits visual';
	column-gap: clamp(32px, 5vw, 80px);
	row-gap: 40px;
	align-items: center;
}

.hv2-solution--reverse .hv2-solution__grid {
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	grid-template-areas:
		'visual text'
		'visual benefits';
}

.hv2-solution__text {
	grid-area: text;
	align-self: end;
}

.hv2-solution__visual {
	grid-area: visual;
}

/* Text + visual only (no benefits row): one row, both columns vertically
   centered, and the artwork gets the larger share of the width. */
.hv2-solution--no-benefits .hv2-solution__grid {
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	grid-template-areas: 'text visual';
	align-items: center;
}

.hv2-solution--no-benefits .hv2-solution__text {
	align-self: center;
}

/* Reversed (visual left, text right), e.g. LLM Data. */
.hv2-solution--reverse.hv2-solution--no-benefits .hv2-solution__grid {
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	grid-template-areas: 'visual text';
}

@media (max-width: 900px) {
	.hv2-solution--reverse.hv2-solution--no-benefits .hv2-solution__grid,
	.hv2-solution--no-benefits .hv2-solution__grid {
		grid-template-columns: 1fr;
		grid-template-areas:
			'text'
			'visual';
	}
}

.hv2-solution__img {
	display: block;
	width: 100%;
	height: auto;
}

.hv2-solution__benefits {
	grid-area: benefits;
	align-self: start;
}

/* Schematics inside solution placeholders. */
.hv2-sch {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) auto minmax(0, 1.2fr);
	align-items: center;
	gap: clamp(10px, 2vw, 20px);
	width: 100%;
}

.hv2-sch__cap {
	display: block;
	margin-bottom: 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hv2-muted);
}

.hv2-sch__chips {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.hv2-sch__chips li {
	padding: 7px 10px;
	border: 1px solid var(--hv2-border);
	border-radius: 6px;
	background: var(--hv2-white);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--hv2-mid);
	opacity: 0.85;
}

.hv2-sch__chips--doc li {
	padding: 14px 10px;
	background:
		linear-gradient(var(--hv2-border), var(--hv2-border)) 10px calc(100% - 15px) / 60% 3px no-repeat,
		linear-gradient(var(--hv2-border), var(--hv2-border)) 10px calc(100% - 9px) / 40% 3px no-repeat,
		var(--hv2-white);
	padding-bottom: 24px;
}

.hv2-sch__chips--row {
	flex-direction: row;
	flex-wrap: wrap;
	margin-top: 14px;
}

.hv2-sch__chips--row li {
	padding: 4px 8px;
	font-size: 11.5px;
}

.hv2-sch__flow {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	min-width: 72px;
}

.hv2-sch__flow::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 2px;
	background: linear-gradient(90deg, var(--hv2-border-strong), var(--hv2-yellow));
}

.hv2-sch__flow span {
	position: relative;
	padding: 6px 10px;
	border-radius: 6px;
	background: var(--hv2-primary);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--hv2-white);
	white-space: nowrap;
}

.hv2-sch__panel {
	padding: 16px;
	border: 1px solid var(--hv2-border);
	border-radius: 10px;
	background: var(--hv2-white);
	box-shadow: var(--hv2-shadow);
}

.hv2-sch__panel dl > div {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 0;
	border-top: 1px solid var(--hv2-border);
	font-size: 13px;
}

.hv2-sch__panel dt {
	color: var(--hv2-muted);
}

.hv2-sch__panel dd {
	font-weight: 600;
	color: var(--hv2-ink);
	text-align: right;
}

.hv2-sch__sub {
	display: block;
	margin-bottom: 8px;
	font-size: 14px;
	font-weight: 700;
	color: var(--hv2-ink);
}

.hv2-sch__checks {
	display: grid;
	gap: 6px;
}

.hv2-sch__checks li {
	position: relative;
	padding-left: 20px;
	font-size: 13px;
	color: var(--hv2-body);
}

.hv2-sch__checks li::before {
	content: '';
	position: absolute;
	left: 2px;
	top: 4px;
	width: 8px;
	height: 5px;
	border-left: 2px solid var(--hv2-violet);
	border-bottom: 2px solid var(--hv2-violet);
	transform: rotate(-45deg);
}

/* ==========================================================================
   Spotlight + Platform
   ========================================================================== */

.hv2-spotlight__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

/* Spotlight cards: wide 2:1 image slot on top (artwork is 1774x887). */
.hv2-spotlight .hv2-card {
	padding: 12px 12px 22px;
}

.hv2-spotlight .hv2-card > :not(.hv2-card__media) {
	padding-inline: 10px;
}

.hv2-spotlight .hv2-card__media {
	aspect-ratio: 2 / 1;
}

.hv2-platform .hv2-head {
	margin-bottom: 48px;
}

/* Platform product cards: image slot on top (Unblocker artwork is ~1:1). */
.hv2-platform .hv2-card {
	padding: 12px 12px 22px;
}

.hv2-platform .hv2-card > :not(.hv2-card__media) {
	padding-inline: 10px;
}

.hv2-platform .hv2-card__media {
	aspect-ratio: 4 / 3;
}

.hv2-platform .hv2-card__media .hv2-product__icon {
	margin-bottom: 0;
}

.hv2-platform .hv2-card__media::after {
	display: none;
}

.hv2-product__icon {
	width: 56px;
	height: 56px;
	margin-bottom: 8px;
}

/* ==========================================================================
   Responsive: tablet
   ========================================================================== */

/* Access: 4-up while cards stay >= ~200px, then 2x2 (phones: 1 column, below). */
@media (max-width: 900px) {
	.hv2-access .hv2-cards--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 1100px) {
	.hv2-trusted__logos {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.hv2-tri {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas:
			'head visual'
			'list visual';
		row-gap: 32px;
	}

	.hv2-tri > .hv2-head {
		grid-area: head;
		align-self: end;
	}

	.hv2-tri > .hv2-ph,
	.hv2-tri > .hv2-visual {
		grid-area: visual;
	}

	.hv2-tri > .hv2-benefits {
		grid-area: list;
		align-self: start;
	}
}

@media (max-width: 900px) {
	.hv2-hero__grid,
	.hv2-split,
	.hv2-spotlight__grid {
		grid-template-columns: 1fr;
	}

	.hv2-hero .hv2-ph {
		aspect-ratio: 16 / 9 !important;
	}

	.hv2-solution__grid,
	.hv2-solution--reverse .hv2-solution__grid {
		grid-template-columns: 1fr;
		grid-template-areas:
			'text'
			'visual'
			'benefits';
		row-gap: 32px;
	}

	.hv2-tri {
		grid-template-columns: 1fr;
		grid-template-areas:
			'head'
			'visual'
			'list';
	}

	.hv2-tri > .hv2-ph {
		aspect-ratio: 16 / 9 !important;
	}

	.hv2-metrics {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 32px;
	}

	.hv2-metric:nth-child(odd) {
		padding-left: 0;
		border-left: 0;
	}

	.hv2-cards--3 {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Responsive: mobile
   ========================================================================== */

@media (max-width: 900px) {
	.hv2-speed__bg {
		position: static;
		width: calc(100% + 2 * var(--hv2-gutter));
		max-width: none;
		height: auto;
		aspect-ratio: 4 / 3;
		object-fit: cover;
		object-position: 80% center;
		margin: 24px calc(-1 * var(--hv2-gutter)) 0;
	}

	.hv2-speed {
		display: flex;
		flex-direction: column;
	}

	.hv2-speed .hv2-container {
		display: contents;
	}

	.hv2-speed::before {
		display: none;
	}

	.hv2-speed .hv2-split {
		order: -1;
		min-height: 0;
		padding-top: 0;
		padding: 0 var(--hv2-gutter);
	}

	.hv2-speed .hv2-metrics {
		margin-left: var(--hv2-gutter);
		margin-right: var(--hv2-gutter);
	}

	.hv2-speed .hv2-metrics {
		margin-top: 0;
	}
}

@media (max-width: 640px) {
	.hv2-hero__text {
		gap: 24px;
	}

	/* Mobile: the final CTA keeps its artwork as a band under the copy. */
	.hv2-hero--final {
		align-items: flex-start;
	}

	.hv2-hero--final .hv2-hero__bg {
		top: auto;
		height: 420px;
	}

	.hv2-hero--final::before {
		background: linear-gradient(180deg, var(--hv2-dark) 0%, var(--hv2-dark) calc(100% - 420px), rgba(30, 12, 63, 0.35) calc(100% - 240px), rgba(30, 12, 63, 0) 100%);
	}

	/* Mobile: the top hero is copy-only (no mountain artwork, not downloaded either;
	   see the <picture> in hero.php). A soft violet glow keeps the band from looking flat. */
	.hv2-hero:not(.hv2-hero--final) {
		min-height: 0;
		padding-bottom: 56px;
	}

	.hv2-hero:not(.hv2-hero--final) .hv2-hero__bg {
		display: none;
	}

	.hv2-hero:not(.hv2-hero--final)::before {
		background: radial-gradient(120% 70% at 100% 0%, rgba(122, 53, 255, 0.28) 0%, rgba(122, 53, 255, 0) 60%);
	}

	.hv2-actions {
		flex-direction: column;
		align-items: stretch;
	}


	.hv2-trusted__logos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hv2-cards--4,
	.hv2-access .hv2-cards--4,
	.hv2-cards--2 {
		grid-template-columns: 1fr;
	}

	.hv2-benefits--row {
		grid-template-columns: 1fr;
	}

	.hv2-benefits--row .hv2-benefit {
		flex-direction: row;
	}

	.hv2-metric {
		padding: 0 0 0 14px;
		column-gap: 12px;
	}

	.hv2-metric:nth-child(odd) {
		padding-left: 0;
	}

	.hv2-metric {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			'icon'
			'value'
			'label';
		row-gap: 6px;
	}

	.hv2-metric__icon {
		justify-content: flex-start;
		margin-bottom: 4px;
	}

	.hv2-metric__icon .hv2-icon {
		width: 36px;
		height: 36px;
	}

	/* Schematics stack vertically and size to content. */
	.hv2-ph--schematic {
		aspect-ratio: auto !important;
	}

	.hv2-sch {
		grid-template-columns: 1fr;
	}

	.hv2-sch__chips:not(.hv2-sch__chips--row) {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.hv2-sch__chips--doc li {
		flex: 1 1 30%;
	}

	.hv2-sch__flow {
		min-height: 44px;
	}

	.hv2-sch__flow::before {
		left: 50%;
		right: auto;
		top: 0;
		bottom: 0;
		width: 2px;
		height: auto;
		background: linear-gradient(180deg, var(--hv2-border-strong), var(--hv2-yellow));
	}
}

@media (prefers-reduced-motion: reduce) {
	.hv2 *,
	.hv2 *::before,
	.hv2 *::after {
		transition: none !important;
		animation: none !important;
	}
}

/* ==========================================================================
   Internal asset-spec page (/new-home-2026-assets/)
   ========================================================================== */

.hv2-specs .hv2-specs__head {
	max-width: 760px;
	margin-bottom: 40px;
}

.hv2-specs .hv2-specs__head a {
	color: var(--hv2-violet);
}

.hv2-specs__group {
	margin: 40px 0 14px;
	font-size: 20px;
	font-weight: 700;
	color: var(--hv2-ink);
}

.hv2-specs__scroll {
	overflow-x: auto;
	border: 1px solid var(--hv2-border);
	border-radius: var(--hv2-radius-card);
}

.hv2-specs__scroll:focus-visible {
	outline: 3px solid var(--hv2-violet);
	outline-offset: 2px;
}

.hv2-specs__table {
	width: 100%;
	min-width: 1000px;
	border-collapse: collapse;
	font-size: 14px;
	line-height: 1.45;
}

.hv2-specs__table th,
.hv2-specs__table td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--hv2-border);
	text-align: start;
	vertical-align: top;
}

.hv2-specs__table thead th {
	position: sticky;
	top: 0;
	background: var(--hv2-tint);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--hv2-mid);
	white-space: nowrap;
}

.hv2-specs__table tbody tr:last-child th,
.hv2-specs__table tbody tr:last-child td {
	border-bottom: 0;
}

.hv2-specs__table tbody th {
	font-weight: 700;
	color: var(--hv2-ink);
	white-space: nowrap;
}

.hv2-specs__rec {
	font-weight: 600;
	color: var(--hv2-primary);
}

.hv2-specs__note {
	min-width: 260px;
	color: var(--hv2-muted);
}

.hv2-specs__status {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.hv2-specs__status--done {
	background: var(--hv2-tint-strong);
	color: var(--hv2-mid);
}

.hv2-specs__status--partial {
	background: rgba(248, 192, 45, 0.18);
	color: #7a5600;
}

.hv2-specs__status--placeholder {
	background: transparent;
	border: 1px dashed var(--hv2-border-strong);
	color: var(--hv2-muted);
}

.hv2-specs__rules {
	display: grid;
	gap: 8px;
	padding-inline-start: 20px;
	list-style: disc;
	color: var(--hv2-body);
}

.hv2-specs__rules strong {
	color: var(--hv2-ink);
}

/* ==========================================================================
   Draft homepage: transparent header over the hero
   body.hv2-overlay-header (inc/bringits-home-v2.php). The bar is transparent
   while it sits on the hero and turns solid (site nav colour) once the hero
   has scrolled under it, or while the mega menu is open (assets/js/home-v2.js).
   The hero is pulled up under the 80px bar and grows by the same amount, so
   its content stays exactly where it was.
   ========================================================================== */

.hv2-overlay-header .site-header,
.hv2-overlay-header .site-header .nav_bar {
	background: transparent;
	transition: background-color 0.25s ease;
}

.hv2-overlay-header.hv2-header-solid .site-header,
.hv2-overlay-header.hv2-header-solid .site-header .nav_bar,
.hv2-overlay-header.mega-menu-active .site-header,
.hv2-overlay-header.mega-menu-active .site-header .nav_bar {
	background: var(--nav-bg, #291154);
}

.hv2-overlay-header .hv2 > .hv2-hero:first-child {
	margin-top: -80px;
	padding-top: calc(clamp(48px, 5vw, 80px) + 80px);
	min-height: calc(min(720px, max(480px, 35.5vw, calc(364px + 15vw))) + 80px);
}

@media (max-width: 640px) {
	.hv2-overlay-header .hv2 > .hv2-hero:first-child {
		padding-top: calc(48px + 80px);
		min-height: 0;
	}
}