/* "Cities we serve" block: capital + top cities, with a See-all expander that
   pulls the state's full alphabetical city list on demand. Shared by state
   pages (.cols) and city pages (.cd-cols) — the link columns inherit whichever
   column class the host design already uses. */

.vp-cw { width: 100%; }

.vp-cw-cap {
	font-style: normal;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	margin-left: 7px;
	padding: 2px 7px;
	border-radius: 999px;
	border: 1px solid currentColor;
	opacity: .65;
	vertical-align: middle;
}

.vp-cw-btn {
	margin-top: 20px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: 0;
	padding: 8px 0;
	font: inherit;
	font-weight: 800;
	color: #ff3d8a;
	cursor: pointer;
	line-height: 1.2;
}
.vp-cw-btn:hover { text-decoration: underline; }
.vp-cw-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }

.vp-cw-arrow { display: inline-block; transition: transform .18s ease; }
.vp-cw-btn[aria-expanded="true"] .vp-cw-arrow { transform: rotate(90deg); }

/* The full list can run to 1,500+ cities. Show all of them, but inside a
   scroll pane so a state page doesn't grow to 16,000px and bury the footer. */
.vp-cw-all {
	margin-top: 16px;
	max-height: 460px;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 4px 14px 4px 0;
	border-top: 1px solid rgba(127, 127, 127, .22);
	border-bottom: 1px solid rgba(127, 127, 127, .22);
}
.vp-cw-all[hidden] { display: none; }

.vp-cw-note {
	opacity: .7;
	font-size: 14px;
	padding: 6px 0;
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	.vp-cw-arrow { transition: none; }
}

/* ---- Local Search Market report ------------------------------------------
   The section that carries information that exists nowhere else: real Census
   market data + real Google Ads demand/CPC, geo-targeted to this city. */
.market { background: #0f1830; color: #e8ecf7; }
.market .wrap { padding: 66px 26px; }
.market .sec-head .eyebrow { color: #ff5fa2; }
.market .sec-head h2 { color: #fff; }
.market .sec-head p { color: #a9b3ce; }

.mkt-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 14px;
	margin: 30px 0 38px;
}
.mkt-stat {
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.10);
	border-radius: 14px;
	padding: 18px 16px;
}
.mkt-stat b { display: block; font-size: 26px; color: #fff; line-height: 1.15; }
.mkt-stat span { display: block; margin-top: 5px; font-size: 12.5px; color: #9aa5c2; }

.market h3 { color: #fff; font-size: 20px; margin: 0 0 14px; }
.mkt-tblwrap { overflow-x: auto; }
/* One consistent outline. The theme's own table borders were leaving the column
   rules running past a lighter bottom edge, so every border here is declared. */
/* Enfold styles tables with #444 at ID specificity, which beat these outright —
   hence the explicit overrides. */
#top .market .mkt-tbl,
.mkt-tbl {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	border: 1px solid rgba(255,255,255,.16) !important;
}
#top .market .mkt-tbl th, #top .market .mkt-tbl td,
.mkt-tbl th, .mkt-tbl td {
	border: 0 !important;
	border-right: 1px solid rgba(255,255,255,.16) !important;
	background: transparent !important;
}
#top .market .mkt-tbl th:last-child, #top .market .mkt-tbl td:last-child,
.mkt-tbl th:last-child, .mkt-tbl td:last-child { border-right: 0 !important; }
#top .market .mkt-tbl th, .mkt-tbl th {
	text-align: left; padding: 11px 14px;
	color: #9aa5c2; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
	border-bottom: 1px solid rgba(255,255,255,.16) !important;
}
#top .market .mkt-tbl td, .mkt-tbl td {
	padding: 12px 14px; color: #dfe5f3;
	border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
#top .market .mkt-tbl tr:last-child td,
.mkt-tbl tr:last-child td { border-bottom: 0 !important; }

/* Scanner sits inside the market band now — one section, not two stacked ones.
   The nested <section> was picking up the generic 86px section padding on top of
   the wrap's own 66px, which is what opened the canyon between the table and the
   scan box. The market section owns the padding; its children carry none. */
#top .market, .market { padding: 46px 0 34px !important; }
#top .market .wrap, .market .wrap { padding: 0 26px !important; }
#top .market .vp-check, .market .vp-check {
	background: transparent !important;
	padding: 0 !important;
}
#top .market .vpc-wrap, .market .vpc-wrap { padding: 30px 0 0 !important; max-width: none; }
#top .market .vp-check h2, .market .vp-check h2 { font-size: clamp(21px, 2.6vw, 28px); }
.mkt-na { color: #7b86a3; font-size: 13px; }

.mkt-take {
	margin: 26px 0 0;
	padding: 18px 20px;
	background: rgba(255,61,138,.12);
	border: 1px solid rgba(255,61,138,.34);
	border-radius: 14px;
	color: #f3d9e6;
	font-size: 16px;
	line-height: 1.6;
}
.mkt-take b { color: #fff; }
.mkt-src { margin-top: 16px; font-size: 12.5px; color: #7b86a3; }

/* Borrowed-market notice. A town too small for Google to report demand shows the
   nearest real market's numbers — and says so, plainly. Styled as a caveat, not a
   headline, because it must never read as though these are the town's own figures. */
.mkt-borrowed {
	margin: 0 0 16px;
	padding: 13px 16px;
	border-left: 3px solid #ff5fa2;
	background: rgba(255,255,255,.05);
	border-radius: 0 10px 10px 0;
	color: #c9d1e6;
	font-size: 14.5px;
	line-height: 1.6;
}
.mkt-borrowed b { color: #fff; }
.mkt-borrowed a { color: #ff5fa2; }

/* Trade links inside the market band. */
.market .ind-others { border-top: 1px solid rgba(255,255,255,.09); padding: 30px 0 0; margin-top: 30px; }
.market .ind-others .ind-wrap { padding: 0 26px; max-width: 1180px; margin: 0 auto; }
.market .ind-others h3 { color: #fff; font-size: 19px; margin: 0 0 6px; }
.market .ind-others .ind-sub { color: #9aa5c2; font-size: 14.5px; margin: 0; }
.market .ind-others .ind-links { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.market .ind-others .ind-links a {
	display: inline-block; padding: 9px 16px; border-radius: 999px;
	background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
	color: #dfe5f3; text-decoration: none; font-size: 14px;
}
.market .ind-others .ind-links a:hover { background: #ff3d8a; border-color: #ff3d8a; color: #fff; }