/*
Theme Name: HighRidge Child
Theme URI: https://highridgesystems.com
Description: HighRidge Systems child theme for GeneratePress — premium dark SaaS aesthetic. Inter typography, teal/cyan accents, soft glow effects.
Author: HighRidge Systems
Author URI: https://highridgesystems.com
Template: generatepress
Version: 1.6.3
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ==========================================================================
   Brand tokens
   ========================================================================== */
:root {
	/* Surfaces */
	--hr-bg: #0A0A0F;
	--hr-surface: #14141C;
	--hr-surface-elevated: #1C1C28;
	--hr-border: #2A2A38;

	/* Accents */
	--hr-teal: #46B4BF;
	--hr-cyan: #38BDF8;
	--hr-teal-glow: rgba(70, 180, 191, 0.15);
	--hr-cyan-glow: rgba(56, 189, 248, 0.12);

	/* Text */
	--hr-text: #FFFFFF;
	--hr-text-secondary: #B8B8C8;
	--hr-text-tertiary: #6E6E80;
	--hr-text-on-accent: #0A0A0F;

	/* Status */
	--hr-success: #22D3A8;
	--hr-danger-muted: #D98A8A;

	/* Pass 4.5b Phase 2 — widget accents (orb gradient stops + code tokens).
	   New brand tokens so widget CSS never hardcodes a hex value. */
	--hr-orb-deep: #0D2847;
	--hr-code-str: #E5C07B;
	--hr-code-fn: #56C7E8;

	/* Typography */
	--hr-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	/* Layout */
	--hr-container: 1200px;
	--hr-section-pad: 120px;
	--hr-section-pad-mobile: 80px;
	--hr-card-padding: 32px;
	--hr-radius-card: 16px;
	--hr-radius-btn: 10px;

	/* Pass 1 — canonical nav-height + section-spacing tokens. */
	--nav-height-desktop: 72px;
	--nav-height-mobile: 72px;
	--section-padding-desktop: 120px;
	--section-padding-mobile: 80px;
	--section-inner-max-width: 1200px;

	/* Transitions */
	--hr-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Base
   ========================================================================== */
html {
	scroll-behavior: smooth;
	/* Pass 1 — keep anchor-link targets clear of the fixed 72px nav. */
	scroll-padding-top: var(--nav-height-desktop);
}

@media (max-width: 768px) {
	html {
		scroll-padding-top: var(--nav-height-mobile);
	}
}

body {
	background-color: var(--hr-bg);
	color: var(--hr-text-secondary);
	font-family: var(--hr-font);
	font-size: 16px;
	line-height: 1.7;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--hr-font);
	color: var(--hr-text);
	font-weight: 700;
	margin-top: 0;
}

h1 {
	font-size: clamp(40px, 6vw, 72px);
	line-height: 1.05;
	letter-spacing: -0.02em;
}

h2 {
	font-size: clamp(32px, 4.5vw, 48px);
	line-height: 1.1;
	letter-spacing: -0.015em;
}

h3 {
	font-size: 22px;
	line-height: 1.3;
	letter-spacing: -0.01em;
	font-weight: 600;
}

p {
	margin-top: 0;
}

a {
	color: var(--hr-teal);
	text-decoration: none;
	transition: color var(--hr-transition);
}

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

::selection {
	background: rgba(70, 180, 191, 0.3);
	color: var(--hr-text);
}

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

/* ==========================================================================
   Layout utilities
   ========================================================================== */
.container {
	max-width: var(--hr-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
	width: 100%;
}

.section {
	padding: var(--hr-section-pad) 0;
	position: relative;
	overflow: hidden;
}

@media (max-width: 768px) {
	.section {
		padding: var(--hr-section-pad-mobile) 0;
	}
}

/* ==========================================================================
   Pass 1 — canonical section utility (brand 120 / 80). Added for future use;
   existing pages are NOT retrofitted in this pass.
   ========================================================================== */
.hr-section {
	padding-top: var(--section-padding-desktop);
	padding-bottom: var(--section-padding-desktop);
}

@media (max-width: 768px) {
	.hr-section {
		padding-top: var(--section-padding-mobile);
		padding-bottom: var(--section-padding-mobile);
	}
}

/* ==========================================================================
   Section glows (radial gradient ambient lighting)
   ========================================================================== */
.section-glow-hero {
	background: radial-gradient(ellipse at 50% 0%, rgba(70, 180, 191, 0.06) 0%, transparent 60%);
}

.section-glow-mid {
	background: radial-gradient(ellipse at 80% 50%, rgba(70, 180, 191, 0.04) 0%, transparent 50%);
}

.section-glow-cta {
	background: radial-gradient(ellipse at 50% 100%, rgba(70, 180, 191, 0.08) 0%, transparent 60%);
}

/* ==========================================================================
   Eyebrow
   ========================================================================== */
.eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--hr-teal);
	margin: 0 0 16px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn-primary,
.btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--hr-font);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	padding: 14px 24px;
	border-radius: var(--hr-radius-btn);
	cursor: pointer;
	text-decoration: none;
	transition: all var(--hr-transition);
	border: 1px solid transparent;
}

.btn-primary {
	background-color: var(--hr-teal);
	color: var(--hr-text-on-accent);
}

.btn-primary:hover,
.btn-primary:focus {
	background-color: var(--hr-cyan);
	color: var(--hr-text-on-accent);
	transform: scale(1.03);
	text-decoration: none;
}

.btn-secondary {
	background-color: transparent;
	color: var(--hr-text);
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-secondary:hover,
.btn-secondary:focus {
	border-color: var(--hr-teal);
	color: var(--hr-text);
	text-decoration: none;
}

/* ==========================================================================
   Cards
   ========================================================================== */
.card {
	background-color: var(--hr-surface);
	border: 1px solid var(--hr-border);
	border-radius: var(--hr-radius-card);
	padding: var(--hr-card-padding);
	transition: transform var(--hr-transition), border-color var(--hr-transition), box-shadow var(--hr-transition);
}

.card:hover {
	transform: translateY(-2px);
	border-color: var(--hr-teal);
	box-shadow: 0 12px 32px rgba(70, 180, 191, 0.12), 0 0 0 1px rgba(70, 180, 191, 0.2);
}

/* ==========================================================================
   Header / Navigation
   ========================================================================== */
/* Logo + nav share one fixed bar. nav-float-right (GP setting) places the nav
   inside #masthead next to the logo; #masthead is the fixed element. */
#masthead {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	width: 100% !important;
	z-index: 9999 !important;
	background-color: #0A0A0F !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
}

.site-content,
#content {
	padding-top: 72px !important;
}

/* Navigation bar height: 72px (min-height so it never clips on mobile). */
.main-navigation .inside-navigation {
	min-height: 72px;
}

.main-navigation .main-nav > ul > li > a {
	min-height: 72px;
	display: flex;
	align-items: center;
}

/* Force dark header/nav background (GP was rendering the header white). */
.site-header,
#masthead,
#site-navigation,
.main-navigation,
.main-navigation ul,
.main-navigation ul li,
.site-header .inside-header {
	background-color: #0A0A0F;
}

/* Explicit nav link colors: white, teal on hover. */
.main-navigation a {
	color: #FFFFFF;
}

.main-navigation a:hover {
	color: #46B4BF;
}

/* Remove the white/light content gap above the hero (GP content wrappers). */
.entry-content,
.page-content,
.site-main,
.content-area,
#primary {
	background-color: #0A0A0F;
	padding: 0;
	margin: 0;
}

/* Custom HTML block wrappers contribute no spacing above section 1. */
.wp-block-html {
	margin: 0;
	padding: 0;
}

.entry-content > *:first-child,
.site-main > *:first-child {
	margin-top: 0;
}

/* FIX 1 — aggressive removal of white gap above hero across GP wrappers. */
.site-content,
#content,
#primary,
#main,
.site-main,
article.page,
article.type-page,
.entry-content,
.page-content,
.entry-header,
.entry-footer,
.page-template-default .entry-content {
	background-color: #0A0A0F !important;
	padding-top: 0 !important;
	margin-top: 0 !important;
}

.entry-content > *:first-child,
.entry-content .wp-block-html:first-child {
	margin-top: 0 !important;
}

/* ==========================================================================
   Pass 1 — NAV-OVERLAP FIX (fixed-nav clearance for content-only pages)
   --------------------------------------------------------------------------
   #masthead is position:fixed (72px). FIX 1 above zeroes #content top padding
   for every page to kill the white gap above hero sections — but that clips the
   H1 on content-only pages (privacy, terms, pricing) behind the fixed nav.
   Restore nav clearance for pages WITHOUT a hero. Hero-equipped pages carry the
   `has-hero` body class (added in functions.php) and keep FIX 1's zeroing, so
   they are not double-padded. Selector specificity (1,1,1) + !important beats
   FIX 1's `#content` rule, so this wins for non-hero pages only.
   ========================================================================== */
body:not(.has-hero) #content {
	padding-top: calc(var(--nav-height-desktop) + 40px) !important;
}

@media (max-width: 768px) {
	body:not(.has-hero) #content {
		padding-top: calc(var(--nav-height-mobile) + 32px) !important;
	}
}

/* --- NAV CLEARANCE — /services/ (62) and /about/ (13) — added 2026-08-13 ---
   ROOT CAUSE: #masthead is position:fixed with NO fixed height. It is a flex bar
   sized by its contents (logo + nav), so the real rendered height exceeds the
   72px that --nav-height-desktop / --nav-height-mobile assume. On mobile it is
   ~144px (64px logo + GP header padding) — see the #hero rule near the bottom of
   this file, which already compensates for exactly this.

   WHY THESE TWO PAGES WERE MISSED: that existing compensation is scoped to
   `#hero`. The Services hero is <section class="hrs-sec"> (no id) and the About
   hero is #about-hero, so neither ever matched it, and their eyebrows tucked
   under the fixed bar. Homepage (#hero), Contact (.page-id-14) and the AVS page
   (.page-id-805) each already have their own rule.

   Padding, not margin: these sections paint a full-bleed dark background, so a
   margin would expose the page background as a band above the hero. */
.page-id-62 .hrs-sec:first-of-type,
.page-id-13 #about-hero {
	padding-top: calc(var(--nav-height-desktop, 72px) + 80px) !important;
	scroll-margin-top: calc(var(--nav-height-desktop, 72px) + 24px) !important;
}

@media (max-width: 768px) {
	.page-id-62 .hrs-sec:first-of-type,
	.page-id-13 #about-hero {
		padding-top: calc(var(--nav-height-mobile, 72px) + 120px) !important;
		scroll-margin-top: calc(var(--nav-height-mobile, 72px) + 80px) !important;
	}
}

/* --- NAV CLEARANCE — HOMEPAGE HERO, DESKTOP — added 2026-08-24 ---
   Same root cause as the block above: #masthead is fixed with no set height, so
   the real bar is taller than the 72px the token assumes.

   ⚠ THE COMMENT ABOVE IS WRONG ABOUT THE HOMEPAGE. It says "Homepage (#hero) …
   already ha[s] its own rule". There IS one — but it lives inside the
   @media (max-width: 768px) block near the bottom of this file, so it only ever
   applied to mobile. On desktop the homepage hero had NO top clearance at all and
   the .hrx-kicker eyebrow sat under the fixed bar.

   WHY PADDING ALONE IS NOT ENOUGH HERE. The page-inline CSS sets
   .hrx-hero { min-height:80vh; display:flex; align-items:center }. Under
   border-box, padding is INSIDE min-height, so adding padding-top on its own only
   moves the centred content down by half of it — the other half is absorbed by the
   shrinking content box. min-height is raised by the same amount so the content
   area stays a true 80vh and centres BELOW the nav rather than behind it.

   Centring is preserved deliberately. The mobile rule switches to
   align-items:flex-start, which is right for a short viewport but would restyle the
   desktop hero's composition — a bigger change than the bug warrants. */
@media (min-width: 769px) {
	#hero.hr-hero-home {
		padding-top: calc(var(--nav-height-desktop, 72px) + 80px);
		min-height: calc(80vh + var(--nav-height-desktop, 72px) + 80px);
		scroll-margin-top: calc(var(--nav-height-desktop, 72px) + 24px);
	}
}

/* FIX 2 — site title (text wordmark) white and legible in the nav header. */
.site-title,
.site-title a,
.site-title a:hover,
.main-title,
.main-title a,
.main-title a:hover,
.site-branding .site-title {
	color: #FFFFFF !important;
	font-family: 'Inter', sans-serif !important;
	font-weight: 700 !important;
	font-size: 18px !important;
	text-decoration: none !important;
}

/* "Systems" in the header wordmark, tinted teal.
 *
 * MUST stay a separate rule AFTER the block above. An earlier version spliced this
 * selector into the middle of that comma-separated list, which handed `color:#46B4BF`
 * to `.site-title`, `.main-title` and `.main-title a` as well - the entire wordmark went
 * teal and the white declaration was orphaned onto the leftover selectors.
 *
 * !important is required, not stylistic: the rule above sets colour with !important on
 * the parent <a>, and a normal declaration on a child loses to an important one on an
 * ancestor when the child would otherwise inherit it. */
.main-title a .hr-title-accent,
.main-title a:hover .hr-title-accent {
	color: #46B4BF !important;
}

/* FIX 3 — hide the WordPress page title (H1 "Home") on the front page. */
.home .entry-title,
.home .page-header,
.front-page .entry-title,
.page-id-142 .entry-title,
.page-id-142 .page-header {
	display: none !important;
}

