/* v3 additions on top of modern.css */

/* ---------- Sticky mobile CTA ---------- */
.m-mobile-cta {
	display: none;
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: 12px;
	z-index: 30;
	background: var(--m-surface);
	border: 1px solid var(--m-line-strong);
	border-radius: 14px;
	box-shadow: var(--m-shadow-lg);
	padding: 10px;
	gap: 8px;

	& .m-btn {
		flex: 1;
		padding: 12px;
		font-size: 14px;
	}
}
@media (max-width: 760px) {
	.m-mobile-cta {
		display: flex;
	}
	body {
		padding-bottom: 80px;
	}
}

/* ---------- Havvah card (the human CTA) ---------- */
.m-havvah {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 16px;
	background: oklch(1 0 0 / 0.97);
	backdrop-filter: blur(10px);
	border-radius: 14px;
	padding: 14px;
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 14px;
	align-items: center;
	box-shadow: var(--m-shadow-md);

	& .photo {
		width: 56px;
		height: 56px;
		border-radius: 50%;
		background: var(--m-blue-soft);
		background-size: cover;
		background-position: center top;
		position: relative;

		& img {
			width: 100%;
			height: 100%;
			border-radius: 50%;
			object-fit: cover;
		}

		& .live {
			position: absolute;
			right: -2px;
			bottom: -2px;
			width: 14px;
			height: 14px;
			border-radius: 50%;
			background: oklch(0.62 0.15 145); /* muted available-green */
			border: 2px solid white;
			box-shadow: 0 0 0 0 oklch(0.62 0.15 145 / 0.6);
			animation: m-live 2s ease-in-out infinite;
		}
	}

	& .meta {
		display: flex;
		flex-direction: column;
		gap: 2px;
	}
	& .name {
		font-weight: 700;
		font-size: 14px;
		letter-spacing: -0.01em;
	}
	& .role {
		font-size: 11.5px;
		color: var(--m-ink-low);
	}

	& .actions {
		grid-column: 1 / -1;
		display: flex;
		gap: 6px;

		& a {
			flex: 1;
			text-align: center;
			padding: 8px 0;
			font-size: 13px;
			font-weight: 600;
			text-decoration: none;
			border-radius: 8px;
			color: var(--m-ink);
			background: var(--m-blue-soft);
			border: 1px solid var(--m-line);
			transition: all 0.15s ease;

			&:hover {
				background: var(--m-navy);
				color: white;
				border-color: var(--m-navy);
			}

			&.primary {
				background: var(--m-red);
				color: white;
				border-color: var(--m-red);

				&:hover {
					background: var(--m-red-deep);
					border-color: var(--m-red-deep);
				}
			}
		}
	}
}
@keyframes m-live {
	0%,
	100% {
		box-shadow: 0 0 0 0 oklch(0.62 0.15 145 / 0.6);
	}
	50% {
		box-shadow: 0 0 0 6px oklch(0.62 0.15 145 / 0);
	}
}

/* ---------- County widget ---------- */
.m-county {
	margin-top: 28px;
	background: var(--m-surface);
	border: 1px solid var(--m-line-strong);
	border-radius: 12px;
	padding: 16px;
	box-shadow: var(--m-shadow-sm);

	& select,
	& input {
		width: 100%;
		padding: 12px 14px;
		font: inherit;
		font-size: 15px;
		border: 1px solid var(--m-line-strong);
		border-radius: 8px;
		background: white;
		color: var(--m-ink);

		&:focus {
			outline: 2px solid var(--m-navy);
			outline-offset: -1px;
		}
	}
}
.m-county-row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 8px;
	align-items: stretch;
}
.m-county-result {
	margin-top: 12px;
	padding: 12px 14px;
	background: var(--m-blue-soft);
	border-radius: 8px;
	font-size: 14px;
	color: var(--m-ink);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;

	& .badge {
		background: var(--m-red);
		color: white;
		padding: 3px 8px;
		border-radius: 999px;
		font-size: 12px;
		font-weight: 700;
		font-variant-numeric: tabular-nums;
	}
	& .ok {
		color: oklch(0.42 0.11 145);
		font-weight: 600;
	}
}
.m-county-hint {
	font-size: 12px;
	color: var(--m-ink-low);
	margin-top: 8px;
}

