/*
 * Home – Hero (Figma 1828:12341, 1600×1162 + 48px to the next section).
 * Figma's "New: AI review summaries" notice above the title was removed on request (2026-09-30); its 61px
 * (37px pill + 24px gap) is taken out of the stage, so the title sits at y=172 and everything below it
 * keeps Figma's spacing, 61px higher.
 * Stage 1600×1031: vertical gradient #004d3d→#34d5b5 + tile grid, dashboard mockup at x=115 y=349
 * (1370×877, clipped by the stage), "+38%" stat at x=647 y=493. Logo row 44px below the stage.
 */

.rs-home-hero {
	overflow: hidden;
}

.rs-home-hero__stage {
	position: relative;
	box-sizing: border-box;
	height: 1031px;
	padding: 172px 16px 0;
	overflow: hidden;
	background:
		url("../../images/home/hero-tiles.svg") center top / 2518px 1092px no-repeat,
		linear-gradient(180deg, #004d3d 0%, #34d5b5 100%);
}

.rs-home-hero__intro {
	position: relative;
	z-index: 1;
	max-width: 767px;
	margin-inline: auto;
}

.rs-home-hero__intro > * {
	margin: 0;
}

.rs-home-hero__title {
	max-width: 767px;
}

.rs-home-hero__lead {
	max-width: 665px;
}

.rs-home-hero__text > * {
	margin: 0;
}

.rs-home-hero__actions {
	margin-top: 0;
}

/* Dashboard mockup + stat badge. (Selectors are doubled to beat WordPress's layout margin rules.) */
.rs-home-hero__stage > .rs-home-hero__visual {
	margin: 0;
}

.rs-home-hero__visual > .rs-hero-stat {
	margin: 0;
}

.rs-home-hero__visual {
	position: absolute;
	top: 349px;
	left: calc(50% - 685px);
	width: 1370px;
	height: 877px;
	container-type: inline-size;
}

.rs-home-hero__mockup {
	margin: 0;
}

.rs-home-hero__mockup img {
	display: block;
	width: 100%;
	height: auto;
}

.rs-hero-stat {
	position: absolute;
	top: calc(144 / 1370 * 100cqw);
	left: calc(532 / 1370 * 100cqw);
	box-sizing: border-box;
	padding: 8px 14px 8px 10px;
	border-radius: 99px;
	background: var(--wp--preset--color--white);
	box-shadow: 0 16px 36px -16px rgba(0, 0, 0, 0.6);
}

.rs-hero-stat > p {
	margin: 0;
	white-space: nowrap;
}

.rs-hero-stat__value {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 3px 8px;
	border-radius: 99px;
	background: #10b981;
	font-family: var(--wp--preset--font-family--plus-jakarta-sans);
	font-size: 11px;
	font-weight: 600;
	line-height: normal;
	letter-spacing: 0;
	color: var(--wp--preset--color--white);
}

.rs-hero-stat__value::before {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	background: url("../../images/icons/trend-up.svg") center / contain no-repeat;
}

.rs-hero-stat__label {
	font-size: 13px;
	line-height: 20px;
	color: var(--wp--preset--color--black);
}

/* "Collect from" logo row (Figma 1828:12475: 1060 wide, gap 0/28, 26px tall). */
.rs-logo-row {
	align-self: center;
	width: 100%;
	max-width: 1060px;
	box-sizing: border-box;
}

.rs-logo-row > p,
.rs-logo-row__item > p {
	margin: 0;
	font-size: 18px;
	line-height: 26px;
	white-space: nowrap;
}

.rs-logo-row__label {
	color: var(--wp--preset--color--text-muted);
}

.rs-logo-row__name {
	color: var(--wp--preset--color--black);
}

.rs-logo-row__name.is-muted {
	color: var(--wp--preset--color--text-secondary);
}

.rs-logo-row__icon {
	flex: none;
	margin: 0;
}

.rs-logo-row__icon img {
	display: block;
	width: 23.337px;
	height: 23.337px;
}

/* Figma exports these as their 21.96px icon shells (glyph ≈15px inside). */
.rs-logo-row__icon.is-small img {
	width: 21.957px;
	height: 21.957px;
}

.rs-woo-badge {
	padding: 2px 6px;
	border-radius: 5px;
	background: #7f54b3;
	font-family: var(--wp--preset--font-family--plus-jakarta-sans);
	font-size: 10px !important;
	font-weight: 800;
	line-height: normal !important;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--white);
}

/* Below the Figma width the mockup joins the flow, cropped at the same 682/877 point as the stage. */
@media (max-width: 1279px) {
	.rs-home-hero__stage {
		height: auto;
		padding-top: 136px;
	}

	.rs-home-hero__stage > .rs-home-hero__visual {
		position: relative;
		top: auto;
		left: auto;
		width: min(1370px, 100%);
		height: auto;
		margin: 56px auto 0;
		aspect-ratio: 1370 / 682;
		overflow: hidden;
	}
}

@media (max-width: 781px) {
	.rs-home-hero__stage {
		padding-top: 120px;
	}

	/* Doubled selector: WordPress's `body .is-layout-flex { display: flex }` would win otherwise. */
	.rs-home-hero__visual > .rs-hero-stat {
		display: none;
	}

	.rs-logo-row {
		row-gap: 12px;
	}
}