/* Catch any remaining top spacing on the homepage content. */
.home .site-main,
.home #main,
.home .entry-content {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

/* Logo sizing fallback (in case the Customizer Logo Width slider doesn't persist). */
.site-header .custom-logo {
	width: 36px !important;
	height: auto !important;
}

/* ==========================================================================
   Footer (rendered via the generate_copyright filter in functions.php)
   ========================================================================== */
.site-info {
	background-color: #0A0A0F;
}

.copyright-bar {
	padding: 0 !important;
}

/* Pass 5 cleanup: old .hrx-footer / .hrx-foot-* footer styles removed (the
   footer was rebuilt in Pass 4 as .hr-foot-* via the generate_copyright filter).
   .site-info / .copyright-bar GP wrappers above are kept. */

/* #page padding (Option A) removed — #masthead is now the fixed bar. */

/* Nav link breathing room (excluding the CTA pill so it keeps its compact padding). */
.main-navigation .inside-navigation > ul > li:not(.hrx-nav-cta) > a {
	padding: 24px 18px !important;
}

/* CTA menu item — teal pill, targeted via the hrx-nav-cta class on the <li>
   (reliable, unlike li:last-child). */
.hrx-nav-cta > a,
.hrx-nav-cta a {
	background-color: #46B4BF !important;
	color: #0A0A0F !important;
	border-radius: 8px !important;
	padding: 10px 22px !important;
	font-weight: 600 !important;
	margin-left: 12px !important;
	text-decoration: none !important;
	display: inline-block !important;
}

.hrx-nav-cta > a:hover,
.hrx-nav-cta a:hover {
	background-color: #46B4BF !important; /* hold teal on hover — match all CTAs (was #38BDF8 cyan) */
	color: #0A0A0F !important;
}

/* HubSpot form wrapper — keep transparent, full-width, borderless (wrapper only). */
.hs-form-frame {
	background: transparent !important;
}

.hs-form-frame iframe {
	border: none !important;
	width: 100% !important;
}

/* ==========================================================================
   Content-section readability
   ========================================================================== */
/* Left-align long body prose (.hrx-body) — centered paragraphs read poorly at
   normal lengths. Headings (.hrx-h1/.hrx-h2/.hrx-h3), eyebrows (.hrx-kicker),
   and taglines (.hrx-tagline) are separate elements and stay centered. */
.hrx-body,
.hrx-body p {
	text-align: left;
}

/* Mobile: keep a 24px gutter so content never touches the screen edges. The
   gutter moves from .hrx-sec to .hrx-inner so it stays a single 24px (no
   doubling); !important is needed to beat each page's inline <style> block. */
@media (max-width: 768px) {
	.hrx-sec {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.hrx-inner {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
}

/* ==========================================================================
   === HR Animation Widgets — Foundation ===
   Pass 4.5b. Reusable animated demo cards. Markup from the [hr_widget]
   shortcode (functions.php); behavior from assets/js/animations.js.
   --------------------------------------------------------------------------
   All widget CSS uses the canonical --hr-* tokens directly (no alias layer).
   ========================================================================== */

.hr-anim-card {
	background: var(--hr-surface);
	border: 1px solid rgba(70, 180, 191, 0.15);
	border-radius: 16px;
	padding: 24px;
	position: relative;
	overflow: hidden;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
	max-width: 480px;
	margin: 0 auto;
}

.hr-anim-card * {
	box-sizing: border-box;
}

/* Reduced-motion: kill widget animation/transition; force static fallbacks visible. */
@media (prefers-reduced-motion: reduce) {
	.hr-anim-card *,
	.hr-anim-card *::before,
	.hr-anim-card *::after {
		animation: none !important;
		transition: none !important;
	}
	.hr-anim-card [data-static-fallback] {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* Hover-pause: JS adds .is-paused on mouseenter; CSS pauses running animations. */
.hr-anim-card.is-paused .hr-anim-animated {
	animation-play-state: paused !important;
}

@media (max-width: 768px) {
	.hr-anim-card {
		max-width: 100%;
		padding: 16px;
	}
}

/* --------------------------------------------------------------------------
   Widget #8 — Continuous Optimization
   FOUNDATION PRINCIPLE (Phase 2 inherits): animations are DELIBERATE and
   PURPOSEFUL — each indicator tells one small story (growth, accumulation,
   climbing, drawing). ~50-60% of every cycle is REST. Cycle lengths differ
   per indicator (bars 7.5s / star 6s / dollar 5s / trend 6.5s) plus phase
   offsets, so peaks desync naturally — at any moment only ~1-2 indicators are
   mid-motion, never all four. (Supersedes the earlier "continuous overlapping
   motion" guideline, which overcorrected into a frenetic 'soundboard'.)
   Hover-pause + IntersectionObserver pause via .is-paused (foundation rule);
   reduced-motion media query shows each indicator's final at-rest state.
   -------------------------------------------------------------------------- */
.hr-anim-optimize-header h3 {
	font-family: var(--hr-font);
	font-size: 18px;
	font-weight: 600;
	color: var(--hr-text);
	letter-spacing: -0.01em;
	margin: 0 0 16px;
}

.hr-anim-optimize-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.hr-anim-optimize-row {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 64px;
	padding: 8px 12px;
	border-radius: 10px;
	transition: background-color 0.2s ease;
}

.hr-anim-optimize-row:hover {
	background: rgba(70, 180, 191, 0.06);
}

.hr-anim-optimize-row .system-name {
	flex: 0 0 auto;
	min-width: 132px;
	font-size: 15px;
	font-weight: 500;
	color: var(--hr-text);
}

.hr-anim-optimize-row .system-status {
	flex: 1 1 auto;
	font-size: 13px;
	line-height: 1.4;
	color: var(--hr-text-secondary);
}

.hr-anim-optimize-row .system-indicator {
	flex: 0 0 64px;
	width: 64px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--hr-teal);
}

/* Per-indicator render sizes — longest dimension ~44-56px (Phase 2 baseline). */
.hr-anim-optimize-row .system-indicator[data-indicator="bar-growing"] svg { width: 48px; height: 44px; }
.hr-anim-optimize-row .system-indicator[data-indicator="star-climbing"] svg { width: 44px; height: 44px; overflow: visible; }
.hr-anim-optimize-row .system-indicator[data-indicator="trend-up"] svg { width: 56px; height: 38px; overflow: visible; }

/* Response — sequential growth story (7.5s): bars rise 1→2→3 to distinct peaks
   (55/75/95%), hold, reset to a shared 30% baseline, then rest. Each rect's
   natural height IS its peak, so reduced-motion (animation off) = bars at peak. */
@keyframes hrOptBar1 {
	0%, 5.333%    { transform: scaleY(0.545); }
	18.667%, 80%  { transform: scaleY(1); }
	86.667%, 100% { transform: scaleY(0.545); }
}
@keyframes hrOptBar2 {
	0%, 18.667%   { transform: scaleY(0.4); }
	32%, 80%      { transform: scaleY(1); }
	86.667%, 100% { transform: scaleY(0.4); }
}
@keyframes hrOptBar3 {
	0%, 32%       { transform: scaleY(0.316); }
	45.333%, 80%  { transform: scaleY(1); }
	86.667%, 100% { transform: scaleY(0.316); }
}
.hr-anim-optimize-row .system-indicator[data-indicator="bar-growing"] .hr-anim-animated {
	transform-box: fill-box;
	transform-origin: bottom;
	animation-duration: 7.5s;
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
}
.hr-anim-optimize-row .system-indicator[data-indicator="bar-growing"] .bar-1 { animation-name: hrOptBar1; }
.hr-anim-optimize-row .system-indicator[data-indicator="bar-growing"] .bar-2 { animation-name: hrOptBar2; }
.hr-anim-optimize-row .system-indicator[data-indicator="bar-growing"] .bar-3 { animation-name: hrOptBar3; }

/* Reputation — deliberate star pulse (6s, −2s offset): rise + glow, hold ~1.5s,
   return, then ~3s rest. Base glow stays so reduced-motion shows the glow. */
@keyframes hrOptStarPulse {
	0%      { transform: scale(1);    filter: drop-shadow(0 0 4px rgba(70, 180, 191, 0.4)); }
	16.667% { transform: scale(1.18); filter: drop-shadow(0 0 12px rgba(70, 180, 191, 0.85)); }
	41.667% { transform: scale(1.18); filter: drop-shadow(0 0 12px rgba(70, 180, 191, 0.85)); }
	50%     { transform: scale(1);    filter: drop-shadow(0 0 4px rgba(70, 180, 191, 0.4)); }
	100%    { transform: scale(1);    filter: drop-shadow(0 0 4px rgba(70, 180, 191, 0.4)); }
}
.hr-anim-optimize-row .system-indicator[data-indicator="star-climbing"] .hr-anim-animated {
	transform-box: fill-box;
	transform-origin: center;
	filter: drop-shadow(0 0 4px rgba(70, 180, 191, 0.4));
	animation: hrOptStarPulse 6s ease-in-out -2s infinite;
}

/* Revenue — dollar grows + holds + resets (5s, −3.5s offset). Teal text glyph. */
.hr-anim-optimize-row .system-indicator[data-indicator="dollar-growing"] .dollar {
	font-family: var(--hr-font);
	font-weight: 700;
	font-size: 38px;
	line-height: 1;
	color: var(--hr-teal);
	display: inline-block;
	transform-origin: center;
	filter: drop-shadow(0 0 3px rgba(70, 180, 191, 0.35));
	animation: hrOptDollar 5s ease-out -3.5s infinite;
}
@keyframes hrOptDollar {
	0%   { transform: scale(0.5); opacity: 0.4; filter: drop-shadow(0 0 2px rgba(70, 180, 191, 0.25)); }
	24%  { transform: scale(1.2); opacity: 1;   filter: drop-shadow(0 0 10px rgba(70, 180, 191, 0.7)); }
	70%  { transform: scale(1.2); opacity: 1;   filter: drop-shadow(0 0 10px rgba(70, 180, 191, 0.7)); }
	76%  { transform: scale(0.5); opacity: 0.4; filter: drop-shadow(0 0 2px rgba(70, 180, 191, 0.25)); }
	100% { transform: scale(0.5); opacity: 0.4; filter: drop-shadow(0 0 2px rgba(70, 180, 191, 0.25)); }
}

/* Growth — trend line: draw in, hold ~2.5s, fade out, restart (6.5s, −5s offset).
   Reduced-motion (animation off) = fully drawn line (dashoffset 0 base). */
@keyframes hrOptTrendDraw {
	0%      { stroke-dashoffset: 100; opacity: 1; }
	23.077% { stroke-dashoffset: 0;   opacity: 1; }
	61.538% { stroke-dashoffset: 0;   opacity: 1; }
	69.231% { stroke-dashoffset: 0;   opacity: 0; }
	84.615% { stroke-dashoffset: 100; opacity: 0; }
	100%    { stroke-dashoffset: 100; opacity: 0; }
}
.hr-anim-optimize-row .system-indicator[data-indicator="trend-up"] .trend-line {
	stroke-dasharray: 100;
	animation: hrOptTrendDraw 6.5s ease-in-out -5s infinite;
}

/* ==========================================================================
   === HR Animation Widgets — Pass 4.5b Phase 2 (W1–W7) ===
   Seven demo cards. Each section is namespaced under .hr-anim-{widget}-*.
   Foundation principles inherited from Widget #8: deliberate, story-telling
   motion with ~50%+ rest per cycle; differing cycle lengths so peaks desync;
   continuous elements (orbs, spinners, scroll, sweep) carry .hr-anim-animated
   so the shared hover-pause / off-screen pause (.is-paused) can freeze them;
   reduced-motion (foundation media query) resolves each widget to a readable
   static end-state. Brand --hr-* tokens only — no hardcoded hex.
   ========================================================================== */

/* Screen-reader-only utility (used by W7 to expose the cycling tool list). */
.hr-anim-card .hr-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Shared orb — spinning conic-gradient with a blurred halo underlay. Sized by
   its wrapper (Reputation 80px, Launch 60px, Growth mini 28px). */
.hr-anim-card .hr-anim-reputation-orb,
.hr-anim-card .orb-medium,
.hr-anim-card .hr-orb-mini {
	position: relative;
	display: inline-block;
	flex: 0 0 auto;
}
.hr-anim-card .orb-core,
.hr-anim-card .orb-glow {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: conic-gradient(from 0deg, var(--hr-orb-deep), var(--hr-teal), var(--hr-cyan), var(--hr-orb-deep), var(--hr-teal));
	animation: hrOrbSpin 4s linear infinite;
}
.hr-anim-card .orb-glow {
	filter: blur(8px);
	opacity: 0.55;
}
.hr-anim-card .hr-orb-mini .orb-glow {
	filter: blur(4px);
	opacity: 0.6;
}
@keyframes hrOrbSpin { to { transform: rotate(360deg); } }
@keyframes hrSpin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   W1 — Response Demo (ScrollListAnimation)
   Continuous upward list scroll (24s) + 2.5s header spinner. The two animated
   elements run at different rates so they never sync; everything else is at
   rest. JS toggles a tab's .is-active to match the centered prospect.
   -------------------------------------------------------------------------- */
.hr-anim-response-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 14px;
}
.hr-anim-response-tabs {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.hr-anim-response-tabs .tab {
	font-size: 12px;
	font-weight: 600;
	color: var(--hr-text-secondary);
	padding: 6px 10px;
	border-radius: 8px;
	background: color-mix(in srgb, var(--hr-teal) 6%, transparent);
	border: 1px solid transparent;
	white-space: nowrap;
	transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}
.hr-anim-response-tabs .tab.is-active {
	color: var(--hr-text);
	background: color-mix(in srgb, var(--hr-teal) 16%, transparent);
	border-color: color-mix(in srgb, var(--hr-teal) 40%, transparent);
}
.hr-anim-response-spinner {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	color: var(--hr-teal);
}
.hr-anim-response-spinner svg { width: 24px; height: 24px; display: block; }
.hr-anim-response-spinner circle {
	transform-box: fill-box;
	transform-origin: center;
	animation: hrSpin 2.5s linear infinite;
}
.hr-anim-response-filters {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}
.hr-anim-response-filters .pill {
	font-size: 11px;
	color: var(--hr-text-tertiary);
	padding: 4px 9px;
	border-radius: 999px;
	border: 1px solid var(--hr-border);
	background: var(--hr-surface-elevated);
	white-space: nowrap;
}
.hr-anim-response-list-mask {
	height: 264px;
	overflow: hidden;
	position: relative;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}
.hr-anim-response-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	animation: hrScrollUp 24s linear infinite;
	will-change: transform;
}
@keyframes hrScrollUp {
	from { transform: translateY(0); }
	to { transform: translateY(-50%); }
}
.hr-anim-response-list .prospect {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px;
	border-radius: 10px;
	background: var(--hr-surface-elevated);
	border: 1px solid var(--hr-border);
}
.hr-anim-response-list .avatar {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 600;
	color: var(--hr-text-on-accent);
	background: linear-gradient(135deg, var(--hr-teal), var(--hr-cyan));
}
.hr-anim-response-list .info {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1 1 auto;
}
.hr-anim-response-list .name {
	font-size: 13px;
	font-weight: 600;
	color: var(--hr-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.hr-anim-response-list .label { font-size: 11px; color: var(--hr-text-tertiary); }
.hr-anim-response-list .badge {
	flex: 0 0 auto;
	font-size: 10px;
	font-weight: 600;
	color: var(--hr-teal);
	background: color-mix(in srgb, var(--hr-teal) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--hr-teal) 30%, transparent);
	padding: 3px 7px;
	border-radius: 999px;
	white-space: nowrap;
}
.hr-anim-response-list .meta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	flex: 0 0 auto;
}
.hr-anim-response-list .phone { font-size: 11px; color: var(--hr-text-secondary); white-space: nowrap; }
.hr-anim-response-list .date { font-size: 10px; color: var(--hr-text-tertiary); }

/* --------------------------------------------------------------------------
   W3 — Revenue Demo (ScrollListAnimation, template variation)
   Same scroll scaffold as W1. Only the single Estimate-follow-up spinner moves
   perpetually (1.5s); all other status glyphs are at rest.
   -------------------------------------------------------------------------- */
.hr-anim-revenue-header { margin-bottom: 14px; }
.hr-anim-revenue-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.hr-anim-revenue-tabs .tab {
	font-size: 12px;
	font-weight: 600;
	color: var(--hr-text-secondary);
	padding: 6px 10px;
	border-radius: 8px;
	background: color-mix(in srgb, var(--hr-teal) 6%, transparent);
	border: 1px solid transparent;
	white-space: nowrap;
	transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}
.hr-anim-revenue-tabs .tab.is-selected {
	color: var(--hr-text);
	border-color: color-mix(in srgb, var(--hr-teal) 45%, transparent);
}
.hr-anim-revenue-tabs .tab.is-active {
	color: var(--hr-text);
	background: color-mix(in srgb, var(--hr-teal) 16%, transparent);
}
.hr-anim-revenue-list-mask {
	height: 264px;
	overflow: hidden;
	position: relative;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}
.hr-anim-revenue-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	animation: hrScrollUp 26s linear infinite;
	will-change: transform;
}
.hr-anim-revenue-list .task {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 12px;
	border-radius: 10px;
	background: var(--hr-surface-elevated);
	border: 1px solid var(--hr-border);
	min-height: 54px;
}
.hr-anim-revenue-list .info { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.hr-anim-revenue-list .name { font-size: 13px; font-weight: 600; color: var(--hr-text); }
.hr-anim-revenue-list .subline { font-size: 11px; color: var(--hr-text-secondary); }
.hr-anim-revenue-list .status-indicator {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--hr-teal);
}
.hr-anim-revenue-list .status-indicator svg { width: 20px; height: 20px; }
.hr-anim-revenue-list .status-indicator[data-status="declined"] { color: var(--hr-danger-muted); }
.hr-anim-revenue-list .rev-spinner {
	display: inline-block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: conic-gradient(from 0deg, transparent 0%, var(--hr-teal) 100%);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), black calc(100% - 3px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 3px), black calc(100% - 3px));
	animation: hrSpin 1.5s linear infinite;
}

