/* ════════════════════════════════════════════════════════════════════════
   American Notary — Homepage Hero (Figma-matched)
   ════════════════════════════════════════════════════════════════════════ */

.an-hero {
	position: relative;
	isolation: isolate;
	/* Sits above the trust strip + sections below so the services
	   dropdown's overflow can paint over them (otherwise the trust
	   strip's red rule clips through the open menu). */
	z-index: 2;
	min-height: 620px;
	padding: 70px 20px 80px;
	color: #FFFFFF;
	background: #282828;
}
.an-hero__bg {
	position: absolute; inset: 0;
	z-index: -2;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center right;
}
.an-hero__overlay {
	position: absolute; inset: 0;
	z-index: -1;
	background:
		linear-gradient(
			100deg,
			rgba(40, 40, 40, 0.90) 0%,
			rgba(40, 40, 40, 0.72) 38%,
			rgba(40, 40, 40, 0.42) 65%,
			rgba(40, 40, 40, 0.28) 100%
		);
}

.an-hero__inner {
	position: relative;
	width: 100%;
	max-width: var(--an-container-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	align-items: start;
}
.an-hero__content {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

@media (min-width: 1024px) {
	.an-hero--with-members .an-hero__inner {
		grid-template-columns: minmax(0, 1fr) 400px;
		gap: 48px;
		align-items: center;
	}
}

/* ═══ Red dot utility ═══════════════════════════════════════════════ */
.an-red-dot,
.an-dot {
	display: inline-block;
	width: 8px; height: 8px;
	background: #E11D2E;
	border-radius: 50%;
	flex-shrink: 0;
}
.an-red-dot--pulse {
	position: relative;
}
.an-red-dot--pulse::after {
	content: '';
	position: absolute; inset: -4px;
	border-radius: 50%;
	background: rgba(225, 29, 46, 0.35);
	animation: an-pulse 1.8s ease-out infinite;
}
@keyframes an-pulse {
	0%   { transform: scale(0.7); opacity: 0.7; }
	100% { transform: scale(1.8); opacity: 0; }
}

/* ═══ Eyebrow ═══════════════════════════════════════════════════════ */
.an-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: 2px;
}

/* ═══ Title ═════════════════════════════════════════════════════════ */
.an-hero__title {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(40px, 5.6vw, 66px);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: #FFFFFF;
	margin: 0;
	max-width: 680px;
}
.an-hero__title-dot {
	display: inline-block;
	width: 12px; height: 12px;
	background: #E11D2E;
	border-radius: 50%;
	margin-left: 4px;
	vertical-align: baseline;
	transform: translateY(-2px);
}

/* ═══ Subtitle ══════════════════════════════════════════════════════ */
.an-hero__sub {
	font-size: clamp(14.5px, 1.3vw, 16px);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.78);
	margin: 0;
	max-width: 520px;
}
.an-hero__sub-modes {
	display: inline;
	color: rgba(255, 255, 255, 0.78);
}

/* ═══ Search bar — Figma pixel match ═══════════════════════════════
   Figma: rounded-rectangle container (NOT a pill) with a visibly
   translucent frosted-white surface — the dark hero clearly bleeds
   through behind it. Inner buttons stay pill-shaped. */
.an-hero__search {
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 820px;
	padding: 7px;
	background: rgba(255, 255, 255, 0.72);
	backdrop-filter: blur(18px) saturate(150%);
	-webkit-backdrop-filter: blur(18px) saturate(150%);
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: var(--an-radius-lg);   /* 16px */
	box-shadow:
		0 1px 2px rgba(40, 40, 40, 0.06),
		0 18px 48px rgba(40, 40, 40, 0.22);
	margin-top: 10px;
	min-height: 62px;
}
.an-hero__field {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 22px;
	color: #1E2433;
	min-width: 0;
}
.an-hero__field svg {
	flex-shrink: 0;
	color: #E11D2E;
}
.an-hero__field--service svg { color: #1E2433; }
.an-hero__field input,
.an-hero__field select {
	width: 100%;
	border: 0;
	outline: 0;
	background: transparent;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 14.5px;
	font-weight: 500;
	color: #1E2433;
	padding: 0;
	min-width: 0;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: pointer;
}
.an-hero__field input::placeholder { color: #1E2433; opacity: 0.9; font-weight: 500; }
.an-hero__field--service { flex: 0 1 170px; }
.an-hero__field--service select {
	padding-right: 6px;
	color: #1E2433;
	font-weight: 500;
}

/* Subtle vertical dividers between fields (Figma) */
.an-hero__divider {
	display: block;
	width: 1px;
	height: 26px;
	background: #E5E7EB;
	flex-shrink: 0;
}

/* ─── Custom services dropdown (replaces native <select>) ─── */
.an-sr-only {
	position: absolute !important;
	width: 1px !important; height: 1px !important;
	margin: -1px !important; padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0,0,0,0) !important;
	border: 0 !important;
}
.an-hero__svc-trigger {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0;
	background: transparent;
	border: 0;
	color: #1E2433;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 14.5px;
	font-weight: 500;
	cursor: pointer;
	white-space: nowrap;
}
.an-hero__svc-trigger svg {
	color: #5A6477;
	transition: transform var(--an-trans-base);
}
.an-hero__svc-trigger[aria-expanded="true"] svg {
	transform: rotate(180deg);
}
.an-hero__field--service { position: relative; }
.an-hero__svc-menu {
	position: absolute;
	top: calc(100% + 12px);
	left: -12px;
	min-width: 280px;
	max-width: 340px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: #FFFFFF;
	border: 1px solid #E5E7EB;
	border-radius: var(--an-radius-md);
	box-shadow: 0 12px 40px rgba(40, 40, 40, 0.2);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--an-trans-base), visibility var(--an-trans-base), transform var(--an-trans-base);
	z-index: 1000;
	max-height: 340px;
	overflow-y: auto;
}
.an-hero__svc-menu.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.an-hero__svc-item {
	padding: 10px 14px;
	font-size: 14px;
	color: #1E2433;
	cursor: pointer;
	border-radius: var(--an-radius-sm);
	transition: background var(--an-trans-base), color var(--an-trans-base);
}
.an-hero__svc-item:hover {
	background: rgba(225, 29, 46, 0.08);
	color: #E11D2E;
}
.an-hero__svc-item.is-selected {
	background: rgba(225, 29, 46, 0.1);
	color: #E11D2E;
	font-weight: 600;
}

