/* =============================================================================
   Charger Access — main stylesheet
   Single hand-written stylesheet, no preprocessor. Tokens extracted from the
   Elementor kit 11 build (see chargeraccess-theme/style-tokens.md).
   Mobile-first: base rules target mobile; @media (min-width: …) layers up.
   Phase 3 scope = chrome + base typography + generic page. Template-specific
   layouts (home, legal, marketing, lead-gen) land in Phases 4–5.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Design tokens
   --------------------------------------------------------------------------- */
:root {
	/* Brand */
	--ca-primary: #007a94;
	--ca-secondary: #0f2942;
	--ca-accent: #005f73;
	--ca-text-dark: #2d3748;
	--ca-text: #5e6a78;
	/* Lifted teal for eyebrow labels on dark surfaces — the darker --ca-primary
	   fails contrast on navy, so on-dark labels use this brighter tint. */
	--ca-teal-on-dark: #46c2de;
	--ca-border: #e2e8f0;

	/* Surfaces / dark */
	--ca-dark-1: #1a1a2e;
	--ca-dark-2: #0a1f33;
	--ca-dark-3: #1e3a5f;
	--ca-bg-light: #f5f7fa;
	--ca-bg-lighter: #fafbfc;
	--ca-white: #ffffff;

	/* Composite surfaces */
	--ca-hero-gradient: linear-gradient(145deg, var(--ca-secondary) 0%, var(--ca-dark-3) 100%);

	/* Footer legal bar */
	--ca-legal-bg: var(--ca-dark-1);
	--ca-legal-link: #9ca3af;

	/* Type families */
	--font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-display: "Playfair Display", Georgia, "Times New Roman", serif;

	/* Type scale (canonical desktop sizes; applied fluidly via clamp below) */
	--fs-display-1: 56px;
	--fs-display-2: 42px;
	--fs-display-3: 38px;
	--fs-h2: 36px;
	--fs-h3: 32px;
	--fs-h4: 24px;
	--fs-body-lg: 18px;
	--fs-body: 16px;
	--fs-section-label: 13px;
	--fs-small: 15px;

	/* Line heights */
	--lh-body: 1.7;
	--lh-heading: 1.2;

	/* Layout */
	--container-max: 1140px;
	--container-max-header: 1200px;
	--header-pad-x: 20px; /* desktop bumps to 60px */
	--header-pad-y: 20px;
	--header-min-h: 90px;
	--nav-gap: 28px; /* desktop bumps to 50px */

	/* Radii + elevation */
	--radius: 4px;
	--radius-card: 8px;
	--shadow-card: 0 10px 40px 0 rgba(15, 41, 66, 0.08);
}

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: var(--lh-body);
	color: var(--ca-text);
	background-color: var(--ca-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--ca-primary);
	text-decoration: none;
}

a:hover,
a:focus {
	color: var(--ca-accent);
	text-decoration: underline;
}

/* Links sitting inside running prose must be distinguishable without relying on
   colour alone (WCAG 1.4.1), so underline them by default in text contexts.
   Standalone links styled as buttons, nav items or cards opt out via their own
   text-decoration: none rules. Add any NEW prose container's selector here —
   a link in a text block that is missing from this list silently re-fails 1.4.1. */
.page-content a,
.measure-center a,
.split__main a,
.trust-band__note a,
.disclosure a,
.coming-soon__fallback a {
	text-decoration: underline;
}