/* ---------- Inline review ---------- */
.m-review {
	position: relative;
	background: var(--m-surface);
	border: 1px solid var(--m-line);
	border-radius: var(--m-r-card);
	box-shadow: var(--m-shadow-sm);
	padding: 28px 32px;
	margin: 20px auto 0;
	max-width: 640px;
	display: flex;
	justify-content: center;
	overflow: hidden;

	&::before {
		content: '\201C';
		position: absolute;
		top: -18px;
		left: 18px;
		font-size: 96px;
		line-height: 1;
		font-weight: 700;
		font-family: Georgia, serif;
		color: var(--m-red);
		opacity: 0.1;
		pointer-events: none;
	}

	& > div {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;
		max-width: 56ch;
		text-align: center;
	}
	& .stars {
		color: var(--m-red);
		letter-spacing: 2px;
		font-size: 16px;
	}
	& p {
		font-size: 17px;
		color: oklch(0.16 0.02 257.7);
		margin: 0;
		line-height: 1.6;
		font-weight: 600;
		font-style: normal;
		text-wrap: pretty;
	}
	& .who {
		color: var(--m-ink);
		font-size: 13px;
		font-weight: 700;
		margin-top: 2px;
		font-style: normal;
	}
}

/* ---------- Two-path lanes ---------- */
.m-lanes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;

	@media (max-width: 760px) {
		grid-template-columns: 1fr;
	}
}
.m-lane {
	background: var(--m-surface);
	border: 1px solid var(--m-line);
	border-radius: var(--m-r-card);
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition:
		border-color 0.15s ease,
		transform 0.15s ease;

	&:hover {
		border-color: var(--m-line-strong);
	}

	& h3 {
		font-size: 22px;
		font-weight: 700;
		letter-spacing: -0.015em;
		margin: 0;
	}
	& p {
		color: var(--m-ink-mid);
		font-size: 14.5px;
		margin: 0;
		line-height: 1.55;
	}
	& .label {
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--m-red);
	}

	&.lane-talk {
		background: linear-gradient(180deg, var(--m-red-soft), white);
		border-color: oklch(0.92 0.04 22);

		& .label {
			color: var(--m-red);
		}
	}
	&.lane-read {
		background: linear-gradient(180deg, var(--m-blue-soft), white);

		& .label {
			color: var(--m-navy);
		}
	}

	& .actions {
		margin-top: auto;
		padding-top: 16px;
		display: flex;
		gap: 8px;
		flex-wrap: wrap;
	}
}

/* ---------- "What's on the list" ---------- */
.m-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	background: var(--m-surface);
	border: 1px solid var(--m-line);
	border-radius: var(--m-r-card);
	padding: 40px;

	@media (max-width: 760px) {
		grid-template-columns: 1fr;
		padding: 24px;
	}

	& h3 {
		font-size: 13px;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--m-ink-low);
		margin: 0 0 16px;
	}
	& ul {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
	& li {
		display: flex;
		align-items: center;
		gap: 10px;
		font-size: 14.5px;
		color: var(--m-ink);
		padding: 10px 12px;
		background: var(--m-bg);
		border-radius: 8px;

		& .dot {
			width: 6px;
			height: 6px;
			border-radius: 50%;
			background: var(--m-red);
			flex-shrink: 0;
		}
	}
}
.m-list-foot {
	grid-column: 1 / -1;
	padding-top: 16px;
	border-top: 1px solid var(--m-line);
	font-size: 12.5px;
	color: var(--m-ink-low);
}

