/* =========================================
   Shingle RX NC Theme — theme.css v2
   Brand-accurate. Bold. Loud. Contractor-native.
   Royal blue, vivid yellow, tomato red.
   ========================================= */

/* -- Self-hosted Inter (variable, latin subset) — v3.72.0.
   Replaces the render-blocking Google Fonts third-party. The single
   variable woff2 covers the full 100–900 weight axis the theme uses,
   so every existing font-weight (400–900) maps onto one request.
   font-display: swap preserves the prior no-FOIT behavior. -- */
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-var-latin.woff2") format("woff2");
}

/* -- Brand tokens pulled straight from the logo/trucks -- */
:root {
	/* Core brand */
	--srx-blue: #1B3A9C;           /* Royal blue from bucket/logo ring */
	--srx-blue-dark: #0F2772;      /* Darker shade for hover/shadows */
	--srx-blue-deep: #081847;      /* Near-black blue for dark sections */
	--srx-yellow: #FFD60A;         /* Vivid logo yellow */
	--srx-yellow-dark: #F5C500;    /* Button hover */
	--srx-red: #E32B2E;            /* Logo oval red / accent */
	--srx-red-ink: #B31A1E;        /* v3.82.0 — accessible red for TEXT on light/yellow bg (>=4.5:1) */
	--srx-red-dark: #C11F22;

	/* Supporting neutrals */
	--srx-ink: #0B1220;            /* Heading color — near-black navy */
	--srx-navy: #0B1220;           /* Dashboard navy panels (v3.33.0 fix: was referenced but never defined) */
	--srx-text: #1f2a3a;
	--srx-text-muted: #5a6b7d;
	--srx-text-light: #657280; /* v3.75.0 — was #8b99a8 (2.9:1, failed WCAG AA); now 4.9:1 on white, still lighter than --srx-text-muted */
	--srx-bg: #ffffff;
	--srx-bg-light: #f6f8fb;
	--srx-bg-tint: #eef2f8;
	--srx-border: #e0e6ef;
	--srx-border-strong: #c3cfdd;

	/* Status */
	--srx-success: #1e9e60;
	--srx-success-bg: #e6f6ee;
	--srx-warn: #c88500;
	--srx-warn-bg: #fff5d9;
	--srx-danger: #c23b3b;
	--srx-danger-bg: #fbe6e6;

	/* System */
	--srx-shadow-sm: 0 1px 2px rgba(11, 18, 32, 0.08);
	--srx-shadow: 0 4px 14px rgba(11, 18, 32, 0.1);
	--srx-shadow-lg: 0 12px 40px rgba(11, 18, 32, 0.18);
	--srx-shadow-yellow: 0 6px 20px rgba(255, 214, 10, 0.45);
	--srx-radius: 10px;
	--srx-radius-sm: 6px;
	--srx-radius-lg: 18px;
	--srx-radius-xl: 28px;
	--srx-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--srx-font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* -- Reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--srx-font);
	font-size: 16px;
	line-height: 1.55;
	color: var(--srx-text);
	background: var(--srx-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--srx-blue); text-decoration: none; }
a:hover { color: var(--srx-blue-dark); }
button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 {
	font-family: var(--srx-font-display);
	line-height: 1.1;
	color: var(--srx-ink);
	margin: 0 0 0.5em;
	font-weight: 800;
	letter-spacing: -0.02em;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.65rem; }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* -- Layout -- */
.srx-container {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 20px;
}
.srx-container-narrow {
	max-width: 860px;
	margin: 0 auto;
	padding: 0 20px;
}
.srx-main { min-height: 50vh; }
.srx-section { padding: 56px 0; }
.srx-bg-light { background: var(--srx-bg-light); }
.srx-bg-blue { background: var(--srx-blue); color: #fff; }
.srx-bg-blue h2, .srx-bg-blue h3 { color: #fff; }
.srx-page { padding: 32px 0 64px; }
.srx-section-title {
	text-align: center;
	margin-bottom: 12px;
}
.srx-section-kicker {
	display: block;
	text-align: center;
	font-size: 0.85rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--srx-red-ink);
	margin-bottom: 10px;
}
.srx-section-intro {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 36px;
	color: var(--srx-text-muted);
	font-size: 1.05rem;
}

/* =======================
   SITE WRAP + UTILITY BAR
   ======================= */
:root {
	/*
	 * v3.237.4 — the safe-area tax.
	 *
	 * header.php sets viewport-fit=cover, which asks iOS to draw the page UNDER
	 * the Dynamic Island / notch. That is the right choice for a coloured app bar
	 * — it is what makes the navy bleed to the top edge instead of sitting in a
	 * white letterbox — but it is only half a contract. The other half is paying
	 * the inset back on anything anchored to the top, and the theme paid it only
	 * at the BOTTOM: four uses of safe-area-inset-bottom, none of top.
	 *
	 * The result was a 60px app bar sitting entirely inside a 47-59px status bar
	 * region, where iOS reserves taps for scroll-to-top. The menu button was not
	 * merely clipped, it could not receive a touch at all.
	 *
	 * Routed through variables rather than inlining env() at each site so there is
	 * one definition to reason about, and so the value can be substituted in a
	 * test — env() cannot be overridden, a custom property can.
	 *
	 * Reads 0px on Android, desktop, and any browser without env(). Every calc
	 * below collapses to the pre-v3.237.4 value exactly.
	 */
	--srx-safe-top: env(safe-area-inset-top, 0px);
	--srx-safe-left: env(safe-area-inset-left, 0px);
	--srx-safe-right: env(safe-area-inset-right, 0px);
}

.srx-site-wrap {
	--srx-utility-h: 36px;
	--srx-header-h: 84px;
	--srx-header-h-shrunk: 64px;
}

.srx-utility-bar {
	background: var(--srx-ink);
	color: #fff;
	font-size: 0.82rem;
	height: var(--srx-utility-h);
	box-sizing: content-box;
	padding-top: var(--srx-safe-top);
	display: flex;
	align-items: center;
	position: sticky;
	top: 0;
	z-index: 51;
	transition: transform 0.3s ease, opacity 0.3s ease;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.srx-utility-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
}
.srx-utility-left {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.88);
}
.srx-utility-left strong { color: var(--srx-yellow); font-weight: 800; }
.srx-utility-flag {
	color: var(--srx-yellow);
	font-size: 0.9rem;
}
.srx-utility-right { display: none; }
.srx-utility-pill {
	background: var(--srx-yellow);
	color: var(--srx-ink);
	padding: 4px 12px;
	border-radius: 100px;
	font-weight: 800;
	font-size: 0.75rem;
	letter-spacing: 0.02em;
}

/* Utility bar hides on scroll down */
[data-srx-header-scroll].is-scrolled .srx-utility-bar {
	transform: translateY(-100%);
	opacity: 0;
	pointer-events: none;
}

/* =======================
   MAIN HEADER
   ======================= */
.srx-header {
	background: #fff;
	position: sticky;
	/* Sits flush under the utility bar initially; when scrolled, utility hides and this sticks to top */
	top: calc(var(--srx-utility-h) + var(--srx-safe-top));
	z-index: 50;
	box-shadow: 0 1px 0 rgba(11, 18, 32, 0.08);
	transition: top 0.3s ease, box-shadow 0.3s ease;
	border-bottom: 1px solid rgba(11, 18, 32, 0.08);
}
[data-srx-header-scroll].is-scrolled .srx-header {
	/* Utility bar has gone; this takes over the inset it was covering. */
	top: 0;
	padding-top: var(--srx-safe-top);
	box-shadow: 0 4px 20px rgba(11, 18, 32, 0.12);
}
/* Yellow accent hairline */
.srx-header::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--srx-yellow);
}
.srx-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 0 20px;
	min-height: var(--srx-header-h);
	transition: min-height 0.3s ease;
	overflow: visible;
}
[data-srx-header-scroll].is-scrolled .srx-header-inner {
	min-height: var(--srx-header-h-shrunk);
}

.srx-logo {
	display: inline-flex;
	align-items: flex-start;
	text-decoration: none;
	align-self: stretch;
	position: relative;
	z-index: 2;
}

/* =======================
   HANGING FLAG — black with white droplets
   Brand-native, matches the product bucket aesthetic.
   ======================= */
.srx-flag {
	--srx-flag-w: 150px;

	position: relative;
	display: block;
	width: var(--srx-flag-w);
	margin-top: 0;
	/* Droplet pattern on deep navy — matches Shingle RX bucket look */
	background-color: var(--srx-blue-deep);
	background-image:
		radial-gradient(circle at 25% 30%, rgba(255, 255, 255, 0.22) 0.8px, transparent 1.5px),
		radial-gradient(circle at 70% 55%, rgba(255, 255, 255, 0.18) 1.2px, transparent 2px),
		radial-gradient(circle at 40% 75%, rgba(255, 255, 255, 0.25) 1px, transparent 1.6px),
		radial-gradient(circle at 85% 20%, rgba(255, 255, 255, 0.2) 0.7px, transparent 1.3px),
		radial-gradient(circle at 15% 60%, rgba(255, 255, 255, 0.22) 1.1px, transparent 1.8px),
		radial-gradient(circle at 55% 15%, rgba(255, 255, 255, 0.16) 0.9px, transparent 1.5px),
		radial-gradient(circle at 90% 80%, rgba(255, 255, 255, 0.2) 1px, transparent 1.6px),
		radial-gradient(circle at 5% 15%, rgba(255, 255, 255, 0.15) 0.6px, transparent 1.1px);
	background-size: 18px 18px, 22px 22px, 16px 16px, 20px 20px, 24px 24px, 19px 19px, 17px 17px, 15px 15px;
	border: 2px solid var(--srx-yellow);
	border-top: 0;
	padding: 22px 12px 18px;
	box-shadow: 0 10px 24px rgba(11, 18, 32, 0.35), 0 2px 0 rgba(11, 18, 32, 0.3);
	transition: transform 0.3s ease, padding 0.3s ease;
}
/* v3.244.0 — a dealer's own logo is usually a complete sign with its own frame.
   Two nested frames fight, so the banner gives up its border and most of its
   padding and becomes a mount rather than a picture frame.

   v3.248.1 — this comment used to claim the scalloped bottom stayed. The rule
   below hides it and always has. Corrected rather than "fixed": the public
   mastheads no longer use this modifier at all (see shinglerx_masthead_flag),
   so it now only dresses the dashboard and login screens, where a frameless
   mount is right. */
.srx-flag.has-custom-logo {
	border: 0;
	padding: 20px 4px 10px;
	background-color: transparent;
	background-image: none;
	box-shadow: none;
}
.srx-flag.has-custom-logo .srx-flag-scallop { display: none; }
.srx-flag.has-custom-logo img { filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.35)); }

/* Shrink flag slightly when header is shrunk */
[data-srx-header-scroll].is-scrolled .srx-flag {
	--srx-flag-w: 115px;
	padding: 18px 10px 14px;
}

/* White grommets at the top of the flag — NOT blue dots */
.srx-flag-grommets {
	position: absolute;
	top: 6px;
	left: 14px;
	right: 14px;
	height: 10px;
	display: flex;
	justify-content: space-between;
	pointer-events: none;
	z-index: 3;
}
.srx-flag-grommet {
	display: block;
	width: 8px;
	height: 8px;
	background: #fff;
	border-radius: 50%;
	box-shadow:
		0 0 0 2px var(--srx-ink),
		inset 0 1px 1.5px rgba(11, 18, 32, 0.5);
}

.srx-flag-inner {
	display: block;
	margin-top: 4px;
	position: relative;
	z-index: 2;
}
.srx-flag img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

/* Scalloped bottom in flag blue (with yellow border edges preserved) */
.srx-flag-scallop {
	position: absolute;
	left: -2px;
	right: -2px;
	bottom: -9px;
	width: calc(100% + 4px);
	height: 11px;
	fill: var(--srx-blue-deep);
	stroke: var(--srx-yellow);
	stroke-width: 0.6;
	z-index: 1;
	filter: drop-shadow(0 6px 8px rgba(11, 18, 32, 0.28));
}

/* Hover sway */
.srx-flag { transform-origin: top center; }
.srx-logo:hover .srx-flag {
	transform: rotate(-1.5deg);
}

/* Mobile flag sizing */
@media (max-width: 719px) {
	.srx-flag {
		--srx-flag-w: 115px;
		padding: 18px 10px 14px;
	}
	[data-srx-header-scroll].is-scrolled .srx-flag {
		--srx-flag-w: 95px;
		padding: 16px 8px 12px;
	}
	.srx-flag-grommets {
		left: 10px;
		right: 10px;
	}
}

/* =======================
   NAV
   ======================= */
.srx-nav { display: none; }
.srx-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 6px;
}
.srx-nav-list a {
	display: inline-block;
	color: var(--srx-ink);
	font-weight: 700;
	font-size: 0.9rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 10px 16px;
	border-radius: var(--srx-radius-sm);
	position: relative;
	transition: color 0.15s ease, background 0.15s ease;
}
.srx-nav-list a::after {
	content: '';
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 4px;
	height: 3px;
	background: var(--srx-yellow);
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.2s ease;
}
.srx-nav-list a:hover {
	color: var(--srx-blue);
}
.srx-nav-list a:hover::after {
	transform: scaleX(1);
}
.srx-nav-list .current-menu-item a,
.srx-nav-list .current_page_item a {
	color: var(--srx-blue);
}
.srx-nav-list .current-menu-item a::after,
.srx-nav-list .current_page_item a::after {
	transform: scaleX(1);
}

/* =======================
   HEADER CTA CLUSTER
   ======================= */
.srx-header-cta {
	display: flex;
	align-items: center;
	gap: 8px;
}
.srx-header-phone {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--srx-yellow);
	color: var(--srx-ink);
	padding: 10px 14px;
	border-radius: var(--srx-radius);
	font-weight: 800;
	text-decoration: none;
	border: 2px solid var(--srx-ink);
	box-shadow: 0 3px 0 var(--srx-ink);
	transition: transform 0.08s ease, box-shadow 0.08s ease;
	font-size: 0.95rem;
}
.srx-header-phone:hover {
	background: var(--srx-yellow-dark);
	color: var(--srx-ink);
	transform: translateY(1px);
	box-shadow: 0 2px 0 var(--srx-ink);
}
.srx-header-phone-number { display: none; }
.srx-header-quote { display: none; }

/* Hamburger */
.srx-menu-toggle {
	width: 44px;
	height: 44px;
	padding: 10px;
	background: transparent;
	border: 2px solid var(--srx-ink);
	border-radius: var(--srx-radius-sm);
	display: inline-flex;
	flex-direction: column;
	justify-content: space-between;
	cursor: pointer;
	box-shadow: 0 3px 0 var(--srx-ink);
	transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.srx-menu-toggle:hover {
	background: var(--srx-yellow);
}
.srx-menu-toggle:active {
	transform: translateY(1px);
	box-shadow: 0 2px 0 var(--srx-ink);
}
.srx-menu-toggle span {
	display: block;
	height: 2.5px;
	background: var(--srx-ink);
	border-radius: 2px;
}
.srx-menu-toggle span:nth-child(2) { width: 75%; }

/* =======================
   MOBILE MENU OVERLAY
   ======================= */
.srx-mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 100;
	visibility: hidden;
	pointer-events: none;
}
.srx-mobile-menu.is-open {
	visibility: visible;
	pointer-events: auto;
}
.srx-mobile-menu-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(11, 18, 32, 0.6);
	opacity: 0;
	transition: opacity 0.25s ease;
}
.srx-mobile-menu.is-open .srx-mobile-menu-backdrop { opacity: 1; }
.srx-mobile-menu-panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 88%;
	max-width: 380px;
	background: #fff;
	padding: 24px 24px 32px;
	transform: translateX(100%);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	display: flex;
	flex-direction: column;
	box-shadow: -10px 0 40px rgba(11, 18, 32, 0.3);
	border-left: 4px solid var(--srx-yellow);
}
.srx-mobile-menu.is-open .srx-mobile-menu-panel {
	transform: translateX(0);
}
.srx-mobile-menu-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 2px solid var(--srx-border);
}
.srx-mobile-menu-eyebrow {
	font-size: 0.75rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--srx-red);
}
.srx-mobile-menu-close {
	width: 40px;
	height: 40px;
	background: var(--srx-bg-light);
	border: 2px solid var(--srx-ink);
	border-radius: 50%;
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--srx-ink);
	cursor: pointer;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.srx-mobile-menu-close:hover {
	background: var(--srx-yellow);
}
.srx-mobile-nav {
	flex: 1;
	margin-bottom: 20px;
}
.srx-mobile-nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.srx-mobile-nav li {
	border-bottom: 1px solid var(--srx-border);
}
.srx-mobile-nav a {
	display: block;
	padding: 18px 4px;
	color: var(--srx-ink);
	font-weight: 700;
	font-size: 1.1rem;
	text-decoration: none;
	transition: color 0.15s ease, padding-left 0.15s ease;
}
.srx-mobile-nav a:hover {
	color: var(--srx-blue);
	padding-left: 12px;
}
.srx-mobile-cta {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 20px;
}
.srx-mobile-menu-foot {
	padding-top: 16px;
	border-top: 1px solid var(--srx-border);
	text-align: center;
	color: var(--srx-text-muted);
	font-size: 0.85rem;
}
.srx-mobile-menu-foot p { margin: 0; }

/* Lock body scroll when menu open */
body.srx-menu-open {
	overflow: hidden;
}

/* =======================
   BUTTONS — loud, pressed-down style
   ======================= */
.srx-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 22px;
	border-radius: var(--srx-radius);
	font-weight: 800;
	font-size: 1rem;
	line-height: 1.1;
	letter-spacing: 0.01em;
	text-decoration: none;
	border: 2px solid transparent;
	background: transparent;
	color: var(--srx-ink);
	cursor: pointer;
	transition: transform 0.08s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.08s ease;
	min-height: 48px;
	text-align: center;
	text-transform: none;
}
.srx-btn:active { transform: translateY(1px); }
.srx-btn-primary {
	background: var(--srx-yellow);
	color: var(--srx-ink);
	border-color: var(--srx-ink);
	box-shadow: 0 4px 0 var(--srx-ink);
}
.srx-btn-primary:hover {
	background: var(--srx-yellow-dark);
	color: var(--srx-ink);
	box-shadow: 0 3px 0 var(--srx-ink);
	transform: translateY(1px);
}
.srx-btn-primary:active {
	box-shadow: 0 1px 0 var(--srx-ink);
	transform: translateY(3px);
}
.srx-btn-red {
	background: var(--srx-red);
	color: #fff;
	border-color: #6e1315;
	box-shadow: 0 4px 0 #6e1315;
}
.srx-btn-red:hover {
	background: var(--srx-red-dark);
	color: #fff;
	box-shadow: 0 3px 0 #6e1315;
	transform: translateY(1px);
}
.srx-btn-red:active {
	box-shadow: 0 1px 0 #6e1315;
	transform: translateY(3px);
}
.srx-btn-blue {
	background: var(--srx-blue);
	color: #fff;
	border-color: var(--srx-blue-deep);
	box-shadow: 0 4px 0 var(--srx-blue-deep);
}
.srx-btn-blue:hover {
	background: var(--srx-blue-dark);
	color: #fff;
	box-shadow: 0 3px 0 var(--srx-blue-deep);
	transform: translateY(1px);
}
.srx-btn-ghost {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.65);
}
.srx-btn-ghost:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	border-color: #fff;
}
.srx-btn-outline {
	background: #fff;
	color: var(--srx-ink);
	border-color: var(--srx-ink);
	box-shadow: 0 3px 0 var(--srx-ink);
}
.srx-btn-outline:hover {
	background: var(--srx-bg-light);
	color: var(--srx-ink);
}
.srx-btn-lg { padding: 18px 28px; font-size: 1.1rem; min-height: 56px; }
.srx-btn-sm { padding: 8px 14px; min-height: 36px; font-size: 0.9rem; box-shadow: 0 2px 0 var(--srx-ink); }
.srx-btn-block { display: flex; width: 100%; }

/* =======================
   HERO — real truck photo, bold overlay
   ======================= */
.srx-hero {
	position: relative;
	background: var(--srx-blue-deep);
	color: #fff;
	overflow: hidden;
	min-height: 560px;
	display: flex;
	align-items: center;
	padding: 48px 0;
}
/* v3.74.0 — <picture> wrappers are layout-transparent (display:contents) so
   the inner <img> keeps its original containing block. These containers size
   the image with width/height:100% against themselves; without this the
   inline <picture> would re-parent the img and collapse those heights. */
.srx-hero-bg picture,
.srx-step-img picture,
.srx-video-play picture,
.srx-proof-photo picture { display: contents; }

.srx-hero-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.srx-hero-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	/*
	 * v3.237.5 — was 0.45, which darkened the photo BEFORE the gradient below
	 * darkened it again. Two darkeners multiply: at the left edge the result was
	 * 0.45 x 0.05 = roughly 2% of the photograph actually visible, so the truck
	 * read as a smudge. Contrast there measured 16:1 against a 4.5:1 requirement
	 * — more than three times the darkness legibility needed.
	 *
	 * The gradient alone now does the work, which lets it be tuned per-position
	 * instead of dimming the whole image uniformly.
	 */
	opacity: 1;
}
.srx-hero-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	/*
	 * BASE SCRIM — safe at every width.
	 *
	 * The obvious version of this change lets the right side brighten so the
	 * photograph shows through. Measured, that is only true on a wide screen:
	 * .srx-hero-inner is capped at 720px, but the copy column ends at 95% of the
	 * viewport on a phone, 89% on a tablet and only 73% at 1280px. A right-side
	 * falloff therefore puts body text over a bright photo on exactly the devices
	 * most homeowners arrive on.
	 *
	 * So the base stays near-flat and never drops below 0.82, which measures
	 * 9.9:1 against white — comfortably past the 4.5:1 body-text requirement.
	 * The gain here comes from the image opacity above, not from thinning the
	 * scrim: the photo goes from roughly 2% visible to 10-18%.
	 *
	 * Stops are tied to where the copy ends. Change .srx-hero-inner's max-width
	 * or the container padding and these must be re-measured, not adjusted by eye.
	 */
	background: linear-gradient(
		100deg,
		rgba(8, 24, 71, 0.90) 0%,
		rgba(8, 24, 71, 0.86) 60%,
		rgba(8, 24, 71, 0.82) 100%
	);
}

