/* ==========================================================================
   Solution hero
   Figma: desktop 1:330 (1440) · tablet 1:2356 (768) · mobile 1:1824 (375)
   Pills variant: desktop 1:8545 · tablet 1:9515

   Breakpoints: desktop >= 1200px · tablet 768–1199.98px · mobile < 768px.
   The desktop signal row needs 1174px, so the supplied tablet layout is what
   covers 1024px rather than a cramped invented desktop step.
   ========================================================================== */

.solution-hero {
	--solution-hero-icon: 40px;
	--solution-hero-intro-color: var(--color-green-800);
	--solution-hero-statement-measure: 878px;

	position: relative;
	z-index: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: hidden;
	padding-block: var(--space-160);
	background-image: linear-gradient(180deg, var(--color-blue-50) 0%, var(--color-bg-subtle) 100%);
}

.solution-hero--intro-tone-muted {
	--solution-hero-intro-color: var(--solution-text-muted);
}

.solution-hero--statement-width-narrow {
	--solution-hero-statement-measure: 755px;
}

.solution-hero--icon-md {
	--solution-hero-icon: 53px;
}

/* Decorative dot field. Figma clips it to the hero frame and bleeds it off
   the left edge, so it is centred on the 1440 reference and then clipped. */
.solution-hero__texture {
	position: absolute;
	z-index: -1;
	bottom: 87.28px;
	left: 50%;
	width: 2309px;
	height: 845px;
	margin-left: -1045.7px;
	background-image: url("../../images/solutions/shared/hero-dot-field-wide.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	pointer-events: none;
}

/* Cursor glow over the dot field. The layer, the gradient and the pointer
   script are the shared `.ascii-pattern` ones the Signal OS and Platform heroes
   use; only the palette and the mask are Solution-specific. The mask is the very
   same PNG the texture paints, at the same `100% 100%` size, so the glow can
   only ever light dots that already exist — it never draws its own. The hero's
   `overflow: hidden` keeps it inside the section. */
.solution-hero__texture-track {
	position: absolute;
	inset: 0;
	display: block;
}

.solution-hero__texture-glow {
	/* Same radius as the other hero glows (cards use 120). */
	--ascii-glow-radius: 180px;

	/* green-800, stepped down in alpha. The dots are a pale blue-grey at 4–11%
	   alpha on a near-white gradient, so they read as lit by deepening towards
	   the brand green rather than by brightening, which would erase them. */
	--ascii-glow-0: rgba(23, 88, 68, 0.85);
	--ascii-glow-1: rgba(23, 88, 68, 0.65);
	--ascii-glow-2: rgba(23, 88, 68, 0.38);
	--ascii-glow-3: rgba(23, 88, 68, 0.12);

	-webkit-mask-image: url("../../images/solutions/shared/hero-dot-field-wide.png");
	mask-image: url("../../images/solutions/shared/hero-dot-field-wide.png");
	-webkit-mask-mode: alpha;
	mask-mode: alpha;
}

/* The shared stylesheet already drops the glow for `hover: none` and reduced
   motion. This is the tighter gate the Solution pages use: pointer-follow only
   for fine pointers that can hover, so a stylus / hybrid-touch device keeps
   the static texture. */
@media not ((hover: hover) and (pointer: fine)) {
	.solution-hero__texture-glow {
		display: none;
	}
}

.solution-hero__inner {
	position: relative;
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: center;
	gap: var(--space-80);
}

/* --------------------------------------------------------------------------
   Copy
   -------------------------------------------------------------------------- */

.solution-hero__copy {
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: center;
	gap: var(--space-16);
}

/* Figma tracks the eyebrow fill tight to its content — no padding. */
.solution-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	background-color: var(--color-blue-100);
	color: var(--color-green-700);
	font-family: var(--font-family-body);
	font-size: var(--text-body-sm-size);
	font-weight: 400;
	line-height: var(--text-body-sm-lh);
}

.solution-hero__eyebrow-marker {
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	background-color: var(--color-green-800);
}

.solution-hero__title {
	max-width: 964px;
	margin: 0;
	color: var(--color-green-800);
	font-family: var(--font-family-display);
	font-size: var(--text-display-h1-alt-size);
	font-weight: 400;
	line-height: var(--text-display-h1-alt-lh);
	letter-spacing: 0;
	text-align: center;
}

.solution-hero__intro {
	max-width: 636px;
	margin: 0;
	color: var(--solution-hero-intro-color);
	font-family: var(--font-family-body);
	font-size: var(--text-body-md-size);
	font-weight: 400;
	line-height: var(--text-body-md-lh);
	text-align: center;
}