/* "Use my location" — outlined pill, dark border, matches inner height */
.an-hero__geo {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	height: 44px;
	padding: 0 22px;
	background: transparent;
	border: 1.5px solid #282828;
	border-radius: var(--an-radius-pill);
	color: #282828;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	margin: 0 8px;
	white-space: nowrap;
	transition: background var(--an-trans-base), color var(--an-trans-base);
}
.an-hero__geo:hover {
	background: #282828;
	color: #FFFFFF;
}

/* Red "Search" pill — solid red with icon on left */
.an-hero__submit {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 48px;
	padding: 0 28px;
	background: #E11D2E;
	color: #FFFFFF;
	border: 0;
	border-radius: var(--an-radius-pill);
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
	transition: background var(--an-trans-base), transform 0.08s ease;
}
.an-hero__submit:hover { background: #C71828; }
.an-hero__submit:active { transform: translateY(1px); }
.an-hero__submit svg { color: #FFFFFF; }

/* ═══ Trust row (left column, below search) ════════════════════════ */
.an-hero__trust {
	list-style: none;
	padding: 0;
	margin: 14px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.82);
}
.an-hero__trust li {
	display: inline-flex;
	align-items: center;
}
.an-hero__trust strong {
	color: #FFFFFF;
	font-weight: 600;
	margin-right: 6px;
}

/* ═══ Right column — members panel + stat circles stacked ══════════ */
.an-hero__right {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-self: start;
}

/* Stats as circular badges — below members panel */
.an-hero__stats {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: 14px;
	justify-content: center;
}
.an-hero__stats li {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 92px;
	height: 92px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.16);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.an-hero__stat-num {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 22px;
	font-weight: 600;
	color: #FFFFFF;
	line-height: 1;
	letter-spacing: -0.01em;
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
}
.an-hero__stat-num sup {
	font-size: 12px;
	color: #E11D2E;
	top: -0.4em;
}
.an-hero__stat-star {
	color: #F59E0B;
	font-size: 14px;
}
.an-hero__stat-label {
	font-size: 10.5px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.68);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-top: 4px;
}

/* ════════════════════════════════════════════════════════════════════
   Members panel (right side)
   ════════════════════════════════════════════════════════════════════ */
.an-hero__members {
	/* Figma: visibly translucent dark glass — the hero image clearly
	   shows through behind the panel, with the blur preserving legibility. */
	background: rgba(40, 40, 40, 0.45);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--an-radius-xl);        /* 24px — matches Figma panel */
	padding: 20px 22px;
	backdrop-filter: blur(22px) saturate(150%);
	-webkit-backdrop-filter: blur(22px) saturate(150%);
	box-shadow: 0 20px 48px rgba(0, 0, 0, 0.38);
}

.an-hero__members-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.10);
	margin-bottom: 4px;
}
.an-hero__members-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #E11D2E;
}
.an-hero__members-loc {
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.72);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 60%;
}

.an-hero__members-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
}
.an-hero__members-list li {
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.an-hero__members-list li:last-child { border-bottom: 0; }

/* 3-column layout: avatar / body / side (Figma) */
.an-hero__member {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) auto;
	gap: 14px;
	padding: 14px 0;
	text-decoration: none;
	color: #FFFFFF;
	align-items: center;
	transition: opacity var(--an-trans-base);
}
.an-hero__member:hover { color: #FFFFFF; opacity: 0.92; }

.an-hero__member-img {
	width: 44px !important;
	height: 44px !important;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.an-hero__member-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.an-hero__member-name {
	font-size: 14.5px;
	font-weight: 600;
	color: #FFFFFF;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.an-hero__member-suffix {
	font-size: 12.5px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.8);
}
.an-hero__member-meta {
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.62);
	line-height: 1.35;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.an-hero__member-side {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	flex-shrink: 0;
}
.an-hero__member-rate {
	font-size: 14px;
	font-weight: 600;
	color: #FFFFFF;
	white-space: nowrap;
	line-height: 1.2;
}
.an-hero__member-avail {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11.5px;
	font-weight: 500;
	white-space: nowrap;
}
.an-hero__member-avail .an-dot {
	width: 6px; height: 6px;
}
.an-hero__member-avail--open {
	color: #E11D2E;
}
.an-hero__member-avail--open .an-dot {
	background: #E11D2E;
	box-shadow: 0 0 0 3px rgba(225, 29, 46, 0.25);
	animation: an-pulse-small 2s ease-out infinite;
}
.an-hero__member-avail--closed {
	color: rgba(255, 255, 255, 0.72);
}
.an-hero__member-avail--closed .an-dot {
	background: rgba(255, 255, 255, 0.5);
	box-shadow: none;
}
.an-hero__member-avail--unknown {
	color: rgba(255, 255, 255, 0.55);
}
.an-hero__member-avail--unknown .an-dot {
	background: rgba(255, 255, 255, 0.35);
}
@keyframes an-pulse-small {
	0%   { box-shadow: 0 0 0 3px rgba(225, 29, 46, 0.3); }
	100% { box-shadow: 0 0 0 7px rgba(225, 29, 46, 0); }
}

/* ════════════════════════════════════════════════════════════════════
   Top States & Cities — sits below the hero/trust-strip
   ════════════════════════════════════════════════════════════════════ */
.an-top-states {
	background: var(--an-section-cream-1);
	padding: 72px 20px;
}
.an-top-states__inner {
	max-width: var(--an-container-max);
	margin: 0 auto;
}
.an-top-states__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 32px;
}
.an-top-states__eyebrow {
	display: block;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(40, 40, 40, 0.55);
	margin-bottom: 10px;
}
.an-top-states__eyebrow--mobile {
	display: none;   /* shown only under the cards on narrow screens */
}
.an-top-states__view-all-text-sm { display: none; }
.an-top-states__view-all-arrow   { display: none; }
.an-top-states__title {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(28px, 3.4vw, 40px);
	font-weight: 600;
	color: #282828;
	line-height: 1.15;
	letter-spacing: -0.015em;
	margin: 0;
}
.an-top-states__title-dot {
	display: inline-block;
	width: 10px; height: 10px;
	background: #E11D2E;
	border-radius: 50%;
	margin-left: 6px;
	transform: translateY(-2px);
}
.an-top-states__view-all {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	height: 44px;
	padding: 0 22px;
	background: transparent;
	border: 1.5px solid #282828;
	border-radius: var(--an-radius-pill);
	color: #282828;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: background var(--an-trans-base), color var(--an-trans-base);
}
.an-top-states__view-all:hover {
	background: #282828;
	color: #FFFFFF;
}

