/*
 * Analytics – Hero (Figma 340:1501, 1600×960 + 104px to the next section).
 * Stage: vertical gradient #004d3d → cyan/80 (#34d5b5) with two 10%-white ellipses lit by teal inner shadows
 * (1588:10919, 1588:10921; their SVG filters are the Figma effects). Title block at y=136 (733 wide, centred
 * on x=800.5: 713px H1 + lead 16 apart, buttons 24 below) and the analytics dashboard illustration
 * ("Frame 626279" 1569:8451, 1101.863 wide) at y=456, clipped by the stage at 960 (504px visible).
 * Selectors on children of WordPress layout containers are doubled (.a > .b) to beat the layout margin rules.
 */

.rs-an-hero__stage {
	position: relative;
	box-sizing: border-box;
	height: 960px;
	padding: 136px var(--wp--style--root--padding-right, 16px) 0 var(--wp--style--root--padding-left, 16px);
	overflow: hidden;
	isolation: isolate;
	/* cyan/80 isn't in the palette yet; the fallback is Figma's value. */
	background: linear-gradient(180deg, #004d3d 0%, var(--wp--preset--color--cyan-80, #34d5b5) 100%);
}

/* Ellipses: anchored to the stage bottom like Figma (bottom −298 / −349), horizontally to the frame centre. */
.rs-an-hero__stage::before,
.rs-an-hero__stage::after {
	content: "";
	position: absolute;
	z-index: -1;
	background: 0 0 / 100% 100% no-repeat;
	pointer-events: none;
}

.rs-an-hero__stage::before {
	bottom: -298px;
	left: calc(50% - 1014px);
	width: 900px;
	height: 900px;
	background-image: url("../../images/an/hero/ellipse-left.svg");
}

.rs-an-hero__stage::after {
	bottom: -349px;
	left: calc(50% + 344px);
	width: 740px;
	height: 740px;
	background-image: url("../../images/an/hero/ellipse-right.svg");
}

.rs-an-hero__stage > .rs-an-hero__intro {
	position: relative;
	left: 0.5px;
	max-width: 733px;
	margin: 0 auto;
}

.rs-an-hero__intro > *,
.rs-an-hero__text > * {
	margin: 0;
}

/* 713px at 48px, in em so the "…and / Grow Your Reviews" break holds as the fluid size shrinks. */
.rs-an-hero__text > .rs-an-hero__title {
	max-width: 14.86em;
}

.rs-an-hero__text > .rs-an-hero__lead {
	max-width: 733px;
}

/*
 * Figma's code gives "Get ReviewScribe" the black large button, but the hero renders it translucent:
 * ~20% black over the gradient with a 1px white-20% rim (same box as the ghost button next to it).
 */
.rs-an-hero__actions > .wp-block-button.is-style-black-lg > .wp-block-button__link {
	padding: 15px 15px 15px 19px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(0, 0, 0, 0.2);
}

.rs-an-hero__actions > .wp-block-button.is-style-black-lg > .wp-block-button__link:hover,
.rs-an-hero__actions > .wp-block-button.is-style-black-lg > .wp-block-button__link:focus-visible {
	background: rgba(0, 0, 0, 0.35);
}

/* Illustration: absolute at y=456, centred on the frame; the stage clips it at 960. */
.rs-an-hero__stage > .rs-an-hero__visual {
	position: absolute;
	top: 456px;
	left: calc(50% - 550.931px);
	z-index: 1;
	width: 1101.863px;
	margin: 0;
}

/* ---------- Analytics dashboard illustration (Figma "Frame 626279" 1569:8451) ---------- */

/*
 * The plugin UI is drawn at 0.8427× (8.427 = 10 × 0.8427 …), hence the fractional sizes. Figma strokes in
 * these instances take no layout space, so they are inset shadows. Text boxes use Figma's whole-px heights.
 */
.rs-an-dash {
	display: flex;
	flex-direction: column;
	gap: 20px;
	box-sizing: border-box;
	width: 1101.863px;
	padding: 16px 20px;
	border-radius: var(--wp--preset--border-radius--25, 25px);
	background: var(--wp--preset--color--white);
	box-shadow: 0 0 15.802px 0 rgba(0, 0, 0, 0.12);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 13.695px;
	font-weight: 400;
	line-height: 19px;
	letter-spacing: 0;
	color: var(--wp--preset--color--ink);
	text-align: left;
	white-space: nowrap;
}

.rs-an-dash span {
	display: block;
}

/* Icons: 16.855px Phosphor glyphs drawn from the Figma SVGs. */
.rs-an-dash__label::after,
.rs-an-dash__row-label::before,
.rs-an-dash__range::after,
.rs-an-dash__store::before {
	content: "";
	flex: none;
	width: 16.855px;
	height: 16.855px;
	background: 50% 50% / 100% 100% no-repeat;
}

/* Grey label + info icon (4.214 apart), 19px line, 3.16px padding. */
.rs-an-dash .rs-an-dash__label {
	display: flex;
	align-items: center;
	gap: 4.214px;
	padding: 3.16px 0;
	color: var(--wp--preset--color--ink-secondary);
}

.rs-an-dash__label::after {
	background-image: url("../../images/an/hero/info.svg");
}

/* Status tag with the storefront icon: 0.527px #cececf rim, pill. */
.rs-an-dash .rs-an-dash__store {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 25.282px;
	padding: 0 8.427px;
	border-radius: 999px;
	box-shadow: inset 0 0 0 0.527px var(--wp--preset--color--border-strong);
}

.rs-an-dash__store::before {
	background-image: url("../../images/an/hero/storefront.svg");
}

.rs-an-dash .rs-an-dash__store.is-small {
	height: 12.641px;
	padding: 0 4.214px;
}

.rs-an-dash__store.is-small::before {
	width: 12.641px;
	height: 12.641px;
	background-image: url("../../images/an/hero/storefront-small.svg");
}

/* Stat tiles: four 249.664px cards, 21.069 apart, 107.634 tall. */
.rs-an-dash__tiles {
	display: flex;
	gap: 21.069px;
}

.rs-an-dash__tiles > .rs-an-dash__tile {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: flex-start;
	gap: 8.427px;
	min-width: 0;
	padding: 16.855px 25.282px;
	border-radius: 16.855px;
	box-shadow: inset 0 0 0 1.053px var(--wp--preset--color--border);
}

.rs-an-dash .rs-an-dash__tile-head {
	display: flex;
	align-items: center;
	gap: 8.427px;
	height: 29.496px;
}

.rs-an-dash .rs-an-dash__badge {
	flex: none;
	width: 29.496px;
	height: 29.496px;
	border-radius: 6.321px;
	background: #ffeade url("../../images/an/hero/star-orange.svg") 50% 50% / 21.069px 21.069px no-repeat;
}

.rs-an-dash .rs-an-dash__badge.is-seal {
	background-color: #f0e2ff;
	background-image: url("../../images/an/hero/seal-percent.svg");
}

.rs-an-dash .rs-an-dash__badge.is-smiley {
	background-color: #ccffe4;
	background-image: url("../../images/an/hero/smiley.svg");
}

.rs-an-dash .rs-an-dash__badge.is-plane {
	background-color: #d1e5ff;
	background-image: url("../../images/an/hero/paper-plane-blue.svg");
}

.rs-an-dash__tile-value {
	font-size: 25.282px;
	font-weight: 600;
	line-height: 36px;
}

/* Lower row: funnel card (623.634) and sources card (421.374), 16.855 apart. */
.rs-an-dash__cols {
	display: flex;
	align-items: flex-start;
	gap: 16.855px;
}

.rs-an-dash__cols > .rs-an-dash__card {
	flex: none;
	overflow: hidden;
	border-radius: 16.855px;
	box-shadow: inset 0 0 0 1.053px var(--wp--preset--color--border);
}

.rs-an-dash__cols > .rs-an-dash__card.is-funnel {
	width: 623.634px;
}

.rs-an-dash__cols > .rs-an-dash__card.is-sources {
	width: 421.374px;
}

/* Card header ("-dashTop"): 50.565 tall, 0.527px rule below. */
.rs-an-dash__card > .rs-an-dash__top {
	display: flex;
	align-items: center;
	gap: 8.427px;
	box-sizing: border-box;
	height: 50.565px;
	padding: 0 16.855px;
	box-shadow: inset 0 -0.527px 0 var(--wp--preset--color--border);
}

.rs-an-dash .rs-an-dash__title {
	display: flex;
	align-items: center;
	gap: 8.427px;
	font-size: 15.802px;
	font-weight: 500;
	line-height: 22px;
}

.rs-an-dash__title::before {
	content: "";
	flex: none;
	width: 25.282px;
	height: 25.282px;
	background: url("../../images/an/hero/funnel.svg") 50% 50% / 100% 100% no-repeat;
}

.rs-an-dash__title.is-sources::before {
	background-image: url("../../images/an/hero/git-merge.svg");
}

/* "All time" dropdown: #f3f3f3 pill, 0.527px #cececf rim, caret 8.427 after the text. */
.rs-an-dash .rs-an-dash__range {
	display: flex;
	align-items: center;
	gap: 8.427px;
	margin-left: auto;
	padding: 3.16px 8.427px;
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	box-shadow: inset 0 0 0 0.527px var(--wp--preset--color--border-strong);
	font-size: 13.69px;
	font-weight: 500;
}

.rs-an-dash__range::after {
	background-image: url("../../images/an/hero/caret-down.svg");
}

.rs-an-dash__card > .rs-an-dash__body {
	display: flex;
	flex-direction: column;
	gap: 16.855px;
	box-sizing: border-box;
	padding: 16.855px 25.282px 25.282px;
}

.rs-an-dash__card.is-sources > .rs-an-dash__body {
	height: 299.176px;
}

/* Funnel KPIs: two columns 33.71 apart, the first with a 1.053px rule on its right. */
.rs-an-dash__body > .rs-an-dash__kpis {
	display: flex;
	gap: 33.71px;
}

.rs-an-dash__kpis > .rs-an-dash__kpi {
	flex: 1 1 0;
	min-width: 0;
	padding-bottom: 16.855px;
}

.rs-an-dash__kpis > .rs-an-dash__kpi:first-child {
	box-shadow: inset -1.053px 0 0 var(--wp--preset--color--border);
}

.rs-an-dash__kpi-value {
	padding: 2.107px 0;
	font-size: 21.069px;
	font-weight: 600;
	line-height: 30px;
}

/* Bar rows: header (icon + label … count (pct)) over an 8.427px track, 4.214 apart; rows 16.855 apart. */
.rs-an-dash__body > .rs-an-dash__rows {
	display: flex;
	flex-direction: column;
	gap: 16.855px;
}

.rs-an-dash__rows > .rs-an-dash__row {
	display: flex;
	flex-direction: column;
	gap: 4.214px;
}

.rs-an-dash .rs-an-dash__row-head {
	display: flex;
	align-items: center;
	gap: 4.214px;
}

.rs-an-dash .rs-an-dash__row-label {
	display: flex;
	align-items: center;
	gap: 4.214px;
	margin-right: auto;
	padding: 3.16px 0;
	font-weight: 500;
}

.rs-an-dash__row-label.is-paper-plane::before { background-image: url("../../images/an/hero/paper-plane.svg"); }
.rs-an-dash__row-label.is-envelope-open::before { background-image: url("../../images/an/hero/envelope-open.svg"); }
.rs-an-dash__row-label.is-cursor::before { background-image: url("../../images/an/hero/cursor.svg"); }
.rs-an-dash__row-label.is-star::before { background-image: url("../../images/an/hero/star.svg"); }
.rs-an-dash__row-label.is-logo-woocommerce::before { background-image: url("../../images/an/hero/logo-woocommerce.svg"); }
.rs-an-dash__row-label.is-logo-facebook::before { background-image: url("../../images/an/hero/logo-facebook.svg"); }
.rs-an-dash__row-label.is-logo-trustpilot::before { background-image: url("../../images/an/hero/logo-trustpilot.svg"); }
.rs-an-dash__row-label.is-layout::before { background-image: url("../../images/an/hero/layout.svg"); }

/* Google logo: 15.316×16.012 inside the 16.855 box (insets 4.17% 4.13% 0.83% 5%). */
.rs-an-dash__row-label.is-logo-google::before {
	background: url("../../images/an/hero/logo-google.svg") 0.843px 0.703px / 15.316px 16.012px no-repeat;
}

.rs-an-dash .rs-an-dash__row-count {
	padding: 3.16px 0;
	font-weight: 500;
}

.rs-an-dash .rs-an-dash__row-pct {
	color: var(--wp--preset--color--ink-secondary);
}

.rs-an-dash .rs-an-dash__track {
	position: relative;
	height: 8.427px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
}

.rs-an-dash__track::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--w);
	border-radius: 999px;
	background: var(--c);
}