/* Visible focus for keyboard users. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--ca-primary);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Typography
   --------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.5em;
	font-family: var(--font-display);
	font-weight: 600;
	line-height: var(--lh-heading);
	color: var(--ca-secondary);
}

h1 {
	font-size: clamp(32px, 5vw, var(--fs-display-2));
}

h2 {
	font-size: clamp(28px, 4vw, var(--fs-h2));
}

h3 {
	font-size: clamp(24px, 3vw, var(--fs-h3));
}

h4 {
	font-size: var(--fs-h4);
}

p {
	margin: 0 0 1.2em;
}

p:last-child {
	margin-bottom: 0;
}

ul,
ol {
	margin: 0 0 1.2em;
	padding-left: 1.4em;
}

li {
	margin-bottom: 0.4em;
}

strong,
b {
	color: var(--ca-text-dark);
	font-weight: 600;
}

hr {
	border: 0;
	border-top: 1px solid var(--ca-border);
	margin: 2.5rem 0;
}

blockquote {
	margin: 1.5em 0;
	padding: 0.5em 1.25em;
	border-left: 4px solid var(--ca-primary);
	color: var(--ca-text-dark);
}

.section-label {
	display: inline-block;
	font-size: var(--fs-section-label);
	font-weight: 600;
	letter-spacing: 2.5px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--ca-primary);
}

/* ---------------------------------------------------------------------------
   Layout
   --------------------------------------------------------------------------- */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: 20px;
}

/* Accessibility helpers. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: 0.75em 1.25em;
	background: var(--ca-white);
	color: var(--ca-primary);
	border-radius: var(--radius);
}

.skip-link:focus {
	left: 8px;
	top: 8px;
}

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */
.btn,
.wp-block-button__link,
.entry-content .wp-element-button {
	display: inline-block;
	padding: 12px 28px;
	font-family: var(--font-body);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.3px;
	text-align: center;
	text-decoration: none;
	color: var(--ca-white);
	background-color: var(--ca-primary);
	border: 1px solid transparent;
	border-radius: var(--radius);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.btn:hover,
.btn:focus,
.wp-block-button__link:hover,
.wp-block-button__link:focus {
	background-color: var(--ca-accent);
	color: var(--ca-white);
	text-decoration: none;
}

.btn--ghost {
	background-color: transparent;
	color: var(--ca-white);
	border-color: rgba(255, 255, 255, 0.4);
}

.btn--ghost:hover,
.btn--ghost:focus {
	background-color: rgba(255, 255, 255, 0.1);
	color: var(--ca-white);
}

.btn--small {
	padding: 9px 18px;
	font-size: 14px;
}

/* ---------------------------------------------------------------------------
   Site header
   --------------------------------------------------------------------------- */
.site-header {
	background-color: var(--ca-white);
	border-bottom: 1px solid var(--ca-border);
}

.site-header__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	max-width: var(--container-max-header);
	min-height: var(--header-min-h);
	margin-inline: auto;
	padding: var(--header-pad-y) var(--header-pad-x);
}

.site-branding {
	display: flex;
	align-items: center;
}

.site-branding img,
.custom-logo {
	width: auto;
	max-height: 56px;
}

.site-title {
	font-family: var(--font-display);
	font-size: 24px;
	font-weight: 600;
	color: var(--ca-secondary);
	text-decoration: none;
}

.site-title:hover,
.site-title:focus {
	color: var(--ca-primary);
	text-decoration: none;
}

/* Primary navigation. */
.primary-nav__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--nav-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.primary-nav__list li {
	margin: 0;
}

.primary-nav__list a {
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 500;
	color: var(--ca-text-dark);
	text-decoration: none;
}

