.arraysubs-ymn {
	// WP-native admin palette.
	--ymn-ink: #1d2327;
	--ymn-muted: #50575e;
	--ymn-line: #dcdcde;
	--ymn-soft-line: #f0f0f1;
	--ymn-primary: var(--arraysubs-fb-primary-color, #0073aa);
	--ymn-primary-rgb: var(--arraysubs-fb-primary-rgb, 0, 115, 170);
	--ymn-radius: var(--arraysubs-fb-border-radius, 4px);
	--ymn-surface: #fff;
	--ymn-success: #00a32a;
	--ymn-warning: #996800;
	--ymn-danger: #d63638;

	display: flex;
	flex-direction: column;
	gap: 40px;
	width: min(1160px, 100%);

	svg {
		display: block;
		flex: 0 0 auto;
	}

	// ---- Hero --------------------------------------------------------
	&__hero {
		position: relative;
		overflow: hidden;
		display: grid;
		grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
		gap: 40px;
		align-items: center;
		padding: 44px 40px;
		border: 1px solid var(--ymn-line);
		border-radius: var(--ymn-radius);
		background:
			radial-gradient(110% 130% at 88% -20%, rgba(var(--ymn-primary-rgb), 0.14), transparent 52%),
			linear-gradient(180deg, rgba(246, 251, 254, 0.9), rgba(255, 255, 255, 0.6)),
			var(--ymn-surface);
		box-shadow: 0 16px 40px rgba(29, 35, 39, 0.07);
	}

	&__hero-copy {
		min-width: 0;
	}

	&__eyebrow {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 7px 13px;
		border: 1px solid rgba(var(--ymn-primary-rgb), 0.24);
		border-radius: 999px;
		background: rgba(var(--ymn-primary-rgb), 0.08);
		color: var(--ymn-primary);
		font-size: 12px;
		font-weight: 700;
		line-height: 1;
		letter-spacing: 0.04em;
		text-transform: uppercase;

		svg {
			width: 14px;
			height: 14px;
		}
	}

	&__hero-title {
		max-width: 18ch;
		margin: 18px 0 0;
		color: var(--ymn-ink);
		font-size: 38px;
		font-weight: 800;
		line-height: 1.12;
		text-wrap: balance;
	}

	&__hero-subtitle {
		max-width: 56ch;
		margin: 14px 0 0;
		color: var(--ymn-muted);
		font-size: 15px;
		line-height: 1.7;
	}

	&__highlights {
		display: flex;
		flex-direction: column;
		gap: 9px;
		margin: 22px 0 0;
		padding: 0;
		list-style: none;
	}

	&__highlight {
		display: inline-flex;
		align-items: center;
		gap: 9px;
		margin: 0;
		color: var(--ymn-ink);
		font-size: 14px;
		font-weight: 600;

		svg {
			width: 17px;
			height: 17px;
			padding: 3px;
			border-radius: 999px;
			background: rgba(0, 163, 42, 0.12);
			color: var(--ymn-success);
			stroke-width: 3.4;
		}
	}

	&__hero-actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 16px;
		margin-top: 26px;
	}

	&__microcopy {
		color: var(--ymn-muted);
		font-size: 13px;
		font-weight: 500;
	}

	// ---- Hero mock panel ----------------------------------------------
	&__panel-wrap {
		min-width: 0;
	}

	&__panel {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: 12px;
		padding: 18px;
		border: 1px solid var(--ymn-line);
		border-radius: var(--ymn-radius);
		background: var(--ymn-surface);
		box-shadow:
			0 2px 6px rgba(29, 35, 39, 0.06),
			0 22px 44px rgba(29, 35, 39, 0.12);
	}

	&__panel-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
	}

	&__panel-title {
		color: var(--ymn-muted);
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.05em;
		text-transform: uppercase;
	}

	&__panel-pill {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 5px 10px;
		border-radius: 999px;
		background: rgba(0, 163, 42, 0.1);
		color: var(--ymn-success);
		font-size: 11px;
		font-weight: 700;
		line-height: 1;
		text-transform: uppercase;
		letter-spacing: 0.03em;

		svg {
			width: 12px;
			height: 12px;
		}
	}

	&__panel-rows {
		display: flex;
		flex-direction: column;
		gap: 8px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	&__panel-row {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		gap: 10px;
		align-items: center;
		margin: 0;
		padding: 10px 12px;
		border: 1px solid var(--ymn-soft-line);
		border-radius: var(--ymn-radius);
		background: #fbfbfc;
		animation: arraysubs-ymn-row-in 400ms ease both;

		svg {
			width: 16px;
			height: 16px;
		}

		@for $i from 1 through 4 {
			&:nth-child(#{$i}) {
				animation-delay: #{80 + ($i - 1) * 120}ms;
			}
		}
	}

	&__panel-row--success svg {
		color: var(--ymn-success);
	}

	&__panel-row--retry svg {
		color: var(--ymn-warning);
	}

	&__panel-row--info svg {
		color: var(--ymn-primary);
	}

	&__panel-text {
		overflow: hidden;
		color: var(--ymn-ink);
		font-size: 13px;
		font-weight: 500;
		line-height: 1.4;
	}

	&__panel-meta {
		color: var(--ymn-muted);
		font-size: 11.5px;
		white-space: nowrap;
		font-variant-numeric: tabular-nums;
	}

	&__panel-foot {
		display: flex;
		align-items: center;
		gap: 8px;
		padding-top: 11px;
		border-top: 1px solid var(--ymn-soft-line);
		color: var(--ymn-success);
		font-size: 12.5px;
		font-weight: 700;

		svg {
			width: 15px;
			height: 15px;
		}
	}

	&__panel-caption {
		margin: 10px 0 0;
		color: var(--ymn-muted);
		font-size: 12px;
		font-style: italic;
		text-align: center;
	}

	// ---- CTA buttons ---------------------------------------------------
	&__cta {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		padding: 13px 24px;
		border: 1px solid transparent;
		border-radius: var(--ymn-radius);
		font-size: 15px;
		font-weight: 700;
		line-height: 1;
		text-decoration: none;
		transition: transform 150ms ease, box-shadow 150ms ease;

		svg {
			width: 18px;
			height: 18px;
			transition: transform 150ms ease;
		}

		&:hover svg,
		&:focus svg {
			transform: translateX(3px);
		}

		&:focus-visible {
			outline: 2px solid rgba(var(--ymn-primary-rgb), 0.5);
			outline-offset: 2px;
		}
	}

	&__cta--solid {
		background: var(--ymn-primary);
		color: #fff;
		box-shadow: 0 10px 24px rgba(var(--ymn-primary-rgb), 0.28);

		&:hover,
		&:focus {
			color: #fff;
			transform: translateY(-1px);
			box-shadow: 0 14px 30px rgba(var(--ymn-primary-rgb), 0.34);
		}
	}

	&__cta--light {
		flex: 0 0 auto;
		background: #fff;
		color: var(--ymn-primary);
		box-shadow: 0 10px 24px rgba(29, 35, 39, 0.18);

		&:hover,
		&:focus {
			color: var(--ymn-primary);
			transform: translateY(-1px);
		}
	}

	// Secondary CTA on light surfaces (hero).
	&__cta--outline {
		border-color: rgba(var(--ymn-primary-rgb), 0.4);
		background: transparent;
		color: var(--ymn-primary);

		&:hover,
		&:focus {
			border-color: var(--ymn-primary);
			background: rgba(var(--ymn-primary-rgb), 0.06);
			color: var(--ymn-primary);
			transform: translateY(-1px);
		}
	}

	// Secondary CTA on the coloured closing banner.
	&__cta--ghost {
		flex: 0 0 auto;
		border-color: rgba(255, 255, 255, 0.55);
		background: transparent;
		color: #fff;

		&:hover,
		&:focus {
			border-color: #fff;
			background: rgba(255, 255, 255, 0.12);
			color: #fff;
			transform: translateY(-1px);
		}
	}

	// ---- Stat strip ----------------------------------------------------
	&__stats {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 3px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	&__stat {
		display: flex;
		flex-direction: column;
		gap: 6px;
		margin: 0;
		padding: 22px 24px;
		border: 1px solid var(--ymn-line);
		border-radius: var(--ymn-radius);
		background: var(--ymn-surface);
	}

	&__stat-value {
		color: var(--ymn-primary);
		font-size: 30px;
		font-weight: 800;
		line-height: 1;
		font-variant-numeric: tabular-nums;
	}

	&__stat-label {
		color: var(--ymn-muted);
		font-size: 13px;
		font-weight: 500;
		line-height: 1.4;
	}

	// ---- Section heading -----------------------------------------------
	&__section-head {
		text-align: center;
	}

	&__section-eyebrow {
		display: inline-block;
		color: var(--ymn-primary);
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	&__section-title {
		margin: 10px 0 0;
		color: var(--ymn-ink);
		font-size: 28px;
		font-weight: 800;
		line-height: 1.2;
		text-wrap: balance;
	}

	&__section-subtitle {
		max-width: 60ch;
		margin: 12px auto 0;
		color: var(--ymn-muted);
		font-size: 15px;
		line-height: 1.65;
	}

	// ---- Manual vs Pro comparison ---------------------------------------
	&__compare {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
		margin-top: -8px;
	}

	// WP notice-style left border encodes the verdict of each column.
	&__compare-card {
		padding: 24px 26px;
		border: 1px solid var(--ymn-line);
		border-left-width: 4px;
		border-radius: var(--ymn-radius);
		background: var(--ymn-surface);
	}

	&__compare-card--without {
		border-left-color: var(--ymn-danger);
	}

	&__compare-card--with {
		border-left-color: var(--ymn-success);
	}

	&__compare-kicker {
		display: inline-block;
		font-size: 12px;
		font-weight: 800;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}

	&__compare-card--without &__compare-kicker {
		color: var(--ymn-danger);
	}

	&__compare-card--with &__compare-kicker {
		color: var(--ymn-success);
	}

	&__compare-list {
		margin: 14px 0 0;
		padding: 0;
		list-style: none;

		li {
			display: flex;
			gap: 10px;
			align-items: flex-start;
			margin: 0;
			padding: 10px 0;
			border-bottom: 1px solid var(--ymn-soft-line);
			color: #3c434a;
			font-size: 14px;
			line-height: 1.55;

			&:last-child {
				border-bottom: 0;
				padding-bottom: 0;
			}

			svg {
				width: 16px;
				height: 16px;
				margin-top: 2px;
				stroke-width: 2.6;
			}
		}
	}

	&__compare-card--without &__compare-list svg {
		color: var(--ymn-danger);
	}

	&__compare-card--with &__compare-list svg {
		color: var(--ymn-success);
	}

	// ---- Outcome pillars -------------------------------------------------
	&__pillars {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
		margin-top: -8px;
	}

	&__pillar {
		display: flex;
		flex-direction: column;
		padding: 26px;
		border: 1px solid var(--ymn-line);
		border-radius: var(--ymn-radius);
		background: var(--ymn-surface);
		transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;

		&:hover {
			transform: translateY(-2px);
			border-color: rgba(var(--ymn-primary-rgb), 0.4);
			box-shadow: 0 14px 30px rgba(29, 35, 39, 0.1);
		}
	}

	&__pillar-head {
		display: flex;
		gap: 14px;
		align-items: flex-start;
	}

	&__pillar-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		border-radius: var(--ymn-radius);
		background: rgba(var(--ymn-primary-rgb), 0.1);
		color: var(--ymn-primary);

		svg {
			width: 21px;
			height: 21px;
		}
	}

	&__pillar-title {
		margin: 0;
		color: var(--ymn-ink);
		font-size: 18px;
		font-weight: 700;
		line-height: 1.25;
	}

	&__pillar-promise {
		margin: 6px 0 0;
		color: var(--ymn-muted);
		font-size: 13.5px;
		line-height: 1.6;
	}

	&__pillar-features {
		margin: 16px 0 0;
		padding: 0;
		list-style: none;
	}

	&__pillar-feature {
		display: flex;
		gap: 10px;
		align-items: flex-start;
		margin: 0;
		padding: 9px 0;
		border-top: 1px solid var(--ymn-soft-line);
		font-size: 13.5px;
		line-height: 1.55;
		color: var(--ymn-muted);

		svg {
			width: 15px;
			height: 15px;
			margin-top: 2px;
			color: var(--ymn-primary);
		}

		strong {
			color: var(--ymn-ink);
			font-weight: 600;
		}
	}

	// ---- Trial steps -----------------------------------------------------
	&__steps {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 16px;
		margin-top: -8px;
	}

	&__step {
		padding: 26px;
		border: 1px solid var(--ymn-line);
		border-radius: var(--ymn-radius);
		background: var(--ymn-surface);
	}

	&__step--highlight {
		border-color: rgba(var(--ymn-primary-rgb), 0.4);
		background:
			linear-gradient(160deg, rgba(var(--ymn-primary-rgb), 0.08), transparent 55%),
			var(--ymn-surface);
	}

	&__step-number {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		border: 1px solid rgba(var(--ymn-primary-rgb), 0.24);
		border-radius: var(--ymn-radius);
		background: rgba(var(--ymn-primary-rgb), 0.08);
		color: var(--ymn-primary);
		font-size: 15px;
		font-weight: 800;
		font-variant-numeric: tabular-nums;
	}

	&__step-title {
		margin: 14px 0 0;
		color: var(--ymn-ink);
		font-size: 16px;
		font-weight: 700;
	}

	&__step-text {
		margin: 8px 0 0;
		color: var(--ymn-muted);
		font-size: 14px;
		line-height: 1.65;
	}

	&__step--highlight &__step-text {
		color: #3c434a;
		font-weight: 500;
	}

	// ---- Closing banner ---------------------------------------------------
	&__banner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 28px;
		padding: 36px 40px;
		border-radius: var(--ymn-radius);
		background:
			radial-gradient(120% 140% at 90% 10%, rgba(255, 255, 255, 0.16), transparent 55%),
			linear-gradient(135deg, var(--ymn-primary), rgba(var(--ymn-primary-rgb), 0.84));
		color: #fff;
		box-shadow: 0 20px 42px rgba(var(--ymn-primary-rgb), 0.28);
	}

	&__banner-copy {
		min-width: 0;
	}

	&__banner-actions {
		display: flex;
		flex: 0 0 auto;
		flex-direction: column;
		gap: 10px;
	}

	&__banner-title {
		margin: 0;
		color: #fff;
		font-size: 24px;
		font-weight: 800;
		line-height: 1.2;
		text-wrap: balance;
	}

	&__banner-note {
		max-width: 58ch;
		margin: 10px 0 0;
		color: rgba(255, 255, 255, 0.92);
		font-size: 15px;
		line-height: 1.6;
	}

	&__banner-chips {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin: 16px 0 0;
		padding: 0;
		list-style: none;
	}

	&__banner-chip {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		margin: 0;
		padding: 7px 12px;
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.14);
		color: #fff;
		font-size: 12px;
		font-weight: 600;
		line-height: 1;

		svg {
			width: 13px;
			height: 13px;
		}
	}

	// ---- Motion ------------------------------------------------------------
	@keyframes arraysubs-ymn-row-in {
		from {
			opacity: 0;
			transform: translateY(8px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@media (prefers-reduced-motion: reduce) {

		&__panel-row {
			animation: none;
		}

		&__cta,
		&__cta svg,
		&__pillar {
			transition: none;
		}
	}

	// ---- Responsive ----------------------------------------------------------
	@media (max-width: 1024px) {

		&__hero {
			grid-template-columns: 1fr;
			gap: 30px;
		}

		&__panel-wrap {
			max-width: 560px;
		}
	}

	@media (max-width: 960px) {

		&__stats {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		&__compare,
		&__pillars,
		&__steps {
			grid-template-columns: 1fr;
		}
	}

	@media (max-width: 782px) {
		gap: 28px;

		&__hero {
			padding: 30px 22px;
		}

		&__hero-title {
			font-size: 30px;
		}

		&__section-title {
			font-size: 24px;
		}

		&__stats {
			grid-template-columns: 1fr;
		}

		&__banner {
			flex-direction: column;
			align-items: flex-start;
			padding: 28px 24px;
		}

		&__banner-actions {
			width: 100%;
		}

		&__cta--light,
		&__cta--ghost {
			width: 100%;
			justify-content: center;
		}
	}
}