/* ---------- Pricing/territory bar ---------- */
.m-territory {
	background: var(--m-surface);
	border: 1px solid var(--m-line);
	border-radius: var(--m-r-card);
	padding: 32px;

	& h3 {
		font-size: 28px;
		line-height: 1.1;
		letter-spacing: -0.015em;
		margin: 0;
		font-weight: 700;
	}
	& .price {
		font-size: 56px;
		font-weight: 700;
		letter-spacing: -0.04em;
		line-height: 1;
		color: var(--m-ink);
		font-variant-numeric: tabular-nums;

		& small {
			font-size: 16px;
			font-weight: 600;
			color: var(--m-ink-low);
			margin-left: 4px;
			letter-spacing: 0;
		}
	}
	& ul {
		list-style: none;
		padding: 0;
		margin: 16px 0 0;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}
	& li {
		font-size: 14px;
		color: var(--m-ink-mid);
		display: flex;
		gap: 8px;
		align-items: start;

		& .check {
			color: var(--m-red);
			flex-shrink: 0;
			margin-top: 2px;
		}
	}
}
.m-territory-grid {
	display: grid;
	grid-template-columns: 2fr 3fr;
	gap: 32px;
	align-items: center;

	@media (max-width: 760px) {
		grid-template-columns: 1fr;
	}
}

/* ---------- Exit-intent guide modal ---------- */
.m-modal-bg {
	position: fixed;
	inset: 0;
	background: oklch(0.18 0.03 257.7 / 0.5);
	backdrop-filter: blur(4px);
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	animation: m-fade 0.2s ease;
}
@keyframes m-fade {
	from {
		opacity: 0;
	}
}
.m-modal {
	background: white;
	border-radius: 18px;
	max-width: 460px;
	width: 100%;
	padding: 32px;
	position: relative;
	box-shadow: var(--m-shadow-lg);
	animation: m-rise 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);

	& .close {
		position: absolute;
		top: 12px;
		right: 12px;
		width: 32px;
		height: 32px;
		border-radius: 50%;
		background: var(--m-bg);
		border: 1px solid var(--m-line);
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		font-size: 18px;
		color: var(--m-ink-mid);

		&:hover {
			background: var(--m-line);
			color: var(--m-ink);
		}
	}
	& .label {
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--m-red);
	}
	& h3 {
		font-size: 24px;
		line-height: 1.15;
		letter-spacing: -0.015em;
		margin: 8px 0 8px;
		font-weight: 700;
	}
	& p {
		font-size: 14.5px;
		color: var(--m-ink-mid);
		margin: 0 0 18px;
		line-height: 1.55;
	}
	& input {
		width: 100%;
		padding: 12px 14px;
		font: inherit;
		font-size: 15px;
		border: 1px solid var(--m-line-strong);
		border-radius: 8px;
		margin-bottom: 8px;
		box-sizing: border-box;

		&:focus {
			outline: 2px solid var(--m-navy);
			outline-offset: -1px;
		}
	}
	& .m-btn {
		width: 100%;
	}
	& .legal {
		font-size: 11px;
		color: var(--m-ink-low);
		margin-top: 10px;
		text-align: center;
	}
}
@keyframes m-rise {
	from {
		transform: translateY(12px);
		opacity: 0;
	}
}

/* ---------- Founder block ---------- */
.m-founder {
	background: var(--m-navy-deep);
	color: white;
	border-radius: var(--m-r-card);
	padding: 48px;
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 48px;
	align-items: center;
	position: relative;
	overflow: hidden;

	@media (max-width: 760px) {
		grid-template-columns: 1fr;
		padding: 28px;
	}

	&::before {
		content: '';
		position: absolute;
		left: -100px;
		bottom: -100px;
		width: 360px;
		height: 360px;
		border-radius: 50%;
		background: radial-gradient(circle, oklch(0.549 0.219 28 / 0.16), transparent 70%);
	}

	& .label {
		color: oklch(0.7 0.08 22);
		font-size: 12px;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		font-weight: 600;
		margin-bottom: 14px;
	}
	& h2 {
		font-size: 30px;
		line-height: 1.15;
		letter-spacing: -0.02em;
		margin: 0 0 16px;
		font-weight: 700;
	}
	& blockquote {
		font-size: 17px;
		line-height: 1.6;
		color: oklch(0.92 0.01 257.7);
		margin: 0 0 24px;
		padding: 0;
		border: 0;
		font-style: italic;
	}
	& .sig {
		font-size: 14px;
		color: oklch(0.78 0.02 257.7);

		& strong {
			color: white;
			font-weight: 600;
		}
	}
}
.m-founder-photo {
	aspect-ratio: 4/5;
	background: oklch(0.4 0.04 257.7);
	border-radius: 12px;
	overflow: hidden;

	& img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}