.primary-nav__list a:hover,
.primary-nav__list a:focus,
.primary-nav__list .current-menu-item > a,
.primary-nav__list .current_page_item > a {
	color: var(--ca-primary);
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
   Page chrome (generic — Phase 3 skeleton)
   --------------------------------------------------------------------------- */
.page-hero {
	padding: 48px 0;
	background: var(--ca-secondary);
	text-align: center;
}

.page-hero__title {
	margin: 0;
	color: var(--ca-white);
}

.page-hero__title a {
	color: inherit;
}

/* Home hero — gradient variant + larger display type (Phase 5 builds it out). */
.page-hero--home {
	background: var(--ca-hero-gradient);
}

.page-hero--home .page-hero__title {
	font-size: clamp(32px, 6vw, var(--fs-display-1));
}

.page-content {
	padding: 48px 0;
	color: var(--ca-text);
}

/* Long-form / legal-doc readability defaults. */
.page-content h2,
.page-content h3,
.page-content h4 {
	margin-top: 1.6em;
}

.page-content a {
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Legal documents (rendered from legal/<slug>.md via Parsedown)
   Narrower measure for readability; teal ruled section headings; sans-serif
   headings per the type tokens (the global heading font is the display serif).
   --------------------------------------------------------------------------- */
.page-content--legal .container {
	max-width: 820px;
}

.page-content--legal h2,
.page-content--legal h3 {
	font-family: var(--font-body);
}

.page-content--legal h2 {
	margin-top: 2.2em;
	padding-bottom: 0.35em;
	color: var(--ca-primary);
	font-size: clamp(24px, 3vw, var(--fs-h3));
	border-bottom: 1px solid var(--ca-border);
}

.page-content--legal h3 {
	margin-top: 1.6em;
	color: var(--ca-text-dark);
	font-size: var(--fs-h4);
}

/* "Last Updated …" intro line: subtle, uniform gray. */
.page-content--legal > .container > p:first-child {
	margin-bottom: 2em;
	color: var(--ca-text);
	font-size: var(--fs-small);
}

.page-content--legal > .container > p:first-child strong {
	color: inherit;
}

.page-links {
	margin-top: 1.5em;
	font-weight: 600;
}

.no-results {
	padding: 64px 0;
	text-align: center;
}

/* ---------------------------------------------------------------------------
   Footer legal-link bar
   (rebuilt natively from the old Elementor "footer compliance" row)
   --------------------------------------------------------------------------- */
.site-footer {
	background-color: var(--ca-legal-bg);
}

.legal-bar {
	padding: 30px 20px;
}

.legal-bar__links {
	max-width: var(--container-max);
	margin-inline: auto;
	text-align: center;
	line-height: 2;
}

.legal-bar__links a {
	font-size: var(--fs-small);
	color: var(--ca-legal-link);
	text-decoration: none;
	white-space: nowrap;
}

.legal-bar__links a:hover,
.legal-bar__links a:focus {
	color: var(--ca-white);
	text-decoration: underline;
}

/* Separators are generated, so the link markup stays pure content: adding or
   removing a legal link never leaves a stray pipe to hand-manage. */
.legal-bar__links a + a::before {
	content: "|";
	margin: 0 12px;
	color: var(--ca-legal-link);
	opacity: 0.5;
}

.legal-bar__copyright {
	max-width: var(--container-max);
	margin: 12px auto 0;
	text-align: center;
	font-size: var(--fs-small);
	color: var(--ca-legal-link);
}

/* ---------------------------------------------------------------------------
   Header CTA (phone) — sits after the nav on every page
   --------------------------------------------------------------------------- */
.site-header__cta {
	white-space: nowrap;
}

/* ===========================================================================
   HOME PAGE (front-page.php)
   Component rules are mobile-first; the two desktop breakpoints for the home
   layout are co-located at the end of this block so the page stays self-
   contained. Mirrors the Phase 1 home screenshots.
   =========================================================================== */

/* Eyebrow label on a dark surface uses the lifted teal so it clears contrast. */
.section-label--on-dark {
	color: var(--ca-teal-on-dark);
}

/* Generic content section rhythm. */
.section {
	padding: 56px 0;
}

.section__head {
	max-width: 720px;
	margin: 0 auto 40px;
	text-align: center;
}

.section__title {
	margin: 0.3em 0 0.4em;
}

.section__lead {
	color: var(--ca-text);
	font-size: var(--fs-body-lg);
}

/* Hero ---------------------------------------------------------------------- */
.home-hero {
	background: var(--ca-hero-gradient);
	color: var(--ca-white);
	padding: 64px 0;
}

.home-hero__inner {
	display: grid;
	gap: 40px;
}

.home-hero__title {
	margin: 0.25em 0 0.4em;
	color: var(--ca-white);
	font-size: clamp(32px, 6vw, var(--fs-display-1));
}

.home-hero__lead {
	max-width: 560px;
	color: rgba(255, 255, 255, 0.82);
	font-size: var(--fs-body-lg);
}

.home-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 28px;
}

/* Filing-window card (hero, right column). */
.filing-card {
	align-self: center;
	padding: 28px 32px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: var(--radius-card);
}

.filing-card__label {
	display: block;
	font-size: var(--fs-section-label);
	font-weight: 600;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--ca-teal-on-dark);
}