.an-top-states__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px;
	align-items: stretch;
}
.an-top-states__cards {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.an-state-card {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: var(--an-radius-lg);
	overflow: hidden;
	text-decoration: none;
	color: #FFFFFF;
	isolation: isolate;
	transition: transform var(--an-trans-base), box-shadow var(--an-trans-base);
}
.an-state-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 36px rgba(40, 40, 40, 0.22);
}
.an-state-card__img {
	position: absolute; inset: 0;
	z-index: -2;
	background-size: cover;
	background-position: center;
	transition: transform 0.6s ease;
}
.an-state-card:hover .an-state-card__img { transform: scale(1.05); }
.an-state-card__shade {
	position: absolute; inset: 0;
	z-index: -1;
	background: linear-gradient(
		180deg,
		rgba(40, 40, 40, 0) 40%,
		rgba(40, 40, 40, 0.78) 100%
	);
}
.an-state-card__body {
	position: absolute;
	left: 18px; bottom: 16px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.an-state-card__name {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 20px;
	font-weight: 600;
	color: #FFFFFF;
	line-height: 1.2;
}
.an-state-card__count {
	font-size: 12.5px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.82);
}

/* Circular map on the right — Google Maps mounts inside */
.an-top-states__map-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
}
.an-top-states__map {
	position: relative;
	width: 100%;
	max-width: 460px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: #F7F8FA;
	border: 1px solid #E5E7EB;
	overflow: hidden;
	box-shadow: 0 12px 32px rgba(40, 40, 40, 0.08);
}
/* Skeleton loader — a single pulsing pin until Google Maps finishes
   mounting. Hidden the moment the map container becomes interactive. */
.an-top-states__map-skeleton {
	position: absolute; inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	z-index: 1;
}
.an-top-states__map-pin {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px; height: 54px;
	border-radius: 50%;
	background: rgba(225, 29, 46, 0.12);
	color: #E11D2E;
	animation: an-map-pulse 1.8s ease-out infinite;
}
@keyframes an-map-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(225, 29, 46, 0.45); }
	100% { box-shadow: 0 0 0 22px rgba(225, 29, 46, 0); }
}
.an-top-states__map.is-map-ready .an-top-states__map-skeleton { display: none; }

.an-top-states__map-caption {
	margin: 0;
	font-size: 13.5px;
	color: rgba(40, 40, 40, 0.75);
	text-align: center;
}
.an-top-states__map-caption strong { color: #282828; font-weight: 700; }

/* ── Map pin (Figma red drop-pin) + InfoWindow notary card ───────────── */
.an-map-pin {
	position: relative;
	display: inline-flex;
	width: 32px; height: 32px;
	cursor: pointer;
	transition: transform 0.18s ease-out;
}
.an-map-pin svg {
	position: relative;
	z-index: 2;
	width: 32px; height: 32px;
	filter: drop-shadow(0 3px 6px rgba(225, 29, 46, 0.35));
	transition: transform 0.18s ease-out;
	transform-origin: 50% 100%;   /* scale from the tip so it stays anchored */
}
/* Pulsing halo — same red as the pin head, fades + expands forever
   to draw the eye. Two staggered rings give a continuous ripple. */
.an-map-pin::before,
.an-map-pin::after {
	content: '';
	position: absolute;
	left: 50%; top: 9px;
	width: 14px; height: 14px;
	margin-left: -7px;
	border-radius: 50%;
	background: rgba(225, 29, 46, 0.45);
	animation: an-pin-pulse 2.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
	z-index: 1;
	pointer-events: none;
}
.an-map-pin::after { animation-delay: 1.1s; }
@keyframes an-pin-pulse {
	0%   { transform: scale(0.6); opacity: 0.55; }
	80%  { transform: scale(2.4); opacity: 0; }
	100% { transform: scale(2.4); opacity: 0; }
}
.an-map-pin:hover { transform: translateY(-3px); }
.an-map-pin:hover svg { transform: scale(1.1); }

/* Compact notary card — mirrors .an-notary-card typography & badges so the
   map popup feels like the rest of the site (Inter, red verified pill, etc.) */
.an-map-card {
	position: relative;
	display: flex;
	gap: 12px;
	min-width: 240px;
	max-width: 280px;
	font-family: 'Inter', system-ui, sans-serif;
	color: #282828;
}
.an-map-card__close {
	position: absolute;
	top: -4px;
	right: -4px;
	width: 24px; height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	background: rgba(40, 40, 40, 0.06);
	border: none;
	border-radius: 50%;
	color: #282828;
	cursor: pointer;
	transition: background 0.15s ease-out, color 0.15s ease-out;
	z-index: 5;
}
.an-map-card__close:hover {
	background: rgba(225, 29, 46, 0.12);
	color: #E11D2E;
}
.an-map-card__avatar {
	width: 56px; height: 56px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 56px;
	background: #F3EADC;
	border: 2px solid #FFFFFF;
	box-shadow: 0 2px 6px rgba(40, 40, 40, 0.12);
}
.an-map-card__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	flex: 1;
}
.an-map-card__name {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: #282828;
	line-height: 1.25;
	letter-spacing: -0.01em;
}
.an-map-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.an-map-card__badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 8px;
	border-radius: var(--an-radius-pill);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
}
.an-map-card__badge--verified {
	color: #E11D2E;
	background: rgba(225, 29, 46, 0.06);
	border: 1px solid rgba(225, 29, 46, 0.35);
}
.an-map-card__badge--verified .an-map-card__badge-dot {
	width: 5px; height: 5px;
	background: #E11D2E;
	border-radius: 50%;
	display: inline-block;
	flex-shrink: 0;
}
.an-map-card__badge--premium {
	color: #9A7B3D;
	background: #F5E9C8;
	border: 1px solid rgba(154, 123, 61, 0.35);
}
.an-map-card__loc {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: rgba(40, 40, 40, 0.55);
}
.an-map-card__loc svg { flex-shrink: 0; color: #E11D2E; }
.an-map-card__rating {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	color: #282828;
}
.an-map-card__rating strong { font-weight: 700; }
.an-map-card__reviews { color: rgba(40, 40, 40, 0.55); }
.an-map-card__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 4px;
	padding: 8px 16px;
	background: #E11D2E;
	color: #FFFFFF !important;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;
	border-radius: var(--an-radius-pill);
	transition: background 0.15s ease-out;
	align-self: flex-start;
}
.an-map-card__cta:hover { background: #C71828; }

/* Google's InfoWindow — keep their positioning intact (don't override
   `position` or other layout-affecting props), just restyle the bubble.
   The default close button (chrome) is hidden — we use a custom one
   anchored INSIDE the card so positioning stays predictable. The default
   downward-pointing tail is hidden too, so the bubble body sits flush
   on top of the pin (pin remains fully visible below it). */
.gm-style .gm-style-iw-c {
	padding: 12px 14px !important;
	background: #FFFFFF !important;
	border-radius: 12px !important;
	border: 1px solid rgba(40, 40, 40, 0.06) !important;
	box-shadow: 0 12px 32px rgba(40, 40, 40, 0.16) !important;
	max-width: 300px !important;
	/* Let our custom downward-arrow pseudo extend below the bubble. */
	overflow: visible !important;
}
.gm-style .gm-style-iw-d { overflow: visible !important; padding: 0 !important; }
.gm-style .gm-style-iw-chr { display: none !important; }
.gm-style .gm-style-iw-tc,
.gm-style .gm-style-iw-t::after { display: none !important; }

/* Small downward-pointing arrow connecting the card to its pin. Sits
   centred at the bottom edge; drop-shadow gives it a subtle ground
   shadow that blends with the bubble's own shadow. */
.gm-style .gm-style-iw-c::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -7px;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-top: 7px solid #FFFFFF;
	filter: drop-shadow(0 2px 2px rgba(40, 40, 40, 0.12));
	pointer-events: none;
}

