/**
 * Business Pro visual redesign -- page-scoped override stylesheet.
 *
 * Ships ONLY via wp_enqueue_style(), gated to page ID 64 in
 * includes/business-pro-ux.php. Never touches Elementor's stored
 * _elementor_data, post_content, WordPress core, or the database --
 * this is pure additive CSS layered on top of the existing markup.
 *
 * WHY THIS FILE WORKS THE WAY IT DOES
 * ------------------------------------
 * The live page already carries an extensive hand-authored CSS system
 * (pasted into an Elementor "HTML" widget, class "bp-css") built around
 * a `.bp-root { --bp-paper:...; --bp-ink:...; --bp-green:...; ... }`
 * scope and ~55 `bp-*` helper classes. Investigation of the rendered
 * DOM (Sept 2026) found that the `.bp-root` wrapper class is no longer
 * applied to any element on the page -- so every rule in that block
 * that reads a `--bp-*` custom property (e.g. `color:var(--bp-ink)`)
 * currently resolves to nothing and is silently inert, while ~30 of
 * the 55 `bp-*` classes (mostly structural wrappers: bp-hero, bp-shell,
 * bp-section--deep, bp-compare, bp-pillar-grid, bp-footer, etc.) are no
 * longer present on any element at all. Only the "leaf" content classes
 * (bp-kicker, bp-title, bp-hero-title, bp-lede, bp-intro, bp-tag,
 * bp-number, bp-keep, bp-demo, bp-preview-card, bp-dash-*, bp-bars,
 * bp-qr-code, bp-eco-arrow, bp-path-copy, bp-pillar-copy, bp-nav,
 * bp-button) are still live on real widgets scattered through the page.
 *
 * That means the single highest-leverage, lowest-risk fix is to define
 * the `--bp-*` custom properties ourselves (below) at the `.elementor-64`
 * level, which instantly "switches on" every one of those already-live
 * rules with OUR palette -- no markup changes, no fighting Elementor's
 * generated CSS, nothing but a properties definition. Everything below
 * that isn't reachable through a variable (hardcoded pastel hex codes,
 * Elementor's own default "info" button skin, dead-class sections that
 * need a real background) is patched explicitly, keyed to the specific
 * Elementor container IDs confirmed live on the page.
 *
 * SECTION ID MAP (confirmed against the live DOM, stable unless the
 * page is re-edited in Elementor -- same assumption already relied on
 * by the str_replace anchors in business-pro-ux.php):
 *   bb3ceded  header / nav
 *   7184812f  hero (pilot intro + kicker/H1/lede/keep-note + stats strip)
 *   1fc3e9fa  Business Pro intro + Free vs Pro comparison
 *   e4a806b4  Two Business Paths
 *   5060b0ee  One Local Business Ecosystem (diagram)
 *   fca1e99d  Business Pro Toolkit (grid)
 *   1e59c2ec  Trace QR
 *   38249d91  Illustrative product preview (dashboard)
 *   b4e68c01  Product Principles
 *   410066a0  Request Business Pro (form)
 *   321e6744  footer
 */

/* ---------------------------------------------------------------------
   1. Design tokens -- one navy + one confident accent, replacing the
   mint / sky / coral / gold pastel grab-bag. Two accent weights are
   used deliberately: --bp-green (darker, "accent-strong") is what
   button backgrounds and text-on-light-paper use, because the vivid
   brand blue alone (#2E8FCB) does not clear WCAG AA (4.5:1) for normal
   text against white/paper -- verified 3.4-3.6:1. The darker shade
   clears 5.5-5.9:1. --bp-accent-light keeps the vivid blue for text
   and icon strokes placed directly on the new navy sections, where it
   clears 4.86:1.
   --------------------------------------------------------------------- */
.elementor-64 {
	--bp-navy: #0F1B2E;
	--bp-navy-2: #16263F;
	--bp-accent-light: #2E8FCB;   /* on navy: text/icons/kickers */
	--bp-paper-2: #F3F1EC;        /* neutral tint, replaces mint/sky/gold tints */
	--bp-line-navy: rgba(255, 255, 255, 0.14);

	/* Re-arm the page's own (previously inert) variable system. */
	--bp-paper: #FBFAF8;
	--bp-ink: #101828;
	--bp-green: #236A98;          /* accent-strong: AA-safe on paper/white */
	--bp-mint: var(--bp-paper-2);
	--bp-sky: var(--bp-paper-2);
	--bp-coral: #236A98;
	--bp-gold: var(--bp-paper-2);
	--bp-line: #E4E1D9;
	--bp-muted: #4B5768;
}