.filing-card__status {
	margin: 10px 0 16px;
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	font-weight: 500;
	color: var(--ca-white);
}

.filing-card__link {
	font-weight: 600;
	color: var(--ca-white);
}

.filing-card__link:hover,
.filing-card__link:focus {
	color: var(--ca-primary);
	text-decoration: none;
}

/* Trust bar ----------------------------------------------------------------- */
.trust-bar {
	background: var(--ca-bg-light);
	border-bottom: 1px solid var(--ca-border);
	padding: 28px 0;
}

.trust-bar__inner {
	display: flex;
	flex-direction: column;
	gap: 20px;
	text-align: center;
}

.trust-bar__label {
	display: block;
	font-size: var(--fs-section-label);
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--ca-primary);
}

.trust-bar__value {
	display: block;
	margin-top: 4px;
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	color: var(--ca-secondary);
}

/* Feature grid (Why Choose Us) ---------------------------------------------- */
.feature-grid {
	display: grid;
	gap: 24px;
}

.feature-card {
	padding: 32px;
	background: var(--ca-white);
	border: 1px solid var(--ca-border);
	border-radius: var(--radius-card);
}

.feature-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 18px;
	color: var(--ca-primary);
	background: rgba(0, 153, 184, 0.1);
	border-radius: var(--radius-card);
}

.feature-card__icon svg {
	width: 26px;
	height: 26px;
}

.feature-card__title {
	margin: 0 0 0.5em;
	font-size: var(--fs-h4);
}

.feature-card__body {
	margin: 0;
	color: var(--ca-text);
}

/* Two-column split (Budget Relief, Maximize) -------------------------------- */
.budget-relief {
	background: var(--ca-white);
}

.maximize {
	background: var(--ca-bg-light);
}

.split {
	display: grid;
	gap: 32px;
	align-items: center;
}

.split__main > .section-label {
	margin-bottom: 0.4em;
}

/* Dark "Why It Matters" note card. */
.note-card {
	padding: 36px;
	background: var(--ca-secondary);
	border-radius: var(--radius-card);
}

.note-card__label {
	display: block;
	font-size: var(--fs-section-label);
	font-weight: 600;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--ca-teal-on-dark);
}

.note-card__headline {
	margin: 14px 0 0;
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	font-weight: 500;
	line-height: var(--lh-heading);
	color: var(--ca-white);
}

/* Program Highlights card. */
.highlights-card {
	padding: 32px;
	background: var(--ca-white);
	border: 1px solid var(--ca-border);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
}

.highlights-card__label {
	display: block;
	margin-bottom: 8px;
	font-size: var(--fs-section-label);
	font-weight: 600;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--ca-primary);
}

.highlights-card__list {
	margin: 0;
}

.highlights-card__row {
	padding: 16px 0;
	border-bottom: 1px solid var(--ca-border);
}

.highlights-card__row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.highlights-card__row dt {
	font-size: var(--fs-small);
	color: var(--ca-text);
}

.highlights-card__row dd {
	margin: 4px 0 0;
	font-weight: 600;
	color: var(--ca-text-dark);
}

/* CTA band ------------------------------------------------------------------ */
.cta-band {
	background: var(--ca-secondary);
	color: var(--ca-white);
	padding: 64px 0;
	text-align: center;
}

.cta-band__title {
	margin: 0 0 0.4em;
	color: var(--ca-white);
}