/* --------------------------------------------------------------------------
   CTA — .btn/.btn--secondary already match Figma (44px, 12/20, radius 0)
   -------------------------------------------------------------------------- */

.solution-hero__cta {
	align-self: center;
}

.solution-hero__cta svg {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
}

.solution-hero__cta:focus-visible {
	outline: 2px solid var(--color-green-800);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Signals row
   -------------------------------------------------------------------------- */

.solution-hero__signals {
	display: flex;
	width: 100%;
	max-width: 1174px;
	min-height: 110px;
	align-items: center;
	gap: var(--space-4);
	margin: 0 auto;
	padding-block: 0;
	padding-inline: var(--space-16);
	list-style: none;
}

.solution-hero__signal {
	display: flex;
	flex: 1 1 0;
	min-width: 0;
	align-items: center;
	justify-content: center;
	gap: var(--space-24);
}

.solution-hero__signal-icon {
	position: relative;
	flex-shrink: 0;
	width: var(--solution-hero-icon);
	height: var(--solution-hero-icon);
}

/* Figma renders the halo at 2.887x and the sphere at 0.811x the icon box. */
.solution-hero__signal-icon::before,
.solution-hero__signal-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	transform: translate(-50%, -50%);
}

/* Behind the copy so the wide halo never washes over adjacent labels. */
.solution-hero__signal-icon::before {
	z-index: -1;
	width: calc(var(--solution-hero-icon) * 2.88675);
	height: calc(var(--solution-hero-icon) * 2.88675);
	background-image: url("../../images/solutions/shared/signal-glow.png");
}

.solution-hero__signal-icon::after {
	width: calc(var(--solution-hero-icon) * 0.811325);
	height: calc(var(--solution-hero-icon) * 0.811325);
	background-image: var(--solution-hero-sphere);
}

.solution-hero__signal-icon--teal {
	--solution-hero-sphere: url("../../images/solutions/shared/signal-sphere-teal.png");
}

.solution-hero__signal-icon--navy {
	--solution-hero-sphere: url("../../images/solutions/shared/signal-sphere-navy.png");
}

.solution-hero__signal-icon--green {
	--solution-hero-sphere: url("../../images/solutions/shared/signal-sphere-green.png");
}

.solution-hero__signal-label {
	color: var(--color-green-800);
	font-family: var(--font-family-body);
	font-size: var(--text-body-md-size);
	line-height: var(--text-body-md-lh);
}

/* --------------------------------------------------------------------------
   Pills block
   -------------------------------------------------------------------------- */

.solution-hero__pills-block {
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: center;
	gap: var(--space-16);
}

.solution-hero__pills-lead,
.solution-hero__pills-note {
	margin: 0;
	color: var(--color-green-800);
	font-family: var(--font-family-body);
	font-size: var(--text-body-md-size);
	line-height: var(--text-body-md-lh);
	text-align: center;
}

.solution-hero__pills-note {
	max-width: 636px;
}

.solution-hero__pills {
	display: flex;
	width: 100%;
	max-width: 1160px;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-12) var(--space-24);
	margin: 0;
	padding: 0;
	list-style: none;
}

.solution-hero__pill {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	padding: var(--space-8) var(--space-20);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-full);
	background-color: var(--color-surface-default);
	box-shadow: 0 4px 2px rgb(151 135 102 / 8%);
}

.solution-hero__pill-marker {
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	background-color: var(--solution-marker-green);
}

.solution-hero__pill-label {
	color: var(--color-text-default);
	font-family: var(--font-family-body);
	font-size: var(--text-body-sm-size);
	line-height: var(--text-body-sm-lh);
}

/* Controlled 3+2 split, for the pages where Figma breaks five pills across two
   rows instead of letting them ride on one line (`1:8555`: row 1 673 wide at
   x=243.5, row 2 424 at x=368, both centred in the 1160 container, gaps exactly
   24). Each row therefore has to be centred on its own, which a single grid
   cannot do with content-sized pills — so the rows stay flex lines and a
   presentational break splits them after the third pill, independent of label
   length. The break carries the row gap, so the container's own row-gap is
   zeroed rather than counted on both sides of it. */
.solution-hero__pills--three-two {
	row-gap: 0;
}

.solution-hero__pills-break {
	flex-basis: 100%;
	height: var(--space-12);
}

