/**
 * TPH Enterprise Design System v4.0
 * Tax Pro Tools Hub — Uncle Kam
 * Premium SaaS/Editorial Experience
 * Comparable to: Stripe, HubSpot, Linear, Ahrefs, Webflow Enterprise
 */

/* ============================================================
   1. DESIGN TOKENS + RESET
   ============================================================ */
:root {
	--tph-navy: #1e1e5e;
	--tph-navy-dark: #14144a;
	--tph-navy-mid: #252580;
	--tph-yellow: #f6b820;
	--tph-yellow-dark: #d9a000;
	--tph-white: #fff;
	--tph-off-white: #f8f9fc;
	--tph-gray-50: #f9fafb;
	--tph-gray-100: #f3f4f6;
	--tph-gray-200: #e5e7eb;
	--tph-gray-300: #d1d5db;
	--tph-gray-400: #9ca3af;
	--tph-gray-500: #6b7280;
	--tph-gray-600: #4b5563;
	--tph-gray-700: #374151;
	--tph-gray-800: #1f2937;
	--tph-gray-900: #111827;
	--tph-green: #059669;
	--tph-green-light: #d1fae5;
	--tph-red: #dc2626;
	--tph-red-light: #fee2e2;
	--tph-blue: #2563eb;
	--tph-blue-light: #dbeafe;
	--tph-radius-sm: 6px;
	--tph-radius-md: 10px;
	--tph-radius-lg: 16px;
	--tph-radius-xl: 24px;
	--tph-shadow-sm: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);
	--tph-shadow-md: 0 4px 16px rgba(30, 30, 94, .1), 0 2px 6px rgba(0, 0, 0, .06);
	--tph-shadow-lg: 0 10px 40px rgba(30, 30, 94, .14), 0 4px 12px rgba(0, 0, 0, .08);
	--tph-shadow-xl: 0 20px 60px rgba(30, 30, 94, .18), 0 8px 24px rgba(0, 0, 0, .1);
	--tph-max-width: 1280px;
	--tph-content-width: 900px;
	--tph-side-pad: clamp(16px, 4vw, 48px);
	--font-display: "Barlow Condensed", "Impact", sans-serif;
	--font-body: "DM Sans", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ============================================================
   2. GLOBAL LAYOUT CONTAINER
   ============================================================ */
.entry-content, .post-content, .page-content, .tph-page-wrapper {
	max-width: var(--tph-max-width) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: var(--tph-side-pad) !important;
	padding-right: var(--tph-side-pad) !important;
	box-sizing: border-box !important;
}

/* ============================================================
   3. HERO SECTION
   ============================================================ */
.tph-hero {
	background: linear-gradient(135deg, var(--tph-navy-dark) 0%, var(--tph-navy) 50%, var(--tph-navy-mid) 100%) !important;
	padding: clamp(40px, 6vw, 80px) var(--tph-side-pad) clamp(48px, 7vw, 96px) !important;
	margin: 0 !important;
	position: relative !important;
	overflow: hidden !important;
}

.tph-hero::before {
	content: "" !important;
	position: absolute !important;
	top: -40% !important;
	right: -10% !important;
	width: 600px !important;
	height: 600px !important;
	background: radial-gradient(circle, rgba(246, 184, 32, .08) 0%, transparent 70%) !important;
	pointer-events: none !important;
}

.tph-hero-inner {
	max-width: var(--tph-max-width) !important;
	margin: 0 auto !important;
	display: grid !important;
	grid-template-columns: 1fr 340px !important;
	gap: 48px !important;
	align-items: start !important;
}

.tph-hero-content {
	min-width: 0 !important;
}

.tph-breadcrumb, .tph-hero .tph-breadcrumb {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	font-family: var(--font-body) !important;
	font-size: .8rem !important;
	font-weight: 500 !important;
	color: rgba(255, 255, 255, .75) !important;
	margin-bottom: 16px !important;
	letter-spacing: .02em !important;
}

.tph-breadcrumb a, .tph-hero .tph-breadcrumb a {
	color: rgba(255, 255, 255, .75) !important;
	text-decoration: none !important;
	transition: color .15s !important;
}

.tph-breadcrumb a:hover {
	color: var(--tph-yellow) !important;
}

.tph-breadcrumb span {
	color: rgba(255, 255, 255, .4) !important;
}

.tph-badge, .tph-hero-badge {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	background: var(--tph-yellow) !important;
	color: var(--tph-navy-dark) !important;
	font-family: var(--font-body) !important;
	font-size: .7rem !important;
	font-weight: 700 !important;
	letter-spacing: .08em !important;
	text-transform: uppercase !important;
	padding: 4px 10px !important;
	border-radius: 4px !important;
	margin-bottom: 16px !important;
}

.tph-hero h1, .tph-hero-title {
	font-family: var(--font-display) !important;
	font-size: clamp(2rem, 4.5vw, 3.5rem) !important;
	font-weight: 800 !important;
	line-height: 1.05 !important;
	color: var(--tph-white) !important;
	text-transform: uppercase !important;
	letter-spacing: -.01em !important;
	margin: 0 0 20px !important;
}

.tph-subtitle, .tph-hero-desc, .tph-hero p {
	font-family: var(--font-body) !important;
	font-size: clamp(.95rem, 1.5vw, 1.1rem) !important;
	line-height: 1.65 !important;
	color: rgba(255, 255, 255, .82) !important;
	max-width: 560px !important;
	margin: 0 0 20px !important;
}

.tph-hero-meta {
	display: flex !important;
	align-items: center !important;
	gap: 16px !important;
	flex-wrap: wrap !important;
}

.tph-hero-meta span, .tph-meta-tag {
	font-family: var(--font-body) !important;
	font-size: .75rem !important;
	font-weight: 600 !important;
	color: rgba(255, 255, 255, .55) !important;
	text-transform: uppercase !important;
	letter-spacing: .06em !important;
}

/* Quick Picks Card */
.tph-quick-picks, .tph-hero-card {
	background: rgba(255, 255, 255, .07) !important;
	backdrop-filter: blur(12px) !important;
	-webkit-backdrop-filter: blur(12px) !important;
	border: 1px solid rgba(255, 255, 255, .12) !important;
	border-radius: var(--tph-radius-lg) !important;
	padding: 28px !important;
	color: var(--tph-white) !important;
	box-shadow: var(--tph-shadow-lg) !important;
}

.tph-quick-picks h3, .tph-hero-card h3 {
	font-family: var(--font-body) !important;
	font-size: .7rem !important;
	font-weight: 700 !important;
	letter-spacing: .1em !important;
	text-transform: uppercase !important;
	color: var(--tph-yellow) !important;
	margin: 0 0 16px !important;
}