.cta-band__lead {
	max-width: 560px;
	margin: 0 auto 28px;
	color: rgba(255, 255, 255, 0.82);
	font-size: var(--fs-body-lg);
}

.cta-band__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}

@media (min-width: 768px) {
	.trust-bar__inner {
		flex-direction: row;
		justify-content: space-around;
	}

	.feature-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1025px) {
	.home-hero {
		padding: 88px 0;
	}

	.home-hero__inner {
		grid-template-columns: 1.4fr 1fr;
		align-items: center;
		gap: 56px;
	}

	.split {
		grid-template-columns: 1fr 1fr;
		gap: 56px;
	}

	.section {
		padding: 80px 0;
	}
}

/* ===========================================================================
   SUBPAGE COMPONENTS (programs, and reused by later marketing pages)
   =========================================================================== */

/* Centered dark hero shared by interior pages. */
.subpage-hero {
	background: var(--ca-hero-gradient);
	color: var(--ca-white);
	padding: 64px 0;
	text-align: center;
}

.subpage-hero__title {
	margin: 0.3em 0 0.4em;
	color: var(--ca-white);
}

.subpage-hero__lead {
	max-width: 620px;
	margin-inline: auto;
	color: rgba(255, 255, 255, 0.82);
	font-size: var(--fs-body-lg);
}

.subpage-hero__lead a {
	color: var(--ca-white);
	text-decoration: underline;
}

/* Program comparison cards. */
.program-cards {
	display: grid;
	gap: 24px;
}

.program-card {
	padding: 36px;
	background: var(--ca-bg-lighter);
	border: 1px solid var(--ca-border);
	border-radius: var(--radius-card);
}

.program-card--primary {
	background: var(--ca-secondary);
	border-color: transparent;
	color: rgba(255, 255, 255, 0.85);
}

.program-card__badge {
	display: inline-block;
	padding: 5px 12px;
	margin-bottom: 16px;
	font-size: var(--fs-section-label);
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--ca-accent);
	background: rgba(0, 122, 148, 0.14);
	border-radius: var(--radius);
}

.program-card--primary .program-card__badge {
	color: var(--ca-white);
	background: rgba(0, 153, 184, 0.4);
}

.program-card__title {
	margin: 0 0 0.4em;
	font-size: var(--fs-h4);
}

.program-card--primary .program-card__title {
	color: var(--ca-white);
}

.program-card__desc {
	margin: 0;
}

.program-card__sublabel {
	display: block;
	margin: 24px 0 8px;
	font-size: var(--fs-section-label);
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--ca-primary);
}

.program-card--primary .program-card__sublabel {
	color: var(--ca-teal-on-dark);
}

.program-card__note {
	margin: 0;
}

.program-card__list {
	margin: 0;
	padding-left: 1.2em;
}

.program-card--primary strong {
	color: var(--ca-white);
}

.program-card__link {
	display: inline-block;
	margin-top: 22px;
	font-weight: 600;
}

.program-card--primary .program-card__link {
	color: var(--ca-white);
}

.program-card--primary .program-card__link:hover,
.program-card--primary .program-card__link:focus {
	color: var(--ca-primary);
	text-decoration: none;
}

/* Borderless heading+body grid (e.g. "Why We Specialize"). */
.simple-grid {
	display: grid;
	gap: 28px 40px;
}

.simple-grid__item h3 {
	margin: 0 0 0.4em;
	font-size: var(--fs-h4);
}

.simple-grid__item p {
	margin: 0;
	color: var(--ca-text);
}

/* Numbered process steps. */
.steps {
	display: grid;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.step {
	margin: 0;
	padding: 32px;
	background: var(--ca-white);
	border: 1px solid var(--ca-border);
	border-radius: var(--radius-card);
}

.step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-bottom: 16px;
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--ca-primary);
	background: rgba(0, 153, 184, 0.1);
	border-radius: 50%;
}

.step__title {
	margin: 0 0 0.4em;
	font-size: var(--fs-h4);
}