/* Responsive — Figma mobile matches:
     header (title + compact "View All →") → 2×2 cards → centered
     "BROWSE BY LOCATION" eyebrow → Map circle → caption */
@media (max-width: 1024px) {
	.an-top-states { padding: 48px 16px; }
	.an-top-states__grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	/* Keep title + View All inline, but compress. */
	.an-top-states__head {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin-bottom: 20px;
	}
	.an-top-states__eyebrow--desktop { display: none; }
	.an-top-states__title { font-size: clamp(22px, 6vw, 28px); }

	/* Compact "View All →" arrow link on mobile */
	.an-top-states__view-all {
		height: auto;
		padding: 0;
		border: 0;
		background: transparent;
		color: #E11D2E;
		font-weight: 600;
		font-size: 14px;
		gap: 6px;
	}
	.an-top-states__view-all:hover {
		background: transparent;
		color: #C71828;
	}
	.an-top-states__view-all-text    { display: none; }
	.an-top-states__view-all-text-sm { display: inline; }
	.an-top-states__view-all-arrow   { display: inline; }

	/* Cards always 2×2, tighter gap. */
	.an-top-states__cards {
		grid-template-columns: 1fr 1fr;
		gap: 14px;
	}
	.an-state-card__name { font-size: 17px; }

	/* Eyebrow + map stack below cards. */
	.an-top-states__eyebrow--mobile {
		display: block;
		text-align: center;
		color: rgba(40, 40, 40, 0.6);
		margin: 6px 0 4px;
	}
	.an-top-states__map-wrap { gap: 10px; }
	.an-top-states__map { max-width: 320px; }
}
@media (max-width: 640px) {
	.an-state-card__name  { font-size: 15px; }
	.an-state-card__count { font-size: 11.5px; }
	.an-state-card__body  { left: 14px; bottom: 12px; }
}

/* ════════════════════════════════════════════════════════════════════
   Top-Rated Near You — 3×2 notary card grid (Figma match)
   ════════════════════════════════════════════════════════════════════ */
.an-top-rated {
	background: var(--an-section-cream-2);
	padding: 72px 20px;
}
.an-top-rated__inner {
	max-width: var(--an-container-max);
	margin: 0 auto;
}
.an-top-rated__head {
	text-align: left;
	margin-bottom: 40px;
}
.an-top-rated__eyebrow {
	display: block;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #E11D2E;
	margin-bottom: 10px;
}
.an-top-rated__title {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(28px, 3.4vw, 40px);
	font-weight: 600;
	color: #282828;
	line-height: 1.15;
	letter-spacing: -0.015em;
	margin: 0 0 12px;
}
.an-top-rated__title-dot {
	display: inline-block;
	width: 10px; height: 10px;
	background: #E11D2E;
	border-radius: 50%;
	margin-left: 6px;
	transform: translateY(-2px);
}
.an-top-rated__sub {
	max-width: 640px;
	margin: 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: rgba(40, 40, 40, 0.68);
}