/*
 * Wide screens only — the copy column ends at 79% here and pulls further left
 * as the viewport grows, so everything past ~80% is empty space that can carry
 * the photograph properly. 0.82 holds until the copy has ended; the tail then
 * drops to 0.24, leaving about three-quarters of the image visible where the
 * truck actually sits.
 */
@media (min-width: 1024px) {
	.srx-hero-bg::after {
		background: linear-gradient(
			100deg,
			rgba(8, 24, 71, 0.90) 0%,
			rgba(8, 24, 71, 0.86) 45%,
			rgba(8, 24, 71, 0.82) 84%,
			rgba(8, 24, 71, 0.52) 92%,
			rgba(8, 24, 71, 0.24) 100%
		);
	}
}
.srx-hero-inner {
	position: relative;
	z-index: 1;
	max-width: 720px;
}
.srx-hero h1 {
	color: #fff;
	font-size: 2.1rem;
	line-height: 1.05;
	margin-bottom: 16px;
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}
.srx-hero h1 .srx-hero-accent { color: var(--srx-yellow); }
.srx-hero-sub {
	font-size: 1.1rem;
	color: rgba(255, 255, 255, 0.92);
	margin-bottom: 24px;
	max-width: 600px;
}
.srx-hero-meta {
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.82);
	margin-top: 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
}
.srx-hero-meta span { display: inline-flex; align-items: center; gap: 6px; }
.srx-hero-meta span::before {
	content: "✓";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	background: var(--srx-yellow);
	color: var(--srx-ink);
	border-radius: 50%;
	font-weight: 900;
	font-size: 0.7rem;
	flex-shrink: 0;
}
.srx-hero-ctas {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.srx-eyebrow {
	display: inline-block;
	background: var(--srx-yellow);
	color: var(--srx-ink);
	padding: 6px 14px;
	border-radius: 100px;
	font-size: 0.78rem;
	font-weight: 900;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 16px;
}
.srx-hero-sm {
	min-height: 0;
	padding: 48px 0 40px;
}
/* Interior heroes (contact, qualify) share the gradient above and keep their own
   lower image opacity, so the v3.237.5 regrade lifts them a little too. Their
   copy is capped at the same 720px, and at 0.35 the text-side photo stays under
   4% visible — contrast is unaffected. */
.srx-hero-sm .srx-hero-bg img { opacity: 0.35; }
.srx-hero-sm h1 { font-size: 2rem; }

/* =======================
   "HOW IT WORKS" — 3-step with photo cards
   ======================= */
.srx-steps {
	display: grid;
	gap: 20px;
	margin-top: 8px;
}
.srx-step {
	background: #fff;
	padding: 0;
	border-radius: var(--srx-radius-lg);
	border: 1px solid var(--srx-border);
	overflow: hidden;
	box-shadow: var(--srx-shadow-sm);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.srx-step:hover {
	transform: translateY(-3px);
	box-shadow: var(--srx-shadow);
}
.srx-step-img {
	aspect-ratio: 4/3;
	background: var(--srx-blue-deep);
	position: relative;
	overflow: hidden;
}
.srx-step-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.srx-step-num-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	width: 44px;
	height: 44px;
	background: var(--srx-yellow);
	color: var(--srx-ink);
	font-weight: 900;
	font-size: 1.2rem;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 3px solid var(--srx-ink);
	box-shadow: 0 3px 0 var(--srx-ink);
}
.srx-step-body {
	padding: 20px 22px 22px;
}
.srx-step h3 { font-size: 1.2rem; margin-bottom: 8px; color: var(--srx-ink); }
.srx-step p { color: var(--srx-text-muted); margin: 0; }

/* =======================
   VIDEO SECTION
   ======================= */
.srx-video-section {
	background: var(--srx-blue-deep);
	color: #fff;
	padding: 56px 0;
	position: relative;
	overflow: hidden;
}
.srx-video-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--srx-yellow);
}
.srx-video-section h2 { color: #fff; text-align: center; }
.srx-video-section .srx-section-intro { color: rgba(255, 255, 255, 0.85); }
.srx-video-wrap {
	max-width: 900px;
	margin: 0 auto;
	border-radius: var(--srx-radius-lg);
	overflow: hidden;
	background: #000;
	border: 4px solid var(--srx-yellow);
	box-shadow: var(--srx-shadow-lg);
	position: relative;
}
.srx-video-wrap video {
	width: 100%;
	display: block;
	aspect-ratio: 16/9;
	background: #000;
	object-fit: cover;
}
/* v3.299.0 — THE VIDEO THAT SHRANK FROM THE JOB. The click-swap iframe had no
   rule at all; its inline height:100% resolved against an auto-height wrap and
   collapsed to the 150px replaced-element default. The video element above was
   already sized this way — the iframe simply never got the treatment. */
.srx-video-wrap iframe {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 16/9;
	border: 0;
	background: #000;
}
/* The net for the pre-aspect-ratio phone tail: unlike <video>, an iframe has no
   intrinsic ratio to save it, so a ratio failure here IS the collapse. */
@supports not (aspect-ratio: 16/9) {
	.srx-video-wrap iframe { height: 56.25vw; max-height: 506px; }
}

/* =======================
   "IS YOUR ROOF A CANDIDATE" — two-col with value card
   ======================= */
.srx-two-col {
	display: grid;
	gap: 32px;
}
.srx-check-list {
	list-style: none;
	padding: 0;
	margin: 0 0 24px;
}
.srx-check-list li {
	position: relative;
	padding: 12px 0 12px 36px;
	border-bottom: 1px solid var(--srx-border);
	font-weight: 600;
	color: var(--srx-ink);
}
.srx-check-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 12px;
	width: 24px;
	height: 24px;
	background: var(--srx-yellow);
	color: var(--srx-ink);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	font-size: 0.85rem;
	border: 2px solid var(--srx-ink);
}
.srx-check-list li:last-child { border-bottom: none; }

.srx-value-card {
	background: linear-gradient(150deg, var(--srx-blue) 0%, var(--srx-blue-deep) 100%);
	color: #fff;
	padding: 32px 28px;
	border-radius: var(--srx-radius-lg);
	text-align: center;
	border: 3px solid var(--srx-yellow);
	position: relative;
	box-shadow: var(--srx-shadow-lg);
}
.srx-value-card::before {
	content: 'UP TO 16 YEARS';
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--srx-red);
	color: #fff;
	padding: 4px 14px;
	border-radius: 100px;
	font-size: 0.75rem;
	font-weight: 900;
	letter-spacing: 0.08em;
	border: 2px solid var(--srx-yellow);
	white-space: nowrap;
}
.srx-value-big {
	font-size: 3rem;
	font-weight: 900;
	color: var(--srx-yellow);
	line-height: 1;
	margin: 12px 0 6px;
	letter-spacing: -0.03em;
}
.srx-value-label {
	color: rgba(255, 255, 255, 0.9);
	font-size: 1rem;
	font-weight: 600;
	margin-bottom: 0;
}
.srx-value-divider {
	height: 1px;
	background: rgba(255, 255, 255, 0.18);
	margin: 24px 0;
}
.srx-value-vs {
	font-size: 0.85rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	color: rgba(255, 255, 255, 0.6);
	text-transform: uppercase;
	margin-bottom: 8px;
}
.srx-value-alt {
	font-size: 1.6rem;
	font-weight: 800;
	color: rgba(255, 255, 255, 0.85);
}
.srx-value-alt-label {
	color: rgba(255, 255, 255, 0.65);
	font-size: 0.95rem;
	margin-top: 4px;
}
.srx-value-note {
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.65);
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* =======================
   SOCIAL PROOF / TEAM BAND
   ======================= */
.srx-proof {
	background: var(--srx-bg-light);
	padding: 56px 0;
}

/* =========================================================
   v3.238.0 — TEAM MEMBERS
   Sits between the light-grey proof band and the navy protect band, so WHITE is
   what separates the crew from the trucks. No divider needed; the surface change
   does the work.
   ========================================================= */
.srx-crew {
	background: #fff;
	padding: 52px 0;
}

/* =========================================================
   v3.240.0 — SERVICE AREA band
   Sits under the roster, above the navy protect band.
   ========================================================= */
/* v3.241.0 — a dealer's own video with no cover image yet. A plain dark card
   with the play button reads as deliberate; a broken <img> does not. */
.srx-video-play.is-posterless {
	background: #0B1220;
	min-height: 220px;
}
@media (min-width: 720px) { .srx-video-play.is-posterless { min-height: 340px; } }

.srx-area {
	background: var(--srx-bg-light);
	padding: 52px 0;
}
.srx-area-title {
	margin: 0 0 24px;
	text-align: center;
	font-size: 1.5rem;
	line-height: 1.25;
	color: var(--srx-ink);
}
.srx-area-map {
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--srx-border);
	background: #fff;
	/* Capped and centred so a wide screen does not stretch it into a banner, and
	   a shadow so it sits on the page rather than floating on it. */
	max-width: 820px;
	margin: 0 auto;
	box-shadow: 0 10px 26px rgba(11, 18, 32, 0.10);
}
.srx-area-map img { display: block; width: 100%; height: auto; }
/* v3.241.7 — thirty towns ran to eleven rows on a phone, which pushed the rest
   of the page a screen and a half down. Tighter type and spacing on small
   screens brings it to roughly six, and it opens back out on desktop. */
.srx-area-list {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
}
/* Quieter chips: the map is the statement, the names are the detail. Thinner
   border, tighter type, no numbering. */
.srx-area-list li {
	background: #fff;
	border: 1px solid var(--srx-border);
	border-radius: 99px;
	padding: 4px 10px;
	font-size: 0.76rem;
	color: var(--srx-ink);
	line-height: 1.3;
	white-space: nowrap;
}
@media (min-width: 720px) {
	.srx-area { padding: 64px 0; }
	.srx-area-title { font-size: 1.9rem; margin-bottom: 30px; }
	.srx-area-list { gap: 8px 10px; margin-top: 22px; }
	.srx-area-list li { padding: 5px 13px; font-size: 0.84rem; }
}
.srx-crew-title {
	margin: 0 0 28px;
	text-align: center;
	font-size: 1.5rem;
	line-height: 1.25;
	color: var(--srx-ink);
}

/* Flex, NOT grid, and this is the whole reason.
   Dealers have different crew sizes. A grid with fixed columns leaves a dealer
   with five people showing three then two jammed hard left — a visible hole.
   Wrapping flex with centred justification centres the short row instead, so
   five reads as deliberate, and so does seven, or four on a tablet. */
.srx-crew-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 22px 18px;
}
.srx-crew-card-pub {
	margin: 0;
	flex: 0 1 140px;
	max-width: 200px;
}
.srx-crew-photo {
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: 12px;
	background: var(--srx-bg-light);
	border: 1px solid var(--srx-border);
}
/* center top, not center center: when a photo has to lose height, it loses
   legs. A centred crop takes the difference off the top and beheads people. */
.srx-crew-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}
.srx-crew-card-pub figcaption {
	margin-top: 10px;
	text-align: center;
}
.srx-crew-name {
	display: block;
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--srx-ink);
	line-height: 1.3;
}
.srx-crew-role {
	display: block;
	margin-top: 2px;
	font-size: 0.8rem;
	color: var(--srx-text-muted);
	line-height: 1.3;
}
@media (min-width: 720px) {
	.srx-crew { padding: 64px 0; }
	.srx-crew-title { font-size: 1.9rem; margin-bottom: 34px; }
	.srx-crew-grid { gap: 28px 22px; }
	.srx-crew-card-pub { flex-basis: 180px; }
}
.srx-proof-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin-top: 24px;
}
.srx-proof-photo {
	border-radius: var(--srx-radius-lg);
	overflow: hidden;
	aspect-ratio: 4/3;
	border: 3px solid var(--srx-ink);
	box-shadow: var(--srx-shadow);
}
.srx-proof-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.srx-stats-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-top: 32px;
}
.srx-stat-chip {
	background: #fff;
	border: 2px solid var(--srx-ink);
	border-radius: var(--srx-radius);
	padding: 16px 12px;
	text-align: center;
	box-shadow: 0 3px 0 var(--srx-ink);
}
.srx-stat-chip-value {
	font-size: 1.8rem;
	font-weight: 900;
	color: var(--srx-blue);
	line-height: 1;
	display: block;
	margin-bottom: 4px;
}
.srx-stat-chip-label {
	font-size: 0.75rem;
	color: var(--srx-text-muted);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* =======================
   BEFORE/PROTECT SECTION
   ======================= */
.srx-protect {
	position: relative;
	padding: 72px 0;
	background: var(--srx-blue-deep);
	color: #fff;
	overflow: hidden;
}
.srx-protect-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.srx-protect-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.25;
}
.srx-protect-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(8, 24, 71, 0.9) 0%, rgba(8, 24, 71, 0.7) 100%);
}
.srx-protect-inner {
	position: relative;
	z-index: 1;
	text-align: center;
	max-width: 680px;
	margin: 0 auto;
}
.srx-protect h2 {
	color: #fff;
	font-size: 2.2rem;
	margin-bottom: 14px;
}
.srx-protect p {
	font-size: 1.1rem;
	color: rgba(255, 255, 255, 0.9);
	margin-bottom: 28px;
}

/* =======================
   CTA BAND — yellow stripe
   ======================= */
.srx-cta-band {
	background: var(--srx-yellow);
	color: var(--srx-ink);
	text-align: center;
	padding: 56px 0;
	border-top: 4px solid var(--srx-ink);
	border-bottom: 4px solid var(--srx-ink);
}
.srx-cta-band h2 { color: var(--srx-ink); font-size: 2rem; }
.srx-cta-band p { color: var(--srx-ink); margin-bottom: 28px; font-weight: 500; opacity: 0.85; }
.srx-cta-band .srx-btn-primary {
	background: var(--srx-red);
	color: #fff;
	border-color: #6e1315;
	box-shadow: 0 4px 0 #6e1315;
}
.srx-cta-band .srx-btn-primary:hover {
	background: var(--srx-red-dark);
	color: #fff;
}
/* v3.261.3 — the band never had any layout for its buttons. They are inline-flex
   siblings, so the only thing between them was the single space in the HTML.
   Six templates use this band, including the homepage — one rule fixes all of
   them, and no markup has to change. */
.srx-cta-band .srx-btn { margin: 7px 8px 0; }
@media (max-width: 479px) {
	/* Two buttons at natural width look ragged on a narrow phone, and a
	   half-width tap target is worse than a full one. */
	.srx-cta-band .srx-btn { display: flex; width: 100%; margin: 10px 0 0; }
}

/* =======================
   FORM CARD / FIELDS
   ======================= */
.srx-form-card {
	background: #fff;
	padding: 28px 24px;
	border-radius: var(--srx-radius-lg);
	border: 3px solid var(--srx-ink);
	box-shadow: 0 6px 0 var(--srx-ink);
}
.srx-form-card h3 { margin-bottom: 4px; color: var(--srx-ink); }
.srx-form-card > p { color: var(--srx-text-muted); margin-bottom: 20px; }

.srx-field { margin-bottom: 16px; position: relative; }
.srx-field label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--srx-ink);
}
.srx-field input[type="text"],
.srx-field input[type="tel"],
.srx-field input[type="email"],
.srx-field input[type="password"],
.srx-field input[type="url"],
.srx-field textarea,
.srx-field select {
	width: 100%;
	min-height: 58px;
	padding: 16px 16px;
	border: 2px solid var(--srx-border-strong);
	border-radius: var(--srx-radius);
	background: #f5f8fd;
	color: var(--srx-ink);
	font-size: 1.05rem;
	line-height: 1.4;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}
.srx-field input:focus,
.srx-field textarea:focus,
.srx-field select:focus {
	outline: none;
	border-color: var(--srx-blue);
	background: #fff;
	box-shadow: 0 0 0 4px rgba(27, 58, 156, 0.18);
}
.srx-field small {
	display: block;
	margin-top: 6px;
	font-size: 0.85rem;
	color: var(--srx-text-muted);
}

/* v3.173.0 — custom inline address autocomplete dropdown. Replaces Google's
 * fullscreen PlaceAutocompleteElement web component. Rendered as our own list
 * directly under the field, inside the survey card — never fullscreen. */