.step__body {
	margin: 0;
	color: var(--ca-text);
}

/* Filing-window band (centered). */
.filing-band-section {
	background: var(--ca-white);
}

.filing-band {
	max-width: 720px;
	margin-inline: auto;
	text-align: center;
}

.filing-band__headline {
	margin: 12px 0 22px;
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	font-weight: 500;
	color: var(--ca-secondary);
}

.filing-band__detail {
	display: grid;
	gap: 16px;
	margin: 0 0 28px;
}

.filing-band__detail dt {
	font-size: var(--fs-section-label);
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--ca-text);
}

.filing-band__detail dd {
	margin: 4px 0 0;
	font-weight: 600;
	color: var(--ca-text-dark);
}

@media (min-width: 768px) {
	.program-cards,
	.simple-grid,
	.steps,
	.filing-band__detail {
		grid-template-columns: 1fr 1fr;
	}
}

/* ===========================================================================
   CONTACT PAGE (page-contact.php)
   =========================================================================== */
.contact-cards {
	display: grid;
	gap: 24px;
}

.contact-card {
	padding: 36px 28px;
	text-align: center;
	background: var(--ca-bg-lighter);
	border: 1px solid var(--ca-border);
	border-radius: var(--radius-card);
}

.contact-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 18px;
	color: var(--ca-primary);
	background: rgba(0, 153, 184, 0.1);
	border-radius: 50%;
}

.contact-card__icon svg {
	width: 26px;
	height: 26px;
}

.contact-card__title {
	margin: 0 0 0.4em;
	font-size: var(--fs-h4);
}

.contact-card__value {
	display: inline-block;
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 600;
	color: var(--ca-primary);
}

a.contact-card__value:hover,
a.contact-card__value:focus {
	color: var(--ca-accent);
	text-decoration: none;
}

.contact-card__value--text {
	color: var(--ca-secondary);
}

.contact-card__sub {
	margin: 10px 0 0;
	font-size: var(--fs-small);
	color: var(--ca-text);
}

/* SMS opt-in disclosure panel (10DLC). */
.disclosure {
	max-width: 820px;
	margin-inline: auto;
	padding: 36px;
	background: var(--ca-white);
	border: 1px solid var(--ca-border);
	border-radius: var(--radius-card);
}

.disclosure__title {
	margin: 0.3em 0 0.5em;
	font-size: var(--fs-h3);
}

.disclosure__lead {
	color: var(--ca-text);
}

.disclosure__list {
	margin: 1.2em 0 0;
	padding-left: 1.2em;
}

.disclosure__list li {
	margin-bottom: 0.6em;
	color: var(--ca-text);
}

.disclosure__more {
	margin-top: 1.4em;
}

.authorized-band__text {
	color: var(--ca-text);
	font-size: var(--fs-body-lg);
}