/* ---------------------------------------------------------------------
   2. Typography -- Sora for headings, IBM Plex Sans for body, loaded
   via a separate wp_enqueue_style() Google Fonts link (see PHP).
   --------------------------------------------------------------------- */
.elementor-64 .elementor-heading-title,
.elementor-64 .bp-hero-title,
.elementor-64 .bp-title {
	font-family: 'Sora', Manrope, Inter, Arial, sans-serif !important;
	font-weight: 700 !important;
}

.elementor-64,
.elementor-64 p,
.elementor-64 li,
.elementor-64 .elementor-widget-text-editor,
.elementor-64 input,
.elementor-64 select,
.elementor-64 textarea,
.elementor-64 button,
.elementor-64 .elementor-button,
.elementor-64 .elementor-field-label {
	font-family: 'IBM Plex Sans', Manrope, Inter, Arial, sans-serif;
}

/* ---------------------------------------------------------------------
   3. Hardcoded pastel accents that don't route through a variable --
   flatten to the neutral paper-2 tint or the new accent so nothing
   clashes against the navy + single-accent system.
   --------------------------------------------------------------------- */

/* "Already have a website? Keep it." note -- was a peach/pink box. */
.elementor-64 .bp-keep {
	background: var(--bp-paper-2) !important;
	color: var(--bp-ink) !important;
	border-left-color: var(--bp-green) !important;
}

/* "ILLUSTRATIVE ONLY" badge -- was gold. */
.elementor-64 .bp-demo {
	background: rgba(35, 106, 152, 0.12) !important;
	color: var(--bp-green) !important;
}

/* Illustrative stats strip cards -- were mint / sky / gold pastels. */
.elementor-64 .bp-preview-card,
.elementor-64 .bp-preview-card:nth-child(2),
.elementor-64 .bp-preview-card:nth-child(3),
.elementor-64 .bp-preview-card:nth-child(4) {
	background: #FFFFFF !important;
	border: 1px solid var(--bp-line) !important;
}
.elementor-64 .bp-preview-card strong {
	color: var(--bp-navy) !important;
}

/* Section eyebrow tags ("FREE LOCAL PRESENCE" / "BUSINESS PRO") --
   were a flat mint pill. */
.elementor-64 .bp-tag {
	background: rgba(35, 106, 152, 0.1) !important;
	color: var(--bp-green) !important;
}

/* Dashboard-preview side panel -- was a mint tint. */
.elementor-64 .bp-dash-side {
	background: var(--bp-paper-2) !important;
}
.elementor-64 .bp-dash-side p {
	border-bottom-color: var(--bp-line) !important;
}