.an-top-rated__grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	/* minmax(0, 1fr) prevents columns from expanding to fit wider card
	   content (e.g. long "NEXT AVAILABLE" labels) — without it, 1fr lets
	   the implicit min-width: auto blow out the column. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

/* ─── Notary Card — Figma exact match ────────────────────────────── */
.an-notary-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px 24px 22px;
	background: #FFFFFF;
	border: 1px solid rgba(40, 40, 40, 0.06);
	border-radius: 20px;
	color: inherit;
	text-decoration: none;
	transition: box-shadow var(--an-trans-base), transform var(--an-trans-base), border-color var(--an-trans-base);
}
.an-notary-card:hover {
	box-shadow: 0 18px 42px rgba(40, 40, 40, 0.10);
	transform: translateY(-3px);
	border-color: rgba(40, 40, 40, 0.08);
	color: inherit;
}

/* Row 1: avatar (left) + badges (right) */
.an-notary-card__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}
.an-notary-card__img {
	width: 88px !important;
	height: 88px !important;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	background: #F3EADC;   /* nice fallback for missing avatars */
	flex-shrink: 0;
}
.an-notary-card__badges {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	flex-shrink: 0;
}

/* Verified pill — red dot + red text on soft-red outline */
.an-notary-card__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 16px;
	border-radius: var(--an-radius-pill);
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
}
.an-notary-card__badge--verified {
	color: #E11D2E;
	background: rgba(225, 29, 46, 0.06);
	border: 1.5px solid rgba(225, 29, 46, 0.35);
}
.an-notary-card__badge-dot {
	display: inline-block;
	width: 8px; height: 8px;
	background: #E11D2E;
	border-radius: 50%;
	flex-shrink: 0;
}

/* Premium pill — tan/gold on cream */
.an-notary-card__badge--premium {
	color: #9A7B3D;
	background: #F5E9C8;
	border: 1.5px solid rgba(154, 123, 61, 0.35);
}

/* Name */
.an-notary-card__name {
	margin: 2px 0 0;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 22px;
	font-weight: 600;
	color: #282828;
	line-height: 1.2;
	letter-spacing: -0.015em;
}

/* Location */
.an-notary-card__loc {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: -4px 0 0;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(40, 40, 40, 0.55);
}
.an-notary-card__loc svg { flex-shrink: 0; color: #E11D2E; }

/* Service tags — outlined grey pills, all caps */
.an-notary-card__tags {
	list-style: none;
	padding: 0;
	margin: 2px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.an-notary-card__tag {
	display: inline-flex;
	padding: 6px 14px;
	background: transparent;
	border: 1px solid rgba(40, 40, 40, 0.18);
	border-radius: var(--an-radius-pill);
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.10em;
	color: rgba(40, 40, 40, 0.65);
	white-space: nowrap;
}

/* Thin divider */
.an-notary-card__divider {
	height: 1px;
	background: rgba(40, 40, 40, 0.08);
	margin: 6px 0 2px;
}

/* Footer row: stars+rating left, availability right.
   Both stay on the SAME row — availability text wraps internally to use
   whatever horizontal space is left (rating block stays compact, avail
   takes the rest and breaks across lines if needed). No flex-wrap so the
   two never stack on top of each other. */
.an-notary-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-width: 0;
}
.an-notary-card__rating {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.an-notary-card__stars {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: #E11D2E;
}
.an-notary-card__rating-num {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: #282828;
}
.an-notary-card__rating-count {
	font-size: 12.5px;
	color: rgba(40, 40, 40, 0.45);
	font-weight: 500;
}

.an-notary-card__avail {
	display: inline-flex;
	align-items: flex-start;
	gap: 8px;
	min-width: 0;             /* allow shrinking when card column is narrow */
	flex: 0 1 auto;            /* take remaining space after rating, but can shrink */
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.35;         /* readable when text wraps to a second line */
	text-align: right;
}
.an-notary-card__avail > span:not(.an-notary-card__avail-dot) {
	min-width: 0;
	overflow-wrap: break-word;
}
/* Lock the rating block so it doesn't get squeezed when the avail text
   needs to grow — avail wraps inside its column instead. */
.an-notary-card__rating { flex-shrink: 0; }
.an-notary-card__avail-dot {
	display: inline-block;
	width: 9px; height: 9px;
	border-radius: 50%;
	flex-shrink: 0;
}
.an-notary-card__avail--open {
	color: rgba(40, 40, 40, 0.7);
}
.an-notary-card__avail--open .an-notary-card__avail-dot {
	background: #E11D2E;
	box-shadow: 0 0 0 3px rgba(225, 29, 46, 0.2);
}
.an-notary-card__avail--closed,
.an-notary-card__avail--unknown {
	color: rgba(40, 40, 40, 0.55);
}
.an-notary-card__avail--closed  .an-notary-card__avail-dot,
.an-notary-card__avail--unknown .an-notary-card__avail-dot {
	background: rgba(40, 40, 40, 0.35);
}

/* Load More button */
.an-top-rated__load-more {
	display: flex;
	justify-content: center;
	margin-top: 36px;
}
.an-top-rated__load-more .an-btn--outline-themed {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 46px;
	padding: 0 28px;
	background: transparent;
	border: 1.5px solid #282828;
	border-radius: var(--an-radius-pill);
	color: #282828;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: background var(--an-trans-base), color var(--an-trans-base);
}
.an-top-rated__load-more .an-btn--outline-themed:hover {
	background: #282828;
	color: #FFFFFF;
}

/* Top-rated responsive */
@media (max-width: 1024px) {
	.an-top-rated__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }

	/* Header: drop eyebrow + subtitle, left-align title (Figma mobile) */
	.an-top-rated { padding: 56px 20px; }
	.an-top-rated__head {
		text-align: left;
		margin-bottom: 24px;
	}
	.an-top-rated__eyebrow,
	.an-top-rated__sub { display: none; }
	.an-top-rated__title { font-size: clamp(22px, 5.2vw, 30px); margin-bottom: 0; }
}
@media (max-width: 640px) {
	.an-top-rated { padding: 44px 16px; }
	.an-top-rated__head { margin-bottom: 20px; }
	.an-top-rated__grid { grid-template-columns: 1fr; gap: 14px; }

	/* Compact card on mobile — Figma shows tighter padding + inline meta */
	.an-notary-card { padding: 18px 18px 16px; gap: 10px; border-radius: 18px; }
	.an-notary-card__img { width: 56px !important; height: 56px !important; }
	.an-notary-card__name { font-size: 17px; }
	.an-notary-card__loc  { font-size: 10.5px; }

	/* Badges sit inline to the RIGHT of avatar at mobile (horizontal, compact) */
	.an-notary-card__badges {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 6px;
	}
	.an-notary-card__badge {
		padding: 5px 10px;
		font-size: 9.5px;
		letter-spacing: 0.12em;
	}
	.an-notary-card__badge-dot { width: 6px; height: 6px; }

	.an-notary-card__tag { padding: 5px 11px; font-size: 10px; letter-spacing: 0.08em; }

	.an-notary-card__divider { margin: 4px 0 0; }

	/* Footer wraps on narrow widths */
	.an-notary-card__foot {
		flex-wrap: wrap;
		row-gap: 8px;
	}
	.an-notary-card__rating-num { font-size: 13px; }
	.an-notary-card__rating-count { font-size: 11.5px; }
	.an-notary-card__avail { font-size: 10px; letter-spacing: 0.12em; }

	/* Load more button full-width pill */
	.an-top-rated__load-more { margin-top: 22px; }
	.an-top-rated__load-more .an-btn--outline-themed {
		width: 100%;
		max-width: 320px;
	}
}

/* ════════════════════════════════════════════════════════════════════
   How It Works — 4 red circular icon steps (Figma match)
   ════════════════════════════════════════════════════════════════════ */
.an-how-it-works {
	background: var(--an-section-cream-1);
	padding: 80px 20px;
}
.an-how-it-works__inner {
	max-width: var(--an-container-max);
	margin: 0 auto;
}
.an-how-it-works__head {
	text-align: left;
	margin-bottom: 56px;
}
.an-how-it-works__eyebrow {
	display: block;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #E11D2E;
	margin-bottom: 10px;
}
.an-how-it-works__title {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(28px, 3.4vw, 40px);
	font-weight: 600;
	color: #282828;
	line-height: 1.15;
	letter-spacing: -0.015em;
	margin: 0 0 12px;
}
.an-how-it-works__title-dot {
	display: inline-block;
	width: 10px; height: 10px;
	background: #E11D2E;
	border-radius: 50%;
	margin-left: 6px;
	transform: translateY(-2px);
}
.an-how-it-works__sub {
	max-width: 640px;
	margin: 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: rgba(40, 40, 40, 0.68);
}

.an-how-it-works__steps {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px;
}

/* ─── Single step ──────────────────────────────────────────── */
.an-hiw-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 16px;
	padding: 0 10px;
}
.an-hiw-step__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 78px;
	height: 78px;
	background: #E11D2E;
	color: #FFFFFF;
	border-radius: 50%;
	transition: transform var(--an-trans-base);
}
.an-hiw-step:hover .an-hiw-step__icon {
	transform: translateY(-3px);
}