/* --------------------------------------------------------------------------
   Closing statement
   -------------------------------------------------------------------------- */

.solution-hero__statement {
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: center;
	gap: var(--space-16);
}

.solution-hero__statement-text {
	max-width: var(--solution-hero-statement-measure);
	margin: 0;
	color: var(--color-green-800);
	font-family: var(--font-family-display);
	font-size: var(--text-display-h4-size);
	font-weight: 400;
	line-height: var(--text-display-h4-lh);
	letter-spacing: 0;
	text-align: center;
}

.solution-hero__statement-note {
	max-width: 868px;
	margin: 0;
	color: var(--color-green-800);
	font-family: var(--font-family-body);
	font-size: var(--text-body-md-size);
	line-height: var(--text-body-md-lh);
	text-align: center;
}

/* ==========================================================================
   Tablet — Figma 1:2356 (768). Content left-aligns and caps at the 704px
   measure so wider tablet viewports keep the designed proportions.
   ========================================================================== */

@media (max-width: 74.99875rem) {
	.solution-hero {
		padding-block: var(--space-192) var(--space-64);
		padding-inline: var(--space-32);
	}

	.solution-hero,
	.solution-hero--intro-tone-muted {
		--solution-hero-intro-color: var(--color-neutral-600);
	}

	.solution-hero__texture {
		bottom: 30%;
		left: -532.5px;
		width: 2309px;
		height: 1130px;
		margin-left: 0;
		background-image: url("../../images/solutions/shared/hero-dot-field-compact.png");
	}

	/* Mask follows the texture swap so the glow stays in register. */
	.solution-hero__texture-glow {
		-webkit-mask-image: url("../../images/solutions/shared/hero-dot-field-compact.png");
		mask-image: url("../../images/solutions/shared/hero-dot-field-compact.png");
	}

	.solution-hero__inner {
		max-width: 704px;
		align-items: flex-start;
		gap: var(--space-40);
		margin-inline: auto;
	}

	.solution-hero__copy {
		align-items: flex-start;
	}

	.solution-hero__title {
		max-width: none;
		font-size: 2rem;
		line-height: normal;
		text-align: left;
	}

	.solution-hero__intro {
		max-width: none;
		text-align: left;
	}

	.solution-hero__cta {
		align-self: flex-start;
	}

	.solution-hero__signals {
		display: grid;
		width: auto;
		max-width: none;
		min-height: 0;
		grid-template-columns: repeat(2, minmax(0, 314.667px));
		gap: var(--space-32);
		margin-inline: 0;
		padding: var(--space-8);
	}

	.solution-hero__signal {
		align-items: flex-start;
		justify-content: flex-start;
		gap: var(--space-16);
	}

	.solution-hero__signal-label {
		color: var(--color-neutral-600);
	}

	/* Figma folds the pill block into the copy stack at tablet (16px), while
	   the CTA and statement keep the 40px rhythm. */
	.solution-hero--block-pills .solution-hero__pills-block {
		margin-top: calc(var(--space-16) - var(--space-40));
	}

	.solution-hero__pills-block {
		align-items: flex-start;
	}

	.solution-hero__pills {
		max-width: none;
		justify-content: flex-start;
		gap: var(--space-16) var(--space-12);
	}

	/* Re-asserted because the `gap` shorthand above resets row-gap. */
	.solution-hero__pills--three-two {
		row-gap: 0;
	}

	.solution-hero__pills-break {
		height: var(--space-16);
	}

	.solution-hero__pills-lead,
	.solution-hero__pills-note {
		max-width: none;
		text-align: left;
	}

	.solution-hero__statement {
		align-items: flex-start;
	}

	.solution-hero__statement-text {
		max-width: none;
		font-size: 1.25rem;
		line-height: normal;
		text-align: left;
	}

	.solution-hero__statement-note {
		max-width: none;
		text-align: left;
	}
}

/* ==========================================================================
   Mobile — Figma 1:1824 (375). Single column; everything else inherits tablet.
   ========================================================================== */

@media (max-width: 47.99875rem) {
	.solution-hero {
		padding-inline: var(--space-20);
	}

	.solution-hero__inner {
		max-width: none;
	}

	.solution-hero__signals {
		grid-template-columns: minmax(0, 314.667px);
	}

	/* Figma stacks the pills at mobile, so the forced split is dropped and the
	   container takes its row gap back. */
	.solution-hero__pills--three-two {
		row-gap: var(--space-16);
	}

	.solution-hero__pills-break {
		display: none;
	}
}