/*
 * Canonical Hero styles — shared by Compare V3 and Solutions V2 (New-Solutions).
 * Values reconciled from Solutions V2's rules (source of truth per explicit decision,
 * 2026-08-26), which used to be split across css/solutions-landing.css and
 * css/solutions-landing-v2.css with some internally-shadowed/dead duplicates cleaned up here
 * (a duplicate `.hero__subtitle` rule in solutions-landing.css that copied `.hero__title`'s
 * green/uppercase/14px style was shadowed by a higher-specificity nested rule and never
 * actually applied — dropped rather than carried forward). Compare V3's own hero.css is
 * retired; see SECTION_UNIFICATION_PLAYBOOK.md section 6.
 */

/*
 * Compare V3-wide spacing plumbing, not Hero-specific: this used to be the only place in the
 * whole theme declaring ".compare-v3 .new-solutions-component-spacing" (originally in the
 * retired compare-v3-components/hero/hero.css) — every Compare V3 section using that spacing
 * class depends on it, not just Hero. Kept here since Hero's own CSS is guaranteed to load on
 * every real Compare V3 page. Harmless no-op on Solutions V2 pages (the ".compare-v3" ancestor
 * never matches there).
 */
.compare-v3 .new-solutions-component-spacing {
	padding-top: var(--ns-desktop-padding-top, 0);
	padding-bottom: var(--ns-desktop-padding-bottom, 0);
}

@media (max-width: 767px) {
	.compare-v3 .new-solutions-component-spacing {
		padding-top: var(--ns-mobile-padding-top, 0);
		padding-bottom: var(--ns-mobile-padding-bottom, 0);
	}
}

.hero {
	overflow: hidden;
	background-color: #faf7f5;
	color: var(--Text-Primary, #282828);
}

.hero .hero__wrapper {
	display: grid;
	align-items: center;
	gap: 77px;
	grid-template-columns: 528px minmax(0, 1fr);
}

.hero .content {
	align-self: center;
	width: 528px;
	max-width: 528px;
	text-align: left;
}

.hero .content__inner {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-bottom: 32px;
}

/* Color/size/weight/uppercase now come from the shared .sd-type-eyebrow token (css/typography.css). */
.hero .hero__title {
	margin: 0;
	text-align: left;
}

/* NEW/Heading/xl */
.hero .hero__subtitle {
	margin: 0;
	color: #262626;
	text-align: left;
	text-transform: initial;
}

.hero .compare-v2-hero__title .compare-v2-hero__underline {
	color: #006746;
	text-decoration-line: underline;
	text-decoration-color: rgba(122, 204, 150, .3);
	text-decoration-thickness: .35em;
	text-underline-offset: -.18em;
	text-decoration-skip-ink: none;
}

/* NEW/Body/lg/Regular */
.hero .hero__text {
	width: 528px;
	max-width: 528px;
	margin: 0;
	color: rgba(0, 0, 0, .75);
	text-align: left;
}

.hero .hero__picture {
	grid-column: 2;
	grid-row: 1;
	align-self: center;
	justify-self: start;
	width: 100%;
	max-width: none;
	min-width: 0;
	margin: 0;
	overflow: visible;
	transform: translateY(4px);
}

.hero .hero__picture img {
	display: block;
	width: calc(50vw + 5px);
	min-width: 948px;
	max-width: 948px;
	max-height: 540px;
	height: auto;
	object-fit: contain;
	object-position: left center;
}

.hero .hero-reviews {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 32px;
}

.hero .hero-reviews__stars {
	display: flex;
	align-items: center;
	gap: 1px;
	white-space: nowrap;
}

/* The shared markup renders stars as inline <svg>, not <img> — solutions-landing.css's old
   rule targeted "img" and never actually matched its own SVG markup (dead selector, sizing
   came from the SVG's own width/height attributes instead). Using the working svg selector. */
.hero .hero-reviews__stars svg {
	display: block;
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
}

.hero .hero-reviews__text {
	color: rgba(0, 0, 0, .55);
	white-space: nowrap;
}

.hero .hero-reviews__platforms {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.hero .hero-reviews__platforms img {
	display: block;
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
	object-fit: contain;
}

.hero .hero-qb-badge {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 20px;
	border-radius: 8px;
}

.hero .hero-qb-badge__divider {
	display: block;
	width: 1px;
	height: 16px;
	background: #d9d9d9;
}

.hero .hero-qb-badge__text {
	color: #777;
	white-space: nowrap;
}

.hero .compare-v2-text-width-control[data-compare-width="1"] {
	max-width: var(--compare-v2-max-width) !important;
}

@media (max-width: 1240px) {
	.hero .hero__picture img {
		min-width: calc(50vw + 195px);
	}
}

@media (max-width: 1199px) {
	.hero .hero__wrapper {
		grid-template-columns: minmax(420px, 528px) minmax(0, 1fr);
	}
	
	.hero .content {
		width: auto;
		max-width: 528px;
	}
	
	.hero .hero__picture img {
		width: calc(50vw + 5px);
		min-width: calc(50vw + 195px);
		max-width: 948px;
		transform: none;
	}
}

@media (max-width: 767px) {
	.hero {
		overflow: visible;
		padding-top: 32px;
		padding-bottom: 48px;
	}
	
	.hero .hero__wrapper {
		gap: 0;
		grid-template-columns: 1fr;
	}
	
	.hero .content {
		width: 100%;
		max-width: 100%;
	}
	
	.hero .content__inner {
		gap: 16px;
		margin-bottom: 24px;
	}
	
	.hero .compare-v2-hero__title .compare-v2-hero__underline {
		text-decoration-thickness: .28em;
		text-underline-offset: -.16em;
	}
	
	.hero .hero__text {
		width: auto;
		max-width: 100%;
	}
	
	.hero .sd-button {
		width: 100%;
	}
	
	.hero .hero__picture {
		grid-area: auto;
		width: 100%;
		margin: 24px 0 0;
		transform: none;
		align-self: center;
	}
	
	.hero .hero__picture img {
		width: 100%;
		min-width: unset;
		max-width: 100%;
		object-position: center;
		transform: none;
	}
	
	.hero .hero-reviews {
		margin-top: 24px;
	}
	
	.hero .hero-reviews__text {
		white-space: normal;
	}
	
	.hero .hero-qb-badge {
		margin-top: 0;
	}
	
	.hero .compare-v2-text-width-control[data-compare-width="1"] {
		max-width: unset !important;
	}
}