/* v3.195.0 — relative wrapper so the custom address dropdown sits under the input in any container */
.srx-ac-wrap { position: relative; }
.srx-ac-list {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 60;
	margin: 5px 0 0;
	padding: 5px 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--srx-border-strong);
	border-radius: 12px;
	box-shadow: 0 14px 34px rgba(11, 18, 32, 0.18);
	max-height: 264px;
	overflow-y: auto;
	text-align: left;
}
.srx-ac-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 14px;
	cursor: pointer;
	color: var(--srx-ink);
}
.srx-ac-item:hover,
.srx-ac-item[aria-selected="true"] {
	background: #eff4fb;
}
.srx-ac-pin {
	flex: none;
	display: flex;
	color: #8a95ad;
}
.srx-ac-item:hover .srx-ac-pin,
.srx-ac-item[aria-selected="true"] .srx-ac-pin {
	color: var(--srx-blue);
}
.srx-ac-txt {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.srx-ac-main {
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--srx-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.srx-ac-sec {
	font-size: 0.8rem;
	line-height: 1.2;
	color: var(--srx-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.srx-ac-hint {
	margin-top: 8px;
	font-size: 0.85rem;
	line-height: 1.35;
	color: #c23b3b;
}
.srx-address-summary {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 24px 14px;
	padding: 9px 12px;
	background: #e7f7ef;
	border: 1px solid #c2e8d5;
	border-radius: 10px;
}
.srx-address-summary[hidden] { display: none; }
.srx-address-summary-ic {
	flex: none;
	display: flex;
	color: #12805a;
}
.srx-address-summary-text {
	flex: 1;
	min-width: 0;
	font-size: 0.85rem;
	line-height: 1.3;
	color: var(--srx-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.srx-address-summary-edit {
	flex: none;
	border: 0;
	background: none;
	padding: 4px 6px;
	font-size: 0.85rem;
	font-weight: 600;
	color: #12805a;
	cursor: pointer;
	text-decoration: underline;
}
@media (max-width: 560px) {
	.srx-modal-inline .srx-address-summary { margin-left: 14px; margin-right: 14px; }
}

.srx-check-field {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 12px 0;
	font-size: 0.95rem;
	color: var(--srx-text);
}
.srx-check-field input { width: 18px; height: 18px; }

/* =======================
   AUTH (LOGIN)
   ======================= */
.srx-auth-wrap {
	max-width: 440px;
	margin: 48px auto;
	padding: 0 20px;
}
.srx-auth-card {
	background: #fff;
	padding: 36px 28px;
	border-radius: var(--srx-radius-lg);
	border: 3px solid var(--srx-ink);
	box-shadow: 0 6px 0 var(--srx-ink);
}
.srx-auth-title { text-align: center; margin-bottom: 4px; }
.srx-auth-sub {
	text-align: center;
	color: var(--srx-text-muted);
	margin-bottom: 24px;
}
.srx-auth-error {
	background: var(--srx-danger-bg);
	color: var(--srx-danger);
	padding: 12px 16px;
	border-radius: var(--srx-radius);
	margin-bottom: 16px;
	font-size: 0.95rem;
	border: 1px solid var(--srx-danger);
}
.srx-auth-footer {
	text-align: center;
	margin-top: 16px;
	font-size: 0.9rem;
}

/* -- Feedback states -- */
.srx-form-feedback {
	margin-top: 14px;
	padding: 12px 14px;
	border-radius: var(--srx-radius);
	font-size: 0.95rem;
}
.srx-form-feedback:empty { display: none; }
.srx-form-feedback.is-success {
	background: var(--srx-success-bg);
	color: var(--srx-success);
	border: 1px solid var(--srx-success);
}
.srx-form-feedback.is-error {
	background: var(--srx-danger-bg);
	color: var(--srx-danger);
	border: 1px solid var(--srx-danger);
}
.srx-error {
	background: var(--srx-danger-bg);
	color: var(--srx-danger);
	padding: 12px 14px;
	border-radius: var(--srx-radius);
	margin-top: 12px;
	font-size: 0.95rem;
	border: 1px solid var(--srx-danger);
}

.srx-callout {
	background: var(--srx-yellow);
	border-left: 6px solid var(--srx-ink);
	padding: 16px 20px;
	border-radius: var(--srx-radius);
	margin: 24px 0;
}
.srx-callout strong { color: var(--srx-ink); display: block; margin-bottom: 4px; }

.srx-contact-line { font-size: 1.1rem; margin-bottom: 16px; }
.srx-contact-label { color: var(--srx-text-muted); margin-right: 6px; }
.srx-contact-phone { font-weight: 800; color: var(--srx-blue); }

/* =======================
   SURVEY FLOW
   ======================= */
.srx-survey-wrap {
	background: var(--srx-blue-deep);
	background-image:
		radial-gradient(circle at 20% 30%, rgba(27, 58, 156, 0.4) 0%, transparent 50%),
		radial-gradient(circle at 80% 70%, rgba(227, 43, 46, 0.15) 0%, transparent 50%);
	min-height: calc(100vh - 80px);
	min-height: calc(100dvh - 80px); /* v3.253.1 — keyboard-safe. */
	padding: 32px 0 56px;
}
.srx-survey-intro {
	max-width: 580px;
	margin: 0 auto 16px;
	text-align: center;
	color: rgba(255, 255, 255, 0.92);
}
.srx-survey-intro h1 {
	color: #fff;
	font-size: 1.6rem;
	margin-bottom: 6px;
}
.srx-survey-intro .srx-eyebrow { margin-bottom: 16px; }
.srx-survey-intro p { color: rgba(255, 255, 255, 0.8); font-size: 0.95rem; }
.srx-survey {
	max-width: 580px;
	margin: 0 auto;
	background: #fff;
	border-radius: var(--srx-radius-lg);
	box-shadow: var(--srx-shadow-lg);
	overflow: hidden;
	border: 3px solid var(--srx-ink);
}
.srx-step-panel {
	display: none;
	padding: 28px 24px 32px;
}
.srx-step-panel.is-active { display: block; }
.srx-step-label {
	font-size: 0.75rem;
	font-weight: 900;
	color: var(--srx-red);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: 8px;
}
.srx-step-title {
	font-size: 1.5rem;
	letter-spacing: -0.02em;
	margin-bottom: 6px;
	color: var(--srx-ink);
}
.srx-step-sub {
	color: var(--srx-text-muted);
	margin-bottom: 20px;
}
.srx-step-nav {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 16px;
}

/* -- Survey choices — big tappable cards -- */
.srx-choices {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 16px;
}
.srx-choice {
	display: block;
	width: 100%;
	text-align: left;
	background: #fff;
	border: 2px solid var(--srx-border-strong);
	border-radius: var(--srx-radius);
	padding: 16px 18px;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, transform 0.08s ease;
	min-height: 72px;
}
.srx-choice:hover {
	border-color: var(--srx-blue);
	background: #fafcff;
}
.srx-choice.is-selected {
	border-color: var(--srx-blue);
	background: #eef3ff;
	box-shadow: inset 4px 0 0 var(--srx-yellow);
}
.srx-choice-title {
	display: block;
	font-weight: 800;
	color: var(--srx-ink);
	font-size: 1.05rem;
	margin-bottom: 2px;
}
.srx-choice-sub {
	display: block;
	color: var(--srx-text-muted);
	font-size: 0.9rem;
}

.srx-consent {
	font-size: 0.8rem;
	color: var(--srx-text-muted);
	margin: 16px 0;
	line-height: 1.5;
}

/* -- Loader -- */
.srx-loader {
	width: 56px;
	height: 56px;
	border: 5px solid var(--srx-bg-tint);
	border-top-color: var(--srx-blue);
	border-right-color: var(--srx-yellow);
	border-radius: 50%;
	animation: srx-spin 0.9s linear infinite;
	margin: 32px auto 24px;
}
@keyframes srx-spin { to { transform: rotate(360deg); } }

/* -- Result panels -- */
.srx-result { text-align: left; }
.srx-result-badge {
	display: inline-block;
	padding: 7px 16px;
	border-radius: 100px;
	font-weight: 900;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: 14px;
	border: 2px solid currentColor;
}
.srx-result-good {
	background: var(--srx-success-bg);
	color: var(--srx-success);
}
.srx-result-warn {
	background: var(--srx-warn-bg);
	color: var(--srx-warn);
}
.srx-result-neutral {
	background: var(--srx-bg-tint);
	color: var(--srx-ink);
}
.srx-result-title {
	font-size: 1.55rem;
	letter-spacing: -0.02em;
	margin-bottom: 8px;
}
.srx-result-sub {
	color: var(--srx-text-muted);
	margin-bottom: 20px;
	font-size: 1rem;
}
.srx-booking {
	background: var(--srx-bg-light);
	border-radius: var(--srx-radius);
	padding: 12px;
	margin: 16px 0;
	min-height: 120px;
	border: 2px solid var(--srx-border);
}
.srx-booking iframe { width: 100%; border: 0; min-height: 600px; border-radius: var(--srx-radius-sm); }
.srx-booking-fallback {
	text-align: center;
	padding: 32px 20px;
	background: linear-gradient(135deg, #fffbeb 0%, #fff 100%);
	border-radius: var(--srx-radius-sm);
	border: 2px dashed var(--srx-yellow);
}
.srx-booking-fallback p { margin-bottom: 12px; }
.srx-booking-fallback-icon { font-size: 2.5rem; margin-bottom: 12px; }
.srx-booking-fallback h3 { margin: 0 0 12px; color: var(--srx-ink); }
.srx-booking-fallback .srx-btn { margin-top: 8px; }
.srx-booking-fallback-hours { font-size: 0.85rem; color: var(--srx-text-muted); margin-top: 12px; }
.srx-result-alt {
	text-align: center;
	margin-top: 20px;
	font-size: 0.95rem;
	color: var(--srx-text-muted);
}
.srx-result-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 16px 0;
}
.srx-result-note {
	font-size: 0.9rem;
	color: var(--srx-text-muted);
	margin-top: 16px;
}

/* =======================
   FOOTER
   ======================= */
.srx-footer {
	background: var(--srx-blue-deep);
	color: rgba(255, 255, 255, 0.8);
	padding: 48px 0 24px;
	margin-top: 0;
	border-top: 4px solid var(--srx-yellow);
}
.srx-footer-grid {
	display: grid;
	gap: 32px;
	margin-bottom: 32px;
}
.srx-footer h3 {
	color: #fff;
	margin-bottom: 14px;
	font-size: 0.85rem;
	font-weight: 900;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.srx-footer-brand img {
	height: 56px;
	width: auto;
	margin-bottom: 12px;
}
.srx-footer-tagline { color: rgba(255, 255, 255, 0.65); font-size: 0.95rem; max-width: 340px; }
.srx-footer-sub { color: rgba(255, 255, 255, 0.6); font-size: 0.85rem; margin-top: 8px; }
.srx-footer-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.srx-footer-list li { margin-bottom: 10px; }
.srx-footer-list a,
.srx-footer-phone {
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
	font-weight: 500;
}
.srx-footer-list a:hover,
.srx-footer-phone:hover { color: var(--srx-yellow); }
.srx-footer-phone {
	font-size: 1.3rem;
	font-weight: 800;
	color: var(--srx-yellow);
}
.srx-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.5);
}
.srx-footer-bottom a { color: rgba(255, 255, 255, 0.7); }

/* =======================
   ARTICLE / PAGE
   ======================= */
.srx-article { max-width: 760px; margin: 0 auto; }
.srx-article-header { margin-bottom: 24px; }
.srx-article-content p { margin-bottom: 1em; }
.srx-article-content h2 { margin-top: 1.5em; }
.srx-empty { text-align: center; padding: 64px 20px; }
.srx-empty h1 { margin-bottom: 8px; }

/* =======================
   RESPONSIVE
   ======================= */
@media (min-width: 520px) {
	.srx-stats-row { grid-template-columns: repeat(3, 1fr); }
	.srx-proof-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 720px) {
	h1 { font-size: 2.5rem; }
	.srx-hero h1 { font-size: 3rem; line-height: 1.02; }
	.srx-hero-ctas { flex-direction: row; }
	.srx-step-nav { flex-direction: row; }
	.srx-step-nav .srx-btn { flex: 1; }
	.srx-step-nav .srx-btn:only-child { flex: none; width: 100%; }
	.srx-result-actions { flex-direction: row; }
	.srx-header-phone-number { display: inline; }
	.srx-utility-right { display: flex; align-items: center; }
	.srx-footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
	.srx-footer-grid--3 { grid-template-columns: 2fr 1fr 1fr; }
	.srx-footer-bottom { flex-direction: row; justify-content: space-between; }
	.srx-steps { grid-template-columns: repeat(3, 1fr); }
	.srx-proof-grid { grid-template-columns: repeat(3, 1fr); }
	.srx-section { padding: 72px 0; }
	.srx-hero { min-height: 640px; padding: 64px 0; }
}

/* v3.259.0 — the desktop nav switches on at 1100px, not 960px.
   Measured: .srx-container caps at 1180px, so usable header width is 1140px and
   never grows. Logo + nav + the two CTA buttons already used ~950px at four
   items, which is break-even at 960px and survives on flex compression alone.
   Swapping Video and Team for Our Work and Roof Advice adds ~90px, and 960-1100
   is where that bites — which is most laptops. Below 1100 the hamburger, which
   already exists and works, takes over. Nobody loses anything.

   ONLY the nav moves. .srx-header-quote stays at 960px: with the nav collapsed
   there is ample room for it, and it is a lead button, not a link. The rest of
   the 960px block below is typography and must not move. */
@media (min-width: 1100px) {
	.srx-nav { display: block; }
	.srx-menu-toggle { display: none; }
}

@media (min-width: 960px) {
	.srx-header-quote { display: inline-flex; }
	.srx-two-col { grid-template-columns: 1.1fr 1fr; align-items: center; gap: 48px; }
	.srx-hero h1 { font-size: 3.4rem; }
	h1 { font-size: 2.7rem; }
	h2 { font-size: 2rem; }
	.srx-step-title { font-size: 1.85rem; }
	.srx-result-title { font-size: 1.9rem; }
	.srx-protect h2 { font-size: 2.6rem; }
	.srx-cta-band h2 { font-size: 2.4rem; }
	.srx-survey-intro h1 { font-size: 2rem; }
}

/* =======================
   SURVEY MODAL OVERLAY
   ======================= */
.srx-modal-open { overflow: hidden; }
.srx-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 0;
	animation: srxModalIn 0.25s ease-out;
}
@keyframes srxModalIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}
.srx-modal[hidden] { display: none; }
.srx-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(8, 24, 71, 0.88);
	cursor: pointer;
}
/* v3.22: Modal card is NO LONGER the scroll container. The Google Places
 * autocomplete dropdown is a portaled element appended to body but visually
 * positioned under the input — when its anchor was inside an overflow:auto
 * container, the dropdown got clipped. We move the constraint to a
 * dedicated inner scroll body so the input wrapper itself is overflow-visible. */
.srx-modal-card {
	position: relative;
	z-index: 1;
	width: 100%;
	max-height: 100vh;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-top: 4px solid var(--srx-yellow);
	border-radius: var(--srx-radius-lg) var(--srx-radius-lg) 0 0;
	box-shadow: 0 -12px 40px rgba(0,0,0,0.3);
	overflow: visible;
	animation: srxModalCardIn 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
/* v3.149.0 — Inline survey: the qualify survey rendered inside a focus-mode
   funnel's conversion card instead of a body overlay. Neutralizes the fixed
   bottom-sheet positioning so the survey flows in the page; every step and
   question style is inherited from the modal unchanged. */
.srx-modal.srx-modal-inline {
	position: static;
	inset: auto;
	z-index: auto;
	display: block;
	padding: 0;
	animation: none;
}
.srx-modal-inline .srx-modal-card {
	max-height: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	animation: none;
	overflow: visible;
}
.srx-funnel-inline-survey { overflow: visible; color: var(--srx-ink); }
/* v3.166.0 — the address autocomplete dropdown must escape the hero's clip when
   the survey is inline (the popup already escapes via its fixed positioning).
   Scoped with :has() so image/video funnels without an inline survey keep the
   hero's overflow clip. */
.srx-funnel-hero:has(.srx-funnel-inline-survey) { overflow: visible; }
/* v3.152.0 — inline survey mobile fit: the funnel card already provides the
   padding, so the modal body must not add its own (it doubled up and strangled
   the width on phones). Overlay survey is untouched. */
.srx-modal-inline .srx-modal-card-body { padding: 0; overflow: visible; }
@keyframes srxModalCardIn {
	from { transform: translateY(40px) scale(0.98); opacity: 0; }
	to   { transform: translateY(0) scale(1);       opacity: 1; }
}
.srx-modal-card-body {
	padding: 24px 20px 32px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	flex: 1;
	min-height: 0;
}
.srx-modal-close {
	position: absolute;
	top: 10px;
	right: 14px;
	width: 40px;
	height: 40px;
	background: var(--srx-bg-light);
	border: 2px solid var(--srx-border-strong);
	border-radius: 50%;
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--srx-ink);
	cursor: pointer;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	z-index: 5;
	transition: transform 0.15s ease, background 0.15s ease;
}
.srx-modal-close:hover {
	background: var(--srx-yellow);
	border-color: var(--srx-ink);
	transform: rotate(90deg);
}
.srx-modal-survey-intro {
	text-align: center;
	max-width: 480px;
	margin: 8px auto 20px;
}
.srx-modal-survey-intro h2 {
	color: var(--srx-ink);
	font-size: 1.6rem;
	margin: 8px 0 4px;
}
.srx-modal-survey-intro p {
	color: var(--srx-text-muted);
	font-size: 0.95rem;
}
/* v3.22: removed the inner border. The single .srx-modal-card is now the
 * only container — no nested visual frame. .srx-survey loses its border
 * and overflow:hidden, both of which were contributing to the dropdown
 * clipping. */
.srx-modal .srx-survey {
	max-width: 520px;
	margin: 0 auto;
	overflow: visible;
}

@media (min-width: 720px) {
	.srx-modal {
		align-items: center;
		padding: 24px;
	}
	.srx-modal-card {
		max-width: 640px;
		max-height: 92vh;
		border-radius: var(--srx-radius-lg);
		border: 4px solid var(--srx-yellow);
	}
	.srx-modal-card-body {
		padding: 28px 32px 36px;
	}
	.srx-modal-survey-intro h2 { font-size: 1.85rem; }
}

/* =======================
   LAZY VIDEO
   ======================= */
.srx-video-play {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: #000;
	cursor: pointer;
	overflow: hidden;
	aspect-ratio: 16/9;
}
.srx-video-play img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}
.srx-video-play:hover img {
	transform: scale(1.02);
}
.srx-video-play-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80px;
	height: 80px;
	background: var(--srx-yellow);
	color: var(--srx-ink);
	border: 4px solid var(--srx-ink);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
	transition: transform 0.2s ease, background 0.2s ease;
}
.srx-video-play:hover .srx-video-play-btn {
	transform: translate(-50%, -50%) scale(1.1);
	background: var(--srx-yellow-dark);
}
.srx-video-play-btn svg {
	margin-left: 4px; /* Optical center for the play triangle */
}

/* =======================
   QUALIFY LANDING PAGE
   ======================= */
.srx-qualify-grid {
	display: grid;
	gap: 18px;
	grid-template-columns: 1fr;
	margin-top: 28px;
}
.srx-qualify-card {
	background: #fff;
	border: 2px solid var(--srx-ink);
	border-radius: var(--srx-radius-lg);
	padding: 24px 22px;
	box-shadow: 0 4px 0 var(--srx-ink);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.srx-qualify-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 0 var(--srx-ink);
}
.srx-qualify-icon {
	width: 56px;
	height: 56px;
	background: var(--srx-yellow);
	border: 2px solid var(--srx-ink);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.6rem;
	margin-bottom: 14px;
	box-shadow: 0 3px 0 var(--srx-ink);
}
.srx-qualify-card h3 {
	color: var(--srx-ink);
	font-size: 1.15rem;
	margin-bottom: 8px;
}
.srx-qualify-card p {
	color: var(--srx-text-muted);
	margin: 0;
	font-size: 0.95rem;
}
.srx-qualify-cta-bar {
	text-align: center;
	margin-top: 32px;
}
.srx-qualify-steps {
	list-style: none;
	padding: 0;
	margin: 20px 0;
	counter-reset: srx-qstep;
}
.srx-qualify-steps li {
	position: relative;
	padding: 14px 14px 14px 56px;
	background: var(--srx-bg-light);
	border-radius: var(--srx-radius);
	margin-bottom: 10px;
	counter-increment: srx-qstep;
}
.srx-qualify-steps li::before {
	content: counter(srx-qstep);
	position: absolute;
	top: 14px;
	left: 14px;
	width: 30px;
	height: 30px;
	background: var(--srx-blue);
	color: #fff;
	border-radius: 50%;
	font-weight: 900;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.9rem;
}
.srx-qualify-steps strong {
	color: var(--srx-ink);
	display: block;
	margin-bottom: 2px;
}
.srx-qualify-foot {
	font-size: 0.9rem;
	color: var(--srx-text-muted);
	margin-top: 14px;
	font-style: italic;
}
.srx-qualify-photo {
	border-radius: var(--srx-radius-lg);
	overflow: hidden;
	border: 3px solid var(--srx-ink);
	box-shadow: var(--srx-shadow);
	aspect-ratio: 4/3;
}
.srx-qualify-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 720px) {
	.srx-qualify-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
	.srx-qualify-grid { grid-template-columns: repeat(4, 1fr); }
}

/* =======================
   FAQ (dealer page)
   ======================= */
.srx-faq-list { max-width: 720px; margin: 0 auto; }
.srx-faq-item {
	background: #fff;
	border: 2px solid var(--srx-border-strong);
	border-radius: var(--srx-radius);
	margin-bottom: 10px;
	padding: 4px 0;
	transition: border-color 0.15s ease;
}
.srx-faq-item[open] {
	border-color: var(--srx-ink);
	box-shadow: 0 3px 0 var(--srx-ink);
}
.srx-faq-item summary {
	padding: 14px 20px;
	cursor: pointer;
	font-weight: 700;
	color: var(--srx-ink);
	font-size: 1rem;
	list-style: none;
	position: relative;
	padding-right: 40px;
}
.srx-faq-item summary::-webkit-details-marker { display: none; }
.srx-faq-item summary::after {
	content: '+';
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.4rem;
	font-weight: 900;
	color: var(--srx-blue);
	transition: transform 0.2s ease;
}
.srx-faq-item[open] summary::after { content: '−'; }
.srx-faq-item p {
	padding: 0 20px 14px;
	margin: 0;
	color: var(--srx-text-muted);
	font-size: 0.95rem;
	line-height: 1.55;
}

/* Dealer signup card — anchor target visible */
.srx-dealer-signup-card { scroll-margin-top: 120px; }

/* =======================
   DEALER PORTAL
   ======================= */
.srx-dealer-portal {
	background: var(--srx-bg-light);
	min-height: calc(100vh - 200px);
	min-height: calc(100dvh - 200px); /* v3.253.1 — keyboard-safe. */
	padding: 32px 0 64px;
}

.srx-portal-welcome {
	background: #fff;
	border: 3px solid var(--srx-ink);
	border-radius: var(--srx-radius-lg);
	padding: 28px 28px 32px;
	box-shadow: 0 6px 0 var(--srx-ink);
	margin-bottom: 28px;
	position: relative;
	overflow: hidden;
}
.srx-portal-welcome::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 6px;
	background: linear-gradient(90deg, var(--srx-yellow) 0%, var(--srx-red) 100%);
}
.srx-portal-welcome-inner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
}
.srx-portal-welcome-text { flex: 1; min-width: 0; padding-top: 8px; }
.srx-portal-welcome-text h1 {
	font-size: 2rem;
	margin: 12px 0 4px;
	color: var(--srx-ink);
}
.srx-portal-company {
	font-size: 1.05rem;
	color: var(--srx-text-muted);
	font-weight: 600;
	margin-bottom: 16px;
}
.srx-portal-intro {
	color: var(--srx-text);
	font-size: 1rem;
	max-width: 620px;
	margin: 0;
}
.srx-portal-welcome-logo {
	flex-shrink: 0;
	display: none;
}

/* Status card with numbered vertical steps */
.srx-portal-status-card {
	background: #fff;
	border: 2px solid var(--srx-border-strong);
	border-radius: var(--srx-radius-lg);
	padding: 26px 28px;
	margin-bottom: 28px;
	box-shadow: var(--srx-shadow-sm);
}
.srx-portal-status-card h2 {
	font-size: 1.3rem;
	margin: 0 0 18px;
	color: var(--srx-ink);
}
.srx-portal-steps {
	list-style: none;
	padding: 0;
	margin: 0;
}
.srx-portal-steps li {
	display: flex;
	gap: 14px;
	padding: 10px 0;
	position: relative;
}
.srx-portal-steps li:not(:last-child)::before {
	content: '';
	position: absolute;
	left: 12px;
	top: 36px;
	bottom: -4px;
	width: 2px;
	background: var(--srx-border);
}
.srx-portal-step-dot {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--srx-border-strong);
	margin-top: 4px;
	z-index: 1;
}
.srx-portal-step-dot.srx-step-done {
	background: var(--srx-success);
	border-color: var(--srx-success);
	position: relative;
}
.srx-portal-step-dot.srx-step-done::after {
	content: '✓';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	font-size: 0.8rem;
	font-weight: 900;
}
.srx-portal-step-dot.srx-step-active {
	background: var(--srx-yellow);
	border-color: var(--srx-ink);
	position: relative;
	animation: srx-step-pulse 2s ease-in-out infinite;
}
@keyframes srx-step-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(255, 214, 10, 0.6); }
	50%      { box-shadow: 0 0 0 8px rgba(255, 214, 10, 0); }
}
.srx-portal-step-text {
	flex: 1;
	min-width: 0;
	padding-top: 2px;
}
.srx-portal-step-text strong {
	display: block;
	color: var(--srx-ink);
	font-size: 0.98rem;
	margin-bottom: 2px;
}
.srx-portal-step-text span {
	color: var(--srx-text-muted);
	font-size: 0.9rem;
}