.an-hiw-step__title {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: #282828;
	margin: 6px 0 0;
	position: relative;
	padding-bottom: 14px;
}
/* Thin horizontal divider under each title (Figma) */
.an-hiw-step__title::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 40px;
	height: 1px;
	background: rgba(40, 40, 40, 0.18);
}
.an-hiw-step__desc {
	font-size: 13.5px;
	line-height: 1.6;
	color: rgba(40, 40, 40, 0.6);
	margin: 0;
	max-width: 260px;
}
.an-hiw-step__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	color: #E11D2E;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: color var(--an-trans-base), transform var(--an-trans-fast);
}
.an-hiw-step__link:hover {
	color: #C71828;
}
.an-hiw-step__link:hover svg { transform: translateX(2px); }
.an-hiw-step__link svg { transition: transform var(--an-trans-fast); }

/* Responsive */
@media (max-width: 1024px) {
	.an-how-it-works { padding: 64px 20px; }
	.an-how-it-works__head { margin-bottom: 40px; }
	.an-how-it-works__steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 36px 28px;
	}
}
@media (max-width: 640px) {
	.an-how-it-works { padding: 48px 16px; }
	.an-how-it-works__head { margin-bottom: 28px; text-align: left; }
	.an-how-it-works__sub  { margin: 0; }
	.an-how-it-works__steps {
		grid-template-columns: 1fr;
		gap: 36px;
	}
	.an-hiw-step { padding: 0; gap: 14px; }
	.an-hiw-step__icon { width: 68px; height: 68px; }
	.an-hiw-step__desc { max-width: none; }
}

/* ════════════════════════════════════════════════════════════════════
   Dedicated Pages for Every Verified Notary — profile preview grid
   with a giant serif "N" watermark in the background (Figma match).
   ════════════════════════════════════════════════════════════════════ */
.an-dedicated {
	position: relative;
	isolation: isolate;
	background: var(--an-section-grey);
	padding: 88px 20px;
	overflow: hidden;
}
/* Giant serif "N" — bleeds from the TOP-right on the light grey bg. */
.an-dedicated__watermark {
	position: absolute;
	top: -80px;
	right: -3vw;
	z-index: -2;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(360px, 50vw, 720px);
	font-weight: 600;
	color: var(--an-dedicated-watermark, #FFFFFF);
	line-height: 0.85;
	letter-spacing: -0.08em;
	pointer-events: none;
	user-select: none;
}
[data-theme="dark"] .an-dedicated__watermark { --an-dedicated-watermark: rgba(255,255,255,0.06); }

/* Red decorative circle — sits below the "N", partially offscreen. */
.an-dedicated__circle {
	position: absolute;
	bottom: -180px;
	left: -80px;
	z-index: -2;
	width: 360px;
	height: 360px;
	background: #E11D2E;
	border-radius: 50%;
	pointer-events: none;
	box-shadow: 0 20px 60px rgba(225, 29, 46, 0.20);
}
.an-dedicated__inner {
	position: relative;
	max-width: var(--an-container-max);
	margin: 0 auto;
}
.an-dedicated__head {
	text-align: left;
	margin-bottom: 48px;
	max-width: 720px;
}
.an-dedicated__eyebrow {
	display: block;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #E11D2E;
	margin-bottom: 12px;
}
.an-dedicated__title {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(30px, 3.6vw, 44px);
	font-weight: 600;
	color: var(--an-heading);
	line-height: 1.15;
	letter-spacing: -0.015em;
	margin: 0 0 14px;
}
.an-dedicated__title-dot {
	display: inline-block;
	width: 10px; height: 10px;
	background: #E11D2E;
	border-radius: 50%;
	margin-left: 6px;
	transform: translateY(-2px);
}
.an-dedicated__sub {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--an-text-muted);
	margin: 0;
}

