/*
 * MKT-159: /ai-match-leads only (loaded by sections/header.php for that PAGE_NAME).
 * Hope's identity as clients already meet her in the leads site and her signature: the glowing sun,
 * her name in #9634EE, "AI Match Maker", the gold sparkle tagline. Ed, 10/3: "incredibly future
 * thinking like we are in the future now", so the page sits on a night sky with her sun as the light.
 * Everything is scoped under .ai-match-page / .aim-sections so no other lead page changes.
 */
:root {
	--aim-night: #0a0718;
	--aim-deep: #140c2e;
	--aim-violet: #9634ee;      /* Hope's name colour in the leads site and her signature */
	--aim-violet-soft: #c39bff; /* the same hue lifted for text on the night ground */
	--aim-electric: #5b8cff;
	--aim-sun: #ffc24a;
	--aim-sun-core: #fff3c9;
	--aim-gold: #f3c35a;
	--aim-ink: #f4efff;
	--aim-muted: #bdb3da;
	--aim-glass: rgba(255, 255, 255, .06);
	--aim-glass-line: rgba(255, 255, 255, .14);
	--aim-form-ink: #241c3d;
	--aim-form-muted: #5f5778;
	--aim-display: "Sora", "Plus Jakarta Sans", "Segoe UI", Helvetica, Arial, sans-serif;
	--aim-body: "Plus Jakarta Sans", PlusJakartaSans, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* ---------- hero: night sky, aurora, a faint grid ---------- */
.ai-match-page .hero.hero-ai-match {
	background-color: var(--aim-night);
	background-image:
		radial-gradient(700px 420px at 12% 8%, rgba(150, 52, 238, .38), transparent 62%),
		radial-gradient(620px 460px at 58% 0%, rgba(91, 140, 255, .22), transparent 60%),
		radial-gradient(520px 420px at 30% 72%, rgba(150, 52, 238, .16), transparent 65%),
		linear-gradient(180deg, var(--aim-night), var(--aim-deep));
	color: var(--aim-ink);
	font-family: var(--aim-body);
	padding: 36px 0 64px;
	position: relative; /* no overflow:hidden: the phone bar above the form rises into the header */
}
.ai-match-page .hero.hero-ai-match::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(ellipse 70% 60% at 30% 30%, #000 30%, transparent 75%);
	mask-image: radial-gradient(ellipse 70% 60% at 30% 30%, #000 30%, transparent 75%);
}
.ai-match-page .hero-ai-match .flex { position: relative; align-items: flex-start; }
.ai-match-page .hero-ai-match .flex .main-content { max-width: 880px; }

.aim-eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 4px 0 20px;
	font-family: var(--aim-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--aim-violet-soft);
}
.aim-badge, .nav-new {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--aim-violet);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* ---------- Hope's lockup: the sun, her name, her title ---------- */
.aim-lockup { display: flex; align-items: center; gap: 24px; margin: 0 0 24px; }
.aim-sun { position: relative; width: 112px; height: 112px; flex: 0 0 112px; }
.aim-sun::before {
	/* the soft halo, peach into lavender, like her icon */
	content: "";
	position: absolute;
	inset: -26px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 214, 140, .55) 0%, rgba(232, 190, 255, .28) 42%, rgba(150, 52, 238, 0) 70%);
	animation: aim-breathe 5.5s ease-in-out infinite;
}
.aim-sun-core {
	position: absolute;
	inset: 16px;
	border-radius: 50%;
	background: radial-gradient(circle at 42% 38%, var(--aim-sun-core) 0%, #ffe08a 28%, var(--aim-sun) 62%, #f5a524 100%);
	box-shadow: 0 0 34px 8px rgba(255, 194, 74, .55), 0 0 90px 24px rgba(150, 52, 238, .35);
}
.aim-spark {
	/* white four-point sparkles */
	position: absolute;
	width: 18px;
	height: 18px;
	background: #fff;
	clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
	filter: drop-shadow(0 0 6px rgba(255, 255, 255, .9));
	animation: aim-twinkle 3.2s ease-in-out infinite;
}
.aim-spark-1 { top: 2px; right: 6px; }
.aim-spark-2 { top: 44px; left: -4px; width: 12px; height: 12px; animation-delay: 1.1s; }
.aim-spark-3 { bottom: 4px; right: 18px; width: 10px; height: 10px; animation-delay: 2s; }
.aim-lockup-text { display: flex; flex-direction: column; line-height: 1.15; }
.aim-name {
	font-family: var(--aim-display);
	font-size: 46px;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--aim-violet-soft);
	background: linear-gradient(90deg, #d2b3ff, var(--aim-violet) 80%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.aim-title { font-family: var(--aim-display); font-size: 17px; font-weight: 600; letter-spacing: .04em; color: var(--aim-ink); margin-top: 2px; }
.aim-tagline { margin-top: 8px; font-size: 14px; font-style: italic; color: var(--aim-gold); }

@keyframes aim-breathe { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes aim-twinkle { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.1); } }

/* ---------- headline and points ---------- */
.ai-match-page .hero-ai-match h1.aim-h1 {
	font-family: var(--aim-display);
	font-weight: 700;
	font-size: 54px;
	line-height: 1.06;
	letter-spacing: -.025em;
	color: var(--aim-ink);
	margin: 6px 0 18px;
	text-wrap: balance;
}
.ai-match-page .hero-ai-match h1.aim-h1 span {
	display: block;
	color: var(--aim-violet-soft);
	background: linear-gradient(90deg, #d2b3ff, #a45cf5 45%, var(--aim-electric));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.aim-lede { font-size: 19px; line-height: 1.6; color: var(--aim-muted); max-width: 62ch; margin: 0 0 24px; }

.ai-match-page .hero-ai-match ul.aim-points {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 28px;
	margin: 0 0 30px;
	padding: 0;
}
.ai-match-page .hero-ai-match ul.aim-points li {
	width: auto; /* the shared sheet sets 50% below 1300px */
	max-width: none;
	padding-left: 26px;
	position: relative;
	font-size: 16px;
	line-height: 1.5;
	color: var(--aim-muted);
}
.ai-match-page .hero-ai-match ul.aim-points li::before {
	content: "\2726";
	position: absolute;
	left: 0;
	top: 0;
	margin: 0;
	color: var(--aim-gold);
	font-size: 16px;
}
.aim-points strong { color: var(--aim-ink); }

/* ---------- the example thread: messages arrive one by one ---------- */
.aim-thread {
	margin: 0;
	max-width: 620px;
	padding: 0 0 16px;
	border-radius: 20px;
	background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
	border: 1px solid var(--aim-glass-line);
	box-shadow: 0 30px 80px -30px rgba(150, 52, 238, .65), inset 0 1px 0 rgba(255, 255, 255, .12);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	overflow: hidden;
}
.aim-thread-head {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--aim-glass-line);
	font-size: 13px;
	color: var(--aim-muted);
}
.aim-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.aim-thread-subject { margin-left: 10px; color: var(--aim-ink); font-weight: 600; }
.aim-msg {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 14px 16px 0;
	opacity: 0;
	transform: translateY(8px);
	animation: aim-arrive .6s ease-out forwards;
}
.aim-msg b { display: block; font-size: 13px; color: var(--aim-ink); margin-bottom: 2px; }
.aim-msg p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--aim-muted); }
.aim-msg > div {
	padding: 10px 14px;
	border-radius: 14px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .08);
}
.aim-msg-hope > div { border-color: rgba(150, 52, 238, .5); background: rgba(150, 52, 238, .16); }
.aim-msg-hope { animation-delay: .4s; }
.aim-msg-consumer { animation-delay: 1.4s; }
.aim-msg-lo { animation-delay: 2.4s; }
.aim-avatar-img { width: 34px; height: 34px; flex: 0 0 34px; filter: drop-shadow(0 0 10px rgba(255, 194, 74, .7)); }
.aim-avatar {
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-family: var(--aim-display);
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	background: rgba(255, 255, 255, .16);
}
.aim-avatar-lo { font-size: 11px; background: #3a5fd9; }
.aim-typing { display: flex; gap: 4px; margin: 12px 0 0 62px; opacity: 0; animation: aim-arrive .4s ease-out 3.1s forwards; }
.aim-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--aim-violet-soft); animation: aim-bounce 1.2s ease-in-out infinite; }
.aim-typing span:nth-child(2) { animation-delay: .15s; }
.aim-typing span:nth-child(3) { animation-delay: .3s; }
.aim-thread figcaption { margin: 14px 16px 0; font-size: 13px; color: var(--aim-muted); }
@keyframes aim-arrive { to { opacity: 1; transform: none; } }
@keyframes aim-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-4px); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
	.aim-sun::before, .aim-spark, .aim-typing span { animation: none; }
	.aim-msg, .aim-typing { animation: none; opacity: 1; transform: none; }
}

