/* Homelinkd theme styles — mirrors live homelinkd.com layout. No JS, no frameworks. */

@font-face {
	font-family: 'General Sans';
	src: url('../fonts/GeneralSans-Variable.woff2') format('woff2-variations');
	font-weight: 200 700;
	font-display: swap;
}

:root {
	--hl-primary: #F72585;
	--hl-secondary: #7209B7;
	--hl-blue: #4895EF;
	--hl-indigo: #3F37C9;
	--hl-ink: #262626;
	--hl-paper: #FFFFFF;
	--hl-mist: #F7F6FB;
	--hl-grad-hero: linear-gradient(115deg, #7209B7 0%, #F72585 100%);
	--hl-grad-cool: linear-gradient(135deg, #3F37C9 0%, #4895EF 100%);
	--hl-radius: 14px;
	--hl-shadow: 0 8px 24px rgba(38, 38, 38, 0.10);
	--hl-maxw: 1160px;
}

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

body { font-family: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

/* Weight hierarchy (David 29-Jul PM: too much bold): 700 is reserved for the
   page anchors (h1/h2); card/sub headings sit at 600, inline emphasis at 600. */
h1, h2 { font-weight: 700; font-variation-settings: 'wght' 700; letter-spacing: -0.01em; }

h3, h4 { font-weight: 600; font-variation-settings: 'wght' 600; letter-spacing: -0.01em; }

strong, b { font-weight: 600; font-variation-settings: 'wght' 600; }

/* ---------- Nav ---------- */

.hl-nav {
	background: var(--hl-grad-hero);
	color: #fff;
	position: fixed; /* live behavior: bar stays, hero runs underneath */
	z-index: 60;
	left: 0;
	right: 0;
}

.hl-nav--floating {
	top: 10px;
	left: 10px;
	right: 10px;
	border-radius: 14px;
	box-shadow: var(--hl-shadow);
}

.hl-nav--solid { top: 0; }

.hl-nav__inner {
	max-width: var(--hl-maxw);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.7rem 1.25rem;
}

.hl-nav__brand { display: inline-flex; }

.hl-nav__brand img { height: 38px; width: auto; }

.hl-nav__links {
	display: flex;
	align-items: center;
	gap: 2.25rem;
	margin-left: auto;
	margin-right: 1.5rem;
}

.hl-nav__links a,
.hl-dd__label {
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.hl-nav__links a:hover { opacity: 0.85; }

.hl-btn--nav {
	box-shadow: none;
	padding: 0.65rem 1.4rem;
	font-size: 1.05rem;
	white-space: nowrap;
}

/* Nav TFN pill hover — see the Buttons section for the rules; it does NOT share
   .hl-btn--white's gradient fill, which matched the nav bar behind it. */

/* Providers mega-dropdown — tabbed panel with logo cards, mirrors live.
   Radio-hack tabs: stateful, keyboard-operable, zero JS. */

.hl-nav__links .hl-dd { position: static; }

.hl-dd__label::after { content: ' \25be'; font-size: 0.75em; }

.hl-dd__label {
	padding: 0.55rem 0.9rem;
	border-radius: 8px;
}

.hl-dd:hover .hl-dd__label,
.hl-dd:focus-within .hl-dd__label { background: rgba(38, 38, 38, 0.28); }

.hl-dd__panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 70;
	visibility: hidden;
	opacity: 0;
	/* 300ms grace period so the pointer can cross from label to panel */
	transition: opacity 120ms ease, visibility 0s linear 300ms;
}

.hl-dd:hover .hl-dd__panel,
.hl-dd:focus-within .hl-dd__panel {
	visibility: visible;
	opacity: 1;
	transition: opacity 120ms ease;
}

.hl-mm {
	background: #fff;
	color: var(--hl-ink);
	border-radius: 0 0 14px 14px;
	box-shadow: 0 24px 48px rgba(38, 38, 38, 0.25);
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 1.5rem;
	padding: 1.5rem;
	max-height: min(70vh, 560px);
	overflow: auto;
}

.hl-mm input { position: absolute; opacity: 0; pointer-events: none; }

.hl-mm__tabs { display: flex; flex-direction: column; border-right: 1px solid rgba(38, 38, 38, 0.08); }

.hl-mm__tabs label {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 1rem 1.1rem;
	font-weight: 600;
	font-size: 1.05rem;
	cursor: pointer;
	border-radius: 10px 0 0 10px;
}

.hl-mm__ticon { width: 22px; height: 22px; flex: none; }

.hl-mm__tabs label:hover { color: var(--hl-primary); }

.hl-mm__pane { display: none; grid-template-columns: repeat(4, 1fr); gap: 1rem; align-content: start; }

#hlmm-internet:checked ~ .hl-mm__tabs label[for="hlmm-internet"],
#hlmm-tv:checked ~ .hl-mm__tabs label[for="hlmm-tv"],
#hlmm-mobile:checked ~ .hl-mm__tabs label[for="hlmm-mobile"],
#hlmm-security:checked ~ .hl-mm__tabs label[for="hlmm-security"],
#hlmm-business:checked ~ .hl-mm__tabs label[for="hlmm-business"] { background: var(--hl-mist); color: var(--hl-ink); }

#hlmm-internet:checked ~ .hl-mm__pane--internet,
#hlmm-tv:checked ~ .hl-mm__pane--tv,
#hlmm-mobile:checked ~ .hl-mm__pane--mobile,
#hlmm-security:checked ~ .hl-mm__pane--security,
#hlmm-business:checked ~ .hl-mm__pane--business { display: grid; }

.hl-mm__card {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #F6F6F8;
	border-radius: 12px;
	min-height: 110px;
	padding: 1rem;
	text-decoration: none;
}

.hl-mm__card:hover { outline: 2px solid var(--hl-primary); }

.hl-mm__card img { max-height: 56px; max-width: 82%; width: auto; object-fit: contain; }

/* Compare-all: an ACTION pill pinned bottom-right of the pane, not a provider
   tile (David 29-Jul PM). Last grid column, compact, gradient. */
.hl-nav__links a.hl-mm__card--all,
.hl-mm__card--all {
	grid-column: -2 / -1;
	align-self: end;
	justify-self: end;
	min-height: 0;
	padding: 0.7rem 1.4rem;
	border-radius: 999px;
	background: linear-gradient(115deg, #7209B7 0%, #F72585 100%);
	color: #fff;
	font-weight: 700;
	font-size: 1rem;
	white-space: nowrap;
}

.hl-mm__card--all::after { content: ' \2192'; }

.hl-mm__card--all:hover { outline: none; transform: translateY(-1px); box-shadow: var(--hl-shadow); color: #fff; }

/* the Business pane's pill is blue everywhere, matching the section's chrome */
.hl-biz-context a.hl-mm__card--all,
.hl-mm__pane--business a.hl-mm__card--all { background: linear-gradient(115deg, #3F37C9 0%, #4895EF 100%); }

@media (max-width: 920px) {
	.hl-dd__panel { visibility: hidden !important; }
}

/* Mobile menu (details/summary, no JS) */

.hl-nav__mobile { display: none; position: relative; }

.hl-nav__mobile summary {
	list-style: none;
	cursor: pointer;
	font-size: 1.6rem;
	line-height: 1;
	padding: 0.25rem 0.5rem;
}

.hl-nav__mobile summary::-webkit-details-marker { display: none; }

.hl-nav__mobilepanel {
	position: absolute;
	right: 0;
	top: calc(100% + 10px);
	background: #fff;
	color: var(--hl-ink);
	border-radius: 12px;
	box-shadow: 0 16px 40px rgba(38, 38, 38, 0.25);
	padding: 1.25rem;
	width: min(320px, 88vw);
	max-height: 70vh;
	overflow: auto;
}

.hl-nav__mobilepanel h3 {
	margin: 0.75rem 0 0.25rem;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--hl-secondary);
}

.hl-nav__mobilepanel ul { list-style: none; margin: 0; padding: 0; }

.hl-nav__mobilepanel a {
	display: block;
	padding: 0.3rem 0;
	color: var(--hl-ink);
	text-decoration: none;
	font-weight: 500;
}

.hl-mobilebar { display: none; }

@media (max-width: 920px) {
	/* tighter bar on mobile (David 29-Jul PM) */
	.hl-nav__inner { padding: 0.45rem 1rem; }
	.hl-nav__brand img { height: 28px; }
	.hl-nav--floating { top: 6px; left: 6px; right: 6px; }
	.hl-nav__links { display: none; }
	.hl-nav__mobile { display: block; }
	.hl-nav .hl-btn--nav, .hl-nav__inner .hl-btn--nav { display: none !important; }

	.hl-mobilebar {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 80;
		background: var(--hl-grad-hero);
		color: #fff;
		font-weight: 500;
		font-size: 1.1rem;
		text-decoration: none;
		padding: 0.9rem 1rem calc(0.9rem + env(safe-area-inset-bottom));
		box-shadow: 0 -6px 20px rgba(38, 38, 38, 0.25);
	}

	body { padding-bottom: 58px; }
}

/* ---------- Buttons ---------- */

.hl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	padding: 0.85rem 1.6rem;
	border-radius: 10px;
	background-image: linear-gradient(115deg, #7209B7 0%, #F72585 50%, #7209B7 100%);
	background-size: 220% 100%;
	background-position: 0% 0;
	color: #fff;
	font-weight: 500;
	text-decoration: none;
	line-height: 1.2;
	transition: background-position 320ms ease, color 200ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.hl-btn strong { font-weight: 500; 
}

/* Hover: gradient slides left→right + a pink glow — the slide alone landed on
   a near-identical reversed gradient and read as no response (David 05-Aug). */
.hl-btn:hover, .hl-btn:focus-visible { transform: translateY(-1px); background-position: 100% 0; box-shadow: 0 8px 20px rgba(247, 37, 133, 0.35); }

.hl-btn:focus-visible { outline: 3px solid var(--hl-blue); outline-offset: 2px; }

.hl-btn--white,
.hl-btn--nav {
	position: relative;
	z-index: 0;
	overflow: hidden;
	background: #fff;
	color: var(--hl-secondary);
}

.hl-btn--white::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: linear-gradient(115deg, #F72585 0%, #7209B7 100%);
	opacity: 0;
	transform: translateX(-16%);
	transition: opacity 240ms ease, transform 240ms ease;
}

.hl-btn--white:hover, .hl-btn--white:focus-visible { color: #fff; }

.hl-btn--white:hover::before, .hl-btn--white:focus-visible::before { opacity: 1; transform: none; }

/* Nav TFN pill hover. The pill sits ON the nav gradient, so it must NOT reuse
   .hl-btn--white's pink→purple fill: at the pill's position the bar is already
   ~#F72585, so the filled pill dissolved into the bar and the number read as
   loose white text (David 31-Jul-2026, "it disappears visually"). Instead the
   fill drops to solid secondary purple — never a bar colour at that position —
   and a crisp 2px white ring keeps the pill's outline legible whatever runs
   behind it. White on #7209B7 is 7.6:1, so the number stays AA. */
.hl-btn--nav {
	transition: background-color 240ms ease, color 200ms ease, transform 120ms ease, box-shadow 240ms ease;
}

.hl-btn--nav:hover,
.hl-btn--nav:focus-visible {
	background: var(--hl-secondary);
	color: #fff;
	box-shadow: 0 0 0 2px #fff, 0 6px 16px rgba(38, 38, 38, 0.28);
}

.hl-btn--outline {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.7);
	color: #fff;
}

.hl-btn--outline:hover {
	border-color: transparent;
	color: #fff;
	background: linear-gradient(115deg, #F72585 0%, #7209B7 100%);
}

.hl-btn--card {
	width: 100%;
	background-image: linear-gradient(135deg, #3F37C9 0%, #4895EF 50%, #3F37C9 100%);
	background-size: 220% 100%;
	font-size: 0.95rem;
	border-radius: 999px;
}

.hl-btn--grad { color: #fff; }

/* ---------- Heroes ---------- */

.hl-hero {
	color: #fff;
	padding: clamp(3.5rem, 9vw, 7rem) 1.25rem;
	padding-top: calc(clamp(3.5rem, 9vw, 7rem) + 84px);
	background-color: var(--hl-ink);
	/* Brand-washed dark hero (David 05-Aug-2026): magenta glow top-right,
	   indigo glow bottom-left over deep ink. Uniform across providers (no
	   per-provider theming, 04-Aug decision) and dark enough that the white
	   title/CTA contrast is untouched. Photo heroes (home/campaign/state)
	   override background-image and are unaffected. */
	background-image:
		radial-gradient(64rem 32rem at 90% -14%, rgba(247, 37, 133, 0.42), transparent 64%),
		radial-gradient(40rem 22rem at 72% 30%, rgba(114, 9, 183, 0.30), transparent 62%),
		radial-gradient(52rem 28rem at -10% 115%, rgba(63, 55, 201, 0.55), transparent 62%),
		linear-gradient(150deg, #241233 0%, #232028 52%, #17171C 100%);
	background-size: cover;
	background-position: center;
}

.hl-hero__wrap { max-width: var(--hl-maxw); margin: 0 auto; position: relative; }

/* Left-weighted scrim: dark under the copy, light over the family (image was
   generative-expanded leftward so the subjects sit right of center). */
.hl-hero--home {
	background-image: linear-gradient(100deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.44) 45%, rgba(0,0,0,.14) 72%), url('../img/hero-home-3.jpg');
	background-position: right center;
}

@media (max-width: 920px) {
	/* portrait crop: aim at the image's quiet left zone, flat scrim over it */
	.hl-hero--home {
		background-image: linear-gradient(rgba(0, 0, 0, 0.52), rgba(0, 0, 0, 0.52)), url('../img/hero-home-3.jpg');
		background-position: 22% center;
	}
}

.hl-hero--campaign { background-image: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)), url('../img/hero-campaign.avif'); padding-bottom: clamp(4rem, 11vw, 9rem); }

.hl-hero__accent { position: absolute; width: 84px; height: auto; margin: 0; transform: translate(-55%, -70%); }

.hl-hero__title {
	color: #fff;
	margin: 0 0 1rem;
	font-size: clamp(2.4rem, 5.8vw, 4rem);
	font-weight: 700;
	font-variation-settings: 'wght' 700;
	max-width: 20ch;
	line-height: 1.1;
}

.hl-hero__sub {
	color: rgba(255, 255, 255, 0.92);
	max-width: 52ch;
	margin: 0 0 1.75rem;
	font-size: clamp(1.05rem, 2.4vw, 1.3rem);
}

.hl-hero__cta { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* Services dropdown button (campaign hero) */

.hl-services { position: relative; display: inline-block; }

.hl-services summary {
	list-style: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.85rem 1.6rem;
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: 10px;
	color: #fff;
	font-weight: 600;
}

.hl-services summary { font-weight: 500; }

.hl-services summary::-webkit-details-marker { display: none; }

.hl-services summary::after { content: '▾'; font-size: 0.8em; }

.hl-services[open] summary::after { content: '▴'; }

.hl-services__panel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 16px 40px rgba(38, 38, 38, 0.25);
	padding: 0.6rem 0;
	min-width: 210px;
	z-index: 10;
}

.hl-services__panel a {
	display: block;
	padding: 0.5rem 1.1rem;
	color: var(--hl-ink);
	font-weight: 500;
	text-decoration: none;
}

.hl-services__panel a:hover { background: var(--hl-mist); color: var(--hl-primary); }

/* ---------- Sections ---------- */

.hl-sec { padding: clamp(3rem, 7vw, 5rem) 1.25rem; }

main.hl-sec,
main > .hl-sec:first-child { padding-top: calc(clamp(3rem, 7vw, 5rem) + 84px); }

.hl-sec__wrap { max-width: var(--hl-maxw); margin: 0 auto; }

.hl-sec--dark { background: var(--hl-ink); color: #fff; }

.hl-sec--dark h2 { color: #fff; }

.hl-sec--mist { background: var(--hl-mist); }

.hl-sec h2 { margin: 0 0 0.75rem; font-size: clamp(1.7rem, 3.6vw, 2.4rem); text-align: center; }

/* balance: multi-line leads wrap evenly instead of orphaning the last word
   (78ch stays the line-length guideline — don't widen past it). */
.hl-sec__lead { max-width: 78ch; color: inherit; opacity: 0.85; margin: 0 auto 2.25rem; text-align: center; text-wrap: balance; }

.hl-sec--dark .hl-sec__lead a { color: #A78BFA; font-weight: 600; text-decoration: none; }

.hl-sec--dark .hl-sec__lead a:hover { text-decoration: underline; }

.hl-center { text-align: center; }

.hl-center .hl-sec__lead { margin-left: auto; margin-right: auto; }

/* ---------- Partner strip (CSS marquee, no JS) ---------- */

.hl-partners { overflow: hidden; display: flex; gap: 4rem; padding: 0.5rem 0; }

.hl-partners__track {
	display: flex;
	align-items: center;
	gap: 4rem;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-shrink: 0;
	min-width: 100%;
	justify-content: space-around;
	animation: hl-marquee 32s linear infinite;
}

.hl-partners__track img { height: 44px; width: auto; max-width: 150px; object-fit: contain; }

@keyframes hl-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(calc(-100% - 4rem)); }
}

@media (prefers-reduced-motion: reduce) {
	.hl-partners__track { animation: none; flex-wrap: wrap; justify-content: center; gap: 2rem; }
	.hl-partners__track[aria-hidden="true"] { display: none; }
}

/* ---------- Category cards (dark section) ---------- */

.hl-cats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1.25rem;
}

.hl-cat {
	display: block;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--hl-radius);
	padding: 1.6rem 1.4rem;
	color: #fff;
	text-decoration: none;
	transition: background 150ms ease, transform 120ms ease;
}

.hl-cat:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-2px); color: #fff; }

.hl-cat img { height: 48px; width: 48px; margin-bottom: 1rem; }

.hl-cat h3 { margin: 0 0 0.5rem; font-size: 1.15rem; color: #fff; }

.hl-cat p { margin: 0; font-size: 0.92rem; color: rgba(255, 255, 255, 0.75); }

/* ---------- Why choose ---------- */

.hl-why { display: grid; gap: 2.5rem; margin-top: 2.5rem; }

.hl-why__row {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 2.5rem;
	align-items: center;
}

.hl-why__row h3 { font-size: 1.4rem; margin: 0 0 0.6rem; }

.hl-why__row p { color: rgba(38, 38, 38, 0.75); margin: 0 0 1.1rem; }

.hl-why__media { max-width: 380px; margin-left: auto; }

.hl-why__media img {
	width: 100%;
	height: auto;
	border-radius: var(--hl-radius);
	box-shadow: var(--hl-shadow);
}

@media (max-width: 780px) {
	.hl-why__row { grid-template-columns: 1fr; }
}

/* ---------- City plans (dark, legacy card layout) ---------- */

.hl-city {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-top: 2.25rem;
}

.hl-city__card {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--hl-radius);
	padding: 1.6rem;
}

.hl-city__card--tall { grid-row: span 2; }

.hl-city__card h3 { margin: 0; font-size: 1.15rem; color: #fff; }

.hl-city__list {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.hl-city__list a {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	color: #fff;
	font-weight: 500;
	text-decoration: none;
}

.hl-city__list a:hover { color: var(--hl-primary); }

.hl-city__logo {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.92);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
}

.hl-city__logo img { max-width: 80%; max-height: 68%; object-fit: contain; }

.hl-city__logo--mono {
	background: var(--hl-grad-cool);
	color: #fff;
	font-weight: 700;
	font-size: 1.25rem;
}

.hl-city__note { color: rgba(255, 255, 255, 0.75); font-size: 0.95rem; margin: 1rem 0 0; }

.hl-city__call {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: #fff;
	font-weight: 700;
	margin-top: 1.1rem;
	text-decoration: none;
}

.hl-city__call:hover { color: var(--hl-primary); }

.hl-city__call svg { width: 18px; height: 18px; }

@media (max-width: 900px) {
	.hl-city { grid-template-columns: 1fr; }
	.hl-city__card--tall { grid-row: auto; }
}

/* ---------- Blog cards ---------- */

.hl-posts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1.25rem;
	margin: 2rem 0;
}

.hl-post {
	border: 1px solid rgba(38, 38, 38, 0.10);
	border-radius: var(--hl-radius);
	padding: 1.4rem;
	background: var(--hl-paper);
	box-shadow: var(--hl-shadow);
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.hl-post__cat {
	align-self: flex-start;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--hl-secondary);
	background: rgba(114, 9, 183, 0.08);
	border-radius: 999px;
	padding: 0.25rem 0.7rem;
}

.hl-post__meta { font-size: 0.82rem; color: rgba(38, 38, 38, 0.6); margin: 0; }

.hl-post h3 { font-size: 1.1rem; margin: 0; line-height: 1.35; }

.hl-post h3 a { color: var(--hl-ink); text-decoration: none; }

.hl-post h3 a:hover { color: var(--hl-primary); }

.hl-post__more { margin-top: auto; font-weight: 700; color: var(--hl-indigo); text-decoration: none; font-size: 0.92rem; }

/* ---------- Schedule ---------- */

.hl-schedule {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2rem;
	align-items: center;
	background: var(--hl-mist);
	border-radius: var(--hl-radius);
	padding: clamp(1.75rem, 4vw, 3rem);
}

.hl-schedule h2 { margin: 0 0 0.5rem; }

.hl-schedule p { margin: 0 0 1.25rem; color: rgba(38, 38, 38, 0.75); }

.hl-schedule__qr { text-align: center; font-size: 0.8rem; color: rgba(38, 38, 38, 0.65); }

.hl-schedule__qr img { width: 130px; height: 130px; display: block; margin: 0 auto 0.4rem; }

@media (max-width: 640px) {
	.hl-schedule { grid-template-columns: 1fr; }
}

/* ---------- Plan cards (kept for provider/comparison pages) ---------- */

.hl-plan-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.25rem;
	max-width: var(--hl-maxw);
	margin: 0 auto;
}

.hl-plan-card {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	background: var(--hl-paper);
	border: 1px solid rgba(38, 38, 38, 0.10);
	border-radius: var(--hl-radius);
	padding: 1.4rem;
	box-shadow: var(--hl-shadow);
}

.hl-plan-card__provider {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin: 0;
	font-weight: 700;
	color: var(--hl-secondary);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.85rem;
}

.hl-plan-card__rating { color: var(--hl-ink); font-weight: 600; }

.hl-plan-card__name { margin: 0; font-size: 1.3rem; }

.hl-plan-card__price { margin: 0.25rem 0; font-size: 2.4rem; font-weight: 800; line-height: 1; }

.hl-plan-card__price sup { font-size: 1.1rem; vertical-align: super; }

.hl-plan-card__per { font-size: 1rem; font-weight: 500; color: rgba(38, 38, 38, 0.65); }

.hl-plan-card__specs { list-style: none; margin: 0 0 0.5rem; padding: 0; font-size: 0.95rem; }

.hl-plan-card__specs li {
	display: flex;
	justify-content: space-between;
	padding: 0.35rem 0;
	border-bottom: 1px dashed rgba(38, 38, 38, 0.12);
}

.hl-spec-k { color: rgba(38, 38, 38, 0.65); }

.hl-spec-v { font-weight: 600; }

.hl-plan-card__promo { margin: 0 0 0.5rem; font-size: 0.875rem; color: #D6116F; font-weight: 600; }

.hl-plan-card .hl-btn { margin-top: auto; }

/* ---------- FAQ (kept for provider/comparison pages) ---------- */

.hl-faq { max-width: 760px; margin: 0 auto; }

.hl-faq__item {
	border: 1px solid rgba(38, 38, 38, 0.12);
	border-radius: var(--hl-radius);
	margin-bottom: 0.75rem;
	background: var(--hl-paper);
}

.hl-faq__item summary { cursor: pointer; font-weight: 700; padding: 1rem 1.2rem; }

.hl-faq__item summary:focus-visible { outline: 3px solid var(--hl-blue); outline-offset: 2px; border-radius: var(--hl-radius); }

.hl-faq__item[open] summary { color: var(--hl-secondary); }

.hl-faq__item p { padding: 0 1.2rem 1rem; margin: 0; }

/* ---------- Trust strip (kept for LP variants) ---------- */

.hl-trust {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
	max-width: var(--hl-maxw);
	margin: 0 auto;
	padding: 1.5rem 1.25rem;
}

.hl-trust__item {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 1rem 1.1rem;
	background: var(--hl-mist);
	border-radius: var(--hl-radius);
	font-size: 0.95rem;
}

.hl-trust__item strong { color: var(--hl-indigo); }

/* ---------- Disclosure + footer ---------- */

.hl-disclosure {
	max-width: 760px;
	margin: 0 auto;
	padding: 1.25rem 1rem 2rem;
	font-size: 0.8rem;
	color: #5f5f5f; /* AA 5.9:1 at 12.8px */
	text-align: center;
}

.hl-footer {
	background: var(--hl-ink);
	color: rgba(255, 255, 255, 0.85);
	padding: clamp(2.5rem, 6vw, 4rem) 1.25rem 2rem;
	font-size: 0.92rem;
}

.hl-footer__wrap { max-width: var(--hl-maxw); margin: 0 auto; }

.hl-footer__top {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 1.25rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	padding-bottom: 2rem;
	margin-bottom: 2rem;
}

.hl-footer__top img { height: 34px; width: auto; }

.hl-footer__help h2 { color: #fff; font-size: 1.25rem; margin: 0 0 0.25rem; }

.hl-footer__help p { margin: 0; }

.hl-footer__tel { font-size: 1.4rem; font-weight: 800; color: #fff; text-decoration: none; }

.hl-footer__tel:hover { color: var(--hl-primary); }

.hl-footer__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 2rem;
	margin-bottom: 2.5rem;
}

.hl-footer__cols h3 {
	color: #fff;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0 0 0.75rem;
}

.hl-footer__cols h3 + h3, .hl-footer__cols div + h3, .hl-footer__cols ul + h3 { margin-top: 1.5rem; }

.hl-footer__cols ul { list-style: none; margin: 0; padding: 0; }

.hl-footer__cols li { margin: 0.4rem 0; }

.hl-footer__cols a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }

.hl-footer__cols a:hover { color: var(--hl-primary); }

.hl-footer__fine {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	padding-top: 1.5rem;
	font-size: 0.78rem;
	color: rgba(255, 255, 255, 0.55);
}

.hl-footer__fine a { color: rgba(255, 255, 255, 0.8); }

/* ---------- Utilities ---------- */

@media (prefers-reduced-motion: reduce) {
	.hl-btn, .hl-cat { transition: none; }
}

/* ---------- Blog article ---------- */

.hl-article { max-width: 760px; margin: 0 auto; }

.hl-article__meta { color: rgba(38, 38, 38, 0.6); font-size: 0.9rem; margin: 0.5rem 0 2rem; text-align: center; }

.hl-article h1 { text-align: center; font-size: clamp(1.9rem, 4vw, 2.6rem); }

.hl-article img { max-width: 100%; height: auto; border-radius: var(--hl-radius); }

/* ---------- Blog hub (/blog) ---------- */

.hl-bh-hero { padding-bottom: clamp(2rem, 4vw, 3rem); }

.hl-bh-hero h1 { margin: 0 0 0.75rem; font-size: clamp(2rem, 4.4vw, 3rem); text-align: center; }

.hl-bh-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
	margin-bottom: 2.25rem;
}

.hl-bh-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 1rem;
	border: 1px solid rgba(38, 38, 38, 0.15);
	border-radius: 999px;
	color: var(--hl-ink);
	text-decoration: none;
	font-weight: 500;
	font-size: 0.9rem;
	background: var(--hl-paper);
}

.hl-bh-chip span { color: rgba(38, 38, 38, 0.5); font-size: 0.8rem; }

.hl-bh-chip:hover { border-color: var(--hl-primary); color: var(--hl-primary); }

.hl-bh-card {
	display: flex;
	flex-direction: column;
	background: var(--hl-paper);
	border: 1px solid rgba(38, 38, 38, 0.10);
	border-radius: var(--hl-radius);
	overflow: hidden;
	box-shadow: var(--hl-shadow);
}

.hl-bh-card__media { display: block; aspect-ratio: 16 / 9; background: var(--hl-mist); }

.hl-bh-card__media img, .hl-bh-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hl-bh-card__body { display: flex; flex-direction: column; gap: 0.55rem; padding: 1.25rem 1.35rem 1.35rem; flex: 1; }

.hl-bh-card__body .hl-post__cat { align-self: flex-start; text-decoration: none; }

.hl-bh-card__title { margin: 0; font-size: 1.12rem; line-height: 1.35; }

.hl-bh-card__title a { color: var(--hl-ink); text-decoration: none; }

.hl-bh-card__title a:hover { color: var(--hl-primary); }

.hl-bh-card__excerpt { margin: 0; font-size: 0.92rem; color: rgba(38, 38, 38, 0.7); }

.hl-bh-card__meta { margin-top: auto; padding-top: 0.4rem; font-size: 0.82rem; color: rgba(38, 38, 38, 0.55); }

/* Featured (newest) story */
.hl-bh-card--featured {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	margin-bottom: 2rem;
}

.hl-bh-card--featured .hl-bh-card__media { aspect-ratio: auto; min-height: 320px; order: 2; }

.hl-bh-card--featured .hl-bh-card__body { order: 1; justify-content: center; padding: clamp(1.5rem, 3.5vw, 2.75rem); }

.hl-bh-card--featured .hl-bh-card__title { font-size: clamp(1.4rem, 2.8vw, 2rem); }

.hl-bh-card--featured .hl-bh-card__excerpt { font-size: 1rem; }

@media (max-width: 780px) {
	.hl-bh-card--featured { grid-template-columns: 1fr; }
	.hl-bh-card--featured .hl-bh-card__media { order: 1; aspect-ratio: 16 / 9; min-height: 0; }
	.hl-bh-card--featured .hl-bh-card__body { order: 2; }
}

.hl-bh-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.4rem;
}

.hl-bh-pagination { margin-top: 2.5rem; }

.hl-bh-pagination ul.page-numbers { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin: 0; padding: 0; }

.hl-bh-pagination .page-numbers {
	display: inline-block;
	padding: 0.5rem 0.9rem;
	border-radius: 10px;
	border: 1px solid rgba(38, 38, 38, 0.15);
	color: var(--hl-ink);
	text-decoration: none;
	font-weight: 500;
	font-size: 0.95rem;
}

.hl-bh-pagination .page-numbers.current { background: var(--hl-grad-hero); color: #fff; border-color: transparent; }

.hl-bh-pagination a.page-numbers:hover { border-color: var(--hl-primary); color: var(--hl-primary); }

/* ---------- CTA band (consistent end-of-page conversion moment) ---------- */

.hl-ctaband {
	background: var(--hl-grad-hero);
	color: #fff;
	border-radius: var(--hl-radius);
	padding: clamp(1.75rem, 4vw, 3rem);
	text-align: center;
	margin: 2rem 0;
}

.hl-ctaband h2 { color: #fff; margin: 0 0 0.5rem; text-align: center; }

.hl-ctaband p { color: rgba(255, 255, 255, 0.9); max-width: 52ch; margin: 0 auto 1.4rem; }

/* ---------- Generic page + article polish ---------- */

.hl-page h1 { text-align: center; margin-bottom: 1.5rem; }

.hl-page h2 { text-align: left; margin-top: 2.25rem; }

.hl-page details, .hl-article details {
	border: 1px solid rgba(38, 38, 38, 0.12);
	border-radius: var(--hl-radius);
	margin: 0 0 0.75rem;
	padding: 0;
	background: var(--hl-paper);
}

.hl-page details summary, .hl-article details summary { cursor: pointer; font-weight: 600; padding: 1rem 1.2rem; }

.hl-page details p, .hl-article details p { padding: 0 1.2rem 1rem; margin: 0; }

.hl-article__meta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	color: rgba(38, 38, 38, 0.6);
	font-size: 0.9rem;
	margin: 0.75rem 0 2rem;
}

.hl-article__meta .hl-post__cat { text-decoration: none; }

.hl-archive-title { margin-bottom: 2rem; font-size: clamp(1.8rem, 4vw, 2.6rem); }

.hl-sec .wp-block-post-featured-image img { border-radius: var(--hl-radius); }

/* ---------- Compare-links category cards ---------- */

.hl-cmp2 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}

.hl-cmp2__card {
	background: var(--hl-paper);
	border: 1px solid rgba(38, 38, 38, 0.10);
	border-radius: var(--hl-radius);
	box-shadow: var(--hl-shadow);
	padding: 1.5rem;
}

.hl-cmp2__card--internet { grid-column: 1 / -1; }

.hl-cmp2__head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }

.hl-cmp2__head img { width: 36px; height: 36px; }

.hl-cmp2__head h3 { margin: 0; font-size: 1.15rem; }

.hl-cmp2__links { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.hl-cmp2__links a {
	display: inline-block;
	padding: 0.45rem 1rem;
	border: 1px solid rgba(38, 38, 38, 0.15);
	border-radius: 999px;
	background: var(--hl-mist);
	color: var(--hl-ink);
	font-weight: 500;
	font-size: 0.9rem;
	text-decoration: none;
}

.hl-cmp2__links a:hover { border-color: var(--hl-primary); color: var(--hl-primary); }

@media (max-width: 860px) {
	.hl-cmp2 { grid-template-columns: 1fr; }
}

/* ---------- Comparison table ---------- */

.hl-cmpt {
	border: 1px solid rgba(38, 38, 38, 0.10);
	border-radius: var(--hl-radius);
	overflow: hidden;
	box-shadow: var(--hl-shadow);
	margin: 2rem 0;
	background: var(--hl-paper);
}

.hl-cmpt__head,
.hl-cmpt__row {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.6fr) minmax(0, 0.7fr) minmax(0, 1fr);
	gap: 1.25rem;
	align-items: center;
	padding: 1.1rem 1.4rem;
}

.hl-cmpt__head {
	background: var(--hl-ink);
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding-top: 0.8rem;
	padding-bottom: 0.8rem;
}

.hl-cmpt__row { border-top: 1px solid rgba(38, 38, 38, 0.08); }

.hl-cmpt__row:nth-child(even) { background: var(--hl-mist); }

.hl-cmpt__provider { display: flex; align-items: center; gap: 0.9rem; }

.hl-cmpt__provider strong { display: block; font-size: 1.05rem; }

.hl-cmpt__provider .hl-city__logo { background: var(--hl-mist); border: 1px solid rgba(38, 38, 38, 0.08); }

/* Universal comparison-row logo chip: 118×52 white tile, logo contained at the
   sitewide 48px height — designation lockups (wide) and squares both fit. */
.hl-cmpt__plogo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 118px;
	height: 52px;
	padding: 4px 8px;
	background: #fff;
	border: 1px solid rgba(38, 38, 38, 0.10);
	border-radius: 10px;
}

.hl-cmpt__plogo img { max-width: 100%; max-height: 44px; width: auto; height: auto; object-fit: contain; }

.hl-cmpt__plogo--mono {
	background: var(--hl-grad-cool);
	color: #fff;
	font-weight: 800;
	font-size: 1.3rem;
}

/* Inline connection-type icon — inherits the label color */
.hl-ctype-ico {
	width: 15px;
	height: 15px;
	vertical-align: -2px;
	margin-right: 0.3rem;
	display: inline-block;
}

.hl-plan-card__specs .hl-ctype-ico { color: var(--hl-secondary, #7209B7); }

.hl-cmpt__rating { display: block; font-size: 0.85rem; color: rgba(38, 38, 38, 0.65); }

.hl-cmpt__types {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--hl-indigo);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 0.25rem;
}

.hl-cmpt__info p { margin: 0; font-size: 0.92rem; color: rgba(38, 38, 38, 0.7); }

.hl-cmpt__price { font-size: 1.6rem; font-weight: 800; line-height: 1; }

.hl-cmpt__price sup { font-size: 0.9rem; }

.hl-cmpt__price span { font-size: 0.85rem; font-weight: 500; color: rgba(38, 38, 38, 0.6); }

.hl-cmpt__callprice { font-size: 0.95rem !important; font-weight: 600 !important; color: var(--hl-secondary) !important; }

.hl-cmpt__cta { display: flex; flex-direction: column; gap: 0.5rem; align-items: stretch; min-width: 0; }

.hl-cmpt__cta .hl-btn { width: 100%; font-size: 0.95rem; padding: 0.7rem 1rem; }

.hl-cmpt__row > div, .hl-cmpt__head > span { min-width: 0; }

.hl-cmpt__view { font-size: 0.85rem; font-weight: 600; color: var(--hl-indigo); text-decoration: none; text-align: center; }

.hl-cmpt__view:hover { color: var(--hl-primary); }

@media (max-width: 860px) {
	.hl-cmpt__head { display: none; }
	.hl-cmpt__row { grid-template-columns: 1fr 1fr; }
	.hl-cmpt__provider { grid-column: 1 / -1; }
	.hl-cmpt__info { grid-column: 1 / -1; }
}

/* ---------- US state map ---------- */

.hl-usmap-wrap { max-width: 900px; margin: 2rem auto 0; }

.hl-usmap { width: 100%; height: auto; display: block; }

.hl-usmap .state, .hl-usmap path { transition: fill 120ms ease; }

.hl-usmap a { cursor: pointer; }

/* Provider hero logo chip — white tile keeps any logo legible on the dark hero */
.hl-phero__logo {
	display: inline-flex;
	align-items: center;
	background: #fff;
	border-radius: 12px;
	padding: 0.55rem 0.9rem;
	margin-bottom: 1.1rem;
}

/* 48px is the universal provider-logo height (David 04-Aug): tall enough that
   the "Authorized …" line in designation lockups stays legible, small enough
   not to crowd the hero. Same height rules the matrix and comparison rows. */
.hl-phero__logo img { height: 48px; width: auto; max-width: 220px; object-fit: contain; display: block; }

/* Connection-type chips on the provider hero */
.hl-phero__types {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0 0 1.4rem;
	padding: 0;
}

.hl-phero__types li {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.3rem 0.75rem;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 0.82rem;
	font-weight: 600;
}

.hl-phero__types .hl-ctype-ico { margin-right: 0; width: 14px; height: 14px; }

/* ---------- Business section (HL-M8) ---------- */
/* Business surface = the brand's cool gradient — instantly distinct from residential */
.hl-hero--biz { background: var(--hl-grad-cool, linear-gradient(135deg, #3F37C9 0%, #4895EF 100%)); }

/* Business context: the whole chrome leans blue (David 29-Jul-2026).
   Nav runs blue→indigo, the reverse of the hero, so the two read as separate surfaces. */
.hl-biz-context .hl-nav { background: linear-gradient(115deg, #4895EF 0%, #3F37C9 100%); }

.hl-biz-context .hl-btn { background-image: linear-gradient(115deg, #3F37C9 0%, #4895EF 50%, #3F37C9 100%); }

.hl-biz-context .hl-btn--white, .hl-biz-context .hl-btn--nav { background: #fff; color: var(--hl-indigo); }

.hl-biz-context .hl-btn--white::before { background: linear-gradient(115deg, #4895EF 0%, #3F37C9 100%); }

/* Business nav pill: same fix as the consumer bar, in the cool palette. The biz
   bar runs blue→indigo, so the pill fills solid indigo and keeps the white ring
   that separates it from whatever sits behind. White on #3F37C9 is 8.6:1. */
.hl-biz-context .hl-btn--nav:hover,
.hl-biz-context .hl-btn--nav:focus-visible {
	background: var(--hl-indigo);
	color: #fff;
	box-shadow: 0 0 0 2px #fff, 0 6px 16px rgba(38, 38, 38, 0.28);
}

.hl-biz-context .hl-btn--outline { background: transparent; }

.hl-biz-context .hl-btn--ghost { background: transparent; }

.hl-biz-context .hl-btn--ghost:hover { background: linear-gradient(115deg, #4895EF 0%, #3F37C9 100%); }

.hl-biz-context .hl-ctaband { background: linear-gradient(115deg, #3F37C9 0%, #4895EF 100%); }

.hl-biz-context .hl-mobilebar { background: linear-gradient(115deg, #3F37C9 0%, #4895EF 100%); }

.hl-biz-context .hl-biztable tbody th a { color: var(--hl-indigo); }

/* logos in the tier table + provider cards */
.hl-biz__logo { height: 30px; width: auto; max-width: 120px; object-fit: contain; display: block; margin-bottom: 0.35rem; }

.hl-biz__name { display: block; }

.hl-bizcard__logo { margin: 0 0 0.5rem; }

.hl-bizcard__logo img { height: 40px; width: auto; max-width: 150px; object-fit: contain; }

/* hub: partner logo strip + how-it-works steps */
.hl-bizlogos { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; align-items: center; justify-content: center; margin: 1.8rem 0 0.5rem; }

.hl-bizlogos img { height: 28px; width: auto; max-width: 130px; object-fit: contain; opacity: 0.85; }

.hl-bizsteps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 1.8rem; }

.hl-bizsteps article { border: 1px solid #e5e5e5; border-radius: 14px; padding: 1.4rem; background: #fff; }

.hl-bizsteps .hl-bizsteps__n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: linear-gradient(115deg, #3F37C9 0%, #4895EF 100%);
	color: #fff;
	font-weight: 700;
	margin-bottom: 0.6rem;
}

.hl-bizsteps h3 { margin: 0 0 0.35rem; font-size: 1.05rem; }

.hl-bizsteps p { margin: 0; font-size: 0.92rem; color: #555; }

@media (max-width: 920px) {
	.hl-bizsteps { grid-template-columns: 1fr; }
}

/* hub variant: hl-cat cards on a LIGHT section (base styles assume the dark home band) */
.hl-cats--biz .hl-cat { background: #fff; border: 1px solid #e5e5e5; color: var(--hl-ink); }

.hl-cats--biz .hl-cat:hover { background: #fff; color: var(--hl-ink); box-shadow: var(--hl-shadow); }

.hl-cats--biz .hl-cat h3 { color: var(--hl-ink); }

.hl-cats--biz .hl-cat p { color: #555; }

.hl-cat--soon { opacity: 0.65; cursor: default; }

.hl-cat--soon h3::after { content: " · coming soon"; font-size: 0.7em; color: #767676; font-weight: 500; }

.hl-bizverify { font-size: 0.8rem; color: #767676; margin-top: 1rem; }

.hl-biz__tier { margin: 2.4rem 0 0.8rem; }

.hl-biz__note { display: block; font-size: 0.78rem; font-weight: 400; color: #767676; max-width: 36ch; }

.hl-bizscroll { overflow-x: auto; }

.hl-biztable { width: 100%; border-collapse: collapse; font-size: 0.95rem; }

.hl-biztable th, .hl-biztable td { text-align: left; padding: 0.85rem 1rem; border-bottom: 1px solid #ececec; vertical-align: top; }

.hl-biztable thead th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: #767676; }

.hl-biztable tbody th { font-weight: 600; }

.hl-biztable tbody th a { color: var(--hl-secondary); text-decoration: none; }

.hl-biztable tbody th a:hover { text-decoration: underline; }

.hl-btn--sm { padding: 0.45rem 1.1rem; font-size: 0.85rem; }

.hl-btn--ghost { background: transparent; border: 1px solid rgba(38, 38, 38, 0.35); color: var(--hl-ink); }

.hl-btn--ghost:hover { border-color: transparent; color: #fff; background: linear-gradient(115deg, #F72585 0%, #7209B7 100%); }

/* Plan cards: wrapping grid — no horizontal scroll (David 29-Jul: disliked the
   scroller). Static grid = touch/keyboard/no-JS for free. */
.hl-bizgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1rem;
	padding: 0.25rem 0 0.5rem;
}

.hl-bizcard { border: 1px solid #e5e5e5; border-radius: 14px; padding: 1.3rem; background: #fff; min-width: 0; }

.hl-bizcard h3 { margin: 0 0 0.35rem; font-size: 1.05rem; }

.hl-bizcard__price { font-size: 1.45rem; font-weight: 700; margin: 0.2rem 0; }

.hl-bizcard__type { color: #767676; font-size: 0.85rem; margin: 0.1rem 0; }

.hl-bizcard__note { font-size: 0.75rem; color: #999; }

.hl-bizcard__cta { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.8rem; }


/* Editorial figures + ported offer terms (provider LPs) */
.hl-page .hl-fig { margin: 2rem auto; text-align: center; }

.hl-page .hl-fig img { max-width: 100%; height: auto; border-radius: 12px; }

.hl-tc { margin-top: 2.5rem; color: #767676; }

.hl-tc summary { cursor: pointer; font-weight: 600; font-size: 0.85rem; }

.hl-tc p { font-size: 0.8rem; line-height: 1.55; margin: 0.6rem 0; }

/* State-page hero: brand gradient + faint "you are here" US map, current state solid white.
   Gradient runs pink→purple — the reverse of the nav — so the two read as separate surfaces. */
.hl-hero--state {
	position: relative;
	overflow: hidden;
	background: linear-gradient(100deg, var(--hl-primary), var(--hl-secondary));
}

/* the floating nav's drop shadow reads as a smudge on a flat gradient */
.single-location .hl-nav--floating { box-shadow: none; }

.hl-hero--state .hl-hero__wrap { position: relative; z-index: 1; }

.hl-shero {
	position: absolute;
	top: 50%;
	right: 2%;
	transform: translateY(-50%);
	width: min(42%, 520px);
	pointer-events: none;
}

.hl-shero__svg { width: 100%; height: auto; display: block; }

/* base layer: SOLID fills, dimmed as a whole — overlapping source shapes
   composite invisibly (translucent per-path fills showed seams) */
.hl-shero__svg--base { opacity: 0.14; }

.hl-shero__svg--base path, .hl-shero__svg--base circle { fill: #fff !important; }

.hl-shero__svg--base .borders { stroke: rgba(255, 255, 255, 0.9) !important; }

/* highlight layer: everything hidden except the current state (inline style) */
.hl-shero__svg--hi { position: absolute; inset: 0; }

.hl-shero__svg--hi path, .hl-shero__svg--hi circle { display: none; }

.hl-shero__svg [class*="separator"], .hl-shero__svg path[fill="none"] { display: none !important; }

@media (max-width: 920px) {
	.hl-shero { display: none; }
}

/* Pin fill for every link state — some browsers (Safari) repaint :visited SVG
   links with the default black fill; author rules must win in all states. */
.hl-usmap a path, .hl-usmap a circle,
.hl-usmap a:link path, .hl-usmap a:link circle,
.hl-usmap a:visited path, .hl-usmap a:visited circle { fill: #d0d0d0; }

.hl-usmap a:hover path, .hl-usmap a:focus path,
.hl-usmap a:hover circle, .hl-usmap a:focus circle { fill: var(--hl-secondary); }

.hl-cmpt__srv { font-size: 1.05rem; font-weight: 700; color: var(--hl-indigo); }

/* ---- Feature matrix (legacy "scroll right to compare" layout) ---- */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ---- Feature matrix (/internet-provider-comparisons) ----
   Card #248: the matrix must show every provider with NO left-right scroll.
   One markup, two layouts, zero JS:
   - >=860px  real table with table-layout:fixed — the columns always divide
              the band exactly, so horizontal overflow is impossible by
              construction (no scroll container, no "scroll right" hint, no
              focusable region to leave behind).
   - <=859px  the same cells transpose into one card per provider via grid
              order (order = column * 10 + row). No duplicated DOM; the row
              <th>s stay in the accessibility tree while each card repaints
              its labels from data-label. 860px is where a fixed column stops
              holding ~100px of legible content, and is the collapse point the
              sibling .hl-cmpt table already uses. */

.hl-matrix { margin: 2rem 0; }

.hl-matrix__frame {
	border: 1px solid rgba(38, 38, 38, 0.10);
	border-radius: var(--hl-radius);
	box-shadow: var(--hl-shadow);
	background: var(--hl-paper);
	overflow: hidden; /* clips the ink label column to the radius */
}

.hl-matrix__table {
	border-collapse: collapse;
	table-layout: fixed;
	width: 100%;
	font-size: 0.92rem;
}

.hl-matrix__table th,
.hl-matrix__table td {
	padding: 0.9rem clamp(0.5rem, 1.05vw, 1.1rem);
	text-align: center;
	vertical-align: middle;
	border-top: 1px solid rgba(38, 38, 38, 0.08);
	overflow-wrap: break-word;
}

.hl-matrix__table thead th { border-top: 0; padding-top: 1.4rem; position: relative; }

.hl-matrix__table tbody th[scope="row"],
.hl-matrix__corner {
	position: sticky;
	left: 0;
	width: clamp(92px, 13%, 150px);
	background: var(--hl-ink);
	color: rgba(255, 255, 255, 0.9);
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-align: left;
	z-index: 1;
}

.hl-matrix__corner { background: var(--hl-ink); }

.hl-matrix__table tbody tr:nth-child(even) td { background: var(--hl-mist); }

.hl-matrix__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	margin-bottom: 0.4rem;
}

.hl-matrix__logo img { max-height: 48px; width: auto; max-width: min(150px, 100%); object-fit: contain; }

.hl-matrix__name { display: block; font-weight: 700; }

/* Featured column: the class is on every cell (for the mobile card), but the
   table layout keeps the original header-only pink rule. */
.hl-matrix__table thead th.hl-matrix__col--featured { box-shadow: inset 0 3px 0 var(--hl-primary); }

/* Table layout has no room for the number next to the label — the tracked TFN
   is still in the DOM (one tfn() path) and shows in the mobile cards. */
.hl-matrix .hl-btn__number { display: none; }

.hl-matrix__badge {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	background: var(--hl-primary); /* solid pink — gradient read as a CTA (David 05-Aug) */
	color: #fff;
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0.2rem 0.7rem;
	border-radius: 0 0 8px 8px;
	white-space: nowrap;
}

.hl-matrix__from { display: block; font-size: 0.8rem; color: rgba(38, 38, 38, 0.6); }

.hl-matrix__table td strong { font-size: 1.35rem; font-weight: 800; }

.hl-matrix__mo { font-size: 0.85rem; color: rgba(38, 38, 38, 0.6); }

.hl-matrix__ctarow td { padding-bottom: 1.3rem; }

.hl-matrix__ctarow .hl-btn { width: 100%; font-size: 0.9rem; padding: 0.65rem 0.9rem; }

.hl-matrix__view {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--hl-indigo);
	text-decoration: none;
}

.hl-matrix__view:hover { color: var(--hl-primary); }

/* Tablet band: same table, tighter type so the fixed columns stay legible. */
@media (max-width: 1179px) {
	.hl-matrix__table { font-size: 0.86rem; }
	.hl-matrix__table td strong { font-size: 1.2rem; }
	.hl-matrix__ctarow .hl-btn { font-size: 0.85rem; padding: 0.65rem 0.6rem; }
	.hl-matrix__view { font-size: 0.78rem; }
}

/* ---- Mobile: the table becomes one card per provider (CSS transposition) ---- */

@media (max-width: 859px) {
	.hl-matrix__frame {
		border: 0;
		border-radius: 0;
		box-shadow: none;
		background: transparent;
		overflow: visible;
	}

	.hl-matrix__table {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		font-size: 1rem;
	}

	.hl-matrix__table thead,
	.hl-matrix__table tbody,
	.hl-matrix__table tr { display: contents; }

	.hl-matrix__corner { display: none; }

	/* Row headers stay in the a11y tree (cells keep resolving their row
	   header); the visible per-card label is painted from data-label below. */
	.hl-matrix__table tbody th[scope="row"] {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		border: 0;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
		white-space: nowrap;
	}

	/* Transpose: each provider column becomes a contiguous stack (a card). */
	.hl-matrix__table tr > :nth-child(2) { --hl-col: 1; }
	.hl-matrix__table tr > :nth-child(3) { --hl-col: 2; }
	.hl-matrix__table tr > :nth-child(4) { --hl-col: 3; }
	.hl-matrix__table tr > :nth-child(5) { --hl-col: 4; }
	.hl-matrix__table tr > :nth-child(6) { --hl-col: 5; }
	.hl-matrix__table tr > :nth-child(7) { --hl-col: 6; }
	.hl-matrix__table tr > :nth-child(8) { --hl-col: 7; }
	.hl-matrix__table tr > :nth-child(9) { --hl-col: 8; }
	.hl-matrix__table tr > :nth-child(10) { --hl-col: 9; }
	.hl-matrix__table tr > :nth-child(11) { --hl-col: 10; }
	.hl-matrix__table tr > :nth-child(12) { --hl-col: 11; }
	.hl-matrix__table tr > :nth-child(13) { --hl-col: 12; }

	.hl-matrix__table thead tr > * { --hl-row: 0; }
	.hl-matrix__table tbody tr:nth-child(1) > * { --hl-row: 1; }
	.hl-matrix__table tbody tr:nth-child(2) > * { --hl-row: 2; }
	.hl-matrix__table tbody tr:nth-child(3) > * { --hl-row: 3; }
	.hl-matrix__table tbody tr:nth-child(4) > * { --hl-row: 4; }
	.hl-matrix__table tbody tr:nth-child(5) > * { --hl-row: 5; }

	.hl-matrix__table thead th,
	.hl-matrix__table tbody td { order: calc(var(--hl-col, 20) * 10 + var(--hl-row, 0)); }

	/* Card head: logo + name left, badge right. */
	.hl-matrix__table thead th {
		display: flex;
		align-items: center;
		gap: 0.7rem;
		margin-top: 1.25rem;
		padding: 0.85rem 1rem;
		text-align: left;
		background: var(--hl-mist);
		border: 1px solid rgba(38, 38, 38, 0.10);
		border-bottom: 0;
		border-radius: var(--hl-radius) var(--hl-radius) 0 0;
	}

	.hl-matrix__logo { height: 42px; margin: 0; flex: 0 0 auto; justify-content: flex-start; }

	.hl-matrix__logo img { max-height: 38px; max-width: 128px; }

	.hl-matrix__name { font-size: 1.05rem; }

	/* Card head sits logo and name on one line, and the partner logos are
	   wordmarks — so the name would repeat what the logo already says. Hide it
	   visually where a logo exists, keep it in the a11y tree, and leave it
	   visible for any provider rendering without one. */
	.hl-matrix__col--haslogo .hl-matrix__name {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	/* With the name gone the logo carries the card, so give it more room. */
	.hl-matrix__col--haslogo .hl-matrix__logo { height: 46px; }

	.hl-matrix__col--haslogo .hl-matrix__logo img { max-height: 42px; max-width: 168px; }

	.hl-matrix__badge {
		position: static;
		order: 1;
		margin-left: auto;
		transform: none;
		padding: 0.25rem 0.6rem;
		border-radius: 999px;
		font-size: 0.62rem;
	}

	/* Zebra is a table device — cards read cleaner on flat paper. */
	.hl-matrix__table tbody tr:nth-child(even) td { background: var(--hl-paper); }

	/* Card rows: label left, value right. */
	.hl-matrix__table tbody td {
		display: flex;
		align-items: baseline;
		justify-content: flex-end; /* label pinned left via its auto margin */
		gap: 0;
		padding: 0.7rem 1rem;
		text-align: right;
		background: var(--hl-paper);
		border-top: 1px solid rgba(38, 38, 38, 0.08);
		border-left: 1px solid rgba(38, 38, 38, 0.10);
		border-right: 1px solid rgba(38, 38, 38, 0.10);
	}

	.hl-matrix__table tbody td::before {
		content: attr(data-label);
		content: attr(data-label) / ""; /* label is decorative: the <th> carries it */
		flex: 0 0 auto;
		margin-right: auto;
		padding-right: 0.85rem;
		text-align: left;
		font-size: 0.72rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		color: rgba(38, 38, 38, 0.55);
	}

	.hl-matrix__from { display: inline; margin-right: 0.4rem; }

	.hl-matrix__table td strong { font-size: 1.25rem; }

	/* Card foot: full-width call CTA with the tracked number, then the link.
	   Selector is tbody-qualified so it outranks the card-row rule above. */
	.hl-matrix__table tbody tr.hl-matrix__ctarow td {
		display: block;
		padding: 0.9rem 1rem 1rem;
		text-align: center;
		border-bottom: 1px solid rgba(38, 38, 38, 0.10);
		border-radius: 0 0 var(--hl-radius) var(--hl-radius);
	}

	.hl-matrix__table tbody tr.hl-matrix__ctarow td::before { content: none; }

	.hl-matrix__ctarow .hl-btn {
		width: 100%;
		flex-wrap: wrap;
		font-size: 0.95rem;
		padding: 0.85rem 1rem;
	}

	.hl-matrix .hl-btn__number { display: inline; }

	/* Secondary link gets a real tap target under the thumb-sized CTA. */
	.hl-matrix__view { margin-top: 0.3rem; padding: 0.45rem 0; font-size: 0.9rem; }

	/* Featured provider: outline the whole card instead of the header rule. */
	.hl-matrix__table thead th.hl-matrix__col--featured {
		box-shadow: none;
		border-color: rgba(247, 37, 133, 0.55);
		background: rgba(247, 37, 133, 0.06);
	}

	.hl-matrix__table tbody td.hl-matrix__col--featured {
		border-left-color: rgba(247, 37, 133, 0.55);
		border-right-color: rgba(247, 37, 133, 0.55);
	}

	.hl-matrix__table tbody tr.hl-matrix__ctarow td.hl-matrix__col--featured { border-bottom-color: rgba(247, 37, 133, 0.55); }
}

/* ---- Numbered considerations list (legacy 1-2-3 band) ---- */

.hl-numlist {
	list-style: none;
	counter-reset: hl-num;
	margin: 1.5rem 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}

.hl-numlist li {
	counter-increment: hl-num;
	position: relative;
	padding: 1.2rem 1.4rem 1.2rem 4.4rem;
	background: var(--hl-mist);
	border-radius: var(--hl-radius);
}

.hl-numlist li::before {
	content: counter(hl-num);
	position: absolute;
	left: 1.2rem;
	top: 1.1rem;
	width: 2.2rem;
	height: 2.2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--hl-grad-hero);
	color: #fff;
	font-weight: 800;
	border-radius: 50%;
}

/* ---- Connection-type explainer cards ---- */

.hl-conntypes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 1rem;
	margin: 1.5rem 0;
}

.hl-conntypes article {
	background: var(--hl-paper);
	border: 1px solid rgba(38, 38, 38, 0.10);
	border-radius: var(--hl-radius);
	padding: 1.3rem;
}

.hl-conntypes img { width: 48px; height: 48px; object-fit: contain; margin-bottom: 0.6rem; }

.hl-conntypes h3 { margin: 0 0 0.4rem; font-size: 1.05rem; }

.hl-conntypes p { margin: 0; font-size: 0.92rem; color: rgba(38, 38, 38, 0.75); }

/* ---------- Campaign LP service tiles (HL: David 05-Aug-2026) ---------- */

.hl-sec--svct { background: var(--hl-mist); }

.hl-svct {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	margin-top: 1.75rem;
	text-align: left;
}

.hl-svct__tile {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.75rem 1.5rem;
	background: var(--hl-paper);
	border: 1px solid rgba(38, 38, 38, 0.10);
	border-radius: var(--hl-radius);
	box-shadow: var(--hl-shadow);
	color: var(--hl-ink);
	text-decoration: none;
	transition: transform 0.15s ease, border-color 0.15s ease;
}

.hl-svct__tile:hover,
.hl-svct__tile:focus-visible { transform: translateY(-3px); border-color: var(--hl-primary); }

.hl-svct__tile:focus-visible { outline: 3px solid var(--hl-blue); outline-offset: 2px; }

.hl-svct__tile img { width: 44px; height: 44px; }

.hl-svct__tile h3 { margin: 0.25rem 0 0; font-size: 1.2rem; font-weight: 600; }

.hl-svct__tile p { margin: 0; font-size: 0.95rem; line-height: 1.5; color: rgba(38, 38, 38, 0.75); }

.hl-svct__go { margin-top: auto; padding-top: 0.75rem; font-weight: 600; color: var(--hl-primary); }

@media (prefers-reduced-motion: reduce) {
	.hl-svct__tile { transition: none; }
	.hl-svct__tile:hover, .hl-svct__tile:focus-visible { transform: none; }
}

@media (max-width: 860px) {
	.hl-svct { grid-template-columns: 1fr; }
}

/* ---------- Provider hero: special-offer ribbon (David 05-Aug-2026) ---------- */

.hl-phero__offer {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	margin: 0 0 1.5rem;
	padding: 0.6rem 1.1rem 0.6rem 0.6rem;
	background: rgba(255, 255, 255, 0.10);
	border: 1px solid rgba(255, 255, 255, 0.30);
	border-radius: 999px;
	color: #fff;
	font-weight: 500;
	max-width: 56ch;
	text-wrap: balance;
}

.hl-phero__offer-tag {
	flex: none;
	padding: 0.25rem 0.7rem;
	background: var(--hl-grad-hero);
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* ---------- Provider-page notice banner (Cox→Spectrum merger) ---------- */

.hl-notice {
	max-width: var(--hl-maxw);
	margin: 1.5rem auto;
	padding: 0.9rem 1.25rem;
	background: var(--hl-mist);
	border: 1px solid rgba(63, 55, 201, 0.35);
	border-left: 4px solid var(--hl-indigo);
	border-radius: var(--hl-radius);
	color: var(--hl-ink);
}

.hl-notice a { color: var(--hl-indigo); font-weight: 600; }

/* ---------- Comparison table: Recommended Service pick (David 05-Aug) ---------- */

.hl-cmpt__row--rec { background: linear-gradient(90deg, rgba(247, 37, 133, 0.05), transparent 55%); box-shadow: inset 3px 0 0 var(--hl-primary); }

/* Solid pink, always on its own line under the name (David 05-Aug): the
   gradient read as a CTA, and inline it overflowed into the highlights col. */
.hl-cmpt__rec {
	display: block;
	width: fit-content;
	margin: 0.3rem 0 0;
	padding: 0.18rem 0.6rem;
	background: var(--hl-primary);
	border-radius: 999px;
	color: #fff;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	max-width: 100%;
}

/* ---------- Logo links (tables + matrix) ---------- */

.hl-cmpt__plogolink { display: inline-flex; border-radius: 10px; }

.hl-cmpt__plogolink:focus-visible,
.hl-matrix__logolink:focus-visible { outline: 3px solid var(--hl-blue); outline-offset: 2px; }

.hl-matrix__logolink { display: inline-block; }

/* ---------- Matrix pages on mobile: hide the duplicate lower table ----------
   On IPC the matrix transposes to per-provider cards below 860px, so the lower
   row table repeats the same providers (David 05-Aug). Both rules are guarded
   by the matrix-sibling combinator, so table-only pages (TVC, Best-*) keep
   their table — it's their only one. Desktop keeps both by design (linked
   from the home hero). */
@media (max-width: 860px) {
	.hl-matrix ~ .hl-cmpt { display: none; }
	.hl-matrix ~ h2:has(+ .hl-cmpt) { display: none; }
}