@media (min-width: 768px) {
	.contact-cards {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ===========================================================================
   TELECOM-SWITCH PAGE (page-telecom-switch.php)
   Lead-gen landing page. Reuses subpage-hero, section, steps and the maximize
   light surface; adds the HCF-vs-Telecom comparison table, the Budget Relief
   dark band, the lead-form placeholder (real form ports in Phase 6) and the
   trust band.
   =========================================================================== */

/* Hero CTA button sits below the lead. */
.subpage-hero__actions {
	margin-top: 28px;
}

/* Centered prose measure (intro copy). */
.measure-center {
	max-width: 720px;
	margin-inline: auto;
	text-align: center;
	color: var(--ca-text);
	font-size: var(--fs-body-lg);
}

/* HCF vs. Telecom comparison table. Horizontal-scroll wrapper keeps the three
   columns intact on narrow viewports rather than crushing the cells. */
.compare-table__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.compare-table {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
	background: var(--ca-white);
	border: 1px solid var(--ca-border);
	border-radius: var(--radius-card);
	overflow: hidden;
}

.compare-table th,
.compare-table td {
	padding: 16px 20px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--ca-border);
}

.compare-table thead th {
	font-family: var(--font-body);
	font-size: var(--fs-small);
	font-weight: 600;
	letter-spacing: 0.5px;
	color: var(--ca-white);
	background: var(--ca-secondary);
}

.compare-table thead th:first-child {
	background: var(--ca-white);
}

.compare-table thead th.compare-table__telecom {
	background: var(--ca-primary);
}

.compare-table tbody th {
	font-family: var(--font-body);
	font-size: var(--fs-small);
	font-weight: 600;
	color: var(--ca-text-dark);
	background: var(--ca-bg-lighter);
}

.compare-table tbody td {
	color: var(--ca-text);
}

.compare-table td.compare-table__telecom {
	font-weight: 600;
	color: var(--ca-primary);
}

.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td {
	border-bottom: 0;
}

/* Budget Relief dark band. */
.budget-band {
	padding: 64px 0;
	background: var(--ca-secondary);
	color: rgba(255, 255, 255, 0.82);
	text-align: center;
}

.budget-band__title {
	margin: 0.3em 0 0.4em;
	color: var(--ca-white);
	font-size: var(--fs-h3);
}

.budget-band__lead {
	max-width: 720px;
	margin-inline: auto;
	font-size: var(--fs-body-lg);
}

/* Lead assessment form — the live HCF form rebuilt in the theme design system.
   Submits to the server-side REST proxy (inc/lead-form.php); see also
   assets/lead-form.js. */
.lead-form-wrap {
	max-width: 720px;
	margin-inline: auto;
}

.lead-form {
	padding: 36px 32px;
	background: var(--ca-white);
	border: 1px solid var(--ca-border);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
}

.lead-form__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.lead-form__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.lead-form__field--full {
	grid-column: 1 / -1;
}

/* The conditional "Which program?" field toggles via the [hidden] attribute.
   .lead-form__field sets display:flex, which would otherwise defeat [hidden]'s
   UA display:none — this attribute selector (higher specificity) restores it. */
.lead-form__field[hidden] {
	display: none;
}

.lead-form label,
.lead-form legend {
	padding: 0;
	font-size: var(--fs-small);
	font-weight: 600;
	color: var(--ca-text-dark);
}

.lead-form__req {
	color: #d00;
}

.lead-form input[type="text"],
.lead-form input[type="email"],
.lead-form input[type="tel"],
.lead-form input[type="date"],
.lead-form select {
	width: 100%;
	padding: 11px 13px;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	color: var(--ca-text-dark);
	background: var(--ca-white);
	border: 1px solid var(--ca-border);
	border-radius: var(--radius);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lead-form input:focus,
.lead-form select:focus {
	border-color: var(--ca-primary);
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 153, 184, 0.15);
}

.lead-form__checks {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
	margin-top: 4px;
}

.lead-form__check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--fs-body);
	font-weight: 400;
	color: var(--ca-text);
}

.lead-form__check input {
	width: 17px;
	height: 17px;
	accent-color: var(--ca-primary);
}

.lead-form__submit {
	width: 100%;
	margin-top: 24px;
}

.lead-form__fineprint {
	margin: 12px 0 0;
	font-size: var(--fs-small);
	color: var(--ca-text);
	text-align: center;
}

.lead-form__error {
	margin: 0 0 16px;
	padding: 12px 14px;
	font-size: var(--fs-small);
	color: #8a1c1c;
	background: #fdecec;
	border: 1px solid #f5c2c2;
	border-radius: var(--radius);
}

.lead-form__error:empty {
	display: none;
}

.lead-form__success {
	max-width: 720px;
	margin-inline: auto;
	padding: 48px 32px;
	text-align: center;
	background: var(--ca-bg-lighter);
	border: 1px solid var(--ca-border);
	border-radius: var(--radius-card);
}

.lead-form__success h3 {
	color: var(--ca-primary);
}