/* Features grid */
.srx-portal-features {
	background: #fff;
	border: 2px solid var(--srx-border-strong);
	border-radius: var(--srx-radius-lg);
	padding: 28px;
	margin-bottom: 28px;
	box-shadow: var(--srx-shadow-sm);
}
.srx-portal-features h2 {
	font-size: 1.3rem;
	margin: 0 0 4px;
	color: var(--srx-ink);
}
.srx-portal-features-intro {
	color: var(--srx-text-muted);
	font-size: 0.95rem;
	margin-bottom: 22px;
}
.srx-portal-feature-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}
.srx-portal-feature {
	background: var(--srx-bg-light);
	border: 2px solid var(--srx-border);
	border-radius: var(--srx-radius);
	padding: 18px 18px 16px;
	position: relative;
	transition: border-color 0.15s ease;
}
.srx-portal-feature:hover {
	border-color: var(--srx-blue);
	background: #fff;
}
.srx-portal-feature-icon {
	font-size: 2rem;
	line-height: 1;
	margin-bottom: 10px;
}
.srx-portal-feature h3 {
	color: var(--srx-ink);
	font-size: 1rem;
	margin: 0 0 6px;
}
.srx-portal-feature p {
	color: var(--srx-text-muted);
	font-size: 0.88rem;
	margin: 0 0 12px;
	line-height: 1.45;
}
.srx-portal-feature-tag {
	display: inline-block;
	background: var(--srx-yellow);
	color: var(--srx-ink);
	border: 1.5px solid var(--srx-ink);
	font-size: 0.68rem;
	font-weight: 900;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: 100px;
}

/* Info card (application data) */
.srx-portal-info-card {
	background: #fff;
	border: 2px solid var(--srx-border-strong);
	border-radius: var(--srx-radius-lg);
	padding: 28px;
	margin-bottom: 28px;
	box-shadow: var(--srx-shadow-sm);
}
.srx-portal-info-card h2 {
	font-size: 1.3rem;
	margin: 0 0 18px;
	color: var(--srx-ink);
}
.srx-portal-info-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	margin-bottom: 14px;
}
.srx-portal-info-note {
	font-size: 0.88rem;
	color: var(--srx-text-muted);
	margin: 0;
	font-style: italic;
}

/* Help block */
.srx-portal-help {
	text-align: center;
	padding: 32px 20px;
	background: var(--srx-blue-deep);
	color: #fff;
	border-radius: var(--srx-radius-lg);
	border: 3px solid var(--srx-yellow);
}
.srx-portal-help h3 {
	color: #fff;
	font-size: 1.25rem;
	margin-bottom: 6px;
}
.srx-portal-help p {
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: 20px;
}
.srx-portal-help-ctas {
	display: flex;
	gap: 10px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.srx-portal-help-ctas .srx-btn {
	width: 100%;
	max-width: 320px;
}
.srx-portal-help-ctas .srx-btn-outline {
	background: #fff;
	color: var(--srx-ink);
	border-color: #fff;
}
.srx-portal-help-ctas .srx-btn-ghost {
	background: rgba(255,255,255,0.06);
}

@media (min-width: 640px) {
	.srx-portal-feature-grid { grid-template-columns: repeat(2, 1fr); }
	.srx-portal-info-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 720px) {
	.srx-portal-welcome-logo { display: block; }
	.srx-portal-help-ctas { flex-direction: row; }
	.srx-portal-help-ctas .srx-btn { width: auto; }
}
@media (min-width: 960px) {
	.srx-portal-feature-grid { grid-template-columns: repeat(3, 1fr); }
}

/* =======================
   ANCHOR SCROLL OFFSET
   Sticky header is ~84px desktop / 64px when scrolled. Add a buffer so
   anchored section headings aren't hidden under the bar.
   ======================= */
#how-it-works,
#watch-video,
#our-team {
	scroll-margin-top: 100px;
}
@media (max-width: 719px) {
	#how-it-works,
	#watch-video,
	#our-team {
		scroll-margin-top: 80px;
	}
}

/* =======================================================
   v3.10 — APP SHELL (dashboard)
   ======================================================= */
body.srx-shell-app {
	background: var(--srx-bg-light);
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
}
.srx-app-shell {
	display: flex;
	flex-direction: column;
	/* 100vh on iOS is the toolbar-RETRACTED height, so a 100vh shell overflows by
	   the toolbar and invents a scroll. dvh is the live value; vh stays first as
	   the fallback for anything that does not know dvh. */
	min-height: 100vh;
	min-height: 100dvh;
}
.srx-app-bar {
	background: var(--srx-ink);
	color: #fff;
	border-bottom: 2px solid var(--srx-yellow);
	/* Background fills the inset, contents sit below it. The bar still reaches the
	   top edge; only the menu button moves out from under the status bar. */
	padding-top: var(--srx-safe-top);
	position: sticky;
	top: 0;
	z-index: 50;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}
.srx-app-bar-inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 calc(18px + var(--srx-safe-right)) 0 calc(18px + var(--srx-safe-left));
	height: 60px;
	display: flex;
	align-items: center;
	gap: 16px;
}

/* Left zone: logo + back-to-site */
.srx-app-bar-left {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}
.srx-app-logo {
	display: flex;
	align-items: center;
	gap: 12px;
	color: #fff;
	text-decoration: none;
	transition: opacity 0.15s ease;
}
.srx-app-logo:hover { opacity: 0.85; color: #fff; }
.srx-app-flag {
	position: relative;
	width: 36px;
	height: 44px;
	background: var(--srx-blue-deep);
	background-image:
		radial-gradient(circle at 25% 30%, rgba(255,255,255,.25) 0.6px, transparent 1.2px),
		radial-gradient(circle at 70% 60%, rgba(255,255,255,.2) 0.8px, transparent 1.4px),
		radial-gradient(circle at 40% 80%, rgba(255,255,255,.22) 0.6px, transparent 1.2px);
	background-size: 10px 10px, 13px 13px, 11px 11px;
	border: 1.5px solid var(--srx-yellow);
	border-top: 0;
	border-radius: 0 0 3px 3px;
	padding: 6px 4px 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.srx-app-flag-grommets {
	position: absolute;
	top: 2px;
	left: 4px;
	right: 4px;
	display: flex;
	justify-content: space-between;
	pointer-events: none;
}
.srx-app-flag-grommet {
	display: block;
	width: 4px;
	height: 4px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 1px var(--srx-ink);
}
.srx-app-flag img {
	width: 100%;
	height: auto;
	max-height: 22px;
	object-fit: contain;
}
.srx-app-logo-text {
	display: none;
	flex-direction: column;
	line-height: 1.1;
}
.srx-app-logo-name {
	font-weight: 800;
	font-size: 0.92rem;
	color: #fff;
}
.srx-app-logo-sub {
	font-size: 0.7rem;
	color: rgba(255, 255, 255, 0.55);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-weight: 600;
}

/* Mobile menu toggle in app shell */
.srx-app-menu-toggle {
	width: 40px;
	height: 40px;
	background: transparent;
	border: 1.5px solid rgba(255, 255, 255, 0.2);
	border-radius: 6px;
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	padding: 8px;
	cursor: pointer;
	transition: border-color 0.15s ease;
}
.srx-app-menu-toggle:hover { border-color: var(--srx-yellow); }
.srx-app-menu-toggle span {
	display: block;
	height: 2px;
	background: #fff;
	border-radius: 2px;
}

/* Center zone: tabs */
.srx-app-tabs {
	display: none;
	flex: 1;
	justify-content: center;
	gap: 2px;
	min-width: 0;
}
.srx-app-tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	color: rgba(255, 255, 255, 0.75);
	font-weight: 600;
	font-size: 0.88rem;
	letter-spacing: 0.01em;
	text-decoration: none;
	border-radius: 8px;
	transition: background 0.15s ease, color 0.15s ease;
	white-space: nowrap;
}
.srx-app-tab:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.06);
}
.srx-app-tab.is-active {
	background: var(--srx-yellow);
	color: var(--srx-ink);
	font-weight: 700;
}
.srx-app-tab-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	margin-left: 2px;
}
.srx-app-tab-dot.is-red { background: var(--srx-red); }
.srx-app-tab-dot.is-yellow { background: var(--srx-yellow); }
.srx-app-tab.is-active .srx-app-tab-dot.is-yellow { background: var(--srx-ink); }

/* Right zone: health pill + user menu */
.srx-app-bar-right {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	margin-left: auto;
}
.srx-app-health {
	display: none;
	align-items: center;
	gap: 6px;
	padding: 5px 10px 5px 10px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 100px;
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.75rem;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.15s ease;
}
.srx-app-health:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.srx-app-health-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
}
.srx-app-health.is-ok .srx-app-health-dot { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); }
.srx-app-health.is-warn .srx-app-health-dot { background: var(--srx-yellow); box-shadow: 0 0 0 3px rgba(255, 214, 10, 0.18); }
.srx-app-health.is-error .srx-app-health-dot { background: var(--srx-red); box-shadow: 0 0 0 3px rgba(227, 43, 46, 0.22); animation: srx-pulse-red 1.6s ease-in-out infinite; }
@keyframes srx-pulse-red {
	0%, 100% { box-shadow: 0 0 0 3px rgba(227, 43, 46, 0.22); }
	50%      { box-shadow: 0 0 0 6px rgba(227, 43, 46, 0); }
}

/* User menu dropdown */
.srx-app-user-menu { position: relative; }
.srx-app-user-menu summary {
	list-style: none;
	cursor: pointer;
}
.srx-app-user-menu summary::-webkit-details-marker { display: none; }
.srx-app-user-summary {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 8px 4px 4px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 100px;
	color: #fff;
	transition: background 0.15s ease;
}
.srx-app-user-summary:hover { background: rgba(255, 255, 255, 0.12); }
.srx-app-user-avatar {
	width: 28px;
	height: 28px;
	background: var(--srx-yellow);
	color: var(--srx-ink);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 0.78rem;
	flex-shrink: 0;
}
.srx-app-user-text {
	display: none;
	flex-direction: column;
	line-height: 1.1;
	text-align: left;
}
.srx-app-user-name { font-weight: 600; font-size: 0.82rem; }
.srx-app-user-role { font-size: 0.68rem; color: rgba(255, 255, 255, 0.6); }
.srx-app-user-chev {
	color: rgba(255, 255, 255, 0.5);
	margin-right: 4px;
}
.srx-app-user-dropdown {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	min-width: 200px;
	background: #fff;
	border: 1.5px solid var(--srx-ink);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
	padding: 6px;
	z-index: 100;
}
.srx-app-user-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	color: var(--srx-ink);
	font-weight: 600;
	font-size: 0.88rem;
	text-decoration: none;
	border-radius: 6px;
	transition: background 0.12s ease, color 0.12s ease;
}
.srx-app-user-item:hover { background: var(--srx-bg-light); color: var(--srx-blue); }
.srx-app-user-item.is-danger { color: var(--srx-red); }
.srx-app-user-item.is-danger:hover { background: var(--srx-danger-bg); color: var(--srx-red); }
.srx-app-user-divider {
	height: 1px;
	background: var(--srx-border);
	margin: 4px 6px;
}

/* Mobile slide-over for app shell */
.srx-app-mobile-nav {
	position: fixed;
	inset: 0;
	z-index: 101;
	visibility: hidden;
	pointer-events: none;
}
.srx-app-mobile-nav.is-open {
	visibility: visible;
	pointer-events: auto;
}
.srx-app-mobile-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(11, 18, 32, 0.6);
	opacity: 0;
	transition: opacity 0.25s ease;
}
.srx-app-mobile-nav.is-open .srx-app-mobile-backdrop { opacity: 1; }
.srx-app-mobile-panel {
	position: absolute;
	top: 0;
	left: 0;
	padding-left: var(--srx-safe-left);
	bottom: 0;
	width: 80%;
	max-width: 320px;
	background: var(--srx-ink);
	color: #fff;
	transform: translateX(-100%);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	display: flex;
	flex-direction: column;
	border-right: 3px solid var(--srx-yellow);
}
.srx-app-mobile-nav.is-open .srx-app-mobile-panel { transform: translateX(0); }
.srx-app-mobile-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* Without this the close button lands under the Island too — the menu would
	   open and then only the backdrop could dismiss it. */
	padding: calc(18px + var(--srx-safe-top)) 20px 18px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.srx-app-mobile-title {
	font-weight: 800;
	font-size: 1rem;
	letter-spacing: 0.02em;
}
.srx-app-mobile-close {
	width: 36px;
	height: 36px;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	color: #fff;
	font-size: 1.4rem;
	font-weight: 600;
	cursor: pointer;
	line-height: 1;
}
.srx-app-mobile-close:hover { background: rgba(255, 255, 255, 0.08); }
.srx-app-mobile-tabs {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 16px 12px;
	gap: 4px;
}
.srx-app-mobile-tab {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px 16px;
	color: rgba(255, 255, 255, 0.85);
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	border-radius: 8px;
	transition: background 0.15s ease, color 0.15s ease;
}
.srx-app-mobile-tab:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.srx-app-mobile-tab.is-active {
	background: var(--srx-yellow);
	color: var(--srx-ink);
}
/* App main content area + footer */
.srx-app-main {
	flex: 1;
	background: var(--srx-bg-light);
	padding: 24px 0 32px;
}
.srx-app-footer {
	background: #fff;
	border-top: 1px solid var(--srx-border);
	padding: 14px 0;
}
.srx-app-footer-inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 18px;
	display: flex;
	gap: 8px;
	align-items: center;
	font-size: 0.78rem;
	color: var(--srx-text-muted);
}
.srx-app-footer-inner a {
	color: var(--srx-text-muted);
	text-decoration: none;
}
.srx-app-footer-inner a:hover { color: var(--srx-blue); }

/* Responsive: show desktop chrome at 720px+ */
@media (min-width: 720px) {
	.srx-app-menu-toggle { display: none; }
	.srx-app-tabs { display: flex; }
	.srx-app-logo-text { display: flex; }
	.srx-app-health { display: inline-flex; }
	.srx-app-user-text { display: flex; }
	.srx-app-user-summary { padding: 4px 10px 4px 4px; }
}

/* =======================================================
   v3.10 — LOGIN PAGE (minimal centered)
   ======================================================= */
body.srx-shell-minimal {
	background: var(--srx-blue-deep);
	min-height: 100vh;
	min-height: 100dvh; /* v3.253.1 — keyboard-safe; see .srx-shell-logo-only-wrap. */
	margin: 0;
	display: flex;
	flex-direction: column;
}
.srx-minimal-shell {
	flex: 1;
	display: flex;
	flex-direction: column;
}
.srx-minimal-shell .srx-main { flex: 1; }
.srx-login-page {
	min-height: 100vh;
	min-height: 100dvh; /* v3.253.1 — keyboard-safe; see .srx-shell-logo-only-wrap. */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px 20px;
	position: relative;
	overflow: hidden;
}
.srx-login-bg {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.04) 1.2px, transparent 2px),
		radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.03) 1.6px, transparent 2.5px),
		radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.04) 1px, transparent 1.6px),
		radial-gradient(circle at 85% 20%, rgba(255, 255, 255, 0.03) 1.4px, transparent 2px),
		linear-gradient(180deg, var(--srx-blue-deep) 0%, #050a16 100%);
	background-size: 60px 60px, 80px 80px, 50px 50px, 70px 70px, 100% 100%;
	z-index: 0;
}
.srx-login-card {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 440px;
	background: #fff;
	border: 3px solid var(--srx-ink);
	border-radius: 16px;
	padding: 40px 36px 32px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 6px 0 rgba(0, 0, 0, 0.3);
	text-align: center;
}
.srx-login-flag {
	display: inline-block;
	margin: -68px auto 18px;
	text-decoration: none;
}
.srx-login-flag .srx-flag {
	--srx-flag-w: 100px;
	transform: rotate(-2deg);
	transition: transform 0.3s ease;
}
.srx-login-flag:hover .srx-flag { transform: rotate(2deg); }
.srx-login-title {
	font-size: 1.85rem;
	font-weight: 800;
	color: var(--srx-ink);
	margin: 0 0 6px;
	letter-spacing: -0.01em;
}
.srx-login-sub {
	color: var(--srx-text-muted);
	margin: 0 0 28px;
	font-size: 0.95rem;
}
.srx-login-error {
	background: var(--srx-danger-bg);
	border: 1.5px solid var(--srx-danger);
	border-radius: 8px;
	padding: 10px 14px;
	color: #7a1d1f;
	font-size: 0.88rem;
	font-weight: 600;
	margin-bottom: 20px;
	text-align: left;
}
.srx-login-form { text-align: left; }
.srx-login-field {
	margin-bottom: 16px;
}
.srx-login-field label {
	display: block;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--srx-ink);
	margin-bottom: 6px;
	letter-spacing: 0.01em;
}
.srx-login-field input[type="text"],
.srx-login-field input[type="password"] {
	width: 100%;
	padding: 12px 14px;
	border: 2px solid var(--srx-border-strong);
	border-radius: 8px;
	font-size: 1rem;
	font-family: inherit;
	background: #fff;
	color: var(--srx-ink);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.srx-login-field input:focus {
	outline: none;
	border-color: var(--srx-blue);
	box-shadow: 0 0 0 3px rgba(27, 58, 156, 0.15);
}
/* Show/hide password toggle */
.srx-login-pwd {
	position: relative;
}
.srx-login-field .srx-login-pwd input {
	padding-right: 46px;
}
.srx-login-pwd-toggle {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	color: #64748b;
	cursor: pointer;
	border-radius: 0 8px 8px 0;
	transition: color 0.15s ease;
}
.srx-login-pwd-toggle:hover {
	color: var(--srx-blue);
}
.srx-login-pwd-toggle:focus-visible {
	outline: 2px solid var(--srx-blue);
	outline-offset: -2px;
}
.srx-login-pwd-toggle .srx-eye-off {
	display: none;
}
.srx-login-pwd.is-visible .srx-eye {
	display: none;
}
.srx-login-pwd.is-visible .srx-eye-off {
	display: inline-flex;
}
.srx-login-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 6px 0 20px;
	font-size: 0.85rem;
}
.srx-login-remember {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--srx-text-muted);
	cursor: pointer;
}
.srx-login-remember input { margin: 0; }
.srx-login-forgot {
	color: var(--srx-blue);
	font-weight: 600;
	text-decoration: none;
}
.srx-login-forgot:hover { text-decoration: underline; }
.srx-login-submit {
	margin-top: 4px;
}
.srx-login-foot {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--srx-border);
	font-size: 0.85rem;
}
.srx-login-foot a {
	color: var(--srx-text-muted);
	text-decoration: none;
	font-weight: 600;
}
.srx-login-foot a:hover { color: var(--srx-blue); }

/* =======================================================
   v3.10 — LOGO-ONLY HEADER (dealer signup)
   ======================================================= */
.srx-shell-logo-only-wrap {
	/* v3.253.1 — dvh, the same pair body.srx-shell-app has used since v3.10 and
	   .srx-wc-panel since v3.185.

	   100vh is the LARGE viewport: it does not shrink when a mobile keyboard
	   opens. So focusing a field left this shell holding its full pre-keyboard
	   height while the visible area halved, and .srx-main (flex: 1, with no
	   background of its own) stretched to fill the difference — showing the white
	   body background as a block of dead space under the form. dvh is the live
	   value and collapses with the keyboard; vh stays first as the fallback for
	   anything that does not know dvh. */
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
}
.srx-logo-only-header {
	background: #fff;
	border-bottom: 3px solid var(--srx-yellow);
	padding: calc(20px + var(--srx-safe-top)) 0 0;
	display: flex;
	justify-content: center;
	position: sticky;
	top: 0;
	z-index: 50;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}
.srx-logo-only {
	display: inline-block;
	text-decoration: none;
	margin-bottom: -12px;
}
.srx-logo-only .srx-flag {
	--srx-flag-w: 110px;
	margin: 0 auto;
}
.srx-shell-logo-only-wrap .srx-main {
	flex: 1;
}
.srx-footer-compact {
	padding: 24px 0;
}
.srx-footer-compact .srx-footer-bottom {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: center;
	text-align: center;
}

/* v3.31.9: The .srx-hp-field honeypot CSS block was removed alongside the
 * server-side and JS honeypot logic. See inc/anti-bot.php's top-of-file
 * docblock for why. The rule is gone entirely; no migration needed (the
 * class no longer appears in any rendered markup). */

/* Dashboard content container inside app-shell */
.srx-dash-content {
	width: 100%;
}
.srx-dash-content .srx-container {
	max-width: 1400px;
	padding: 0 18px;
}
.srx-dash-content h2 {
	font-size: 1.4rem;
	margin: 0 0 16px;
	color: var(--srx-ink);
}
.srx-dash-content .srx-dash-section { margin-bottom: 28px; }
.srx-dash-content .srx-h2-note {
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--srx-text-muted);
	margin-left: 8px;
}

/* Sub-dealer view inside app-shell — strip outer padding/background since app-main provides them */
body.srx-shell-app .srx-dealer-portal {
	background: transparent;
	padding: 0;
	min-height: auto;
}

/* =======================================================
   v3.12 — RED PHONE CTA (high contrast on dark backgrounds)
   Used everywhere a phone button sits on navy / dark hero / footer.
   ======================================================= */
.srx-btn-phone {
	background: var(--srx-red);
	color: #fff;
	border: 2px solid var(--srx-ink);
	box-shadow: 0 3px 0 var(--srx-ink);
	font-weight: 800;
	letter-spacing: 0.01em;
	transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease;
}
.srx-btn-phone:hover {
	background: #c1252a;
	color: #fff;
	transform: translateY(1px);
	box-shadow: 0 2px 0 var(--srx-ink);
	border-color: var(--srx-ink);
}
.srx-btn-phone:active {
	transform: translateY(2px);
	box-shadow: 0 1px 0 var(--srx-ink);
}
/* Tiny phone icon SVG inline for guaranteed crispness on every bg.

   v3.261.1 — the selector was `.srx-btn-phone .srx-phone-icon`, so the icon was
   only ever sized when a caller happened to pass that one class. The SVG itself
   carries a viewBox and no width or height, so anywhere else the global
   `img, svg, video { max-width: 100%; height: auto }` rule inflated it to fill
   its button. Four callers were passing other classes, including the funnel's
   own final CTA — this was live before the blog existed.

   An icon should carry its own size regardless of what it sits inside. */