/* Dashboard bar chart -- was a mint-to-green gradient. */
.elementor-64 .bp-bars i {
	background: linear-gradient(#7fb8e0, var(--bp-green)) !important;
}

/* Trace QR decorative dot grid -- was mint dots. */
.elementor-64 .bp-qr-code i {
	background: #9CC7E3 !important;
}

/* Ecosystem-diagram arrow connectors -- was a mint green. */
.elementor-64 .bp-eco-arrow {
	color: var(--bp-accent-light) !important;
}

/* ---------------------------------------------------------------------
   4. Buttons -- Elementor's default "info" skin (a light blue,
   #5BC0DE) is applied sitewide via the theme's global button style and
   is the single biggest source of "pills that don't match anything."
   Unify every button on this page to the new accent, including the
   native Elementor Forms submit button (previously a separate bright
   green, #61CE70). White-on-accent-strong clears 5.9:1 (AA).
   --------------------------------------------------------------------- */
.elementor-64 a.elementor-button-info,
.elementor-64 .elementor-button-info .elementor-button,
.elementor-64 button.elementor-button-info,
.elementor-64 form.elementor-form .elementor-button,
.elementor-64 form.elementor-form button.elementor-button {
	background: var(--bp-green) !important;
	border-color: var(--bp-green) !important;
	color: #FFFFFF !important;
	transition: background-color 0.15s ease;
}
.elementor-64 a.elementor-button-info:hover,
.elementor-64 .elementor-button-info .elementor-button:hover,
.elementor-64 button.elementor-button-info:hover,
.elementor-64 form.elementor-form .elementor-button:hover {
	background: var(--bp-navy) !important;
	border-color: var(--bp-navy) !important;
}

.elementor-64 .bp-form-wrap input,
.elementor-64 .bp-form-wrap select,
.elementor-64 .bp-form-wrap textarea,
.elementor-64 form.elementor-form input,
.elementor-64 form.elementor-form select,
.elementor-64 form.elementor-form textarea {
	border-color: var(--bp-line) !important;
}

/* ---------------------------------------------------------------------
   5. Dark-navy section treatment -- hero, the ecosystem diagram, and
   the footer. Everything else on the page stays on the light paper
   background from the token block above, per the approved mockup
   ("dark navy + a single confident accent... generous whitespace").
   Scoped with the section's own Elementor element class for enough
   specificity to beat the page's own !important heading-color rules
   (each adds one more class selector on top of the original chain).
   --------------------------------------------------------------------- */

/* --- Hero (7184812f) --- */
.elementor-element-7184812f {
	background: linear-gradient(160deg, var(--bp-navy) 0%, var(--bp-navy-2) 100%) !important;
}
.elementor-element-7184812f .bp-kicker,
.elementor-element-7184812f .bp-hero-title .elementor-heading-title,
.elementor-element-7184812f h1,
.elementor-element-7184812f h2 {
	color: #FFFFFF !important;
}
.elementor-element-7184812f .bp-kicker {
	color: var(--bp-accent-light) !important;
}
.elementor-element-7184812f .bp-lede,
.elementor-element-7184812f p {
	color: rgba(255, 255, 255, 0.72);
}
.elementor-element-7184812f .bp-keep {
	background: rgba(255, 255, 255, 0.07) !important;
	color: rgba(255, 255, 255, 0.85) !important;
	border-left-color: var(--bp-accent-light) !important;
}
.elementor-element-7184812f .bp-preview-top {
	color: rgba(255, 255, 255, 0.55);
}
/* the injected pilot-era hero block (argus-pilot-hero) is restyled
   directly in PHP -- see argus_pilot_top_hero_html() -- since its
   colors are inline styles that would otherwise need !important
   fights here for no benefit. */

/* --- Ecosystem diagram (5060b0ee) --- */
.elementor-element-5060b0ee {
	background: linear-gradient(160deg, var(--bp-navy) 0%, var(--bp-navy-2) 100%) !important;
}
.elementor-element-5060b0ee .bp-kicker,
.elementor-element-5060b0ee .bp-title .elementor-heading-title,
.elementor-element-5060b0ee h2,
.elementor-element-5060b0ee h3 {
	color: #FFFFFF !important;
}
.elementor-element-5060b0ee .bp-kicker {
	color: var(--bp-accent-light) !important;
}
.elementor-element-5060b0ee .bp-intro,
.elementor-element-5060b0ee p {
	color: rgba(255, 255, 255, 0.72);
}

/* --- Footer (321e6744) --- */
.elementor-element-321e6744 {
	background: var(--bp-navy) !important;
	color: rgba(255, 255, 255, 0.75);
}
.elementor-element-321e6744 p,
.elementor-element-321e6744 span,
.elementor-element-321e6744 div {
	color: rgba(255, 255, 255, 0.75);
}
.elementor-element-321e6744 a {
	color: var(--bp-accent-light);
}
.elementor-element-321e6744 .elementor-widget-image img {
	filter: brightness(0) invert(1);
	opacity: 0.92;
}

/* ---------------------------------------------------------------------
   6. Light-section polish -- comparison / pro card, section tint,
   ecosystem-node text living outside the dark scope, etc.
   --------------------------------------------------------------------- */
.elementor-element-1fc3e9fa .bp-tag {
	letter-spacing: 0.08em;
}

/* ---------------------------------------------------------------------
   7. Mobile -- Elementor's own responsive settings already control
   layout/stacking; this just keeps the new hero/keep-note readable at
   narrow widths, matching the approved mockup's mobile pass.
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
	.elementor-element-7184812f .bp-hero-title .elementor-heading-title {
		font-size: clamp(34px, 9vw, 46px) !important;
	}
	.elementor-64 .bp-preview-grid {
		grid-template-columns: 1fr 1fr !important;
	}
}