/* --------------------------------------------------------------------------
   W2 — Reputation Demo (ReputationAnimation)
   Continuous orb spin (CSS) + JS typewriter. Typing is one focused element at
   a time; the cursor blinks. Reduced-motion: orb at 0deg, phrase 1 fully typed.
   -------------------------------------------------------------------------- */
.hr-anim-reputation { text-align: center; }
.hr-anim-reputation-orb { width: 80px; height: 80px; margin: 6px auto 18px; }
.hr-anim-reputation-title { font-size: 18px; margin: 0 0 6px; color: var(--hr-text); }
.hr-anim-reputation-subtitle { font-size: 13px; color: var(--hr-text-secondary); margin: 0 0 18px; }
.hr-anim-reputation-typing-wrap {
	min-height: 64px;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 1px;
	padding: 12px 14px;
	border-radius: 10px;
	background: var(--hr-surface-elevated);
	border: 1px solid var(--hr-border);
	text-align: left;
}
.hr-anim-reputation-typing {
	font-size: 13px;
	line-height: 1.5;
	color: var(--hr-text);
	font-family: var(--hr-font);
}
.hr-anim-reputation-cursor {
	display: inline-block;
	color: var(--hr-teal);
	font-weight: 700;
	animation: hrBlink 1s steps(1, end) infinite;
}
@keyframes hrBlink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
.hr-anim-reputation-actions { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
.hr-anim-reputation-actions .action-pill {
	font-size: 11px;
	font-weight: 600;
	color: var(--hr-teal);
	padding: 5px 12px;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--hr-teal) 30%, transparent);
	background: color-mix(in srgb, var(--hr-teal) 8%, transparent);
}

/* --------------------------------------------------------------------------
   W4 — Growth Demo (RankingsAnimation)
   Corner orb (CSS spin) + sparklines that draw in sequentially (12s cycle,
   staggered delays = surveying each keyword in turn) + a rank-number pulse that
   rotates one row at a time (32s, 8s apart) + a one-shot count-up on mount (JS).
   -------------------------------------------------------------------------- */