.srx-phone-icon {
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-right: 4px;
	vertical-align: -3px;
	fill: currentColor;
}

/* Footer phone — make it RED on the navy footer */
.srx-footer-phone {
	background: var(--srx-red);
	color: #fff !important;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 16px;
	border-radius: 8px;
	border: 2px solid var(--srx-ink);
	font-weight: 800;
	font-size: 1.05rem;
	box-shadow: 0 3px 0 var(--srx-ink);
	text-decoration: none;
	transition: background 0.15s ease, transform 0.08s ease, box-shadow 0.08s ease;
}
.srx-footer-phone:hover {
	background: #c1252a;
	color: #fff !important;
	transform: translateY(1px);
	box-shadow: 0 2px 0 var(--srx-ink);
}
.srx-footer-phone::before {
	content: '';
	display: inline-block;
	width: 18px;
	height: 18px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'><path d='M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24a11.36 11.36 0 003.57.57c.55 0 1 .45 1 1V20c0 .55-.45 1-1 1A17 17 0 013 4c0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/></svg>");
	background-size: contain;
	background-repeat: no-repeat;
}

/* Dashboard sub-dealer help block: phone button → red */
.srx-portal-help-ctas .srx-btn-primary[href^="tel:"] {
	background: var(--srx-red);
	color: #fff;
	border-color: var(--srx-ink);
	box-shadow: 0 3px 0 var(--srx-ink);
}
.srx-portal-help-ctas .srx-btn-primary[href^="tel:"]:hover {
	background: #c1252a;
	color: #fff;
}

/* Mobile menu CTA phone button — red instead of white */
.srx-mobile-cta a.srx-btn-outline[href^="tel:"] {
	background: var(--srx-red);
	color: #fff;
	border-color: var(--srx-ink);
	box-shadow: 0 3px 0 var(--srx-ink);
}
.srx-mobile-cta a.srx-btn-outline[href^="tel:"]:hover {
	background: #c1252a;
	color: #fff;
}

/* =======================
   v3.22 — Modal polish
   ======================= */

/* Step transition: cross-fade + slight horizontal slide.
 * Direction is controlled by data-direction on the .srx-survey element,
 * set by JS before triggering the swap. */