.tph-quick-picks ul, .tph-hero-card ul {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.tph-quick-picks li, .tph-hero-card li {
	font-family: var(--font-body) !important;
	font-size: .875rem !important;
	line-height: 1.5 !important;
	color: rgba(255, 255, 255, .88) !important;
	padding: 8px 0 !important;
	border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
}

.tph-quick-picks li:last-child, .tph-hero-card li:last-child {
	border-bottom: none !important;
}

.tph-quick-picks li strong, .tph-hero-card li strong {
	color: var(--tph-yellow) !important;
	font-weight: 600 !important;
}

/* ============================================================
   4. YELLOW DIVIDER — HORIZONTAL ACCENT ONLY
   ============================================================ */
.tph-divider-yellow {
	width: 48px !important;
	height: 3px !important;
	background: var(--tph-yellow) !important;
	border: none !important;
	border-left: none !important;
	border-right: none !important;
	margin: 0 0 24px !important;
	display: block !important;
	border-radius: 2px !important;
}

/* Kill any vertical line variants */
.tph-divider-yellow[style*="width: 2px"], .tph-divider-yellow[style*="width:2px"], .tph-divider-yellow[style*="height: 100%"] {
	display: none !important;
}

/* ============================================================
   5. COMPARISON TABLE — ENTERPRISE GRADE
   ============================================================ */
.tph-compare-section {
	margin: 48px 0 !important;
}

.tph-compare-section h2 {
	font-family: var(--font-display) !important;
	font-size: clamp(1.3rem, 2.5vw, 1.8rem) !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	color: var(--tph-navy) !important;
	margin: 0 0 24px !important;
	letter-spacing: -.01em !important;
}

.tph-compare-table-wrap {
	overflow-x: auto !important;
	-webkit-overflow-scrolling: touch !important;
	border-radius: var(--tph-radius-md) !important;
	box-shadow: var(--tph-shadow-md) !important;
	border: 1px solid var(--tph-gray-200) !important;
}

.tph-compare-table {
	width: 100% !important;
	min-width: 700px !important;
	border-collapse: collapse !important;
	font-family: var(--font-body) !important;
	font-size: .875rem !important;
	background: var(--tph-white) !important;
}

.tph-compare-table thead tr, .tph-compare-table th {
	background: var(--tph-navy) !important;
	color: var(--tph-white) !important;
	font-family: var(--font-body) !important;
	font-size: .75rem !important;
	font-weight: 700 !important;
	letter-spacing: .06em !important;
	text-transform: uppercase !important;
	padding: 14px 16px !important;
	text-align: left !important;
	border: none !important;
	white-space: nowrap !important;
}

.tph-compare-table tbody tr {
	border-bottom: 1px solid var(--tph-gray-100) !important;
	transition: background .15s !important;
}

.tph-compare-table tbody tr:last-child {
	border-bottom: none !important;
}

.tph-compare-table tbody tr:hover {
	background: var(--tph-gray-50) !important;
}

.tph-compare-table td {
	padding: 14px 16px !important;
	color: var(--tph-gray-700) !important;
	vertical-align: top !important;
	line-height: 1.5 !important;
	border: none !important;
}

.tph-compare-table td:first-child {
	font-weight: 700 !important;
	color: var(--tph-navy) !important;
	white-space: nowrap !important;
}

/* ============================================================
   6. CONTENT SECTIONS — TYPOGRAPHY + SPACING
   ============================================================ */
.tph-content-section, .tph-section {
	margin: 48px 0 !important;
}

.tph-content-section h2, .tph-section h2 {
	font-family: var(--font-display) !important;
	font-size: clamp(1.4rem, 2.5vw, 2rem) !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	color: var(--tph-navy) !important;
	letter-spacing: -.01em !important;
	line-height: 1.1 !important;
	margin: 0 0 8px !important;
}

.tph-content-section h3, .tph-section h3 {
	font-family: var(--font-body) !important;
	font-size: clamp(1rem, 1.8vw, 1.2rem) !important;
	font-weight: 700 !important;
	color: var(--tph-navy) !important;
	margin: 24px 0 8px !important;
}

.tph-content-section p, .tph-section p {
	font-family: var(--font-body) !important;
	font-size: 1rem !important;
	line-height: 1.7 !important;
	color: var(--tph-gray-700) !important;
	max-width: 72ch !important;
	margin: 0 0 16px !important;
}

/* ============================================================
   7. CONSIDERATION GRID (4-column icon grid)
   ============================================================ */
.tph-considerations-grid, .tph-4col-grid {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 20px !important;
	margin: 32px 0 !important;
}

.tph-consideration-item, .tph-4col-item {
	background: var(--tph-gray-50) !important;
	border: 1px solid var(--tph-gray-200) !important;
	border-radius: var(--tph-radius-md) !important;
	padding: 20px !important;
	text-align: center !important;
}

.tph-consideration-item h4, .tph-4col-item h4 {
	font-family: var(--font-body) !important;
	font-size: .875rem !important;
	font-weight: 700 !important;
	color: var(--tph-navy) !important;
	margin: 0 0 6px !important;
}

.tph-consideration-item p, .tph-4col-item p {
	font-size: .8rem !important;
	color: var(--tph-gray-500) !important;
	margin: 0 !important;
	max-width: none !important;
}

/* ============================================================
   8. INLINE CTA BOX
   ============================================================ */
.tph-inline-cta {
	background: var(--tph-navy) !important;
	border-radius: var(--tph-radius-lg) !important;
	padding: 32px 36px !important;
	margin: 40px 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 24px !important;
	flex-wrap: wrap !important;
}

.tph-inline-cta-content h3, .tph-inline-cta h3 {
	font-family: var(--font-body) !important;
	font-size: .7rem !important;
	font-weight: 700 !important;
	letter-spacing: .1em !important;
	text-transform: uppercase !important;
	color: var(--tph-yellow) !important;
	margin: 0 0 6px !important;
}

.tph-inline-cta-content h4, .tph-inline-cta h4 {
	font-family: var(--font-display) !important;
	font-size: clamp(1.1rem, 2vw, 1.4rem) !important;
	font-weight: 800 !important;
	color: var(--tph-white) !important;
	text-transform: uppercase !important;
	margin: 0 0 8px !important;
}

.tph-inline-cta p {
	font-family: var(--font-body) !important;
	font-size: .875rem !important;
	color: rgba(255, 255, 255, .75) !important;
	margin: 0 !important;
	max-width: none !important;
}

.tph-inline-cta a, .tph-inline-cta .tph-cta-btn {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	background: var(--tph-yellow) !important;
	color: var(--tph-navy-dark) !important;
	font-family: var(--font-body) !important;
	font-size: .875rem !important;
	font-weight: 700 !important;
	padding: 12px 24px !important;
	border-radius: var(--tph-radius-sm) !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	flex-shrink: 0 !important;
	transition: background .15s, transform .1s !important;
}

.tph-inline-cta a:hover, .tph-inline-cta .tph-cta-btn:hover {
	background: var(--tph-yellow-dark) !important;
	transform: translateY(-1px) !important;
}

.tph-inline-cta .tph-cta-note {
	font-size: .75rem !important;
	color: rgba(255, 255, 255, .5) !important;
	margin-top: 6px !important;
	display: block !important;
}

/* ============================================================
   9. SOFTWARE CARDS — ENTERPRISE GRADE
   ============================================================ */
.tph-software-grid {
	display: grid !important;
	grid-template-columns: 1fr !important;
	gap: 32px !important;
	margin: 40px 0 !important;
}

.tph-software-card {
	background: var(--tph-white) !important;
	border: 1px solid var(--tph-gray-200) !important;
	border-radius: var(--tph-radius-lg) !important;
	overflow: hidden !important;
	box-shadow: var(--tph-shadow-sm) !important;
	transition: box-shadow .2s !important;
}

.tph-software-card:hover {
	box-shadow: var(--tph-shadow-md) !important;
}

.tph-card-header {
	background: var(--tph-gray-50) !important;
	border-bottom: 1px solid var(--tph-gray-200) !important;
	padding: 24px 28px !important;
	display: flex !important;
	align-items: flex-start !important;
	justify-content: space-between !important;
	gap: 16px !important;
	flex-wrap: wrap !important;
}

.tph-card-header h3 {
	font-family: var(--font-display) !important;
	font-size: clamp(1.2rem, 2vw, 1.5rem) !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	color: var(--tph-navy) !important;
	margin: 0 0 4px !important;
}

.tph-card-badge {
	display: inline-flex !important;
	align-items: center !important;
	padding: 3px 10px !important;
	border-radius: 20px !important;
	font-family: var(--font-body) !important;
	font-size: .7rem !important;
	font-weight: 700 !important;
	letter-spacing: .05em !important;
	text-transform: uppercase !important;
	flex-shrink: 0 !important;
}

.tph-card-badge.yellow, .tph-badge-yellow {
	background: rgba(246, 184, 32, .15) !important;
	color: #92600a !important;
}

.tph-card-badge.green, .tph-badge-green {
	background: rgba(5, 150, 105, .12) !important;
	color: #065f46 !important;
}

.tph-card-badge.blue, .tph-badge-blue {
	background: rgba(37, 99, 235, .12) !important;
	color: #1e40af !important;
}

.tph-card-badge.purple, .tph-badge-purple {
	background: rgba(124, 58, 237, .12) !important;
	color: #5b21b6 !important;
}

.tph-card-body {
	padding: 24px 28px !important;
}

.tph-card-body p {
	font-family: var(--font-body) !important;
	font-size: .95rem !important;
	line-height: 1.65 !important;
	color: var(--tph-gray-600) !important;
	margin: 0 0 20px !important;
	max-width: none !important;
}

/* Pros/Cons — Two column layout */
.tph-card-pros-cons {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 16px !important;
	margin: 20px 0 !important;
}

.tph-card-pros-cons > div:first-child, .tph-pros {
	background: var(--tph-green-light) !important;
	border: 1px solid rgba(5, 150, 105, .2) !important;
	border-radius: var(--tph-radius-md) !important;
	padding: 16px 20px !important;
}

.tph-card-pros-cons > div:last-child, .tph-cons {
	background: var(--tph-red-light) !important;
	border: 1px solid rgba(220, 38, 38, .2) !important;
	border-radius: var(--tph-radius-md) !important;
	padding: 16px 20px !important;
}

.tph-card-pros-cons h4 {
	font-family: var(--font-body) !important;
	font-size: .75rem !important;
	font-weight: 700 !important;
	letter-spacing: .08em !important;
	text-transform: uppercase !important;
	margin: 0 0 10px !important;
}

.tph-card-pros-cons > div:first-child h4 {
	color: var(--tph-green) !important;
}

.tph-card-pros-cons > div:last-child h4 {
	color: var(--tph-red) !important;
}

.tph-card-pros-cons ul {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.tph-card-pros-cons li {
	font-family: var(--font-body) !important;
	font-size: .85rem !important;
	line-height: 1.5 !important;
	color: var(--tph-gray-700) !important;
	padding: 3px 0 3px 18px !important;
	position: relative !important;
}

.tph-card-pros-cons > div:first-child li::before {
	content: "✓" !important;
	position: absolute !important;
	left: 0 !important;
	color: var(--tph-green) !important;
	font-weight: 700 !important;
}

.tph-card-pros-cons > div:last-child li::before {
	content: "✗" !important;
	position: absolute !important;
	left: 0 !important;
	color: var(--tph-red) !important;
	font-weight: 700 !important;
}

.tph-card-footer {
	padding: 16px 28px !important;
	border-top: 1px solid var(--tph-gray-100) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	flex-wrap: wrap !important;
	background: var(--tph-gray-50) !important;
}

.tph-card-price {
	font-family: var(--font-body) !important;
	font-size: .875rem !important;
	font-weight: 600 !important;
	color: var(--tph-gray-700) !important;
}

.tph-card-price strong {
	color: var(--tph-navy) !important;
}

.tph-card-actions {
	display: flex !important;
	gap: 10px !important;
	flex-wrap: wrap !important;
}

.tph-btn-primary, .tph-card-actions .tph-btn-primary, a.tph-btn-primary {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	background: var(--tph-yellow) !important;
	color: var(--tph-navy-dark) !important;
	font-family: var(--font-body) !important;
	font-size: .8rem !important;
	font-weight: 700 !important;
	padding: 9px 18px !important;
	border-radius: var(--tph-radius-sm) !important;
	text-decoration: none !important;
	transition: background .15s, transform .1s !important;
	white-space: nowrap !important;
}

.tph-btn-primary:hover {
	background: var(--tph-yellow-dark) !important;
	transform: translateY(-1px) !important;
}

.tph-btn-secondary, .tph-card-actions .tph-btn-secondary, a.tph-btn-secondary {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	background: transparent !important;
	color: var(--tph-navy) !important;
	font-family: var(--font-body) !important;
	font-size: .8rem !important;
	font-weight: 600 !important;
	padding: 9px 18px !important;
	border-radius: var(--tph-radius-sm) !important;
	border: 1.5px solid var(--tph-navy) !important;
	text-decoration: none !important;
	transition: background .15s, color .15s !important;
	white-space: nowrap !important;
}

.tph-btn-secondary:hover {
	background: var(--tph-navy) !important;
	color: var(--tph-white) !important;
}

/* ============================================================
   10. COMPACT CTA SECTION
   ============================================================ */
.tph-compact-cta {
	background: var(--tph-navy) !important;
	border-radius: var(--tph-radius-lg) !important;
	padding: 40px 48px !important;
	margin: 48px 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 32px !important;
	flex-wrap: wrap !important;
	border: none !important;
	border-left: none !important;
	border-right: none !important;
}

.tph-compact-cta-content h2, .tph-compact-cta h2 {
	font-family: var(--font-display) !important;
	font-size: clamp(1.4rem, 2.5vw, 2rem) !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	color: var(--tph-white) !important;
	margin: 0 0 8px !important;
	letter-spacing: -.01em !important;
}

.tph-compact-cta-content p, .tph-compact-cta p {
	font-family: var(--font-body) !important;
	font-size: .95rem !important;
	line-height: 1.6 !important;
	color: rgba(255, 255, 255, .78) !important;
	margin: 0 !important;
	max-width: 480px !important;
}

.tph-compact-cta-actions {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-end !important;
	gap: 8px !important;
	flex-shrink: 0 !important;
}

.tph-compact-cta .tph-cta-btn, .tph-compact-cta a.tph-cta-btn, a[href*="book-strategy-session"].tph-cta-btn {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	background: var(--tph-yellow) !important;
	color: var(--tph-navy-dark) !important;
	font-family: var(--font-body) !important;
	font-size: .9rem !important;
	font-weight: 700 !important;
	padding: 14px 28px !important;
	border-radius: var(--tph-radius-sm) !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	transition: background .15s, transform .1s !important;
	border: none !important;
}

.tph-compact-cta .tph-cta-btn:hover {
	background: var(--tph-yellow-dark) !important;
	transform: translateY(-2px) !important;
}

.tph-compact-cta .tph-cta-note {
	font-family: var(--font-body) !important;
	font-size: .75rem !important;
	color: rgba(255, 255, 255, .5) !important;
	text-align: right !important;
}

/* ============================================================
   11. FINAL CTA SECTION
   ============================================================ */
.tph-final-cta {
	background: linear-gradient(135deg, var(--tph-navy-dark) 0%, var(--tph-navy) 60%, var(--tph-navy-mid) 100%) !important;
	padding: 72px var(--tph-side-pad) !important;
	margin: 48px 0 0 !important;
	text-align: center !important;
	position: relative !important;
	overflow: hidden !important;
}

.tph-final-cta::before {
	content: "" !important;
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	width: 800px !important;
	height: 400px !important;
	background: radial-gradient(ellipse, rgba(246, 184, 32, .06) 0%, transparent 70%) !important;
	pointer-events: none !important;
}

.tph-final-cta h2 {
	font-family: var(--font-display) !important;
	font-size: clamp(2rem, 4vw, 3rem) !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	color: var(--tph-white) !important;
	margin: 0 0 16px !important;
	letter-spacing: -.01em !important;
	position: relative !important;
}

.tph-final-cta p {
	font-family: var(--font-body) !important;
	font-size: 1.05rem !important;
	line-height: 1.6 !important;
	color: rgba(255, 255, 255, .78) !important;
	max-width: 560px !important;
	margin: 0 auto 32px !important;
	position: relative !important;
}

.tph-final-cta .tph-cta-btn, .tph-final-cta a.tph-cta-btn {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	background: var(--tph-yellow) !important;
	color: var(--tph-navy-dark) !important;
	font-family: var(--font-body) !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	padding: 16px 36px !important;
	border-radius: var(--tph-radius-sm) !important;
	text-decoration: none !important;
	position: relative !important;
	transition: background .15s, transform .15s !important;
}

.tph-final-cta .tph-cta-btn:hover {
	background: var(--tph-yellow-dark) !important;
	transform: translateY(-2px) !important;
}

.tph-final-cta-trust {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 24px !important;
	margin-top: 20px !important;
	flex-wrap: wrap !important;
	position: relative !important;
}

.tph-final-cta-trust span {
	font-family: var(--font-body) !important;
	font-size: .8rem !important;
	color: rgba(255, 255, 255, .55) !important;
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
}

/* ============================================================
   12. FAQ ACCORDION — PREMIUM
   ============================================================ */
.tph-faq-section {
	margin: 48px 0 !important;
	background: var(--tph-white) !important;
}

.tph-faq-section > h2, .tph-faq-title {
	font-family: var(--font-display) !important;
	font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	color: var(--tph-navy) !important;
	margin: 0 0 8px !important;
}

.tph-faq-subtitle {
	font-family: var(--font-body) !important;
	font-size: .95rem !important;
	color: var(--tph-gray-500) !important;
	margin: 0 0 28px !important;
}

.tph-faq-list {
	border: 1px solid var(--tph-gray-200) !important;
	border-radius: var(--tph-radius-lg) !important;
	overflow: hidden !important;
	box-shadow: var(--tph-shadow-sm) !important;
}

.tph-faq-item {
	border-bottom: 1px solid var(--tph-gray-100) !important;
	background: var(--tph-white) !important;
	transition: background .15s !important;
}

.tph-faq-item:last-child {
	border-bottom: none !important;
}

.tph-faq-item.open {
	background: var(--tph-gray-50) !important;
}

.tph-faq-question {
	width: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 16px !important;
	padding: 18px 24px !important;
	background: none !important;
	border: none !important;
	cursor: pointer !important;
	text-align: left !important;
	font-family: var(--font-body) !important;
	font-size: .95rem !important;
	font-weight: 600 !important;
	color: var(--tph-navy) !important;
	line-height: 1.4 !important;
	transition: color .15s !important;
}

.tph-faq-question:hover {
	color: var(--tph-navy-mid) !important;
}

.tph-faq-icon {
	width: 24px !important;
	height: 24px !important;
	border-radius: 50% !important;
	background: var(--tph-gray-100) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	color: var(--tph-navy) !important;
	transition: background .15s, transform .2s !important;
	line-height: 1 !important;
}

.tph-faq-item.open .tph-faq-icon {
	background: var(--tph-navy) !important;
	color: var(--tph-white) !important;
	transform: rotate(45deg) !important;
}

.tph-faq-answer {
	display: none !important;
	padding: 0 24px 20px !important;
	font-family: var(--font-body) !important;
	font-size: .9rem !important;
	line-height: 1.7 !important;
	color: var(--tph-gray-600) !important;
	max-width: 72ch !important;
}

.tph-faq-answer p {
	margin: 0 0 12px !important;
	max-width: none !important;
}

.tph-faq-answer p:last-child {
	margin-bottom: 0 !important;
}

.tph-faq-item.open .tph-faq-answer {
	display: block !important;
}

/* ============================================================
   13. DIRECTORY GRID — EDITORIAL ARTICLE CARDS
   ============================================================ */
.tph-directory-section {
	margin: 48px 0 !important;
	padding: 40px 0 !important;
	border-top: 2px solid var(--tph-gray-100) !important;
}

.tph-directory-section h2 {
	font-family: var(--font-display) !important;
	font-size: clamp(1.3rem, 2.5vw, 1.8rem) !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	color: var(--tph-navy) !important;
	margin: 0 0 6px !important;
}

.tph-directory-section > p {
	font-family: var(--font-body) !important;
	font-size: .9rem !important;
	color: var(--tph-gray-500) !important;
	margin: 0 0 28px !important;
}

.tph-directory-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 12px !important;
}

.tph-directory-card {
	background: var(--tph-white) !important;
	border: 1px solid var(--tph-gray-200) !important;
	border-radius: var(--tph-radius-md) !important;
	padding: 16px 18px !important;
	display: flex !important;
	align-items: flex-start !important;
	justify-content: space-between !important;
	gap: 10px !important;
	text-decoration: none !important;
	transition: border-color .15s, box-shadow .15s, transform .1s !important;
	min-height: 72px !important;
}

.tph-directory-card:hover {
	border-color: var(--tph-navy) !important;
	box-shadow: var(--tph-shadow-md) !important;
	transform: translateY(-2px) !important;
}

.tph-directory-card-content {
	flex: 1 !important;
	min-width: 0 !important;
}

.tph-directory-card-tag {
	display: inline-block !important;
	font-family: var(--font-body) !important;
	font-size: .65rem !important;
	font-weight: 700 !important;
	letter-spacing: .07em !important;
	text-transform: uppercase !important;
	color: var(--tph-yellow-dark) !important;
	background: rgba(246, 184, 32, .12) !important;
	padding: 2px 7px !important;
	border-radius: 3px !important;
	margin-bottom: 6px !important;
}

.tph-directory-card-title {
	font-family: var(--font-body) !important;
	font-size: .85rem !important;
	font-weight: 600 !important;
	color: var(--tph-navy) !important;
	line-height: 1.4 !important;
	margin: 0 !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
}

.tph-directory-card-arrow {
	color: var(--tph-gray-300) !important;
	font-size: 1rem !important;
	flex-shrink: 0 !important;
	transition: color .15s, transform .15s !important;
	margin-top: 2px !important;
}

.tph-directory-card:hover .tph-directory-card-arrow {
	color: var(--tph-navy) !important;
	transform: translateX(3px) !important;
}

/* ============================================================
   14. HUB CROSS-LINKS SECTION
   ============================================================ */
.tph-hub-links-section {
	background: var(--tph-gray-50) !important;
	border-top: 1px solid var(--tph-gray-200) !important;
	padding: 48px var(--tph-side-pad) !important;
	margin: 48px 0 0 !important;
}

.tph-hub-links-section h2 {
	font-family: var(--font-display) !important;
	font-size: clamp(1.2rem, 2vw, 1.5rem) !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	color: var(--tph-navy) !important;
	margin: 0 0 24px !important;
}

.tph-hub-links-grid, .tph-hub-links {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
	gap: 12px !important;
}

.tph-hub-link-card {
	background: var(--tph-white) !important;
	border: 1px solid var(--tph-gray-200) !important;
	border-radius: var(--tph-radius-md) !important;
	padding: 16px 18px !important;
	text-decoration: none !important;
	display: block !important;
	transition: border-color .15s, box-shadow .15s !important;
}

.tph-hub-link-card:hover {
	border-color: var(--tph-navy) !important;
	box-shadow: var(--tph-shadow-sm) !important;
}

.tph-hub-link-card .tph-hub-icon {
	font-size: 1.4rem !important;
	margin-bottom: 8px !important;
	display: block !important;
}

.tph-hub-link-card .tph-hub-name {
	font-family: var(--font-body) !important;
	font-size: .85rem !important;
	font-weight: 700 !important;
	color: var(--tph-navy) !important;
	margin: 0 0 3px !important;
	display: block !important;
}

.tph-hub-link-card .tph-hub-count {
	font-family: var(--font-body) !important;
	font-size: .75rem !important;
	color: var(--tph-gray-400) !important;
	display: block !important;
}

/* ============================================================
   15. VISUAL RHYTHM — ALTERNATING SECTIONS
   ============================================================ */
.tph-section-alt {
	background: var(--tph-gray-50) !important;
	margin-left: calc(-1 * var(--tph-side-pad)) !important;
	margin-right: calc(-1 * var(--tph-side-pad)) !important;
	padding: 48px var(--tph-side-pad) !important;
}

.tph-stat-row {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 24px !important;
	margin: 40px 0 !important;
	padding: 32px !important;
	background: var(--tph-navy) !important;
	border-radius: var(--tph-radius-lg) !important;
}

.tph-stat-item {
	text-align: center !important;
}

.tph-stat-value {
	font-family: var(--font-display) !important;
	font-size: clamp(1.8rem, 3vw, 2.5rem) !important;
	font-weight: 800 !important;
	color: var(--tph-yellow) !important;
	line-height: 1 !important;
	display: block !important;
	margin-bottom: 6px !important;
}

.tph-stat-label {
	font-family: var(--font-body) !important;
	font-size: .8rem !important;
	color: rgba(255, 255, 255, .65) !important;
	text-transform: uppercase !important;
	letter-spacing: .05em !important;
}

/* ============================================================
   16. STICKY MOBILE CTA
   ============================================================ */
@media (max-width: 767px) {
	.tph-sticky-mobile-cta {
		position: fixed !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		background: var(--tph-navy) !important;
		padding: 12px 16px !important;
		z-index: 999 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 12px !important;
		box-shadow: 0 -4px 20px rgba(0, 0, 0, .2) !important;
		border-top: 2px solid var(--tph-yellow) !important;
	}
	
	.tph-sticky-mobile-cta span {
		font-family: var(--font-body) !important;
		font-size: .8rem !important;
		color: rgba(255, 255, 255, .8) !important;
		font-weight: 500 !important;
	}
	
	.tph-sticky-mobile-cta a {
		background: var(--tph-yellow) !important;
		color: var(--tph-navy-dark) !important;
		font-family: var(--font-body) !important;
		font-size: .8rem !important;
		font-weight: 700 !important;
		padding: 10px 16px !important;
		border-radius: var(--tph-radius-sm) !important;
		text-decoration: none !important;
		white-space: nowrap !important;
		flex-shrink: 0 !important;
	}
}

/* ============================================================
   17. MOBILE RESPONSIVE — COMPLETE OVERHAUL
   ============================================================ */
@media (max-width: 1024px) {
	.tph-hero-inner {
		grid-template-columns: 1fr !important;
		gap: 32px !important;
	}
	
	.tph-quick-picks, .tph-hero-card {
		max-width: 480px !important;
	}
	
	.tph-considerations-grid, .tph-4col-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	
	.tph-stat-row {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 768px) {
	:root {
		--tph-side-pad: 16px !important;
	}
	
	.tph-hero {
		padding: 32px 16px 40px !important;
	}
	
	.tph-hero-inner {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}
	
	/* Table: scrollable on mobile */
	.tph-compare-table-wrap {
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
		margin: 0 -16px !important;
		border-radius: 0 !important;
	}
	
	.tph-compare-table {
		min-width: 600px !important;
		font-size: .8rem !important;
	}
	
	.tph-compare-table th, .tph-compare-table td {
		padding: 10px 12px !important;
	}
	
	/* Pros/Cons: stack on mobile */
	.tph-card-pros-cons {
		grid-template-columns: 1fr !important;
		gap: 12px !important;
	}
	
	/* Compact CTA: stack on mobile */
	.tph-compact-cta {
		flex-direction: column !important;
		align-items: flex-start !important;
		padding: 28px 24px !important;
		gap: 20px !important;
	}
	
	.tph-compact-cta-actions {
		align-items: flex-start !important;
		width: 100% !important;
	}
	
	.tph-compact-cta .tph-cta-btn {
		width: 100% !important;
		justify-content: center !important;
	}
	
	.tph-compact-cta .tph-cta-note {
		text-align: left !important;
	}
	
	/* Inline CTA: stack on mobile */
	.tph-inline-cta {
		flex-direction: column !important;
		padding: 24px 20px !important;
		gap: 16px !important;
	}
	
	.tph-inline-cta a, .tph-inline-cta .tph-cta-btn {
		width: 100% !important;
		justify-content: center !important;
	}
	
	/* Directory grid: 1 column on mobile */
	.tph-directory-grid {
		grid-template-columns: 1fr !important;
		gap: 8px !important;
	}
	
	/* Hub links: 2 column on mobile */
	.tph-hub-links-grid, .tph-hub-links {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	
	/* Considerations: 1 column on mobile */
	.tph-considerations-grid, .tph-4col-grid {
		grid-template-columns: 1fr !important;
	}
	
	/* Stats: 2 column on mobile */
	.tph-stat-row {
		grid-template-columns: repeat(2, 1fr) !important;
		padding: 24px 20px !important;
		gap: 16px !important;
	}
	
	/* Card footer: stack on mobile */
	.tph-card-footer {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 12px !important;
	}
	
	.tph-card-actions {
		width: 100% !important;
	}
	
	.tph-btn-primary, .tph-btn-secondary {
		flex: 1 !important;
		justify-content: center !important;
	}
	
	/* FAQ: full width */
	.tph-faq-question {
		padding: 16px 18px !important;
		font-size: .9rem !important;
	}
	
	.tph-faq-answer {
		padding: 0 18px 16px !important;
		font-size: .875rem !important;
	}
	
	/* Final CTA */
	.tph-final-cta {
		padding: 48px 16px !important;
	}
	
	.tph-final-cta .tph-cta-btn {
		width: 100% !important;
		justify-content: center !important;
	}
	
	.tph-final-cta-trust {
		flex-direction: column !important;
		gap: 10px !important;
	}
	
	/* Hub links section */
	.tph-hub-links-section {
		padding: 32px 16px !important;
	}
}

@media (max-width: 480px) {
	.tph-directory-grid {
		grid-template-columns: 1fr !important;
	}
	
	.tph-hub-links-grid, .tph-hub-links {
		grid-template-columns: 1fr !important;
	}
	
	.tph-stat-row {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	
	.tph-card-header {
		padding: 18px 20px !important;
	}
	
	.tph-card-body {
		padding: 18px 20px !important;
	}
	
	.tph-card-footer {
		padding: 14px 20px !important;
	}
}

/* ============================================================
   18. STICKY BAR — HIDE ON MOBILE
   ============================================================ */
@media (max-width: 767px) {
	#tph-sticky-bar, .tph-sticky-bar, [id*="sticky-bar"], [class*="sticky-bar"] {
		display: none !important;
	}
}

/* ============================================================
   19. TYPOGRAPHY GLOBAL OVERRIDES
   ============================================================ */
.entry-content h2:not([class]), .post-content h2:not([class]) {
	font-family: var(--font-display) !important;
	font-size: clamp(1.4rem, 2.5vw, 2rem) !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	color: var(--tph-navy) !important;
	letter-spacing: -.01em !important;
	line-height: 1.1 !important;
	margin: 40px 0 16px !important;
}

.entry-content h3:not([class]), .post-content h3:not([class]) {
	font-family: var(--font-body) !important;
	font-size: clamp(1rem, 1.8vw, 1.2rem) !important;
	font-weight: 700 !important;
	color: var(--tph-navy) !important;
	margin: 28px 0 10px !important;
}

.entry-content p:not([class]), .post-content p:not([class]) {
	font-family: var(--font-body) !important;
	font-size: 1rem !important;
	line-height: 1.7 !important;
	color: var(--tph-gray-700) !important;
	max-width: 72ch !important;
	margin: 0 0 16px !important;
}

/* ============================================================
   20. FOOTER WEIGHT REDUCTION
   ============================================================ */
.site-footer, footer.entry-footer, .tph-footer {
	padding-top: 32px !important;
	padding-bottom: 32px !important;
}

.site-footer .widget-title, .site-footer h3 {
	font-size: .85rem !important;
	letter-spacing: .06em !important;
	text-transform: uppercase !important;
	margin-bottom: 12px !important;
}

/* ============================================================
   21. HIDE BROKEN/EMPTY ELEMENTS
   ============================================================ */
.tph-child-grid:empty, .tph-hub-links:empty, .tph-software-grid:empty {
	display: none !important;
}

/* Hide the "Find a Tax Professional Near You" widget on TPH pages */
.tph-hero ~ .widget_find_tax_pro, .tph-hero ~ #find-tax-pro-widget {
	display: none !important;
}

/* ============================================================
   22. SCROLLBAR STYLING
   ============================================================ */
.tph-compare-table-wrap::-webkit-scrollbar {
	height: 4px !important;
}

.tph-compare-table-wrap::-webkit-scrollbar-track {
	background: var(--tph-gray-100) !important;
}

.tph-compare-table-wrap::-webkit-scrollbar-thumb {
	background: var(--tph-navy) !important;
	border-radius: 2px !important;
}

/* ============================================================
   23. PRINT / ACCESSIBILITY
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.tph-directory-card, .tph-btn-primary, .tph-btn-secondary, .tph-compact-cta .tph-cta-btn, .tph-final-cta .tph-cta-btn {
		transition: none !important;
	}
}

/* Focus styles for accessibility */
.tph-faq-question:focus-visible, .tph-directory-card:focus-visible, .tph-btn-primary:focus-visible, .tph-btn-secondary:focus-visible {
	outline: 2px solid var(--tph-yellow) !important;
	outline-offset: 2px !important;
}

/* ── PATCH: Score Badge (Premium Visual Display) ─────────── */
.tph-score-box {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: linear-gradient(135deg, #1e1e5e 0%, #2a2a7a 100%) !important;
	color: #f6b820 !important;
	font-family: "Barlow Condensed", sans-serif !important;
	font-size: 42px !important;
	font-weight: 800 !important;
	letter-spacing: .02em !important;
	padding: 16px 32px !important;
	border-radius: 12px !important;
	border: 3px solid #f6b820 !important;
	margin: 16px 0 20px !important;
	box-shadow: 0 4px 24px rgba(30, 30, 94, .18) !important;
	min-width: 160px !important;
}

/* ── PATCH: Fix hero gap (P tag before main) ─────────────── */
.tph-container > p:empty, .tph-container > p:blank, .page-content > p:empty, .page-content > p:blank {
	display: none !important;
	margin: 0 !important;
	padding: 0 !important;
	height: 0 !important;
}

/* Hide any empty P tags that contain only whitespace */
.tph-container > p, .page-content > p {
	display: none !important;
}

/* But show P tags that have actual content (not just whitespace) */
.tph-container > p:not(:empty), .page-content > p:not(:empty) {
	display: block !important;
}

/* ── PATCH: Fix main tag margin/padding ─────────────────── */
.tph-container main {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

.tph-container main > p:first-child:empty {
	display: none !important;
}

/* ── PATCH: Score section layout improvement ─────────────── */
.tph-section:first-of-type {
	padding-top: 48px !important;
}

/* ── PATCH: Footer text fix ─────────────────────────────── */
footer.tph-footer p, .tph-container footer p {
	color: rgba(255, 255, 255, .7) !important;
	font-family: "DM Sans", sans-serif !important;
	font-size: 13px !important;
	margin: 0 !important;
}

/* ── PATCH: Hero section top gap fix ────────────────────── */

/* The hero section should start right after the breadcrumb */
.tph-hero {
	margin-top: 0 !important;
}

/* Fix the P tag with <main> inside it */
p:has(main) {
	display: none !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* ── PATCH: Improve score section visual hierarchy ───────── */
.tph-section:has(.tph-score-box) h2 {
	font-size: clamp(24px, 3vw, 32px) !important;
	color: var(--tph-navy) !important;
	margin-bottom: 8px !important;
}

/* ── PATCH: Remove gray background from score section ────── */
.tph-section:has(.tph-score-box) {
	background: #f8f9ff !important;
	border-left: 4px solid var(--tph-yellow) !important;
	border-radius: 0 8px 8px 0 !important;
	padding: 32px 40px !important;
	margin-bottom: 0 !important;
}

/* ── PATCH: Fix the empty P tag gap above hero ───────────── */

/* Target the specific P tag that wraps <main> */
.page-content > p:first-child {
	display: none !important;
}

.page-content > p:nth-child(2) {
	display: none !important;
}

/* ============================================================
   TPH ENTERPRISE UI FIX v2 — Fortune 500 / Apple-level polish
   Fixes: breadcrumb contrast, navy box readability, FAQ red
   squares, FAQ accordion UX, article card grid, insight boxes
   ============================================================ */

/* ── 1. BREADCRUMB — white text on navy hero ─────────────── */
.tph-breadcrumb {
	color: rgba(255, 255, 255, .9) !important;
	font-size: .78rem !important;
	font-weight: 500 !important;
	letter-spacing: .02em !important;
	margin-bottom: 12px !important;
}

.tph-breadcrumb a {
	color: rgba(255, 255, 255, .7) !important;
	text-decoration: none !important;
	transition: color .15s !important;
}

.tph-breadcrumb a:hover {
	color: #f6b820 !important;
	text-decoration: none !important;
}

.tph-breadcrumb > *:last-child {
	color: #f6b820 !important;
	font-weight: 700 !important;
}

/* ── 2. NAVY BOXES — full white text, not muted ──────────── */
.tph-insight-box, .tph-callout, .tph-compact-cta {
	background: #1e1e5e !important;
	border-left: 4px solid #f6b820 !important;
	border-radius: 10px !important;
	padding: 32px 36px !important;
	margin: 32px 0 !important;
}

.tph-insight-box h2, .tph-insight-box h3, .tph-insight-box h4, .tph-callout h2, .tph-callout h3, .tph-callout h4 {
	color: #fff !important;
	font-size: 1.2rem !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: .04em !important;
	margin: 0 0 14px !important;
}

.tph-insight-box p, .tph-callout p {
	color: #fff !important;
	opacity: 1 !important;
	font-size: .95rem !important;
	line-height: 1.7 !important;
	margin: 0 !important;
}

/* Also fix any inline rgba opacity on these elements */
.tph-insight-box *, .tph-callout * {
	color: #fff !important;
}

.tph-insight-box a, .tph-callout a {
	color: #f6b820 !important;
	text-decoration: underline !important;
}

/* ── 3. FAQ — remove red squares, premium accordion ─────── */

/* Hide the broken empty toggle button entirely */
.tph-faq-toggle {
	display: none !important;
}

/* Make the h3 question the full clickable row */
.tph-faq-item {
	border: 1px solid #e9ecef !important;
	border-radius: 8px !important;
	overflow: visible !important;
	margin-bottom: 6px !important;
	background: #fff !important;
	transition: box-shadow .2s !important;
}

.tph-faq-item:hover {
	box-shadow: 0 2px 12px rgba(30, 30, 94, .08) !important;
}

.tph-faq-item[itemprop="mainEntity"] > h3 {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 18px 20px !important;
	margin: 0 !important;
	font-size: .95rem !important;
	font-weight: 600 !important;
	color: #1e1e5e !important;
	cursor: pointer !important;
	user-select: none !important;
	line-height: 1.4 !important;
	background: transparent !important;
	border-radius: 8px !important;
	transition: background .15s !important;
}

.tph-faq-item[itemprop="mainEntity"] > h3:hover {
	background: #f8f9fa !important;
}

/* Plus icon via ::after pseudo-element */
.tph-faq-item[itemprop="mainEntity"] > h3::after {
	content: "+" !important;
	font-size: 1.4rem !important;
	font-weight: 300 !important;
	color: #1e1e5e !important;
	flex-shrink: 0 !important;
	margin-left: 16px !important;
	width: 28px !important;
	height: 28px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border: 1.5px solid #d0d5dd !important;
	border-radius: 50% !important;
	line-height: 1 !important;
	transition: all .2s !important;
}

.tph-faq-item.open[itemprop="mainEntity"] > h3::after {
	content: "−" !important;
	background: #1e1e5e !important;
	color: #fff !important;
	border-color: #1e1e5e !important;
}

.tph-faq-item.open[itemprop="mainEntity"] > h3 {
	border-bottom: 1px solid #e9ecef !important;
	border-radius: 8px 8px 0 0 !important;
}

/* Answer panel */
.tph-faq-answer {
	padding: 20px 20px 20px !important;
	font-size: .9rem !important;
	color: #374151 !important;
	line-height: 1.7 !important;
	background: #fafafa !important;
	border-radius: 0 0 8px 8px !important;
}

.tph-faq-answer p {
	color: #374151 !important;
	margin: 0 0 12px !important;
}

.tph-faq-answer p:last-child {
	margin-bottom: 0 !important;
}

/* FAQ section header */
.tph-faq-section > h2 {
	font-size: 1.6rem !important;
	font-weight: 800 !important;
	color: #1e1e5e !important;
	text-transform: uppercase !important;
	letter-spacing: .04em !important;
	margin: 0 0 8px !important;
}

.tph-faq-subtitle {
	font-size: .9rem !important;
	color: #6b7280 !important;
	margin: 0 0 28px !important;
}

/* ── 4. ARTICLE DIRECTORY — editorial card grid ──────────── */
.tph-directory-section {
	background: #f8f9fa !important;
	padding: 56px 0 !important;
}

.tph-dir-inner {
	max-width: 1280px !important;
	margin: 0 auto !important;
	padding: 0 32px !important;
}

.tph-dir-header {
	margin-bottom: 32px !important;
}

.tph-dir-eyebrow {
	display: inline-block !important;
	font-size: .7rem !important;
	font-weight: 700 !important;
	letter-spacing: .1em !important;
	text-transform: uppercase !important;
	color: #f6b820 !important;
	background: rgba(246, 184, 32, .12) !important;
	padding: 4px 10px !important;
	border-radius: 4px !important;
	margin-bottom: 10px !important;
}

.tph-dir-title {
	font-size: 1.6rem !important;
	font-weight: 800 !important;
	color: #1e1e5e !important;
	text-transform: uppercase !important;
	letter-spacing: .04em !important;
	margin: 0 0 6px !important;
}

.tph-dir-count {
	font-size: .85rem !important;
	color: #6b7280 !important;
	margin: 0 !important;
}

/* Grid layout — 3 columns desktop, 2 tablet, 1 mobile */
.tph-dir-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 16px !important;
}

@media (max-width: 900px) {
	.tph-dir-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 600px) {
	.tph-dir-grid {
		grid-template-columns: 1fr !important;
	}
}

/* Card styling — Apple/Linear level */
.tph-dir-card {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
	background: #fff !important;
	border: 1px solid #e9ecef !important;
	border-radius: 10px !important;
	padding: 18px 20px !important;
	transition: box-shadow .2s, transform .15s, border-color .2s !important;
	position: relative !important;
	overflow: hidden !important;
}

.tph-dir-card:hover {
	box-shadow: 0 4px 20px rgba(30, 30, 94, .1) !important;
	transform: translateY(-2px) !important;
	border-color: #1e1e5e !important;
}

.tph-dir-card-type {
	display: inline-block !important;
	font-size: .65rem !important;
	font-weight: 700 !important;
	letter-spacing: .08em !important;
	text-transform: uppercase !important;
	color: #1e1e5e !important;
	background: rgba(30, 30, 94, .08) !important;
	padding: 3px 8px !important;
	border-radius: 4px !important;
	align-self: flex-start !important;
	margin-bottom: 2px !important;
}

/* Color-code by type */
.tph-dir-card-type:contains("Review") {
	background: rgba(246, 184, 32, .15) !important;
	color: #92600a !important;
}

.tph-dir-card-type:contains("Comparison") {
	background: rgba(30, 30, 94, .1) !important;
	color: #1e1e5e !important;
}

.tph-dir-card-type:contains("Guide") {
	background: rgba(16, 185, 129, .1) !important;
	color: #065f46 !important;
}

.tph-dir-card-type:contains("How-To") {
	background: rgba(99, 102, 241, .1) !important;
	color: #3730a3 !important;
}

.tph-dir-card-type:contains("Pricing") {
	background: rgba(239, 68, 68, .1) !important;
	color: #991b1b !important;
}

.tph-dir-card-type:contains("Alternatives") {
	background: rgba(245, 158, 11, .1) !important;
	color: #92600a !important;
}

.tph-dir-card-title {
	font-size: .88rem !important;
	font-weight: 600 !important;
	color: #111827 !important;
	text-decoration: none !important;
	line-height: 1.4 !important;
	display: block !important;
	flex: 1 !important;
	transition: color .15s !important;
}

.tph-dir-card-title:hover {
	color: #1e1e5e !important;
	text-decoration: none !important;
}

.tph-dir-card-arrow {
	display: none !important;
}

/* ── 5. COMPACT CTA — fix text contrast ──────────────────── */
.tph-compact-cta-headline {
	color: #fff !important;
	font-size: 1.3rem !important;
	font-weight: 800 !important;
}

.tph-compact-cta-sub, .tph-compact-cta-note, .tph-compact-cta-text {
	color: rgba(255, 255, 255, .9) !important;
}

/* ── 6. CONSIDERATION CARDS — fix text on dark bg ────────── */
.tph-consideration-card {
	background: #fff !important;
	border: 1px solid #e9ecef !important;
	border-radius: 10px !important;
	padding: 24px !important;
}

.tph-consideration-card h3, .tph-consideration-card h4 {
	color: #1e1e5e !important;
}

.tph-consideration-card p {
	color: #374151 !important;
}

/* ============================================================
   TPH ENTERPRISE UI — FINAL PATCH v3
   Fixes: FAQ expand indicator, dir grid full-width, 
          article list editorial cards, spacing cleanup
   ============================================================ */

/* ── 1. FAQ ACCORDION — PREMIUM EXPAND/COLLAPSE INDICATOR ── */

/* The h3 IS the clickable row — style it as a full-width button row */
.tph-faq-item h3 {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 18px 24px !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	color: #1e1e5e !important;
	background: #fff !important;
	border-bottom: 1px solid #e9ecef !important;
	cursor: pointer !important;
	user-select: none !important;
	line-height: 1.5 !important;
	transition: background .2s ease !important;
	margin: 0 !important;
}

.tph-faq-item h3:hover {
	background: #f8f9ff !important;
}

/* The + indicator — added via ::after pseudo-element */
.tph-faq-item h3::after {
	content: "+" !important;
	font-size: 22px !important;
	font-weight: 300 !important;
	color: #f6b820 !important;
	line-height: 1 !important;
	flex-shrink: 0 !important;
	margin-left: 16px !important;
	transition: transform .25s ease !important;
	display: inline-block !important;
}

/* When the item is open (JS adds .tph-open class to the item) */
.tph-faq-item.tph-open h3::after {
	content: "−" !important;
	transform: none !important;
}

.tph-faq-item.tph-open h3 {
	background: #f8f9ff !important;
	border-bottom-color: #1e1e5e !important;
}

/* FAQ answer panel */
.tph-faq-item .tph-faq-answer {
	padding: 20px 24px !important;
	font-size: 15px !important;
	line-height: 1.75 !important;
	color: #444 !important;
	background: #fafbff !important;
	border-bottom: 1px solid #e9ecef !important;
}

/* The hidden toggle button — keep hidden, h3 handles clicks */
.tph-faq-toggle {
	display: none !important;
}

/* FAQ section container */
.tph-faq-section {
	border: 1px solid #e9ecef !important;
	border-radius: 10px !important;
	overflow: hidden !important;
	margin-bottom: 32px !important;
}

.tph-faq-item:last-child h3 {
	border-bottom: none !important;
}

.tph-faq-item.tph-open:last-child .tph-faq-answer {
	border-bottom: none !important;
}

/* ── 2. ELEMENTOR ACCORDION FAQ (second FAQ widget) ── */

/* The second FAQ uses Elementor's built-in accordion */
.elementor-accordion .elementor-tab-title {
	padding: 18px 24px !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	color: #1e1e5e !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	border-bottom: 1px solid #e9ecef !important;
	transition: background .2s ease !important;
}

.elementor-accordion .elementor-tab-title:hover {
	background: #f8f9ff !important;
}

.elementor-accordion .elementor-tab-title .elementor-accordion-icon {
	color: #f6b820 !important;
	font-size: 20px !important;
}

.elementor-accordion .elementor-tab-content {
	padding: 20px 24px !important;
	font-size: 15px !important;
	line-height: 1.75 !important;
	color: #444 !important;
	background: #fafbff !important;
}

/* ── 3. DIRECTORY ARTICLE GRID — EDITORIAL CARD SYSTEM ── */

/* Full-width responsive grid */
.tph-dir-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
	gap: 12px !important;
	width: 100% !important;
}

/* Premium editorial card */
.tph-dir-card {
	display: flex !important;
	align-items: flex-start !important;
	gap: 12px !important;
	padding: 14px 18px !important;
	background: #fff !important;
	border: 1px solid #e9ecef !important;
	border-radius: 8px !important;
	text-decoration: none !important;
	transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease !important;
	cursor: pointer !important;
	min-height: 64px !important;
}

.tph-dir-card:hover {
	border-color: #1e1e5e !important;
	box-shadow: 0 4px 16px rgba(30, 30, 94, .08) !important;
	transform: translateY(-1px) !important;
}

/* Article type badge (Guide / Review / Comparison / etc.) */
.tph-dir-card .tph-dir-type {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 3px 8px !important;
	background: #f0f2ff !important;
	color: #1e1e5e !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: .06em !important;
	text-transform: uppercase !important;
	border-radius: 4px !important;
	white-space: nowrap !important;
	flex-shrink: 0 !important;
	margin-top: 2px !important;
}

/* Review type gets yellow accent */
.tph-dir-card .tph-dir-type:has-text, .tph-dir-card[data-type="Review"] .tph-dir-type, .tph-dir-card .tph-dir-type.review {
	background: #fff8e1 !important;
	color: #b8860b !important;
}

/* Article title */
.tph-dir-card .tph-dir-title {
	font-size: 13.5px !important;
	font-weight: 600 !important;
	color: #1e1e5e !important;
	line-height: 1.45 !important;
	text-decoration: none !important;
	flex: 1 !important;
}

.tph-dir-card:hover .tph-dir-title {
	color: #f6b820 !important;
}

/* Arrow icon */
.tph-dir-card .tph-dir-arrow {
	color: #c0c8d8 !important;
	font-size: 14px !important;
	flex-shrink: 0 !important;
	margin-top: 2px !important;
	transition: color .2s ease, transform .2s ease !important;
}

.tph-dir-card:hover .tph-dir-arrow {
	color: #f6b820 !important;
	transform: translateX(3px) !important;
}

/* ── 4. INSIGHT BOX — ENSURE WHITE TEXT (belt + suspenders) ── */
.tph-insight-box, .tph-insight-box p, .tph-insight-box li, .tph-insight-box span, .tph-insight-box h2, .tph-insight-box h3, .tph-insight-box h4 {
	color: #fff !important;
}

/* ── 5. BREADCRUMB — WHITE ON NAVY HERO ── */
.tph-breadcrumb, .tph-breadcrumb a, .tph-breadcrumb span, .tph-breadcrumb *, .tph-hero .tph-breadcrumb, .tph-hero .tph-breadcrumb a, .tph-hero .tph-breadcrumb span {
	color: rgba(255, 255, 255, .85) !important;
}

.tph-breadcrumb a:hover {
	color: #f6b820 !important;
}

/* Separator arrow */
.tph-breadcrumb .tph-sep {
	color: rgba(255, 255, 255, .5) !important;
}

/* ── 6. CALLOUT BOXES — WHITE TEXT ON NAVY ── */
.tph-callout, .tph-callout p, .tph-callout h3, .tph-callout h4, .tph-callout span, .tph-callout li {
	color: #fff !important;
}

/* ── 7. SECTION SPACING CLEANUP — REDUCE EXCESSIVE GAPS ── */

/* Elementor sections inside the content area */
.tph-container .elementor-section {
	padding-top: 40px !important;
	padding-bottom: 40px !important;
}

/* Reduce the gap between consideration cards and featured software */
.tph-consideration-section {
	padding-bottom: 48px !important;
}

.tph-software-section {
	padding-top: 48px !important;
}

/* ── 8. PROS/CONS COLUMNS — BETTER WIDTH DISTRIBUTION ── */
.tph-pros-cons {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 0 !important;
	width: 100% !important;
}

.tph-pros-col, .tph-cons-col {
	padding: 20px 24px !important;
	min-width: 0 !important;
}

.tph-pros-col li, .tph-cons-col li {
	font-size: 14px !important;
	line-height: 1.6 !important;
	word-break: break-word !important;
}

/* ── 9. MOBILE RESPONSIVE ── */
@media (max-width: 768px) {
	.tph-dir-grid {
		grid-template-columns: 1fr !important;
	}
	
	.tph-faq-item h3 {
		font-size: 14px !important;
		padding: 16px 18px !important;
	}
	
	.tph-pros-cons {
		grid-template-columns: 1fr !important;
	}
	
	.tph-pros-col, .tph-cons-col {
		padding: 16px 18px !important;
	}
}

/* ============================================================
   TPH MOBILE + LAYOUT OVERHAUL v5.0
   Targets actual HTML structure found in child pages
   ============================================================ */

/* ── 1. FIX ORPHANED <main> TAG ── */

/* The <p><main></p> renders as a visible empty paragraph */
.tph-container p:empty, .tph-container p main, .tph-container > p:has(main) {
	display: none !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Belt + suspenders: hide any main tag inside a p tag */
p > main {
	display: none !important;
}

/* Also hide any empty p tags that are direct children of tph-container */
.tph-container > p:empty {
	display: none !important;
	height: 0 !important;
	margin: 0 !important;
}

/* ── 2. TPH-CONTAINER — CENTERED MAX-WIDTH ── */
.tph-container {
	max-width: 1200px !important;
	margin: 0 auto !important;
	padding: 0 clamp(16px, 4vw, 48px) !important;
	box-sizing: border-box !important;
	width: 100% !important;
}

/* ── 3. HERO — FULL-WIDTH SINGLE COLUMN (child pages have no sidebar) ── */
.tph-container .tph-hero {
	background: linear-gradient(135deg, #14144a 0%, #1e1e5e 50%, #252580 100%) !important;
	padding: clamp(32px, 5vw, 64px) clamp(24px, 4vw, 56px) clamp(40px, 6vw, 72px) !important;
	margin: 0 -clamp(16px, 4vw, 48px) !important;
	border-radius: 0 !important;
	position: relative !important;
	overflow: hidden !important;
}

.tph-container .tph-hero::before {
	content: "" !important;
	position: absolute !important;
	top: -30% !important;
	right: -5% !important;
	width: 500px !important;
	height: 500px !important;
	background: radial-gradient(circle, rgba(246, 184, 32, .07) 0%, transparent 70%) !important;
	pointer-events: none !important;
}

/* Hero h1 — premium editorial sizing */
.tph-container .tph-hero h1 {
	font-family: "Barlow Condensed", "Impact", sans-serif !important;
	font-size: clamp(28px, 4.5vw, 52px) !important;
	font-weight: 800 !important;
	line-height: 1.08 !important;
	color: #fff !important;
	text-transform: uppercase !important;
	letter-spacing: -.01em !important;
	margin: 0 0 20px !important;
	max-width: 800px !important;
}

/* Hero body text */
.tph-container .tph-hero p {
	font-family: "DM Sans", "Inter", sans-serif !important;
	font-size: clamp(15px, 1.8vw, 17px) !important;
	line-height: 1.7 !important;
	color: rgba(255, 255, 255, .88) !important;
	max-width: 700px !important;
	margin: 0 0 14px !important;
}

/* Hero stats list */
.tph-container .tph-hero ul {
	list-style: none !important;
	padding: 0 !important;
	margin: 20px 0 0 !important;
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
	gap: 8px !important;
}

.tph-container .tph-hero ul li {
	font-family: "DM Sans", "Inter", sans-serif !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: rgba(255, 255, 255, .85) !important;
	padding: 6px 0 6px 20px !important;
	position: relative !important;
	border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
}

.tph-container .tph-hero ul li::before {
	content: "›" !important;
	position: absolute !important;
	left: 0 !important;
	color: #f6b820 !important;
	font-weight: 700 !important;
	font-size: 16px !important;
}

.tph-container .tph-hero ul li strong {
	color: #f6b820 !important;
}

/* ── 4. SCORE BOX — PREMIUM VISUAL BADGE ── */
.tph-score-box {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: #1e1e5e !important;
	color: #f6b820 !important;
	font-family: "Barlow Condensed", "Impact", sans-serif !important;
	font-size: clamp(36px, 5vw, 56px) !important;
	font-weight: 800 !important;
	letter-spacing: -.02em !important;
	padding: 20px 36px !important;
	border-radius: 12px !important;
	border: 3px solid #f6b820 !important;
	margin: 16px 0 20px !important;
	box-shadow: 0 8px 32px rgba(30, 30, 94, .18) !important;
	min-width: 160px !important;
}

/* Score section layout */
section.tph-section:has(.tph-score-box) {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	padding: 32px 0 !important;
	border-bottom: 1px solid #e5e7eb !important;
	margin-bottom: 32px !important;
}

section.tph-section:has(.tph-score-box) h2 {
	font-family: "Barlow Condensed", "Impact", sans-serif !important;
	font-size: clamp(18px, 2.5vw, 26px) !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	color: #1e1e5e !important;
	letter-spacing: .02em !important;
	margin: 0 0 8px !important;
}

section.tph-section:has(.tph-score-box) p {
	font-size: 15px !important;
	line-height: 1.7 !important;
	color: #4b5563 !important;
	max-width: 680px !important;
	margin: 0 !important;
}

/* ── 5. PROS/CONS TABLE — PREMIUM 2-COLUMN CARD LAYOUT ── */

/* Target the actual <table> inside .tph-pros-cons section */
section.tph-pros-cons {
	margin: 40px 0 !important;
}

section.tph-pros-cons h2 {
	font-family: "Barlow Condensed", "Impact", sans-serif !important;
	font-size: clamp(20px, 3vw, 28px) !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	color: #1e1e5e !important;
	margin: 0 0 24px !important;
	letter-spacing: -.01em !important;
}

/* Hide the default table borders and make it a proper 2-column layout */
section.tph-pros-cons table {
	width: 100% !important;
	border-collapse: separate !important;
	border-spacing: 16px !important;
	table-layout: fixed !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

section.tph-pros-cons table thead {
	display: none !important;
}

section.tph-pros-cons table tbody {
	display: block !important;
	width: 100% !important;
}

section.tph-pros-cons table tbody tr {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 20px !important;
	border: none !important;
	background: transparent !important;
}

section.tph-pros-cons table tbody tr:hover {
	background: transparent !important;
}

/* Pros column */
section.tph-pros-cons table tbody td:first-child {
	background: #d1fae5 !important;
	border: 1px solid rgba(5, 150, 105, .25) !important;
	border-radius: 12px !important;
	padding: 24px 28px !important;
	vertical-align: top !important;
	position: relative !important;
}

section.tph-pros-cons table tbody td:first-child::before {
	content: "✓ PROS" !important;
	display: block !important;
	font-family: "DM Sans", sans-serif !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	letter-spacing: .1em !important;
	text-transform: uppercase !important;
	color: #059669 !important;
	margin-bottom: 14px !important;
	padding-bottom: 10px !important;
	border-bottom: 1px solid rgba(5, 150, 105, .2) !important;
}

/* Cons column */
section.tph-pros-cons table tbody td:last-child {
	background: #fee2e2 !important;
	border: 1px solid rgba(220, 38, 38, .2) !important;
	border-radius: 12px !important;
	padding: 24px 28px !important;
	vertical-align: top !important;
	position: relative !important;
}

section.tph-pros-cons table tbody td:last-child::before {
	content: "✗ CONS" !important;
	display: block !important;
	font-family: "DM Sans", sans-serif !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	letter-spacing: .1em !important;
	text-transform: uppercase !important;
	color: #dc2626 !important;
	margin-bottom: 14px !important;
	padding-bottom: 10px !important;
	border-bottom: 1px solid rgba(220, 38, 38, .15) !important;
}

/* Pros/Cons list items */
section.tph-pros-cons table td ul {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

section.tph-pros-cons table td li {
	font-family: "DM Sans", "Inter", sans-serif !important;
	font-size: 14px !important;
	line-height: 1.6 !important;
	color: #374151 !important;
	padding: 5px 0 5px 22px !important;
	position: relative !important;
	border-bottom: 1px solid rgba(0, 0, 0, .05) !important;
}

section.tph-pros-cons table td li:last-child {
	border-bottom: none !important;
}

section.tph-pros-cons table tbody td:first-child li::before {
	content: "✓" !important;
	position: absolute !important;
	left: 0 !important;
	color: #059669 !important;
	font-weight: 700 !important;
	font-size: 13px !important;
}

section.tph-pros-cons table tbody td:last-child li::before {
	content: "–" !important;
	position: absolute !important;
	left: 0 !important;
	color: #dc2626 !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	line-height: 1.3 !important;
}

section.tph-pros-cons table td li strong {
	color: #1f2937 !important;
	font-weight: 700 !important;
}

/* ── 6. GENERAL CONTENT SECTIONS — TYPOGRAPHY ── */
.tph-container .tph-section {
	margin: 40px 0 !important;
}

.tph-container .tph-section h2 {
	font-family: "Barlow Condensed", "Impact", sans-serif !important;
	font-size: clamp(20px, 3vw, 28px) !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	color: #1e1e5e !important;
	letter-spacing: -.01em !important;
	margin: 0 0 16px !important;
	line-height: 1.1 !important;
}

.tph-container .tph-section h3 {
	font-family: "DM Sans", "Inter", sans-serif !important;
	font-size: clamp(16px, 2vw, 19px) !important;
	font-weight: 700 !important;
	color: #1e1e5e !important;
	margin: 24px 0 10px !important;
}

.tph-container .tph-section p {
	font-family: "DM Sans", "Inter", sans-serif !important;
	font-size: clamp(15px, 1.6vw, 16.5px) !important;
	line-height: 1.75 !important;
	color: #374151 !important;
	max-width: 72ch !important;
	margin: 0 0 16px !important;
}

.tph-container .tph-section ul, .tph-container .tph-section ol {
	font-family: "DM Sans", "Inter", sans-serif !important;
	font-size: clamp(14px, 1.5vw, 15.5px) !important;
	line-height: 1.7 !important;
	color: #374151 !important;
	padding-left: 24px !important;
	margin: 0 0 16px !important;
}

.tph-container .tph-section li {
	margin-bottom: 8px !important;
}

/* ── 7. PRICING TABLE — MOBILE SCROLL WRAPPER ── */

/* Wrap any table that's NOT the pros/cons table */
.tph-container .tph-section:not(.tph-pros-cons) table {
	width: 100% !important;
	min-width: 600px !important;
	border-collapse: collapse !important;
	font-family: "DM Sans", "Inter", sans-serif !important;
	font-size: 14px !important;
	background: #fff !important;
	border-radius: 10px !important;
	overflow: hidden !important;
	box-shadow: 0 2px 12px rgba(30, 30, 94, .08) !important;
}

.tph-container .tph-section:not(.tph-pros-cons) table thead th {
	background: #1e1e5e !important;
	color: #fff !important;
	font-family: "DM Sans", "Inter", sans-serif !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: .07em !important;
	text-transform: uppercase !important;
	padding: 14px 16px !important;
	text-align: left !important;
	border: none !important;
	white-space: nowrap !important;
}

.tph-container .tph-section:not(.tph-pros-cons) table tbody td {
	padding: 12px 16px !important;
	color: #374151 !important;
	border-bottom: 1px solid #f3f4f6 !important;
	vertical-align: top !important;
	line-height: 1.5 !important;
}

.tph-container .tph-section:not(.tph-pros-cons) table tbody tr:hover {
	background: #f9fafb !important;
}

/* Scroll wrapper for pricing tables */
.tph-container .tph-section:not(.tph-pros-cons) .tph-table-wrap, .tph-container .tph-section:not(.tph-pros-cons) table {
	overflow-x: auto !important;
	-webkit-overflow-scrolling: touch !important;
	display: block !important;
}

/* ── 8. COMPACT CTA — PREMIUM STYLING ── */
.tph-compact-cta {
	background: linear-gradient(135deg, #1e1e5e 0%, #252580 100%) !important;
	border-radius: 16px !important;
	padding: clamp(24px, 4vw, 40px) clamp(24px, 4vw, 48px) !important;
	margin: 48px 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 24px !important;
	flex-wrap: wrap !important;
	box-shadow: 0 8px 32px rgba(30, 30, 94, .2) !important;
}

.tph-compact-cta-headline {
	font-family: "Barlow Condensed", "Impact", sans-serif !important;
	font-size: clamp(20px, 3vw, 28px) !important;
	font-weight: 800 !important;
	color: #fff !important;
	text-transform: uppercase !important;
	margin: 0 0 6px !important;
	letter-spacing: -.01em !important;
}

.tph-compact-cta-text p {
	font-family: "DM Sans", "Inter", sans-serif !important;
	font-size: 14px !important;
	color: rgba(255, 255, 255, .8) !important;
	margin: 0 !important;
	line-height: 1.5 !important;
}

.tph-compact-cta-actions {
	display: flex !important;
	gap: 12px !important;
	flex-wrap: wrap !important;
	flex-shrink: 0 !important;
}

.tph-compact-cta-note {
	font-family: "DM Sans", "Inter", sans-serif !important;
	font-size: 11px !important;
	color: rgba(255, 255, 255, .55) !important;
	margin-top: 6px !important;
}

/* ── 9. FAQ — PREMIUM ACCORDION ── */
.tph-faq-section {
	margin: 48px 0 !important;
}

.tph-faq-section > h2 {
	font-family: "Barlow Condensed", "Impact", sans-serif !important;
	font-size: clamp(20px, 3vw, 28px) !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	color: #1e1e5e !important;
	letter-spacing: -.01em !important;
	margin: 0 0 8px !important;
}

.tph-faq-section > p {
	font-size: 14px !important;
	color: #6b7280 !important;
	margin: 0 0 24px !important;
}

.tph-faq-list {
	border: 1px solid #e5e7eb !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	box-shadow: 0 2px 8px rgba(30, 30, 94, .06) !important;
}

.tph-faq-item {
	border-bottom: 1px solid #e5e7eb !important;
}

.tph-faq-item:last-child {
	border-bottom: none !important;
}

.tph-faq-item h3 {
	font-family: "DM Sans", "Inter", sans-serif !important;
	font-size: clamp(14px, 1.6vw, 16px) !important;
	font-weight: 600 !important;
	color: #1e1e5e !important;
	padding: 20px 56px 20px 24px !important;
	margin: 0 !important;
	cursor: pointer !important;
	position: relative !important;
	line-height: 1.4 !important;
	transition: background .15s !important;
	user-select: none !important;
}

.tph-faq-item h3:hover {
	background: #f8f9ff !important;
}

/* Plus/minus indicator */
.tph-faq-item h3::after {
	content: "+" !important;
	position: absolute !important;
	right: 20px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 28px !important;
	height: 28px !important;
	background: #f3f4f6 !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 18px !important;
	font-weight: 400 !important;
	color: #1e1e5e !important;
	line-height: 28px !important;
	text-align: center !important;
	transition: background .15s, color .15s !important;
}

.tph-faq-item.open h3::after {
	content: "−" !important;
	background: #1e1e5e !important;
	color: #f6b820 !important;
}

.tph-faq-item.open h3 {
	background: #f8f9ff !important;
	border-bottom: 1px solid #e5e7eb !important;
}

.tph-faq-answer {
	display: none !important;
	padding: 20px 24px !important;
	font-family: "DM Sans", "Inter", sans-serif !important;
	font-size: 14.5px !important;
	line-height: 1.75 !important;
	color: #374151 !important;
	background: #fafbff !important;
}

.tph-faq-item.open .tph-faq-answer {
	display: block !important;
}

/* Hide the empty toggle button */
.tph-faq-toggle {
	display: none !important;
}

/* ── 10. STICKY MOBILE CTA ── */
.tph-sticky-cta {
	position: fixed !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	z-index: 9999 !important;
	background: #1e1e5e !important;
	padding: 12px 20px !important;
	display: none !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	box-shadow: 0 -4px 20px rgba(30, 30, 94, .25) !important;
}

.tph-sticky-cta p, .tph-sticky-cta span {
	color: rgba(255, 255, 255, .9) !important;
	font-size: 13px !important;
	margin: 0 !important;
}

.tph-sticky-cta a {
	background: #f6b820 !important;
	color: #1e1e5e !important;
	font-weight: 700 !important;
	padding: 10px 20px !important;
	border-radius: 6px !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	font-size: 13px !important;
	flex-shrink: 0 !important;
}

.tph-sticky-cta-dismiss {
	background: none !important;
	border: none !important;
	color: rgba(255, 255, 255, .5) !important;
	font-size: 20px !important;
	cursor: pointer !important;
	padding: 0 4px !important;
	flex-shrink: 0 !important;
}

/* ── 11. MOBILE RESPONSIVE — 768px ── */
@media (max-width: 768px) {
	/* Container */
	.tph-container {
		padding: 0 16px !important;
	}
	
	/* Hero */
	.tph-container .tph-hero {
		margin: 0 -16px !important;
		padding: 28px 20px 36px !important;
	}
	
	.tph-container .tph-hero h1 {
		font-size: clamp(24px, 7vw, 36px) !important;
	}
	
	.tph-container .tph-hero ul {
		grid-template-columns: 1fr !important;
	}
	
	/* Score box */
	.tph-score-box {
		font-size: 40px !important;
		padding: 16px 28px !important;
		min-width: 120px !important;
	}
	
	/* Pros/Cons — STACK ON MOBILE */
	section.tph-pros-cons table tbody tr {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
	}
	
	section.tph-pros-cons table tbody td:first-child, section.tph-pros-cons table tbody td:last-child {
		padding: 20px !important;
	}
	
	/* Pricing table — horizontal scroll */
	.tph-container .tph-section:not(.tph-pros-cons) table {
		min-width: 500px !important;
		font-size: 13px !important;
	}
	
	.tph-container .tph-section:not(.tph-pros-cons) table thead th, .tph-container .tph-section:not(.tph-pros-cons) table tbody td {
		padding: 10px 12px !important;
	}
	
	/* Directory grid — single column */
	.tph-dir-grid {
		grid-template-columns: 1fr !important;
	}
	
	/* FAQ */
	.tph-faq-item h3 {
		font-size: 14px !important;
		padding: 16px 52px 16px 18px !important;
	}
	
	/* CTA */
	.tph-compact-cta {
		flex-direction: column !important;
		align-items: flex-start !important;
		padding: 24px 20px !important;
	}
	
	.tph-compact-cta-actions {
		width: 100% !important;
	}
	
	.tph-compact-cta-actions a {
		width: 100% !important;
		justify-content: center !important;
		text-align: center !important;
	}
	
	/* Sticky CTA — show on mobile */
	.tph-sticky-cta {
		display: flex !important;
	}
	
	/* Consideration grid — 2 columns on tablet, 1 on phone */
	.tph-considerations-grid, .tph-4col-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	
	/* Hub hero grid — stack on mobile */
	.tph-hero-inner {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}
	
	.tph-hero-sidebar, .tph-hero-card, .tph-quick-picks {
		display: none !important;
	}
}

/* ── 12. MOBILE RESPONSIVE — 480px (small phones) ── */
@media (max-width: 480px) {
	.tph-container .tph-hero h1 {
		font-size: clamp(22px, 8vw, 30px) !important;
	}
	
	.tph-considerations-grid, .tph-4col-grid {
		grid-template-columns: 1fr !important;
	}
	
	.tph-dir-card {
		padding: 12px 14px !important;
	}
	
	.tph-dir-card .tph-dir-title {
		font-size: 13px !important;
	}
	
	.tph-score-box {
		font-size: 36px !important;
		padding: 14px 24px !important;
	}
	
	section.tph-pros-cons table tbody td:first-child, section.tph-pros-cons table tbody td:last-child {
		padding: 16px !important;
	}
	
	section.tph-pros-cons table td li {
		font-size: 13px !important;
	}
}

/* ── 13. TABLET RESPONSIVE — 1024px ── */
@media (max-width: 1024px) {
	.tph-hero-inner {
		grid-template-columns: 1fr 280px !important;
		gap: 32px !important;
	}
	
	.tph-considerations-grid, .tph-4col-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	
	.tph-dir-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* ── 14. REMOVE FIND-A-TAX-PRO WIDGET ── */

/* Hide the "Find a Tax Professional Near You" Elementor section */
.elementor-section:has(.tph-find-pro), .elementor-widget:has(.tph-find-pro), [class*="find-a-tax"], [class*="find-tax-pro"], .tph-find-pro-section, .tph-find-pro {
	display: none !important;
}

/* Also target by heading text content if possible */
.elementor-widget-heading:has(h2:contains("Find a Tax Professional")), .elementor-widget-heading:has(h3:contains("Find a Tax Professional")) {
	display: none !important;
}

/* ── 15. GLOBAL BODY TYPOGRAPHY UPGRADE ── */
body .tph-container, body .tph-container * {
	-webkit-font-smoothing: antialiased !important;
	-moz-osx-font-smoothing: grayscale !important;
}

/* Ensure all body text in content is readable */
.tph-container p, .tph-container li, .tph-container td {
	font-size: clamp(14px, 1.5vw, 16px) !important;
	line-height: 1.7 !important;
}

/* ── 16. TABLE OVERFLOW WRAPPER — APPLY TO ALL PRICING TABLES ── */

/* Wrap tables in a scroll container */
.tph-section table:not(.tph-pros-cons table) {
	display: block !important;
	overflow-x: auto !important;
	-webkit-overflow-scrolling: touch !important;
	white-space: nowrap !important;
}

.tph-section table:not(.tph-pros-cons table) td, .tph-section table:not(.tph-pros-cons table) th {
	white-space: normal !important;
}

/* ============================================================
   TPH MOBILE FIX V2 — Targeted fixes for 5 identified issues
   Deployed: 2026-05-26
   ============================================================ */

/* ── 1. HIDE QUICK PICKS SIDEBAR ON MOBILE (hero overflow fix) ── */
@media (max-width: 768px) {
	/* Hub hero: hide the Quick Picks sidebar that bleeds off-screen */
	.tph-hero-inner {
		display: block !important;
		grid-template-columns: 1fr !important;
	}
	
	.tph-hero-sidebar, .tph-quick-picks, [class*="tph-hero"] > *:last-child:not(h1):not(p):not(ul):not(.tph-hero-meta):not(.tph-hero-badges):not(.tph-hero-inner):not(.tph-hero-left) {
		display: none !important;
	}
	
	/* Elementor hero columns: hide the right column (Quick Picks) on mobile */
	.tph-hero .elementor-column:last-child, .tph-hero-section .elementor-column:last-child, header.tph-hero .elementor-column:nth-child(2) {
		display: none !important;
	}
	
	/* Make hero full-width single column */
	.tph-hero, header.tph-hero {
		min-height: auto !important;
		padding: 32px 20px 28px !important;
	}
	
	.tph-hero h1, header.tph-hero h1 {
		font-size: clamp(1.6rem, 6vw, 2.2rem) !important;
		line-height: 1.15 !important;
		margin-bottom: 16px !important;
	}
	
	.tph-hero p, header.tph-hero p {
		font-size: 1rem !important;
		line-height: 1.6 !important;
		margin-bottom: 16px !important;
	}
	
	/* Hero stats list */
	.tph-hero ul, header.tph-hero ul {
		padding-left: 0 !important;
		margin: 0 !important;
	}
	
	.tph-hero ul li, header.tph-hero ul li {
		font-size: .9rem !important;
		margin-bottom: 8px !important;
		line-height: 1.5 !important;
	}
}

/* ── 2. SCORE BOX — CENTERED + FULL-WIDTH ON MOBILE ── */
@media (max-width: 768px) {
	.tph-score-box {
		display: block !important;
		width: auto !important;
		max-width: 280px !important;
		margin: 0 auto 24px auto !important;
		text-align: center !important;
		padding: 20px 28px !important;
	}
	
	/* Score section: center-align everything */
	section.tph-section:has(.tph-score-box), .tph-section .tph-score-box, .elementor-widget-container:has(.tph-score-box) {
		text-align: center !important;
	}
	
	/* Score heading */
	.tph-section h2:first-child {
		text-align: left !important;
	}
}

/* ── 3. REDUCE GAP BETWEEN SCORE SECTION AND PROS/CONS ── */
@media (max-width: 768px) {
	/* Reduce Elementor section padding on mobile */
	.elementor-section.elementor-top-section {
		padding-top: 24px !important;
		padding-bottom: 24px !important;
	}
	
	/* Specifically target the gap between score and pros/cons sections */
	.tph-section {
		padding: 24px 0 !important;
		margin-bottom: 0 !important;
	}
	
	.tph-container {
		padding: 0 16px !important;
	}
}

/* ── 4. PRICING TABLE — HORIZONTAL SCROLL + BETTER MOBILE LAYOUT ── */
@media (max-width: 768px) {
	/* Wrap all tables in a scroll container */
	.tph-section table, .tph-container table, .entry-content table, .elementor-widget-text-editor table {
		display: block !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
		width: 100% !important;
		max-width: 100% !important;
		border-collapse: collapse !important;
		font-size: .82rem !important;
	}
	
	/* Table cells: minimum width to prevent extreme cramping */
	.tph-section table th, .tph-section table td, .tph-container table th, .tph-container table td, .entry-content table th, .entry-content table td {
		min-width: 120px !important;
		padding: 8px 10px !important;
		font-size: .82rem !important;
		line-height: 1.4 !important;
		white-space: normal !important;
		word-break: break-word !important;
	}
	
	/* First column (product name) can be narrower */
	.tph-section table td:first-child, .tph-section table th:first-child, .entry-content table td:first-child, .entry-content table th:first-child {
		min-width: 100px !important;
		font-weight: 600 !important;
	}
	
	/* Add scroll hint indicator */
	.tph-section table::after, .entry-content table::after {
		content: "" !important;
	}
	
	/* Pros/cons table: stack on mobile */
	section.tph-pros-cons table, .tph-section.tph-pros-cons table {
		display: block !important;
		overflow-x: visible !important;
	}
	
	section.tph-pros-cons table thead, section.tph-pros-cons table tbody, section.tph-pros-cons table tr, .tph-section.tph-pros-cons table thead, .tph-section.tph-pros-cons table tbody, .tph-section.tph-pros-cons table tr {
		display: block !important;
		width: 100% !important;
	}
	
	section.tph-pros-cons table th, section.tph-pros-cons table td, .tph-section.tph-pros-cons table th, .tph-section.tph-pros-cons table td {
		display: block !important;
		width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
	}
	
	/* Pros column: green tint */
	section.tph-pros-cons table td:first-child, .tph-section.tph-pros-cons table td:first-child {
		background: #f0fdf4 !important;
		border-left: 4px solid #22c55e !important;
		border-radius: 8px 8px 0 0 !important;
		padding: 16px !important;
		margin-bottom: 4px !important;
	}
	
	/* Cons column: red tint */
	section.tph-pros-cons table td:last-child, .tph-section.tph-pros-cons table td:last-child {
		background: #fff1f2 !important;
		border-left: 4px solid #ef4444 !important;
		border-radius: 0 0 8px 8px !important;
		padding: 16px !important;
	}
	
	/* Pros/cons table headers */
	section.tph-pros-cons table th:first-child::before, .tph-section.tph-pros-cons table th:first-child::before {
		content: "✓ " !important;
		color: #22c55e !important;
		font-weight: 700 !important;
	}
	
	section.tph-pros-cons table th:last-child::before, .tph-section.tph-pros-cons table th:last-child::before {
		content: "✗ " !important;
		color: #ef4444 !important;
		font-weight: 700 !important;
	}
}

/* ── 5. BREADCRUMB — BETTER VISIBILITY ON MOBILE ── */
@media (max-width: 768px) {
	.tph-breadcrumb {
		font-size: .78rem !important;
		padding: 10px 16px !important;
		opacity: 1 !important;
		letter-spacing: .02em !important;
	}
	
	.tph-breadcrumb a, .tph-breadcrumb span {
		color: rgba(255, 255, 255, .9) !important;
		font-size: .78rem !important;
	}
	
	/* Truncate long breadcrumb paths on mobile */
	.tph-breadcrumb {
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		max-width: 100% !important;
	}
}

/* ── GLOBAL MOBILE POLISH ── */
@media (max-width: 768px) {
	/* Prevent any horizontal overflow on the entire page */
	.tph-container, .tph-section, .tph-hero, .tph-callout, .tph-insight-box, .tph-score-box, .tph-faq-section, .tph-dir-section {
		max-width: 100% !important;
		overflow-x: hidden !important;
		box-sizing: border-box !important;
	}
	
	/* Ensure all images are responsive */
	.tph-container img, .tph-section img {
		max-width: 100% !important;
		height: auto !important;
	}
	
	/* Comparison table on hub pages: horizontal scroll */
	.tph-comparison-table {
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
		display: block !important;
	}
	
	.tph-comparison-table table {
		min-width: 600px !important;
		font-size: .8rem !important;
	}
	
	/* Dir card grid: single column on mobile */
	.tph-dir-grid {
		grid-template-columns: 1fr !important;
		gap: 8px !important;
	}
	
	.tph-dir-card {
		padding: 12px 14px !important;
	}
	
	/* FAQ section: full-width items */
	.tph-faq-item {
		padding: 16px !important;
	}
	
	.tph-faq-item h3 {
		font-size: .95rem !important;
		padding-right: 32px !important;
	}
	
	/* Consideration cards: single column */
	.tph-consideration-grid, .tph-cards-grid, [class*="tph-grid"] {
		grid-template-columns: 1fr !important;
		gap: 12px !important;
	}
	
	/* CTA buttons: full-width on mobile */
	.tph-cta-button, .tph-callout a, .tph-hero a[href*="consultation"], .tph-hero a[href*="book"] {
		display: block !important;
		width: 100% !important;
		text-align: center !important;
		box-sizing: border-box !important;
	}
	
	/* Sticky mobile CTA: ensure it doesn't overlap content */
	.tph-sticky-cta {
		padding: 10px 16px !important;
		font-size: .85rem !important;
	}
	
	/* Section headings: scale down on mobile */
	.tph-section h2, .tph-container h2 {
		font-size: clamp(1.2rem, 5vw, 1.6rem) !important;
		line-height: 1.2 !important;
		margin-bottom: 16px !important;
	}
	
	.tph-section h3, .tph-container h3 {
		font-size: clamp(1rem, 4vw, 1.2rem) !important;
		line-height: 1.3 !important;
	}
	
	/* Body text: optimal reading size on mobile */
	.tph-section p, .tph-container p, .tph-insight-box p, .tph-callout p {
		font-size: 1rem !important;
		line-height: 1.65 !important;
	}
	
	/* Lists: better spacing on mobile */
	.tph-section ul li, .tph-container ul li {
		font-size: .95rem !important;
		line-height: 1.55 !important;
		margin-bottom: 8px !important;
	}
	
	/* Insight box: full-width on mobile */
	.tph-insight-box {
		padding: 20px 18px !important;
		margin: 16px 0 !important;
		border-radius: 8px !important;
	}
	
	/* Callout box: full-width on mobile */
	.tph-callout {
		padding: 24px 18px !important;
		border-radius: 8px !important;
	}
	
	/* Score section: reduce padding */
	.tph-section:has(.tph-score-box) {
		padding: 20px 0 !important;
	}
}

/* ── TABLET (768px - 1024px) ── */
@media (min-width: 769px) and (max-width: 1024px) {
	.tph-hero-inner {
		grid-template-columns: 1fr !important;
	}
	
	.tph-hero-sidebar, .tph-quick-picks {
		display: none !important;
	}
	
	.tph-dir-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	
	.tph-consideration-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	
	.tph-comparison-table {
		overflow-x: auto !important;
		display: block !important;
	}
}

/* ── PREVENT BODY OVERFLOW ON ALL SCREEN SIZES ── */
body {
	overflow-x: hidden !important;
}

.tph-container, .tph-section, .tph-hero, header.tph-hero {
	max-width: 100vw !important;
	box-sizing: border-box !important;
}

/* ============================================================
   TPH MOBILE FIX v3 — Targeted patches for remaining issues
   Deployed: 2026-05-25
   Issues addressed:
   1. Score box left-aligned → full-width on mobile
   2. Large gap between score section and pros/cons
   3. Quick Picks sidebar still partially visible in hub hero
   4. Breadcrumb text dim on navy hero (hub pages)
   5. Directory cards not full-width on mobile
   6. CTA button inside directory card too narrow
   ============================================================ */
@media (max-width: 768px) {
	/* ── 1. Score box: full-width on mobile ─────────────────── */
	.tph-score-box {
		width: 100% !important;
		max-width: 100% !important;
		min-width: unset !important;
		display: block !important;
		margin: 0 0 16px 0 !important;
		box-sizing: border-box !important;
	}
	
	/* Score section wrapper — remove flex that causes left-align */
	.tph-score-section, .tph-score-wrapper, section.tph-score-box, .entry-content .tph-score-box {
		width: 100% !important;
		max-width: 100% !important;
	}
	
	/* ── 2. Eliminate gap between score section and pros/cons ── */
	
	/* Remove excess bottom margin/padding from score section */
	.tph-score-box + *, .tph-score-section + .tph-pros-cons, .tph-score-section + section, section:has(.tph-score-box) + section {
		margin-top: 0 !important;
		padding-top: 24px !important;
	}
	
	/* Also target any empty paragraphs or divs between sections */
	.entry-content > p:empty, .entry-content > div:empty {
		display: none !important;
		margin: 0 !important;
		padding: 0 !important;
		height: 0 !important;
	}
	
	/* Reduce bottom margin on score box itself */
	.tph-score-box {
		margin-bottom: 0 !important;
	}
	
	/* Elementor widget sidebar in hero */
	
	/* Any element positioned at right side of hero */
	
	/* ── 3. Quick Picks sidebar: fully hidden in hub hero ───── */
	
	/* Hide the Quick Picks / sidebar element in the hero area */
	.tph-hero .tph-quick-picks, .tph-hero .tph-sidebar, .tph-hero aside, .tph-hero-inner .tph-quick-picks, .tph-hero-inner aside, .tph-hero-inner > *:last-child:not(.tph-hero-content), .tph-hero .elementor-widget-sidebar, .tph-hero .widget_area, .tph-hero [class*="quick-pick"], .tph-hero [class*="sidebar"], .tph-hero [class*="picks"] {
		display: none !important;
	}
	
	/* Ensure hero inner is truly single column */
	.tph-hero-inner {
		display: block !important;
		grid-template-columns: 1fr !important;
		flex-direction: column !important;
	}
	
	/* Hero content takes full width */
	.tph-hero-inner .tph-hero-content, .tph-hero-inner > div:first-child {
		width: 100% !important;
		max-width: 100% !important;
		padding-right: 0 !important;
	}
	
	/* Yoast breadcrumb in hero */
	
	/* ── 4. Breadcrumb text: white on navy hero ─────────────── */
	
	/* Hub page breadcrumbs inside the navy hero */
	.tph-hero .tph-breadcrumb, .tph-hero .tph-breadcrumb a, .tph-hero .tph-breadcrumb span, .tph-hero nav[aria-label="breadcrumb"], .tph-hero nav[aria-label="breadcrumb"] a, .tph-hero nav[aria-label="breadcrumb"] span, .tph-hero .breadcrumb, .tph-hero .breadcrumb a, .tph-hero .breadcrumb span, .tph-hero .yoast-breadcrumb, .tph-hero .yoast-breadcrumb a, .tph-hero .yoast-breadcrumb span {
		color: #fff !important;
		opacity: 1 !important;
	}
	
	/* Breadcrumb separator */
	.tph-hero .tph-breadcrumb .sep, .tph-hero .tph-breadcrumb > span:not(:last-child)::after {
		color: rgba(255, 255, 255, .7) !important;
	}
	
	/* ── 5. Directory cards: full-width on mobile ───────────── */
	.tph-dir-grid {
		display: flex !important;
		flex-direction: column !important;
		gap: 16px !important;
		padding: 0 !important;
	}
	
	.tph-dir-card {
		width: 100% !important;
		max-width: 100% !important;
		min-width: unset !important;
		box-sizing: border-box !important;
		margin: 0 !important;
	}
	
	/* Inner card content wrapper */
	.tph-dir-card > div, .tph-dir-card .card-inner, .tph-dir-card .tph-card-body {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
	
	/* ── 6. CTA button inside directory card: full-width ────── */
	.tph-dir-card .tph-btn, .tph-dir-card a.tph-btn, .tph-dir-card .tph-cta-btn, .tph-dir-card a[class*="btn"], .tph-dir-card .wp-block-button__link {
		width: 100% !important;
		display: block !important;
		text-align: center !important;
		box-sizing: border-box !important;
	}
	
	/* ── BONUS: Consideration grid single column ─────────────── */
	.tph-consideration-grid {
		grid-template-columns: 1fr !important;
		gap: 12px !important;
	}
	
	/* ── BONUS: Pricing table scroll container ───────────────── */
	.tph-pricing-table, section.tph-pricing, .entry-content table {
		display: block !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
		max-width: 100% !important;
	}
	
	/* ── BONUS: Ensure no element causes horizontal overflow ─── */
	.tph-hero, .tph-hero-inner, .tph-score-box, .tph-pros-cons, .tph-dir-grid, .tph-dir-card, .tph-faq-section, .tph-insight-box, .tph-callout {
		max-width: 100vw !important;
		overflow-x: hidden !important;
	}
}

/* ============================================================
   TPH MOBILE FIX v4 — Precision patches based on DOM inspection
   Deployed: 2026-05-25
   Issues addressed:
   1. .tph-hero-right / .tph-quick-picks: hide on mobile
   2. Score section gap: .tph-section containing score box has excess height
   3. Breadcrumb white text in hero (using exact .tph-breadcrumb class)
   ============================================================ */
@media (max-width: 768px) {
	/* ── 1. Hide Quick Picks sidebar on mobile ──────────────── */
	.tph-hero-right, .tph-quick-picks {
		display: none !important;
	}
	
	/* Hero inner: switch from grid/flex to block for single column */
	.tph-hero-inner {
		display: block !important;
	}
	
	/* Hero left takes full width */
	.tph-hero-left {
		width: 100% !important;
		max-width: 100% !important;
		padding-right: 0 !important;
		float: none !important;
	}
	
	/* ── 2. Fix score section gap ───────────────────────────── */
	
	/*
     The .tph-section containing the score box has height ~400px
     but the score box itself is only ~105px tall.
     The extra ~275px gap comes from the section's padding/min-height.
     Target: reduce the specific .tph-section that contains .tph-score-box
  */
	.tph-section:has(.tph-score-box) {
		padding-bottom: 16px !important;
		min-height: unset !important;
	}
	
	/* Also reduce top padding of the pros/cons section */
	.tph-pros-cons, .tph-section:has(.tph-pros-cons), section.tph-pros-cons {
		padding-top: 24px !important;
		margin-top: 0 !important;
	}
	
	/* ── 3. Breadcrumb: white text in hero ──────────────────── */
	.tph-hero .tph-breadcrumb, .tph-hero .tph-breadcrumb a, .tph-hero .tph-breadcrumb span, .tph-hero .tph-breadcrumb * {
		color: #fff !important;
		opacity: 1 !important;
	}
	
	/* ── 4. Score box: full-width (precise selector) ─────────── */
	.tph-section .tph-score-box {
		width: 100% !important;
		max-width: 100% !important;
		min-width: unset !important;
		box-sizing: border-box !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		display: block !important;
	}
	
	/* ── 5. Prevent any section from causing horizontal overflow */
	.tph-section {
		max-width: 100% !important;
		overflow-x: hidden !important;
		box-sizing: border-box !important;
	}
}

/* ============================================================
   TPH MOBILE FIX v5 — Critical fix: hero inner was hidden
   Deployed: 2026-05-25
   Issues addressed:
   1. CRITICAL: .tph-hero-inner was set to display:none by v2 fix
      — restore it to display:block and only hide .tph-hero-right
   2. Score section gap: reduce margin-top on .tph-pros-cons
   3. Score section: the section itself has extra height from content
      — reduce padding/margin on the score section
   ============================================================ */
@media (max-width: 768px) {
	/* ── 1. CRITICAL: Restore hero inner visibility ─────────── */
	
	/* The v2 fix accidentally set .tph-hero-inner to display:none
     via the grid-template-columns override. Fix it explicitly. */
	.tph-hero-inner {
		display: block !important;
		grid-template-columns: unset !important;
	}
	
	/* Only hide the right sidebar, not the whole inner wrapper */
	.tph-hero-right, .tph-quick-picks {
		display: none !important;
	}
	
	/* Hero left: full width, no float */
	.tph-hero-left {
		width: 100% !important;
		max-width: 100% !important;
		padding-right: 0 !important;
		float: none !important;
		display: block !important;
	}
	
	/* ── 2. Reduce gap between score section and pros/cons ───── */
	
	/* Score section: reduce bottom margin (was 32px margin-bottom) */
	.tph-section:has(.tph-score-box) {
		margin-bottom: 0 !important;
		padding-bottom: 16px !important;
	}
	
	/* Pros/cons section: reduce top margin (was 40px margin-top) */
	.tph-section.tph-pros-cons, .tph-pros-cons {
		margin-top: 0 !important;
		padding-top: 16px !important;
	}
	
	/* ── 3. Breadcrumb: ensure white text in hero ────────────── */
	.tph-hero .tph-breadcrumb, .tph-hero .tph-breadcrumb a, .tph-hero .tph-breadcrumb span, .tph-hero .tph-breadcrumb * {
		color: #fff !important;
		opacity: 1 !important;
	}
}

/* ============================================================
   TPH MOBILE FIX v6 — Fix hero inner hidden by v2 wildcard rule
   Deployed: 2026-05-25

   ROOT CAUSE: v2 fix had this rule:
     [class*="tph-hero"] > *:last-child:not(h1):not(p):not(ul):not(.tph-hero-meta):not(.tph-hero-badges):not(.tph-hero-inner):not(.tph-hero-left)
     { display: none !important; }
   This matches .tph-hero-inner (last child of .tph-hero) and hides it.

   FIX: Explicitly restore .tph-hero-inner with higher specificity.
   Also fix the score-to-pros gap by targeting the right elements.
   ============================================================ */
@media (max-width: 768px) {
	/* ── 1. CRITICAL: Restore hero inner with high specificity ── */
	
	/* Use .tph-hero.tph-hero to increase specificity above the wildcard */
	.tph-hero .tph-hero-inner, .tph-hero > .tph-hero-inner, div.tph-hero .tph-hero-inner, section.tph-hero .tph-hero-inner, header.tph-hero .tph-hero-inner {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
	}
	
	/* Restore hero left content */
	.tph-hero .tph-hero-left, .tph-hero .tph-hero-inner .tph-hero-left {
		display: block !important;
		visibility: visible !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	
	/* Restore H1 inside hero */
	.tph-hero h1, .tph-hero .tph-hero-inner h1, .tph-hero .tph-hero-left h1 {
		display: block !important;
		visibility: visible !important;
	}
	
	/* Keep hiding only the right sidebar */
	.tph-hero .tph-hero-right {
		display: none !important;
	}
	
	/* ── 2. Score gap: reduce section margins ────────────────── */
	
	/* The score section has margin-bottom:32px + pros has margin-top:40px = 72px gap */
	
	/* Plus the section itself has extra height from its content */
	
	/* Reduce both to tighten the layout */
	.tph-section:has(.tph-score-box) {
		margin-bottom: 8px !important;
		padding-bottom: 16px !important;
	}
	
	.tph-section.tph-pros-cons {
		margin-top: 8px !important;
		padding-top: 16px !important;
	}
	
	/* ── 3. Score box: full-width ────────────────────────────── */
	.tph-score-box {
		width: 100% !important;
		max-width: 100% !important;
		min-width: unset !important;
		display: block !important;
		margin: 0 0 16px 0 !important;
		box-sizing: border-box !important;
	}
}

/* ============================================================
   TPH BREADCRUMB VISIBILITY FIX
   Fixes: breadcrumb hard to read on dark navy hero background
   Applied: May 2026
   ============================================================ */

/* ── Breadcrumb INSIDE the hero (dark navy background) ──── */

/* Container */
.tph-hero .tph-breadcrumb, .tph-hero-inner .tph-breadcrumb, .tph-hero-left .tph-breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .02em;
	margin-bottom: 14px;
	opacity: 1 !important;
}

/* All text nodes and spans inside hero breadcrumb → white */
.tph-hero .tph-breadcrumb, .tph-hero .tph-breadcrumb span, .tph-hero .tph-breadcrumb > * {
	color: rgba(255, 255, 255, .75) !important;
}

/* Links inside hero breadcrumb → bright yellow, underlined on hover */
.tph-hero .tph-breadcrumb a, .tph-hero-inner .tph-breadcrumb a, .tph-hero-left .tph-breadcrumb a {
	color: #f6b820 !important;
	text-decoration: none !important;
	font-weight: 700 !important;
	border-bottom: 1px solid rgba(246, 184, 32, .4) !important;
	padding-bottom: 1px !important;
	transition: color .15s, border-color .15s !important;
}

.tph-hero .tph-breadcrumb a:hover, .tph-hero-inner .tph-breadcrumb a:hover {
	color: #ffd166 !important;
	border-bottom-color: rgba(255, 209, 102, .7) !important;
}

/* Separator ">" between breadcrumb items → white/muted */
.tph-hero .tph-breadcrumb {
	color: rgba(255, 255, 255, .5) !important;
}

/* ── Breadcrumb OUTSIDE the hero (white/light background) ── */

/* Child pages often show a breadcrumb above the hero on white bg */
.tph-breadcrumb:not(.tph-hero .tph-breadcrumb):not(.tph-hero-inner .tph-breadcrumb) {
	font-size: .8rem;
	font-weight: 600;
	color: #4a4a6a !important;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
	padding: 10px 0;
}

.tph-breadcrumb:not(.tph-hero .tph-breadcrumb):not(.tph-hero-inner .tph-breadcrumb) a {
	color: #1e1e5e !important;
	text-decoration: none !important;
	font-weight: 700 !important;
}

.tph-breadcrumb:not(.tph-hero .tph-breadcrumb):not(.tph-hero-inner .tph-breadcrumb) a:hover {
	color: #f6b820 !important;
	text-decoration: underline !important;
}

/* ── Mobile: slightly larger tap targets ─────────────────── */
@media (max-width: 768px) {
	.tph-hero .tph-breadcrumb, .tph-hero-inner .tph-breadcrumb, .tph-hero-left .tph-breadcrumb {
		font-size: .75rem !important;
		margin-bottom: 12px !important;
	}
	
	.tph-hero .tph-breadcrumb a, .tph-hero-inner .tph-breadcrumb a {
		padding: 2px 0 !important;
	}
}

/* ============================================================
   TPH BREADCRUMB VISIBILITY FIX v2
   Problem: .tph-hub-page a { color: #1E1E5E !important } was
   overriding all breadcrumb link colors inside the hero.
   Fix: Use 4-class specificity to beat the 1-class hub rule.
   Applied: May 2026
   ============================================================ */

/* ── Hub page: breadcrumb link inside dark navy hero ──────── */

/* 4-class specificity: beats .tph-hub-page a (1-class) */
.tph-hub-page .tph-hero .tph-breadcrumb a, .tph-hub-page .tph-hero .tph-breadcrumb a:link, .tph-hub-page .tph-hero .tph-breadcrumb a:visited, .tph-hub-page .tph-hero-inner .tph-breadcrumb a, .tph-hub-page .tph-hero-left .tph-breadcrumb a {
	color: #f6b820 !important;
	/* Uncle Kam yellow — pops on navy */
	text-decoration: none !important;
	font-weight: 700 !important;
	border-bottom: 1px solid rgba(246, 184, 32, .45) !important;
	padding-bottom: 1px !important;
}

.tph-hub-page .tph-hero .tph-breadcrumb a:hover, .tph-hub-page .tph-hero-inner .tph-breadcrumb a:hover {
	color: #ffd166 !important;
	border-bottom-color: rgba(255, 209, 102, .7) !important;
}

/* Separator text and plain text in breadcrumb → white/muted */
.tph-hub-page .tph-hero .tph-breadcrumb, .tph-hub-page .tph-hero-inner .tph-breadcrumb {
	color: rgba(255, 255, 255, .65) !important;
	font-size: .8rem !important;
	font-weight: 600 !important;
	letter-spacing: .01em !important;
}

/* Also target breadcrumb outside the hero on any page */

/* ── Child page: breadcrumb above hero on white background ── */

/* Child pages use .tph-child-page or no hub class */
.tph-child-page .tph-breadcrumb a, .tph-child-page .tph-breadcrumb a:link, .tph-child-page .tph-breadcrumb a:visited, .entry-content .tph-breadcrumb a, .page-content .tph-breadcrumb a {
	color: #1e1e5e !important;
	font-weight: 700 !important;
	text-decoration: none !important;
}

.tph-child-page .tph-breadcrumb a:hover {
	color: #f6b820 !important;
	text-decoration: underline !important;
}

/* Child page breadcrumb separator text */
.tph-child-page .tph-breadcrumb {
	color: #6b6b8a !important;
	font-size: .8rem !important;
	font-weight: 500 !important;
}

/* ============================================================
   TPH CATEGORY MAP — GRID SYMMETRY FIX
   Problem: 4-column fixed grid leaves 1 orphaned card with 7 items
   Fix: 3-column responsive grid (3+3+1, last card centered)
   Applied: May 2026
   ============================================================ */
.tph-category-map {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 14px !important;
}

/* Center the orphaned last card when count is not divisible by 3 */
.tph-category-map .tph-category-map__item:last-child:nth-child(3n+1) {
	grid-column: 2/3 !important;
}

/* Mobile: 2 columns */
@media (max-width: 600px) {
	.tph-category-map {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	
	.tph-category-map .tph-category-map__item:last-child:nth-child(3n+1) {
		grid-column: auto !important;
	}
	
	/* Center orphan in 2-col mobile */
	.tph-category-map .tph-category-map__item:last-child:nth-child(2n+1) {
		grid-column: 1/3 !important;
		max-width: 50% !important;
		margin: 0 auto !important;
	}
}

/* ── Tool card title links ─────────────────────────────────── */

/* Make the h3 title inside software cards look like a link */
.tph-software-card h3 a, .tph-software-card h4 a {
	color: inherit !important;
	text-decoration: none !important;
}

.tph-software-card h3 a:hover, .tph-software-card h4 a:hover {
	color: #f6b820 !important;
	text-decoration: underline !important;
}

/* ============================================================
   TPH PREMIUM LAYOUT FIX — GLOBAL
   Fixes: centering, container consistency, typography,
          pros/cons cards, table mobile, spacing
   Applied: May 2026
   Targets: .tph-hub-page, .tph-child-page (all page types)
   ============================================================ */

/* ── 1. UNIVERSAL CONTAINER SYSTEM ──────────────────────────
   All sections get the same max-width and centering.
   Remove the inconsistent negative margins that made some
   sections wider than others.
   ─────────────────────────────────────────────────────────── */
.tph-hub-page .tph-section, .tph-child-page .tph-section, .tph-hub-page .tph-hero, .tph-child-page .tph-hero {
	max-width: 1140px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 40px !important;
	padding-right: 40px !important;
	box-sizing: border-box !important;
	width: 100% !important;
}

/* Remove the negative margin "bleed" sections that break alignment */
.tph-hub-page .tph-section[style*="margin-left:-48px"], .tph-hub-page .tph-section[style*="margin-left: -48px"], .tph-child-page .tph-section[style*="margin-left:-48px"], .tph-child-page .tph-section[style*="margin-left: -48px"] {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Outer page wrapper — ensure no stray left-offset */
.tph-hub-page .elementor-section-wrap, .tph-child-page .elementor-section-wrap, .tph-hub-page .e-con-inner, .tph-child-page .e-con-inner {
	max-width: 1140px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* ── 2. TYPOGRAPHY ───────────────────────────────────────────
   Bump up body text, improve line-height, fix heading scale
   ─────────────────────────────────────────────────────────── */
.tph-hub-page, .tph-child-page {
	font-size: 17px !important;
	line-height: 1.65 !important;
}

.tph-hub-page p, .tph-child-page p {
	font-size: 17px !important;
	line-height: 1.65 !important;
	color: #333 !important;
}

.tph-hub-page h1, .tph-child-page h1 {
	font-size: clamp(30px, 4vw, 52px) !important;
	line-height: 1.1 !important;
}

.tph-hub-page h2, .tph-child-page h2 {
	font-size: clamp(24px, 3vw, 36px) !important;
	line-height: 1.2 !important;
}

.tph-hub-page h3, .tph-child-page h3 {
	font-size: clamp(18px, 2.2vw, 26px) !important;
	line-height: 1.25 !important;
}

/* ── 3. PROS / CONS — PREMIUM SIDE-BY-SIDE CARDS ────────────
   Replace the cramped table with two clean cards.
   On mobile, stack vertically.
   ─────────────────────────────────────────────────────────── */
.tph-pros-cons {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 24px !important;
	align-items: start !important;
	margin-top: 24px !important;
}

/* Individual card */
.tph-pros-cons .tph-pros, .tph-pros-cons .tph-cons {
	background: #fff !important;
	border-radius: 12px !important;
	box-shadow: 0 2px 16px rgba(30, 30, 94, .08) !important;
	padding: 28px 28px 24px !important;
	border: 1px solid #e9ecef !important;
}

/* Pros card — green accent top border */
.tph-pros-cons .tph-pros {
	border-top: 4px solid #22c55e !important;
}

/* Cons card — red accent top border */
.tph-pros-cons .tph-cons {
	border-top: 4px solid #ef4444 !important;
}

/* Card headings */
.tph-pros-cons .tph-pros h3, .tph-pros-cons .tph-pros h4, .tph-pros-cons .tph-pros .tph-pros-title {
	color: #16a34a !important;
	font-size: 18px !important;
	font-weight: 800 !important;
	margin: 0 0 16px !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}

.tph-pros-cons .tph-cons h3, .tph-pros-cons .tph-cons h4, .tph-pros-cons .tph-cons .tph-cons-title {
	color: #dc2626 !important;
	font-size: 18px !important;
	font-weight: 800 !important;
	margin: 0 0 16px !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}

/* List items */
.tph-pros-cons ul, .tph-pros-cons ol {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.tph-pros-cons .tph-pros li, .tph-pros-cons .tph-pros p {
	font-size: 15px !important;
	line-height: 1.6 !important;
	color: #333 !important;
	padding: 7px 0 7px 26px !important;
	border-bottom: 1px solid #f0f0f0 !important;
	position: relative !important;
}

.tph-pros-cons .tph-pros li:last-child, .tph-pros-cons .tph-pros p:last-child {
	border-bottom: none !important;
}

.tph-pros-cons .tph-pros li::before {
	content: "✓" !important;
	position: absolute !important;
	left: 0 !important;
	color: #22c55e !important;
	font-weight: 700 !important;
}

.tph-pros-cons .tph-cons li, .tph-pros-cons .tph-cons p {
	font-size: 15px !important;
	line-height: 1.6 !important;
	color: #333 !important;
	padding: 7px 0 7px 26px !important;
	border-bottom: 1px solid #f0f0f0 !important;
	position: relative !important;
}

.tph-pros-cons .tph-cons li:last-child, .tph-pros-cons .tph-cons p:last-child {
	border-bottom: none !important;
}

.tph-pros-cons .tph-cons li::before {
	content: "✗" !important;
	position: absolute !important;
	left: 0 !important;
	color: #ef4444 !important;
	font-weight: 700 !important;
}

/* ── 4. TABLES — MOBILE SCROLLABLE ──────────────────────────
   Wrap tables in a scroll container on mobile.
   On desktop, ensure they're readable.
   ─────────────────────────────────────────────────────────── */
.tph-hub-page table, .tph-child-page table {
	width: 100% !important;
	border-collapse: collapse !important;
	font-size: 15px !important;
}

.tph-hub-page table th, .tph-child-page table th {
	background: #1e1e5e !important;
	color: #fff !important;
	padding: 12px 16px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	text-align: left !important;
	white-space: nowrap !important;
}

.tph-hub-page table td, .tph-child-page table td {
	padding: 11px 16px !important;
	border-bottom: 1px solid #e9ecef !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	vertical-align: top !important;
}

.tph-hub-page table tr:nth-child(even) td, .tph-child-page table tr:nth-child(even) td {
	background: #f8f9fc !important;
}

/* Wrap tables in scroll container */
.tph-hub-page .tph-table-wrap, .tph-child-page .tph-table-wrap, .tph-hub-page .tph-comparison-table, .tph-child-page .tph-comparison-table {
	overflow-x: auto !important;
	-webkit-overflow-scrolling: touch !important;
	border-radius: 8px !important;
	box-shadow: 0 2px 12px rgba(30, 30, 94, .07) !important;
	border: 1px solid #e9ecef !important;
}

/* ── 5. SCORE BOX — FULL WIDTH, PREMIUM ─────────────────────*/
.tph-score-box {
	background: linear-gradient(135deg, #1e1e5e 0%, #2d2d7e 100%) !important;
	border-radius: 16px !important;
	padding: 36px 40px !important;
	color: #fff !important;
	box-shadow: 0 8px 32px rgba(30, 30, 94, .18) !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.tph-score-box .tph-score-number {
	font-size: clamp(48px, 6vw, 72px) !important;
	font-weight: 900 !important;
	color: #f6b820 !important;
	line-height: 1 !important;
}

/* ── 6. SOFTWARE CARDS — PREMIUM STYLING ────────────────────*/
.tph-software-card {
	background: #fff !important;
	border-radius: 12px !important;
	box-shadow: 0 2px 16px rgba(30, 30, 94, .08) !important;
	border: 1px solid #e9ecef !important;
	padding: 28px !important;
	transition: box-shadow .2s !important;
}

.tph-software-card:hover {
	box-shadow: 0 6px 28px rgba(30, 30, 94, .14) !important;
}

.tph-software-card--featured {
	border: 2px solid #f6b820 !important;
	box-shadow: 0 4px 24px rgba(246, 184, 32, .18) !important;
}

/* ── 7. SECTION SPACING ──────────────────────────────────────*/
.tph-hub-page .tph-section, .tph-child-page .tph-section {
	padding-top: 56px !important;
	padding-bottom: 56px !important;
}

.tph-hub-page .tph-section__title, .tph-child-page .tph-section__title {
	margin-bottom: 32px !important;
}

/* ── 8. CTA BUTTONS ──────────────────────────────────────────*/
.tph-hub-page .tph-cta-btn, .tph-child-page .tph-cta-btn, .tph-hub-page a[class*="cta-btn"], .tph-child-page a[class*="cta-btn"] {
	display: inline-block !important;
	background: #f6b820 !important;
	color: #1e1e5e !important;
	font-weight: 800 !important;
	padding: 14px 32px !important;
	border-radius: 6px !important;
	text-decoration: none !important;
	font-size: 16px !important;
	letter-spacing: .02em !important;
	box-shadow: 0 4px 16px rgba(246, 184, 32, .3) !important;
}

/* ── 9. FAQ SPACING ──────────────────────────────────────────*/
.tph-faq-item {
	border-bottom: 1px solid #e9ecef !important;
	padding: 18px 0 !important;
}

.tph-faq-question {
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
}

/* ── 10. RESPONSIVE BREAKPOINTS ─────────────────────────────*/
@media (max-width: 1024px) {
	.tph-hub-page .tph-section, .tph-child-page .tph-section, .tph-hub-page .tph-hero, .tph-child-page .tph-hero {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
}

@media (max-width: 768px) {
	/* Pros/cons stack on tablet/mobile */
	.tph-pros-cons {
		grid-template-columns: 1fr !important;
	}
	
	.tph-hub-page .tph-section, .tph-child-page .tph-section, .tph-hub-page .tph-hero, .tph-child-page .tph-hero {
		padding-left: 18px !important;
		padding-right: 18px !important;
		padding-top: 36px !important;
		padding-bottom: 36px !important;
	}
	
	/* Tables scroll on mobile */
	.tph-hub-page table, .tph-child-page table {
		min-width: 500px !important;
	}
	
	.tph-hub-page .tph-section > table, .tph-child-page .tph-section > table, .tph-hub-page .tph-section > .tph-table-wrap, .tph-child-page .tph-section > .tph-table-wrap {
		overflow-x: auto !important;
		display: block !important;
		width: 100% !important;
	}
	
	.tph-score-box {
		padding: 24px 20px !important;
	}
}

@media (max-width: 480px) {
	.tph-hub-page .tph-section, .tph-child-page .tph-section, .tph-hub-page .tph-hero, .tph-child-page .tph-hero {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
	
	.tph-pros-cons .tph-pros, .tph-pros-cons .tph-cons {
		padding: 20px 16px !important;
	}
}

/* ══════════════════════════════════════════════════════════════
   TPH BUTTON & ALIGNMENT FIX — v7
   Issues: 
   1. Card "View Review" button text invisible (navy on navy)
   2. CTA section buttons jumbled/stacked
   3. Quick Rankings sidebar overflow on mobile
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Card "View Review" button — white text on navy ── */
.tph-card-redesigned .tph-card-review-btn, .tph-software-card .tph-card-review-btn, a.tph-card-review-btn {
	color: #fff !important;
	background: #1e1e5e !important;
	border: none !important;
	padding: 10px 18px !important;
	border-radius: 6px !important;
	font-weight: 600 !important;
	font-size: .85rem !important;
	text-decoration: none !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	white-space: nowrap !important;
}

.tph-card-redesigned .tph-card-review-btn:hover, a.tph-card-review-btn:hover {
	background: #2a2a7a !important;
	color: #fff !important;
}

/* Visit Site button — outline style */
.tph-card-redesigned .tph-card-visit-btn, .tph-software-card .tph-card-visit-btn, a.tph-card-visit-btn {
	color: #1e1e5e !important;
	background: #fff !important;
	border: 1.5px solid #1e1e5e !important;
	padding: 10px 18px !important;
	border-radius: 6px !important;
	font-weight: 600 !important;
	font-size: .85rem !important;
	text-decoration: none !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	white-space: nowrap !important;
}

/* Button row — side by side */
.tph-card-redesigned .tph-card-footer, .tph-card-redesigned [class*="card-footer"], .tph-card-redesigned [class*="card-actions"], .tph-card-redesigned [class*="btn-row"] {
	display: flex !important;
	flex-direction: row !important;
	gap: 10px !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	margin-top: 12px !important;
}

/* ── 2. CTA section buttons — side by side, better contrast ── */
.tph-cta-section .elementor-button-wrapper, .tph-cta-section .elementor-widget-button {
	display: inline-block !important;
	width: auto !important;
	margin: 6px 8px !important;
}

.tph-cta-section .elementor-widget-container {
	text-align: center !important;
}

/* Make CTA buttons row */
.tph-cta-section .elementor-element .elementor-widget-wrap, .tph-cta-section .e-con-inner {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 12px !important;
}

/* Primary CTA button (Book Strategy Session) */
.tph-cta-section a.elementor-button[href*="strategy"], .tph-cta-section a.elementor-button[href*="consultation"] {
	background: #f6b820 !important;
	color: #1e1e5e !important;
	font-weight: 700 !important;
	padding: 14px 28px !important;
	border-radius: 8px !important;
	font-size: 1rem !important;
	border: none !important;
}

/* Secondary CTA button (Learn About Marketplace) */
.tph-cta-section a.elementor-button[href*="marketplace"], .tph-cta-section a.elementor-button[href*="learn"] {
	background: transparent !important;
	color: #fff !important;
	font-weight: 600 !important;
	padding: 14px 28px !important;
	border-radius: 8px !important;
	font-size: 1rem !important;
	border: 2px solid rgba(255, 255, 255, .5) !important;
}

.tph-cta-section a.elementor-button[href*="marketplace"]:hover, .tph-cta-section a.elementor-button[href*="learn"]:hover {
	border-color: #f6b820 !important;
	color: #f6b820 !important;
}

/* ── 3. Quick Rankings sidebar — prevent overflow ── */
.tph-quick-rankings, .tph-rankings-list, [class*="quick-rank"], [class*="rankings"] {
	overflow: hidden !important;
	max-width: 100% !important;
}

@media (max-width: 768px) {
	.tph-quick-rankings, .tph-rankings-list, [class*="quick-rank"], [class*="rankings"] {
		padding-left: 16px !important;
		padding-right: 16px !important;
		overflow-x: hidden !important;
	}
	
	/* CTA buttons stack neatly on mobile */
	.tph-cta-section a.elementor-button {
		width: 100% !important;
		max-width: 320px !important;
		text-align: center !important;
		display: block !important;
		margin: 6px auto !important;
	}
}

/* ============================================================
   TPH UI FIX — tph-cta section + tph-hub-links responsive
   Deployed: 2026-05-28
   ============================================================ */

/* ── tph-cta: "Ready to Optimize" styled card ─────────────── */
.tph-cta {
	background: #1e1e5e !important;
	border-radius: 12px !important;
	padding: 40px 48px !important;
	margin: 48px 0 !important;
	border-left: 4px solid #f6b820 !important;
}

.tph-cta h2 {
	font-family: "Barlow Condensed", sans-serif !important;
	font-size: clamp(1.5rem, 3vw, 2.2rem) !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	color: #fff !important;
	margin: 0 0 12px !important;
	letter-spacing: -.01em !important;
}

.tph-cta p {
	font-family: "DM Sans", sans-serif !important;
	font-size: .95rem !important;
	line-height: 1.65 !important;
	color: rgba(255, 255, 255, .82) !important;
	margin: 0 0 24px !important;
	max-width: 600px !important;
}

.tph-cta a.tph-btn, .tph-cta .tph-btn {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	background: #f6b820 !important;
	color: #1e1e5e !important;
	font-family: "DM Sans", sans-serif !important;
	font-size: .95rem !important;
	font-weight: 800 !important;
	padding: 14px 32px !important;
	border-radius: 6px !important;
	text-decoration: none !important;
	letter-spacing: .02em !important;
	transition: background .2s, transform .2s !important;
}

.tph-cta a.tph-btn:hover, .tph-cta .tph-btn:hover {
	background: #e0a800 !important;
	transform: translateY(-2px) !important;
}

/* ── tph-hub-links: Related Pages responsive grid ─────────── */
.tph-hub-links {
	background: #f8f9fa !important;
	border-radius: 12px !important;
	padding: 32px !important;
	margin: 40px 0 !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
}

/* Inner flex wrapper — stack on mobile, side-by-side on desktop */
.tph-hub-links > div {
	display: flex !important;
	align-items: flex-start !important;
	gap: 32px !important;
	flex-wrap: wrap !important;
}

/* Label + "Related Pages" heading column */
.tph-hub-links > div > div:first-child {
	flex: 0 0 auto !important;
	min-width: 140px !important;
	max-width: 220px !important;
}

/* Grid of link cards */
.tph-hub-links > div > div:last-child {
	flex: 1 1 0 !important;
	min-width: 0 !important;
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 10px !important;
}

/* Link cards */
.tph-hub-links a {
	display: block !important;
	background: #fff !important;
	border: 1px solid #e9ecef !important;
	border-radius: 8px !important;
	padding: 10px 14px !important;
	text-decoration: none !important;
	font-family: "DM Sans", sans-serif !important;
	font-size: .85rem !important;
	font-weight: 600 !important;
	color: #1e1e5e !important;
	word-break: break-word !important;
	overflow-wrap: break-word !important;
	hyphens: auto !important;
	transition: border-color .15s, box-shadow .15s !important;
}

.tph-hub-links a:hover {
	border-color: #1e1e5e !important;
	box-shadow: 0 2px 8px rgba(30, 30, 94, .1) !important;
}

/* ── Mobile: stack everything vertically ──────────────────── */
@media (max-width: 640px) {
	.tph-cta {
		padding: 28px 20px !important;
	}
	
	.tph-hub-links {
		padding: 20px 16px !important;
	}
	
	.tph-hub-links > div {
		flex-direction: column !important;
		gap: 16px !important;
	}
	
	.tph-hub-links > div > div:first-child {
		max-width: 100% !important;
	}
	
	.tph-hub-links > div > div:last-child {
		grid-template-columns: 1fr !important;
		width: 100% !important;
	}
}

@media (max-width: 480px) {
	.tph-hub-links > div > div:last-child {
		grid-template-columns: 1fr !important;
	}
}

/* ============================================================
   TPH UI FIX v2 — Correct class names
   Deployed: 2026-05-28
   ============================================================ */

/* ── tph-compact-cta: fix unreadable dark text on dark blue ── */
.tph-compact-cta-sub {
	color: rgba(255, 255, 255, .85) !important;
}

.tph-compact-cta-headline {
	color: #fff !important;
}

.tph-compact-cta-note {
	color: rgba(255, 255, 255, .7) !important;
}

/* ── tph-hub-links: fix mobile wrapping & alignment ────────── */

/* Override the inline align-items:center to flex-start */
.tph-hub-links > div {
	align-items: flex-start !important;
	flex-wrap: wrap !important;
}

/* Left column: fixed width on desktop, full width on mobile */
.tph-hub-links > div > div:first-child {
	flex: 0 0 auto !important;
	min-width: 140px !important;
}

/* Right column: grid of link cards */
.tph-hub-links > div > div:last-child {
	flex: 1 1 200px !important;
	min-width: 0 !important;
}

/* Mobile: stack columns vertically */
@media (max-width: 640px) {
	.tph-hub-links {
		padding: 20px 16px !important;
	}
	
	.tph-hub-links > div {
		flex-direction: column !important;
		gap: 16px !important;
	}
	
	.tph-hub-links > div > div:first-child {
		flex: 0 0 auto !important;
		width: 100% !important;
	}
	
	.tph-hub-links > div > div:last-child {
		flex: 0 0 auto !important;
		width: 100% !important;
		grid-template-columns: 1fr !important;
	}
	
	.tph-hub-links a {
		word-break: break-word !important;
		overflow-wrap: break-word !important;
	}
}

/* ── tph-compact-cta: mobile layout ────────────────────────── */
@media (max-width: 640px) {
	.tph-compact-cta {
		flex-direction: column !important;
		gap: 20px !important;
		padding: 24px 20px !important;
	}
	
	.tph-compact-cta-actions {
		width: 100% !important;
	}
	
	.tph-cta-btn {
		width: 100% !important;
		text-align: center !important;
		display: block !important;
	}
}

/* ============================================================
   TPH UI FIX v3 — High-specificity override for compact CTA text
   The .tph-container .tph-section p rule was overriding white text
   Deployed: 2026-05-28
   ============================================================ */

/* Override the .tph-container .tph-section p rule that makes text dark */
.tph-container .tph-section .tph-compact-cta-sub, .tph-container .tph-section .tph-compact-cta-text, .tph-container .tph-section .tph-compact-cta p, .tph-container .tph-section .tph-compact-cta span, .tph-compact-cta .tph-compact-cta-sub, .tph-compact-cta p {}

.tph-container .tph-section .tph-compact-cta-note, .tph-compact-cta .tph-compact-cta-note {}

/* ============================================================
   TPH UI FIX v4 — Hub links grid + compact CTA text color
   Deployed: 2026-05-28
   ============================================================ */

/* Hub links: fix the label column width and grid layout */
.tph-hub-links > div {}

.tph-hub-links > div > div:first-child {}

.tph-hub-links > div > div:last-child {}

.tph-hub-links > div > div:last-child a {}

/* Compact CTA: fix dark text on dark background */
.tph-compact-cta .tph-compact-cta-sub, .tph-compact-cta p, .tph-compact-cta span:not(.tph-cta-btn):not(.tph-compact-cta-text) {}

.tph-compact-cta .tph-compact-cta-text {}

.tph-compact-cta .tph-compact-cta-note {}

/* Override the .tph-container .tph-section p rule specifically inside compact CTA */
.tph-container .tph-section .tph-compact-cta p, .tph-container .tph-section .tph-compact-cta span, .tph-container .tph-section .tph-compact-cta-sub {}

/* Mobile: stack label above grid */
@media (max-width: 768px) {
	.tph-hub-links > div {}
	
	.tph-hub-links > div > div:first-child {}
	
	.tph-hub-links > div > div:last-child {}
	
	.tph-hub-links > div > div:last-child a {}
}

@media (max-width: 480px) {
	.tph-hub-links > div > div:last-child {}
}

/* ============================================================
   TPH UI FIX v4 — Hub links grid + compact CTA text color
   Deployed: 2026-05-28
   ============================================================ */

/* Hub links: fix the label column width so grid cards have room */
.tph-hub-links > div {
	flex-wrap: wrap !important;
	gap: 20px !important;
	align-items: flex-start !important;
}

.tph-hub-links > div > div:first-child {
	flex: 0 0 auto !important;
	min-width: 120px !important;
	max-width: 160px !important;
}

.tph-hub-links > div > div:last-child {
	flex: 1 1 400px !important;
	min-width: 0 !important;
}

.tph-hub-links > div > div:last-child a {
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

/* Compact CTA: fix dark text on dark blue background */
.tph-compact-cta .tph-compact-cta-sub, .tph-compact-cta p {
	color: rgba(255, 255, 255, .88) !important;
}

.tph-compact-cta .tph-compact-cta-text {
	color: #fff !important;
}

.tph-compact-cta .tph-compact-cta-note {
	color: rgba(255, 255, 255, .65) !important;
}

/* Override the high-specificity .tph-container .tph-section p rule */
.tph-container .tph-section .tph-compact-cta p, .tph-container .tph-section .tph-compact-cta-sub {
	color: rgba(255, 255, 255, .88) !important;
}

/* Mobile ≤ 768px: stack label above grid */
@media (max-width: 768px) {
	.tph-hub-links > div {
		flex-direction: column !important;
		gap: 16px !important;
	}
	
	.tph-hub-links > div > div:first-child {
		max-width: 100% !important;
	}
	
	.tph-hub-links > div > div:last-child {
		flex: 1 1 auto !important;
		width: 100% !important;
		grid-template-columns: 1fr 1fr !important;
	}
	
	.tph-hub-links > div > div:last-child a {
		white-space: normal !important;
		font-size: .82rem !important;
	}
}

/* Mobile ≤ 480px: single column */
@media (max-width: 480px) {
	.tph-hub-links > div > div:last-child {
		grid-template-columns: 1fr !important;
	}
}

/* ============================================================
   TPH UI FIX v7 — 2026-05-28 — appended to tph-enterprise.css
   Fix: Hide .tph-overall-score (outside .tph-hub-page scope)
   ============================================================ */

/* Hide the standalone "Overall Score: X/5" div below the hero */
.tph-overall-score {
	display: none !important;
}

/* Tighten gap between hero and Introduction section */
.page-content > .tph-container {
	padding-top: 40px !important;
}

/* ====================================================================
   TPH UI FIX v8 — Hub Link Cards: Premium 3-column grid
   Overrides the minmax(200px) rule in tph-enterprise.css
   ==================================================================== */

/* Override the auto-fill 200px grid with a proper 3-column layout */
.tph-hub-links, .tph-hub-links-grid, .tph-hub-page .tph-hub-links, .tph-child-page .tph-hub-links {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 20px !important;
	margin-top: 28px !important;
	width: 100% !important;
}

/* Remove the flex override on direct div children */
.tph-hub-links > div {
	display: contents !important;
}

/* Premium card styles */
.tph-hub-link-card {
	display: flex !important;
	flex-direction: column !important;
	padding: 22px 24px !important;
	background: #fff !important;
	border: 1.5px solid #e2e8f0 !important;
	border-radius: 12px !important;
	font-family: "Montserrat", sans-serif !important;
	font-size: .95rem !important;
	font-weight: 700 !important;
	color: #1e1e5e !important;
	text-decoration: none !important;
	letter-spacing: .01em !important;
	box-shadow: 0 2px 8px rgba(30, 30, 94, .06) !important;
	transition: box-shadow .18s, border-color .18s, transform .15s !important;
	min-height: 130px !important;
}

.tph-hub-link-card:hover {
	background: #fff !important;
	border-color: #1e1e5e !important;
	box-shadow: 0 6px 24px rgba(30, 30, 94, .14) !important;
	transform: translateY(-2px) !important;
	text-decoration: none !important;
	color: #1e1e5e !important;
}

.tph-hub-link-card .tph-hlc-icon {
	font-size: 1.5rem !important;
	margin-bottom: 10px !important;
	display: block !important;
	line-height: 1 !important;
}

.tph-hub-link-card .tph-hlc-name {
	font-family: "Montserrat", sans-serif !important;
	font-size: .88rem !important;
	font-weight: 800 !important;
	color: #1e1e5e !important;
	margin-bottom: 6px !important;
	line-height: 1.3 !important;
	display: block !important;
}

.tph-hub-link-card .tph-hlc-desc {
	font-family: "DM Sans", sans-serif !important;
	font-size: .78rem !important;
	font-weight: 400 !important;
	color: #6c757d !important;
	line-height: 1.5 !important;
	display: block !important;
	flex: 1 !important;
}

.tph-hub-link-card .tph-hlc-cta {
	font-family: "Montserrat", sans-serif !important;
	font-size: .72rem !important;
	font-weight: 700 !important;
	color: #f6b820 !important;
	margin-top: 12px !important;
	display: block !important;
	letter-spacing: .03em !important;
}

/* Responsive */
@media (max-width: 900px) {
	.tph-hub-links, .tph-hub-links-grid, .tph-hub-page .tph-hub-links, .tph-child-page .tph-hub-links {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 580px) {
	.tph-hub-links, .tph-hub-links-grid, .tph-hub-page .tph-hub-links, .tph-child-page .tph-hub-links {
		grid-template-columns: 1fr !important;
	}
}

/* ====================================================================
   TPH UI FIX v8 — Section heading fix for hub-links section
   ==================================================================== */
.tph-hub-links-section h2 {
	font-family: "Montserrat", sans-serif !important;
	font-size: 1.4rem !important;
	font-weight: 800 !important;
	color: #1e1e5e !important;
	margin-bottom: 8px !important;
	text-transform: uppercase !important;
	letter-spacing: .04em !important;
}