.hr-anim-growth-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 16px;
}
.hr-anim-growth-title h3 { font-size: 16px; margin: 0; }
.hr-anim-growth-title .subtitle { font-size: 12px; color: var(--hr-text-tertiary); margin: 2px 0 0; }
.hr-anim-growth-orb-wrap { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.hr-orb-mini { width: 28px; height: 28px; }
.hr-anim-growth-orb-wrap .orb-label { font-size: 10px; font-weight: 600; color: var(--hr-teal); white-space: nowrap; }
.hr-anim-growth-rankings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.hr-anim-growth-rankings li {
	display: grid;
	grid-template-columns: 1fr 90px auto;
	align-items: center;
	gap: 12px;
	padding: 10px;
	border-radius: 8px;
	background: var(--hr-surface-elevated);
	border: 1px solid var(--hr-border);
	min-height: 48px;
}
.hr-anim-growth-rankings .keyword {
	font-size: 13px;
	font-weight: 500;
	color: var(--hr-text);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.hr-anim-growth-rankings .sparkline { width: 90px; height: 28px; color: var(--hr-teal); overflow: visible; }
.hr-anim-growth-rankings .sparkline-path {
	stroke-dasharray: 100;
	stroke-dashoffset: 0;
	animation: hrSparkDraw 12s ease-in-out infinite;
}
@keyframes hrSparkDraw {
	0%      { stroke-dashoffset: 100; opacity: 1; }
	33.333% { stroke-dashoffset: 0;   opacity: 1; }
	50%     { stroke-dashoffset: 0;   opacity: 1; }
	58.333% { stroke-dashoffset: 0;   opacity: 0; }
	58.4%   { stroke-dashoffset: 100; opacity: 0; }
	100%    { stroke-dashoffset: 100; opacity: 0; }
}
.hr-anim-growth-rankings .rank { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.hr-anim-growth-rankings .rank-number {
	font-size: 15px;
	font-weight: 700;
	color: var(--hr-text);
	display: inline-block;
	animation: hrRankPulse 32s ease-in-out infinite;
}
@keyframes hrRankPulse {
	0%   { color: var(--hr-text); transform: scale(1); text-shadow: none; }
	3%   { color: var(--hr-teal); transform: scale(1.14); text-shadow: 0 0 12px color-mix(in srgb, var(--hr-teal) 80%, transparent); }
	9%   { color: var(--hr-text); transform: scale(1); text-shadow: none; }
	100% { color: var(--hr-text); transform: scale(1); text-shadow: none; }
}
/* Per-row stagger (was inline animation-delay; moved here per the no-inline-
   styles rule). Sparklines draw 1.5s apart; rank-number pulse rotates 8s apart. */
.hr-anim-growth-rankings li:nth-child(1) .sparkline-path { animation-delay: 0s; }
.hr-anim-growth-rankings li:nth-child(2) .sparkline-path { animation-delay: 1.5s; }
.hr-anim-growth-rankings li:nth-child(3) .sparkline-path { animation-delay: 3s; }
.hr-anim-growth-rankings li:nth-child(4) .sparkline-path { animation-delay: 4.5s; }
.hr-anim-growth-rankings li:nth-child(1) .rank-number { animation-delay: 0s; }
.hr-anim-growth-rankings li:nth-child(2) .rank-number { animation-delay: 8s; }
.hr-anim-growth-rankings li:nth-child(3) .rank-number { animation-delay: 16s; }
.hr-anim-growth-rankings li:nth-child(4) .rank-number { animation-delay: 24s; }
.hr-anim-growth-rankings .rank-change { font-size: 11px; font-weight: 600; color: var(--hr-success); white-space: nowrap; }
.hr-anim-growth-footer {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--hr-border);
	font-size: 12px;
	color: var(--hr-text-secondary);
	flex-wrap: wrap;
}
.hr-anim-growth-footer .to-num,
.hr-anim-growth-footer .count { color: var(--hr-teal); font-weight: 700; }

/* --------------------------------------------------------------------------
   W5 — Find the Leaks (RadarAnimation)
   Continuous 3s radar sweep (CSS). JS spawns a detection ping every 4–5s (~1s
   each) and pulses the matching leak row + caption for ~2s, then rests.
   -------------------------------------------------------------------------- */
.hr-anim-leaks-layout { display: flex; gap: 16px; align-items: center; }
.hr-anim-leaks-radar { flex: 0 0 auto; width: 170px; text-align: center; }
.radar-scope { width: 170px; height: 170px; color: var(--hr-teal); display: block; }
.radar-scope .ring { fill: none; stroke: color-mix(in srgb, var(--hr-teal) 22%, transparent); stroke-width: 1; }
.radar-scope .cross { stroke: color-mix(in srgb, var(--hr-teal) 12%, transparent); stroke-width: 1; }
.radar-scope .sweep-arm {
	transform-box: view-box;
	transform-origin: 100px 100px;
	animation: hrSweep 3s linear infinite;
}
@keyframes hrSweep { to { transform: rotate(360deg); } }
.radar-scope .ping {
	fill: var(--hr-teal);
	transform-box: fill-box;
	transform-origin: center;
	animation: hrPing 1s ease-out forwards;
}
@keyframes hrPing {
	0%   { transform: scale(0); opacity: 0.9; }
	100% { transform: scale(1); opacity: 0; }
}
.radar-caption {
	font-size: 11px;
	color: var(--hr-text-tertiary);
	margin: 8px 0 0;
	min-height: 16px;
	transition: color 0.3s ease;
}
.radar-caption.is-detect { color: var(--hr-teal); font-weight: 600; }
.hr-anim-leaks-list { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; }
.hr-anim-leaks-list li {
	font-size: 13px;
	color: var(--hr-text-secondary);
	padding: 9px 12px;
	border-radius: 8px;
	background: var(--hr-surface-elevated);
	border: 1px solid var(--hr-border);
	transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}
.hr-anim-leaks-list li.is-detected {
	color: var(--hr-text);
	background: color-mix(in srgb, var(--hr-teal) 14%, transparent);
	border-color: color-mix(in srgb, var(--hr-teal) 45%, transparent);
}

/* --------------------------------------------------------------------------
   W6 — Build Your Systems (CodeScrollAnimation)
   Continuous 25s code scroll (CSS). JS cross-fades the file tab every 12s.
   Two animated rates only; syntax tokens are static color.
   -------------------------------------------------------------------------- */
.hr-anim-build-window {
	background: var(--hr-bg);
	border: 1px solid var(--hr-border);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 8px 30px color-mix(in srgb, black 40%, transparent);
}
.hr-anim-build .window-chrome {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	background: var(--hr-surface-elevated);
	border-bottom: 1px solid var(--hr-border);
}
.hr-anim-build .traffic-lights { display: flex; gap: 6px; flex: 0 0 auto; }
.hr-anim-build .traffic-lights .dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.hr-anim-build .dot.red { background: var(--hr-danger-muted); }
.hr-anim-build .dot.yellow { background: var(--hr-code-str); }
.hr-anim-build .dot.green { background: var(--hr-success); }
.hr-anim-build .file-tab {
	font-family: var(--hr-font);
	font-size: 12px;
	color: var(--hr-text-secondary);
	flex: 1 1 auto;
	text-align: center;
	transition: opacity 0.3s ease;
}
.hr-anim-build .file-tab.is-fading { opacity: 0; }
.hr-anim-build .window-actions { flex: 0 0 30px; }
.hr-anim-build .window-body { display: flex; height: 230px; }
.hr-anim-build .sidebar {
	flex: 0 0 38px;
	background: var(--hr-surface);
	border-right: 1px solid var(--hr-border);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding-top: 14px;
}
.hr-anim-build .sidebar-icon {
	width: 18px;
	height: 18px;
	border-radius: 4px;
	background: color-mix(in srgb, var(--hr-text-tertiary) 60%, transparent);
}
.hr-anim-build .code-area {
	flex: 1 1 auto;
	margin: 0;
	padding: 12px 14px;
	overflow: hidden;
	position: relative;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
}
.hr-anim-build .code-content {
	display: block;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Code", Consolas, monospace;
	font-size: 12px;
	line-height: 1.55;
	color: var(--hr-text-secondary);
	white-space: pre;
	animation: hrCodeScroll 25s linear infinite;
	will-change: transform;
}
@keyframes hrCodeScroll {
	from { transform: translateY(0); }
	to { transform: translateY(-50%); }
}
.hr-anim-build .code-block { display: block; }
.hr-anim-build .kw { color: var(--hr-teal); }
.hr-anim-build .str { color: var(--hr-code-str); }
.hr-anim-build .cmt { color: var(--hr-text-tertiary); font-style: italic; }
.hr-anim-build .fn { color: var(--hr-code-fn); }
.hr-anim-build .cls { color: var(--hr-success); }

/* --------------------------------------------------------------------------
   W7 — Launch Alongside (LaunchConnectAnimation)
   Left orb spins (CSS). JS sends pulse dots along 3 lines (phased so ~2 are
   mid-travel, 4 resting at endpoints) and cycles the tool name every 3s. The
   "Live" badge breathes on a 4s pulse.
   -------------------------------------------------------------------------- */
.hr-anim-launch-layout { display: flex; align-items: center; gap: 8px; }
.hr-anim-launch .launch-box {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 96px;
	padding: 14px 8px;
	border-radius: 12px;
	background: var(--hr-surface-elevated);
	border: 1px solid var(--hr-border);
	text-align: center;
}
.orb-medium { width: 60px; height: 60px; }
.hr-anim-launch .box-label { font-size: 12px; font-weight: 600; color: var(--hr-text); }
.hr-anim-launch .launch-connector { flex: 1 1 auto; height: 100px; color: var(--hr-teal); }
.hr-anim-launch .launch-connector .line {
	stroke: color-mix(in srgb, var(--hr-teal) 30%, transparent);
	stroke-width: 1.5;
	stroke-dasharray: 4 4;
}
.hr-anim-launch .launch-connector .pulse-dot { fill: var(--hr-cyan); }
.hr-anim-launch .integration-display { min-height: 20px; display: flex; align-items: center; justify-content: center; }
.hr-anim-launch .integration-name {
	font-size: 12px;
	font-weight: 600;
	color: var(--hr-teal);
	text-align: center;
	transition: opacity 0.3s ease;
}
.hr-anim-launch .integration-name.is-fading { opacity: 0; }
.hr-anim-launch .connection-badge {
	font-size: 10px;
	font-weight: 600;
	color: var(--hr-success);
	animation: hrBadgePulse 4s ease-in-out infinite;
}
@keyframes hrBadgePulse { 0%, 100% { opacity: 0.65; } 50% { opacity: 1; } }

/* --------------------------------------------------------------------------
   Mobile (≤768px) — simplify per spec; content stays legible at 375px.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	/* W1 Response */
	.hr-anim-response-list-mask { height: 224px; }
	.hr-anim-response-list .name { font-size: 12px; }
	.hr-anim-response-list .label,
	.hr-anim-response-list .date { display: none; }
	.hr-anim-response-list .badge { font-size: 9px; padding: 2px 6px; }
	.hr-anim-response-list .avatar { width: 30px; height: 30px; }

	/* W3 Revenue */
	.hr-anim-revenue-list-mask { height: 224px; }
	.hr-anim-revenue-list .name { font-size: 12px; }
	.hr-anim-revenue-list .subline { font-size: 10px; }

	/* W2 Reputation */
	.hr-anim-reputation-typing-wrap { min-height: 78px; }

	/* W4 Growth — drop the sparkline column */
	.hr-anim-growth-header { flex-direction: column; align-items: flex-start; gap: 8px; }
	.hr-anim-growth-rankings .sparkline { display: none; }
	.hr-anim-growth-rankings li { grid-template-columns: 1fr auto; }

	/* W5 Leaks — stack radar above list */
	.hr-anim-leaks-layout { flex-direction: column; }
	.hr-anim-leaks-radar { width: 150px; }
	.radar-scope { width: 150px; height: 150px; }
	.hr-anim-leaks-list { width: 100%; }

	/* W6 Build — hide sidebar, smaller code */
	.hr-anim-build .sidebar { display: none; }
	.hr-anim-build .code-content { font-size: 11px; }
	.hr-anim-build .window-body { height: 200px; }

	/* W7 Launch — stack vertically; connector becomes vertical */
	.hr-anim-launch-layout { flex-direction: column; }
	.hr-anim-launch .launch-box { width: 150px; }
	.hr-anim-launch .launch-connector { width: 60px; height: 84px; flex: 0 0 auto; transform: rotate(90deg); }
}

/* ==========================================================================
   === Pass 4 — Interlink: nav dropdown, footer sitemap, mid-page CTAs ===
   All brand --hr-* tokens; rgba() teal/black tints match the existing file.
   ========================================================================== */

/* --- Primary nav: Services dropdown (dark theme to match the nav bar) --- */
.main-navigation .sub-menu {
	background: var(--hr-surface);
	border: 1px solid rgba(70, 180, 191, 0.15);
	border-radius: 8px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.main-navigation .sub-menu a {
	color: var(--hr-text-secondary);
	padding: 12px 24px;
	transition: color 0.2s ease, background-color 0.2s ease;
}
.main-navigation .sub-menu a:hover,
.main-navigation .sub-menu a:focus {
	color: var(--hr-teal);
	background: rgba(70, 180, 191, 0.08);
}

/* --- Footer sitemap (rendered via the generate_copyright filter) --- */
.hr-foot {
	max-width: 1200px;
	margin: 0 auto;
	padding: 80px 24px 40px;
	border-top: 1px solid rgba(70, 180, 191, 0.1);
	text-align: left;
}
.hr-foot-cols {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px;
	margin: 0 0 48px;
}
.hr-foot-col h4 {
	font-family: var(--hr-font);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--hr-teal);
	margin: 0 0 16px;
}
.hr-foot-col a {
	display: block;
	font-size: 14px;
	color: var(--hr-text-secondary);
	text-decoration: none;
	margin: 0 0 10px;
	transition: color 0.2s ease;
}
.hr-foot-col a:hover { color: var(--hr-teal); }
/* Linked column header (Resources) — keep the h4 look, not the list-item look. */
.hr-foot-col h4 a { font: inherit; color: inherit; letter-spacing: inherit; display: inline; margin: 0; text-decoration: none; }
.hr-foot-col h4 a:hover { color: var(--hr-teal); text-decoration: underline; }
/* Unlinked footer items (label kept, no link — page still draft). Matches link
   styling minus hover/pointer. Blog + Resources use this; Case Studies + Videos
   were removed entirely (David, 2026-07-07). */
.hr-foot-col .hr-foot-soon {
	display: block;
	font-size: 14px;
	color: var(--hr-text-secondary);
	margin: 0 0 10px;
	cursor: default;
}
.hr-foot-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: 28px;
	border-top: 1px solid rgba(70, 180, 191, 0.1);
	font-size: 13px;
	color: var(--hr-text-tertiary);
}
.hr-foot-bar a { color: var(--hr-text-tertiary); text-decoration: none; transition: color 0.2s ease; }
.hr-foot-bar a:hover { color: var(--hr-teal); }
.hr-foot-bar .hr-foot-cta { color: var(--hr-teal); font-weight: 600; }
@media (max-width: 768px) {
	.hr-foot { padding: 56px 24px 32px; }
	.hr-foot-cols { grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 36px; }
	.hr-foot-bar { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* --- Mid-page CTA callouts (service pages) --- */
.hr-mid-cta {
	position: relative;
	overflow: hidden;
	max-width: 800px;
	margin: 0 auto;
	padding: 56px 40px;
	text-align: center;
	background: linear-gradient(135deg, rgba(70, 180, 191, 0.08) 0%, rgba(56, 189, 248, 0.04) 100%);
	border: 2px solid rgba(70, 180, 191, 0.3);
	border-radius: 16px;
}
.hr-mid-cta::before {
	content: '';
	position: absolute;
	bottom: -30%;
	left: -15%;
	width: 250px;
	height: 250px;
	background: radial-gradient(circle, rgba(70, 180, 191, 0.15) 0%, transparent 65%);
	pointer-events: none;
	z-index: 0;
}
.hr-mid-cta::after {
	content: '';
	position: absolute;
	top: -30%;
	right: -15%;
	width: 200px;
	height: 200px;
	background: radial-gradient(circle, rgba(56, 189, 248, 0.10) 0%, transparent 65%);
	pointer-events: none;
	z-index: 0;
}
.hr-mid-cta > * {
	position: relative;
	z-index: 1;
}
.hr-mid-cta-text {
	color: var(--hr-text);
	font-size: 20px;
	font-weight: 500;
	margin-bottom: 20px;
}
.hr-mid-cta-link {
	display: inline-block;
	color: var(--hr-bg);
	background: var(--hr-teal);
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	padding: 14px 32px;
	border-radius: 10px;
	transition: opacity 0.2s;
}
.hr-mid-cta-link:hover {
	opacity: 0.9;
	text-decoration: none;
}

/* ==========================================================================
   === Pass 5 — Design polish ===
   Overrides page-inline class styles via .entry-content (higher specificity).
   Targets the REAL page classes (hrx-*, hrs-*, svc-*). Brand colors only.
   ========================================================================== */

/* --- CHANGE 1: left-align body copy + lists. Headings, eyebrows, leads,
   intros, taglines, sub-notes, and .hr-mid-cta stay centered (untouched). --- */
.entry-content .hrx-body,
.entry-content .hrx-body p,
.entry-content .hrx-fbody,
.entry-content .hrx-numlist,
.entry-content .hrx-numlist li,
.entry-content .hrx-vex,
.entry-content .hrx-vex p,
.entry-content .hrx-foot,
.entry-content .hrx-acc-body,
.entry-content .hrx-acc-body p,
.entry-content .hrx-ilist,
.entry-content .hrx-ilist li,
.entry-content .hrx-checklist,
.entry-content .hrx-checklist li,
.entry-content .hrx-plist,
.entry-content .hrx-plist li {
	text-align: left;
}

/* --- CHANGE 2: eyebrow text 14px (was 11–12px) --- */
.entry-content .hrx-kicker,
.entry-content .hrs-eyebrow,
.entry-content .svc-label,
.entry-content .hrs-label,
.entry-content .hrx-plabel {
	font-size: 14px;
}

/* --- CHANGE 3: clear space between brand and first nav link (desktop) --- */
@media (min-width: 769px) {
	/* .site-header raises specificity above the parent theme's own .main-navigation
	   rules, so this cannot be decided by stylesheet order. */
	.site-header .main-navigation {
		margin-left: 96px;
	}

	/* Pull the wordmark in tight against the logo icon.
	 *
	 * GeneratePress sets `.site-logo{margin-right:1em}` in its own main.min.css at the
	 * SAME specificity (0,1,0) as a bare `.site-logo` override here, so which one wins
	 * depends purely on stylesheet load order - which is not guaranteed once caching and
	 * concatenation are in play. Every selector below is deliberately deeper than the
	 * parent's so the outcome is decided by specificity, not by luck.
	 *
	 * Scoped to desktop: below 769px the mobile toggle shares this container. */
	.site-header .site-branding-container {
		display: flex;
		align-items: center;
		gap: 6px;
	}
	.site-header .site-branding-container .site-logo {
		margin-right: 0;
		line-height: 0;
	}
	.site-header .site-branding-container .site-branding {
		margin-left: 0;
	}
	.site-header .site-branding-container .main-title {
		margin-left: 0;
	}
}

/* Wider gap once there is room for it. Held back below 1200px because the nav has to
   fit the CTA pill as well, and pushing the menu further right at ~1024px wraps it. */
@media (min-width: 1200px) {
	.site-header .main-navigation {
		margin-left: 150px;
	}
}

/* --- Current-item nav colour: fixes an undefined CSS variable ---
   GeneratePress emits:
       .main-navigation .main-nav ul li[class*="current-menu-"] > a { color: var(--accent); }
   but `--accent` is not defined anywhere on this site (the tokens are --teal-primary,
   --text-primary, --text-secondary). An undefined var with no fallback makes the whole
   declaration invalid at computed-value time, so `color` resolves to `unset` and the link
   INHERITS a duller colour instead of white.

   It only showed on the current item, which is why Systems looked dull on /systems/*
   pages and Resources on /resources/* pages, while About and Contact stayed white.

   Matching the other links keeps the bar uniform. For wayfinding instead, swap the two
   colour values below for var(--hr-teal). */
.main-navigation .main-nav ul li[class*="current-menu-"] > a,
.main-navigation .main-nav ul li[class*="current_page_"] > a {
	color: #FFFFFF;
}
.main-navigation .main-nav ul li[class*="current-menu-"] > a:hover,
.main-navigation .main-nav ul li[class*="current_page_"] > a:hover {
	color: #46B4BF;
}

/* Sub-menu items keep their own softer treatment; the rule above must not reach them. */
.main-navigation .sub-menu li[class*="current-menu-"] > a,
.main-navigation .sub-menu li[class*="current_page_"] > a {
	color: var(--hr-teal, #46B4BF);
}

/* --- CHANGE 4: separator notes — strip card/box treatment (Playbook §3 El.5).
   .hrx-sepnote is on /reputation, /revenue, /growth (inside #compare). --- */
.entry-content .hrx-sepnote {
	background: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	max-width: 700px;
	margin: 48px auto;
	font-size: 15px;
	font-style: italic;
	line-height: 1.5;
	color: var(--hr-text-tertiary);
	text-align: center;
}

/* --- CHANGE 5a: subtle teal corner glow on cards. inset:0 keeps it contained
   (no overflow:hidden needed, so the "Most Popular" badges are never clipped). --- */
.entry-content .svc-card,
.entry-content .hrx-card,
.entry-content .hr-tier-card,
.entry-content .hrx-wcard {
	position: relative;
}
.entry-content .svc-card::before,
.entry-content .hrx-card::before,
.entry-content .hr-tier-card::before,
.entry-content .hrx-wcard::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(circle at top right, rgba(70, 180, 191, 0.08) 0%, transparent 45%);
	pointer-events: none;
	z-index: 0;
}
.entry-content .svc-card > *,
.entry-content .hrx-card > *,
.entry-content .hr-tier-card > *,
.entry-content .hrx-wcard > * {
	position: relative;
	z-index: 1;
}

/* --- CHANGE 5b: mid-section background glow on "What's in the system" --- */
.entry-content #whats-included {
	background-image: radial-gradient(ellipse at 80% 50%, rgba(70, 180, 191, 0.05) 0%, transparent 55%);
}

/* --- CHANGE 5c: stronger corner accents on the closing CTA band (home #cta,
   about #about-cta — both .hrx-glow-cta; the section already has overflow:hidden).
   Overrides the page's centered ::before and adds a top-right cyan ::after. --- */
.entry-content .hrx-glow-cta::before {
	content: '';
	position: absolute;
	top: auto;
	right: auto;
	bottom: -20%;
	left: -10%;
	width: 500px;
	height: 500px;
	transform: none;
	background: radial-gradient(circle, rgba(70, 180, 191, 0.25) 0%, transparent 60%);
	pointer-events: none;
	z-index: 0;
}
.entry-content .hrx-glow-cta::after {
	content: '';
	position: absolute;
	top: -20%;
	right: -10%;
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, rgba(56, 189, 248, 0.15) 0%, transparent 60%);
	pointer-events: none;
	z-index: 0;
}
.entry-content .hrx-glow-cta > * {
	position: relative;
	z-index: 1;
}

/* --- CHANGE 8: consistent hover on homepage tier cards (svc-card lacked it;
   matches .hr-tier-card / .hrx-card hover behavior) --- */