.lead-form__success p {
	margin: 0;
	font-size: var(--fs-body-lg);
	color: var(--ca-text);
}

/* Honeypot — kept in the DOM for bots, removed from sight + a11y tree + tab order. */
.lead-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.lead-form__note {
	max-width: 560px;
	margin-inline: auto;
	color: var(--ca-text);
	text-align: center;
}

@media (max-width: 600px) {
	.lead-form {
		padding: 28px 20px;
	}

	.lead-form__grid {
		grid-template-columns: 1fr;
	}
}

/* Trust band (authorized provider / U.S. support / done right). */
.trust-band__grid {
	display: grid;
	gap: 32px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
	text-align: center;
}

.trust-band__item {
	margin: 0;
}

.trust-band__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 16px;
	color: var(--ca-primary);
	background: rgba(0, 153, 184, 0.1);
	border-radius: 50%;
}

.trust-band__icon svg {
	width: 26px;
	height: 26px;
}

.trust-band__title {
	margin: 0;
	font-size: var(--fs-h4);
}

.trust-band__note {
	text-align: center;
	font-size: var(--fs-body-lg);
	color: var(--ca-text);
}

@media (min-width: 768px) {
	.steps--3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.trust-band__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ---------------------------------------------------------------------------
   Breakpoints — tablet (768px) and desktop (1025px)
   Mirrors Elementor kit: viewport_md 768, viewport_lg 1025.
   --------------------------------------------------------------------------- */
@media (min-width: 768px) {
	.page-hero {
		padding: 64px 0;
	}

	.page-content {
		padding: 64px 0;
	}
}

@media (min-width: 1025px) {
	:root {
		--header-pad-x: 60px;
		--nav-gap: 50px;
	}

	/* Logo left, nav right — the desktop masthead layout. */
	.site-header__inner {
		flex-direction: row;
		justify-content: space-between;
		gap: 40px;
	}

	.primary-nav__list {
		justify-content: flex-end;
	}

	.page-hero {
		padding: 80px 0;
	}
}

/* ===========================================================================
   SUPPORT PAGE (page-support.php)
   System-status list + the "report an issue" coming-soon panel. Reuses the
   subpage-hero, contact-card grid and section components for everything else.
   =========================================================================== */
.support-status {
	max-width: 720px;
	margin-inline: auto;
}

.support-status__list {
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--ca-white);
	border: 1px solid var(--ca-border);
	border-radius: var(--radius-card);
	overflow: hidden;
}

.support-status__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--ca-border);
}

.support-status__row:last-child {
	border-bottom: 0;
}

.support-status__name {
	font-weight: 600;
	color: var(--ca-text-dark);
}

.support-status__pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 4px 12px;
	font-size: var(--fs-small);
	font-weight: 600;
	color: #1a6b3f;
	background: #e6f4ec;
	border-radius: 999px;
}

.support-status__pill::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #1a8f4f;
}

.support-status__updated {
	margin: 16px 0 0;
	font-size: var(--fs-small);
	color: var(--ca-text);
	text-align: center;
}

/* "Report an issue" placeholder panel — the outage form is not built yet, so
   this keeps a working phone fallback for the support path. */
.coming-soon {
	max-width: 560px;
	margin-inline: auto;
	padding: 40px 32px;
	text-align: center;
	background: var(--ca-bg-lighter);
	border: 1px dashed var(--ca-border);
	border-radius: var(--radius-card);
}

.coming-soon__icon {
	display: inline-flex;
	color: var(--ca-primary);
}

.coming-soon__icon svg {
	width: 36px;
	height: 36px;
}

.coming-soon__title {
	margin: 12px 0 8px;
	font-size: var(--fs-h4);
}

.coming-soon__note {
	margin: 0 0 16px;
	color: var(--ca-text);
}

.coming-soon__fallback {
	margin: 0;
	font-weight: 600;
	color: var(--ca-text-dark);
}

/* ---------------------------------------------------------------------------
   Reduced motion
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}