/* ---------- the signup form: same fields and ids, lit by Hope's violet ---------- */
.ai-match-page .hero-ai-match .flex .cta .phone-cta {
	background: linear-gradient(90deg, #2a1559, #3b1d7a);
	border-radius: 18px 18px 0 0;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}
.ai-match-page .hero-ai-match .flex .cta .form {
	background: #fff;
	color: var(--aim-form-ink);
	border-radius: 0 0 18px 18px;
	box-shadow: 0 30px 80px -24px rgba(150, 52, 238, .75), 0 0 0 1px rgba(195, 155, 255, .35);
}
.ai-match-page .hero-ai-match .flex .cta .form input,
.ai-match-page .hero-ai-match .flex .cta .form select {
	border: 1px solid #ddd3ee;
	background: #fcfaff;
	color: var(--aim-form-ink);
}
.ai-match-page .hero-ai-match .flex .cta .form input:focus,
.ai-match-page .hero-ai-match .flex .cta .form select:focus {
	outline: 2px solid var(--aim-violet);
	outline-offset: 1px;
}
.ai-match-page .hero-ai-match .flex .cta .form label,
.ai-match-page .hero-ai-match .flex .cta .form .secure { color: var(--aim-form-muted); }
.ai-match-page .hero-ai-match .flex .cta .form button {
	background: linear-gradient(90deg, #7a1fd6, var(--aim-violet) 55%, #6d6bff);
	box-shadow: 0 12px 30px -10px rgba(150, 52, 238, .9);
}
.ai-match-page .hero-ai-match .flex .cta .form button:hover { filter: brightness(1.08); }

/* ---------- sections below the hero: the same night, glass cards ---------- */
.aim-sections { font-family: var(--aim-body); color: var(--aim-ink); background: var(--aim-deep); }
.aim-band { padding: 76px 0; }
.aim-h2 {
	font-family: var(--aim-display);
	font-weight: 700;
	font-size: 38px;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--aim-ink);
	margin: 0 0 32px;
	text-wrap: balance;
}
.aim-sections h3 { font-family: var(--aim-display); font-size: 18px; margin: 0 0 8px; color: var(--aim-ink); }
.aim-sections p { font-size: 16px; line-height: 1.6; color: var(--aim-muted); margin: 0; }

.aim-how { background: linear-gradient(180deg, var(--aim-deep), #110a26); }
.aim-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.aim-step, .aim-card {
	padding: 28px;
	border-radius: 20px;
	background: var(--aim-glass);
	border: 1px solid var(--aim-glass-line);
}
.aim-step-n {
	display: block;
	font-family: var(--aim-display);
	font-size: 42px;
	font-weight: 700;
	line-height: 1;
	margin-bottom: 14px;
	color: var(--aim-sun);
	background: linear-gradient(90deg, var(--aim-sun), var(--aim-violet-soft));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.aim-why {
	background:
		radial-gradient(600px 300px at 85% 10%, rgba(91, 140, 255, .16), transparent 70%),
		radial-gradient(600px 320px at 10% 90%, rgba(150, 52, 238, .2), transparent 70%),
		#110a26;
}
.aim-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.aim-trust { list-style: none; padding: 0; margin: 40px 0 0; display: flex; flex-wrap: wrap; gap: 14px 40px; color: var(--aim-muted); font-size: 15px; }
.aim-trust strong { color: var(--aim-gold); font-family: var(--aim-display); font-size: 24px; margin-right: 6px; font-variant-numeric: tabular-nums; }

.aim-faq { background: #110a26; }
.aim-faq-list { max-width: 880px; display: flex; flex-direction: column; gap: 12px; }
.aim-q { background: var(--aim-glass); border: 1px solid var(--aim-glass-line); border-radius: 16px; padding: 0 22px; }
.aim-q summary {
	cursor: pointer;
	list-style: none;
	padding: 18px 28px 18px 0;
	font-weight: 700;
	font-size: 17px;
	color: var(--aim-ink);
	position: relative;
}
.aim-q summary::-webkit-details-marker { display: none; }
.aim-q summary::after { content: "+"; position: absolute; right: 0; top: 14px; font-size: 24px; color: var(--aim-violet-soft); }
.aim-q[open] summary::after { content: "\2212"; }
.aim-q summary:focus-visible { outline: 2px solid var(--aim-violet-soft); outline-offset: 4px; border-radius: 6px; }
.aim-q p { padding: 0 0 18px; }

.aim-cta {
	background:
		radial-gradient(500px 260px at 50% 0%, rgba(255, 194, 74, .25), transparent 70%),
		linear-gradient(110deg, #3d0f7a, var(--aim-violet) 55%, #3f6dff);
	text-align: center;
}
.aim-cta .aim-h2 { color: #fff; margin-bottom: 12px; }
.aim-cta p { color: rgba(255, 255, 255, .92); font-size: 18px; }
.aim-cta-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.aim-btn {
	display: inline-block;
	padding: 15px 28px;
	border-radius: 999px;
	background: #fff;
	color: #5b16b0;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 12px 30px -12px rgba(10, 7, 24, .7);
}
.aim-btn-ghost { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .85); box-shadow: none; }
.aim-btn:focus-visible { outline: 3px solid var(--aim-gold); outline-offset: 3px; }

@media screen and (max-width: 1300px) {
	.aim-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ai-match-page .hero-ai-match h1.aim-h1 { font-size: 46px; }
}
@media screen and (max-width: 1024px) {
	.ai-match-page .hero-ai-match .flex .main-content { max-width: 100%; margin-top: 32px; }
	.aim-steps { grid-template-columns: 1fr; }
}
@media screen and (max-width: 640px) {
	.aim-lockup { gap: 16px; }
	.aim-sun { width: 84px; height: 84px; flex-basis: 84px; }
	.aim-name { font-size: 38px; }
	.ai-match-page .hero-ai-match h1.aim-h1 { font-size: 34px; }
	.ai-match-page .hero-ai-match ul.aim-points { grid-template-columns: 1fr; }
	.aim-cards { grid-template-columns: 1fr; }
	.aim-band { padding: 54px 0; }
	.aim-h2 { font-size: 29px; }
}