.entry-content .svc-card {
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.entry-content .svc-card:hover {
	transform: translateY(-2px);
	border-color: var(--hr-teal);
	box-shadow: 0 12px 32px rgba(70, 180, 191, 0.12);
}

/* ==========================================================================
   === Pass 5 refinements (2026-06-21) ===
   ========================================================================== */

/* FIX 2 — Homepage hero: large, soft, slow-rotating radial burst behind the H1.
   Overrides the static .hrx-glow-hero::before on the HOMEPAGE hero only
   (.home #hero). #hero is position:relative + overflow:hidden (.hrx-sec); the
   hero content (.hrx-inner) is already z-index:1, so it sits above the burst. */
/* FIX A (r2) — burst targets the hero element class directly (no body-class
   dependency). #hero.hr-hero-home = specificity (1,1,1), beats the page-inline
   .hrx-glow-hero::before (0,1,1). .hrx-sec already gives position:relative +
   overflow:hidden; .hrx-inner content is already z-index:1. */
#hero.hr-hero-home {
	position: relative;
	overflow: hidden;
}
#hero.hr-hero-home::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 900px;
	height: 900px;
	background: radial-gradient(circle, rgba(70, 180, 191, 0.35) 0%, rgba(56, 189, 248, 0.20) 30%, transparent 65%);
	filter: blur(40px);
	pointer-events: none;
	z-index: 0;
	animation: hr-hero-glow-rotate 20s linear infinite;
}
#hero.hr-hero-home > * {
	position: relative;
	z-index: 1;
}
@keyframes hr-hero-glow-rotate {
	from { transform: translate(-50%, -50%) rotate(0deg); }
	to { transform: translate(-50%, -50%) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	#hero.hr-hero-home::before { animation: none; }
}

/* FIX B (r2) — How It Works widgets clip on the right because they're wider
   than the 2-col step cards. Constrain the widget + its widest internal layouts
   to the card width, trim padding/gaps, and cap the radar diameter. (CSS sizing
   only — no widget animation/markup changes.) */
/* FIX B (r4) — root cause of right-column clip: grid children default to
   min-width:auto, so a card whose widget has a large intrinsic min-content
   width expands its 1fr column and squeezes the sibling column (its widget then
   clips). Fix: min-width:0 on the grid children forces true-equal 1fr columns;
   overflow:hidden on the card clips any residual bleed. (Scale approach removed
   — it shrank all four widgets for a two-card problem.) */
#process .hrx-card {
	min-width: 0;
	overflow: hidden;
}

/* ==========================================================================
   === Pass 5 r-fixes (2026-06-22) ===
   ========================================================================== */
/* FIX 1 — stronger corner burst on the "Why it works" benefit cards (#benefits
   uses .hrx-card). Bumps the existing top-right glow 0.08 -> 0.18 and widens the
   spread (45% -> 65%) for a larger, clearly-visible burst. */
.entry-content #benefits .hrx-card::before {
	background: radial-gradient(circle at top right, rgba(70, 180, 191, 0.18) 0%, transparent 65%);
}

/* FIX 3 — widen body-prose containers so orphan words pull back up a line.
   Real classes: .hrx-narrow 800->900, .hrx-body 760->900. Centered leads/intros
   keep their own narrower caps; headings unaffected. */
.entry-content .hrx-narrow { max-width: 900px; }
.entry-content .hrx-body { max-width: 900px; }

/* ==========================================================================
   === AEO page (id 165) — Pass 5 visual treatments (.aeo-* namespace) ===
   Card corner bursts, hero radial burst, final-CTA corner accents — matching
   the homepage/benefit-card/CTA intensities approved in Pass 5. .aeo-sec gives
   position:relative + overflow:hidden; .aeo-inner is z-index:1.
   ========================================================================== */
/* Card corner bursts on the 4-engine + pricing boxes */
.aeo-card, .aeo-card-lg { position: relative; }
.aeo-card::before, .aeo-card-lg::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(circle at top right, rgba(70, 180, 191, 0.18) 0%, transparent 60%);
	pointer-events: none;
	z-index: 0;
}
.aeo-card > *, .aeo-card-lg > * { position: relative; z-index: 1; }

/* Hero radial burst (matches homepage #hero.hr-hero-home) */
#aeo-hero::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 900px;
	height: 900px;
	background: radial-gradient(circle, rgba(70, 180, 191, 0.35) 0%, rgba(56, 189, 248, 0.20) 30%, transparent 65%);
	filter: blur(40px);
	pointer-events: none;
	z-index: 0;
	animation: hr-hero-glow-rotate 20s linear infinite;
}
@media (prefers-reduced-motion: reduce) { #aeo-hero::before { animation: none; } }

/* Final CTA corner accents (matches homepage .hrx-glow-cta). Targets the CTA
   section via :has(.aeo-btn), excluding the hero by id — no page-content edit. */
.aeo-sec:not(#aeo-hero):has(.aeo-btn)::before {
	content: '';
	position: absolute;
	bottom: -20%;
	left: -10%;
	width: 500px;
	height: 500px;
	background: radial-gradient(circle, rgba(70, 180, 191, 0.25) 0%, transparent 60%);
	pointer-events: none;
	z-index: 0;
}
.aeo-sec:not(#aeo-hero):has(.aeo-btn)::after {
	content: '';
	position: absolute;
	top: -20%;
	right: -10%;
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, rgba(56, 189, 248, 0.15) 0%, transparent 60%);
	pointer-events: none;
	z-index: 0;
}
.aeo-sec:not(#aeo-hero):has(.aeo-btn) > * { position: relative; z-index: 1; }

/* ==========================================================================
   ===== AEO Callout Strip (homepage id 12 — below the 4 tier cards) =====
   Full-width hairline strip (border top + bottom only), subtle teal tint.
   2-col flex desktop (text left, link right) -> stacks on mobile.
   ========================================================================== */
.hr-aeo-section { background: var(--hr-bg); padding: 0 24px; overflow: visible; }
/* Issue 2 fix: tighten the gap between the AEO strip and the "View All Services"
   button below it (homepage only). Overrides the page-inline .svc-viewall{margin-top:56px}
   via higher specificity. Pairs with the strip margin-bottom reduced to 24px → ~40px total. */
.page-id-12 .svc-viewall { margin-top: 16px; }
/* 2026-08-13 — reworked from a full-width 2-col "strip" into CARD anatomy so the
   bolt-on reads as a peer of the tier cards rather than a stretched banner.
   Was: max-width var(--hr-container) + justify-content:space-between, which
   stretched the copy across the full container and threw the CTA to the far
   right edge. Now: constrained width, card surface, left-aligned column with the
   link sitting under the copy the way .svc-card / .hr-tier-card CTAs do.
   Deliberately keeps the teal border (not the tier cards' #2A2A38) so it still
   reads as an add-on — present and valued, but not a fourth tier. */
.hr-aeo-strip {
	max-width: 860px;
	margin: 40px auto 24px;
	padding: 32px;
	box-sizing: border-box;
	overflow: visible;
	border: 1px solid rgba(70, 180, 191, 0.45);
	border-radius: 16px;
	background: #14141C;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	gap: 0;
}
.hr-aeo-strip__text { flex: 1 1 auto; min-width: 0; }
.hr-aeo-strip__h {
	font-family: var(--hr-font);
	font-weight: 600;
	font-size: 17px;
	color: var(--hr-text);
	line-height: 1.4;
	margin: 0 0 6px;
}
.hr-aeo-strip__sub {
	font-family: var(--hr-font);
	font-weight: 400;
	font-size: 14px;
	color: var(--hr-text-secondary);
	line-height: 1.55;
	margin: 0 0 6px;
}
.hr-aeo-strip__note {
	font-family: var(--hr-font);
	font-weight: 400;
	font-style: italic;
	font-size: 13px;
	color: var(--hr-text-tertiary);
	line-height: 1.5;
	margin: 0;
}
/* Card-style heading: sized like a tier-card h3 so the bolt-on does not read as
   fine print next to the three systems. */
.hr-aeo-strip__h {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 10px;
}
.hr-aeo-strip__sub { font-size: 15px; margin: 0 0 8px; }
.hr-aeo-strip__link {
	flex: 0 0 auto;
	align-self: flex-start;
	margin-top: 18px;
	font-family: var(--hr-font);
	font-weight: 500;
	font-size: 14px;
	color: var(--hr-teal);
	text-decoration: none;
	white-space: nowrap;
	transition: filter .2s ease;
}
.hr-aeo-strip__link:hover { text-decoration: underline; filter: brightness(1.15); }
@media (max-width: 768px) {
	.hr-aeo-section { padding: 0 16px; }
	.hr-aeo-strip {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		padding: 24px;
		margin: 32px auto 64px;
	}
	.hr-aeo-strip__link {
		display: block;
		width: 100%;
		text-align: center;
		white-space: normal;
		padding: 12px 16px;
		border: 1px solid rgba(70, 180, 191, 0.45);
		border-radius: 8px;
		box-sizing: border-box;
	}
}

/* ==========================================================================
   ===== AEO Add-On Callout Card (service pages 15/16/17 — Pricing -> FAQ) =====
   A CARD (not the homepage strip): centered, surface bg, teal hairline border.
   2-col flex desktop (text left, outline CTA right) -> stacks full-width mobile.
   Rendered by [hr_aeo_callout tier="..."] in functions.php.
   ========================================================================== */
.hr-aeo-callout-sec { background: var(--hr-bg); padding: 0 24px; }
.hr-aeo-callout {
	max-width: 980px;
	margin: 64px auto;
	padding: 40px;
	background: var(--hr-surface);
	border: 1px solid rgba(70, 180, 191, 0.25);
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
}
.hr-aeo-callout__text { flex: 1 1 auto; min-width: 0; }
.hr-aeo-callout__eyebrow {
	display: block;
	font-family: var(--hr-font);
	font-weight: 600;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--hr-teal);
	margin: 0 0 12px;
}
.hr-aeo-callout__h {
	font-family: var(--hr-font);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.25;
	color: var(--hr-text);
	margin: 0 0 14px;
}
.hr-aeo-callout__body {
	font-family: var(--hr-font);
	font-weight: 400;
	font-size: 15px;
	line-height: 1.6;
	color: var(--hr-text-secondary);
	margin: 0 0 14px;
}
.hr-aeo-callout__math {
	font-family: var(--hr-font);
	font-weight: 500;
	font-size: 14px;
	color: var(--hr-teal);
	margin: 0 0 8px;
}
.hr-aeo-callout__note {
	font-family: var(--hr-font);
	font-weight: 400;
	font-style: italic;
	font-size: 12px;
	color: var(--hr-text-tertiary);
	margin: 0;
}
.hr-aeo-callout__cta { flex: 0 0 auto; align-self: center; }
.hr-aeo-callout__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--hr-font);
	font-weight: 600;
	font-size: 15px;
	color: var(--hr-teal);
	background: transparent;
	border: 1px solid var(--hr-teal);
	border-radius: 10px;
	padding: 14px 28px;
	text-decoration: none;
	white-space: nowrap;
	transition: all .2s ease;
}
.hr-aeo-callout__btn:hover { background: var(--hr-teal); color: var(--hr-text-on-accent); }
@media (max-width: 768px) {
	.hr-aeo-callout-sec { padding: 0 16px; }
	.hr-aeo-callout {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
		padding: 28px;
		margin: 48px auto;
	}
	.hr-aeo-callout__cta { align-self: stretch; }
	.hr-aeo-callout__btn { display: block; width: 100%; box-sizing: border-box; }
}

/* ==========================================================================
   ===== Subheader nowrap fixes (homepage page 12) =====
   The .hrx-intro subheaders in #process / #benefits / #pricing inherit a
   max-width:640px cap from each section's inline <style>, which forces these
   short one-sentence subheaders to wrap to 2+ lines. On desktop (>=1024px)
   lift the cap and prevent wrapping so each renders on a single line; below
   1024px they wrap normally for mobile/tablet. Id-scoped selectors (1,1,0)
   override the inline .hrx-intro rule (0,1,0) without !important. Text and
   font-size are unchanged — these strings fit on one line at desktop widths.
   ========================================================================== */
@media (min-width: 1024px) {
	/* Issue 1 — "How it works" section subheader */
	#process .hrx-intro,
	/* Issue 2 — "Why it works" section subheader */
	#benefits .hrx-intro,
	/* Issue 3 — "Pricing" section subheader */
	#pricing .hrx-intro {
		max-width: none;
		white-space: nowrap;
	}
}

/* === FAMILY GROUP BRACKETS === */

.hr-family-group {
  position: relative;
  padding-top: 0;
}

/* Remove old pseudo-element brackets — replaced by flex structure */
.hr-family-group::before,
.hr-family-group::after {
  display: none;
}

/* Three-part bracket row */
.hr-family-bracket {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-bottom: 20px;
}

/* Each arm fills remaining space on its side */
.hr-bracket-arm {
  flex: 1;
  height: 26px;
  position: relative;
}

/* Left arm — corner mark at outer left,
   horizontal line runs rightward toward label */
.hr-bracket-left::before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-1px);
  left: 0;
  right: 0;
  height: 50%;
  border-top: 1.5px solid #46B4BF;
  border-left: 1.5px solid #46B4BF;
  border-radius: 2px 0 0 0;
  pointer-events: none;
}

/* Right arm — corner mark at outer right,
   horizontal line runs leftward toward label */
.hr-bracket-right::before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-1px);
  left: 0;
  right: 0;
  height: 50%;
  border-top: 1.5px solid #46B4BF;
  border-right: 1.5px solid #46B4BF;
  border-radius: 0 2px 0 0;
  pointer-events: none;
}

/* Label — centered, sits between the two arms */
.hr-family-label {
  position: static;
  flex-shrink: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: #46B4BF;
  text-transform: uppercase;
  white-space: nowrap;
  background: transparent;
  padding: 0;
  line-height: 1;
}

/* Mobile — maintain layout, reduce arm height slightly */
@media (max-width: 768px) {
  .hr-bracket-arm {
    height: 16px;
  }

  .hr-family-bracket {
    gap: 10px;
  }

  /* Preserved from prior bracket block — keeps Foundation cards from
     rendering as 3 cramped columns on phones (page-inline keeps it at
     repeat(3,1fr); without this it would not collapse on mobile) */
  .hr-family-foundation {
    grid-template-columns: 1fr !important;
  }
}

/* Bracket spans full width of Foundation group (all 3 card columns) */
.hr-family-foundation .hr-family-bracket {
  grid-column: 1 / -1;
}

/* Growth bracket spans its 1-column width (consistent rule) */
.hr-family-growth .hr-family-bracket {
  grid-column: 1 / -1;
}

/* Match Foundation's row-gap so the Growth card top aligns with the
   Foundation cards (Foundation grid has gap:20px; Growth had none, which
   left its card sitting ~20px higher) */
.hr-family-growth {
  gap: 20px;
}

/* === END FAMILY GROUP BRACKETS === */

/* === Reputation hero body width === */
/* Widens the hero body paragraph (.hrx-lead, the text below the italic tagline
   and above the CTA) on the service pages. Scoped to .hrx-hero so ONLY the hero
   lead is affected, never any mid-page .hrx-lead. Specificity 0,2,0 overrides the
   page-inline .hrx-lead{max-width:640px}. Shared hrx-hero/hrx-lead template means
   this one rule covers all four service heroes: Reputation (id 16), Response (15),
   Revenue (17), Growth (78). */