.an-dedicated__grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}

/* ─── Card ─────────────────────────────────────────────────── */
.an-dp-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px;
	background: var(--an-bg-elevated);
	border: 1px solid var(--an-border);
	border-radius: 18px;
	box-shadow: 0 6px 18px rgba(var(--an-shadow-color), 0.04);
	transition: box-shadow var(--an-trans-base), transform var(--an-trans-base), border-color var(--an-trans-base);
}
.an-dp-card:hover {
	box-shadow: 0 18px 44px rgba(var(--an-shadow-color), 0.10);
	transform: translateY(-2px);
}

.an-dp-card__top {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
}
.an-dp-card__img {
	width: 48px !important;
	height: 48px !important;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	background: #F3EADC;
}
.an-dp-card__identity {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.an-dp-card__name {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: var(--an-heading);
	line-height: 1.25;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.an-dp-card__loc {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11.5px;
	color: var(--an-text-muted);
}
.an-dp-card__loc svg { flex-shrink: 0; color: #E11D2E; }

.an-dp-card__badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	background: rgba(22, 163, 74, 0.10);
	color: #16A34A;
	border-radius: var(--an-radius-pill);
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.an-dp-card__url {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	background: var(--an-bg-secondary);
	border-radius: var(--an-radius-sm);
	color: var(--an-text-muted);
}
.an-dp-card__url svg { flex-shrink: 0; opacity: 0.6; }
.an-dp-card__url code {
	font-family: 'SFMono-Regular', Consolas, Menlo, monospace;
	font-size: 11.5px;
	color: var(--an-heading);
	background: transparent;
	padding: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	direction: rtl;            /* keep the important slug segment visible */
	text-align: left;
}

.an-dp-card__rating {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
}
.an-dp-card__stars {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: #E11D2E;
}
.an-dp-card__rating strong {
	font-family: 'Inter', system-ui, sans-serif;
	font-weight: 700;
	color: var(--an-heading);
}
.an-dp-card__rating-count {
	color: var(--an-text-muted);
	font-weight: 500;
}

.an-dp-card__tags {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.an-dp-card__tags li {
	padding: 4px 10px;
	background: var(--an-bg-secondary);
	border-radius: var(--an-radius-pill);
	font-size: 11px;
	font-weight: 500;
	color: var(--an-text);
}

.an-dp-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 14px;
	border-top: 1px solid var(--an-border);
}
.an-dp-card__rate {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 24px;
	font-weight: 600;
	color: var(--an-heading);
	line-height: 1;
	letter-spacing: -0.01em;
}
.an-dp-card__cta {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 20px;
	background: #E11D2E;
	color: #FFFFFF;
	border-radius: var(--an-radius-pill);
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: background var(--an-trans-base);
}
.an-dp-card__cta:hover { background: #C71828; color: #FFFFFF; }

/* Load more */
.an-dedicated__load-more {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}
.an-dedicated__load-more .an-btn--outline-themed {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 28px;
	background: transparent;
	border: 1px solid var(--an-border-strong);
	border-radius: 10px;
	color: var(--an-heading);
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: background var(--an-trans-base), border-color var(--an-trans-base);
}
.an-dedicated__load-more .an-btn--outline-themed:hover {
	background: var(--an-bg-secondary);
	border-color: var(--an-heading);
	color: var(--an-heading);
}

/* Responsive */
@media (max-width: 1024px) {
	.an-dedicated { padding: 64px 20px; }
	.an-dedicated__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
	.an-dedicated__watermark { font-size: 420px; right: -8vw; top: -60px; }
	.an-dedicated__circle { width: 280px; height: 280px; bottom: -160px; left: -80px; }
}
@media (max-width: 640px) {
	.an-dedicated { padding: 48px 16px; }
	.an-dedicated__head { margin-bottom: 24px; }
	.an-dedicated__title { font-size: clamp(22px, 6vw, 30px); margin-bottom: 10px; }
	.an-dedicated__title br { display: none; }
	.an-dedicated__sub br { display: none; }
	.an-dedicated__sub { font-size: 13.5px; }
	.an-dedicated__grid { grid-template-columns: 1fr; gap: 14px; }

	/* Pull N + red circle further offscreen so they don't crowd content */
	.an-dedicated__watermark { font-size: 240px; right: -30vw; top: 20px; opacity: 0.6; }
	.an-dedicated__circle { width: 160px; height: 160px; bottom: -100px; left: -70px; }

	/* Card compactness */
	.an-dp-card { padding: 16px; gap: 12px; border-radius: 16px; }
	.an-dp-card__top { grid-template-columns: 44px minmax(0,1fr) auto; gap: 10px; }
	.an-dp-card__img { width: 44px !important; height: 44px !important; }
	.an-dp-card__name { font-size: 14.5px; }
	.an-dp-card__rate { font-size: 20px; }
	.an-dp-card__cta { height: 38px; padding: 0 16px; font-size: 12.5px; }

	.an-dedicated__load-more { margin-top: 28px; }
	.an-dedicated__load-more .an-btn--outline-themed { width: 100%; max-width: 320px; }
}

/* ════════════════════════════════════════════════════════════════════
   Trust strip — sits BELOW the hero on white, red rule on top
   ════════════════════════════════════════════════════════════════════ */
.an-trust-strip {
	position: relative;
	background: var(--an-bg-primary);
	padding: 18px 20px;
}
.an-trust-strip__rule {
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 2px;
	background: #E11D2E;
}
.an-trust-strip__list {
	list-style: none;
	padding: 0;
	margin: 0;
	max-width: var(--an-container-max);
	margin-left: auto;
	margin-right: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 14px 40px;
}
.an-trust-strip__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 13.5px;
	font-weight: 500;
	color: #1E2433;
	letter-spacing: 0.01em;
}
.an-trust-strip__item:nth-child(1) svg { color: #E11D2E; }
.an-trust-strip__item:nth-child(2) svg { color: #3B82F6; }
.an-trust-strip__item:nth-child(3) svg { color: #16A34A; }
.an-trust-strip__item:nth-child(4) svg { color: #E11D2E; }
.an-trust-strip__item:nth-child(5) svg { color: #F59E0B; fill: #F59E0B; }

/* ═══ Responsive — hero + trust strip ═══════════════════════════════
   Mobile Figma: compact hero with ONLY
     eyebrow → title → sub → search form → (nothing else)
   The right-column (members + stat circles) and the under-search
   trust bullets are hidden below 1024px. Bottom trust strip also
   hides on mobile since Figma doesn't show it under the hero. */
@media (max-width: 1023px) {
	.an-hero__overlay {
		background: linear-gradient(180deg, rgba(40, 40, 40, 0.85) 0%, rgba(40, 40, 40, 0.92) 100%);
	}
	.an-hero__bg { background-position: center center; }

	/* Drop everything that isn't in the Figma mobile layout. */
	.an-hero__right,
	.an-hero__trust,
	.an-trust-strip { display: none; }

	/* Title + sub centered + tighter */
	.an-hero__inner { gap: 20px; }
	.an-hero__content { gap: 14px; }
	.an-hero__title { max-width: none; }
}
@media (max-width: 900px) {
	.an-hero {
		min-height: auto;
		padding: 40px 16px 48px;
	}
	.an-hero__eyebrow { font-size: 10.5px; letter-spacing: 0.16em; }
	.an-hero__title   { font-size: clamp(30px, 7.6vw, 40px); }
	.an-hero__sub     { font-size: 14px; max-width: none; }

	/* Form stacking — fields + geo + submit as vertical pills */
	.an-hero__search {
		flex-wrap: wrap;
		border-radius: var(--an-radius-lg);
		padding: 10px;
		min-height: auto;
		margin-top: 4px;
	}
	.an-hero__field,
	.an-hero__geo {
		flex: 1 1 100%;
		padding: 12px 14px;
		margin: 0;
		border: 0;
		border-bottom: 1px solid #E5E7EB;
		border-radius: 0;
		height: auto;
	}
	.an-hero__field--service { flex: 1 1 100%; }
	.an-hero__divider { display: none; }
	.an-hero__geo {
		justify-content: center;
		text-align: center;
		border: 0;
		border-bottom: 1px solid #E5E7EB;
	}
	.an-hero__submit {
		flex: 1 1 100%;
		justify-content: center;
		height: 48px;
		padding: 0 24px;
		margin-top: 8px;
		border-radius: var(--an-radius-sm);
	}
}
@media (max-width: 520px) {
	.an-hero__title   { font-size: clamp(28px, 8vw, 36px); }
	.an-hero__eyebrow { font-size: 10px; letter-spacing: 0.14em; }
}

/* ════════════════════════════════════════════════════════════════════
   DARK MODE — pragmatic overrides for all home sections.
   Section backgrounds already flip via --an-section-* tokens; this
   block handles text, card surfaces, borders and watermark that were
   originally hardcoded.
   ════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {

	/* ── Top States & Cities ─────────────────────────────────── */
	.an-top-states__eyebrow  { color: rgba(255, 255, 255, 0.55); }
	.an-top-states__title    { color: var(--an-heading); }
	.an-top-states__view-all {
		border-color: var(--an-border-strong);
		color: var(--an-heading);
	}
	.an-top-states__view-all:hover {
		background: var(--an-heading);
		color: var(--an-bg-primary);
	}
	.an-top-states__map {
		background: var(--an-bg-secondary);
		border-color: var(--an-border);
	}
	.an-top-states__map-caption        { color: var(--an-text); }
	.an-top-states__map-caption strong { color: var(--an-heading); }

	/* ── Top-Rated Near You ─────────────────────────────────── */
	.an-top-rated__title { color: var(--an-heading); }
	.an-top-rated__sub   { color: var(--an-text-muted); }
	.an-notary-card {
		background: var(--an-card);
		border-color: var(--an-border);
	}
	.an-notary-card__name  { color: var(--an-heading); }
	.an-notary-card__loc   { color: var(--an-text-muted); }
	.an-notary-card__tag {
		color: var(--an-text-muted);
		border-color: var(--an-border-strong);
	}
	.an-notary-card__divider  { background: var(--an-border); }
	.an-notary-card__rating-num        { color: var(--an-heading); }
	.an-notary-card__rating-count      { color: var(--an-text-muted); }
	.an-notary-card__avail--open,
	.an-notary-card__avail--closed,
	.an-notary-card__avail--unknown { color: var(--an-text-muted); }
	.an-top-rated__load-more .an-btn--outline-themed {
		border-color: var(--an-border-strong);
		color: var(--an-heading);
	}
	.an-top-rated__load-more .an-btn--outline-themed:hover {
		background: var(--an-heading);
		color: var(--an-bg-primary);
	}

	/* ── How It Works ───────────────────────────────────────── */
	.an-how-it-works__title { color: var(--an-heading); }
	.an-how-it-works__sub   { color: var(--an-text-muted); }
	.an-hiw-step__title     { color: var(--an-heading); }
	.an-hiw-step__title::after { background: var(--an-border); }
	.an-hiw-step__desc      { color: var(--an-text-muted); }

	/* ── Dedicated Pages ────────────────────────────────────── */
	.an-dedicated__watermark { color: rgba(255, 255, 255, 0.04); }
	.an-dedicated__circle   { box-shadow: 0 20px 60px rgba(225, 29, 46, 0.12); }

	/* ── Trust strip ────────────────────────────────────────── */
	.an-trust-strip__item { color: var(--an-heading); }
}