.srx-step-panel {
	transition: opacity 0.28s ease, transform 0.28s ease;
}
.srx-survey[data-direction="forward"] .srx-step-panel:not(.is-active) {
	opacity: 0;
	transform: translateX(-24px);
}
.srx-survey[data-direction="forward"] .srx-step-panel.is-active {
	animation: srxStepInRight 0.32s ease-out;
}
.srx-survey[data-direction="back"] .srx-step-panel:not(.is-active) {
	opacity: 0;
	transform: translateX(24px);
}
.srx-survey[data-direction="back"] .srx-step-panel.is-active {
	animation: srxStepInLeft 0.32s ease-out;
}
@keyframes srxStepInRight {
	from { opacity: 0; transform: translateX(24px); }
	to   { opacity: 1; transform: translateX(0); }
}
@keyframes srxStepInLeft {
	from { opacity: 0; transform: translateX(-24px); }
	to   { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
	.srx-modal-card,
	.srx-step-panel,
	.srx-survey[data-direction] .srx-step-panel.is-active {
		animation: none !important;
		transition: none !important;
	}
}

/* Pill-shaped step indicator. Replaces the linear progress bar with five
 * dots labeled by step. Filled = completed. Ringed yellow = current.
 * Hollow = future. */
.srx-stepper {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 6px;
	padding: 18px 8px 22px;
	max-width: 460px;
	margin: 0 auto;
}
.srx-stepper-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	position: relative;
	min-width: 0;
}
.srx-stepper-item:not(:last-child)::after {
	content: '';
	position: absolute;
	top: 13px;
	left: calc(50% + 16px);
	right: calc(-50% + 16px);
	height: 2px;
	background: var(--srx-border);
	z-index: 0;
}
.srx-stepper-item.is-complete:not(:last-child)::after {
	background: var(--srx-success, #16a34a);
}
.srx-stepper-dot {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--srx-border);
	font-size: 0.78rem;
	font-weight: 800;
	color: var(--srx-text-muted);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
	position: relative;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
	flex-shrink: 0;
}
.srx-stepper-item.is-current .srx-stepper-dot {
	background: var(--srx-yellow);
	border-color: var(--srx-ink);
	color: var(--srx-ink);
	transform: scale(1.12);
	box-shadow: 0 0 0 4px rgba(252, 211, 77, 0.25);
}
.srx-stepper-item.is-complete .srx-stepper-dot {
	background: var(--srx-success, #16a34a);
	border-color: var(--srx-success, #16a34a);
	color: #fff;
}
.srx-stepper-label {
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--srx-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-align: center;
	line-height: 1.2;
}
.srx-stepper-item.is-current .srx-stepper-label {
	color: var(--srx-ink);
}
.srx-stepper-item.is-complete .srx-stepper-label {
	color: var(--srx-success, #16a34a);
}
@media (max-width: 560px) {
	/* v3.152.0 — hide step labels on phones: they collide at this width and are
	   redundant with the "STEP X OF 5" heading + the question already shown. The
	   numbered dots keep the progress cue. Also widen the inline survey card. */
	.srx-stepper-label { display: none; }
	.srx-stepper-item { gap: 0; }
	.srx-funnel-inline-survey { padding: 1rem 0.4rem; }
	/* v3.170.0 — the inline survey is width-constrained on phones; trim the
	   inner horizontal padding so the address field gets real room. Scoped to
	   the inline mount so the overlay popup is untouched. */
	.srx-modal-inline .srx-step-panel { padding: 22px 14px 26px; }
	.srx-modal-inline .srx-stepper { padding: 16px 6px 18px; }
}
@media (max-width: 480px) {
	.srx-stepper { padding: 14px 4px 18px; }
	.srx-stepper-dot { width: 24px; height: 24px; font-size: 0.72rem; }
	.srx-stepper-item:not(:last-child)::after { top: 11px; }
}

/* Address-confirmed inline feedback card. Shown when a user picks a
 * suggestion from the autocomplete dropdown. Subtle, confirms the
 * computer "got it", and primes the auto-advance to step 2. */
.srx-address-confirmed {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	margin-top: 12px;
	background: #ecfdf5;
	border: 2px solid #86efac;
	border-radius: var(--srx-radius);
	color: #065f46;
	font-size: 0.95rem;
	animation: srxAddressConfirmedIn 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.srx-address-confirmed[hidden] { display: none; }
.srx-address-confirmed-icon {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--srx-success, #16a34a);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	flex-shrink: 0;
}
.srx-address-confirmed-text strong {
	display: block;
	font-weight: 700;
	color: #065f46;
	margin-bottom: 2px;
}
.srx-address-confirmed-text small {
	display: block;
	color: #047857;
	font-size: 0.82rem;
}
@keyframes srxAddressConfirmedIn {
	from { opacity: 0; transform: translateY(-6px) scale(0.96); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* "Tap to choose" affordance on the choice buttons — gentle pulse on first
 * render of step 2/3/4 to signal interactivity to first-time users. Only
 * fires once per step appearance (controlled by JS). */
.srx-choice {
	transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.srx-choice:active {
	transform: scale(0.98);
}
.srx-choice.is-selected {
	box-shadow: 0 0 0 4px rgba(252, 211, 77, 0.25);
}

/* Choice-selected pop animation when a user taps a choice button.
 * Triggered by adding .srx-choice-pop class for one animation cycle. */
.srx-choice.srx-choice-pop {
	animation: srxChoicePop 0.32s ease-out;
}
@keyframes srxChoicePop {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.04); }
	100% { transform: scale(1); }
}

/* =======================
   v3.23 — Step 5 + success-screen polish
   ======================= */

/* Name confirmation card — mirrors .srx-address-confirmed visually but
 * sized smaller (less prominent than the address moment). Slides in from
 * top of its container with a subtle scale. */
.srx-name-confirmed {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	margin: -8px 0 14px;
	background: #ecfdf5;
	border: 2px solid #86efac;
	border-radius: var(--srx-radius);
	color: #065f46;
	font-size: 0.92rem;
	font-weight: 600;
	animation: srxNameConfirmedIn 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.srx-name-confirmed[hidden] { display: none; }
.srx-name-confirmed-icon {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--srx-success, #16a34a);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.78rem;
	flex-shrink: 0;
}
@keyframes srxNameConfirmedIn {
	from { opacity: 0; transform: translateY(-4px) scale(0.97); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Animated checkmark on the qualified/maybe result reveal. SVG-based so
 * the strokes draw themselves into existence instead of just appearing.
 * The circle draws first (380ms), then the tick draws (220ms after start).
 * Reduced-motion users skip the draw and just see a static check. */
.srx-result-reveal {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin-bottom: 18px;
}
.srx-result-checkmark {
	width: 68px;
	height: 68px;
	flex-shrink: 0;
}
.srx-result-checkmark-circle {
	fill: none;
	stroke: var(--srx-success, #16a34a);
	stroke-width: 3;
	stroke-dasharray: 157;
	stroke-dashoffset: 157;
	animation: srxCheckCircle 0.5s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.srx-result-checkmark-tick {
	fill: none;
	stroke: var(--srx-success, #16a34a);
	stroke-width: 4;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 48;
	stroke-dashoffset: 48;
	animation: srxCheckTick 0.32s cubic-bezier(0.65, 0, 0.45, 1) 0.32s forwards;
}
.srx-result-checkmark-warn .srx-result-checkmark-circle,
.srx-result-checkmark-warn .srx-result-checkmark-tick {
	stroke: #d97706;
}
@keyframes srxCheckCircle {
	to { stroke-dashoffset: 0; }
}
@keyframes srxCheckTick {
	to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.srx-result-checkmark-circle,
	.srx-result-checkmark-tick {
		animation: none !important;
		stroke-dashoffset: 0 !important;
	}
}

/* The "Likely Qualified" / "Possible Fit" badge has a small entrance pop
 * after the checkmark draws. Total timing: circle 0-500ms, tick 320-640ms,
 * badge 640-880ms. Headline cross-fades 700-1000ms.
 *
 * v3.24 R4: animations scoped to .srx-result-revealed (qualified + maybe
 * panels only). The not_ideal panel does NOT get this class, so its badge
 * and headline appear immediately on display — no 640ms blank-space delay
 * for users who got a "different solution needed" answer.
 */
.srx-result-revealed .srx-result-badge {
	animation: srxBadgePop 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.2) 0.64s both;
}
@keyframes srxBadgePop {
	from { opacity: 0; transform: scale(0.85); }
	to   { opacity: 1; transform: scale(1); }
}
.srx-result-revealed .srx-result-title {
	animation: srxFadeUp 0.4s ease-out 0.7s both;
}
.srx-result-revealed .srx-result-sub {
	animation: srxFadeUp 0.4s ease-out 0.85s both;
}
@keyframes srxFadeUp {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.srx-result-revealed .srx-result-badge,
	.srx-result-revealed .srx-result-title,
	.srx-result-revealed .srx-result-sub {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}

/* "Here's what happens next" timeline. Three numbered steps with vertical
 * connector line on left. Visual rhythm matches the pill stepper at top
 * (numbered circles) but laid out vertically and at the post-conversion
 * size — bigger, more confident. */
.srx-result-timeline {
	background: var(--srx-bg-light, #f8fafc);
	border-radius: var(--srx-radius-lg);
	padding: 20px 22px 18px;
	margin: 18px 0;
	animation: srxFadeUp 0.4s ease-out 1s both;
}
.srx-result-timeline-title {
	font-size: 0.78rem;
	font-weight: 800;
	color: var(--srx-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 14px;
}
.srx-result-timeline-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}
.srx-result-timeline-steps::before {
	content: '';
	position: absolute;
	left: 13px;
	top: 14px;
	bottom: 14px;
	width: 2px;
	background: var(--srx-border);
}
.srx-result-timeline-step {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 8px 0;
	position: relative;
}
.srx-result-timeline-num {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--srx-success, #16a34a);
	color: var(--srx-success, #16a34a);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 0.85rem;
	flex-shrink: 0;
	position: relative;
	z-index: 1;
}
.srx-result-timeline-step strong {
	display: block;
	color: var(--srx-ink);
	font-size: 0.96rem;
	margin-bottom: 2px;
}
.srx-result-timeline-step small {
	display: block;
	color: var(--srx-text-muted);
	font-size: 0.85rem;
	line-height: 1.45;
}
@media (prefers-reduced-motion: reduce) {
	.srx-result-timeline { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* Scheduling preference block — shows up below the booking embed (qualified)
 * or below the phone CTA (maybe). Heading + horizontal pill buttons that
 * wrap on narrow screens. Selected state shows green check-style fill. */
.srx-scheduling {
	margin-top: 22px;
	padding: 18px 20px;
	background: #fff;
	border: 2px dashed var(--srx-border);
	border-radius: var(--srx-radius-lg);
	animation: srxFadeUp 0.4s ease-out 1.15s both;
}
.srx-scheduling-heading {
	font-size: 1rem;
	font-weight: 700;
	color: var(--srx-ink);
	margin-bottom: 4px;
}
.srx-scheduling-heading::before {
	content: '⏱ ';
	margin-right: 4px;
}
.srx-scheduling-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}
.srx-scheduling-btn {
	flex: 1 1 calc(50% - 8px);
	min-width: 140px;
	padding: 10px 14px;
	background: #fff;
	border: 2px solid var(--srx-border-strong);
	border-radius: var(--srx-radius);
	color: var(--srx-ink);
	font-size: 0.92rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
	text-align: center;
}
.srx-scheduling-btn small {
	display: block;
	font-size: 0.78rem;
	font-weight: 500;
	color: var(--srx-text-muted);
	margin-top: 2px;
}
.srx-scheduling-btn:hover {
	border-color: var(--srx-ink);
	background: var(--srx-bg-light, #f8fafc);
}
.srx-scheduling-btn:active { transform: scale(0.98); }
.srx-scheduling-btn.is-selected {
	background: #ecfdf5;
	border-color: var(--srx-success, #16a34a);
	color: #065f46;
}
.srx-scheduling-btn.is-selected small { color: #047857; }
.srx-scheduling-btn.is-selected::before {
	content: '✓ ';
	color: var(--srx-success, #16a34a);
	font-weight: 800;
}
.srx-scheduling-status {
	margin-top: 12px;
	font-size: 0.88rem;
	color: var(--srx-text-muted);
}
.srx-scheduling-status.is-success { color: var(--srx-success, #16a34a); font-weight: 600; }
.srx-scheduling-status[hidden] { display: none; }

@media (max-width: 480px) {
	.srx-scheduling-btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.srx-scheduling { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* =======================
   v3.25 — Closure card on scheduling button click
   ======================= */

/* Replaces the scheduling buttons block when the user picks a time
 * preference. Gives a tangible end state — feels like the journey
 * concluded with intention rather than evaporated into a small
 * status text update. */
.srx-closure {
	margin-top: 22px;
	padding: 24px 22px;
	background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
	border: 2px solid #86efac;
	border-radius: var(--srx-radius-lg);
	text-align: center;
	animation: srxClosureIn 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes srxClosureIn {
	from { opacity: 0; transform: translateY(8px) scale(0.98); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.srx-closure { animation: none; }
}

.srx-closure-check {
	display: inline-flex;
	color: var(--srx-success, #16a34a);
	margin-bottom: 8px;
}
/* Re-use the result-checkmark draw animation pattern but scoped to the
 * closure context. The svg paths use stroke-dasharray for the draw. */
.srx-closure-check svg circle {
	stroke-dasharray: 157;
	stroke-dashoffset: 157;
	animation: srxCheckCircle 0.45s cubic-bezier(0.65, 0, 0.45, 1) 0.05s forwards;
}
.srx-closure-check svg path {
	stroke-dasharray: 48;
	stroke-dashoffset: 48;
	animation: srxCheckTick 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.35s forwards;
}
@media (prefers-reduced-motion: reduce) {
	.srx-closure-check svg circle,
	.srx-closure-check svg path {
		animation: none;
		stroke-dashoffset: 0;
	}
}

.srx-closure-headline {
	font-size: 1.45rem;
	font-weight: 800;
	color: #065f46;
	margin: 4px 0 8px;
	letter-spacing: -0.01em;
}
.srx-closure-body {
	color: #047857;
	font-size: 0.96rem;
	line-height: 1.5;
	margin: 0 auto 16px;
	max-width: 380px;
}

/* "Save our number" prompt — increases call answer rate by giving the
 * user the dealer's number at the most-engaged moment. Click-to-call
 * link doubles as one-tap save on most mobile contact apps. */
.srx-closure-save {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #fff;
	border: 2px solid #d1fae5;
	border-radius: var(--srx-radius);
	padding: 12px 14px;
	margin: 0 auto 16px;
	max-width: 380px;
	text-align: left;
}
.srx-closure-save-icon {
	font-size: 1.5rem;
	flex-shrink: 0;
}
.srx-closure-save strong {
	display: block;
	color: var(--srx-ink);
	font-size: 0.86rem;
	font-weight: 700;
	margin-bottom: 2px;
}
.srx-closure-save-phone {
	display: inline-block;
	color: var(--srx-ink);
	font-size: 1.05rem;
	font-weight: 800;
	text-decoration: none;
	letter-spacing: 0.01em;
}
.srx-closure-save-phone:hover {
	color: var(--srx-success, #16a34a);
	text-decoration: underline;
}

/* Subtle "Change my time" link — present but not competing with the
 * confirmation. User who's locked in should feel locked in; user who
 * misclicked has an obvious escape hatch. */
.srx-closure-change {
	background: transparent;
	border: 0;
	color: #047857;
	font-size: 0.88rem;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
	padding: 4px 8px;
}
.srx-closure-change:hover {
	color: #065f46;
}

@media (max-width: 480px) {
	.srx-closure { padding: 20px 16px; }
	.srx-closure-headline { font-size: 1.25rem; }
	.srx-closure-save { flex-direction: row; }
}

/* =======================
   v3.25.1 / v3.25.2 — Dashboard helpers
   ======================= */

/* Field tag in dashboard — small version badge next to new field labels. */
.srx-field-tag {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 8px;
	background: #fef3c7;
	color: #92400e;
	font-size: 0.7rem;
	font-weight: 700;
	border-radius: 100px;
	letter-spacing: 0.04em;
	vertical-align: middle;
}

/* =========================================================
   Instant Roof Estimate tool — v3.36.0
   ========================================================= */
.srx-estimate { padding: 3rem 0 4rem; }
.srx-estimate-head { text-align: center; max-width: 640px; margin: 0 auto 1.75rem; }
.srx-estimate-head h1 { margin: 0.35rem 0 0.6rem; }
.srx-estimate-lede { color: var(--srx-text-muted); font-size: 1.05rem; line-height: 1.6; }
.srx-estimate-tool {
	max-width: 560px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid var(--srx-border);
	border-radius: 18px;
	padding: 1.75rem;
	box-shadow: 0 10px 40px rgba(11, 18, 32, 0.06);
}
.srx-estimate-step { margin-bottom: 1.4rem; }
.srx-estimate-label { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--srx-navy); margin-bottom: 0.6rem; }
.srx-estimate-num {
	width: 24px; height: 24px; border-radius: 50%;
	background: var(--srx-yellow); color: var(--srx-navy);
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 0.85rem; font-weight: 800; flex-shrink: 0;
}
.srx-estimate-sqft { display: flex; align-items: center; gap: 10px; }
.srx-estimate-sqft input {
	flex: 1; font-size: 1.25rem; padding: 0.75rem 1rem;
	border: 1.5px solid var(--srx-border); border-radius: 12px; width: 100%;
}
.srx-estimate-sqft input:focus { outline: none; border-color: var(--srx-blue); }
.srx-estimate-unit { color: var(--srx-text-muted); font-weight: 600; }
.srx-estimate-hint { display: block; margin-top: 0.4rem; color: var(--srx-text-light); font-size: 0.85rem; }
.srx-estimate-pitches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.srx-estimate-pitch {
	text-align: center; cursor: pointer;
	background: #fff; border: 1.5px solid var(--srx-border); border-radius: 12px;
	padding: 0.85rem 0.5rem; display: flex; flex-direction: column; gap: 3px;
	transition: border-color 0.12s ease, background 0.12s ease;
}
.srx-estimate-pitch:hover { border-color: var(--srx-blue); }
.srx-estimate-pitch.is-selected { border: 2px solid var(--srx-blue); background: #eef2fb; }
.srx-estimate-pitch-name { font-weight: 700; color: var(--srx-navy); }
.srx-estimate-pitch-note { font-size: 0.78rem; color: var(--srx-text-light); }
.srx-estimate-pitch-rate { font-size: 0.82rem; font-weight: 700; color: var(--srx-blue); margin-top: 2px; }
.srx-estimate-result {
	background: var(--srx-navy); border-radius: 14px; padding: 1.4rem 1rem;
	text-align: center; margin: 1.5rem 0;
}
.srx-estimate-result-label { color: #9AA6B5; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; }
.srx-estimate-range { color: var(--srx-yellow); font-size: 2rem; font-weight: 800; margin: 0.3rem 0; }
.srx-estimate-summary { color: #9AA6B5; font-size: 0.9rem; }
.srx-estimate-capture { border-top: 1px solid var(--srx-border); padding-top: 1.4rem; }
.srx-estimate-capture-title { font-weight: 700; color: var(--srx-navy); margin-bottom: 0.75rem; }
.srx-estimate-capture input[type="text"],
.srx-estimate-capture input[type="tel"],
.srx-estimate-capture input[type="email"] {
	width: 100%; padding: 0.75rem 1rem; margin-bottom: 0.6rem;
	border: 1.5px solid var(--srx-border); border-radius: 12px; font-size: 1rem;
}
.srx-estimate-capture input:focus { outline: none; border-color: var(--srx-blue); }
.srx-estimate-submit { width: 100%; margin-top: 0.4rem; }
.srx-estimate-trust { text-align: center; color: var(--srx-text-light); font-size: 0.82rem; margin: 0.7rem 0 0; }
.srx-estimate-feedback { margin-top: 0.6rem; font-size: 0.9rem; text-align: center; }
.srx-estimate-feedback.is-error { color: #b42318; }
.srx-estimate-feedback.is-success { color: #1e7a4a; }
.srx-estimate-disclaimer { text-align: center; color: var(--srx-text-light); font-size: 0.78rem; line-height: 1.5; margin: 1.1rem 0 0; }
.srx-estimate-done { text-align: center; padding: 1rem 0; }
.srx-estimate-done-check {
	width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 0.75rem;
	background: #e6f6ee; color: #1e9e60; font-size: 1.5rem; font-weight: 800;
	display: flex; align-items: center; justify-content: center;
}
.srx-estimate-done-msg { color: var(--srx-navy); font-weight: 600; line-height: 1.5; }
.srx-estimate-noscript { text-align: center; color: var(--srx-text-muted); max-width: 480px; margin: 1rem auto; }
@media (max-width: 420px) {
	.srx-estimate-pitch { padding: 0.7rem 0.35rem; }
	.srx-estimate-pitch-note { display: none; }
	.srx-estimate-range { font-size: 1.65rem; }
}

/* =========================================================
   Funnel landing — v3.37.0
   ========================================================= */
.srx-funnel-hero { position: relative; padding: 3.5rem 0; color: #fff; background: var(--srx-navy); overflow: hidden; }
.srx-funnel-hero-bg { position: absolute; inset: 0; z-index: 0; }
.srx-funnel-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: var(--srx-hero-focus, 50% 40%); opacity: 1; }
.srx-funnel-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,28,48,0.82) 0%, rgba(12,28,48,0.62) 55%, rgba(12,28,48,0.88) 100%); }
.srx-funnel-price {
	display: inline-block; background: var(--srx-yellow); color: var(--srx-navy);
	font-weight: 800; font-size: clamp(0.95rem, 2.4vw, 1.1rem); padding: 6px 16px; border-radius: 100px;
}
.srx-funnel-sub { color: #cdd6e4; font-size: clamp(0.98rem, 2.6vw, 1.1rem); line-height: 1.6; margin: 0 0 1.5rem; }
.srx-funnel-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.srx-funnel-benefits { padding: 2.5rem 0; background: var(--srx-bg-tint); }
.srx-funnel-benefit-list { list-style: none; margin: 0; padding: 0; max-width: 640px; display: grid; gap: 12px; }
.srx-funnel-benefit-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 1.05rem; color: var(--srx-text); }
.srx-funnel-check {
	flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
	background: var(--srx-success); color: #fff; font-weight: 800;
	display: inline-flex; align-items: center; justify-content: center; font-size: 0.9rem;
}
.srx-funnel-ba { padding: 2.5rem 0; }
.srx-funnel-ba-title { text-align: center; margin-bottom: 1.5rem; }
.srx-funnel-ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 720px; margin: 0 auto; }
.srx-funnel-ba-grid figure { margin: 0; }
.srx-funnel-ba-grid img { width: 100%; border-radius: 12px; display: block; }
.srx-funnel-ba-grid figcaption { text-align: center; font-weight: 700; color: var(--srx-text-muted); margin-top: 8px; }
.srx-funnel-form { text-align: left; }
.srx-funnel-form input {
	width: 100%; padding: 0.8rem 1rem; margin-bottom: 0.7rem;
	border: 1.5px solid var(--srx-border); border-radius: 12px; font-size: 1rem;
	background: #fff; color: var(--srx-ink);
}
.srx-funnel-form input:focus { outline: none; border-color: var(--srx-blue); }
.srx-funnel-submit { width: 100%; margin-top: 0.3rem; }
.srx-funnel-feedback { margin-top: 0.6rem; font-size: 0.9rem; text-align: center; }
.srx-funnel-feedback.is-error { color: #b42318; }
.srx-funnel-feedback.is-success { color: #1e7a4a; }
/* Roof Advice — the blog (v3.258.0).
   A constrained measure on the post itself: this is the one place on the site
   somebody reads more than three sentences, and line length is what decides
   whether they finish. */
.srx-advice-hero { padding: 56px 0 40px; }
.srx-advice-list { display: grid; gap: 18px; max-width: 780px; margin: 0 auto; }
.srx-advice-card {
	display: flex; gap: 16px; align-items: flex-start;
	border: 1px solid var(--srx-border); border-radius: 14px;
	padding: 16px; background: #fff;
}
.srx-advice-thumb { flex: none; width: 160px; border-radius: 10px; overflow: hidden; }
.srx-advice-thumb img { display: block; width: 100%; height: 108px; object-fit: cover; }
.srx-advice-body { flex: 1; min-width: 0; }
.srx-advice-body h2 { margin: 0 0 4px; font-size: 1.15rem; line-height: 1.3; }
.srx-advice-body h2 a { color: var(--srx-ink); text-decoration: none; }
.srx-advice-body h2 a:hover { color: var(--srx-red); }
.srx-advice-body p { margin: 0 0 10px; font-size: 0.92rem; color: var(--srx-text-muted); }
.srx-advice-meta { font-size: 0.79rem; color: var(--srx-text-light); margin: 0 0 8px; }
.srx-advice-more { font-weight: 700; font-size: 0.88rem; color: var(--srx-red); text-decoration: none; }
.srx-advice-more:hover { text-decoration: underline; }

/* A post (v3.260.0), rebuilt against the dealer's previous articles.

   The measure is the whole game here. This is the one page on the site where
   somebody reads more than three sentences, and line length decides whether
   they finish. srx-container-narrow gives roughly 68 characters, which is where
   the eye stops having to hunt for the next line. */
.srx-post { padding: 40px 0 8px; }
/* v3.261.3 — the actual measure.
   The comment above claimed roughly 68 characters and nothing enforced it:
   .srx-container-narrow is 860px, which at this type size runs to about 98
   characters a line. Comfortable reading is 60-75. 640px gives ~74.
   Scoped to .srx-post so page-become-a-shingle-rx-dealer keeps its own width. */
.srx-post .srx-container-narrow { max-width: 640px; }
.srx-post-crumbs { font-size: 0.82rem; color: var(--srx-text-light); margin: 0 0 18px; }
.srx-post-crumbs a { color: var(--srx-text-muted); text-decoration: none; }
.srx-post-crumbs a:hover { color: var(--srx-red); }
.srx-post-crumbs span { margin: 0 7px; color: var(--srx-border-strong); }

.srx-post-head h1 {
	margin: 0 0 12px;
	font-size: 2.3rem; line-height: 1.14; letter-spacing: -0.015em;
	color: var(--srx-ink);
}
/* The summary, doing its second job. One field: this line and the description
   Google shows. Asking for the same sentence in two boxes is how one of them
   ends up empty. */
.srx-post-dek {
	margin: 0 0 26px;
	font-size: 1.1rem; line-height: 1.55; color: var(--srx-text-muted);
}

.srx-post-hero { margin: 0 0 22px; border-radius: 16px; overflow: hidden; }
.srx-post-hero img { display: block; width: 100%; height: auto; }

.srx-post-byline {
	font-size: 0.84rem; color: var(--srx-text-light);
	margin: 0 0 26px; padding-bottom: 20px;
	border-bottom: 1px solid var(--srx-border);
}
.srx-post-byline span { margin: 0 6px; }

.srx-post-body { font-size: 1.05rem; line-height: 1.75; color: var(--srx-text); }
.srx-post-body > *:first-child { margin-top: 0; }
.srx-post-body p { margin: 0 0 1.15em; }
.srx-post-body h2 {
	font-size: 1.5rem; line-height: 1.25; color: var(--srx-ink);
	margin: 2em 0 0.6em; letter-spacing: -0.01em;
}
.srx-post-body h3 { font-size: 1.15rem; color: var(--srx-ink); margin: 1.7em 0 0.5em; }
.srx-post-body ul, .srx-post-body ol { margin: 0 0 1.15em; padding-left: 1.3em; }
.srx-post-body li { margin-bottom: 0.5em; }
.srx-post-body a { color: var(--srx-red); }
.srx-post-body strong { color: var(--srx-ink); }
/* v3.261.1 — max-width, not width.
   `width: 100%` stretched EVERY image in a post to the full measure, including
   things that should stay small. It is also what turned the emoji images in a
   pasted article into full-width pictures of a rocket. An image is never
   improved by being scaled up past its own resolution. */
.srx-post-body img { border-radius: 12px; margin: 1.7em auto; max-width: 100%; height: auto; }
.srx-post-body img.emoji, .srx-post-body img[alt]:not([alt=""])[src*="/emoji/"] {
	display: inline; width: 1em; height: 1em; margin: 0 0.07em; border-radius: 0; vertical-align: -0.1em;
}

/* Their posts used pull quotes well — an owner's line, set apart. Worth having
   a real style rather than letting it fall back to browser italics. */
.srx-post-body blockquote {
	margin: 1.8em 0; padding: 2px 0 2px 20px;
	border-left: 3px solid var(--srx-yellow);
	font-size: 1.08rem; line-height: 1.6; color: var(--srx-text);
	font-style: italic;
}
.srx-post-body blockquote p:last-child { margin-bottom: 0; }

/* A rule between sections, the way theirs read. */
.srx-post-body hr { border: 0; border-top: 1px solid var(--srx-border); margin: 2.2em 0; }

/* Pagination (v3.261.3).
   the_posts_pagination() in home.php emits WordPress's own markup and the theme
   had not one rule for it, so past ten posts the index ended in a row of naked
   browser-blue links. */
.srx-advice-list + .navigation.pagination { margin-top: 34px; }
.navigation.pagination .nav-links {
	display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center;
}
.navigation.pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding: 0 13px;
	border: 1px solid var(--srx-border-strong); border-radius: 9px;
	background: #fff; color: var(--srx-text); text-decoration: none;
	font-size: 0.92rem; font-weight: 700;
}
.navigation.pagination a.page-numbers:hover { border-color: var(--srx-navy); color: var(--srx-navy); }
.navigation.pagination .page-numbers.current {
	background: var(--srx-navy); border-color: var(--srx-navy); color: #fff;
}
.navigation.pagination .page-numbers.dots { border-color: transparent; background: none; }

/* WordPress prints a heading for screen readers inside the pagination nav and
   assumes the theme hides it. Nothing here did, so "Posts navigation" was
   rendering as visible text. */
.screen-reader-text {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (max-width: 719px) {
	.srx-advice-card { flex-direction: column; }
	.srx-advice-thumb { width: 100%; }
	.srx-advice-thumb img { height: 150px; }
	.srx-advice-hero { padding: 40px 0 28px; }
	.srx-post { padding: 26px 0 4px; }
	.srx-post-head h1 { font-size: 1.72rem; }
	.srx-post-dek { font-size: 1rem; }
	.srx-post-body { font-size: 1rem; line-height: 1.7; }
	.srx-post-body h2 { font-size: 1.28rem; }
	.srx-post-hero { border-radius: 12px; }
	/* v3.261.3 — a pull quote set larger than the body it interrupts reads as a
	   mistake once the body has come down to 1rem. */
	.srx-post-body blockquote { font-size: 1rem; padding-left: 14px; margin: 1.4em 0; }
	.srx-post-body h3 { font-size: 1.08rem; }
	/* 2rem is 32px — on a 360px screen that is four words to a line. */
	.srx-cta-band { padding: 40px 0; }
	.srx-cta-band h2 { font-size: 1.5rem; }
	.srx-cta-band p { margin-bottom: 20px; }
	.srx-advice-body h2 { font-size: 1.08rem; }
	.navigation.pagination .page-numbers { min-width: 38px; height: 38px; padding: 0 11px; }
}

/* Our Work — dealer before/after proof (v3.257.0).
   Pairs, not single photos: half a before-and-after is not proof of anything,
   so the two images are locked side by side and always the same height. */
.srx-work-hero { padding: 56px 0 40px; }
.srx-work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.srx-work-card { margin: 0; border: 1px solid var(--srx-border); border-radius: 14px; overflow: hidden; background: #fff; }
.srx-work-pair { display: flex; }
.srx-work-half { position: relative; flex: 1; min-width: 0; }
.srx-work-half img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.srx-work-tag {
	position: absolute; left: 8px; top: 8px;
	background: rgba(255, 255, 255, 0.94); color: var(--srx-navy);
	font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
	padding: 2px 7px; border-radius: 4px;
}
.srx-work-cap { padding: 12px 14px; }
.srx-work-cap strong { display: block; font-size: 0.98rem; color: var(--srx-ink); }
.srx-work-cap span { display: block; font-size: 0.85rem; color: var(--srx-text-muted); margin-top: 2px; }
@media (max-width: 719px) {
	.srx-work-grid { grid-template-columns: 1fr; gap: 16px; }
	.srx-work-hero { padding: 40px 0 28px; }
}

/* Shared confirmation card (v3.256.0) — funnel quote form, contact form,
   roof photo. One set of rules because one renderer builds all three; see
   window.SHINGLERX_CONFIRM in assets/js/main.js.

   Values are read back from what the visitor just typed, so the read-back rows
   are deliberately the plainest thing here: they are there to be checked, not
   admired. The only emphasis on the card is the check mark and the call button. */
.srx-confirm { padding: 0.25rem 0; }
.srx-confirm-check {
	width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 0.9rem;
	background: var(--srx-success-bg); color: var(--srx-success);
	font-size: 1.6rem; font-weight: 800;
	display: flex; align-items: center; justify-content: center;
}
.srx-confirm h2 { margin: 0 0 0.3rem; font-size: 1.3rem; color: var(--srx-navy); text-align: center; }
.srx-confirm-lede { margin: 0 0 1.15rem; text-align: center; color: var(--srx-text-muted); font-size: 0.92rem; }
.srx-confirm-lede b { color: var(--srx-text); }
.srx-confirm-recap { border: 1px solid var(--srx-border); border-radius: 12px; overflow: hidden; margin: 0 0 14px; }
.srx-confirm-row { display: flex; gap: 12px; padding: 10px 13px; font-size: 0.87rem; align-items: flex-start; }
.srx-confirm-row + .srx-confirm-row { border-top: 1px solid var(--srx-border); }
.srx-confirm-k { color: var(--srx-text-light); flex: none; width: 72px; font-size: 0.79rem; padding-top: 1px; }
.srx-confirm-v { color: var(--srx-text); font-weight: 600; }
.srx-confirm-steps { list-style: none; margin: 0 0 15px; padding: 0; }
.srx-confirm-steps li { display: flex; gap: 11px; padding: 6px 0; font-size: 0.88rem; line-height: 1.45; }
.srx-confirm-n {
	flex: none; width: 20px; height: 20px; border-radius: 50%;
	background: var(--srx-navy); color: #fff; font-size: 0.68rem; font-weight: 800;
	display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
.srx-confirm-cta { display: block; width: 100%; text-align: center; }
.srx-confirm-foot { margin: 10px 0 0; text-align: center; font-size: 0.79rem; color: var(--srx-text-light); }

.srx-funnel-done { text-align: center; padding: 1rem 0; }
.srx-funnel-done-check {
	width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 1rem;
	background: #e6f6ee; color: #1e9e60; font-size: 1.75rem; font-weight: 800;
	display: flex; align-items: center; justify-content: center;
}
.srx-funnel-trust { padding: 2rem 0 3rem; text-align: center; }
.srx-funnel-trust-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-bottom: 1.25rem; color: var(--srx-text-muted); font-weight: 600; }
@media (max-width: 560px) {
	.srx-funnel-ba-grid { grid-template-columns: 1fr; }
}

/* Split video hero — video sits above the tool in the hero-side column (v3.161.0) */
.srx-funnel-hero-copy .srx-funnel-hero-video-wrap { margin-bottom: 18px; }
.srx-funnel-hero-video-wrap { position: relative; width: 100%; max-width: 560px; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--srx-navy); }
.srx-funnel-hero-video-wrap video { background: var(--srx-navy); object-fit: cover; }
.srx-funnel-video-endframe { position: absolute; inset: 0; z-index: 2; border: 0; padding: 0; margin: 0; cursor: pointer; background-color: var(--srx-navy); background-position: center; background-size: cover; background-repeat: no-repeat; }
.srx-funnel-video-endframe::after { content: ""; position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(11, 18, 32, 0.55) no-repeat center; box-shadow: 0 4px 18px rgba(0,0,0,0.35); }
.srx-funnel-video-endframe::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-40%, -50%); z-index: 3; border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent #fff; }
.srx-funnel-hero-video-wrap iframe, .srx-funnel-hero-video-wrap video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Funnel CTA — booking calendar embed (v3.39.0) */
.srx-funnel-booking { width: 100%; }
.srx-funnel-booking iframe { width: 100%; min-height: 720px; border: 0; display: block; border-radius: 10px; }

/* Dynamic tool CTAs — v3.42.0 */
.srx-hero-ctas .srx-btn-outline { border: 1.5px solid rgba(255, 255, 255, 0.55); color: #fff; background: transparent; }
.srx-hero-ctas .srx-btn-outline:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }
/* v3.43.0 — keep each button's words on one line; wrap the row, not the text */
.srx-hero-ctas .srx-btn { white-space: nowrap; width: 100%; }
@media (min-width: 720px) {
	.srx-hero-ctas { flex-wrap: wrap; }
	.srx-hero-ctas .srx-btn { width: auto; flex: 0 0 auto; }
}

/* Mobile sticky CTA bar (home page only; body.home gets the spacer) */
.srx-mobile-cta-bar { display: none; }
@media (max-width: 768px) {
	.srx-mobile-cta-bar { display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid var(--srx-border); box-shadow: 0 -4px 16px rgba(11, 18, 32, 0.08); }
	.srx-mobile-cta-bar .srx-btn { flex: 1; text-align: center; }
	.srx-mobile-cta-bar .srx-mobile-cta-call { flex: 0 0 auto; padding-left: 22px; padding-right: 22px; }
	body.home { padding-bottom: 76px; }
}

/* Send a Roof Photo — v3.50.0 */
.srx-photo { padding: 48px 0 64px; background: var(--srx-bg-tint, #f4f6fb); }
.srx-photo-inner { max-width: 620px; }
.srx-photo-head { text-align: center; margin-bottom: 26px; }
.srx-photo-head h1 { margin: 8px 0 10px; }
.srx-photo-lede { color: var(--srx-text-muted); font-size: 1.05rem; line-height: 1.55; max-width: 520px; margin: 0 auto; }
.srx-photo-form { background: #fff; border: 1px solid var(--srx-border); border-radius: 16px; padding: 24px; box-shadow: 0 8px 30px rgba(11, 18, 32, 0.06); }
.srx-photo-field { margin-bottom: 16px; }
.srx-photo-field > label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 6px; color: var(--srx-ink); }
.srx-photo-opt { font-weight: 400; color: var(--srx-text-light); }
.srx-photo-field input[type="text"], .srx-photo-field input[type="tel"], .srx-photo-field input[type="email"], .srx-photo-field textarea {
	width: 100%; box-sizing: border-box; border: 1px solid var(--srx-border-strong); border-radius: 10px; padding: 12px 14px; font-size: 16px; background: #fff; color: var(--srx-ink); font-family: inherit;
}
.srx-photo-field input:focus, .srx-photo-field textarea:focus { outline: none; border-color: var(--srx-blue); box-shadow: 0 0 0 3px rgba(27, 58, 156, 0.12); }
.srx-photo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .srx-photo-row { grid-template-columns: 1fr; } }
.srx-photo-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; border: 2px dashed var(--srx-border-strong); border-radius: 14px; padding: 26px 18px; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; }
.srx-photo-drop:hover { border-color: var(--srx-blue); background: var(--srx-bg-tint, #f4f6fb); }
.srx-photo-drop.has-file { border-color: var(--srx-success); background: #f0faf4; }
.srx-photo-drop-icon { color: var(--srx-blue); }
.srx-photo-drop-icon svg { width: 34px; height: 34px; }
.srx-photo-drop-text { font-weight: 600; color: var(--srx-ink); }
.srx-photo-drop-hint { font-size: 0.82rem; color: var(--srx-text-muted); }
.srx-photo-filename { font-size: 0.85rem; color: var(--srx-success); font-weight: 600; margin-top: 4px; word-break: break-all; }
.srx-photo-submit { width: 100%; margin-top: 6px; }
.srx-photo-msg { text-align: center; font-size: 0.9rem; margin: 10px 0 0; min-height: 1.2em; }
.srx-photo-msg.is-error { color: #b42318; }
.srx-photo-privacy { text-align: center; font-size: 0.8rem; color: var(--srx-text-light); margin: 10px 0 0; }
.srx-photo-done { background: #fff; border: 1px solid var(--srx-border); border-radius: 16px; padding: 44px 24px; text-align: center; box-shadow: 0 8px 30px rgba(11, 18, 32, 0.06); }
.srx-photo-done-check { width: 56px; height: 56px; border-radius: 50%; background: var(--srx-success); color: #fff; font-size: 30px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.srx-photo-done h2 { margin: 0 0 8px; }
.srx-photo-done p { color: var(--srx-text-muted); max-width: 420px; margin: 0 auto; line-height: 1.55; }

/* Funnel landing redesign — v3.55.0 */
.srx-funnel-eyebrow { display: flex; align-items: center; gap: 8px; color: #cdd6e4; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.9rem; }
.srx-funnel-stars { color: var(--srx-yellow); letter-spacing: 1px; }
.srx-funnel-hero-badges { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 1.25rem; color: #9aa4b8; font-size: 0.85rem; }
.srx-funnel-hero-badges span { display: inline-flex; align-items: center; gap: 6px; }
.srx-funnel-badge-ic { color: #4ec77f; font-weight: 800; }

.srx-funnel-anchor { padding: 2rem 0; background: #fff; }
.srx-funnel-anchor-grid { display: flex; gap: 16px; max-width: 560px; margin: 0 auto; }
.srx-funnel-anchor-box { flex: 1; border-radius: 14px; padding: 1.1rem; text-align: center; border: 1px solid var(--srx-border); }
.srx-funnel-anchor-label { display: block; font-size: 0.8rem; color: var(--srx-text-muted); margin-bottom: 4px; }
.srx-funnel-anchor-price { display: block; font-size: 1.4rem; font-weight: 800; color: var(--srx-navy); }
.srx-funnel-anchor-old .srx-funnel-anchor-price { color: var(--srx-text-light); text-decoration: line-through; }
.srx-funnel-anchor-new { border: 2px solid var(--srx-success); background: #f1faf4; }
.srx-funnel-anchor-note { text-align: center; font-size: 0.9rem; color: var(--srx-text-muted); margin: 0.9rem 0 0; }

.srx-funnel-review { padding: 2.25rem 0; background: #fff6d6; text-align: center; }
.srx-funnel-review-stars { color: #d9a400; font-size: 1.1rem; letter-spacing: 2px; }
.srx-funnel-review-quote { max-width: 620px; margin: 0.6rem auto 0.5rem; font-size: 1.2rem; line-height: 1.5; color: #4a3f16; font-style: italic; }
.srx-funnel-review-by { color: #8a7a3f; font-size: 0.95rem; font-style: normal; }
/* v3.151.0 — video testimonial: optional per-funnel homeowner review video. */
.srx-funnel-video-review { padding: 2.5rem 0; text-align: center; }
.srx-funnel-video-review-wrap { position: relative; width: 100%; max-width: 720px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; box-shadow: 0 12px 40px rgba(0,0,0,0.18); }
.srx-funnel-video-review-wrap iframe, .srx-funnel-video-review-wrap video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* v3.153.0 — optional funnel copy sections: reframe hook (above the tool) + local angle. */
.srx-funnel-hook { background: #fff8e0; border-left: 4px solid var(--srx-yellow, #f7c948); border-radius: 0 10px 10px 0; padding: 12px 16px; margin: 18px 0 4px; color: #4a3f16; font-size: 0.95rem; line-height: 1.5; font-weight: 500; }
.srx-funnel-local { padding: 1.5rem 0; }
.srx-funnel-local-card { max-width: 620px; margin: 0 auto; background: #f4f7fa; border-radius: 12px; padding: 16px 20px; color: #3a4658; font-size: 1rem; line-height: 1.55; text-align: center; }

/* v3.305.16 — STRAIGHT TALK (the GO'd two-funnel spec). The amber honesty
 * box between content and proof — the WA-countersign amber family, pinned by
 * law: bg #FFFBEB · border #F5DE9C · label #8a6d1a · text #3d3319. */
.srx-funnel-straight { padding: 1.5rem 0; }
.srx-funnel-straight-box { max-width: 620px; margin: 0 auto; background: #FFFBEB; border: 1px solid #F5DE9C; border-radius: 12px; padding: 18px 20px; }
.srx-funnel-straight-label { display: block; color: #8a6d1a; font-weight: 800; font-size: 0.72rem; letter-spacing: 0.09em; margin-bottom: 6px; }
.srx-funnel-straight-title { display: block; color: #3d3319; font-size: 1.06rem; margin-bottom: 6px; }
.srx-funnel-straight-body { margin: 0; color: #3d3319; font-size: 0.98rem; line-height: 1.6; }
/* v3.154.0 — Replace vs. Restore & Protect contrast (optional, for seller funnels). */
.srx-funnel-contrast { padding: 2rem 0; background: #fff; }
.srx-funnel-contrast-sub { text-align: center; color: #5a6472; margin: -4px 0 18px; font-size: 0.98rem; }
.srx-funnel-contrast-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 640px; margin: 0 auto; }
.srx-funnel-contrast-col { border-radius: 12px; padding: 16px 14px; }
.srx-funnel-contrast-replace { background: #f5f2ee; border: 1px solid #e4ddd4; }
.srx-funnel-contrast-restore { background: #fff8e0; border: 2px solid var(--srx-yellow, #f7c948); }
.srx-funnel-contrast-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 10px; }
.srx-funnel-contrast-replace .srx-funnel-contrast-label { color: #9a6a4a; }
.srx-funnel-contrast-restore .srx-funnel-contrast-label { color: #b8860b; }
.srx-funnel-contrast-cost { font-size: 1.35rem; font-weight: 700; margin-bottom: 12px; }
.srx-funnel-contrast-replace .srx-funnel-contrast-cost { color: #8a5a3a; }
.srx-funnel-contrast-restore .srx-funnel-contrast-cost { color: #0c1c30; }
.srx-funnel-contrast-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.srx-funnel-contrast-col li { display: flex; gap: 7px; align-items: flex-start; font-size: 0.9rem; line-height: 1.35; }
.srx-funnel-contrast-replace li { color: #6b6156; }
.srx-funnel-contrast-restore li { color: #4a4234; }
.srx-funnel-contrast-x { color: #c0392b; font-weight: 700; flex-shrink: 0; }
.srx-funnel-contrast-ck { color: #16a34a; font-weight: 700; flex-shrink: 0; }

.srx-funnel-section-title { text-align: center; margin-bottom: 1.5rem; }
.srx-funnel-benefits .srx-funnel-benefit-list { margin: 0 auto; }

.srx-funnel-steps { padding: 2.5rem 0; }
.srx-funnel-step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 820px; margin: 0 auto; }
.srx-funnel-step { text-align: center; }
.srx-funnel-step-num { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--srx-navy); color: var(--srx-yellow); font-weight: 800; font-size: 1.1rem; margin-bottom: 0.75rem; }
.srx-funnel-step strong { display: block; font-size: 1.05rem; margin-bottom: 0.3rem; color: var(--srx-navy); }
.srx-funnel-step span:not(.srx-funnel-step-num) { display: block; color: var(--srx-text-muted); font-size: 0.95rem; line-height: 1.5; }

.srx-funnel-form-price { display: block; color: var(--srx-navy); font-weight: 700; margin-top: 4px; }
.srx-funnel-form-trust { margin-top: 0.9rem; font-size: 0.85rem; color: var(--srx-success); text-align: center; }

.srx-funnel-guarantee { padding: 2.5rem 0 3rem; }
.srx-funnel-guarantee-inner { max-width: 720px; margin: 0 auto; background: var(--srx-navy); color: #fff; border-radius: 16px; padding: 1.5rem 1.75rem; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.srx-funnel-guarantee-ic { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--srx-success); color: #fff; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.srx-funnel-guarantee-inner > div { flex: 1; min-width: 200px; }
.srx-funnel-guarantee-inner strong { display: block; font-size: 1.05rem; }
.srx-funnel-guarantee-inner span { color: #cdd6e4; font-size: 0.95rem; }

@media (max-width: 560px) {
	.srx-funnel-step-grid { grid-template-columns: 1fr; gap: 14px; }
	.srx-funnel-anchor-grid { flex-direction: column; }
	.srx-funnel-guarantee-inner { flex-direction: column; text-align: center; align-items: stretch; }
}

/* Funnel landing v2 — split hero + form above the fold (v3.56.0) */
/* v3.251.0 — centre, not start. The copy column carries a video, a headline,
   a paragraph and a bullet list; the form is a short card. Top-aligned they
   left a stack of empty hero under the button, with the call to action
   floating high and alone. Centring costs nothing and reads as one unit.
   Below 900px the grid is a single column and this has no effect. */
.srx-funnel-hero-split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 34px; align-items: center; }
.srx-funnel-hero-copy { min-width: 0; }
.srx-funnel-hero-copy h1 { color: #fff; font-size: clamp(1.65rem, 4.5vw, 2.15rem); line-height: 1.14; margin: 0.6rem 0 0.75rem; }
.srx-funnel-hero-side { min-width: 0; }
.srx-funnel-hero-points { list-style: none; margin: 1.1rem 0 1.4rem; padding: 0; display: grid; gap: 9px; }
.srx-funnel-hero-points li { display: flex; align-items: flex-start; gap: 9px; color: #dbe3ef; font-size: clamp(0.92rem, 2.4vw, 1rem); line-height: 1.4; }
.srx-funnel-point-ic { color: #4ec77f; font-weight: 800; flex-shrink: 0; }

.srx-funnel-form-card { background: #fff; border-radius: 16px; padding: 1.5rem 1.4rem; box-shadow: 0 16px 44px rgba(0, 0, 0, 0.28); }
.srx-funnel-form-card h2 { margin: 0 0 0.35rem; text-align: center; font-size: 1.4rem; color: var(--srx-navy); }
.srx-funnel-form-lede { text-align: center; color: var(--srx-text-muted); font-size: 0.92rem; margin: 0 0 1.1rem; line-height: 1.45; }
.srx-funnel-form-card .srx-funnel-form-price { display: block; color: var(--srx-success); font-weight: 700; margin-top: 3px; }
.srx-funnel-form-card .srx-funnel-submit { width: 100%; margin-top: 0.3rem; }
.srx-funnel-form-trust { margin-top: 0.9rem; font-size: 0.82rem; color: var(--srx-success); text-align: center; }

.srx-funnel-trust-strip { background: #0f1830; padding: 0.9rem 0; }
.srx-funnel-trust-strip .srx-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.srx-funnel-trust-strip span { color: #9aa4b8; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 6px; }

.srx-funnel-benefit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; max-width: 720px; margin: 0 auto; }
.srx-funnel-benefit-card { background: #fff; border: 1px solid var(--srx-border); border-radius: 12px; padding: 1rem 1.1rem; display: flex; align-items: flex-start; gap: 11px; font-size: 1rem; color: var(--srx-text); line-height: 1.4; }

.srx-funnel-final { background: var(--srx-yellow); padding: 2.75rem 0; text-align: center; }
.srx-funnel-final h2 { color: var(--srx-navy); margin: 0 0 0.4rem; }
.srx-funnel-final p { color: #5a4e12; margin: 0 0 1.3rem; font-weight: 600; }
.srx-funnel-final-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.srx-btn-dark { background: var(--srx-navy); color: #fff; }
.srx-btn-dark:hover { background: #1a2740; color: #fff; }
.srx-funnel-final .srx-btn-outline { background: #fff; border-color: var(--srx-navy); color: var(--srx-navy); }
.srx-btn-phone, .srx-funnel-final-phone { white-space: nowrap; }

.srx-funnel-guarantee-inner { justify-content: center; }
.srx-funnel-guarantee-inner > div { flex: 0 1 auto; min-width: 0; }

/* v3.251.1 — anchor offset for the lead tool.
   The bottom CTA is a plain href="#srx-funnel-cta", so the browser does a
   native jump and lands the card's top edge at the very top of the viewport —
   directly underneath the sticky masthead, which then covers the first field.
   The sticky CTA never showed it because its JS centres the card instead.
   scroll-margin-top fixes BOTH paths and every future link to this id, and it
   keeps working with JavaScript off. The safe-area inset mirrors the header's
   own padding formula so a notched phone gets the same clearance. */
.srx-funnel-convert { scroll-margin-top: calc(132px + var(--srx-safe-top, 0px)); }
@media (max-width: 899px) { .srx-funnel-convert { scroll-margin-top: calc(120px + var(--srx-safe-top, 0px)); } }
@media (max-width: 599px) { .srx-funnel-convert { scroll-margin-top: calc(108px + var(--srx-safe-top, 0px)); } }

/* Hero responsive tiers — v3.163.0 (stack seam raised 720 -> 900; tiered padding; video caps; mobile benefit trim) */
@media (max-width: 1439px) { .srx-funnel-hero { padding: 2.75rem 0; } }
@media (max-width: 899px) {
	.srx-funnel-hero { padding: 2.5rem 0; }
	.srx-funnel-hero-split { grid-template-columns: 1fr; gap: 24px; }
	.srx-funnel-hero-video-wrap { margin-inline: auto; }
}
@media (max-width: 599px) {
	.srx-funnel-hero { padding: 2rem 0; }
	.srx-funnel-hero-video-wrap { max-width: 380px; }
	.srx-funnel-hero-points li:nth-child(n+3) { display: none; }
}

/* A2P dual-consent component (v3.59.0) */
.srx-consent { margin-top: 14px; display: grid; gap: 10px; }
.srx-consent-row { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.srx-consent-row input[type="checkbox"] { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--srx-success); }
.srx-consent-text { font-size: 0.78rem; color: var(--srx-text-muted); line-height: 1.5; }
.srx-consent-fine { font-size: 0.72rem; color: var(--srx-text-light); line-height: 1.5; margin: 2px 0 0; }
.srx-consent-fine a { color: var(--srx-blue); text-decoration: underline; }

/* Mobile header: logo + menu only (v3.62.0) */
@media (max-width: 959px) {
	.srx-header-phone,
	.srx-header-quote { display: none; }
}

/* Instant Estimate — 5-step gated flow (v3.64.0) */
.srx-est-flow { padding: 40px 0 64px; }
.srx-est-shell { max-width: 560px; }
.srx-est-progress { margin-bottom: 22px; }
.srx-est-progress-track { height: 8px; background: var(--srx-border); border-radius: 100px; overflow: hidden; }
.srx-est-progress-fill { height: 100%; background: var(--srx-blue); border-radius: 100px; transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
.srx-est-progress-label { font-size: 0.78rem; font-weight: 700; color: var(--srx-text-muted); margin-top: 8px; letter-spacing: 0.3px; }
.srx-est-panel { display: none; }
.srx-est-panel.is-active { display: block; animation: srxEstIn 0.28s ease; }
@keyframes srxEstIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.srx-est-banner { display: inline-block; background: var(--srx-yellow); color: var(--srx-ink); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.5px; text-transform: uppercase; padding: 5px 12px; border-radius: 100px; margin-bottom: 12px; }
.srx-est-q { font-size: 1.6rem; color: var(--srx-ink); margin: 0 0 6px; line-height: 1.2; }
.srx-est-sub { color: var(--srx-text-muted); font-size: 0.95rem; margin: 0 0 20px; }
.srx-est-opts { display: grid; gap: 12px; }
.srx-est-opts-2x2 { grid-template-columns: 1fr 1fr; }
.srx-est-opts-2 { grid-template-columns: 1fr 1fr; }
.srx-est-opts-3 { grid-template-columns: 1fr 1fr 1fr; }
.srx-est-opt { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 64px; padding: 16px 12px; background: #fff; border: 2px solid var(--srx-border-strong); border-radius: var(--srx-radius); font-weight: 700; font-size: 1rem; color: var(--srx-ink); cursor: pointer; transition: transform 0.08s ease, border-color 0.12s ease, box-shadow 0.12s ease; text-align: center; }
.srx-est-opt:hover { border-color: var(--srx-blue); }
.srx-est-opt.is-selected { border-color: var(--srx-ink); background: #fffdf2; box-shadow: 0 3px 0 var(--srx-ink); }
.srx-est-opt-icon { min-height: 128px; }
.srx-est-opt small { font-weight: 500; font-size: 0.75rem; color: var(--srx-text-muted); }
.srx-est-ico { width: 52px; height: 52px; }
.srx-est-flag { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--srx-blue); color: #fff; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase; padding: 3px 9px; border-radius: 100px; white-space: nowrap; }
.srx-est-escape { display: block; margin: 18px auto 0; background: none; border: none; color: var(--srx-blue); font-weight: 700; font-size: 0.9rem; text-decoration: underline; cursor: pointer; }
.srx-est-escape-panel { margin-top: 14px; display: grid; gap: 10px; }
.srx-est-sqft-row { position: relative; display: flex; align-items: center; }
.srx-est-sqft-row input { flex: 1; height: 52px; border: 2px solid var(--srx-border-strong); border-radius: var(--srx-radius); padding: 0 56px 0 14px; font-size: 1.1rem; }
.srx-est-unit { position: absolute; right: 14px; color: var(--srx-text-muted); font-weight: 700; }
.srx-est-panel input[type="text"], .srx-est-panel input[type="tel"], .srx-est-panel input[type="email"] { width: 100%; box-sizing: border-box; height: 52px; border: 2px solid var(--srx-border-strong); border-radius: var(--srx-radius); padding: 0 14px; font-size: 1.05rem; margin-bottom: 12px; }
.srx-est-nav { display: flex; gap: 12px; align-items: center; margin-top: 20px; }
.srx-est-nav .srx-btn { flex: 1; }
.srx-est-back { background: none; border: none; color: var(--srx-text-muted); font-weight: 700; font-size: 0.9rem; cursor: pointer; padding: 12px; margin-top: 14px; }
.srx-est-back:hover { color: var(--srx-ink); }
.srx-est-nav .srx-est-back { margin-top: 0; flex: 0 0 auto; }
.srx-est-addr-shown { display: flex; align-items: center; gap: 10px; justify-content: space-between; background: #f4f6fb; border-radius: var(--srx-radius); padding: 12px 14px; margin-bottom: 16px; font-size: 0.9rem; }
.srx-est-addr-text { color: var(--srx-ink); font-weight: 600; }
.srx-est-addr-change { background: none; border: none; color: var(--srx-blue); font-weight: 700; font-size: 0.85rem; cursor: pointer; text-decoration: underline; flex-shrink: 0; }
.srx-est-reveal { text-align: center; padding: 12px 0; }
.srx-est-reveal-check { width: 56px; height: 56px; border-radius: 50%; background: var(--srx-success, #12a150); color: #fff; font-size: 1.8rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.srx-est-reveal-label { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--srx-text-muted); }
.srx-est-reveal-range { font-size: 2.6rem; font-weight: 800; color: var(--srx-ink); line-height: 1.1; margin: 6px 0 10px; }
.srx-est-reveal-sub { color: var(--srx-text-muted); font-size: 0.95rem; margin: 0 auto 22px; max-width: 380px; }
.srx-est-reveal-note { font-size: 0.82rem; color: var(--srx-text-muted); margin-top: 10px; }
.srx-estimate-disclaimer { font-size: 0.72rem; color: var(--srx-text-light); text-align: center; margin-top: 22px; }
@media (max-width: 520px) {
	.srx-est-opts-3 { grid-template-columns: 1fr; }
	.srx-est-q { font-size: 1.4rem; }
	.srx-est-reveal-range { font-size: 2.2rem; }
}

/* Estimate — address satellite confirmation (v3.65.0) */
.srx-est-sat-wrap { margin-top: 14px; }
.srx-est-sat { border: 2px solid var(--srx-border-strong); border-radius: var(--srx-radius); overflow: hidden; background: #fff; }
.srx-est-sat-img { display: block; width: 100%; height: auto; background: #0b1220; }
.srx-est-sat-q { font-weight: 800; color: var(--srx-ink); font-size: 1.05rem; padding: 14px 14px 2px; }
.srx-est-sat-addr { color: var(--srx-text-muted); font-size: 0.88rem; padding: 0 14px 12px; }
.srx-est-sat-actions { display: grid; gap: 8px; padding: 0 14px 14px; }
.srx-est-sat-again { background: none; border: none; color: var(--srx-text-muted); font-weight: 700; font-size: 0.88rem; cursor: pointer; padding: 8px; }
.srx-est-sat-again:hover { color: var(--srx-ink); }

/* Floating account orb (v3.67.0) — light-blue orb, red Rx mark */
.srx-orb { position: fixed; left: 24px; bottom: 24px; z-index: 950; } /* v3.185.0 — moved left; chat owns the right-thumb zone */
.srx-orb-btn { width: 60px; height: 60px; border-radius: 50%; border: none; background: transparent; padding: 0; cursor: pointer; display: block; filter: drop-shadow(0 6px 14px rgba(11, 18, 32, 0.45)); transition: transform 0.12s ease, filter 0.12s ease; }
.srx-orb-btn:hover { transform: translateY(-2px); filter: drop-shadow(0 10px 22px rgba(11, 18, 32, 0.52)); }
.srx-orb-btn:active { transform: translateY(0); filter: drop-shadow(0 4px 10px rgba(11, 18, 32, 0.45)); }
.srx-orb-face { display: block; width: 100%; height: 100%; }
.srx-orb-menu { position: absolute; left: 0; bottom: calc(100% + 12px); min-width: 214px; background: #fff; border: 2px solid var(--srx-ink); border-radius: var(--srx-radius); box-shadow: 0 14px 30px rgba(11, 18, 32, 0.22); padding: 8px; }
.srx-orb-menu[hidden] { display: none; }
.srx-orb-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--srx-border); margin-bottom: 6px; }
.srx-orb-name { display: block; font-weight: 800; color: var(--srx-ink); font-size: 0.92rem; line-height: 1.2; }
.srx-orb-sub { display: block; font-size: 0.72rem; color: var(--srx-text-muted); margin-top: 2px; }
.srx-orb-item { display: flex; align-items: center; gap: 9px; padding: 10px; border-radius: var(--srx-radius-sm); text-decoration: none; font-weight: 700; font-size: 0.9rem; }
.srx-orb-primary { color: var(--srx-blue); }
.srx-orb-danger { color: var(--srx-red); }
.srx-orb-item:hover { background: #f4f6fb; }
/* Mobile — float above the sticky CTA bar (never overlap it) */
@media (max-width: 959px) {
	.srx-orb { left: 16px; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
	.srx-orb-btn { width: 54px; height: 54px; }
}

/* Lead Form page (v3.69.0) */
.srx-leadform { padding: 44px 0 64px; }
.srx-leadform-shell { max-width: 520px; }
.srx-leadform-head { text-align: center; margin-bottom: 26px; }
.srx-leadform-head h1 { font-size: 1.9rem; color: var(--srx-ink); margin: 8px 0 8px; line-height: 1.15; }
.srx-leadform-lede { color: var(--srx-text-muted); font-size: 1rem; margin: 0; }
.srx-leadform-form { background: #fff; border: 1px solid var(--srx-border); border-radius: var(--srx-radius-lg, 14px); padding: 24px; box-shadow: 0 4px 20px rgba(11, 18, 32, 0.06); }
.srx-field-opt { font-weight: 500; color: var(--srx-text-light); font-size: 0.85em; }
.srx-leadform-feedback { margin-top: 12px; font-size: 0.9rem; font-weight: 600; text-align: center; }
.srx-leadform-feedback.is-error { color: var(--srx-red); }
.srx-leadform-feedback.is-success { color: var(--srx-success, #12a150); }
.srx-leadform-done { text-align: center; padding: 20px 0; }
.srx-leadform-done-check { width: 56px; height: 56px; border-radius: 50%; background: var(--srx-success, #12a150); color: #fff; font-size: 1.8rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.srx-leadform-done p { color: var(--srx-ink); font-size: 1.05rem; font-weight: 600; margin: 0; }
.srx-leadform-noscript { text-align: center; color: var(--srx-text-muted); }

/* =========================================================
   Offers nav — header dropdown + mobile group (v3.87.0)
   ========================================================= */
.srx-nav-offers { position: relative; }
.srx-nav-offers-toggle {
	display: inline-flex; align-items: center; gap: 4px;
	background: none; border: 0; cursor: pointer;
	font-family: inherit;
	color: var(--srx-ink);
	font-weight: 700;
	font-size: 0.9rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 10px 16px;
	line-height: inherit;
}
.srx-nav-offers-toggle:hover,
.srx-nav-offers:hover .srx-nav-offers-toggle,
.srx-nav-offers:focus-within .srx-nav-offers-toggle { color: var(--srx-blue); }
.srx-nav-offers-toggle svg { transition: transform 0.15s ease; }
.srx-nav-offers:hover .srx-nav-offers-toggle svg,
.srx-nav-offers:focus-within .srx-nav-offers-toggle svg { transform: rotate(180deg); }
.srx-nav-offers-menu {
	position: absolute; top: 100%; left: 50%;
	margin: 0; padding: 6px; min-width: 244px; list-style: none;
	background: #fff; border: 0.5px solid var(--srx-border); border-radius: 12px;
	box-shadow: 0 14px 34px rgba(11, 18, 32, 0.15);
	opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(-4px);
	transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
	z-index: 60;
}
.srx-nav-offers-menu::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.srx-nav-offers:hover .srx-nav-offers-menu,
.srx-nav-offers:focus-within .srx-nav-offers-menu {
	opacity: 1; visibility: visible; transform: translateX(-50%) translateY(8px);
}
.srx-nav-offers-menu li { margin: 0; }
.srx-nav-offers-menu a {
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	padding: 10px 12px; border-radius: 8px; color: var(--srx-navy); white-space: nowrap;
}
.srx-nav-offers-menu a:hover { background: var(--srx-bg-light); }
.srx-nav-offers-price { color: var(--srx-blue); font-weight: 700; font-size: 0.85rem; }
.srx-mobile-offers-label {
	list-style: none; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.09em;
	text-transform: uppercase; color: var(--srx-red-ink); padding: 16px 0 2px;
}
.srx-mobile-nav ul li.srx-mobile-offers-item a { padding-left: 12px; }
/* v3.284.3 — the Google Ads number in the footer's legal row.
   IN THEME.CSS, NOT DASHBOARD.CSS. dashboard.css is enqueued only on the
   dashboard page for logged-in users (functions.php:298); the footer is public.
   Written there first, these rules would never have loaded and the line would
   have shipped unstyled on every site — the same class of miss as
   .srx-marketing-nospend, which rendered as a bare <p> for four releases.
   Quiet on purpose: a legal-row item, not a second call-to-action competing
   with the Call Us button above it. */
.srx-footer-adsline { color: inherit; text-decoration: none; opacity: 0.85; }
.srx-footer-adsline:hover { text-decoration: underline; }
.srx-footer-ads { margin: 6px 0 0; font-size: 0.82rem; }

.srx-footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.srx-footer-legal-sep, .srx-footer-legal-div { color: rgba(255, 255, 255, 0.35); }
.srx-footer-legal-div { margin: 0 4px; }

/* v3.88.0 — mobile menu fits any number of links + clears the sticky CTA bar */
.srx-mobile-menu { z-index: 1000; }
.srx-mobile-menu-panel { overflow-y: auto; -webkit-overflow-scrolling: touch; }
body.srx-menu-open .srx-mobile-cta-bar { display: none; }

/* v3.90.0 — funnel conversion: sticky mobile CTA + inline validation */
.srx-funnel-sticky { display: none; }
.srx-input-invalid { border-color: var(--srx-red) !important; box-shadow: 0 0 0 2px rgba(227, 43, 46, 0.16) !important; }
@media (max-width: 768px) {
	.srx-funnel-sticky { display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid var(--srx-border); box-shadow: 0 -4px 16px rgba(11, 18, 32, 0.08); transition: transform 0.22s ease; }
	.srx-funnel-sticky.is-hidden { transform: translateY(130%); }
	.srx-funnel-sticky-cta { flex: 1; text-align: center; }
	.srx-funnel-sticky-call { flex: 0 0 auto; padding-left: 22px; padding-right: 22px; }
	body.single-shinglerx_funnel { padding-bottom: 78px; }
}

/* v3.103.0 — internal booking request widget */
.srx-booking-when { margin: 4px 0 2px; }
.srx-booking-when-label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--srx-text-muted); margin-bottom: 5px; }
.srx-booking-when-fields { display: flex; flex-wrap: wrap; gap: 8px; }
/* v3.112.0 — same treatment as the modal + dashboard: box-size so the row can't
   overflow the card, 44px targets, 16px font (no iOS zoom), whole date field
   clickable (showPicker in funnel.js), and wrap on very narrow phones. */
.srx-booking-when-fields input[type="date"],
.srx-booking-when-fields select {
	box-sizing: border-box;
	min-width: 0;
	height: 44px;
	font-size: 16px;
	padding: 0 12px;
	cursor: pointer;
}
.srx-booking-when-fields input[type="date"] { flex: 1 1 60%; }
.srx-booking-when-fields select { flex: 1 1 40%; }
.srx-booking-when-fields input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; }
@media (max-width: 400px) {
	.srx-booking-when-fields input[type="date"],
	.srx-booking-when-fields select { flex-basis: 100%; }
}
.srx-booking-feedback { margin-top: 8px; font-size: 0.9rem; min-height: 1.2em; }
.srx-booking-feedback.is-error { color: var(--srx-red-ink); }
.srx-booking-feedback.is-success { color: var(--srx-success); }

/* v3.106.0 — qualify modal internal booking widget */
.srx-m-internal-booking { text-align: left; }
.srx-m-ib-heading { font-weight: 700; margin-bottom: 10px; }
.srx-m-ib-fields { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
/* v3.112.0 — mirror the dashboard in-lead panel fix: box-size so the date +
   window row never overflows the modal, let fields wrap to their own line on
   narrow phones, 44px targets, and 16px font to avoid iOS zoom-on-focus. The
   whole date field is made clickable via showPicker() in survey-modal.js. */
.srx-m-ib-fields input, .srx-m-ib-fields select {
	flex: 1 1 140px;
	min-width: 0;
	box-sizing: border-box;
	height: 44px;
	font-size: 16px;
	padding: 0 12px;
	cursor: pointer;
}
.srx-m-ib-fields input::-webkit-calendar-picker-indicator { cursor: pointer; }
@media (max-width: 400px) {
	.srx-m-ib-fields input, .srx-m-ib-fields select { flex-basis: 100%; }
}
.srx-m-ib-feedback { margin-top: 8px; color: var(--srx-red-ink); font-size: 0.9rem; }
.srx-m-ib-done { text-align: center; font-weight: 600; color: var(--srx-success); padding: 12px; }

/* v3.181 — in-field "Select best day" prompt for empty date inputs (Blink; degrades to native elsewhere) */
.srx-date-ph { position: relative; }
.srx-date-ph:not(.has-value)::before {
	content: attr(data-ph);
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: #94a3b8;
	pointer-events: none;
}
.srx-date-ph:not(.has-value)::-webkit-datetime-edit { color: transparent; }

/* v3.183.0 — business-day chip picker (booking step) */
.srx-chip-label { font-size: 12px; letter-spacing: 0.4px; color: #94a3b8; text-transform: uppercase; margin: 12px 0 8px; }
.srx-chip-row { display: grid; gap: 8px; }
.srx-chip-days { grid-template-columns: repeat(3, 1fr); }
.srx-chip-times { grid-template-columns: repeat(2, 1fr); }
.srx-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 48px; padding: 8px 6px; border: 1px solid #d7dce5; border-radius: 12px; background: #fff; color: #0f172a; font: inherit; font-size: 15px; font-weight: 500; line-height: 1.2; cursor: pointer; text-align: center; }
.srx-chip:hover { border-color: #b9c2d0; }
.srx-chip.is-active { border: 2px solid var(--srx-red, #b32d2d); padding: 7px 5px; }
.srx-chip-dow { font-size: 11px; font-weight: 400; color: #64748b; }
.srx-chip-hint { font-size: 13px; color: #b32d2d; margin-top: 6px; }
.srx-chip-hint:empty { display: none; }


/* v3.185.0 — Live Web Chat widget (bottom-right; orb moved left) */
.srx-wc-launcher { position: fixed; right: 20px; bottom: 24px; z-index: 955; }
.srx-wc-btn { position: relative; width: 58px; height: 58px; border-radius: 50%; border: 2px solid var(--srx-blue); background: #fff; color: var(--srx-blue); cursor: pointer; box-shadow: 0 8px 20px rgba(11,18,32,.26); display: flex; align-items: center; justify-content: center; padding: 0; transition: transform .12s ease, box-shadow .12s ease; }
.srx-wc-btn:hover { transform: translateY(-2px); }
.srx-wc-btn svg { width: 26px; height: 26px; }
.srx-wc-rx { position: absolute; right: -3px; top: -3px; width: 20px; height: 20px; background: var(--srx-red); border: 2px solid #fff; border-radius: 50%; color: #fff; font-size: 9px; font-weight: 800; display: flex; align-items: center; justify-content: center; font-family: Georgia, serif; }
/* v3.237.5 — padding is deliberately ASYMMETRIC (17px right, 13px left).
   Equal values LOOK unequal here: the string opens with an emoji, which fills
   its em box edge to edge, and closes on a "?", a narrow glyph carrying its own
   side bearing. The 4px bottom-right corner — the tail pointing at the launcher
   — tightens that side further. Setting both sides equal reintroduces the
   problem this fixes. */
.srx-wc-teaser { display: none; position: absolute; right: 0; bottom: calc(100% + 12px); background: #fff; color: #0f172a; border-radius: 14px 14px 4px 14px; padding: 9px 17px 9px 13px; font-size: 13.5px; font-weight: 600; box-shadow: 0 10px 24px rgba(11,18,32,.24); white-space: nowrap; cursor: pointer; }
.srx-wc-teasing .srx-wc-teaser { display: block; transform-origin: bottom right; animation: srxwcrise .34s cubic-bezier(.22, 1, .36, 1); }
@keyframes srxwcrise { 0% { opacity: 0; transform: translateY(10px) scale(.96); } 60% { opacity: 1; transform: translateY(-2px) scale(1.01); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
.srx-wc-panel { position: fixed; right: 20px; bottom: 24px; z-index: 960; width: 380px; max-width: calc(100vw - 32px); height: 600px; max-height: calc(100vh - 90px); background: #fff; border-radius: 18px; box-shadow: 0 20px 60px rgba(11,18,32,.32); display: flex; flex-direction: column; overflow: hidden; opacity: 0; transform: translateY(16px) scale(.98); pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
.srx-wc-panel.srx-wc-show { opacity: 1; transform: none; pointer-events: auto; }
.srx-wc-head { background: #0B1220; color: #fff; padding: 12px 14px; display: flex; align-items: center; gap: 10px; }
.srx-wc-dot { width: 34px; height: 34px; border-radius: 50%; background: #16324f; border: 1.5px solid #ffd23f; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.srx-wc-brand { font-weight: 700; font-size: 14.5px; line-height: 1.15; }
.srx-wc-presence { font-size: 11px; color: #9fb3d1; display: flex; align-items: center; gap: 5px; }
.srx-wc-presence::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3ddc84; }
.srx-wc-x { margin-left: auto; background: none; border: none; color: #9fb3d1; font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px; }
.srx-wc-body { flex: 1; overflow-y: auto; padding: 14px; background: #f7f9fc; display: flex; flex-direction: column; gap: 9px; }
.srx-wc-bot, .srx-wc-user { max-width: 84%; padding: 9px 13px; font-size: 13.5px; line-height: 1.4; border-radius: 15px; white-space: pre-wrap; word-wrap: break-word; }
.srx-wc-bot { align-self: flex-start; background: #fff; border: 1px solid #e2e8f0; border-bottom-left-radius: 5px; color: #0f172a; }
.srx-wc-user { align-self: flex-end; background: #0B1220; color: #fff; border-bottom-right-radius: 5px; }
.srx-wc-chips { display: flex; flex-direction: column; gap: 8px; }
.srx-wc-chip { border-radius: 11px; padding: 11px; font-size: 14px; font-weight: 600; cursor: pointer; text-align: center; border: 1px solid #e2e8f0; font-family: inherit; }
.srx-wc-chip-primary { background: #ffd23f; color: #0b1220; border-color: #ffd23f; }
.srx-wc-chip-secondary { background: #fff; color: #334155; }
.srx-wc-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px; align-self: stretch; }
.srx-wc-card-label { font-size: 12.5px; font-weight: 600; color: #475569; margin: 0 2px 2px; }
.srx-wc-field { border: 1px solid #d7dce5; border-radius: 9px; padding: 10px 12px; font-size: 14px; font-family: inherit; width: 100%; }
.srx-wc-sat { min-height: 90px; border-radius: 9px; overflow: hidden; border: 1px solid #e2e8f0; }
.srx-wc-sat img { width: 100%; display: block; }
.srx-wc-consent { font-size: 11.5px; color: #64748b; display: flex; gap: 7px; align-items: flex-start; line-height: 1.35; }
.srx-wc-consent input { margin-top: 2px; flex: none; }
.srx-wc-card-go { background: #ffd23f; color: #0b1220; font-weight: 700; text-align: center; border-radius: 9px; padding: 11px; font-size: 14px; border: none; cursor: pointer; }
.srx-wc-card-go[disabled] { opacity: .6; }
.srx-wc-err { font-size: 12.5px; color: #b32d2d; }
.srx-wc-composer { border-top: 1px solid #e2e8f0; background: #fff; padding: 9px 10px; display: flex; gap: 8px; align-items: center; }
.srx-wc-input { flex: 1; border: 1px solid #e2e8f0; border-radius: 22px; padding: 9px 14px; font-size: 14px; font-family: inherit; }
.srx-wc-send { width: 38px; height: 38px; border-radius: 50%; background: #0B1220; color: #ffd23f; border: none; font-size: 17px; cursor: pointer; flex: none; }
.srx-wc-typing span { display: inline-block; width: 6px; height: 6px; margin: 0 1px; background: #94a3b8; border-radius: 50%; animation: srxwcblink 1.2s infinite; }
.srx-wc-typing span:nth-child(2) { animation-delay: .2s; }
.srx-wc-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes srxwcblink { 0%,60%,100% { opacity: .3; } 30% { opacity: 1; } }
.srx-wc-card .srx-chip { min-height: 42px; font-size: 13.5px; }
@media (max-width: 640px) {
  .srx-wc-launcher { right: 16px; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  /* dvh accounts for the mobile URL bar so the header never tucks under browser chrome */
  .srx-wc-panel { right: 0; left: 0; bottom: 0; width: 100%; max-width: 100%; height: 88vh; height: 88dvh; max-height: 88vh; max-height: 88dvh; border-radius: 18px 18px 0 0; }
  .srx-wc-head { position: relative; padding: 18px 16px 13px; }
  .srx-wc-head::before { content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 38px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.30); }
  .srx-wc-brand { font-size: 15.5px; }
  .srx-wc-presence { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .srx-wc-panel, .srx-wc-teaser { transition: none; animation: none; }
}

/* v3.186.0 — operator transcript + deep-link flash */
.srx-le-transcript { border: 1px solid #e2e8f0; border-radius: 10px; margin: 0 0 14px; background: #f8fafc; }
.srx-le-transcript > summary { cursor: pointer; padding: 10px 12px; font-weight: 600; font-size: 13.5px; color: #0f172a; }
.srx-le-tx-body { padding: 4px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.srx-le-tx-row { display: flex; flex-direction: column; gap: 2px; }
.srx-le-tx-who { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .03em; }
.srx-le-tx-msg { font-size: 13.5px; line-height: 1.42; color: #0f172a; padding: 6px 10px; border-radius: 8px; align-self: flex-start; max-width: 92%; }
.srx-le-tx-visitor .srx-le-tx-msg { background: #eef2ff; }
.srx-le-tx-assistant .srx-le-tx-msg { background: #fff; border: 1px solid #e2e8f0; }
.srx-flash { animation: srxflash 2.4s ease; border-radius: 12px; }
@keyframes srxflash { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,210,63,0); } 15%, 60% { box-shadow: 0 0 0 4px rgba(255,210,63,.55); } }
.srx-le-appt-chatting, .srx-le-appt-chip.srx-le-appt-chatting { background: #eef2ff; color: #3730a3; }

/* v3.188.0 — Live Web Chat key verification UI */
.srx-toggle-locked { opacity: .55; cursor: not-allowed; }
.srx-toggle-locked input, .srx-toggle-locked .srx-toggle-track { cursor: not-allowed; }
.srx-webchat-test { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.srx-webchat-test small { flex-basis: 100%; margin: 0; }
.srx-webchat-test-status { font-size: 13px; font-weight: 600; }
.srx-wc-ok { color: #067647; }
.srx-wc-warn { color: #b54708; }
.srx-wc-testing { color: #475467; }

/* ============================================================
   [hidden] guards — v3.218.0
   An author `display` declaration beats the UA's [hidden]{display:none}
   by cascade origin, regardless of specificity. Every selector below is
   toggled via the hidden attribute AND carries an author display, so
   without these rules the element renders while the code treats it as
   closed. Third recurrence of this class of bug — grep [hidden] before
   adding a new collapsible block.
   ============================================================ */
.srx-est-escape-panel[hidden] { display: none !important; }
.srx-est-addr-shown[hidden]   { display: none !important; }
.srx-btn[hidden]              { display: none !important; }

/* ============================================================
   Dashboard menu — v3.219.0
   Lead Tools, Funnels, Site Editor and Team live in the user menu, so the
   menu has to answer "where am I?" the way the tab bar used to. Same yellow
   active treatment as .srx-app-tab.is-active so the signal reads identically
   in both places. The :hover pair keeps the active row from losing its state
   under the cursor. (v3.222.0: the mobile mirror of this menu was removed —
   the user menu renders on mobile too, so the drawer was duplicating it.)
   ============================================================ */
.srx-app-user-item.is-active {
	background: var(--srx-yellow);
	color: var(--srx-ink);
	font-weight: 700;
}
.srx-app-user-item.is-active:hover { background: var(--srx-yellow); color: var(--srx-ink); }

/* The menu carries up to 11 rows now — keep it inside the viewport on
   short screens rather than letting it run off the bottom edge. */
.srx-app-user-dropdown {
	max-height: calc(100vh - 84px);
	overflow-y: auto;
}

/* ===== Instant Roof Estimate — measured flow (v3.267.0) ===== */
.srx-est-measured {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 18px 0 14px;
}
.srx-est-measured-stat {
	background: #f7f9fc;
	border: 1px solid #e5e8ee;
	border-radius: 10px;
	padding: 14px 16px;
	text-align: left;
}
.srx-est-measured-k {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #6b7280;
}
.srx-est-measured-v {
	display: block;
	margin-top: 4px;
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.6px;
	color: #111827;
}
.srx-est-measured-v em {
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	color: #9aa3af;
}
.srx-est-measured-s {
	display: block;
	font-size: 12.5px;
	color: #9aa3af;
}
.srx-est-measured-note {
	margin: 0 0 16px;
	padding: 11px 13px;
	background: #f7f9fc;
	border-radius: 8px;
	font-size: 13px;
	line-height: 1.6;
	color: #4b5563;
}

/* Instant Roof Estimate — narrow screens (v3.267.3) */
.srx-est-measured-v { font-variant-numeric: tabular-nums; }
@media (max-width: 480px) {
	.srx-est-measured { grid-template-columns: 1fr; }
	.srx-est-measured-stat {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 12px;
		flex-wrap: wrap;
	}
	.srx-est-measured-k { flex: none; }
	.srx-est-measured-v { font-size: 22px; }
	.srx-est-measured-s { width: 100%; }
}

/* v3.289.0 — the Google call-asset verification line: small, real, visible. */
.srx-funnel .srx-funnel-adnumber { text-align: center; font-size: 0.95rem; margin: 28px auto 8px; }
.srx-funnel .srx-funnel-adnumber a { font-weight: 700; white-space: nowrap; }