.hrx-hero .hrx-lead {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* === Pass 6A — Hero Drop Reveal === */

.hr-hero-line {
  display: block;
  opacity: 0;
  transform: translateY(-24px);
  transition: opacity 280ms ease-out,
              transform 380ms cubic-bezier(0.34, 1.56, 0.64, 1);
  /* cubic-bezier: overshoot-and-settle — line drops past resting position
     slightly, then snaps back. Reads as weight landing. */
}

.hr-hero-line.is-landed {
  opacity: 1;
  transform: translateY(0);
}

.hr-hero-trailing {
  display: inline;
}

.hr-hero-trailing.is-glowing {
  text-shadow: 0 0 24px rgba(70, 180, 191, 0.6),
               0 0 48px rgba(70, 180, 191, 0.3);
}

.hr-hero-trailing.glow-done {
  text-shadow: none;
  transition: text-shadow 600ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .hr-hero-line {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hr-hero-trailing.is-glowing,
  .hr-hero-trailing.glow-done {
    text-shadow: none;
  }
}

/* === Pass 6A (4-beat extension, 2026-07-15) === */
/* 4th beat "Less you." is the punch line: permanent teal (others stay white). */
.hr-hero-line--punch .hr-hero-trailing { color: #46B4BF; }

/* Brand line fades in AFTER the final beat lands (not a cascade). Enlarged.
   Timed from load: 3rd/final beat lands at ~1600ms (JS delays[2]); fade starts
   ~2150ms (last delay + ~550ms).
   Hero is above-the-fold so the JS IntersectionObserver fires at ~load, keeping
   this CSS clock in sync with the JS land.
   ⚠ THIS CLOCK IS NOT LINKED TO THE JS. If HeroReveal's delays[] array in
   assets/js/animations.js changes, retime the animation-delay below to match,
   or the tagline fades in over a still-animating (or long-finished) H1.
   History: was 3550ms when the H1 ran a 4-beat cascade ending at 3000ms. */
.hr-hero-brandline {
  font-weight: 400;
  font-style: italic;
  font-size: clamp(19px, 2.4vw, 24px);
  line-height: 1.45;
  color: #B8B8C8;
  max-width: 640px;
  margin: 14px auto 20px;
  opacity: 0;
  animation: hr-brandline-fade 450ms ease-out 2150ms forwards;
}
@keyframes hr-brandline-fade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .hr-hero-brandline { opacity: 1; animation: none; }
}

/* === Hero CTA row (2026-08-13) — primary solid + secondary ghost.
   Scoped to .hrx-hero so nothing below the hero is affected. Side-by-side on
   desktop, stacked full-width on mobile. .hrx-btn keeps its existing solid
   teal styling; only the ghost variant is new. === */
.hrx-hero .hr-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin: 0 0 4px;
}
.hrx-hero .hrx-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: transparent;
  color: #46B4BF;
  border: 1px solid #46B4BF;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  border-radius: 10px;
  padding: 14px 28px;
  text-decoration: none;
  transition: all .25s ease;
}
.hrx-hero .hrx-btn-ghost:hover {
  background-color: #46B4BF;
  color: #FFFFFF;
  transform: scale(1.03);
}
@media (max-width: 600px) {
  .hrx-hero .hr-hero-ctas { flex-direction: column; align-items: stretch; }
  .hrx-hero .hr-hero-ctas .hrx-btn,
  .hrx-hero .hr-hero-ctas .hrx-btn-ghost { width: 100%; }
}

/* === Pass 6B — Motion Polish === */
/* Selector audit (homepage id 12 + contact id 14) corrected the spec's generic
   selectors to this site's real classes:
   - Tier cards = .svc-card  (NOT .hr-service-card / .hr-tier-card)
   - Solid teal CTAs = .hrx-btn / .svc-cta-solid  (NOT .wp-element-button / .hr-cta-*)
   - No <hr> or .divider elements exist anywhere → 6a is dormant
   - Contact form is a HubSpot cross-origin iframe (no native inputs) → 6d is dormant
   - 6b (tier-card hover glow) is ALREADY implemented above (CHANGE 8,
     .entry-content .svc-card:hover — teal border + glow + lift) and is left
     intact; re-declaring the spec's weaker values would regress it. */

/* 6a — Section dividers (DORMANT: no divider/<hr> elements on the site yet;
   canonical selectors kept so a future divider animates automatically) */
.hr-section-divider,
hr.hr-divider {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(70, 180, 191, 0.4) 50%, transparent 100%);
  background-size: 200% 100%;
  background-position: -100% 0;
  animation: hr-divider-sweep 1.2s ease-out 0.4s forwards;
}
@keyframes hr-divider-sweep {
  from { background-position: -100% 0; }
  to   { background-position: 100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hr-section-divider,
  hr.hr-divider {
    animation: none;
    background: rgba(70, 180, 191, 0.2);
    background-size: 100% 100%;
  }
}

/* 6b — Tier card hover glow: already implemented (see CHANGE 8 above). Not
   re-declared here to avoid overriding/weakening the existing stronger effect. */

/* 6c — CTA shimmer (CORRECTED): solid teal only; outline CTAs (.svc-cta-outline) excluded.
   These buttons contain BARE text (no child element), so the spec's `> * { z-index:2 }`
   would match nothing and cannot lift the text above a positive-z shimmer. Instead the
   button is made a stacking context (z-index:0) and the shimmer sits at z-index:-1 — above
   the teal/cyan background, BELOW the text — so the text is never washed out. The existing
   page-inline cyan hover (#38BDF8, dark text) is left intact: the text stays dark and fully
   legible on it; it was the shimmer painting over the text, not the color, that hid it. */
.hrx-btn,
.svc-cta-solid {
  position: relative;
  overflow: hidden;
  z-index: 0; /* stacking context so the shimmer can sit behind the bare button text */
}
.hrx-btn::after,
.svc-cta-solid::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 75%;
  height: 100%;
  z-index: -1; /* above the background, below the text */
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.08) 20%, rgba(255, 255, 255, 0.32) 50%, rgba(255, 255, 255, 0.08) 80%, transparent 100%);
  transform: skewX(-15deg);
  pointer-events: none;
  transition: left 0ms;
}
.hrx-btn:hover::after,
.svc-cta-solid:hover::after {
  left: 160%;
  transition: left 420ms ease;
}

/* Locked hover — hold teal, kill the cyan (#38BDF8) shift. The cyan comes from each
   page's INLINE <style> (.hrx-btn:hover / .svc-cta-solid:hover), which is off-limits to
   edit, so !important is required to beat it from the child theme. Text stays dark and
   fully legible; the shimmer already sits behind it (z-index:-1, above). */
.hrx-btn:hover,
.svc-cta-solid:hover {
  background-color: #46B4BF !important;
  border-color: #46B4BF !important;
  color: #0A0A0F !important;
}

@media (prefers-reduced-motion: reduce) {
  .hrx-btn::after,
  .svc-cta-solid::after {
    display: none;
  }
}

/* Nav CTA pill — matches the sitewide 6c shimmer hover. .hrx-nav-cta is the <li>; the
   pill is the <a> inside (bare text), so same technique as 6c: the <a> is a stacking
   context (z-index:0) and the shimmer ::after sits at z-index:-1 (above the teal bg,
   below the text) — exactly matching the hero/page CTAs. Teal-hold on hover is already
   handled by the .hrx-nav-cta a:hover rule above. */
.hrx-nav-cta > a,
.hrx-nav-cta a {
  position: relative;
  overflow: hidden;
  z-index: 0;
}
.hrx-nav-cta > a::after,
.hrx-nav-cta a::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 75%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.08) 20%, rgba(255, 255, 255, 0.32) 50%, rgba(255, 255, 255, 0.08) 80%, transparent 100%);
  transform: skewX(-15deg);
  pointer-events: none;
  transition: left 0ms;
}
.hrx-nav-cta > a:hover::after,
.hrx-nav-cta a:hover::after {
  left: 160%;
  transition: left 420ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .hrx-nav-cta > a::after,
  .hrx-nav-cta a::after {
    display: none;
  }
}

/* Remaining solid-teal CTAs — same intense shimmer. .hr-mid-cta-link (mid-page CTA, defined
   here in style.css) and .aeo-btn (AEO Visibility page id 165, styled page-inline; shimmer
   added here so it's style.css-only). Outline/transparent CTAs (.svc-cta-outline,
   .hr-aeo-callout__btn, .svc-viewall) and text links (.hrx-link/.hrx-more/.svc-learn) excluded. */
.hr-mid-cta-link,
.aeo-btn {
  position: relative;
  overflow: hidden;
  z-index: 0;
}
.hr-mid-cta-link::after,
.aeo-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 75%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.08) 20%, rgba(255, 255, 255, 0.32) 50%, rgba(255, 255, 255, 0.08) 80%, transparent 100%);
  transform: skewX(-15deg);
  pointer-events: none;
  transition: left 0ms;
}
.hr-mid-cta-link:hover::after,
.aeo-btn:hover::after {
  left: 160%;
  transition: left 420ms ease;
}
/* .aeo-btn flips to cyan on hover via its page-inline rule — hold teal to match the other CTAs. */
.aeo-btn:hover {
  background-color: var(--hr-teal) !important;
  color: var(--hr-bg) !important;
}
@media (prefers-reduced-motion: reduce) {
  .hr-mid-cta-link::after,
  .aeo-btn::after {
    display: none;
  }
}

/* === Hide industry cards for guides not yet built (dental, tourism) — David 2026-07-10, temporary.
   Remove this rule when /resources/guides/dental and /resources/guides/tourism ship. === */
.res-ind-card[href="/resources/guides/dental"],
.res-ind-card[href="/resources/guides/tourism"] {
  display: none !important;
}

/* === Newly-built Resources section CTAs — unify hover with the nav CTA (6c shimmer + teal-hold).
   Solid-teal CTA pills: /resources + /resources/tools (.res-btn), guide template (.rg-btn-solid),
   calculator page + widget (.rlc-btn / .rlk-btn), reputation page + tool (.rck-btn / .rc-btn-solid).
   These pages set a brightness()/translateY() hover inline; override to hold teal (no lift) and add the
   same skewed shimmer sweep. Outline CTAs (.rg-btn-outline / .rc-btn-outline) intentionally excluded.
   AI Visibility Scanner (.avs-btn) joined this group 2026-07-28. === */
.res-btn,
.rg-btn-solid,
.rlc-btn,
#revenue-leak-calculator .rlk-btn,
.rck-btn,
.avs-btn,
#reputation-check-tool .rc-btn-solid {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

/* === AI Visibility Scanner exit-intent modal — keep [hidden] authoritative.
   The tool's own CSS sets .avs-exit{display:flex}. An author rule beats the UA
   stylesheet's [hidden]{display:none}, so the modal rendered on page load and
   show()/hide() had no effect. The attribute selector outranks .avs-exit, so this
   wins regardless of stylesheet order. === */
.avs-exit[hidden] {
  display: none;
}

/* === AI Visibility Scanner — loading-stage timing note. Injected by
   ai-visibility-scanner.js rather than authored into page 805, so the rest of the
   .avs-* block stays where it lives (inline on the page) and this rule ships with
   the script that creates the element. === */