/*
 * Below the Figma width the illustration joins the flow, 56px under the buttons (Figma's gap), and scales
 * down to the content width; it stays cropped where the 960px stage cuts it (504 of its height).
 */
@media (max-width: 1279px) {
	/* --k: the dashboard's scale. The ellipses scale with it and stay anchored to the stage bottom, so they
	   keep Figma's position relative to the (cropped) dashboard. */
	.rs-an-hero__stage {
		--k: min(1, tan(atan2(100cqw, 1101.863px)));
		height: auto;
		container-type: inline-size;
	}

	.rs-an-hero__stage::before {
		bottom: calc(-298px * var(--k));
		left: calc(50% - 1014px * var(--k));
		width: calc(900px * var(--k));
		height: calc(900px * var(--k));
	}

	.rs-an-hero__stage::after {
		bottom: calc(-349px * var(--k));
		left: calc(50% + 344px * var(--k));
		width: calc(740px * var(--k));
		height: calc(740px * var(--k));
	}

	.rs-an-hero__stage > .rs-an-hero__intro {
		left: 0;
	}

	.rs-an-hero__stage > .rs-an-hero__visual {
		position: relative;
		top: auto;
		left: auto;
		width: min(1101.863px, 100%);
		margin: 56px auto 0;
		/* min-height 0: with overflow:clip the box isn't a scroll container, so aspect-ratio would otherwise
		   grow to the (unscaled) content height. */
		min-height: 0;
		aspect-ratio: 1101.863 / 504;
		overflow: clip;
		overflow-clip-margin: 16px;
		container-type: inline-size;
	}

	.rs-an-dash {
		transform: scale(min(1, tan(atan2(100cqw, 1101.863px))));
		transform-origin: 0 0;
	}
}

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

	.rs-an-hero__stage > .rs-an-hero__visual {
		margin-top: 40px;
	}

	/* Buttons share the row, full width once they wrap. */
	.rs-an-hero__actions > .wp-block-button {
		flex: 1 1 auto;
	}

	.rs-an-hero__actions > .wp-block-button > .wp-block-button__link {
		width: 100%;
		box-sizing: border-box;
	}
}

/* WordPress.org source row (2026-10-03: the mock shows only sources the plugin imports). */
.rs-an-dash__row-label.is-logo-wordpress::before { background-image: url("../../images/home/integrations/wordpress.svg"); }