/* Magic Patterns outreach :: scoped to .mp */
.mp {
	--mp-ink: #001617;
	--mp-paper: #ffffff;
	--mp-text: #001617;
	--mp-muted: rgba(0, 22, 23, 0.62);
	--mp-line: rgba(0, 22, 23, 0.12);
	--mp-green: #7cd27f;
	--mp-blue: #51b6f8;
	--mp-purple: #a390cb;
	--mp-grad: linear-gradient(100deg, #a390cb 0%, #cbabce 10%, #abcbe0 25%, #7cd27f 70%, #bfffa2 100%);
	--mp-grad-text: linear-gradient(100deg, #8a72c4 0%, #3d9fe0 45%, #3fae5c 100%);
	--mp-glass:
		linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 45%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(120, 135, 160, 0.03));
	--mp-shadow:
		inset 0 1px 0 0 rgba(255, 255, 255, 0.32),
		0 1px 2px -1px rgba(60, 80, 110, 0.06),
		0 6px 14px -6px rgba(60, 80, 110, 0.1),
		0 18px 36px -14px rgba(50, 70, 110, 0.14);
	--mp-ease: cubic-bezier(0.22, 1, 0.36, 1);

	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: #fff;
	color: var(--mp-text);
	padding: 5em 0 6em;
	display: flex;
	flex-direction: column;
	gap: 4.5em;
}

.mp *,
.mp *::before,
.mp *::after { box-sizing: border-box; }

.mp > .mp-wrap { position: relative; z-index: 1; }

/* ---------- Aurora background ---------- */
.mp-aurora {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

/* hero "bowtie" beam: colour flares in from both sides and vanishes at the centre */
.mp-beam {
	position: absolute;
	top: -6em;
	left: -10%;
	width: 120%;
	height: 60em;
	max-height: 110vh;
	background:
		linear-gradient(180deg,
			transparent 18%,
			var(--mp-purple) 26%,
			var(--mp-green) 34%,
			var(--mp-blue) 42%,
			#cbabce 48%,
			var(--mp-purple) 54%,
			var(--mp-green) 62%,
			var(--mp-blue) 72%,
			transparent 82%);
	background-size: 100% 140%;
	filter: blur(28px) saturate(1.1);
	opacity: 0.75;
	-webkit-mask-image:
		conic-gradient(from 0deg at 50% 40%, transparent 0deg 40deg, #000 78deg 102deg, transparent 140deg 220deg, #000 258deg 282deg, transparent 320deg),
		radial-gradient(ellipse 30% 26% at 50% 40%, transparent 20%, #000 100%),
		linear-gradient(180deg, transparent 8%, #000 25%, #000 65%, transparent 92%);
	-webkit-mask-composite: source-in, source-in;
	mask-image:
		conic-gradient(from 0deg at 50% 40%, transparent 0deg 40deg, #000 78deg 102deg, transparent 140deg 220deg, #000 258deg 282deg, transparent 320deg),
		radial-gradient(ellipse 30% 26% at 50% 40%, transparent 20%, #000 100%),
		linear-gradient(180deg, transparent 8%, #000 25%, #000 65%, transparent 92%);
	mask-composite: intersect, intersect;
	animation: mp-beam-drift 16s ease-in-out infinite alternate;
}

/* soft drifting colour blobs down the rest of the section */
.mp-blob {
	position: absolute;
	width: 55vw;
	max-width: 760px;
	aspect-ratio: 1;
	border-radius: 50%;
	filter: blur(70px);
	opacity: 0.32;
	will-change: transform;
}

.mp-blob-a { top: 22%; left: -18%;  background: radial-gradient(circle, var(--mp-green) 0, transparent 65%);  animation: mp-mesh-a 11s ease-in-out infinite alternate; }
.mp-blob-b { top: 38%; right: -20%; background: radial-gradient(circle, var(--mp-blue) 0, transparent 65%);   animation: mp-mesh-b 14s ease-in-out infinite alternate; }
.mp-blob-c { top: 56%; left: -22%;  background: radial-gradient(circle, var(--mp-purple) 0, transparent 65%); animation: mp-mesh-c 17s ease-in-out infinite alternate; }
.mp-blob-d { top: 72%; right: -18%; background: radial-gradient(circle, var(--mp-green) 0, transparent 65%);  animation: mp-mesh-b 13s ease-in-out infinite alternate-reverse; }
.mp-blob-e { top: 88%; left: 10%;   background: radial-gradient(circle, var(--mp-blue) 0, transparent 65%);   animation: mp-mesh-a 15s ease-in-out infinite alternate-reverse; }

@keyframes mp-beam-drift {
	from { background-position: 50% 0%;   transform: scaleY(1); }
	to   { background-position: 50% 100%; transform: scaleY(1.08); }
}
@keyframes mp-mesh-a { to { transform: translate(35%, 18%) scale(1.2); } }
@keyframes mp-mesh-b { to { transform: translate(-38%, 14%) scale(0.85); } }
@keyframes mp-mesh-c { to { transform: translate(24%, -26%) scale(1.25); } }

.mp-wrap {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 16px;
}

@media (min-width: 768px) {
	.mp-wrap { padding: 0 32px; }
}

.mp-sr {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- Type ---------- */
.mp-eyebrow {
	font-size: 0.8em;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #2f8f5a;
	font-weight: 600;
	margin: 0 0 0.75em;
}

.mp-title {
	font-size: clamp(2em, 5vw, 3.5em);
	line-height: 1.08;
	margin: 0 0 0.5em;
	max-width: 16em;
	text-wrap: balance;
	color: var(--mp-text);
}

.mp-grad {
	background: var(--mp-grad-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-style: italic;
	padding-right: 0.08em;
}

.mp-lede {
	font-size: 1.2em;
	line-height: 1.6;
	max-width: 40em;
	color: var(--mp-muted);
	margin: 0;
}

.mp-lede strong { color: var(--mp-text); }

.mp-intro {
	text-align: center;
	padding-top: clamp(3em, 10vw, 8em);
	padding-bottom: clamp(2em, 8vw, 6em);
}

.mp-intro .mp-title,
.mp-intro .mp-lede { margin-left: auto; margin-right: auto; }

.mp-intro .mp-lede {
	max-width: 34em;
	padding: 1em 1.25em;
	border-radius: 1em;
	background: rgba(255, 255, 255, 0.55);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.mp-section-head { margin-bottom: 1.5em; }

.mp-section-head h3,
.mp-cta h3 {
	font-size: clamp(1.5em, 3vw, 2.1em);
	margin: 0;
	color: var(--mp-text);
	text-wrap: balance;
}

/* ---------- Paper (logo surface) ---------- */
.mp-paper {
	position: relative;
	margin: 0;
	background-color: var(--mp-paper);
	background-image: radial-gradient(rgba(0, 22, 23, 0.07) 1px, transparent 1.2px), var(--mp-glass);
	background-size: 18px 18px, auto;
	border: 1px solid var(--mp-line);
	border-radius: 1.5em;
	color: var(--mp-ink);
	box-shadow: var(--mp-shadow);
}

/* ---------- Layered logo stage (970 x 141 artboard) ---------- */
.mp-stage {
	position: relative;
	width: 100%;
	aspect-ratio: 970 / 141;
}

.mp-layer {
	position: absolute;
	top: 0;
	height: 100%;
	max-width: none;
	display: block;
}

.mp-mark  { left: 0;        width: 19.935%; transform-origin: 50% 100%; }
.mp-spark { left: 19.515%;  width: 4.926%;  transform-origin: 20% 60%; }
.mp-text  { left: 25.824%;  width: 74.176%; transform-origin: 0 77%; }

/* ---------- Live reveal ---------- */
.mp-reveal {
	padding: clamp(2em, 7vw, 5em) clamp(1.25em, 6vw, 5em) 1.5em;
}

.mp-reveal figcaption,
.mp-final figcaption {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
	justify-content: space-between;
	align-items: center;
	margin-top: clamp(2em, 6vw, 4em);
	font-size: 0.9em;
	color: rgba(0, 22, 23, 0.6);
}

.mp-replay {
	appearance: none;
	border: 1px solid rgba(0, 22, 23, 0.15);
	background: #fff;
	color: var(--mp-ink);
	border-radius: 999px;
	padding: 0.5em 1.1em;
	font: inherit;
	cursor: pointer;
	transition: border-color 0.2s, transform 0.2s;
}

.mp-replay:hover { border-color: #7cd27f; transform: translateY(-1px); }

.mp-twinkle {
	position: absolute;
	left: 21.9%;
	top: 37%;
	width: 3.2%;
	aspect-ratio: 1;
	opacity: 0;
	pointer-events: none;
	background: radial-gradient(circle, #bfffa2 0 12%, transparent 13%),
		conic-gradient(from 0deg, transparent 0 20%, #bfffa2 22% 28%, transparent 30% 45%, #abcbe0 47% 53%, transparent 55% 70%, #bfffa2 72% 78%, transparent 80% 95%, #abcbe0 97%);
	-webkit-mask: radial-gradient(circle, #000 0 30%, transparent 62%);
	mask: radial-gradient(circle, #000 0 30%, transparent 62%);
}

/* initial (pre-play) state */
.mp-reveal .mp-mark  { opacity: 0; transform: translateX(-12%) rotate(-6deg) skewX(10deg); }
.mp-reveal .mp-spark { opacity: 0; transform: translate(-60%, 40%) scale(0.2); }
.mp-reveal .mp-text  { opacity: 0; transform: translateX(-3%) skewX(9deg); }

.mp-reveal.is-playing .mp-mark {
	animation: mp-mark-in 0.9s var(--mp-ease) forwards;
}
.mp-reveal.is-playing .mp-spark {
	animation: mp-spark-in 0.7s var(--mp-ease) 0.75s forwards, mp-glow 2.4s ease-in-out 1.6s infinite;
}
.mp-reveal.is-playing .mp-text {
	animation: mp-text-in 1.1s var(--mp-ease) 1s forwards;
}
.mp-reveal.is-playing .mp-twinkle {
	animation: mp-twinkle 1.1s ease-out 1.25s forwards;
}

@keyframes mp-mark-in {
	60% { opacity: 1; transform: translateX(1.5%) rotate(1deg) skewX(-1deg); }
	to  { opacity: 1; transform: none; }
}
@keyframes mp-spark-in {
	0%  { opacity: 0; transform: translate(-60%, 40%) scale(0.2); }
	60% { opacity: 1; transform: translate(8%, -6%) scale(1.15); }
	to  { opacity: 1; transform: none; }
}
@keyframes mp-text-in {
	0%  { opacity: 0; transform: translateX(-3%) skewX(9deg); }
	35% { opacity: 1; transform: translateX(0) skewX(9deg); }
	75% { transform: translateX(0.4%) skewX(-1.5deg); }
	to  { opacity: 1; transform: none; }
}
@keyframes mp-glow {
	0%, 100% { filter: drop-shadow(0 0 0 rgba(191, 255, 162, 0)); }
	50%      { filter: drop-shadow(0 0 6px rgba(124, 210, 127, 0.9)); }
}
@keyframes mp-twinkle {
	0%  { opacity: 0; transform: scale(0.2) rotate(0deg); }
	40% { opacity: 1; transform: scale(1.4) rotate(45deg); }
	to  { opacity: 0; transform: scale(0.6) rotate(90deg) translate(40%, -40%); }
}

/* ---------- Before / after ---------- */
.mp-compare {
	padding: clamp(3em, 8vw, 5.5em) clamp(1.25em, 6vw, 5em);
	--pos: 50%;
}

.mp-compare-stage {
	position: relative;
	aspect-ratio: 970 / 141;
}

.mp-compare-stage img {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: auto;
	max-width: none;
}

.mp-compare-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.mp-compare-after  { clip-path: inset(0 0 0 var(--pos)); }

.mp-compare-line {
	position: absolute;
	top: -30%;
	bottom: -30%;
	left: var(--pos);
	width: 2px;
	margin-left: -1px;
	background: var(--mp-grad);
	pointer-events: none;
}

.mp-compare-knob {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 2.4em;
	height: 2.4em;
	border-radius: 50%;
	background: var(--mp-ink);
	color: #bfffa2;
	display: grid;
	place-items: center;
	font-size: 0.9em;
	box-shadow: 0 4px 14px rgba(0, 22, 23, 0.3);
}

.mp-compare-tag {
	position: absolute;
	top: 1em;
	font-size: 0.75em;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.35em 0.8em;
	border-radius: 999px;
	pointer-events: none;
}

.mp-tag-before { left: 1em;  background: rgba(0, 22, 23, 0.06); color: rgba(0, 22, 23, 0.65); }
.mp-tag-after  { right: 1em; background: var(--mp-ink); color: #bfffa2; }

.mp-compare-range {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
}

.mp-compare:has(.mp-compare-range:focus-visible) {
	outline: 3px solid #7cd27f;
	outline-offset: 4px;
}

/* ---------- Steps ---------- */
.mp-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.5em;
}

@media (min-width: 992px) {
	.mp-steps { grid-template-columns: repeat(3, 1fr); }
}

.mp-step {
	display: flex;
	flex-direction: column;
	gap: 1.25em;
	padding: 1em;
	border-radius: 1.75em;
	border: 1px solid var(--mp-line);
	background: rgba(255, 255, 255, 0.6) var(--mp-glass);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: var(--mp-shadow);
}

.mp-mini {
	padding: 2.75em 1.5em;
	border-radius: 1.1em;
	box-shadow: none;
}

.mp-mini .mp-layer { transition: opacity 0.4s, transform 0.4s var(--mp-ease), filter 0.4s; }

/* steps build on each other; the focus layer is full strength, the rest recede */
.mp-mini .mp-text  { transform: skewX(9deg); }
.mp-mini .mp-spark { opacity: 0; }

.is-step-1 .mp-text  { opacity: 0.18; }

.is-step-2 .mp-mark  { opacity: 0.35; }
.is-step-2 .mp-spark { opacity: 1; filter: drop-shadow(0 0 5px rgba(124, 210, 127, 0.9)); }
.is-step-2 .mp-text  { opacity: 0.18; }

.is-step-3 .mp-mark,
.is-step-3 .mp-spark { opacity: 0.35; }
.is-step-3 .mp-text  { transform: none; }

.mp-step:hover .mp-layer { opacity: 1; }

.mp-step-body { padding: 0 0.5em 0.75em; }

.mp-step-num {
	display: inline-block;
	font-size: 0.8em;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	background: var(--mp-grad-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-weight: 700;
	margin-bottom: 0.5em;
}

.mp-step h4,
.mp-offers h4 {
	font-size: 1.25em;
	margin: 0 0 0.4em;
	color: var(--mp-text);
}

.mp-step p,
.mp-offers p {
	margin: 0;
	line-height: 1.6;
	color: var(--mp-muted);
}

/* ---------- Final lockup ---------- */
.mp-final {
	padding: clamp(3em, 9vw, 6.5em) clamp(1.25em, 7vw, 6em) 1.5em;
}

.mp-final img { display: block; width: 100%; height: auto; }

.mp-final figcaption { justify-content: center; }

/* ---------- Next / CTA ---------- */
.mp-offers {
	list-style: none;
	margin: 0 0 3em;
	padding: 0;
	display: grid;
	gap: 1em;
}

@media (min-width: 768px) {
	.mp-offers { grid-template-columns: repeat(2, 1fr); }
}

.mp-offers li {
	padding: 1.5em;
	border-radius: 1.25em;
	border: 1px solid var(--mp-line);
	background: rgba(255, 255, 255, 0.6) var(--mp-glass);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: var(--mp-shadow);
}

.mp-cta {
	position: relative;
	padding: clamp(2em, 6vw, 3.5em);
	border-radius: 1.75em;
	background:
		linear-gradient(var(--mp-ink), var(--mp-ink)) padding-box,
		var(--mp-grad) border-box;
	border: 2px solid transparent;
	text-align: center;
	color: #eef6f1;
	box-shadow: var(--mp-shadow);
}

.mp-cta h3 { color: #fff; }

.mp-cta p {
	max-width: 36em;
	margin: 1em auto 2em;
	line-height: 1.6;
	color: rgba(238, 246, 241, 0.72);
}

.mp-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1em 1.5em;
	justify-content: center;
	align-items: center;
}

.mp-cta-link {
	color: #bfffa2;
	text-decoration: none;
	border-bottom: 1px solid rgba(191, 255, 162, 0.4);
}

.mp-cta-link:hover { color: #fff; border-color: #fff; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.mp-reveal .mp-layer { opacity: 1; transform: none; animation: none !important; }
	.mp-reveal .mp-twinkle,
	.mp-replay { display: none; }
	.mp-mini .mp-layer { transition: none; }
	.mp-beam,
	.mp-blob { animation: none; }
}