.avs-load-note {
  font-size: 14.5px;
  color: var(--hr-text-secondary, #B8B8C8);
  max-width: 380px;
  margin: 18px auto 0;
  line-height: 1.5;
}

/* === AI Visibility Scanner — competitor-name provenance note. Sits under the
   competitor list and is separated from it so it reads as a qualifier on those
   names rather than as more body copy. === */
.avs-comp-note {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--hr-border, #2A2A38);
}

/* Audit hand-off under the gap list. Teal link so it reads as the next step
   rather than as fine print, unlike the other .avs-disclaimer uses. */
.avs-rec-note {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--hr-border, #2A2A38);
  font-size: 14px;
  color: var(--hr-text-secondary, #B8B8C8);
}
.avs-rec-note a {
  color: var(--hr-teal, #46B4BF);
  font-weight: 600;
  text-decoration: none;
}
.avs-rec-note a:hover {
  text-decoration: underline;
}

/* === AI Visibility Scanner — share row under the score ring.
   Placed at the score because that is where the screenshot impulse peaks. === */
.avs-share {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--hr-border, #2A2A38);
}
.avs-share-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hr-text-tertiary, #6E6E80);
  margin-bottom: 12px;
}
.avs-share-btns {
  display: flex;
  justify-content: center;
  gap: 10px;
}
/* Second share cluster, inline in the bottom utility row beside the PDF button.
   Smaller than the score-reveal set so it reads as a peer of the utilities. */
.avs-share-inline {
  display: flex;
  align-items: center;
}
.avs-share-inline .avs-share-btns { gap: 8px; }
.avs-share-inline .avs-share-btn {
  width: 36px;
  height: 36px;
}
.avs-share-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hr-bg, #0A0A0F);
  border: 1px solid var(--hr-border, #2A2A38);
  color: var(--hr-text-secondary, #B8B8C8);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.avs-share-btn:hover {
  transform: translateY(-2px);
  color: #fff;
}
.avs-share-btn.is-li:hover { background: #0A66C2; border-color: #0A66C2; }
.avs-share-btn.is-fb:hover { background: #1877F2; border-color: #1877F2; }
.avs-share-btn.is-x:hover  { background: #000;    border-color: #000; }
.avs-share-btn.is-em:hover { background: var(--hr-teal, #46B4BF); border-color: var(--hr-teal, #46B4BF); color: #0A0A0F; }

/* === SF8: mid-scorecard CTA as a text line, not a card. Two full-weight CTA blocks
   caused scroll fatigue; this catches the convinced without stopping the readers. === */
.avs-midcta {
  text-align: center;
  font-size: 16px;
  color: var(--hr-text-secondary, #B8B8C8);
  margin: 0 0 var(--avs-gap, 48px);
  padding: 18px 0;
  border-top: 1px solid var(--hr-border, #2A2A38);
  border-bottom: 1px solid var(--hr-border, #2A2A38);
}
.avs-midcta a {
  color: var(--hr-teal, #46B4BF);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.avs-midcta a:hover { text-decoration: underline; }

/* === Muted lines under the score — context, not headlines. .avs-benchmark is kept
   for older cached scorecards; live scans now render .avs-peer (relative comparison
   computed from the scan's own competitor data) and .avs-shortfall (why fewer than
   12 answers came back). === */
.avs-benchmark,
.avs-peer,
.avs-shortfall {
  font-size: 13px;
  color: var(--hr-text-tertiary, #6E6E80);
  max-width: 430px;
  margin: 12px auto 0;
}

/* === AI readiness: a check we could not measure. Neutral, never red — an X here
   asserts a failure the scan did not actually test for. === */
.avs-chk.is-unknown .avs-chk-mark {
  background: rgba(110, 110, 128, .15);
  color: var(--hr-text-tertiary, #6E6E80);
}
.avs-chk.is-unknown {
  opacity: .75;
}
.avs-chk-note {
  font-style: normal;
  font-size: 12px;
  color: var(--hr-text-tertiary, #6E6E80);
}

/* === PDF download, promoted out of the bottom utility row. Secondary to the audit
   booking, clearly ahead of social sharing. === */
.avs-pdf-cta {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--hr-border, #2A2A38);
  text-align: center;
}
.avs-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: transparent;
  border: 1.5px solid var(--hr-teal, #46B4BF);
  color: var(--hr-teal, #46B4BF);
  font-family: inherit;
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.2;
  padding: 13px 26px;
  border-radius: var(--hr-radius-btn, 10px);
  cursor: pointer;
  transition: background-color .2s;
}
.avs-btn-ghost:hover,
.avs-btn-ghost:focus-visible {
  background: rgba(70, 180, 191, .12);
}
.avs-pdf-desc {
  font-size: 13.5px;
  color: var(--hr-text-tertiary, #6E6E80);
  margin: 10px auto 0;
  max-width: 380px;
  line-height: 1.5;
}

/* === Strong-band secondary CTA, under the tracking button. === */
.avs-cta-alt {
  font-size: 14px;
  color: var(--hr-text-secondary, #B8B8C8);
  margin: 18px 0 0;
}
.avs-cta-alt a {
  color: var(--hr-teal, #46B4BF);
  text-decoration: none;
  font-weight: 600;
}

/* === SF7: inline confirmation + C11 follow-up guide === */
.avs-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(34, 211, 168, 0.16);
  color: var(--hr-success, #22D3A8);
  font-size: 13px;
  font-weight: 700;
  margin-right: 8px;
  vertical-align: middle;
}
.avs-plan-guide {
  font-size: 14px;
  color: var(--hr-text-secondary, #B8B8C8);
  margin: 14px 0 0;
}
.avs-plan-guide a {
  color: var(--hr-teal, #46B4BF);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.avs-plan-guide a:hover { text-decoration: underline; }

/* === CTA hierarchy: primary (action plan) > secondary (audit) > utilities === */
.avs-cta-primary {
  margin: 0 auto 18px;
  max-width: 440px;
}
.avs-btn-secondary {
  background: transparent !important;
  color: var(--hr-teal, #46B4BF) !important;
  border: 1px solid var(--hr-teal, #46B4BF) !important;
  font-size: 15px;
  padding: 13px 26px;
}
.avs-btn-secondary:hover {
  background: var(--hr-teal, #46B4BF) !important;
  color: #0A0A0F !important;
}
.avs-plan-form {
  margin-top: 14px;
  text-align: left;
}
.avs-plan-row {
  display: flex;
  gap: 10px;
}
.avs-plan-row .avs-input { flex: 1 1 auto; }
.avs-plan-row .avs-btn { flex: 0 0 auto; white-space: nowrap; }
.avs-plan-note {
  font-size: 12px;
  color: var(--hr-text-tertiary, #6E6E80);
  margin: 10px 0 0;
  text-align: center;
}
.avs-plan-done-t {
  font-size: 16px;
  font-weight: 600;
  color: var(--hr-success, #22D3A8);
  margin: 0 0 14px;
}

/* Utility row: real buttons, not text links. The PDF is a lead-gen takeaway —
   the person who saves it reviews it later and books — so it must not read as
   throwaway fine print. */
.avs-util-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--hr-bg, #0A0A0F);
  border: 1px solid var(--hr-border, #2A2A38);
  border-radius: 9px;
  color: var(--hr-text-secondary, #B8B8C8);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 18px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.avs-util-btn:hover {
  border-color: var(--hr-teal, #46B4BF);
  color: #fff;
  background: var(--hr-surface, #14141C);
}
/* === P2-2: the email-gated 90-Day Action Plan card. Teal glow marks it as the
   one gated ask on the page, distinct from the free audit CTA below it. === */
.avs-card-plan {
  border-color: rgba(70, 180, 191, 0.35);
  box-shadow: 0 0 0 1px rgba(70, 180, 191, 0.12), 0 0 34px rgba(70, 180, 191, 0.10);
  background: linear-gradient(160deg, rgba(70, 180, 191, 0.06), var(--hr-surface, #14141C));
}
.avs-card-plan .avs-plan-form { margin-top: 20px; max-width: 480px; }
.avs-card-plan .avs-plan-done { max-width: 480px; }

/* SF9: explicit hierarchy in the utility row — PDF > Copy Link > Scan Another.
   The PDF keeps a teal outline and slightly larger type; the other two drop to
   ghost buttons with no border so they read as clearly secondary. */
.avs-util-pdf {
  border-color: var(--hr-teal, #46B4BF);
  color: var(--hr-teal, #46B4BF);
  font-size: 15px;
  padding: 13px 22px;
}
.avs-util-pdf:hover {
  background: var(--hr-teal, #46B4BF);
  border-color: var(--hr-teal, #46B4BF);
  color: #0A0A0F;
}
#avs-copy,
#avs-again {
  background: transparent;
  border-color: transparent;
  font-size: 13.5px;
  padding: 11px 12px;
  color: var(--hr-text-tertiary, #6E6E80);
}
#avs-copy:hover,
#avs-again:hover {
  background: transparent;
  border-color: transparent;
  color: var(--hr-teal, #46B4BF);
}

/* Non-determinism note under the score. Muted so it reads as an honest caveat
   rather than a hedge on the number itself. */
.avs-variability {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--hr-text-tertiary, #6E6E80);
  max-width: 460px;
  margin: 16px auto 0;
}

/* The scanned business shown inside the competitor ranking. At zero citations it
   goes red with an empty bar, so the gap is seen rather than inferred. */
.avs-comp.is-you {
  background: rgba(70, 180, 191, 0.07);
  border-radius: 8px;
  padding-left: 10px;
  padding-right: 10px;
}
.avs-comp.is-you .avs-comp-name { color: var(--hr-teal, #46B4BF); }
.avs-comp.is-you .avs-comp-name em {
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  color: var(--hr-text-tertiary, #6E6E80);
}
.avs-comp.is-you.is-zero {
  background: rgba(239, 107, 107, 0.08);
}
.avs-comp.is-you.is-zero .avs-comp-name { color: #EF6B6B; }
.avs-comp.is-you.is-zero .avs-comp-count { color: #EF6B6B; font-weight: 700; }
.avs-comp.is-you.is-zero .avs-comp-bar {
  outline: 1px dashed rgba(239, 107, 107, 0.35);
  outline-offset: 1px;
}

/* Empathy line above the CTA headline, and the company credibility line below. */
.avs-cta-empathy {
  font-size: 16px;
  line-height: 1.55;
  color: var(--hr-text-secondary, #B8B8C8);
  max-width: 470px;
  margin: 0 auto 18px;
}
.avs-credit {
  font-size: 12.5px;
  color: var(--hr-text-tertiary, #6E6E80);
  margin: 10px 0 0;
}
.avs-credit a {
  color: var(--hr-text-secondary, #B8B8C8);
  text-decoration: none;
  font-weight: 600;
}
.avs-credit a:hover { color: var(--hr-teal, #46B4BF); }

@media (max-width: 782px) {
  .avs-plan-row { flex-direction: column; }
  .avs-util-btn { width: 100%; justify-content: center; }
}
.res-btn::after,
.rg-btn-solid::after,
.rlc-btn::after,
#revenue-leak-calculator .rlk-btn::after,
.rck-btn::after,
.avs-btn::after,
#reputation-check-tool .rc-btn-solid::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 75%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.08) 20%, rgba(255, 255, 255, 0.32) 50%, rgba(255, 255, 255, 0.08) 80%, transparent 100%);
  transform: skewX(-15deg);
  pointer-events: none;
  transition: left 0ms;
}
.res-btn:hover::after,
.rg-btn-solid:hover::after,
.rlc-btn:hover::after,
#revenue-leak-calculator .rlk-btn:hover::after,
.rck-btn:hover::after,
.avs-btn:hover::after,
#reputation-check-tool .rc-btn-solid:hover::after {
  left: 160%;
  transition: left 420ms ease;
}
.res-btn:hover,
.rg-btn-solid:hover,
.rlc-btn:hover,
#revenue-leak-calculator .rlk-btn:hover,
.rck-btn:hover,
.avs-btn:hover,
#reputation-check-tool .rc-btn-solid:hover {
  filter: none !important;
  transform: none !important;
  background-color: var(--hr-teal, #46B4BF) !important;
  color: #0A0A0F !important;
}
@media (prefers-reduced-motion: reduce) {
  .res-btn::after,
  .rg-btn-solid::after,
  .rlc-btn::after,
  #revenue-leak-calculator .rlk-btn::after,
  .rck-btn::after,
  .avs-btn::after,
  #reputation-check-tool .rc-btn-solid::after {
    display: none;
  }
}

/* === Service-page tool-CTA + dual-CTA-primary buttons — match the nav CTA (6c shimmer + teal-hold).
   These are the calculator/reputation callouts inserted on /response-system + /reputation-system;
   their inline hover flips to #38BDF8 cyan, so override to hold teal and add the same skewed shimmer
   sweep as the nav pill. The outline .hrx-dual-cta-secondary keeps its fill-teal outline hover. === */
.hrx-tool-cta-button,
.hrx-dual-cta-primary {
  position: relative;
  overflow: hidden;
  z-index: 0;
}
.hrx-tool-cta-button::after,
.hrx-dual-cta-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 75%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.08) 20%, rgba(255, 255, 255, 0.32) 50%, rgba(255, 255, 255, 0.08) 80%, transparent 100%);
  transform: skewX(-15deg);
  pointer-events: none;
  transition: left 0ms;
}
.hrx-tool-cta-button:hover::after,
.hrx-dual-cta-primary:hover::after {
  left: 160%;
  transition: left 420ms ease;
}
.hrx-tool-cta-button:hover,
.hrx-dual-cta-primary:hover {
  filter: none !important;
  transform: none !important;
  background-color: var(--hr-teal, #46B4BF) !important;
  color: #0A0A0F !important;
}
@media (prefers-reduced-motion: reduce) {
  .hrx-tool-cta-button::after,
  .hrx-dual-cta-primary::after {
    display: none;
  }
}

/* === Hero Background Data Flow (homepage #hero only) === */
/* The wrapper (#hero.hr-hero-home, via .hrx-sec) already has position:relative + overflow:hidden.
   Selectors retargeted to this site's real hero markup: content wrapper is .hrx-inner. */

.hr-data-flow {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

/* Teal bands — horizontal, drifting left to right at varying speeds (parallax) */
.hr-data-band {
  position: absolute;
  height: 2px;
  width: 35%;
  left: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(70, 180, 191, 0.00) 8%, rgba(70, 180, 191, 0.50) 50%, rgba(70, 180, 191, 0.00) 92%, transparent 100%);
  animation: hr-drift-right linear infinite;
  will-change: transform;
  pointer-events: none;
}
.hr-data-band:nth-child(1) { top: 10%; animation-duration: 14s; animation-delay: -2s;  opacity: 0.9; }
.hr-data-band:nth-child(2) { top: 22%; animation-duration: 19s; animation-delay: -10s; opacity: 0.7; height: 3px; }
.hr-data-band:nth-child(3) { top: 34%; animation-duration: 11s; animation-delay: -4s;  opacity: 0.9; }
.hr-data-band:nth-child(4) { top: 50%; animation-duration: 17s; animation-delay: -13s; opacity: 0.55; }
.hr-data-band:nth-child(5) { top: 62%; animation-duration: 12s; animation-delay: -3s;  opacity: 0.9; }
.hr-data-band:nth-child(6) { top: 75%; animation-duration: 20s; animation-delay: -9s;  opacity: 0.75; height: 3px; }
.hr-data-band:nth-child(7) { top: 88%; animation-duration: 13s; animation-delay: -6s;  opacity: 0.9; }

/* Cyan pulses — faster, shorter, bright glow */
.hr-data-pulse {
  position: absolute;
  height: 2px;
  width: 6%;
  left: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(56, 189, 248, 0.97) 50%, transparent 100%);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.8), 0 0 24px rgba(56, 189, 248, 0.4);
  animation: hr-pulse-right linear infinite;
  will-change: transform;
  pointer-events: none;
}
.hr-data-pulse:nth-child(8)  { top: 28%; animation-duration: 9s;  animation-delay: -5s; }
.hr-data-pulse:nth-child(9)  { top: 56%; animation-duration: 11s; animation-delay: -8s; }
.hr-data-pulse:nth-child(10) { top: 80%; animation-duration: 8s;  animation-delay: -3s; }

/* Glyph rows — faint monospace fragments, not readable */
.hr-glyph-row {
  position: absolute;
  width: 100%;
  height: 14px;
  overflow: hidden;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: rgba(70, 180, 191, 0.38);
  letter-spacing: 0.05em;
  white-space: nowrap;
  animation: hr-drift-right-glyph linear infinite;
  will-change: transform;
  pointer-events: none;
}
#hr-glyph-1 { top: 16%; animation-duration: 22s; animation-delay: -3s; }
#hr-glyph-2 { top: 44%; animation-duration: 26s; animation-delay: -12s; }
#hr-glyph-3 { top: 70%; animation-duration: 20s; animation-delay: -7s; }

@keyframes hr-drift-right { 0% { transform: translateX(-300%); } 100% { transform: translateX(300%); } }
@keyframes hr-drift-right-glyph { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes hr-pulse-right { 0% { transform: translateX(-200%); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateX(2000%); opacity: 0; } }

/* Dark gradient pocket — H1 legibility protection */
.hr-text-pocket {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 55% at center, rgba(10, 10, 15, 0.75) 0%, rgba(10, 10, 15, 0.55) 40%, rgba(10, 10, 15, 0.20) 75%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

/* Hero content above the background layers (real selector: .hrx-inner in the homepage hero) */
.hr-hero-home .hrx-inner {
  position: relative;
  z-index: 2;
}

/* The Pass-5 rule `#hero.hr-hero-home > * { position: relative; z-index: 1 }` (specificity 1,1,0)
   was overriding the absolute positioning on these two background layers, collapsing the
   data-flow container to height 0. These selectors are (1,2,0) — ID + two classes — so they
   win and restore full-hero coverage + correct stacking (data-flow behind, pocket above it). */
#hero.hr-hero-home > .hr-data-flow {
  position: absolute;
  inset: 0;
  z-index: 0;
}
#hero.hr-hero-home > .hr-text-pocket {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Mobile — hero data-flow animation RE-ENABLED (David, Jul 6 2026).
   Previously display:none'd for a "clean dark hero"; restored per request.
   The original "MOBILE ANIMATION TEST" tuning (scratchpad backup lost, not in
   post-267 revisions) is reconstructed here from the live desktop animation:
   show the .hr-data-flow container and soften it so the drifting bands/glyphs
   stay subtle behind the hero text. H1 legibility is preserved by the
   #hero .hrx-inner radial pocket below; horizontal overflow is already clamped
   by .hr-data-flow{overflow:hidden}, the animation-element clamps further down,
   and html,body{overflow-x:hidden}. The .hr-text-pocket stays hidden to avoid
   double-darkening the small screen (the .hrx-inner pocket covers legibility). */
@media (max-width: 768px) {
  .hr-text-pocket { display: none; }
  .hr-data-flow {
    display: block !important;
    opacity: 0.7;
  }
}

/* Reduced motion — freeze everything */
@media (prefers-reduced-motion: reduce) {
  .hr-data-band,
  .hr-data-pulse,
  .hr-glyph-row {
    animation: none !important;
    opacity: 0.15 !important;
  }
}

/* 6d — Form field focus sweep (DORMANT: live contact form is a HubSpot
   cross-origin iframe whose inputs cannot be styled from this stylesheet;
   canonical selectors kept for a future native/CF7 form) */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea,
input.hr-field,
textarea.hr-field {
  border-bottom: 1px solid rgba(70, 180, 191, 0.2);
  background-image: linear-gradient(#46B4BF, #46B4BF);
  background-size: 0 2px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size 300ms ease, border-color 200ms ease;
}
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form textarea:focus,
input.hr-field:focus,
textarea.hr-field:focus {
  outline: none;
  border-color: transparent;
  background-size: 100% 2px;
}
@media (prefers-reduced-motion: reduce) {
  .wpcf7-form input,
  .wpcf7-form textarea,
  input.hr-field,
  textarea.hr-field {
    background-image: none;
    transition: none;
  }
}

/* === Mobile hero — suppress radial glow (pure dark bg) + subtle H1 text pocket ===
   Mobile-only; desktop is untouched. The EFFECTIVE glow on the homepage is the rotating
   burst #hero.hr-hero-home::before (style.css ~1628, specificity 1,1,1); the page-inline
   .hrx-glow-hero::before is the static base it overrides. !important + animation:none kills it. */
@media (max-width: 768px) {
  #hero.hr-hero-home::before,
  #hero.hr-hero-home::after,
  .hrx-glow-hero::before,
  .hrx-glow-hero::after,
  .hrx-hero::before,
  .hrx-hero::after {
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
    opacity: 0 !important;
    animation: none !important;
  }
  #hero,
  #hero.hr-hero-home {
    background: var(--hr-bg, #0A0A0F) !important;
  }
  /* Subtle dark radial pocket behind the H1 for bright-light legibility. Scoped to the
     hero only (NOT bare .hrx-inner, which would tint every section's inner on mobile). */
  #hero .hrx-inner {
    background: radial-gradient(ellipse 85% 60% at 50% 45%, rgba(10, 10, 15, 0.45) 0%, transparent 100%) !important;
    position: relative;
    z-index: 2;
  }
}

/* === Mobile full-width fix — contain stray horizontal overflow + tighten gutters ===
   Diagnosis: viewport meta is correct, .svc-grid already collapses to 1 col at ≤768px,
   and every .hrx-sec is overflow:hidden — so this is a defensive containment, not an
   aggressive width override (the spec's .hrx-inner padding would have double-padded). */
@media (max-width: 768px) {
  /* Guard: never let the page exceed the viewport width (the right-edge cutoff). */
  html,
  body {
    overflow-x: hidden;
  }
  /* A touch more content width: 16px side gutters instead of 24px (vertical padding kept). */
  .hrx-sec {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Service cards never exceed their column. */
  .svc-card {
    box-sizing: border-box !important;
    max-width: 100% !important;
  }
}

/* =====================================================
   MOBILE FIXES — Consolidated June 28 2026
   Moved from Customizer Additional CSS → style.css
   Replaces: MOBILE ANIMATION TEST block (removed above)
   ===================================================== */

@media (max-width: 768px) {

  /* --- WIDTH FIX --- */
  .hrx-sec {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
  }

  .hrx-inner {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  /* Service grid — single column, full width */
  .svc-grid {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Cards — full width, no overflow */
  .svc-card {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Clip hero at viewport edge */
  #hero,
  .hr-hero-home {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  /* Clip animation elements */
  .hr-data-flow,
  .hr-data-band,
  .hr-data-pulse,
  .hr-glyph-row {
    overflow: hidden !important;
    max-width: 100% !important;
  }

  /* Global overflow guard */
  html, body {
    overflow-x: hidden !important;
  }

  /* --- NAV CLEARANCE — Hero pages ---
     Mobile fixed header is the 64px logo + GP header padding (~144px tall),
     taller than --nav-height-mobile (72px). Clear the FULL header height plus a
     gap so the hero eyebrow (.hrx-kicker) isn't tucked under the fixed nav. */
  #hero,
  #hero.hr-hero-home {
    padding-top: calc(var(--nav-height-mobile, 72px) + 120px) !important;
    align-items: flex-start !important;
    scroll-margin-top: calc(var(--nav-height-mobile, 72px) + 80px) !important;
  }

  /* --- SERVICE CARD WIDGET OVERFLOW FIX --- */
  .svc-card .hr-anim-response-widget,
  .svc-card .hr-anim-reputation-widget,
  .svc-card .hr-anim-revenue-widget,
  .svc-card .hr-anim-growth-widget,
  .svc-card [class*="hr-anim-"],
  .svc-card canvas,
  .svc-card svg,
  .svc-card > div {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .svc-card {
    overflow: hidden !important;
    position: relative !important;
  }

  /* --- SERVICE PAGE WIDGET FIXES --- */
  .hrx-service-widget,
  .hrx-widget-col,
  .hrx-sticky-col,
  [class*="hr-anim-response"],
  [class*="hr-anim-reputation"],
  [class*="hr-anim-revenue"],
  [class*="hr-anim-growth"],
  [class*="hr-anim-"] {
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* --- SERVICE PAGE WIDGET STACKING --- */
  .hr-whats-included-layout {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
  }

  .hr-whats-included-widget {
    order: -1 !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .hr-whats-included-content {
    order: 1 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .hr-whats-included-widget > div,
  .hr-whats-included-widget [class*="hr-anim-"] {
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .hrx-service-layout,
  .hrx-sticky-layout,
  .hrx-two-col {
    display: flex !important;
    flex-direction: column !important;
  }

  .hrx-service-widget,
  .hrx-widget-col,
  .hrx-sticky-col {
    order: -1 !important;
  }

  .hrx-feature-col,
  #whats-included,
  .hrx-checklist-col {
    order: 1 !important;
  }

  /* --- NAV CLEARANCE — /services, /about, /contact --- */
  .page-id-62 #content,
  .page-id-13 #content,
  .page-id-14 #content {
    padding-top: calc(var(--nav-height-mobile, 72px) + 24px) !important;
  }

  /* --- NAV CLEARANCE — AI Visibility Scanner (page 805) ---
     Same root cause as the hero pages: the mobile fixed header is ~144px tall
     (64px logo + GP header padding) while --nav-height-mobile says 72px. This
     page's hero is .avs-hero, NOT #hero, so it never picked up the #hero rule
     above and fell through to the generic non-hero clearance (72 + 32 = 104px)
     — about 40px short of the real header, which buried the H1. Clear the full
     header height plus a gap. */
  /* SPECIFICITY NOTE — this must outrank `body:not(.has-hero) #content`, which is
     1,1,1 and carries !important. A plain `.page-id-805 #content` is only 1,1,0, so
     it silently lost and the H1 stayed buried. `html body.page-id-805` is 1,1,2 and
     wins outright. 805 is deliberately NOT in the has-hero list in functions.php
     (its hero is .avs-hero, not #hero), so it falls through to the generic
     non-hero clearance of 72+32=104px — short of the ~144px mobile header.
     +120px is the value already proven on the #hero pages. */
  html body.page-id-805 #content {
    padding-top: calc(var(--nav-height-mobile, 72px) + 120px) !important;
  }
  html body.page-id-805 .avs-hero {
    padding-top: 0 !important;
    scroll-margin-top: calc(var(--nav-height-mobile, 72px) + 80px) !important;
  }

  /* --- REPUTATION ORB SHAPE FIX (mobile) ---
     The orb (.hr-anim-reputation-orb) is an 80x80 circle. The blanket mobile
     width:100% !important stretch above (`.svc-card [class*="hr-anim-"]` and the
     global `[class*="hr-anim-"]`) matches it (class contains "hr-anim-") and
     flattens it into an ellipse. Re-pin its 1:1 box. Higher specificity
     (.hr-anim-card.hr-anim-reputation = 0,3,0) wins over the 0,2,0/0,1,0 stretch
     regardless of source order. Covers the homepage card AND /reputation-system.
     Sibling orbs are unaffected: growth uses .hr-orb-mini (no "hr-anim-"). */
  .hr-anim-card.hr-anim-reputation .hr-anim-reputation-orb {
    width: 80px !important;
    height: 80px !important;
    max-width: 80px !important;
    flex: 0 0 80px !important;
  }

  /* --- OPTIMIZE WIDGET (#process card 04 "Continuous Optimization") ---
     Each .hr-anim-optimize-row reserves .system-name (min-width:132px, no shrink)
     + a fixed 64px indicator + gaps/padding. On a narrow phone card that sum
     overflows the row, and the global [class*="hr-anim-"]{overflow:hidden}
     clips the rightmost element — the animated icon — off-screen. Let the two
     text columns shrink/wrap so the row always fits and the indicator stays
     visible. Indicator trimmed 64->56 (widest icon SVG is 56px) to buy space. */
  .hr-anim-optimize-row {
    gap: 8px !important;
    padding: 8px 8px !important;
  }
  /* Names on ONE line (nowrap, sized to content); status takes the rest & wraps.
     The reclaimed width from the padding + icon trims below makes this fit. */
  .hr-anim-optimize-row .system-name {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    font-size: 14px !important;
  }
  .hr-anim-optimize-row .system-status {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  /* Animated indicators reduced ~25% (David): box 56->42, and each icon SVG /
     dollar glyph scaled to 0.75 of its base render size (style.css ~630, ~683). */
  .hr-anim-optimize-row .system-indicator {
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 36px !important;
  }
  .hr-anim-optimize-row .system-indicator[data-indicator="bar-growing"] svg { width: 36px !important; height: 33px !important; }
  .hr-anim-optimize-row .system-indicator[data-indicator="star-climbing"] svg { width: 33px !important; height: 33px !important; }
  .hr-anim-optimize-row .system-indicator[data-indicator="trend-up"] svg { width: 42px !important; height: 29px !important; }
  .hr-anim-optimize-row .system-indicator[data-indicator="dollar-growing"] .dollar {
    font-size: 28px !important;
    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
    text-align: center !important;
  }

  /* Tighten the How-It-Works card + optimize-widget padding so the widget sits
     closer to the card edges — reclaims the horizontal room for single-line
     system names. Scoped to #process so #benefits/#services cards are untouched. */
  #process .hrx-card { padding: 20px !important; }
  .hr-anim-card.hr-anim-optimize { padding: 10px !important; }

}

/* === Guide pages (.rg-*) — wider reading column + full-bleed figures ===
   David 2026-08-07: guides read as one narrow 760px column top to bottom.
   His reference was the /resources/ cantilever (.res-cant-inner = 1152px);
   note the OTHER prose on that page (.res-body/.res-lead) is only 640px, so
   the page feels wide because its bands break out, not because its text is.

   Prose 760 -> 920px. Figures break out to 1152px: the source images are
   1200px and were rendering at 760px, downscaled by a third. Prose is
   deliberately NOT taken to 1152 — that is ~135 characters per line, which
   costs the reader on a 3,000-word guide. The cantilever gets away with it
   because it is four short paragraphs at a visual break.

   SPECIFICITY NOTE — every guide carries its own inline <style> inside a
   wp:html block, and that inline CSS appears LATER in the document than this
   stylesheet, so it wins at equal specificity. `.rg-wrap .rg-body` is 0,2,0
   and outranks the page's `.rg-body` (0,1,0) regardless of source order.
   Do NOT flatten these to single-class selectors — they will silently lose.

   Done here rather than per-page because a theme file cannot be clobbered by
   an open page editor (see the db-write/editor collision hazard), it needs no
   approval, and it covers every guide including ones not built yet. Pages
   1169 and 446 also carry these values inline (applied before this block
   existed); identical values, so harmless. */
/* NO overflow-x:hidden on .rg-wrap. It was here briefly on 2026-08-07 as a
   defensive guard and it CLIPPED 40px off each side of every figure: the GP
   content container makes .rg-wrap only 1072px, while the break-out figures
   below lay out at 1152px, so they legitimately extend past their parent.
   The guard is also unnecessary — `min(1152px, calc(100vw - 56px))` can never
   exceed the viewport, and the theme already forces `html,body{overflow-x:hidden}`
   at <=768px (see the consolidated mobile block above). Do not re-add it. */

.rg-wrap .rg-hero,
.rg-wrap .rg-body,
.rg-wrap .rg-cta-sec { max-width: 920px; }

/* Full-bleed figures. margin-left:50% pushes the left edge to the container's
   horizontal centre; translateX(-50%) then pulls it back by half its own width,
   centring it on the viewport. calc(100vw - 56px) keeps clear of the scrollbar
   so this can never introduce a horizontal scroll. Overrides the page-inline
   `.rg-fig{margin:36px 0}` shorthand, which would otherwise reset margin-left. */
.rg-wrap .rg-fig {
  width: min(1152px, calc(100vw - 56px));
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 44px;
  margin-bottom: 44px;
}

/* Keep Reading grid uses the same break-out so its cards line up with the
   figures above. Without this it renders at the GP container's 1072px while
   the figures sit at 1152px — a visible 40px misalignment on each side. */
.rg-wrap .rg-related {
  width: min(1152px, calc(100vw - 56px));
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
}

@media (max-width: 768px) {
  .rg-wrap .rg-fig,
  .rg-wrap .rg-related {
    width: auto;
    max-width: 100%;
    margin-left: 0;
    transform: none;
  }
  .rg-wrap .rg-fig {
    margin-top: 32px;
    margin-bottom: 32px;
  }
}