/* =============================================================
   Tax Intelligence Engine — Design System v2.19.14
   ALL selectors scoped under .tie-plugin-root
   Brand: Navy #1E1E5E | Yellow #F6B820 | Dark #121212 | White #FFFFFF
   Blue accent: #5858FF | Success: #16a34a | Danger: #dc2626
   Typography: Inter (body) | system-ui display
   Grid: 8px base unit | Max-width: 1200px
   ============================================================= */

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

.tie-plugin-root {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: #1a202c !important;
  background: #fff !important;
  box-sizing: border-box !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}
.tie-plugin-root *, .tie-plugin-root *::before, .tie-plugin-root *::after {
  box-sizing: border-box !important;
}
.tie-plugin-root a {
  color: #1E1E5E !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}
.tie-plugin-root a:hover { color: #F6B820 !important; text-decoration: none !important; }
.tie-plugin-root img { max-width: 100% !important; height: auto !important; }
.tie-plugin-root ul, .tie-plugin-root ol { padding-left: 1.5rem !important; }
.tie-plugin-root p { color: #374151 !important; margin: 0 0 1rem !important; line-height: 1.7 !important; }
.tie-plugin-root h1, .tie-plugin-root h2, .tie-plugin-root h3,
.tie-plugin-root h4, .tie-plugin-root h5, .tie-plugin-root h6 {
  color: #0f172a !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin: 0 0 0.75rem !important;
  letter-spacing: -0.02em !important;
}
.tie-plugin-root h1 { font-size: 2.25rem !important; font-weight: 800 !important; }
.tie-plugin-root h2 { font-size: 1.625rem !important; font-weight: 700 !important; }
.tie-plugin-root h3 { font-size: 1.25rem !important; font-weight: 700 !important; }
.tie-plugin-root h4 { font-size: 1.0625rem !important; font-weight: 600 !important; }
.tie-plugin-root table { width: 100% !important; border-collapse: collapse !important; }
.tie-plugin-root th {
  background: #f8fafc !important;
  color: #374151 !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 0.75rem 1rem !important;
  text-align: left !important;
  border-bottom: 2px solid #e2e8f0 !important;
}
.tie-plugin-root td {
  padding: 0.75rem 1rem !important;
  border-bottom: 1px solid #f1f5f9 !important;
  color: #374151 !important;
  font-size: 0.9rem !important;
  vertical-align: top !important;
}
.tie-plugin-root tr:last-child td { border-bottom: none !important; }
.tie-plugin-root tr:hover td { background: #fafbfc !important; }

/* ============================================================
   2. LAYOUT — Container & Content Grid
   ============================================================ */
.tie-plugin-root .tie-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 1.5rem !important;
  width: 100% !important;
}

/* Two-column content + sidebar layout */
.tie-plugin-root .tie-content-grid {
  display: grid !important;
  grid-template-columns: 1fr 300px !important;
  gap: 2.5rem !important;
  align-items: start !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 2.5rem 1.5rem !important;
}
.tie-plugin-root .tie-main-col,
.tie-plugin-root main.tie-main-col {
  min-width: 0 !important;
}
.tie-plugin-root .tie-sidebar,
.tie-plugin-root aside.tie-sidebar,
.tie-plugin-root div.tie-sidebar {
  min-width: 0 !important;
  position: sticky !important;
  top: 2rem !important;
}

/* ============================================================
   3. BUTTONS
   ============================================================ */
.tie-plugin-root .tie-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4rem !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 0.9375rem !important;
  cursor: pointer !important;
  border: none !important;
  text-decoration: none !important;
  transition: all 0.18s ease !important;
  line-height: 1.4 !important;
  letter-spacing: -0.01em !important;
  white-space: nowrap !important;
}
.tie-plugin-root .tie-btn:hover { text-decoration: none !important; }

/* Primary — Yellow */
.tie-plugin-root .tie-btn-primary,
.tie-plugin-root .tie-cta-button,
.tie-plugin-root .tie-btn-book {
  background: #F6B820 !important;
  color: #0a0f1e !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(246,184,32,0.30) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 0.9375rem !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  letter-spacing: -0.01em !important;
}
.tie-plugin-root .tie-btn-primary:hover,
.tie-plugin-root .tie-cta-button:hover,
.tie-plugin-root .tie-btn-book:hover {
  background: #e8a800 !important;
  color: #0a0f1e !important;
  box-shadow: 0 4px 16px rgba(246,184,32,0.40) !important;
  transform: translateY(-1px) !important;
  text-decoration: none !important;
}

/* Large */
.tie-plugin-root .tie-btn-lg {
  padding: 1rem 2rem !important;
  font-size: 1.0625rem !important;
  border-radius: 10px !important;
}

/* Secondary — Navy outline */
.tie-plugin-root .tie-btn-secondary {
  background: transparent !important;
  color: #1E1E5E !important;
  border: 2px solid #1E1E5E !important;
}
.tie-plugin-root .tie-btn-secondary:hover {
  background: #1E1E5E !important;
  color: #fff !important;
}

/* Ghost — Yellow outline (for dark backgrounds) */
.tie-plugin-root .tie-btn-ghost {
  background: transparent !important;
  color: #F6B820 !important;
  border: 2px solid #F6B820 !important;
}
.tie-plugin-root .tie-btn-ghost:hover {
  background: rgba(246,184,32,0.12) !important;
  color: #F6B820 !important;
}

/* White (for dark backgrounds) */
.tie-plugin-root .tie-btn-white {
  background: #fff !important;
  color: #1E1E5E !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
}
.tie-plugin-root .tie-btn-white:hover {
  background: #f8fafc !important;
  color: #1E1E5E !important;
  transform: translateY(-1px) !important;
}

.tie-plugin-root .tie-btn-full-width { width: 100% !important; text-align: center !important; justify-content: center !important; }

/* ============================================================
   4. BADGES & LABELS
   ============================================================ */
.tie-plugin-root .tie-badge {
  display: inline-block !important;
  padding: 0.2rem 0.55rem !important;
  border-radius: 4px !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  line-height: 1.4 !important;
}
.tie-plugin-root .tie-badge-irc { background: #EEF2FF !important; color: #3730a3 !important; }
.tie-plugin-root .tie-badge-updated { background: #DCFCE7 !important; color: #166534 !important; }
.tie-plugin-root .tie-badge-notice { background: #FEF3C7 !important; color: #92400e !important; }
.tie-plugin-root .tie-badge-form { background: #E0F2FE !important; color: #075985 !important; }
.tie-plugin-root .tie-badge-playbook { background: #F3E8FF !important; color: #6b21a8 !important; }
.tie-plugin-root .tie-badge-category { background: #F0FDF4 !important; color: #166534 !important; padding: 0.2rem 0.5rem !important; border-radius: 4px !important; font-size: 0.6875rem !important; font-weight: 700 !important; }
.tie-plugin-root .tie-badge-savings { background: #DCFCE7 !important; color: #166534 !important; padding: 0.2rem 0.5rem !important; border-radius: 4px !important; font-size: 0.6875rem !important; font-weight: 700 !important; }
.tie-plugin-root .tie-badge-new { background: #FEF3C7 !important; color: #92400e !important; padding: 0.2rem 0.5rem !important; border-radius: 4px !important; font-size: 0.6875rem !important; font-weight: 700 !important; }

/* ============================================================
   5. SEARCH BAR
   ============================================================ */
.tie-plugin-root .tie-inpage-search-bar {
  background: #1E1E5E !important;
  color: #ffffff !important;
  padding: 1.25rem 0 !important;
  position: relative !important;
  z-index: 100 !important;
  width: 100% !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.tie-plugin-root .tie-inpage-search-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 1.5rem !important;
}
.tie-plugin-root .tie-inpage-search-label {
  display: block !important;
  color: rgba(246,184,32,0.9) !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin-bottom: 0.5rem !important;
}
.tie-plugin-root .tie-inpage-search-form {
  display: flex !important;
  gap: 0.5rem !important;
  margin-bottom: 0.625rem !important;
  position: relative !important;
}
.tie-plugin-root .tie-inpage-search-input,
.tie-plugin-root .tie-search-input {
  flex: 1 !important;
  padding: 0.75rem 1rem !important;
  border-radius: 8px !important;
  border: 1.5px solid rgba(255,255,255,0.15) !important;
  font-size: 0.9375rem !important;
  background: rgba(255,255,255,0.1) !important;
  color: #fff !important;
  outline: none !important;
  transition: all 0.18s ease !important;
  font-family: inherit !important;
}
.tie-plugin-root .tie-inpage-search-input::placeholder { color: rgba(255,255,255,0.45) !important; }
.tie-plugin-root .tie-inpage-search-input:focus {
  background: rgba(255,255,255,0.15) !important;
  border-color: #F6B820 !important;
  box-shadow: 0 0 0 3px rgba(246,184,32,0.2) !important;
}
.tie-plugin-root .tie-inpage-search-btn {
  background: #F6B820 !important;
  color: #0a0f1e !important;
  border: none !important;
  padding: 0.75rem 1.25rem !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  font-size: 0.9375rem !important;
  transition: background 0.18s ease !important;
  white-space: nowrap !important;
}
.tie-plugin-root .tie-inpage-search-btn:hover { background: #e8a800 !important; }
.tie-plugin-root .tie-inpage-search-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.375rem !important;
  margin-top: 0.375rem !important;
}
.tie-plugin-root .tie-inpage-chip {
  background: rgba(255,255,255,0.1) !important;
  color: #ffffff !important;
  padding: 0.25rem 0.625rem !important;
  border-radius: 20px !important;
  font-size: 0.75rem !important;
  cursor: pointer !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  transition: all 0.15s ease !important;
  font-weight: 500 !important;
}
.tie-plugin-root .tie-inpage-chip:hover {
  background: rgba(246,184,32,0.2) !important;
  border-color: rgba(246,184,32,0.4) !important;
  color: #F6B820 !important;
}

/* Search suggestions dropdown */
.tie-plugin-root .tie-inpage-search-results,
.tie-plugin-root .tie-search-results,
.tie-plugin-root .tie-inpage-search-suggestions,
.tie-plugin-root .tie-search-suggestions {
  background: #fff !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08) !important;
  margin-top: 0.375rem !important;
  overflow: hidden !important;
  display: none;
  position: absolute !important;
  z-index: 9999 !important;
  left: 0 !important;
  right: 4.5rem !important;
  max-height: 320px !important;
  overflow-y: auto !important;
  border: 1px solid #e2e8f0 !important;
}
.tie-plugin-root .tie-search-suggestion-item {
  padding: 0.75rem 1rem !important;
  cursor: pointer !important;
  border-bottom: 1px solid #f1f5f9 !important;
  transition: background 0.12s ease !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
}
.tie-plugin-root .tie-search-suggestion-item:last-child { border-bottom: none !important; }
.tie-plugin-root .tie-search-suggestion-item:hover { background: #f8fafc !important; }
.tie-plugin-root .tie-search-suggestion-title {
  color: #0f172a !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
}
.tie-plugin-root .tie-search-suggestion-meta {
  color: #64748b !important;
  font-size: 0.75rem !important;
  margin-top: 0.125rem !important;
}
.tie-plugin-root .tie-search-highlight { background: #FEF3C7 !important; color: #92400e !important; border-radius: 2px !important; padding: 0 2px !important; }

/* ============================================================
   6. HERO — Strategy / Form / Notice / Playbook / Topic / State
   ============================================================ */
.tie-plugin-root .tie-strategy-hero,
.tie-plugin-root .tie-hero-section {
  background: linear-gradient(145deg, #0f1240 0%, #1E1E5E 55%, #2a2a7a 100%) !important;
  color: #fff !important;
  padding: 3rem 0 2.5rem !important;
  position: relative !important;
  overflow: visible !important;
}
.tie-plugin-root .tie-strategy-hero::before,
.tie-plugin-root .tie-hero-section::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
  background: radial-gradient(ellipse at 80% 20%, rgba(246,184,32,0.08) 0%, transparent 60%) !important;
  pointer-events: none !important;
}
.tie-plugin-root .tie-hero-content,
.tie-plugin-root .tie-strategy-hero-inner,
.tie-plugin-root .tie-hero-inner {
  min-width: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}
.tie-plugin-root .tie-strategy-hero-meta {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  margin-bottom: 1rem !important;
}
.tie-plugin-root .tie-breadcrumb-link {
  color: rgba(255,255,255,0.75) !important;
  font-size: 0.8125rem !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: color 0.15s !important;
}
.tie-plugin-root .tie-breadcrumb-link:hover { color: #F6B820 !important; text-decoration: none !important; }
.tie-plugin-root .tie-breadcrumb-sep { color: rgba(255,255,255,0.4) !important; font-size: 0.8125rem !important; }
.tie-plugin-root .tie-breadcrumb-current { color: rgba(255,255,255,0.6) !important; font-size: 0.8125rem !important; }
/* Links inside dark hero backgrounds — override global navy link color */
.tie-plugin-root .tie-strategy-hero a,
.tie-plugin-root .tie-hero-section a,
.tie-plugin-root .tie-hero a,
.tie-plugin-root .tie-strategy-hero-subtitle a,
.tie-plugin-root .tie-hero-subtitle a,
.tie-plugin-root .tie-strategy-hero-meta a,
.tie-plugin-root .tie-inpage-search-bar a,
.tie-plugin-root .kam-code-advertorial a {
  color: #93c5fd !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}
.tie-plugin-root .tie-strategy-hero a:hover,
.tie-plugin-root .tie-hero-section a:hover,
.tie-plugin-root .tie-hero a:hover,
.tie-plugin-root .tie-strategy-hero-subtitle a:hover,
.tie-plugin-root .tie-hero-subtitle a:hover,
.tie-plugin-root .kam-code-advertorial a:hover {
  color: #bfdbfe !important;
  text-decoration: underline !important;
}
/* Breadcrumb links in dark hero — keep their specific style */
.tie-plugin-root .tie-strategy-hero .tie-breadcrumb-link,
.tie-plugin-root .tie-hero-section .tie-breadcrumb-link,
.tie-plugin-root .tie-hero .tie-breadcrumb-link {
  color: rgba(255,255,255,0.75) !important;
  text-decoration: none !important;
}
.tie-plugin-root .tie-strategy-hero .tie-breadcrumb-link:hover,
.tie-plugin-root .tie-hero-section .tie-breadcrumb-link:hover,
.tie-plugin-root .tie-hero .tie-breadcrumb-link:hover {
  color: #F6B820 !important;
  text-decoration: none !important;
}
.tie-plugin-root .tie-strategy-hero-title,
.tie-plugin-root .tie-hero-title,
.tie-plugin-root .tie-h1 {
  color: #fff !important;
  font-size: 2.125rem !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
  margin: 0.75rem 0 !important;
  letter-spacing: -0.03em !important;
}
.tie-plugin-root .tie-strategy-hero-subtitle,
.tie-plugin-root .tie-hero-subtitle {
  color: rgba(255,255,255,0.78) !important;
  font-size: 1rem !important;
  line-height: 1.65 !important;
  max-width: 760px !important;
  margin: 0 0 1.75rem !important;
}
.tie-plugin-root .tie-strategy-hero-stats,
.tie-plugin-root .tie-hero-stats {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.75rem !important;
  margin-top: 1.75rem !important;
  min-width: 0 !important;
}
.tie-plugin-root .tie-strategy-hero-stat,
.tie-plugin-root .tie-hero-stat {
  background: rgba(255,255,255,0.08) !important;
  border-radius: 10px !important;
  padding: 1rem 1.125rem !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  backdrop-filter: blur(4px) !important;
}
.tie-plugin-root .tie-strategy-hero-stat-number,
.tie-plugin-root .tie-hero-stat-number,
.tie-plugin-root .tie-hero-stat-value,
.tie-plugin-root .tie-strategy-hero-stat-value {
  color: #F6B820 !important;
  font-size: 1.625rem !important;
  font-weight: 800 !important;
  display: block !important;
  margin-bottom: 0.25rem !important;
  letter-spacing: -0.02em !important;
}
.tie-plugin-root .tie-strategy-hero-stat-label,
.tie-plugin-root .tie-hero-stat-label {
  color: rgba(255,255,255,0.72) !important;
  font-size: 0.78125rem !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
}

/* Hero badge */
.tie-plugin-root .tie-hero-badge {
  display: inline-block !important;
  background: rgba(246,184,32,0.18) !important;
  color: #F6B820 !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  padding: 0.3rem 0.75rem !important;
  border-radius: 4px !important;
  margin-bottom: 0.75rem !important;
  border: 1px solid rgba(246,184,32,0.25) !important;
}

/* ============================================================
   7. VERIFIED BAR
   ============================================================ */
.tie-plugin-root .tie-verified-bar {
  background: #f0fdf4 !important;
  border-bottom: 1px solid #bbf7d0 !important;
  padding: 0.625rem 0 !important;
  width: 100% !important;
}
.tie-plugin-root .tie-verified-bar-inner {
  display: flex !important;
  align-items: center !important;
  gap: 1.25rem !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 1.5rem !important;
  flex-wrap: wrap !important;
}
.tie-plugin-root .tie-verified-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
  color: #166534 !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
}
.tie-plugin-root .tie-verified-date {
  display: inline-block !important;
  color: #64748b !important;
  font-size: 0.8125rem !important;
}

/* ============================================================
   8. AUTHORITY STRIP
   ============================================================ */
.tie-plugin-root .tie-authority-strip {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 0.75rem 0 !important;
}
.tie-plugin-root .tie-authority-bar-inner,
.tie-plugin-root .tie-authority-strip-inner {
  display: flex !important;
  align-items: center !important;
  gap: 1.5rem !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 1.5rem !important;
  flex-wrap: wrap !important;
}
.tie-plugin-root .tie-authority-item {
  display: flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
  font-size: 0.8125rem !important;
  color: #475569 !important;
  font-weight: 500 !important;
}
.tie-plugin-root .tie-authority-item-icon { color: #1E1E5E !important; font-size: 0.875rem !important; }
.tie-plugin-root .tie-authority-label {
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #94a3b8 !important;
  margin-right: 0.5rem !important;
}

/* ============================================================
   9. CONTENT SECTIONS — Article body
   ============================================================ */
.tie-plugin-root .tie-article { min-width: 0 !important; }
.tie-plugin-root .tie-article-section {
  margin-bottom: 2.5rem !important;
  padding-bottom: 2.5rem !important;
  border-bottom: 1px solid #f1f5f9 !important;
}
.tie-plugin-root .tie-article-section:last-child { border-bottom: none !important; }
.tie-plugin-root .tie-section-title {
  color: #0f172a !important;
  font-size: 1.3125rem !important;
  font-weight: 700 !important;
  margin-bottom: 1rem !important;
  padding-bottom: 0.625rem !important;
  border-bottom: 2px solid #F6B820 !important;
  letter-spacing: -0.02em !important;
}
.tie-plugin-root .tie-subsection-title {
  color: #1E1E5E !important;
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  margin: 1.5rem 0 0.625rem !important;
}

/* Info / Warning / Tip boxes */
.tie-plugin-root .tie-info-box {
  background: #EFF6FF !important;
  border: 1px solid #bfdbfe !important;
  border-left: 4px solid #3b82f6 !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 1rem 1.25rem !important;
  margin: 1.5rem 0 !important;
}
.tie-plugin-root .tie-info-box p { color: #1e40af !important; margin: 0 !important; font-size: 0.9rem !important; }
.tie-plugin-root .tie-warning-box {
  background: #FFFBEB !important;
  border: 1px solid #fde68a !important;
  border-left: 4px solid #f59e0b !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 1rem 1.25rem !important;
  margin: 1.5rem 0 !important;
}
.tie-plugin-root .tie-warning-box p { color: #92400e !important; margin: 0 !important; font-size: 0.9rem !important; }
.tie-plugin-root .tie-tip-box {
  background: #F0FDF4 !important;
  border: 1px solid #bbf7d0 !important;
  border-left: 4px solid #22c55e !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 1rem 1.25rem !important;
  margin: 1.5rem 0 !important;
}
.tie-plugin-root .tie-tip-box p { color: #166534 !important; margin: 0 !important; font-size: 0.9rem !important; }

/* Example / Scenario boxes */
.tie-plugin-root .tie-example-box {
  background: #FFFBEB !important;
  border: 1px solid #fde68a !important;
  border-radius: 10px !important;
  padding: 1.25rem 1.5rem !important;
  margin: 1.5rem 0 !important;
}
.tie-plugin-root .tie-example-box-title {
  color: #92400e !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 0.5rem !important;
}
.tie-plugin-root .tie-example-box p { color: #78350f !important; font-size: 0.9rem !important; }

/* Checklist */
.tie-plugin-root .tie-checklist {
  background: #F0FDF4 !important;
  border: 1px solid #bbf7d0 !important;
  border-radius: 10px !important;
  padding: 1.25rem 1.5rem !important;
  margin: 1.5rem 0 !important;
}
.tie-plugin-root .tie-checklist-header,
.tie-plugin-root .tie-checklist-title {
  color: #166534 !important;
  font-weight: 700 !important;
  margin-bottom: 0.75rem !important;
  font-size: 0.9375rem !important;
}
.tie-plugin-root .tie-checklist-item {
  display: flex !important;
  gap: 0.5rem !important;
  align-items: flex-start !important;
  margin-bottom: 0.5rem !important;
}
.tie-plugin-root .tie-checklist-check { color: #16a34a !important; font-weight: 700 !important; flex-shrink: 0 !important; }
.tie-plugin-root .tie-checklist-text { color: #374151 !important; font-size: 0.9rem !important; }

/* Steps */
.tie-plugin-root .tie-step-list { list-style: none !important; padding: 0 !important; }
.tie-plugin-root .tie-step-item {
  display: flex !important;
  gap: 1rem !important;
  margin-bottom: 1.5rem !important;
  align-items: flex-start !important;
}
.tie-plugin-root .tie-step-number {
  background: #1E1E5E !important;
  color: #fff !important;
  width: 2rem !important;
  height: 2rem !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  flex-shrink: 0 !important;
}
.tie-plugin-root .tie-step-content,
.tie-plugin-root .tie-step-body { flex: 1 !important; color: #374151 !important; font-size: 0.9375rem !important; line-height: 1.65 !important; }
.tie-plugin-root .tie-step-title { color: #0f172a !important; font-weight: 700 !important; margin-bottom: 0.25rem !important; }

/* Lists */
.tie-plugin-root .tie-list,
.tie-plugin-root .tie-content-list,
.tie-plugin-root .tie-body-list { padding-left: 1.5rem !important; margin: 1rem 0 !important; }
.tie-plugin-root .tie-list li,
.tie-plugin-root .tie-content-list li,
.tie-plugin-root .tie-body-list li { color: #374151 !important; margin-bottom: 0.5rem !important; }

/* Fact rows */
.tie-plugin-root .tie-fact-row {
  display: flex !important;
  justify-content: space-between !important;
  padding: 0.5rem 0 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  font-size: 0.9rem !important;
  gap: 1rem !important;
}
.tie-plugin-root .tie-fact-row:last-child { border-bottom: none !important; }
.tie-plugin-root .tie-fact-label { color: #64748b !important; font-weight: 600 !important; }
.tie-plugin-root .tie-fact-value { color: #0f172a !important; font-weight: 500 !important; text-align: right !important; }

/* TOC */
.tie-plugin-root .tie-toc {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 1.25rem 1.5rem !important;
  margin: 1.5rem 0 !important;
}
.tie-plugin-root .tie-toc a {
  color: #1E1E5E !important;
  font-size: 0.875rem !important;
  display: block !important;
  padding: 0.25rem 0 !important;
  transition: color 0.15s !important;
}
.tie-plugin-root .tie-toc a:hover { color: #F6B820 !important; }

/* Intro block */
.tie-plugin-root .tie-intro-block { margin-bottom: 2rem !important; }
.tie-plugin-root .tie-intro-text { color: #374151 !important; font-size: 1rem !important; line-height: 1.75 !important; }

/* Citation */
.tie-plugin-root .tie-citation { color: #94a3b8 !important; font-size: 0.8125rem !important; font-style: italic !important; }
.tie-plugin-root .tie-references { color: #374151 !important; font-size: 0.875rem !important; }

/* Client script */
.tie-plugin-root .tie-client-script,
.tie-plugin-root .tie-script-box {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-left: 4px solid #1E1E5E !important;
  border-radius: 0 10px 10px 0 !important;
  padding: 1.5rem !important;
  margin: 1.5rem 0 !important;
}
.tie-plugin-root .tie-client-script-label,
.tie-plugin-root .tie-script-label {
  color: #1E1E5E !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 0.625rem !important;
}
.tie-plugin-root .tie-client-script-text { color: #0f172a !important; font-style: italic !important; line-height: 1.75 !important; font-size: 0.9375rem !important; }
.tie-plugin-root .tie-client-script-attribution { color: #94a3b8 !important; font-size: 0.8125rem !important; margin-top: 0.5rem !important; }

/* Audit risk */
.tie-plugin-root .tie-audit-risk {
  background: #FEF2F2 !important;
  border: 1px solid #fecaca !important;
  border-radius: 10px !important;
  padding: 1.25rem 1.5rem !important;
  margin: 1.5rem 0 !important;
}
.tie-plugin-root .tie-audit-risk-header { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 0.75rem !important; }
.tie-plugin-root .tie-audit-risk-title { color: #991b1b !important; font-weight: 700 !important; font-size: 0.9375rem !important; }
.tie-plugin-root .tie-audit-risk-level { color: #dc2626 !important; font-weight: 700 !important; font-size: 0.875rem !important; }
.tie-plugin-root .tie-audit-risk-bar-bg { background: #fecaca !important; border-radius: 4px !important; height: 6px !important; margin-bottom: 0.5rem !important; }
.tie-plugin-root .tie-audit-risk-bar-fill,
.tie-plugin-root .tie-audit-risk-fill { background: #dc2626 !important; border-radius: 4px !important; height: 6px !important; }
.tie-plugin-root .tie-audit-risk-trigger { color: #374151 !important; font-size: 0.875rem !important; margin-bottom: 0.375rem !important; }

/* ============================================================
   10. SIDEBAR
   ============================================================ */
.tie-plugin-root .tie-sidebar-cta {
  background: linear-gradient(145deg, #0f1240 0%, #1E1E5E 100%) !important;
  color: #fff !important;
  border-radius: 12px !important;
  padding: 1.5rem !important;
  margin-bottom: 1.25rem !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}
.tie-plugin-root .tie-sidebar-cta-title {
  color: #F6B820 !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin-bottom: 0.625rem !important;
}
.tie-plugin-root .tie-sidebar-cta p,
.tie-plugin-root .tie-sidebar-cta-body {
  color: rgba(255,255,255,0.8) !important;
  font-size: 0.875rem !important;
  margin-bottom: 1rem !important;
  line-height: 1.6 !important;
}
.tie-plugin-root .tie-sidebar-cta .tie-btn-primary,
.tie-plugin-root .tie-sidebar-cta a.tie-btn-primary {
  background: #F6B820 !important;
  color: #0a0f1e !important;
  display: block !important;
  text-align: center !important;
  padding: 0.75rem 1rem !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  width: 100% !important;
  font-size: 0.9375rem !important;
  box-shadow: 0 2px 8px rgba(246,184,32,0.30) !important;
}
.tie-plugin-root .tie-sidebar-quickfacts {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 1.25rem !important;
  margin-bottom: 1.25rem !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important;
}
.tie-plugin-root .tie-sidebar-quickfacts h4,
.tie-plugin-root .tie-sidebar-quickfacts-title,
.tie-plugin-root .tie-sidebar-section-title {
  color: #0f172a !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 0.875rem !important;
  padding-bottom: 0.5rem !important;
  border-bottom: 2px solid #F6B820 !important;
}
.tie-plugin-root .tie-sidebar-fact {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  padding: 0.5rem 0 !important;
  border-bottom: 1px solid #f8fafc !important;
  gap: 0.5rem !important;
}
.tie-plugin-root .tie-sidebar-fact:last-child { border-bottom: none !important; }
.tie-plugin-root .tie-sidebar-fact-label { color: #64748b !important; font-size: 0.8125rem !important; flex: 1 !important; }
.tie-plugin-root .tie-sidebar-fact-value { color: #0f172a !important; font-size: 0.875rem !important; font-weight: 600 !important; text-align: right !important; flex: 1 !important; }
.tie-plugin-root .tie-sidebar-fact-number { color: #1E1E5E !important; font-size: 1.25rem !important; font-weight: 800 !important; display: block !important; margin-bottom: 0.25rem !important; }

/* Sidebar fact table */
.tie-plugin-root .tie-sidebar-fact-table { width: 100% !important; border-collapse: collapse !important; font-size: 0.875rem !important; }
.tie-plugin-root .tie-sidebar-fact-table td { padding: 0.5rem 0.75rem !important; border-bottom: 1px solid #f1f5f9 !important; color: #0f172a !important; }
.tie-plugin-root .tie-sidebar-fact-table tr:last-child td { border-bottom: none !important; }
.tie-plugin-root .tie-sidebar-fact-table .tie-sidebar-fact-label,
.tie-plugin-root td.tie-sidebar-fact-label { color: #64748b !important; font-weight: 600 !important; white-space: nowrap !important; }

/* Sidebar related */
.tie-plugin-root .tie-sidebar-related {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 1.25rem !important;
  margin-bottom: 1.25rem !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important;
}
.tie-plugin-root .tie-sidebar-related h4,
.tie-plugin-root .tie-sidebar-related-title {
  color: #0f172a !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 0.875rem !important;
  padding-bottom: 0.5rem !important;
  border-bottom: 2px solid #F6B820 !important;
}
.tie-plugin-root .tie-sidebar-related ul,
.tie-plugin-root .tie-sidebar-related-list { padding-left: 0 !important; margin: 0 !important; list-style: none !important; }
.tie-plugin-root .tie-sidebar-related li,
.tie-plugin-root .tie-sidebar-related-list li { padding: 0.375rem 0 !important; border-bottom: 1px solid #f8fafc !important; }
.tie-plugin-root .tie-sidebar-related li:last-child,
.tie-plugin-root .tie-sidebar-related-list li:last-child { border-bottom: none !important; }
.tie-plugin-root .tie-sidebar-related-link,
.tie-plugin-root .tie-sidebar-related li a,
.tie-plugin-root .tie-sidebar-related-list a {
  color: #1E1E5E !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  transition: color 0.15s !important;
}
.tie-plugin-root .tie-sidebar-related-link:hover,
.tie-plugin-root .tie-sidebar-related li a:hover,
.tie-plugin-root .tie-sidebar-related-list a:hover { color: #F6B820 !important; }

/* Sidebar card generic */
.tie-plugin-root .tie-sidebar-card {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 1.25rem !important;
  margin-bottom: 1.25rem !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important;
}
.tie-plugin-root .tie-sidebar-card-title {
  color: #0f172a !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 0.875rem !important;
  padding-bottom: 0.5rem !important;
  border-bottom: 2px solid #F6B820 !important;
}
.tie-plugin-root .tie-sidebar-hub-link,
.tie-plugin-root .tie-sidebar-link,
.tie-plugin-root .tie-sidebar-links a {
  color: #1E1E5E !important;
  font-size: 0.875rem !important;
  display: block !important;
  padding: 0.3rem 0 !important;
  transition: color 0.15s !important;
}
.tie-plugin-root .tie-sidebar-hub-link:hover,
.tie-plugin-root .tie-sidebar-link:hover,
.tie-plugin-root .tie-sidebar-links a:hover { color: #F6B820 !important; }
.tie-plugin-root .tie-sidebar-links { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.tie-plugin-root .tie-sidebar-links li { padding: 0.35rem 0 !important; }
.tie-plugin-root .tie-sidebar-stat { margin-bottom: 0.875rem !important; }
.tie-plugin-root .tie-sidebar-stat-number { color: #1E1E5E !important; font-size: 1.5rem !important; font-weight: 800 !important; display: block !important; letter-spacing: -0.02em !important; }
.tie-plugin-root .tie-sidebar-stat-label { color: #64748b !important; font-size: 0.8125rem !important; }
.tie-plugin-root .tie-sidebar-stat-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0.5rem 0 !important;
  border-bottom: 1px solid #f1f5f9 !important;
}
.tie-plugin-root .tie-sidebar-stat-row:last-child { border-bottom: none !important; }
.tie-plugin-root .tie-sidebar-module { margin-bottom: 1.25rem !important; }

/* Sidebar ad box */
.tie-plugin-root .tie-sidebar-ad-box {
  background: linear-gradient(145deg, #0f1240 0%, #1E1E5E 100%) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  padding: 1.25rem !important;
  margin-bottom: 1.25rem !important;
}
.tie-plugin-root .tie-sidebar-ad-box-eyebrow { color: #F6B820 !important; font-size: 0.6875rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; margin-bottom: 0.375rem !important; }
.tie-plugin-root .tie-sidebar-ad-box-title { color: #fff !important; font-size: 1rem !important; font-weight: 700 !important; margin-bottom: 0.375rem !important; }
.tie-plugin-root .tie-sidebar-ad-box-text { color: rgba(255,255,255,0.78) !important; font-size: 0.875rem !important; margin-bottom: 0.875rem !important; line-height: 1.6 !important; }

/* Sidebar related strategy items */
.tie-plugin-root .tie-sidebar-related-strategy-item { padding: 0.5rem 0 !important; border-bottom: 1px solid #f1f5f9 !important; }
.tie-plugin-root .tie-sidebar-related-strategy-item-title { color: #1E1E5E !important; font-size: 0.875rem !important; font-weight: 600 !important; }
.tie-plugin-root .tie-sidebar-related-strategy-item-text { color: #64748b !important; font-size: 0.8125rem !important; }

/* Mobile sidebar CTA */
.tie-plugin-root .tie-sidebar-cta-mobile {
  display: none !important;
  background: linear-gradient(145deg, #0f1240 0%, #1E1E5E 100%) !important;
  color: #fff !important;
  padding: 1.25rem !important;
  border-radius: 12px !important;
  margin-bottom: 1.5rem !important;
  text-align: center !important;
}

/* ============================================================
   11. IN-CONTENT CTA STRIPS & SECTIONS
   ============================================================ */
.tie-plugin-root .tie-content-cta-strip {
  background: linear-gradient(135deg, #1E1E5E 0%, #2a2a7a 100%) !important;
  color: #fff !important;
  border-radius: 12px !important;
  padding: 1.5rem 2rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1.5rem !important;
  margin: 2rem 0 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}
.tie-plugin-root .tie-content-cta-strip-text { flex: 1 !important; }
.tie-plugin-root .tie-content-cta-strip-text h3,
.tie-plugin-root .tie-content-cta-strip-text h2 { color: #fff !important; margin: 0 0 0.25rem !important; font-size: 1.0625rem !important; }
.tie-plugin-root .tie-content-cta-strip-sub { color: rgba(255,255,255,0.75) !important; font-size: 0.875rem !important; margin: 0 !important; }

.tie-plugin-root .tie-cta-section {
  background: linear-gradient(135deg, #1E1E5E 0%, #2a2a7a 100%) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  padding: 2.25rem 2rem !important;
  text-align: center !important;
  margin: 2rem 0 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}
.tie-plugin-root .tie-cta-section h2,
.tie-plugin-root .tie-cta-section h3 { color: #fff !important; font-size: 1.4375rem !important; margin-bottom: 0.625rem !important; }
.tie-plugin-root .tie-cta-section p { color: rgba(255,255,255,0.82) !important; font-size: 0.9375rem !important; margin-bottom: 1.25rem !important; }
.tie-plugin-root .tie-cta-section .tie-cta-button,
.tie-plugin-root .tie-cta-section a.tie-cta-button {
  background: #F6B820 !important; color: #0a0f1e !important;
  display: inline-block !important; padding: 0.875rem 2rem !important;
  border-radius: 8px !important; font-weight: 700 !important;
  text-decoration: none !important; font-size: 0.9375rem !important;
  box-shadow: 0 2px 8px rgba(246,184,32,0.30) !important;
}
.tie-plugin-root .tie-cta-section a.tie-btn-ghost,
.tie-plugin-root .tie-cta-section .tie-btn-ghost {
  background: transparent !important; color: #F6B820 !important;
  border: 2px solid #F6B820 !important;
}
.tie-plugin-root .tie-cta-section a.tie-btn-white,
.tie-plugin-root .tie-cta-section .tie-btn-white {
  background: #fff !important; color: #1E1E5E !important; border: none !important;
}
.tie-plugin-root .tie-cta-button {
  background: #F6B820 !important; color: #0a0f1e !important;
  display: inline-block !important; padding: 0.875rem 2rem !important;
  border-radius: 8px !important; font-weight: 700 !important;
  text-decoration: none !important; font-size: 0.9375rem !important;
  transition: all 0.18s ease !important;
}
.tie-plugin-root .tie-cta-button:hover { background: #e8a800 !important; color: #0a0f1e !important; transform: translateY(-1px) !important; }

/* Inline CTA */
.tie-plugin-root .tie-inline-cta {
  background: linear-gradient(135deg, #1E1E5E 0%, #2a2a7a 100%) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  padding: 2rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 2rem !important;
  margin: 1.5rem 0 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}
.tie-plugin-root .tie-inline-cta-label { color: #F6B820 !important; font-size: 0.6875rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; margin-bottom: 0.375rem !important; }
.tie-plugin-root .tie-inline-cta h3 { color: #fff !important; font-size: 1.1875rem !important; font-weight: 700 !important; margin-bottom: 0.375rem !important; }
.tie-plugin-root .tie-inline-cta-text { color: rgba(255,255,255,0.78) !important; font-size: 0.9rem !important; margin: 0 !important; }
.tie-plugin-root .tie-inline-cta-actions { flex-shrink: 0 !important; }

/* Bottom CTA buttons */
.tie-plugin-root .tie-bottom-cta-buttons {
  display: flex !important;
  gap: 0.875rem !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  margin-top: 1.5rem !important;
}

/* ============================================================
   12. FAQ ACCORDION
   ============================================================ */
.tie-plugin-root .tie-faq-section {
  padding: 2.5rem 0 !important;
  background: #fff !important;
}
.tie-plugin-root .tie-faq-section h2 {
  color: #0f172a !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  margin-bottom: 1.5rem !important;
  letter-spacing: -0.02em !important;
}
.tie-plugin-root .tie-faq-list { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.tie-plugin-root .tie-faq-item { border-bottom: 1px solid #e2e8f0 !important; overflow: hidden !important; }
.tie-plugin-root .tie-faq-question {
  padding: 1.125rem 0 !important;
  cursor: pointer !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 0.9375rem !important;
  user-select: none !important;
  line-height: 1.45 !important;
  transition: color 0.15s !important;
  border: none !important;
  background: none !important;
  width: 100% !important;
  text-align: left !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.tie-plugin-root .tie-faq-question:hover { color: #1E1E5E !important; }
.tie-plugin-root .tie-faq-question::after {
  content: '+' !important;
  font-size: 1.25rem !important;
  font-weight: 300 !important;
  color: #94a3b8 !important;
  flex-shrink: 0 !important;
  margin-left: 1rem !important;
  transition: transform 0.2s ease !important;
}
.tie-plugin-root .tie-faq-question.open::after,
.tie-plugin-root .tie-faq-item.open > .tie-faq-question::after { content: '−' !important; color: #1E1E5E !important; }
.tie-plugin-root .tie-faq-answer {
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.3s ease !important;
}
.tie-plugin-root .tie-faq-answer.open,
.tie-plugin-root .tie-faq-item.open > .tie-faq-answer { max-height: 600px !important; }
.tie-plugin-root .tie-faq-answer p {
  color: #374151 !important;
  padding: 0 0 1.125rem !important;
  font-size: 0.9rem !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}

/* ============================================================
   13. LIBRARY PAGE HERO
   ============================================================ */
.tie-plugin-root .tie-page-hero {
  background: linear-gradient(145deg, #0f1240 0%, #1E1E5E 55%, #2a2a7a 100%) !important;
  padding: 3rem 0 2.5rem !important;
  color: #fff !important;
  position: relative !important;
  overflow: hidden !important;
}
.tie-plugin-root .tie-page-hero::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
  background: radial-gradient(ellipse at 80% 20%, rgba(246,184,32,0.07) 0%, transparent 60%) !important;
  pointer-events: none !important;
}
.tie-plugin-root .tie-page-hero-inner {
  position: relative !important;
  z-index: 1 !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 1.5rem !important;
}
.tie-plugin-root .tie-page-hero-badge { margin-bottom: 0.75rem !important; }
.tie-plugin-root .tie-page-hero-title {
  color: #fff !important;
  font-size: 2.125rem !important;
  font-weight: 800 !important;
  margin-bottom: 0.5rem !important;
  letter-spacing: -0.03em !important;
}
.tie-plugin-root .tie-page-hero-sub {
  color: rgba(255,255,255,0.78) !important;
  font-size: 1rem !important;
  margin-bottom: 1.75rem !important;
  line-height: 1.65 !important;
}
.tie-plugin-root .tie-page-hero-stats {
  display: flex !important;
  gap: 2.5rem !important;
  flex-wrap: wrap !important;
}
.tie-plugin-root .tie-page-hero-stat-num {
  color: #F6B820 !important;
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  display: block !important;
  letter-spacing: -0.02em !important;
}
.tie-plugin-root .tie-page-hero-stat-label {
  color: rgba(255,255,255,0.72) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
}

/* Library page main area */
.tie-plugin-root .tie-page-main { padding: 2.5rem 0 !important; }
.tie-plugin-root .tie-page-wrap {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 1.5rem !important;
}

/* ============================================================
   14. LIBRARY SECTION HEADERS
   ============================================================ */
.tie-plugin-root .tie-library-section {
  margin-bottom: 3rem !important;
}
.tie-plugin-root .tie-library-section-header {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  margin-bottom: 1.25rem !important;
  padding-bottom: 0.75rem !important;
  border-bottom: 2px solid #f1f5f9 !important;
}
.tie-plugin-root .tie-library-section-title {
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  letter-spacing: -0.02em !important;
  position: relative !important;
}
.tie-plugin-root .tie-library-section-title::before {
  content: '' !important;
  position: absolute !important;
  left: -1rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 4px !important;
  height: 1.125rem !important;
  background: #F6B820 !important;
  border-radius: 2px !important;
}
.tie-plugin-root .tie-library-section-count {
  color: #94a3b8 !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
}

/* ============================================================
   15. STRATEGY CARDS
   ============================================================ */
.tie-plugin-root .tie-strategy-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 1rem !important;
}
.tie-plugin-root .tie-strategy-card {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 1.25rem !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}
.tie-plugin-root .tie-strategy-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.10) !important;
  border-color: #1E1E5E !important;
  transform: translateY(-2px) !important;
  text-decoration: none !important;
}
.tie-plugin-root .tie-strategy-card-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.3rem !important;
  margin-bottom: 0.625rem !important;
}
.tie-plugin-root .tie-strategy-card-title {
  color: #0f172a !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  margin-bottom: 0.375rem !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
}
.tie-plugin-root .tie-strategy-card-desc {
  color: #64748b !important;
  font-size: 0.8125rem !important;
  line-height: 1.55 !important;
}
.tie-plugin-root .tie-strategy-card-divider {
  border: none !important;
  border-top: 1px solid #f1f5f9 !important;
  margin: 0.875rem 0 !important;
}
.tie-plugin-root .tie-strategy-card-footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}
.tie-plugin-root .tie-strategy-card-savings {
  color: #16a34a !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
}
.tie-plugin-root .tie-strategy-card-cta {
  color: #1E1E5E !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
}

/* ============================================================
   16. NOTICE / FORM GRID ITEMS
   ============================================================ */
.tie-plugin-root .tie-notice-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
  gap: 0.75rem !important;
}
.tie-plugin-root .tie-notice-item {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 1rem 1.125rem !important;
  text-decoration: none !important;
  display: block !important;
  transition: all 0.18s ease !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}
.tie-plugin-root .tie-notice-item:hover {
  border-color: #1E1E5E !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
  transform: translateY(-1px) !important;
  text-decoration: none !important;
}
.tie-plugin-root .tie-notice-item-code {
  color: #1E1E5E !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  margin-bottom: 0.25rem !important;
  letter-spacing: -0.01em !important;
}
.tie-plugin-root .tie-notice-item-desc { color: #64748b !important; font-size: 0.8125rem !important; line-height: 1.45 !important; }

/* ============================================================
   17. HUB PAGE
   ============================================================ */
.tie-plugin-root .tie-hub-hero {
  background: linear-gradient(145deg, #0f1240 0%, #1E1E5E 55%, #2a2a7a 100%) !important;
  padding: 3rem 0 2.5rem !important;
  position: relative !important;
  overflow: hidden !important;
}
.tie-plugin-root .tie-hub-hero::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
  background: radial-gradient(ellipse at 75% 25%, rgba(246,184,32,0.09) 0%, transparent 55%) !important;
  pointer-events: none !important;
}
.tie-plugin-root .tie-hub-hero-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 1.5rem !important;
  position: relative !important;
  z-index: 1 !important;
}
.tie-plugin-root .tie-hub-eyebrow {
  display: inline-block !important;
  color: #F6B820 !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  margin-bottom: 0.75rem !important;
}
.tie-plugin-root .tie-hub-h1 {
  color: #fff !important;
  font-size: 2.375rem !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  margin-bottom: 0.75rem !important;
  letter-spacing: -0.03em !important;
}
.tie-plugin-root .tie-hub-subtitle {
  color: rgba(255,255,255,0.78) !important;
  font-size: 1.0625rem !important;
  margin-bottom: 1.75rem !important;
  line-height: 1.65 !important;
}
.tie-plugin-root .tie-hub-stats {
  display: flex !important;
  gap: 2.5rem !important;
  flex-wrap: wrap !important;
  margin-top: 1.75rem !important;
}
.tie-plugin-root .tie-hub-stat { text-align: left !important; }
.tie-plugin-root .tie-hub-stat-num {
  color: #F6B820 !important;
  font-size: 2rem !important;
  font-weight: 800 !important;
  display: block !important;
  letter-spacing: -0.03em !important;
}
.tie-plugin-root .tie-hub-stat-label { color: rgba(255,255,255,0.72) !important; font-size: 0.8125rem !important; font-weight: 500 !important; }
.tie-plugin-root .tie-hub-main {
  padding: 2.5rem 0 !important;
}
.tie-plugin-root .tie-hub-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 1.5rem !important;
}
.tie-plugin-root .tie-hub-section { margin-bottom: 3rem !important; }
.tie-plugin-root .tie-hub-section-title {
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin-bottom: 1.25rem !important;
  padding-bottom: 0.75rem !important;
  border-bottom: 2px solid #F6B820 !important;
  letter-spacing: -0.02em !important;
}
.tie-plugin-root .tie-hub-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 1rem !important;
}
.tie-plugin-root .tie-hub-card {
  display: block !important;
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 1.25rem 1.375rem !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  color: inherit !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}
.tie-plugin-root .tie-hub-card h3 {
  color: #0f172a !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  margin: 0.375rem 0 0.375rem !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
}
.tie-plugin-root .tie-hub-card p {
  color: #64748b !important;
  font-size: 0.8125rem !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}
.tie-plugin-root .tie-hub-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.10) !important;
  transform: translateY(-2px) !important;
  border-color: #1E1E5E !important;
  text-decoration: none !important;
}
.tie-plugin-root .tie-hub-card-irc {
  color: #94a3b8 !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 0.375rem !important;
}
.tie-plugin-root .tie-hub-card-savings {
  color: #16a34a !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  margin-top: 0.5rem !important;
}

/* Hub featured grid */
.tie-plugin-root .tie-featured-grid {
  display: grid !important;
  grid-template-columns: 1.5fr 1fr 1fr !important;
  gap: 1rem !important;
  margin-bottom: 1.5rem !important;
}
.tie-plugin-root .tie-featured-card-main {
  background: linear-gradient(145deg, #0f1240 0%, #1E1E5E 100%) !important;
  border-radius: 14px !important;
  padding: 2rem !important;
  color: #fff !important;
  grid-row: span 2 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  text-decoration: none !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  transition: all 0.2s ease !important;
}
.tie-plugin-root .tie-featured-card-main:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.2) !important; transform: translateY(-2px) !important; text-decoration: none !important; }
.tie-plugin-root .tie-featured-card-main .card-category { color: #F6B820 !important; font-size: 0.6875rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; margin-bottom: 0.5rem !important; }
.tie-plugin-root .tie-featured-card-main .card-title { color: #fff !important; font-size: 1.25rem !important; font-weight: 800 !important; line-height: 1.3 !important; margin-bottom: 0.625rem !important; letter-spacing: -0.02em !important; }
.tie-plugin-root .tie-featured-card-main .card-desc { color: rgba(255,255,255,0.72) !important; font-size: 0.875rem !important; line-height: 1.6 !important; }
.tie-plugin-root .tie-featured-card-main .card-savings { color: #F6B820 !important; font-size: 0.875rem !important; font-weight: 700 !important; margin-top: 1rem !important; display: inline-block !important; }
.tie-plugin-root .tie-featured-card-sm {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 1.25rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}
.tie-plugin-root .tie-featured-card-sm:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.10) !important; transform: translateY(-2px) !important; border-color: #1E1E5E !important; text-decoration: none !important; }
.tie-plugin-root .tie-featured-card-sm .card-category { color: #64748b !important; font-size: 0.6875rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; margin-bottom: 0.375rem !important; }
.tie-plugin-root .tie-featured-card-sm .card-title { color: #0f172a !important; font-size: 0.9375rem !important; font-weight: 700 !important; margin-bottom: 0.375rem !important; letter-spacing: -0.01em !important; }
.tie-plugin-root .tie-featured-card-sm .card-desc { color: #64748b !important; font-size: 0.8125rem !important; line-height: 1.55 !important; }
.tie-plugin-root .tie-featured-card-sm .card-footer { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-top: 0.875rem !important; }
.tie-plugin-root .card-savings { color: #16a34a !important; font-size: 0.8125rem !important; font-weight: 700 !important; }
.tie-plugin-root .card-arrow { color: #1E1E5E !important; font-weight: 700 !important; font-size: 1rem !important; }
.tie-plugin-root .card-badges { display: flex !important; flex-wrap: wrap !important; gap: 0.375rem !important; margin-bottom: 0.75rem !important; }

/* ============================================================
   18. RELATED CARDS
   ============================================================ */
.tie-plugin-root .tie-related-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 1rem !important;
  margin: 1.5rem 0 !important;
}
.tie-plugin-root .tie-related-card {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 1.25rem !important;
  transition: all 0.18s ease !important;
}
.tie-plugin-root .tie-related-card:hover { border-color: #1E1E5E !important; box-shadow: 0 4px 12px rgba(0,0,0,0.07) !important; }
.tie-plugin-root .tie-related-card-title { color: #0f172a !important; font-weight: 700 !important; font-size: 0.9375rem !important; margin-bottom: 0.25rem !important; }
.tie-plugin-root .tie-related-card-sub { color: #64748b !important; font-size: 0.8125rem !important; }
.tie-plugin-root .tie-related-link { color: #1E1E5E !important; font-size: 0.875rem !important; }
.tie-plugin-root .tie-related-strategies,
.tie-plugin-root .tie-related-forms { margin: 1.5rem 0 !important; }

/* ============================================================
   19. STAT ITEMS
   ============================================================ */
.tie-plugin-root .tie-stat-item { text-align: center !important; }
.tie-plugin-root .tie-stat-number,
.tie-plugin-root .tie-stat-val {
  color: #1E1E5E !important;
  font-size: 2rem !important;
  font-weight: 800 !important;
  display: block !important;
  letter-spacing: -0.03em !important;
}
.tie-plugin-root .tie-stat-label {
  color: #64748b !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  display: block !important;
  margin-top: 0.25rem !important;
}
.tie-plugin-root .tie-stat-card {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 1.25rem !important;
  text-align: center !important;
}

/* ============================================================
   20. COMPARISON SECTION
   ============================================================ */
.tie-plugin-root .tie-comparison-section {
  background: linear-gradient(145deg, #0f1240 0%, #1E1E5E 100%) !important;
  color: #ffffff !important;
  padding: 3rem 0 !important;
}
.tie-plugin-root .tie-comparison-section h2 { color: #fff !important; }
.tie-plugin-root .tie-comparison-section p { color: rgba(255,255,255,0.78) !important; }
.tie-plugin-root .tie-comparison-table-wrap {
  background: rgba(255,255,255,0.05) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}
.tie-plugin-root .tie-comparison-header {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr !important;
  background: rgba(255,255,255,0.08) !important;
  padding: 0.875rem 1rem !important;
}
.tie-plugin-root .tie-comparison-header-cell { color: rgba(255,255,255,0.65) !important; font-size: 0.75rem !important; font-weight: 700 !important; text-align: center !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; }
.tie-plugin-root .tie-comparison-header-cell.highlight { color: #F6B820 !important; }
.tie-plugin-root .tie-comparison-row {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr !important;
  padding: 0.875rem 1rem !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  align-items: center !important;
}
.tie-plugin-root .tie-comparison-cell { color: rgba(255,255,255,0.65) !important; font-size: 0.875rem !important; text-align: center !important; }
.tie-plugin-root .tie-comparison-cell:first-child { text-align: left !important; color: rgba(255,255,255,0.88) !important; }
.tie-plugin-root .tie-comparison-cell.highlight { color: #F6B820 !important; font-weight: 600 !important; }
.tie-plugin-root .tie-check-yes::before { content: "✓" !important; color: #4ade80 !important; font-weight: 700 !important; }
.tie-plugin-root .tie-check-no::before { content: "✗" !important; color: #f87171 !important; font-weight: 700 !important; }
.tie-plugin-root .tie-partial { color: #fbbf24 !important; font-size: 0.8125rem !important; }

/* ============================================================
   21. KAM CODE ADVERTORIAL
   ============================================================ */
.tie-plugin-root .kam-code-advertorial {
  background: linear-gradient(145deg, #0f1240 0%, #1E1E5E 100%) !important;
  color: #ffffff !important;
  border-radius: 14px !important;
  padding: 1.75rem !important;
  margin: 2rem 0 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}
.tie-plugin-root .kam-code-label {
  color: #F6B820 !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin-bottom: 0.875rem !important;
  display: block !important;
}
.tie-plugin-root .kam-code-header {
  display: flex !important;
  align-items: flex-start !important;
  gap: 1rem !important;
  margin-bottom: 0.875rem !important;
}
.tie-plugin-root .kam-code-icon {
  background: #F6B820 !important;
  color: #0a0f1e !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 800 !important;
  font-size: 0.875rem !important;
  flex-shrink: 0 !important;
}
.tie-plugin-root .kam-code-title { color: #fff !important; font-size: 1.0625rem !important; font-weight: 700 !important; margin: 0 !important; flex: 1 !important; }
.tie-plugin-root .kam-code-title .highlight { color: #F6B820 !important; }
.tie-plugin-root .kam-code-body { color: rgba(255,255,255,0.78) !important; font-size: 0.9rem !important; margin-bottom: 1.125rem !important; line-height: 1.65 !important; }
.tie-plugin-root .kam-code-footer { display: flex !important; gap: 0.75rem !important; flex-wrap: wrap !important; }
.tie-plugin-root .kam-code-cta {
  background: #F6B820 !important;
  color: #0a0f1e !important;
  padding: 0.625rem 1.25rem !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: all 0.18s ease !important;
}
.tie-plugin-root .kam-code-cta:hover { background: #e8a800 !important; color: #0a0f1e !important; text-decoration: none !important; }
.tie-plugin-root .kam-code-cta-book {
  background: transparent !important;
  color: #F6B820 !important;
  border: 2px solid #F6B820 !important;
  padding: 0.625rem 1.25rem !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: all 0.18s ease !important;
}
.tie-plugin-root .kam-code-cta-book:hover { background: rgba(246,184,32,0.12) !important; color: #F6B820 !important; text-decoration: none !important; }
/* Kam Code feature chips */
.tie-plugin-root .kam-code-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  margin-bottom: 1.125rem !important;
}
.tie-plugin-root .kam-code-chip {
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(246,184,32,0.18) !important;
  color: #0a0f1e !important;
  border: 1px solid rgba(246,184,32,0.55) !important;
  border-radius: 4px !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  padding: 0.25rem 0.625rem !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
}
/* Authority links — dark blue in light article body (default), light blue only inside dark cards */
.tie-plugin-root .tie-authority-link {
  color: #1d4ed8 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  font-weight: 500 !important;
}
.tie-plugin-root .tie-authority-link:hover {
  color: #1e40af !important;
  text-decoration: underline !important;
}
/* Override to light blue only inside dark-background containers */
.tie-plugin-root .kam-code-advertorial .tie-authority-link,
.tie-plugin-root .tie-strategy-hero .tie-authority-link,
.tie-plugin-root .tie-strategy-hero-section .tie-authority-link,
.tie-plugin-root .tie-section-navy .tie-authority-link,
.tie-plugin-root .tie-content-cta .tie-authority-link,
.tie-plugin-root .tie-bottom-cta .tie-authority-link,
.tie-plugin-root section.tie-bottom-cta .tie-authority-link,
.tie-plugin-root section.tie-cta-section .tie-authority-link,
.tie-plugin-root [style*="background:#1E1E5E"] .tie-authority-link,
.tie-plugin-root [style*="background:var(--navy)"] .tie-authority-link {
  color: #93c5fd !important;
}
.tie-plugin-root .kam-code-advertorial .tie-authority-link:hover,
.tie-plugin-root .tie-strategy-hero .tie-authority-link:hover,
.tie-plugin-root .tie-section-navy .tie-authority-link:hover,
.tie-plugin-root [style*="background:#1E1E5E"] .tie-authority-link:hover,
.tie-plugin-root [style*="background:var(--navy)"] .tie-authority-link:hover {
  color: #bfdbfe !important;
}
/* Authority outbound links inside light article body */
.tie-plugin-root .tie-article a[href*="irs.gov"],
.tie-plugin-root .tie-article a[href*="congress.gov"],
.tie-plugin-root .tie-article a[href*="ecfr.gov"],
.tie-plugin-root .tie-article a[href*="taxfoundation.org"],
.tie-plugin-root .tie-article a[href*="aicpa.org"],
.tie-plugin-root .tie-article a[href*="naea.org"] {
  color: #1d4ed8 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  font-weight: 500 !important;
}
.tie-plugin-root .tie-article a[href*="irs.gov"]:hover,
.tie-plugin-root .tie-article a[href*="congress.gov"]:hover,
.tie-plugin-root .tie-article a[href*="ecfr.gov"]:hover,
.tie-plugin-root .tie-article a[href*="taxfoundation.org"]:hover,
.tie-plugin-root .tie-article a[href*="aicpa.org"]:hover,
.tie-plugin-root .tie-article a[href*="naea.org"]:hover {
  color: #1e40af !important;
  text-decoration: underline !important;
}

/* ============================================================
   22. MISC COMPONENTS
   ============================================================ */
/* Section label */
.tie-plugin-root .tie-section-label {
  color: #94a3b8 !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 0.5rem !important;
}

/* Breadcrumb */
.tie-plugin-root .tie-breadcrumb,
.tie-plugin-root .tie-hero-breadcrumb {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0.375rem !important;
  margin-bottom: 1rem !important;
}

/* Video / Calculator embeds */
.tie-plugin-root .tie-video-embed,
.tie-plugin-root .tie-calculator-embed {
  border-radius: 10px !important;
  overflow: hidden !important;
  margin: 1.5rem 0 !important;
}

/* Grid content (legacy) */
.tie-plugin-root .tie-grid-content { flex: 1 !important; min-width: 0 !important; }

/* Body small */
.tie-plugin-root .tie-body-sm { font-size: 0.875rem !important; color: #64748b !important; line-height: 1.55 !important; }

/* State table header */
.tie-plugin-root .tie-state-table-header {
  color: #1E1E5E !important;
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  margin: 1.5rem 0 0.75rem !important;
}

/* Page content / sidebar col */
.tie-plugin-root .tie-page-content { color: #374151 !important; }
.tie-plugin-root .tie-page-sidebar { min-width: 0 !important; }
.tie-plugin-root .tie-content-layout {
  display: grid !important;
  grid-template-columns: 1fr 300px !important;
  gap: 2.5rem !important;
  align-items: start !important;
}
.tie-plugin-root .tie-content-main { min-width: 0 !important; }
.tie-plugin-root .tie-sidebar-col { min-width: 0 !important; }

/* ============================================================
   23. FADE-UP ANIMATION
   ============================================================ */
.tie-plugin-root .tie-fade-up {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.tie-plugin-root .tie-fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   24. STICKY MOBILE CTA BAR
   ============================================================ */
.tie-sticky-cta-bar {
  display: none !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: #1E1E5E !important;
  padding: 0.875rem 1rem !important;
  z-index: 9999 !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  box-shadow: 0 -2px 16px rgba(0,0,0,0.25) !important;
}
.tie-sticky-cta-bar-text { color: #fff !important; font-size: 0.875rem !important; font-weight: 600 !important; }

/* ============================================================
   25. RESPONSIVE BREAKPOINTS
   ============================================================ */
@media (max-width: 1024px) {
  .tie-plugin-root .tie-content-grid {
    grid-template-columns: 1fr 280px !important;
    gap: 2rem !important;
  }
}

@media (max-width: 900px) {
  .tie-plugin-root .tie-content-grid {
    grid-template-columns: 1fr !important;
  }
  .tie-plugin-root .tie-sidebar,
  .tie-plugin-root aside.tie-sidebar,
  .tie-plugin-root div.tie-sidebar {
    position: static !important;
  }
  .tie-plugin-root .tie-sidebar-cta-mobile { display: block !important; }
  .tie-plugin-root .tie-hero-layout { grid-template-columns: 1fr !important; }
  .tie-plugin-root .tie-featured-grid { grid-template-columns: 1fr 1fr !important; }
  .tie-plugin-root .tie-featured-card-main { grid-row: auto !important; grid-column: span 2 !important; }
  .tie-plugin-root .tie-inline-cta { flex-direction: column !important; text-align: center !important; }
  .tie-plugin-root .tie-content-cta-strip { flex-direction: column !important; text-align: center !important; }
  .tie-plugin-root .tie-hub-stats { gap: 1.5rem !important; }
}

@media (max-width: 768px) {
  .tie-sticky-cta-bar { display: flex !important; }
  .tie-plugin-root .tie-page-hero { padding: 2rem 0 1.75rem !important; }
  .tie-plugin-root .tie-page-hero-title { font-size: 1.625rem !important; }
  .tie-plugin-root .tie-strategy-hero-title,
  .tie-plugin-root .tie-hero-title,
  .tie-plugin-root .tie-h1 { font-size: 1.625rem !important; }
  .tie-plugin-root .tie-hub-h1 { font-size: 1.75rem !important; }
  .tie-plugin-root .tie-strategy-grid { grid-template-columns: 1fr 1fr !important; }
  .tie-plugin-root .tie-notice-grid { grid-template-columns: 1fr 1fr !important; }
  .tie-plugin-root .tie-hub-grid { grid-template-columns: 1fr 1fr !important; }
  .tie-plugin-root .tie-page-hero-stats { gap: 1.5rem !important; }
}

@media (max-width: 640px) {
  .tie-plugin-root .tie-strategy-hero-title,
  .tie-plugin-root .tie-hero-title,
  .tie-plugin-root .tie-h1 { font-size: 1.4375rem !important; }
  .tie-plugin-root .tie-hub-h1 { font-size: 1.5rem !important; }
  .tie-plugin-root .tie-strategy-grid { grid-template-columns: 1fr !important; }
  .tie-plugin-root .tie-notice-grid { grid-template-columns: 1fr !important; }
  .tie-plugin-root .tie-hub-grid { grid-template-columns: 1fr !important; }
  .tie-plugin-root .tie-featured-grid { grid-template-columns: 1fr !important; }
  .tie-plugin-root .tie-featured-card-main { grid-column: auto !important; }
  .tie-plugin-root .tie-bottom-cta-buttons { flex-direction: column !important; align-items: stretch !important; }
  .tie-plugin-root .tie-strategy-hero-stats,
  .tie-plugin-root .tie-hero-stats { grid-template-columns: 1fr 1fr !important; }
  .tie-plugin-root .tie-content-grid { padding: 1.5rem 1rem !important; }
  .tie-plugin-root .tie-container { padding: 0 1rem !important; }
  .tie-plugin-root .tie-page-hero-inner,
  .tie-plugin-root .tie-hub-hero-inner { padding: 0 1rem !important; }
}

/* ============================================================
   26. GATE OVERLAY
   ============================================================ */
.tie-gate-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 12, 28, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 2147483647;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.tie-gate-modal {
  background: #ffffff;
  border-radius: 20px;
  max-width: 560px;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 32px 100px rgba(0,0,0,0.55);
  max-height: 95vh;
  overflow-y: auto;
}
.tie-gate-topbar {
  background: #1E1E5E;
  padding: 0.65rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.tie-gate-topbar-dot { width: 5px; height: 5px; border-radius: 50%; background: #F6B820; flex-shrink: 0; }
.tie-gate-topbar-text { color: #F6B820; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; }
.tie-gate-body { padding: 2.25rem 2.5rem 2rem; }
.tie-gate-competitors { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.tie-gate-comp-label { font-size: 0.65rem; color: #94a3b8; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
.tie-gate-comp-pill { font-size: 0.65rem; font-weight: 700; color: #1e293b; background: #f1f5f9; border: 1px solid #cbd5e1; padding: 0.2rem 0.55rem; border-radius: 20px; white-space: nowrap; }
.tie-gate-comp-pill.crossed { text-decoration: line-through; color: #475569; background: #f8fafc; border-color: #e2e8f0; }
.tie-gate-comp-arrow { color: #F6B820; font-size: 0.8rem; font-weight: 700; }
.tie-gate-comp-free { font-size: 0.65rem; font-weight: 800; color: #16a34a; background: #f0fdf4; border: 1px solid #bbf7d0; padding: 0.2rem 0.55rem; border-radius: 20px; }
.tie-gate-headline { color: #0a0f1e; font-size: 1.65rem; font-weight: 900; line-height: 1.18; letter-spacing: -0.03em; margin-bottom: 0.55rem; }
.tie-gate-headline em { font-style: normal; color: #1E1E5E; }
.tie-gate-sub { color: #475569; font-size: 0.875rem; line-height: 1.65; margin-bottom: 1.1rem; }
.tie-gate-divider { height: 1px; background: #f1f5f9; margin-bottom: 1rem; border: none; }
.tie-gate-bullets { list-style: none; margin: 0 0 1.35rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.tie-gate-bullet { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.855rem; color: #1e293b; line-height: 1.45; font-weight: 500; }
.tie-gate-check { width: 17px; height: 17px; min-width: 17px; border-radius: 50%; background: #F6B820; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.tie-gate-check svg { width: 9px; height: 9px; }
.tie-gate-form { display: flex; flex-direction: column; gap: 0.7rem; }
.tie-gate-fields-row { display: flex; gap: 0.65rem; }
.tie-gate-field { display: flex; flex-direction: column; gap: 0.28rem; flex: 1; }
.tie-gate-label { font-size: 0.72rem; font-weight: 700; color: #374151; text-transform: uppercase; letter-spacing: 0.05em; }
.tie-gate-input { padding: 0.82rem 1rem; border: 1.5px solid #e2e8f0; border-radius: 10px; font-size: 0.95rem; color: #0f172a; background: #f8fafc; outline: none; width: 100%; font-family: inherit; }
.tie-gate-input:focus { border-color: #1E1E5E; background: #fff; box-shadow: 0 0 0 3px rgba(30,30,94,0.1); }
.tie-gate-input::placeholder { color: #94a3b8; }
.tie-gate-cta { background: #F6B820 !important; color: #0a0f1e !important; border: none !important; padding: 1.05rem 1.5rem; border-radius: 10px; font-size: 1rem; font-weight: 800; cursor: pointer; width: 100%; font-family: inherit; letter-spacing: -0.01em; box-shadow: 0 4px 16px rgba(246,184,32,0.35); }
.tie-gate-cta:hover { background: #e8a800; }
.tie-gate-micro { text-align: center; color: #94a3b8; font-size: 0.72rem; margin-top: 0.55rem; line-height: 1.5; }
.tie-gate-micro strong { color: #64748b; }
.tie-gate-trust { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid #f1f5f9; flex-wrap: wrap; }
.tie-gate-trust-item { font-size: 0.69rem; color: #94a3b8; font-weight: 500; }
.tie-gate-trust-sep { color: #cbd5e1; font-size: 0.69rem; }
@media (max-width: 540px) {
  .tie-gate-body { padding: 1.5rem 1.25rem 1.25rem; }
  .tie-gate-headline { font-size: 1.3rem; }
  .tie-gate-fields-row { flex-direction: column; }
  .tie-gate-modal { border-radius: 14px; }
}

/* ============================================================
   27. GLOBAL FALLBACK STYLES
   These rules target sections that may render outside
   .tie-plugin-root due to HTML parsing edge cases.
   ============================================================ */

/* FAQ Section */
section.tie-faq-section,
.tie-faq-outer {
  padding: 2.5rem 1.5rem !important;
  background: #fff !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}
section.tie-faq-section h2,
.tie-faq-outer h2 { color: #0f172a !important; font-size: 1.5rem !important; font-weight: 800 !important; margin-bottom: 1.5rem !important; letter-spacing: -0.02em !important; }
section.tie-faq-section .tie-faq-list,
.tie-faq-outer .tie-faq-list { list-style: none !important; padding: 0 !important; margin: 0 !important; }
section.tie-faq-section .tie-faq-item,
.tie-faq-outer .tie-faq-item { border-bottom: 1px solid #e2e8f0 !important; overflow: hidden !important; }
section.tie-faq-section .tie-faq-question,
.tie-faq-outer .tie-faq-question { padding: 1.125rem 0 !important; cursor: pointer !important; font-weight: 600 !important; color: #0f172a !important; display: flex !important; justify-content: space-between !important; align-items: center !important; font-size: 0.9375rem !important; user-select: none !important; line-height: 1.45 !important; border: none !important; background: none !important; width: 100% !important; text-align: left !important; outline: none !important; box-shadow: none !important; -webkit-appearance: none !important; appearance: none !important; }
section.tie-faq-section .tie-faq-question:hover,
.tie-faq-outer .tie-faq-question:hover { color: #1E1E5E !important; }
section.tie-faq-section .tie-faq-question::after,
.tie-faq-outer .tie-faq-question::after { content: '+' !important; font-size: 1.25rem !important; font-weight: 300 !important; color: #94a3b8 !important; flex-shrink: 0 !important; margin-left: 1rem !important; }
section.tie-faq-section .tie-faq-question.open::after,
.tie-faq-outer .tie-faq-question.open::after,
section.tie-faq-section .tie-faq-item.open > .tie-faq-question::after,
.tie-faq-outer .tie-faq-item.open > .tie-faq-question::after { content: '−' !important; color: #1E1E5E !important; }
section.tie-faq-section .tie-faq-answer,
.tie-faq-outer .tie-faq-answer { max-height: 0 !important; overflow: hidden !important; transition: max-height 0.3s ease !important; }
section.tie-faq-section .tie-faq-answer.open,
.tie-faq-outer .tie-faq-answer.open,
section.tie-faq-section .tie-faq-item.open > .tie-faq-answer,
.tie-faq-outer .tie-faq-item.open > .tie-faq-answer { max-height: 600px !important; }
section.tie-faq-section .tie-faq-answer p,
.tie-faq-outer .tie-faq-answer p { color: #374151 !important; padding: 0 0 1.125rem !important; font-size: 0.9rem !important; line-height: 1.7 !important; margin: 0 !important; }

/* Bottom CTA Section */
section.tie-bottom-cta {
  background: linear-gradient(145deg, #0f1240 0%, #1E1E5E 100%) !important;
  color: #fff !important;
  padding: 3.5rem 1.5rem !important;
  text-align: center !important;
  margin-top: 2rem !important;
  box-sizing: border-box !important;
}
section.tie-bottom-cta h2 { color: #fff !important; font-size: 1.875rem !important; font-weight: 800 !important; margin-bottom: 0.75rem !important; line-height: 1.2 !important; letter-spacing: -0.02em !important; }
section.tie-bottom-cta p { color: rgba(255,255,255,0.82) !important; font-size: 1rem !important; margin-bottom: 1.5rem !important; line-height: 1.65 !important; }
section.tie-bottom-cta .tie-container { max-width: 900px !important; margin: 0 auto !important; }
section.tie-bottom-cta .tie-bottom-cta-actions { display: flex !important; justify-content: center !important; gap: 0.875rem !important; flex-wrap: wrap !important; }
section.tie-bottom-cta .tie-btn,
section.tie-bottom-cta a.tie-btn-primary,
section.tie-bottom-cta a.tie-cta-button { display: inline-block !important; padding: 0.9375rem 2rem !important; border-radius: 8px !important; font-weight: 700 !important; font-size: 0.9375rem !important; text-decoration: none !important; cursor: pointer !important; border: none !important; }
section.tie-bottom-cta .tie-btn-primary,
section.tie-bottom-cta a.tie-btn-primary { background: #F6B820 !important; color: #0a0f1e !important; box-shadow: 0 2px 8px rgba(246,184,32,0.30) !important; }
section.tie-bottom-cta .tie-btn-ghost,
section.tie-bottom-cta a.tie-btn-ghost { background: transparent !important; color: #F6B820 !important; border: 2px solid #F6B820 !important; padding: 0.9375rem 2rem !important; border-radius: 8px !important; font-weight: 700 !important; font-size: 0.9375rem !important; text-decoration: none !important; }
section.tie-bottom-cta a:hover { opacity: 0.9 !important; text-decoration: none !important; }

/* Mid-content CTA Section */
section.tie-cta-section {
  background: linear-gradient(135deg, #1E1E5E 0%, #2a2a7a 100%) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  padding: 2.5rem 1.5rem !important;
  text-align: center !important;
  margin: 2rem auto !important;
  max-width: 900px !important;
  box-sizing: border-box !important;
}
section.tie-cta-section h2 { color: #fff !important; font-size: 1.4375rem !important; font-weight: 800 !important; margin-bottom: 0.75rem !important; }
section.tie-cta-section p { color: rgba(255,255,255,0.82) !important; font-size: 0.9375rem !important; margin-bottom: 1.25rem !important; line-height: 1.65 !important; }
section.tie-cta-section .tie-cta-button,
section.tie-cta-section a.tie-cta-button { background: #F6B820 !important; color: #0a0f1e !important; display: inline-block !important; padding: 0.875rem 2rem !important; border-radius: 8px !important; font-weight: 700 !important; text-decoration: none !important; font-size: 0.9375rem !important; }
section.tie-cta-section .tie-cta-button:hover,
section.tie-cta-section a.tie-cta-button:hover { background: #e8a800 !important; color: #0a0f1e !important; }

/* Responsive fallback */
@media (max-width: 768px) {
  .tie-sticky-cta-bar { display: flex !important; }
}
@media (max-width: 640px) {
  section.tie-bottom-cta h2 { font-size: 1.375rem !important; }
  section.tie-bottom-cta .tie-bottom-cta-actions { flex-direction: column !important; align-items: center !important; }
  section.tie-cta-section { padding: 1.75rem 1rem !important; }
  section.tie-cta-section h2 { font-size: 1.25rem !important; }
  section.tie-faq-section,
  .tie-faq-outer { padding: 1.75rem 1rem !important; }
}

/* === END DESIGN SYSTEM v2.19.14 === */

/* =============================================================
   SUPPLEMENTAL — Missing class aliases & additional components
   Added v2.19.14 to cover all HTML/PHP class names in use
   ============================================================= */

/* ── Hub Hero (uses .tie-hero, not .tie-hero-section) ─────── */
.tie-plugin-root .tie-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 280px);
  gap: 2rem;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}
.tie-plugin-root .tie-hero {
  background: linear-gradient(135deg, #1E1E5E 0%, #121212 60%, #1a1a4e 100%);
  position: relative;
  overflow: visible;
  padding: 72px 0 56px;
}
.tie-plugin-root .tie-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 70% 50%, rgba(88,88,255,0.15) 0%, transparent 70%);
  pointer-events: none;
}
.tie-plugin-root .tie-hero-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #F6B820;
  margin-bottom: 16px;
}
.tie-plugin-root .tie-hero-search-label {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 10px;
  font-weight: 500;
}
.tie-plugin-root .tie-hero-search-wrap {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 10px;
  overflow: visible;
  box-shadow: 0 4px 24px rgba(0,0,0,0.25);
  max-width: 100%;
  width: 100%;
  position: relative;
}
.tie-plugin-root .tie-hero-search-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 16px 20px;
  font-size: 15px;
  color: #121212;
  background: transparent;
  font-family: inherit;
}
.tie-plugin-root .tie-hero-search-btn {
  background: #F6B820;
  color: #121212;
  border: none;
  padding: 16px 28px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}
.tie-plugin-root .tie-hero-search-btn:hover { background: #e5a910; }
.tie-plugin-root .tie-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.tie-plugin-root .tie-hero-tag {
  background: rgba(255,255,255,0.1) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  border-radius: 20px !important;
  padding: 5px 14px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  text-decoration: none !important;
}
.tie-plugin-root .tie-hero-tag:hover {
  background: rgba(246,184,32,0.2) !important;
  border-color: #F6B820 !important;
  color: #F6B820 !important;
  text-decoration: none !important;
}
.tie-plugin-root .tie-hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 24px;
}
.tie-plugin-root .tie-hero-trust-item {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  font-weight: 500;
}
.tie-plugin-root .tie-hero-trust-item::before {
  content: '✓ ';
  color: #F6B820;
}
.tie-plugin-root .tie-hero-stat-item {
  text-align: center;
  padding: 20px 24px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
}

/* ── Section wrappers ─────────────────────────────────────── */
.tie-plugin-root .tie-section {
  padding: 64px 0;
}
.tie-plugin-root .tie-section-gray {
  background: #f8f9fa;
  padding: 64px 0;
}
.tie-plugin-root .tie-section-navy {
  background: linear-gradient(135deg, #1E1E5E 0%, #121212 100%);
  color: #fff;
  padding: 64px 0;
}
.tie-plugin-root .tie-section-intro {
  font-size: 17px;
  color: #555;
  max-width: 640px;
  line-height: 1.7;
  margin-bottom: 32px;
}
.tie-plugin-root .tie-content-wrapper {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}
.tie-plugin-root .tie-content-section {
  margin-bottom: 48px;
}

/* ── Typography helpers ───────────────────────────────────── */
.tie-plugin-root .tie-h2 {
  font-size: 28px;
  font-weight: 700;
  color: #1E1E5E;
  margin-bottom: 16px;
  line-height: 1.3;
}
.tie-plugin-root .tie-h3 {
  font-size: 20px;
  font-weight: 700;
  color: #1E1E5E;
  margin-bottom: 12px;
}
.tie-plugin-root .tie-h4 {
  font-size: 16px;
  font-weight: 700;
  color: #1E1E5E;
  margin-bottom: 8px;
}
.tie-plugin-root .tie-lead {
  font-size: 18px;
  color: #444;
  line-height: 1.7;
  margin-bottom: 24px;
}
.tie-plugin-root .tie-body {
  font-size: 15px;
  color: #444;
  line-height: 1.75;
}

/* ── Callout / practitioner note ─────────────────────────── */
.tie-plugin-root .tie-callout {
  background: #fffbeb;
  border-left: 4px solid #F6B820;
  border-radius: 0 8px 8px 0;
  padding: 20px 24px;
  margin: 24px 0;
}
.tie-plugin-root .tie-practitioner-note {
  background: #f0f4ff;
  border-left: 4px solid #5858FF;
  border-radius: 0 8px 8px 0;
  padding: 20px 24px;
  margin: 24px 0;
}
.tie-plugin-root .tie-practitioner-note-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5858FF;
  margin-bottom: 8px;
}
.tie-plugin-root .tie-checklist-box {
  background: #f8f9fa;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 24px;
  margin: 24px 0;
}
.tie-plugin-root .tie-example-box-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #F6B820;
  margin-bottom: 8px;
}
.tie-plugin-root .tie-example-note {
  font-size: 13px;
  color: #666;
  font-style: italic;
  margin-top: 8px;
}

/* ── Step component ───────────────────────────────────────── */
.tie-plugin-root .tie-step {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  align-items: flex-start;
}
.tie-plugin-root .tie-step-num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: #1E1E5E;
  color: #F6B820;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

/* ── Authority strip ─────────────────────────────────────── */
.tie-plugin-root .tie-authority {
  background: #f0f4ff;
  border: 1px solid #dde3f5;
  border-radius: 8px;
  padding: 12px 20px;
  margin: 16px 0 24px;
  font-size: 12px;
  color: #444;
}
.tie-plugin-root .tie-authority-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.tie-plugin-root .tie-authority-value {
  font-weight: 600;
  color: #1E1E5E;
}

/* ── Audit risk ───────────────────────────────────────────── */
.tie-plugin-root .tie-audit-risk-bar {
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  overflow: hidden;
  margin: 8px 0;
}
.tie-plugin-root .tie-audit-risk-triggers {
  font-size: 13px;
  color: #555;
  line-height: 1.6;
}

/* ── Verified strip ───────────────────────────────────────── */
.tie-plugin-root .tie-verified {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0;
}
.tie-plugin-root .tie-verified-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #16a34a;
  font-weight: 500;
}
.tie-plugin-root .tie-verified-check {
  color: #16a34a;
  font-weight: 700;
}

/* ── FAQ ──────────────────────────────────────────────────── */
.tie-plugin-root .tie-faq {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 8px;
}
.tie-plugin-root .tie-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  cursor: pointer;
  background: #fff;
  transition: background 0.2s;
}
.tie-plugin-root .tie-faq-q:hover { background: #f8f9fa; }
.tie-plugin-root .tie-faq-q-text {
  font-size: 15px;
  font-weight: 600;
  color: #1E1E5E;
  flex: 1;
}
.tie-plugin-root .tie-faq-icon,
.tie-plugin-root .tie-faq-chevron {
  color: #5858FF;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.tie-plugin-root .tie-faq-a {
  padding: 0 20px 18px;
  font-size: 14px;
  color: #555;
  line-height: 1.7;
  background: #fff;
}
.tie-plugin-root .tie-faq-intro {
  font-size: 16px;
  color: #444;
  margin-bottom: 24px;
}

/* ── Tables ───────────────────────────────────────────────── */
.tie-plugin-root .tie-table,
.tie-plugin-root .tie-data-table,
.tie-plugin-root .tie-comparison-table,
.tie-plugin-root .tie-state-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.tie-plugin-root .tie-table th,
.tie-plugin-root .tie-data-table th,
.tie-plugin-root .tie-comparison-table th,
.tie-plugin-root .tie-state-table th {
  background: #1E1E5E;
  color: #fff;
  padding: 12px 16px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.tie-plugin-root .tie-table td,
.tie-plugin-root .tie-data-table td,
.tie-plugin-root .tie-comparison-table td,
.tie-plugin-root .tie-state-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  color: #333;
  vertical-align: top;
}
.tie-plugin-root .tie-table tr:nth-child(even) td,
.tie-plugin-root .tie-data-table tr:nth-child(even) td,
.tie-plugin-root .tie-comparison-table tr:nth-child(even) td,
.tie-plugin-root .tie-state-table tr:nth-child(even) td {
  background: #fafafa;
}
.tie-plugin-root .tie-table-wrap,
.tie-plugin-root .tie-table-wrapper,
.tie-plugin-root .tie-comparison-table-wrapper,
.tie-plugin-root .tie-state-table-wrapper {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  margin: 24px 0;
}
.tie-plugin-root .tie-table-note {
  font-size: 12px;
  color: #888;
  margin-top: 8px;
  font-style: italic;
}
.tie-plugin-root .tie-comparison {
  margin: 24px 0;
}

/* ── Inline CTAs ──────────────────────────────────────────── */
.tie-plugin-root .tie-content-cta {
  background: linear-gradient(135deg, #1E1E5E 0%, #2d2d7e 100%);
  border-radius: 12px;
  padding: 32px;
  margin: 32px 0;
  color: #fff;
}
.tie-plugin-root .tie-content-cta-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #F6B820;
  margin-bottom: 10px;
}
.tie-plugin-root .tie-content-cta-title {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}
.tie-plugin-root .tie-content-cta-text {
  font-size: 14px;
  color: rgba(255,255,255,0.75);
  line-height: 1.6;
  margin-bottom: 20px;
}
.tie-plugin-root .tie-content-cta-inner {
  max-width: 600px;
}
.tie-plugin-root .tie-content-cta-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.tie-plugin-root .tie-inline-cta-content {
  flex: 1;
}
.tie-plugin-root .tie-inline-cta-title {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}
.tie-plugin-root .tie-inline-cta-action {
  display: inline-block;
  background: #F6B820;
  color: #121212;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  transition: background 0.2s;
}
.tie-plugin-root .tie-inline-cta-action:hover { background: #e5a910; color: #121212; }

/* ── Bottom CTA section ───────────────────────────────────── */
.tie-plugin-root .tie-bottom-cta-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.tie-plugin-root .tie-bottom-cta-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #F6B820;
  margin-bottom: 12px;
}
.tie-plugin-root .tie-bottom-cta-title {
  font-size: 30px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 12px;
  line-height: 1.25;
}
.tie-plugin-root .tie-bottom-cta-subtitle,
.tie-plugin-root .tie-bottom-cta-sub {
  font-size: 16px;
  color: rgba(255,255,255,0.7);
  margin-bottom: 8px;
}
.tie-plugin-root .tie-bottom-cta-text {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 28px;
}
.tie-plugin-root .tie-bottom-cta-body {
  font-size: 15px;
  color: rgba(255,255,255,0.75);
  line-height: 1.65;
  margin-bottom: 28px;
}

/* ── Category nav (hub page) ────────────────────────────── */
.tie-plugin-root .tie-category-nav {
  background: #1E1E5E;
  border-bottom: 3px solid #F6B820;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 12px rgba(0,0,0,0.18);
}
/* Mobile toggle button — hidden on desktop */
.tie-plugin-root .tie-category-nav-toggle {
  display: none;
  width: 100%;
  background: transparent;
  border: none;
  padding: 14px 20px;
  cursor: pointer;
  align-items: center;
  gap: 10px;
  text-align: left;
  color: #fff;
}
.tie-plugin-root .tie-category-nav-toggle .toggle-label {
  font-size: 14px;
  font-weight: 700;
  color: #F6B820;
  flex: 1;
}
.tie-plugin-root .tie-category-nav-toggle .toggle-meta {
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  white-space: nowrap;
}
.tie-plugin-root .tie-category-nav-toggle .toggle-chevron {
  color: #F6B820;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
.tie-plugin-root .tie-category-nav-inner {
  display: flex;
  gap: 0;
  overflow-x: auto;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  scrollbar-width: none;
  align-items: stretch;
}
.tie-plugin-root .tie-category-nav-inner::-webkit-scrollbar { display: none; }
.tie-plugin-root .tie-category-tab {
  padding: 16px 22px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  white-space: nowrap;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -3px;
  transition: all 0.2s;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.01em;
}
.tie-plugin-root .tie-category-tab:hover {
  color: #fff;
  border-bottom-color: rgba(246,184,32,0.5);
  background: rgba(255,255,255,0.05);
}
.tie-plugin-root .tie-category-tab.active {
  color: #F6B820;
  border-bottom-color: #F6B820;
  background: rgba(246,184,32,0.08);
}
.tie-plugin-root .tie-category-tab .tab-count {
  background: rgba(246,184,32,0.2);
  color: #F6B820;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  letter-spacing: 0;
}
.tie-plugin-root .tie-category-tab.active .tab-count {
  background: #F6B820;
  color: #1E1E5E;
}
/* Mobile: show toggle, stack tabs vertically */
@media (max-width: 767px) {
  .tie-plugin-root .tie-category-nav-toggle { display: flex; }
  .tie-plugin-root .tie-category-nav--mobile .tie-category-nav-inner {
    flex-direction: column;
    padding: 8px 0 12px;
    border-top: 1px solid rgba(255,255,255,0.1);
    gap: 0;
  }
  .tie-plugin-root .tie-category-nav--mobile .tie-category-tab {
    padding: 12px 20px;
    border-bottom: none;
    border-left: 3px solid transparent;
    margin-bottom: 0;
  }
  .tie-plugin-root .tie-category-nav--mobile .tie-category-tab.active,
  .tie-plugin-root .tie-category-nav--mobile .tie-category-tab:hover {
    border-left-color: #F6B820;
    border-bottom: none;
    background: rgba(246,184,32,0.08);
  }
}

/* ── Search chips ─────────────────────────────────────────── */
.tie-plugin-root .tie-search-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.tie-plugin-root .tie-chip,
.tie-plugin-root .tie-form-chip,
.tie-plugin-root button.tie-chip,
.tie-plugin-root span.tie-chip,
.tie-plugin-root .tie-inpage-chips .tie-chip,
.tie-plugin-root .tie-inpage-search-chips .tie-chip,
.tie-plugin-root .tie-search-chips .tie-chip {
  background: rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  border-radius: 20px !important;
  padding: 5px 14px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  text-decoration: none !important;
  display: inline-block !important;
  line-height: 1.5 !important;
  outline: none !important;
  box-shadow: none !important;
  font-family: inherit !important;
}
.tie-plugin-root .tie-chip:hover,
.tie-plugin-root .tie-form-chip:hover,
.tie-plugin-root button.tie-chip:hover,
.tie-plugin-root .tie-inpage-chips .tie-chip:hover,
.tie-plugin-root .tie-inpage-search-chips .tie-chip:hover {
  background: rgba(246,184,32,0.2) !important;
  border-color: #F6B820 !important;
  color: #F6B820 !important;
}

/* ── In-page search (library pages) ──────────────────────── */
.tie-plugin-root .tie-inpage-search {
  background: #1E1E5E;
  padding: 16px 0;
  width: 100%;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: relative;
  z-index: 100;
}
.tie-plugin-root .tie-inpage-search-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.tie-plugin-root .tie-inpage-search-wrap {
  position: relative;
  flex: 1;
  min-width: 200px;
}
/* === SECTION INDEX: search row layout + icon size fix (v2.21.3) ===
   Problem: SVG icon had no explicit width/height so WP theme CSS
   (svg { max-width:100% }) made it fill the entire row, pushing
   the input off-screen.
   Fix: constrain icon to 20×20px, lay out row as flex.
   ================================================================ */
.tie-plugin-root .tie-inpage-search-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 680px !important;
  position: relative !important;
}
.tie-plugin-root .tie-inpage-search-icon {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  flex-shrink: 0 !important;
  color: rgba(255,255,255,0.55) !important;
  pointer-events: none !important;
  display: inline-block !important;
  position: static !important;
  transform: none !important;
  vertical-align: middle !important;
}
.tie-plugin-root .tie-inpage-search-row .tie-inpage-search-input {
  flex: 1 !important;
  min-width: 0 !important;
  width: 100% !important;
}
.tie-plugin-root .tie-search-icon {
  color: #888;
  font-size: 16px;
}

/* ── Module header / view-all ─────────────────────────────── */
.tie-plugin-root .tie-module-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.tie-plugin-root .tie-module-view-all {
  font-size: 13px;
  font-weight: 600;
  color: #5858FF;
  text-decoration: none;
}
.tie-plugin-root .tie-module-view-all:hover { text-decoration: underline; }

/* ── Notice list ──────────────────────────────────────────── */
.tie-plugin-root .tie-notice-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tie-plugin-root .tie-notice-content {
  flex: 1;
}
.tie-plugin-root .tie-notice-number {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5858FF;
  margin-bottom: 4px;
}
.tie-plugin-root .tie-notice-title {
  font-size: 15px;
  font-weight: 700;
  color: #1E1E5E;
  margin-bottom: 4px;
}
.tie-plugin-root .tie-notice-desc {
  font-size: 13px;
  color: #666;
  line-height: 1.5;
}
.tie-plugin-root .tie-notice-severity {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

/* ── Gate ─────────────────────────────────────────────────── */
.tie-plugin-root .tie-gated-content {
  position: relative;
}
.tie-plugin-root .tie-gate-preview-blur {
  filter: blur(4px);
  pointer-events: none;
  user-select: none;
  max-height: 200px;
  overflow: hidden;
}
.tie-plugin-root .tie-gate-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #F6B820;
  margin-bottom: 10px;
}
.tie-plugin-root .tie-gate-title {
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 12px;
}
.tie-plugin-root .tie-gate-disclaimer {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  margin-top: 12px;
}
.tie-plugin-root .tie-gate-name,
.tie-plugin-root .tie-gate-email {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 14px;
  margin-bottom: 12px;
  font-family: inherit;
}
.tie-plugin-root .tie-gate-name::placeholder,
.tie-plugin-root .tie-gate-email::placeholder { color: rgba(255,255,255,0.4); }
.tie-plugin-root .tie-gate-submit {
  width: 100%;
  background: #F6B820 !important;
  color: #121212 !important;
  border: none !important;
  padding: 14px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}
.tie-plugin-root .tie-gate-submit:hover { background: #e5a910; }

/* ── Strategy card header ─────────────────────────────────── */
.tie-plugin-root .tie-strategy-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.tie-plugin-root .tie-strategy-cta-inline {
  display: inline-block;
  background: #F6B820;
  color: #121212;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 13px;
  margin-top: 12px;
  transition: background 0.2s;
}
.tie-plugin-root .tie-strategy-cta-inline:hover { background: #e5a910; color: #121212; }

/* ── Sidebar related strategies ──────────────────────────── */
.tie-plugin-root .tie-sidebar-section {
  margin-bottom: 24px;
}
.tie-plugin-root .tie-sidebar-related-strategies {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tie-plugin-root .tie-sidebar-related-strategies-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 10px;
}

/* ── Auto-link ────────────────────────────────────────────── */
.tie-plugin-root .tie-auto-link {
  color: #5858FF;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tie-plugin-root .tie-auto-link:hover { color: #1E1E5E; }

/* ── Mobile: missing classes ──────────────────────────────── */
@media (max-width: 768px) {
  .tie-plugin-root .tie-hero { padding: 48px 0 36px; }
  .tie-plugin-root .tie-hero-search-wrap { max-width: 100%; }
  .tie-plugin-root .tie-hero-stat-item { padding: 14px 16px; }
  .tie-plugin-root .tie-content-cta { padding: 24px 20px; }
  .tie-plugin-root .tie-content-cta-title { font-size: 18px; }
  .tie-plugin-root .tie-bottom-cta-title { font-size: 22px; }
  .tie-plugin-root .tie-category-nav { position: static; }
  .tie-plugin-root .tie-section,
  .tie-plugin-root .tie-section-gray,
  .tie-plugin-root .tie-section-navy { padding: 40px 0; }
}


/* ============================================================
   MOBILE FIX PATCH v2.19.14 — Applied from screenshot review
   Fixes: category nav text visibility, bottom CTA full-width,
   two-column grid collapse, inline CTA full-width,
   card grid single column, sticky CTA bar alignment
   ============================================================ */

/* ── FIX 1: Category Nav — Tab text visibility on dark background ── */
/* The tabs were showing dark/invisible text on the navy background.
   Ensure all inactive tab text is white/light, active is yellow. */
.tie-plugin-root .tie-category-tab {
  color: rgba(255,255,255,0.82) !important;
}
.tie-plugin-root .tie-category-tab:hover {
  color: #ffffff !important;
  background: rgba(255,255,255,0.07) !important;
  text-decoration: none !important;
}
.tie-plugin-root .tie-category-tab.active {
  color: #F6B820 !important;
  background: rgba(246,184,32,0.10) !important;
}
/* Tab count pill — inactive: yellow tint; active: solid yellow */
.tie-plugin-root .tie-category-tab .tab-count {
  background: rgba(246,184,32,0.22) !important;
  color: #F6B820 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 10px !important;
}
.tie-plugin-root .tie-category-tab.active .tab-count {
  background: #F6B820 !important;
  color: #1E1E5E !important;
}
/* Mobile: when nav is in mobile mode (toggle shown), tabs in dropdown
   must also have white text */
.tie-plugin-root .tie-category-nav--mobile .tie-category-tab {
  color: rgba(255,255,255,0.85) !important;
  border-bottom: none !important;
  border-left: 3px solid transparent !important;
  margin-bottom: 0 !important;
  padding: 13px 20px !important;
}
.tie-plugin-root .tie-category-nav--mobile .tie-category-tab.active,
.tie-plugin-root .tie-category-nav--mobile .tie-category-tab:hover {
  color: #F6B820 !important;
  border-left-color: #F6B820 !important;
  background: rgba(246,184,32,0.10) !important;
}

/* ── FIX 2: Two-Column Content Grid — Collapse on mobile ── */
/* tie-content-layout is used on some pages and was missing from
   responsive rules. Add it alongside tie-content-grid. */
@media (max-width: 900px) {
  .tie-plugin-root .tie-content-layout {
    grid-template-columns: 1fr !important;
  }
  .tie-plugin-root .tie-sidebar-col,
  .tie-plugin-root .tie-page-sidebar {
    position: static !important;
  }
}

/* ── FIX 3: Bottom CTA Section — Full width on mobile ── */
/* section.tie-cta-section has max-width:900px and border-radius:12px
   which makes it look like a floating box on narrow screens.
   On mobile, remove the max-width constraint and border-radius
   so it spans the full viewport width. */
@media (max-width: 767px) {
  section.tie-cta-section {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 2rem 1.25rem !important;
    box-sizing: border-box !important;
  }
  section.tie-cta-section h2 {
    font-size: 1.3125rem !important;
    line-height: 1.3 !important;
  }
  section.tie-cta-section p {
    font-size: 0.9375rem !important;
    color: rgba(255,255,255,0.85) !important;
  }
  /* Also fix .tie-cta-section div (used inside .tie-plugin-root) */
  .tie-plugin-root .tie-cta-section {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 2rem 1.25rem !important;
  }
  .tie-plugin-root .tie-cta-section h2,
  .tie-plugin-root .tie-cta-section h3 {
    font-size: 1.3125rem !important;
  }
}

/* ── FIX 4: Bottom CTA section — ensure text is visible ── */
section.tie-cta-section h2,
section.tie-cta-section h3 {
  color: #ffffff !important;
}
section.tie-cta-section p {
  color: rgba(255,255,255,0.85) !important;
}

/* ── FIX 5: Inline CTA — Full width on mobile ── */
/* The .tie-inline-cta and .kam-code-advertorial boxes appear as
   narrow floating cards on mobile. Make them full-width. */
@media (max-width: 767px) {
  .tie-plugin-root .tie-inline-cta {
    flex-direction: column !important;
    text-align: center !important;
    gap: 1.25rem !important;
    border-radius: 0 !important;
    margin: 1rem 0 !important;
    padding: 1.5rem 1.25rem !important;
  }
  .tie-plugin-root .tie-inline-cta-actions {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }
  .tie-plugin-root .kam-code-advertorial {
    border-radius: 0 !important;
    margin: 1rem 0 !important;
    padding: 1.5rem 1.25rem !important;
  }
  .tie-plugin-root .tie-content-cta {
    border-radius: 0 !important;
    margin: 1rem 0 !important;
    padding: 1.5rem 1.25rem !important;
  }
  .tie-plugin-root .tie-content-cta-strip {
    border-radius: 0 !important;
    margin: 1rem 0 !important;
    padding: 1.5rem 1.25rem !important;
  }
}

/* ── FIX 6: Card grids — single column on small mobile ── */
@media (max-width: 480px) {
  .tie-plugin-root .tie-strategy-grid {
    grid-template-columns: 1fr !important;
  }
  .tie-plugin-root .tie-hub-grid {
    grid-template-columns: 1fr !important;
  }
  .tie-plugin-root .tie-notice-grid {
    grid-template-columns: 1fr !important;
  }
  .tie-plugin-root .tie-related-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── FIX 7: Sticky CTA bar — proper alignment and text ── */
/* The sticky bar at the bottom of mobile screens needs proper
   flex alignment and readable text */
.tie-sticky-cta-bar {
  display: none !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: #1E1E5E !important;
  padding: 0.75rem 1rem !important;
  z-index: 9999 !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  box-shadow: 0 -2px 16px rgba(0,0,0,0.30) !important;
  border-top: 2px solid #F6B820 !important;
}
.tie-sticky-cta-bar-text {
  color: #ffffff !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  flex: 1 !important;
  line-height: 1.3 !important;
}
.tie-sticky-cta-bar .tie-btn-primary,
.tie-sticky-cta-bar a.tie-btn-primary,
.tie-sticky-cta-bar .tie-cta-button {
  background: #F6B820 !important;
  color: #0a0f1e !important;
  padding: 0.625rem 1rem !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 0.8125rem !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}
@media (max-width: 768px) {
  .tie-sticky-cta-bar { display: flex !important; }
}

/* ── FIX 8: Hero stats — better wrapping on small screens ── */
@media (max-width: 480px) {
  .tie-plugin-root .tie-strategy-hero-stats,
  .tie-plugin-root .tie-hero-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.625rem !important;
  }
  .tie-plugin-root .tie-hub-stats {
    gap: 1.25rem !important;
    flex-wrap: wrap !important;
  }
  .tie-plugin-root .tie-page-hero-stats {
    gap: 1.25rem !important;
    flex-wrap: wrap !important;
  }
}

/* ── FIX 9: Bottom CTA "Ready to Implement" section — full width ── */
/* The section.tie-bottom-cta with inline styles still needs
   the container inside it to not over-constrain on mobile */
@media (max-width: 767px) {
  section.tie-bottom-cta {
    padding: 2.5rem 1.25rem !important;
  }
  section.tie-bottom-cta .tie-container {
    max-width: 100% !important;
    padding: 0 !important;
  }
  section.tie-bottom-cta h2 {
    font-size: 1.375rem !important;
  }
  section.tie-bottom-cta .tie-bottom-cta-actions {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.75rem !important;
  }
  section.tie-bottom-cta .tie-btn,
  section.tie-bottom-cta a.tie-btn-primary,
  section.tie-bottom-cta a.tie-btn-ghost {
    width: 100% !important;
    max-width: 320px !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

/* ── FIX 10: FAQ section — ensure text is visible ── */
.tie-plugin-root .tie-faq-question {
  color: #0f172a !important;
}
section.tie-faq-section .tie-faq-question,
.tie-faq-outer .tie-faq-question {
  color: #0f172a !important;
}

/* ── FIX 11: Content grid padding on mobile ── */
@media (max-width: 767px) {
  .tie-plugin-root .tie-content-grid {
    grid-template-columns: 1fr !important;
    padding: 1.5rem 1rem !important;
    gap: 1.5rem !important;
  }
  .tie-plugin-root .tie-sidebar,
  .tie-plugin-root aside.tie-sidebar,
  .tie-plugin-root div.tie-sidebar {
    position: static !important;
  }
}

/* ── FIX 12: Category nav — mobile toggle always visible on mobile ── */
/* On mobile, the toggle button must be visible and the inner hidden
   until toggled. The JS handles the display:none/flex but we need
   to ensure the toggle button itself is always shown on mobile. */
@media (max-width: 767px) {
  .tie-plugin-root .tie-category-nav-toggle {
    display: flex !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    padding: 14px 20px !important;
    cursor: pointer !important;
    align-items: center !important;
    gap: 10px !important;
    text-align: left !important;
    color: #fff !important;
  }
  .tie-plugin-root .tie-category-nav-toggle .toggle-label {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #F6B820 !important;
    flex: 1 !important;
  }
  .tie-plugin-root .tie-category-nav-toggle .toggle-meta {
    font-size: 11px !important;
    color: rgba(255,255,255,0.65) !important;
    white-space: nowrap !important;
  }
  .tie-plugin-root .tie-category-nav-toggle .toggle-chevron {
    color: #F6B820 !important;
    flex-shrink: 0 !important;
  }
}

/* === END MOBILE FIX PATCH v2.19.14 === */

/* ============================================================
   DESKTOP FIX PATCH v2.19.15 — Applied 2026-04-14
   Fixes:
   1. --white CSS variable undefined → navy text on navy bg
   2. "Ready to Reduce Your Tax Burden?" CTA — full width
   3. Category nav desktop/mobile toggle visibility
   ============================================================ */

/* ── FIX D1: Define --white CSS variable ── */
.tie-plugin-root {
  --white: #ffffff;
  --navy: #1E1E5E;
  --gold: #F6B820;
  --dark: #0a0f1e;
}

/* ── FIX D2: Ensure headings inside navy sections are white ── */
.tie-plugin-root .tie-section-navy .tie-h2,
.tie-plugin-root .tie-section-navy h2,
.tie-plugin-root .tie-section-navy h3,
.tie-plugin-root .tie-section-navy h4 {
  color: #ffffff !important;
}
.tie-plugin-root .tie-section-navy .tie-body,
.tie-plugin-root .tie-section-navy p {
  color: rgba(255, 255, 255, 0.82) !important;
}
.tie-plugin-root .tie-section-navy .tie-section-label {
  color: #F6B820 !important;
}

/* ── FIX D3: "Ready to Reduce Your Tax Burden?" — full width on all screens ── */
section.tie-cta-section {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  padding: 3.5rem 2rem !important;
  box-sizing: border-box !important;
  text-align: center !important;
}
section.tie-cta-section h2 {
  max-width: 640px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 0.75rem !important;
}
section.tie-cta-section p {
  max-width: 560px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 1.5rem !important;
}

/* ── FIX D4: Also fix .tie-plugin-root .tie-cta-section ── */
.tie-plugin-root .tie-cta-section {
  max-width: 100% !important;
  width: 100% !important;
  margin: 2rem 0 !important;
  border-radius: 0 !important;
  padding: 3rem 2rem !important;
}

/* ── FIX D5: Mobile overrides ── */
@media (max-width: 767px) {
  section.tie-cta-section {
    padding: 2.5rem 1.25rem !important;
  }
  .tie-plugin-root .tie-cta-section {
    padding: 2rem 1.25rem !important;
    margin: 1.5rem 0 !important;
  }
}

/* ── FIX D6: Category nav — desktop shows tabs, mobile shows toggle ── */
@media (min-width: 768px) {
  .tie-plugin-root .tie-category-nav-toggle {
    display: none !important;
  }
  .tie-plugin-root .tie-category-nav-inner {
    display: flex !important;
  }
}

/* === END DESKTOP FIX PATCH v2.19.15 === */


/* ============================================================
   PATCH v2.19.16 — Fix: double CTA, white text on marketplace CTA, white gap
   ============================================================ */

/* FIX 1: Define CSS variables on :root so inline style=background:var(--navy) resolves */
:root {
  --navy: #1E1E5E;
  --white: #ffffff;
  --gold: #F6B820;
  --dark: #0a0f1e;
  --tie-font-display: Inter, sans-serif;
}

/* FIX 2: Force all text inside the inline navy marketplace CTA div to be white */
.tie-plugin-root div[style*="background:var(--navy)"] .tie-h2,
.tie-plugin-root div[style*="background:var(--navy)"] h2,
.tie-plugin-root div[style*="background: var(--navy)"] .tie-h2,
.tie-plugin-root div[style*="background: var(--navy)"] h2 {
  color: #ffffff !important;
}
.tie-plugin-root div[style*="background:var(--navy)"] .tie-body,
.tie-plugin-root div[style*="background:var(--navy)"] p,
.tie-plugin-root div[style*="background: var(--navy)"] .tie-body,
.tie-plugin-root div[style*="background: var(--navy)"] p {
  color: rgba(255, 255, 255, 0.85) !important;
}
.tie-plugin-root div[style*="background:var(--navy)"] .tie-section-label,
.tie-plugin-root div[style*="background: var(--navy)"] .tie-section-label {
  color: #F6B820 !important;
}

/* FIX 3: Also target by hardcoded navy hex in case var() does not resolve */
.tie-plugin-root div[style*="background:#1E1E5E"] .tie-h2,
.tie-plugin-root div[style*="background:#1E1E5E"] h2,
.tie-plugin-root div[style*="background:#1e1e5e"] h2 {
  color: #ffffff !important;
}
.tie-plugin-root div[style*="background:#1E1E5E"] .tie-body,
.tie-plugin-root div[style*="background:#1E1E5E"] p,
.tie-plugin-root div[style*="background:#1e1e5e"] p {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* FIX 4: Remove white gap between marketplace CTA and tie-bottom-cta */
section.tie-bottom-cta {
  margin-top: 0 !important;
}

/* FIX 5: Hide duplicate section.tie-cta-section inside content layout */
.tie-plugin-root .tie-content-layout section.tie-cta-section,
.tie-plugin-root main section.tie-cta-section,
.tie-plugin-root .tie-main-content section.tie-cta-section,
.tie-plugin-root .tie-content-grid section.tie-cta-section {
  display: none !important;
}

/* FIX 6: Ensure tie-bottom-cta text is white */
section.tie-bottom-cta .tie-bottom-cta-title {
  color: #ffffff !important;
  font-size: 1.875rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  margin-bottom: 0.75rem !important;
}
section.tie-bottom-cta .tie-bottom-cta-eyebrow {
  color: #F6B820 !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  margin-bottom: 0.75rem !important;
}
section.tie-bottom-cta .tie-bottom-cta-sub {
  color: rgba(255, 255, 255, 0.82) !important;
}
section.tie-bottom-cta .tie-bottom-cta-inner {
  max-width: 720px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

/* FIX 7: No bottom margin on marketplace CTA div */
.tie-plugin-root div[style*="background:var(--navy)"],
.tie-plugin-root div[style*="background: var(--navy)"] {
  margin-bottom: 0 !important;
}

/* === END PATCH v2.19.16 === */


/* ============================================================
   PATCH v2.19.17 — Fix: double CTA using adjacent sibling selector
   Problem: 228 pages have both section.tie-bottom-cta AND section.tie-cta-section
   Solution: Hide section.tie-cta-section when it immediately follows section.tie-bottom-cta
   This preserves section.tie-cta-section on form pages (154 pages) where it's the only CTA
   ============================================================ */

/* Hide the "Ready to Reduce Your Tax Burden?" section when it comes right after
   the "Ready to Implement These Strategies?" section — removes the double CTA */
section.tie-bottom-cta + section.tie-cta-section {
  display: none !important;
}

/* Also hide it when separated by whitespace/script tags via general sibling */
section.tie-bottom-cta ~ section.tie-cta-section {
  display: none !important;
}

/* Remove the white gap above section.tie-bottom-cta on all pages */
section.tie-bottom-cta {
  margin-top: 0 !important;
}

/* Remove white gap between the marketplace CTA div and section.tie-bottom-cta
   The marketplace CTA div ends with </div></div> then section.tie-bottom-cta starts
   The gap is from margin-top:48px on the section */
/* Already handled above — margin-top: 0 !important */

/* === END PATCH v2.19.17 === */


/* ============================================================
   PATCH v2.19.18 — Fix: white gap (gate disclaimer) + mobile overflow/centering
   Issues:
   1. .tie-gate-disclaimer elements outside the gate overlay create a white gap
      between the marketplace CTA div and section.tie-cta-section
   2. The marketplace CTA div (background:var(--navy)) overflows on mobile —
      content is cut off on the right side, heading/buttons not centered
   ============================================================ */

/* FIX 1: Hide the gate disclaimer elements that appear outside the gate overlay
   These are the "Always free. No credit card. Unsubscribe anytime." paragraphs
   that sit in the page flow between the two navy CTA sections */
.tie-gate-disclaimer {
  display: none !important;
}
div.tie-gate-disclaimer,
p.tie-gate-disclaimer {
  display: none !important;
}

/* FIX 2: Fix mobile overflow on the marketplace CTA div
   The div uses padding:72px 0 but the inner content overflows on narrow screens */
.tie-plugin-root div[style*="background:var(--navy)"],
.tie-plugin-root div[style*="background: var(--navy)"] {
  overflow: hidden !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* FIX 3: Ensure the .tie-container inside the marketplace CTA div is properly centered
   and constrained on mobile */
.tie-plugin-root div[style*="background:var(--navy)"] .tie-container,
.tie-plugin-root div[style*="background: var(--navy)"] .tie-container {
  max-width: 100% !important;
  padding: 0 1.5rem !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

/* FIX 4: Mobile-specific centering for the marketplace CTA content */
@media (max-width: 768px) {
  .tie-plugin-root div[style*="background:var(--navy)"] .tie-container,
  .tie-plugin-root div[style*="background: var(--navy)"] .tie-container {
    padding: 0 1.25rem !important;
    width: 100% !important;
  }
  
  /* Center the heading and ensure it wraps properly */
  .tie-plugin-root div[style*="background:var(--navy)"] .tie-h2,
  .tie-plugin-root div[style*="background: var(--navy)"] .tie-h2 {
    font-size: 1.625rem !important;
    line-height: 1.25 !important;
    text-align: center !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  /* Stack buttons vertically on mobile and make them full width */
  .tie-plugin-root div[style*="background:var(--navy)"] div[style*="display:flex"],
  .tie-plugin-root div[style*="background: var(--navy)"] div[style*="display:flex"],
  .tie-plugin-root div[style*="background:var(--navy)"] div[style*="display: flex"],
  .tie-plugin-root div[style*="background: var(--navy)"] div[style*="display: flex"] {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
  }
  
  /* Make buttons full width on mobile */
  .tie-plugin-root div[style*="background:var(--navy)"] .tie-btn,
  .tie-plugin-root div[style*="background: var(--navy)"] .tie-btn {
    width: 100% !important;
    max-width: 320px !important;
    justify-content: center !important;
  }
  
  /* Center the body text */
  .tie-plugin-root div[style*="background:var(--navy)"] .tie-body,
  .tie-plugin-root div[style*="background: var(--navy)"] .tie-body,
  .tie-plugin-root div[style*="background:var(--navy)"] p,
  .tie-plugin-root div[style*="background: var(--navy)"] p {
    text-align: center !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* === END PATCH v2.19.18 === */


/* ============================================================
   PATCH v2.19.19 — Fix: horizontal overflow causing content cut-off on mobile
   The page is wider than the viewport on mobile causing content to be
   cut off on the right side. Fix with overflow-x hidden on the plugin root
   and ensure the marketplace CTA div is properly constrained.
   ============================================================ */

/* Prevent horizontal overflow on the plugin root */
.tie-plugin-root {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* Ensure the marketplace CTA outer div doesn't cause overflow */
.tie-plugin-root > div,
.tie-plugin-root section {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Mobile: fix the marketplace CTA div specifically */
@media (max-width: 768px) {
  /* The outer navy div */
  .tie-plugin-root div[style*="background:var(--navy)"] {
    padding: 48px 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  
  /* The section label */
  .tie-plugin-root div[style*="background:var(--navy)"] .tie-section-label {
    display: block !important;
    text-align: center !important;
    margin-bottom: 8px !important;
  }
  
  /* The h2 heading — ensure it wraps and doesn't overflow */
  .tie-plugin-root div[style*="background:var(--navy)"] .tie-h2 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    text-align: center !important;
    padding: 0 !important;
  }
  
  /* The body paragraph */
  .tie-plugin-root div[style*="background:var(--navy)"] .tie-body {
    font-size: 0.9375rem !important;
    text-align: center !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
  
  /* Button row — stack vertically */
  .tie-plugin-root div[style*="background:var(--navy)"] div[style*="display:flex"] {
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    gap: 12px !important;
    padding: 0 !important;
  }
  
  /* Individual buttons — full width */
  .tie-plugin-root div[style*="background:var(--navy)"] .tie-btn {
    width: 100% !important;
    max-width: 280px !important;
    text-align: center !important;
    justify-content: center !important;
    display: block !important;
  }
}

/* Also fix the WordPress page wrapper to prevent horizontal scroll */
.entry-content,
.page-content,
article.page,
.wp-site-blocks {
  overflow-x: hidden !important;
}

/* === END PATCH v2.19.19 === */


/* ============================================================
   PATCH v2.19.20 — Fix: white gap between marketplace CTA and tie-cta-section
   The gap is caused by:
   1. section.tie-cta-section has margin: 2rem auto — creates top white space
   2. The closing </div> of #gated-content has implicit bottom padding
   3. The section has max-width: 900px making it a floating card
   Fix: make section.tie-cta-section full-width, zero margin-top,
   and remove border-radius so it blends seamlessly with the page
   ============================================================ */

/* Override the standalone section.tie-cta-section to be full-width edge-to-edge */
section.tie-cta-section {
  margin: 0 !important;
  max-width: 100% !important;
  border-radius: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Also zero out any bottom padding/margin on the gated content wrapper
   that creates the white gap before section.tie-cta-section */
#gated-content {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Zero out any wrapper div that might have bottom spacing */
#gated-content > div:last-child,
#gated-content > section:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* The WordPress entry-content wrapper may add bottom padding */
.entry-content,
.page-content {
  padding-bottom: 0 !important;
}

/* === END PATCH v2.19.20 === */


/* ============================================================
   PATCH v2.19.21 — Fix: 24px margin-top on section.tie-cta-section
   The section is inside .tie-plugin-root so .tie-plugin-root .tie-cta-section
   has higher specificity than section.tie-cta-section alone.
   Use higher specificity selectors to zero out the margin.
   ============================================================ */

/* High-specificity override to zero out the margin-top white gap */
.tie-plugin-root section.tie-cta-section,
.tie-page-content section.tie-cta-section,
.tie-plugin-root .tie-page-content section.tie-cta-section {
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  max-width: 100% !important;
  border-radius: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Also override the inner .tie-plugin-root .tie-cta-section rule */
.tie-plugin-root .tie-cta-section {
  margin: 0 !important;
  margin-top: 0 !important;
  border-radius: 0 !important;
  max-width: 100% !important;
}

/* === END PATCH v2.19.21 === */


/* ============================================================
   PATCH v2.19.22 — Fix: 40px white gap from div.tie-section bottom padding
   The div.tie-section wrapper has padding: 64px 0. The marketplace CTA div
   is inside it and the 40px remaining bottom padding shows as white space
   before section.tie-cta-section.
   Fix: zero out the bottom padding of the last .tie-section in the page.
   ============================================================ */

/* Zero out bottom padding of tie-section when it's the last content section
   (directly before section.tie-cta-section) */
.tie-plugin-root .tie-section:last-of-type {
  padding-bottom: 0 !important;
}

/* More specific: zero out padding-bottom of any tie-section that contains
   the marketplace CTA div (identified by having a child with navy background) */
.tie-plugin-root .tie-section:last-child {
  padding-bottom: 0 !important;
}

/* Also handle the case where tie-section is the last element before the CTA */
.tie-plugin-root > .tie-section:last-child,
.tie-plugin-root > .tie-page-content > .tie-section:last-child {
  padding-bottom: 0 !important;
}

/* === END PATCH v2.19.22 === */


/* ============================================================
   PATCH v2.19.23 — Fix: 40px white gap before section.tie-cta-section
   The gap is from the .tie-page-content wrapper's bottom padding (40px)
   that shows between the marketplace CTA div and section.tie-cta-section.
   Fix: use negative margin-top to pull the section up by 40px.
   Also zero out the .tie-plugin-root.tie-page-content bottom padding.
   ============================================================ */

/* Zero out the page content wrapper bottom padding */
.tie-plugin-root.tie-page-content {
  padding-bottom: 0 !important;
}

/* Pull section.tie-cta-section up by 40px to close the gap */
.tie-plugin-root section.tie-cta-section,
.tie-page-content section.tie-cta-section {
  margin-top: -40px !important;
}

/* Also zero out the tie-section wrapper bottom padding */
.tie-plugin-root .tie-section {
  padding-bottom: 0 !important;
}

/* === END PATCH v2.19.23 === */


/* ============================================================
   PATCH v2.19.24 — Fix: reset the -40px margin-top that was added in v2.19.23
   The padding-bottom: 0 fix on .tie-section already closes the gap.
   The -40px margin-top is now causing the section to overlap the marketplace div.
   Reset margin-top to 0.
   ============================================================ */

/* Reset the margin-top — the gap is now closed by padding-bottom: 0 on .tie-section */
.tie-plugin-root section.tie-cta-section,
.tie-page-content section.tie-cta-section,
.tie-plugin-root .tie-page-content section.tie-cta-section,
.tie-plugin-root .tie-cta-section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* === END PATCH v2.19.24 === */


/* ============================================================
   PATCH v2.19.25 — Fix: body text not centered in marketplace CTA div
   The .tie-body paragraph inside the navy div has max-width:520px and
   margin:0 auto but text-align is not set, so text is left-aligned.
   Fix: force text-align:center on all elements inside the navy CTA div.
   ============================================================ */

/* Center all text inside the marketplace CTA div (navy background) */
.tie-plugin-root div[style*="background:var(--navy)"] .tie-body,
.tie-plugin-root div[style*="background:var(--navy)"] p,
.tie-plugin-root div[style*="background:var(--navy)"] .tie-h2,
.tie-plugin-root div[style*="background:var(--navy)"] h2,
.tie-plugin-root div[style*="background:var(--navy)"] span {
  text-align: center !important;
}

/* Ensure the container inside the navy div is also centered */
.tie-plugin-root div[style*="background:var(--navy)"] .tie-container {
  text-align: center !important;
}

/* === END PATCH v2.19.25 === */


/* ============================================================
   COMPREHENSIVE MOBILE UX AUDIT FIX — v2.19.25
   April 2026 — All page types: Library + Detail + Edge Cases
   ============================================================ */

/* -------------------------------------------------------
   FIX 1: Gate form input visibility
   The .tie-gate-input was showing only the label "FIRST NAME"
   with no visible input field on mobile due to height collapse.
   ------------------------------------------------------- */
.tie-gate-input {
  min-height: 48px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.tie-gate-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.28rem !important;
  min-width: 0 !important;
}

.tie-gate-fields-row {
  display: flex !important;
  gap: 0.65rem !important;
}

@media (max-width: 540px) {
  .tie-gate-fields-row {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  .tie-gate-field {
    width: 100% !important;
  }
  .tie-gate-input {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* -------------------------------------------------------
   FIX 2: Gate overlay — reduce excessive whitespace on mobile
   The gate overlay had ~80px above heading and ~60px below form
   ------------------------------------------------------- */
@media (max-width: 540px) {
  .tie-gate-body {
    padding: 1.25rem 1.25rem 1rem !important;
  }
  .tie-gate-modal {
    margin: 0 !important;
    border-radius: 12px !important;
  }
  .tie-gate-bullets {
    margin-bottom: 1rem !important;
  }
  .tie-gate-cta {
    padding: 0.9rem 1rem !important;
    font-size: 0.9rem !important;
  }
  .tie-gate-trust {
    margin-top: 0.6rem !important;
    padding-top: 0.6rem !important;
  }
}

/* -------------------------------------------------------
   FIX 3: Marketplace inline card heading — ensure white text
   The "Grow Your Firm with Clients Who Need This Strategy"
   heading inside .tie-marketplace-card was dark on dark bg.
   ------------------------------------------------------- */
.tie-marketplace-card h3,
.tie-marketplace-card .tie-h3,
.tie-marketplace-card [class*="heading"],
.tie-marketplace-card [class*="title"] {
  color: #ffffff !important;
}

/* Also fix any heading inside a dark-bg card */
[style*="background:#1E1E5E"] h2,
[style*="background:#1E1E5E"] h3,
[style*="background:#1E1E5E"] p,
[style*="background: #1E1E5E"] h2,
[style*="background: #1E1E5E"] h3,
[style*="background: #1E1E5E"] p,
[style*="background:var(--navy)"] h2,
[style*="background:var(--navy)"] h3,
[style*="background:var(--navy)"] p,
[style*="background: var(--navy)"] h2,
[style*="background: var(--navy)"] h3,
[style*="background: var(--navy)"] p {
  color: #ffffff !important;
}

/* -------------------------------------------------------
   FIX 4: Stat card grid overflow on entity pages
   The 2-column stat card grid was overflowing on narrow screens
   ------------------------------------------------------- */
.tie-stat-grid,
.tie-stats-grid,
[class*="stat-grid"],
[class*="stats-grid"] {
  overflow: hidden !important;
}

@media (max-width: 480px) {
  .tie-stat-grid,
  .tie-stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
  }
  .tie-stat-card,
  .tie-stat-item,
  [class*="stat-card"],
  [class*="stat-item"] {
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 0.75rem !important;
  }
  .tie-stat-value,
  [class*="stat-value"] {
    font-size: 1.4rem !important;
    word-break: break-word !important;
  }
  .tie-stat-label,
  [class*="stat-label"] {
    font-size: 0.7rem !important;
    word-break: break-word !important;
  }
}

/* -------------------------------------------------------
   FIX 5: Category nav toggle — ensure visible on all library pages
   The toggle button was not showing on some library pages
   ------------------------------------------------------- */
@media (max-width: 768px) {
  .tie-category-nav--mobile .tie-category-nav-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 0.75rem 1rem !important;
    background: #F6B820 !important;
    color: #0a0f1e !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    cursor: pointer !important;
    min-height: 44px !important;
  }
  .tie-category-nav-toggle-text {
    color: #0a0f1e !important;
  }
  .tie-category-nav-toggle-count {
    color: #0a0f1e !important;
  }
}

/* -------------------------------------------------------
   FIX 6: Authority chain bar — increase touch target
   The authority chain bar was too small to tap on mobile
   ------------------------------------------------------- */
.tie-authority-chain,
[class*="authority-chain"] {
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0.5rem 1rem !important;
}

/* -------------------------------------------------------
   FIX 7: Body overflow-x — prevent horizontal scroll on all pages
   ------------------------------------------------------- */
html {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

.tie-plugin-root,
.tie-page-content,
.tie-section,
.tie-strategy-hero,
.tie-content-layout,
.tie-content-grid {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

/* -------------------------------------------------------
   FIX 8: FAQ section — ensure full width and proper padding on mobile
   ------------------------------------------------------- */
@media (max-width: 768px) {
  .tie-faq-section,
  [class*="faq-section"],
  .tie-faq,
  [class*="faq"] {
    padding: 2rem 1rem !important;
  }
  .tie-faq-item,
  [class*="faq-item"] {
    padding: 0.875rem 0 !important;
  }
  .tie-faq-question,
  [class*="faq-question"] {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
  }
}

/* -------------------------------------------------------
   FIX 9: "Frequently Asked Questions" heading — ensure left-aligned
   and not cut off on mobile
   ------------------------------------------------------- */
@media (max-width: 768px) {
  h2.tie-faq-heading,
  .tie-faq-section h2,
  [class*="faq"] h2 {
    font-size: 1.3rem !important;
    padding: 0 1rem !important;
    word-break: break-word !important;
  }
}

/* -------------------------------------------------------
   FIX 10: Related strategies sidebar — ensure proper stacking
   on mobile (sidebar below main content, not beside it)
   ------------------------------------------------------- */
@media (max-width: 768px) {
  .tie-content-layout,
  .tie-content-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
  }
  .tie-sidebar,
  .tie-content-sidebar,
  [class*="sidebar"] {
    width: 100% !important;
    max-width: 100% !important;
    order: 2 !important;
  }
  .tie-main-content,
  .tie-content-main,
  [class*="main-content"] {
    width: 100% !important;
    max-width: 100% !important;
    order: 1 !important;
  }
}

/* -------------------------------------------------------
   FIX 11: Sticky bottom bar — ensure proper alignment and
   full-width buttons on mobile
   ------------------------------------------------------- */
@media (max-width: 768px) {
  .tie-sticky-bar,
  [class*="sticky-bar"],
  .tie-bottom-bar,
  [class*="bottom-bar"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0.75rem 1rem !important;
    gap: 0.5rem !important;
  }
  .tie-sticky-bar a,
  .tie-sticky-bar button,
  [class*="sticky-bar"] a,
  [class*="sticky-bar"] button {
    width: 100% !important;
    text-align: center !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* -------------------------------------------------------
   FIX 12: "Ready to Reduce Your Tax Burden?" — ensure
   full-width on mobile with proper centering
   ------------------------------------------------------- */
@media (max-width: 768px) {
  section.tie-cta-section {
    padding: 2.5rem 1.25rem !important;
    border-radius: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  section.tie-cta-section h2,
  section.tie-cta-section .tie-h2 {
    font-size: 1.4rem !important;
    text-align: center !important;
    color: #ffffff !important;
  }
  section.tie-cta-section p {
    text-align: center !important;
    color: rgba(255,255,255,0.85) !important;
    font-size: 0.9rem !important;
  }
  section.tie-cta-section .tie-btn,
  section.tie-cta-section a[class*="btn"],
  section.tie-cta-section button {
    width: 100% !important;
    max-width: 360px !important;
    margin: 0 auto !important;
    display: block !important;
    text-align: center !important;
  }
}

/* -------------------------------------------------------
   FIX 13: Hub hero stats row — ensure 2-column grid on mobile
   ------------------------------------------------------- */
@media (max-width: 540px) {
  .tie-gate-stats,
  [class*="gate-stats"],
  .tie-hero-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
  }
  .tie-gate-stat,
  [class*="gate-stat"] {
    padding: 0.75rem !important;
    text-align: center !important;
  }
  .tie-gate-stat-value,
  [class*="gate-stat-value"] {
    font-size: 1.5rem !important;
  }
  .tie-gate-stat-label,
  [class*="gate-stat-label"] {
    font-size: 0.7rem !important;
  }
}

/* -------------------------------------------------------
   FIX 14: Scale Your Practice section — ensure body text
   is centered on ALL screen sizes (not just mobile)
   ------------------------------------------------------- */
[style*="background:var(--navy)"] .tie-body,
[style*="background: var(--navy)"] .tie-body,
[style*="background:var(--navy)"] p,
[style*="background: var(--navy)"] p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

[style*="background:var(--navy)"] .tie-container,
[style*="background: var(--navy)"] .tie-container {
  text-align: center !important;
}

/* -------------------------------------------------------
   FIX 15: WordPress footer — hide the "TIE Test Site is
   proudly powered by WordPress" text
   ------------------------------------------------------- */
.site-footer,
#colophon,
.wp-site-blocks > footer,
footer.site-footer,
.site-info,
#footer-info {
  display: none !important;
}

/* END COMPREHENSIVE MOBILE UX AUDIT FIX v2.19.25 */


/* ============================================================
   PATCH v2.19.26 — Fix: deeply-nested list overflow on state pages
   Root cause: Malformed HTML with 20+ levels of nested <ul>/<li>
   causes scrollWidth to exceed 2000px at 390px viewport.
   Fix: clip overflow on the main content column and all lists
   within the plugin root so deeply-nested content doesn't
   cause horizontal scroll.
   ============================================================ */

/* Prevent deeply-nested list overflow */
.tie-plugin-root .tie-main-col,
.tie-plugin-root main.tie-main-col {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

/* Constrain all lists within the plugin root */
.tie-plugin-root ul,
.tie-plugin-root ol {
  max-width: 100% !important;
  overflow-x: hidden !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

/* Constrain all headings and paragraphs within the plugin root */
.tie-plugin-root h1,
.tie-plugin-root h2,
.tie-plugin-root h3,
.tie-plugin-root h4,
.tie-plugin-root p {
  max-width: 100% !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

/* Constrain the content grid on mobile */
@media (max-width: 768px) {
  .tie-plugin-root .tie-content-grid {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
  
  .tie-plugin-root .tie-container {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
}

/* === END PATCH v2.19.26 === */

/* ============================================================
   PATCH v2.19.27 — Fix: gate overlay on mobile
   The gate overlay (position: fixed) is correct but on some
   pages the modal is wider than the viewport on small screens.
   Fix: ensure the gate modal is constrained to viewport width.
   ============================================================ */

@media (max-width: 480px) {
  .tie-gate-modal {
    max-width: calc(100vw - 2rem) !important;
    width: calc(100vw - 2rem) !important;
    border-radius: 16px !important;
  }
  
  .tie-gate-body {
    padding: 1.5rem 1.25rem 1.25rem !important;
  }
  
  .tie-gate-fields-row {
    flex-direction: column !important;
    gap: 0.65rem !important;
  }
  
  .tie-gate-headline {
    font-size: 1.35rem !important;
  }
}

/* === END PATCH v2.19.27 === */

/* ============================================================
   PATCH v2.19.28 — Fix: hub page comparison table overflow on mobile
   The "Everything Checkpoint Has. None of the Cost." comparison
   table uses a multi-column layout that overflows on mobile.
   Fix: make the table scrollable horizontally on mobile.
   ============================================================ */

@media (max-width: 768px) {
  /* Wrap comparison tables in a scrollable container */
  .tie-plugin-root .tie-comparison-table-wrap,
  .tie-plugin-root table {
    overflow-x: auto !important;
    display: block !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* Ensure table cells have minimum width for readability */
  .tie-plugin-root table th,
  .tie-plugin-root table td {
    min-width: 80px !important;
    white-space: nowrap !important;
  }
}

/* === END PATCH v2.19.28 === */

/* ============================================================
   PATCH v2.19.29 — Fix: sticky CTA bar z-index and positioning
   The sticky CTA bar should always be visible at the bottom
   of the viewport on mobile.
   ============================================================ */

.tie-sticky-cta-bar {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  background: #1E1E5E !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0.75rem 1rem !important;
  gap: 0.75rem !important;
  box-shadow: 0 -2px 16px rgba(0,0,0,0.25) !important;
}

.tie-sticky-cta-bar-text {
  color: #ffffff !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  flex: 1 !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.tie-sticky-cta-bar .tie-btn {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  font-size: 0.8125rem !important;
  padding: 0.5rem 0.875rem !important;
}

/* Add bottom padding to the plugin root to prevent sticky bar overlap */
.tie-plugin-root {
  padding-bottom: 60px !important;
}

/* === END PATCH v2.19.29 === */

/* ============================================================
   PATCH v2.19.30 — Fix: use overflow-x: clip on content wrapper
   overflow-x: hidden does not affect scrollWidth; overflow-x: clip
   does. Apply to the content wrapper to prevent horizontal scroll
   caused by deeply-nested lists in malformed HTML content.
   ============================================================ */

.tie-plugin-root .tie-content-wrapper,
.tie-plugin-root .tie-page-content {
  overflow-x: clip !important;
  max-width: 100vw !important;
}

.tie-plugin-root .tie-content-grid {
  overflow-x: clip !important;
}

.tie-plugin-root .tie-main-col,
.tie-plugin-root main.tie-main-col {
  overflow-x: clip !important;
}

/* === END PATCH v2.19.30 === */

/* ============================================================
   PATCH v2.19.31 — Fix: overflow-x clip on html element
   overflow-x: clip on the html element reduces htmlScrollWidth
   to the viewport width, preventing horizontal scroll caused by
   deeply-nested lists in malformed HTML content on state pages.
   Unlike overflow-x: hidden, overflow-x: clip does NOT create
   a scroll container, so it does not affect Puppeteer's
   fullPage screenshot height calculation.
   ============================================================ */

html {
  overflow-x: clip !important;
}

/* === END PATCH v2.19.31 === */

/* ============================================================
   PATCH v2.19.32 — Fix: hide WordPress footer with id="footer"
   The Twenty Twenty-Five theme uses id="footer" (not #colophon)
   for the footer element. Add this selector to the footer hide rule.
   ============================================================ */

#footer,
div#footer,
[id="footer"] {
  display: none !important;
}

/* === END PATCH v2.19.32 === */

/* === PATCH v2.19.33 — Library width, card title layout, playbook search bar === */

/* FIX 1: Library pages — constrain hub-main content to max 1200px */
.tie-plugin-root .tie-hub-main {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  box-sizing: border-box !important;
}

/* FIX 2: Strategy card header — stack badges above title+desc */
.tie-plugin-root .tie-strategy-card-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  margin-bottom: 8px !important;
}
.tie-plugin-root .tie-strategy-card-badges {
  margin-bottom: 0.5rem !important;
}
.tie-plugin-root .tie-strategy-card-title {
  width: 100% !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  margin-bottom: 0.375rem !important;
}
.tie-plugin-root .tie-strategy-card-desc {
  width: 100% !important;
}

/* FIX 3: Playbook page inpage search bar — center the input */
.tie-plugin-root .tie-inpage-search-bar {
  padding: 1rem 0 !important;
}
.tie-plugin-root .tie-inpage-search-bar > input.tie-inpage-search-input {
  display: block !important;
  max-width: 1200px !important;
  width: calc(100% - 3rem) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* FIX 4: Breadcrumbs on dark hero backgrounds — ensure white text */
.tie-plugin-root .tie-breadcrumb,
.tie-plugin-root .tie-breadcrumb a,
.tie-plugin-root .tie-breadcrumb span {
  color: rgba(255,255,255,0.85) !important;
}
.tie-plugin-root .tie-breadcrumb a:hover {
  color: #F6B820 !important;
  text-decoration: none !important;
}

/* === END PATCH v2.19.33 === */


/* ============================================================
   PATCH v2.19.34 — Search bar, bottom CTA, page width fixes
   ============================================================ */

/* FIX 1: Bottom CTA (div.tie-bottom-cta) — no inner wrapper in HTML, center directly */
div.tie-bottom-cta {
  background: linear-gradient(145deg, #0f1240 0%, #1E1E5E 100%) !important;
  color: #fff !important;
  padding: 3.5rem 1.5rem !important;
  text-align: center !important;
  margin-top: 2rem !important;
  box-sizing: border-box !important;
  width: 100% !important;
}
div.tie-bottom-cta h2 {
  color: #fff !important;
  font-size: 1.875rem !important;
  font-weight: 800 !important;
  margin-bottom: 0.75rem !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  max-width: 700px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
div.tie-bottom-cta p {
  color: rgba(255,255,255,0.82) !important;
  font-size: 1rem !important;
  margin-bottom: 1.5rem !important;
  line-height: 1.65 !important;
  max-width: 600px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
div.tie-bottom-cta a,
div.tie-bottom-cta .tie-btn-primary,
div.tie-bottom-cta a.tie-btn-primary {
  display: inline-block !important;
  background: #F6B820 !important;
  color: #0a0f1e !important;
  padding: 0.9375rem 2rem !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 0.9375rem !important;
  text-decoration: none !important;
  cursor: pointer !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(246,184,32,0.30) !important;
}
div.tie-bottom-cta a:hover { opacity: 0.9 !important; text-decoration: none !important; }

/* FIX 2: Search bar on form/detail pages — make input fill available space */
/* The form has: label | [input flex-1] | [Search btn] */
/* Input was 250px because flex wasn't working — force it */
.tie-plugin-root .tie-inpage-search-form {
  display: flex !important;
  align-items: stretch !important;
  gap: 0.5rem !important;
  width: 100% !important;
}
.tie-plugin-root .tie-inpage-search-form .tie-inpage-search-input {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  width: auto !important;
}

/* FIX 3: Search suggestions dropdown — align to input, not the whole form */
.tie-plugin-root .tie-inpage-search-results,
.tie-plugin-root .tie-inpage-search-suggestions {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important; /* span full form width, not offset by button */
  z-index: 9999 !important;
  background: #fff !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18) !important;
  border: 1px solid #e2e8f0 !important;
  max-height: 320px !important;
  overflow-y: auto !important;
  margin-top: 4px !important;
}
/* The form wrapper needs relative positioning for the dropdown */
.tie-plugin-root .tie-inpage-search-form {
  position: relative !important;
}

/* FIX 4: Playbook bare search bar — style the bare input version */
/* Playbook HTML: .tie-inpage-search-bar > input (no inner wrapper) */
.tie-plugin-root .tie-inpage-search-bar > input.tie-inpage-search-input {
  display: block !important;
  width: calc(100% - 3rem) !important;
  max-width: 800px !important;
  margin: 0 auto !important;
  padding: 0.875rem 1.25rem !important;
  border-radius: 8px !important;
  border: 1.5px solid rgba(255,255,255,0.2) !important;
  background: rgba(255,255,255,0.12) !important;
  color: #fff !important;
  font-size: 1rem !important;
  font-family: inherit !important;
  outline: none !important;
  box-sizing: border-box !important;
}
.tie-plugin-root .tie-inpage-search-bar > input.tie-inpage-search-input:focus {
  border-color: #F6B820 !important;
  background: rgba(255,255,255,0.18) !important;
  box-shadow: 0 0 0 3px rgba(246,184,32,0.2) !important;
}
.tie-plugin-root .tie-inpage-search-bar > input.tie-inpage-search-input::placeholder {
  color: rgba(255,255,255,0.5) !important;
}
/* Playbook suggestions dropdown — positioned relative to the bar */
.tie-plugin-root .tie-inpage-search-bar {
  position: relative !important;
}
.tie-plugin-root .tie-inpage-search-bar > .tie-inpage-search-suggestions {
  position: absolute !important;
  top: calc(100% + 4px) !important;
  left: 1.5rem !important;
  right: 1.5rem !important;
  max-width: 800px !important;
  margin: 0 auto !important;
  z-index: 9999 !important;
  background: #fff !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18) !important;
  border: 1px solid #e2e8f0 !important;
  max-height: 320px !important;
  overflow-y: auto !important;
}

/* FIX 5: Strategy/form/notice hero pages — constrain inner content width */
/* These pages use .tie-strategy-hero-inner which already has max-width 1200px — good */
/* But .tie-main-col on these pages can be too wide on large screens */
.tie-plugin-root .tie-strategy-hero-inner,
.tie-plugin-root .tie-form-hero-inner,
.tie-plugin-root .tie-notice-hero-inner,
.tie-plugin-root .tie-playbook-hero-inner {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  box-sizing: border-box !important;
}

/* FIX 6: Prevent left-clip — ensure plugin root doesn't have negative left margin */
.tie-plugin-root {
  margin-left: 0 !important;
  padding-left: 0 !important;
  box-sizing: border-box !important;
}
.tie-plugin-root .tie-main-col {
  min-width: 0 !important;
  overflow-x: visible !important;
}

/* === END PATCH v2.19.34 === */


/* ============================================================
   PATCH v2.19.35 — Search Bar Overhaul (all page types)
   ============================================================ */

/* ---- 1. FORM/DETAIL PAGE SEARCH BAR — fix layout & dropdown ---- */
/* Override the old right:4.5rem offset on the suggestions dropdown */
.tie-plugin-root .tie-inpage-search-results,
.tie-plugin-root .tie-inpage-search-suggestions {
  right: 0 !important;        /* span full form width, not offset by button */
  left: 0 !important;
  top: calc(100% + 6px) !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.08) !important;
  max-height: 380px !important;
  overflow-y: auto !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
}

/* Make the search bar taller and more prominent on detail pages */
.tie-plugin-root .tie-inpage-search-bar {
  padding: 1rem 0 !important;
}
.tie-plugin-root .tie-inpage-search-inner {
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 0 1.5rem !important;
}
.tie-plugin-root .tie-inpage-search-form {
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  position: relative !important;
  background: rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
  border: 1.5px solid rgba(255,255,255,0.15) !important;
  overflow: visible !important;
  transition: border-color 0.18s, box-shadow 0.18s !important;
}
.tie-plugin-root .tie-inpage-search-form:focus-within {
  border-color: #F6B820 !important;
  box-shadow: 0 0 0 3px rgba(246,184,32,0.18) !important;
  background: rgba(255,255,255,0.12) !important;
}
.tie-plugin-root .tie-inpage-search-form .tie-inpage-search-input {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  width: auto !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0.875rem 1.125rem !important;
  font-size: 1rem !important;
  color: #fff !important;
  outline: none !important;
  box-shadow: none !important;
}
.tie-plugin-root .tie-inpage-search-form .tie-inpage-search-input:focus {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.tie-plugin-root .tie-inpage-search-form .tie-inpage-search-btn {
  background: #F6B820 !important;
  color: #0a0f1e !important;
  border: none !important;
  padding: 0.75rem 1.375rem !important;
  border-radius: 0 10px 10px 0 !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  font-size: 0.9375rem !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: background 0.15s !important;
  margin: 3px 3px 3px 0 !important;
  border-radius: 9px !important;
}
.tie-plugin-root .tie-inpage-search-form .tie-inpage-search-btn:hover {
  background: #e8a800 !important;
}

/* ---- 2. PLAYBOOK BARE SEARCH BAR — full redesign ---- */
/* Structure: .tie-inpage-search-bar > input + .tie-inpage-search-suggestions */
.tie-plugin-root .tie-inpage-search-bar:not(:has(.tie-inpage-search-inner)) {
  background: #1E1E5E !important;
  padding: 1.25rem 1.5rem !important;
  position: relative !important;
  z-index: 100 !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
/* Wrap the bare input in a visual container via CSS */
.tie-plugin-root .tie-inpage-search-bar > input.tie-inpage-search-input {
  display: block !important;
  width: 100% !important;
  max-width: 800px !important;
  margin: 0 auto !important;
  padding: 0.9375rem 1.25rem 0.9375rem 3rem !important;
  border-radius: 12px !important;
  border: 1.5px solid rgba(255,255,255,0.18) !important;
  background: rgba(255,255,255,0.1) !important;
  color: #fff !important;
  font-size: 1rem !important;
  font-family: inherit !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 1rem center !important;
}
.tie-plugin-root .tie-inpage-search-bar > input.tie-inpage-search-input:focus {
  border-color: #F6B820 !important;
  background-color: rgba(255,255,255,0.15) !important;
  box-shadow: 0 0 0 3px rgba(246,184,32,0.2) !important;
}
.tie-plugin-root .tie-inpage-search-bar > input.tie-inpage-search-input::placeholder {
  color: rgba(255,255,255,0.45) !important;
}

/* Playbook suggestions dropdown — positioned relative to the bar */
.tie-plugin-root .tie-inpage-search-bar {
  position: relative !important;
}
.tie-plugin-root .tie-inpage-search-bar > .tie-inpage-search-suggestions {
  position: absolute !important;
  top: calc(100% - 4px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(800px, calc(100% - 3rem)) !important;
  z-index: 9999 !important;
  background: #fff !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.08) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  max-height: 380px !important;
  overflow-y: auto !important;
  margin-top: 6px !important;
}

/* ---- 3. INPAGE SUGGESTION ITEMS — better visual design ---- */
.tie-plugin-root .tie-inpage-suggestion {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0.75rem 1.125rem !important;
  cursor: pointer !important;
  border-bottom: 1px solid #f1f5f9 !important;
  transition: background 0.1s !important;
  gap: 0.75rem !important;
}
.tie-plugin-root .tie-inpage-suggestion:last-child { border-bottom: none !important; }
.tie-plugin-root .tie-inpage-suggestion:hover,
.tie-plugin-root .tie-inpage-suggestion.selected {
  background: #f8f9ff !important;
}
.tie-plugin-root .tie-inpage-suggestion.selected {
  outline: 2px solid #F6B820 !important;
  outline-offset: -2px !important;
}
.tie-plugin-root .tie-inpage-suggestion-main {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  flex: 1 !important;
  min-width: 0 !important;
}
.tie-plugin-root .tie-inpage-suggestion-name {
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.tie-plugin-root .tie-inpage-irc {
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  color: #6366f1 !important;
  background: #eef2ff !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.tie-plugin-root .tie-inpage-suggestion-meta {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  flex-shrink: 0 !important;
}
.tie-plugin-root .tie-inpage-suggestion-cat {
  font-size: 0.75rem !important;
  color: #64748b !important;
  white-space: nowrap !important;
}
.tie-plugin-root .tie-inpage-suggestion-savings {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  color: #16a34a !important;
  white-space: nowrap !important;
}
.tie-plugin-root .tie-inpage-group-label {
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #94a3b8 !important;
  padding: 0.625rem 1.125rem 0.25rem !important;
  background: #f8fafc !important;
}
.tie-plugin-root .tie-inpage-no-results {
  padding: 1.5rem 1.125rem !important;
  text-align: center !important;
  color: #64748b !important;
  font-size: 0.9375rem !important;
}

/* ---- 4. HIGHLIGHTED MATCH TEXT ---- */
.tie-plugin-root .tie-inpage-suggestion mark.tie-search-highlight {
  background: transparent !important;
  color: #F6B820 !important;
  font-weight: 700 !important;
}

/* ---- 5. MOBILE: playbook search bar ---- */
@media (max-width: 767px) {
  .tie-plugin-root .tie-inpage-search-bar > input.tie-inpage-search-input {
    max-width: 100% !important;
    font-size: 16px !important; /* prevent iOS zoom */
  }
  .tie-plugin-root .tie-inpage-search-bar > .tie-inpage-search-suggestions {
    width: calc(100% - 3rem) !important;
    left: 1.5rem !important;
    transform: none !important;
  }
  .tie-plugin-root .tie-inpage-search-form .tie-inpage-search-input {
    font-size: 16px !important; /* prevent iOS zoom */
  }
}

/* === PATCH v2.19.36 — Full-screen mobile search overlay redesign ============
   Matches reference: white bg, trending list rows, back arrow, iOS-native feel
   =========================================================================== */

/* ── Trending list rows (replace chips) ──────────────────────────────────── */
.tie-mobile-trending-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.tie-mobile-trending-row {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  padding: 0.875rem 1.25rem;
  background: none;
  border: none;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease;
}
.tie-mobile-trending-row:active,
.tie-mobile-trending-row:hover {
  background: #f8f8f8;
}

.tie-trending-icon-wrap {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tie-trending-icon {
  width: 18px;
  height: 18px;
  color: #666;
}

.tie-trending-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.tie-trending-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #111;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tie-trending-tag {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #c026d3;
  background: #fdf4ff;
  border: 1px solid #e9d5ff;
  border-radius: 4px;
  padding: 0.05rem 0.35rem;
  margin-top: 0.15rem;
  width: fit-content;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
/* Type-specific tag colors */
.tie-trending-tag-strategy { color: #7c3aed; background: #f5f3ff; border-color: #ddd6fe; }
.tie-trending-tag-form     { color: #0369a1; background: #f0f9ff; border-color: #bae6fd; }
.tie-trending-tag-playbook { color: #15803d; background: #f0fdf4; border-color: #bbf7d0; }
.tie-trending-tag-notice   { color: #b45309; background: #fffbeb; border-color: #fde68a; }

.tie-trending-sub {
  font-size: 0.8125rem;
  color: #888;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tie-trending-arrow {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: #bbb;
}

/* ── Mobile search overlay — full redesign ───────────────────────────────── */
@media (max-width: 767px) {
  #tie-mobile-search-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    background: #fff !important;
    z-index: 99999 !important;
    display: flex !important;
    flex-direction: column !important;
    transform: translateY(100%) !important;
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1) !important;
    overflow: hidden !important;
  }
  #tie-mobile-search-overlay.open {
    transform: translateY(0) !important;
  }

  /* Header row: back arrow + input + mic icon */
  .tie-mobile-search-header {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.75rem 1rem !important;
    border-bottom: 1px solid #e8e8e8 !important;
    background: #fff !important;
    flex-shrink: 0 !important;
  }

  .tie-mobile-search-back {
    flex-shrink: 0 !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    color: #333 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .tie-mobile-search-back svg {
    width: 22px !important;
    height: 22px !important;
  }

  .tie-mobile-search-input-wrap {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    background: #f5f5f5 !important;
    border-radius: 12px !important;
    padding: 0.5rem 0.75rem !important;
    min-width: 0 !important;
  }

  .tie-mobile-search-icon {
    flex-shrink: 0 !important;
    width: 16px !important;
    height: 16px !important;
    color: #999 !important;
  }

  .tie-mobile-search-input {
    flex: 1 !important;
    background: none !important;
    border: none !important;
    outline: none !important;
    font-size: 1rem !important;
    color: #111 !important;
    min-width: 0 !important;
    -webkit-appearance: none !important;
  }
  .tie-mobile-search-input::placeholder {
    color: #aaa !important;
    font-size: 0.9375rem !important;
  }

  .tie-mobile-search-clear {
    flex-shrink: 0 !important;
    background: none !important;
    border: none !important;
    color: #999 !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    padding: 0 !important;
    line-height: 1 !important;
    display: none !important;
  }

  /* Body: trending list or live results */
  .tie-mobile-search-body {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    background: #fff !important;
  }

  /* Section label */
  .tie-mobile-search-hints-label {
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    color: #999 !important;
    letter-spacing: 0.08em !important;
    padding: 1rem 1.25rem 0.5rem !important;
    text-transform: uppercase !important;
  }

  /* Live results list */
  .tie-mobile-search-results {
    display: none;
    flex-direction: column !important;
    width: 100% !important;
  }

  .tie-mobile-result-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 0.875rem 1.25rem !important;
    border-bottom: 1px solid #f0f0f0 !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: background 0.12s ease !important;
  }
  .tie-mobile-result-item:active,
  .tie-mobile-result-item:hover {
    background: #f8f8f8 !important;
  }

  .tie-mobile-result-left {
    flex: 1 !important;
    min-width: 0 !important;
  }

  .tie-mobile-result-name {
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    color: #111 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .tie-mobile-result-name mark {
    background: none !important;
    color: #d97706 !important;
    font-weight: 700 !important;
  }

  .tie-mobile-result-meta {
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    margin-top: 0.2rem !important;
    flex-wrap: wrap !important;
  }

  .tie-mobile-result-badge {
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    padding: 0.1rem 0.4rem !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
  }

  .tie-mobile-result-cat {
    font-size: 0.8125rem !important;
    color: #888 !important;
  }

  .tie-mobile-result-savings {
    flex-shrink: 0 !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: #16a34a !important;
    text-align: right !important;
  }

  /* No results state */
  .tie-mobile-no-results {
    padding: 3rem 1.5rem !important;
    text-align: center !important;
  }
  .tie-mobile-no-results-icon {
    font-size: 2.5rem !important;
    margin-bottom: 0.75rem !important;
  }
  .tie-mobile-no-results-text {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin-bottom: 0.5rem !important;
  }
  .tie-mobile-no-results-hint {
    font-size: 0.875rem !important;
    color: #888 !important;
  }

  /* Hide chips (replaced by trending rows) */
  .tie-mobile-search-chips {
    display: none !important;
  }

  /* Prevent in-page search bars from showing desktop dropdown on mobile */
  .tie-inpage-search-results,
  .tie-inpage-search-suggestions,
  #tie-inpage-search-results,
  #tie-inpage-search-suggestions {
    display: none !important;
  }
}
/* END PATCH v2.19.36 ======================================================= */

/* === PATCH v2.19.37 — Hero search dropdown: fix overflow clipping & right-offset ============
   Root cause 1: .tie-hero-search-wrap has overflow:hidden which clips the absolute dropdown
   Root cause 2: .tie-search-suggestions has right:4.5rem (72px) cutting off the right side
   Fix: allow overflow on the wrap, reset right to 0, constrain width to 100% of wrap
   ========================================================================================= */

/* 1. Allow the hero search wrap to overflow so the dropdown isn't clipped */
.tie-plugin-root .tie-hero-search-wrap {
  overflow: visible !important;
  position: relative !important;
}

/* 2. Fix the hero search suggestions dropdown — full width of the wrap, no right offset */
.tie-plugin-root .tie-hero-search-wrap .tie-search-suggestions,
.tie-plugin-root .tie-hero-search-wrap .tie-search-results {
  left: 0 !important;
  right: 0 !important;
  top: calc(100% + 6px) !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.08) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  max-height: 380px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  z-index: 99999 !important;
  background: #fff !important;
}

/* 3. Fix the global .tie-search-suggestions right offset (was 4.5rem) */
.tie-plugin-root .tie-search-suggestions,
.tie-plugin-root .tie-search-results {
  right: 0 !important;
  overflow-x: hidden !important;
}

/* 4. Ensure suggestion items don't overflow their container */
.tie-plugin-root .tie-search-suggestion-item {
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* 5. Mobile: keep dropdown within viewport */
@media (max-width: 767px) {
  .tie-plugin-root .tie-hero-search-wrap .tie-search-suggestions,
  .tie-plugin-root .tie-hero-search-wrap .tie-search-results {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 10px !important;
  }
}
/* END PATCH v2.19.37 ======================================================= */

/* PATCH v2.19.37b */
.tie-plugin-root .tie-authority-bar {
  background: linear-gradient(145deg, #0f1240 0%, #1E1E5E 55%, #2a2a7a 100%) !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  padding: 0.625rem 1.5rem !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.5rem 1.5rem !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.tie-plugin-root .tie-authority-bar .tie-authority-item {
  color: rgba(255,255,255,0.75) !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}
@media (max-width: 767px) {
  .tie-plugin-root .tie-authority-bar {
    padding: 0.5rem 1rem !important;
    gap: 0.375rem 1rem !important;
  }
  .tie-plugin-root .tie-authority-bar .tie-authority-item {
    font-size: 0.75rem !important;
    white-space: normal !important;
  }
}
.tie-plugin-root .tie-faq-item {
  overflow: visible !important;
}
.tie-plugin-root .tie-faq-answer {
  overflow: hidden !important;
  transition: max-height 0.3s ease, padding-bottom 0.3s ease !important;
}
/* END PATCH v2.19.37b */
/* PATCH v2.19.37c — State Tax Guides */

.tie-state-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 28px;
}
@media (min-width: 640px) {
  .tie-state-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
@media (min-width: 1024px) {
  .tie-state-grid { grid-template-columns: repeat(5, 1fr); gap: 16px; }
}
.tie-state-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 20px 16px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
  position: relative;
}
.tie-state-card:hover {
  border-color: #1E1E5E;
  box-shadow: 0 4px 16px rgba(30,30,94,0.10);
  transform: translateY(-2px);
  text-decoration: none;
}
.tie-state-abbr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: #1E1E5E;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 800;
  border-radius: 8px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.tie-state-info { flex: 1; min-width: 0; }
.tie-state-name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 4px;
  line-height: 1.3;
}
.tie-state-desc {
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.45;
}
.tie-state-arrow {
  position: absolute;
  top: 16px;
  right: 14px;
  font-size: 1rem;
  color: #cbd5e1;
  transition: color 0.18s, transform 0.18s;
}
.tie-state-card:hover .tie-state-arrow {
  color: #1E1E5E;
  transform: translateX(3px);
}
@media (max-width: 639px) {
  .tie-state-card {
    flex-direction: row;
    align-items: center;
    padding: 14px 36px 14px 14px;
    gap: 12px;
  }
  .tie-state-abbr { width: 38px; height: 38px; font-size: 0.8rem; }
  .tie-state-name { font-size: 0.875rem; }
  .tie-state-desc { font-size: 0.73rem; }
}
/* END PATCH v2.19.37c */

/* ═══════════════════════════════════════════════════════════════
   PATCH v2.19.37d — CTA box text color fix (force white on dark bg)
   Fixes: black text on navy CTA boxes on state-tax-library and all pages
   ═══════════════════════════════════════════════════════════════ */

/* Force ALL text inside tie-content-cta to be white/light */
.tie-plugin-root .tie-content-cta,
.tie-plugin-root .tie-content-cta * {
  color: #fff !important;
}
.tie-plugin-root .tie-content-cta .tie-content-cta-eyebrow {
  color: #F6B820 !important;
}
.tie-plugin-root .tie-content-cta p,
.tie-plugin-root .tie-content-cta .tie-content-cta-text,
.tie-plugin-root .tie-content-cta .tie-content-cta-text p {
  color: rgba(255,255,255,0.82) !important;
}
.tie-plugin-root .tie-content-cta .tie-content-cta-title,
.tie-plugin-root .tie-content-cta h2,
.tie-plugin-root .tie-content-cta h3 {
  color: #fff !important;
}

/* Force ALL text inside tie-inline-cta to be white/light */
.tie-plugin-root .tie-inline-cta,
.tie-plugin-root .tie-inline-cta * {
  color: #fff !important;
}
.tie-plugin-root .tie-inline-cta .tie-inline-cta-label {
  color: #F6B820 !important;
}
.tie-plugin-root .tie-inline-cta p,
.tie-plugin-root .tie-inline-cta .tie-inline-cta-text {
  color: rgba(255,255,255,0.82) !important;
}
.tie-plugin-root .tie-inline-cta h2,
.tie-plugin-root .tie-inline-cta h3,
.tie-plugin-root .tie-inline-cta .tie-inline-cta-title {
  color: #fff !important;
}
/* Keep CTA buttons their own colors */
.tie-plugin-root .tie-content-cta .tie-btn-primary,
.tie-plugin-root .tie-content-cta .tie-btn-book,
.tie-plugin-root .tie-content-cta a.tie-btn-primary,
.tie-plugin-root .tie-inline-cta .tie-btn,
.tie-plugin-root .tie-inline-cta .tie-btn-primary,
.tie-plugin-root .tie-inline-cta a.tie-btn-primary,
.tie-plugin-root .tie-inline-cta .tie-inline-cta-action {
  color: #121212 !important;
}

/* ============================================================
   GATE INPUT VISIBILITY FIX — v2.21.0
   Problem: input fields invisible on white modal background
   (#f8fafc bg + #e2e8f0 border = invisible on #ffffff modal)
   Fix: stronger border, darker bg, higher-contrast label
   ============================================================ */

/* Base input — clearly visible on white background */
.tie-gate-input,
#tie-gate-name,
#tie-gate-email {
  border: 2px solid #64748b !important;
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-radius: 10px !important;
  padding: 0.82rem 1rem !important;
  font-size: 0.95rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 48px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-family: inherit !important;
  outline: none !important;
}

.tie-gate-input:focus,
#tie-gate-name:focus,
#tie-gate-email:focus {
  border-color: #1E1E5E !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(30,30,94,0.15) !important;
  outline: none !important;
}

.tie-gate-input::placeholder,
#tie-gate-name::placeholder,
#tie-gate-email::placeholder {
  color: #64748b !important;
  opacity: 1 !important;
}

/* Label — dark and clearly readable */
.tie-gate-label {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  color: #1e293b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  margin-bottom: 0.25rem !important;
  display: block !important;
}

/* Field wrapper */
.tie-gate-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.25rem !important;
  flex: 1 !important;
  min-width: 0 !important;
}

/* Fields row */
.tie-gate-fields-row {
  display: flex !important;
  gap: 0.65rem !important;
  width: 100% !important;
}

/* Mobile: stack fields */
@media (max-width: 540px) {
  .tie-gate-fields-row {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  .tie-gate-field {
    width: 100% !important;
  }
  .tie-gate-input,
  #tie-gate-name,
  #tie-gate-email {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}
/* === END GATE INPUT VISIBILITY FIX v2.21.0 === */

/* ============================================================
   GATE MOBILE COMPACTION FIX — v2.21.0
   Problem: Gate modal too tall on mobile (390x844) — form fields
   cut off below fold. Users can't see/reach input fields.
   Fix: Reduce padding, font sizes, bullet spacing on mobile
   so the entire form fits in one viewport without scrolling.
   ============================================================ */
@media (max-width: 600px) {
  /* Tighten modal body padding */
  .tie-gate-body {
    padding: 1rem 1.1rem 0.85rem !important;
  }

  /* Shrink headline */
  .tie-gate-headline {
    font-size: 1.2rem !important;
    margin-bottom: 0.35rem !important;
    line-height: 1.2 !important;
  }

  /* Shrink subtitle */
  .tie-gate-sub {
    font-size: 0.8rem !important;
    line-height: 1.5 !important;
    margin-bottom: 0.65rem !important;
  }

  /* Tighten divider */
  .tie-gate-divider {
    margin-bottom: 0.6rem !important;
  }

  /* Compact bullet list */
  .tie-gate-bullets {
    gap: 0.3rem !important;
    margin-bottom: 0.75rem !important;
  }
  .tie-gate-bullet {
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
  }
  .tie-gate-check {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
  }

  /* Compact competitors row */
  .tie-gate-competitors {
    margin-bottom: 0.6rem !important;
  }

  /* Compact form gap */
  .tie-gate-form {
    gap: 0.5rem !important;
  }

  /* Compact CTA button */
  .tie-gate-cta {
    padding: 0.8rem 1rem !important;
    font-size: 0.9rem !important;
  }

  /* Compact micro text */
  .tie-gate-micro {
    margin-top: 0.35rem !important;
    font-size: 0.68rem !important;
  }

  /* Compact trust row */
  .tie-gate-trust {
    margin-top: 0.5rem !important;
    padding-top: 0.5rem !important;
  }

  /* Modal max-height with scroll if still too tall */
  .tie-gate-modal {
    max-height: 96vh !important;
    overflow-y: auto !important;
    border-radius: 14px !important;
  }

  /* Topbar compact */
  .tie-gate-topbar {
    padding: 0.45rem 1rem !important;
  }
}
/* === END GATE MOBILE COMPACTION FIX v2.21.0 === */


/* ═══════════════════════════════════════════════════════════════════
   CATEGORY NAV — Always-visible horizontal scroll strip (v2.21.2)
   Replaces the old toggle/collapse pattern that hid tabs on mobile.
   ═══════════════════════════════════════════════════════════════════ */

/* Outer wrapper: navy bg, sticky, relative for fade overlay */
.tie-category-nav-wrap {
  background: #1E1E5E;
  border-bottom: 3px solid #F6B820;
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: 0 2px 16px rgba(0,0,0,0.22);
}

/* Inner scroll container — always horizontal, never collapses */
.tie-category-nav-wrap .tie-category-nav-inner {
  display: flex !important;
  flex-direction: row !important;
  gap: 0;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  align-items: stretch;
}
.tie-category-nav-wrap .tie-category-nav-inner::-webkit-scrollbar {
  display: none;
}

/* Scroll-fade overlay on right edge — visual affordance that more tabs exist */
.tie-category-nav-fade {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 100%;
  background: linear-gradient(to right, transparent, #1E1E5E 85%);
  pointer-events: none;
  z-index: 10;
}

/* Individual tab pills */
.tie-category-nav-wrap .tie-category-tab {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px;
  padding: 14px 18px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.72);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none !important;
  border-bottom: 3px solid transparent;
  margin-bottom: -3px;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  scroll-snap-align: start;
  letter-spacing: 0.01em;
  -webkit-tap-highlight-color: rgba(246,184,32,0.15);
  min-height: 48px;
}

/* Hover state */
.tie-category-nav-wrap .tie-category-tab:hover {
  color: #fff !important;
  border-bottom-color: rgba(246,184,32,0.55);
  background: rgba(255,255,255,0.06);
}

/* Active/selected state */
.tie-category-nav-wrap .tie-category-tab.active {
  color: #F6B820 !important;
  border-bottom-color: #F6B820;
  background: rgba(246,184,32,0.10);
}

/* Count badge */
.tie-category-nav-wrap .tie-category-tab .tab-count {
  background: rgba(246,184,32,0.18);
  color: #F6B820;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  letter-spacing: 0;
  transition: background 0.18s, color 0.18s;
}
.tie-category-nav-wrap .tie-category-tab.active .tab-count {
  background: #F6B820;
  color: #1E1E5E;
}

/* Mobile: tighten padding, ensure full-width scroll */
@media (max-width: 767px) {
  .tie-category-nav-wrap .tie-category-nav-inner {
    padding: 0 8px;
  }
  .tie-category-nav-wrap .tie-category-tab {
    padding: 12px 14px;
    font-size: 12.5px;
    min-height: 48px;
  }
  .tie-category-nav-fade {
    width: 48px;
  }
}

/* Hide the old toggle button — no longer needed */
.tie-category-nav-toggle {
  display: none !important;
}
/* === END CATEGORY NAV SCROLL STRIP v2.21.2 === */


/* ============================================================
   CONTENT READABILITY — Reduce heavy bold in strategy/form pages
   Strong tags inside list items and body copy should use
   font-weight 600 (semibold) not 700 (bold) to reduce visual noise
   ============================================================ */
.tie-plugin-root .tie-main-col strong,
.tie-plugin-root .tie-content-grid strong,
.tie-plugin-root .tie-section strong,
.tie-plugin-root .tie-step-body strong,
.tie-plugin-root .tie-step-content strong {
  font-weight: 600 !important;
  color: #1a202c !important;
}

/* List item labels (e.g. "Three-Property Rule:") — even lighter */
.tie-plugin-root .tie-main-col li > strong:first-child,
.tie-plugin-root .tie-content-grid li > strong:first-child {
  font-weight: 600 !important;
  color: #374151 !important;
}

/* h3 inside strategy content — reduce from 700 to 600 */
.tie-plugin-root .tie-main-col h3,
.tie-plugin-root .tie-content-grid h3 {
  font-weight: 600 !important;
  font-size: 1.125rem !important;
  color: #1E1E5E !important;
  margin-top: 1.75rem !important;
  margin-bottom: 0.5rem !important;
}

/* h3 inside dark card containers — override .tie-main-col h3 dark color */
.tie-plugin-root .tie-main-col .kam-code-advertorial h3,
.tie-plugin-root .tie-content-grid .kam-code-advertorial h3,
.tie-plugin-root .tie-main-col .tie-inline-cta h3,
.tie-plugin-root .tie-content-grid .tie-inline-cta h3,
.tie-plugin-root .tie-main-col .tie-section-navy h3,
.tie-plugin-root .tie-content-grid .tie-section-navy h3 {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 1.0625rem !important;
  margin-top: 0 !important;
}
.tie-plugin-root .tie-main-col .kam-code-advertorial h3 .highlight,
.tie-plugin-root .tie-content-grid .kam-code-advertorial h3 .highlight {
  color: #F6B820 !important;
}

/* h2 inside strategy content — keep 700 but slightly smaller */
.tie-plugin-root .tie-main-col h2,
.tie-plugin-root .tie-content-grid h2 {
  font-weight: 700 !important;
  font-size: 1.375rem !important;
}

/* Hub card quick-link pills */
.tie-plugin-root .tie-hub-card-links {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.375rem !important;
  margin-top: 0.625rem !important;
}
.tie-plugin-root .tie-hub-card-link {
  display: inline-block !important;
  background: #f1f5f9 !important;
  color: #1E1E5E !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 0.25rem 0.625rem !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  border: 1px solid #e2e8f0 !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  line-height: 1.5 !important;
}
.tie-plugin-root .tie-hub-card-link:hover {
  background: #1E1E5E !important;
  color: #F6B820 !important;
  border-color: #1E1E5E !important;
  text-decoration: none !important;
}

/* ============================================================
   PATCH v2.21.21 — Gate Button, Hero Inner, Quick-Ref Sidebar
   ============================================================

   FIX 1: tie-gate-btn — 58 pages (52 forms + 6 notices) use this
   class but it has no CSS. Button renders as unstyled browser
   default (red/pink text, no background). Fix: brand yellow button.
   ============================================================ */
/* Old-style gate modal button — forms and some notices */
.tie-gate-btn,
.tie-plugin-root .tie-gate-btn {
  display: block !important;
  width: 100% !important;
  background: #F6B820 !important;
  color: #0a0f1e !important;
  border: none !important;
  padding: 0.9rem 1.5rem !important;
  border-radius: 10px !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  font-family: inherit !important;
  letter-spacing: -0.01em !important;
  box-shadow: 0 4px 16px rgba(246,184,32,0.35) !important;
  text-align: center !important;
  margin-top: 0.5rem !important;
  transition: background 0.2s !important;
}
.tie-gate-btn:hover,
.tie-plugin-root .tie-gate-btn:hover {
  background: #e8a800 !important;
  color: #0a0f1e !important;
}

/* Old-style gate modal branding/title on white background */
.tie-gate-logo {
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  color: #1E1E5E !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  margin-bottom: 0.75rem !important;
  display: block !important;
}
.tie-gate-title {
  font-size: 1.5rem !important;
  font-weight: 900 !important;
  color: #0a0f1e !important;
  line-height: 1.2 !important;
  margin-bottom: 0.5rem !important;
  letter-spacing: -0.02em !important;
}

/* ============================================================
   FIX 2: tie-hero-inner — forms/notices pages hero has no
   max-width or horizontal padding. Content bleeds to left edge.
   The FIX5 block covers tie-strategy-hero-inner but NOT
   tie-hero-inner. Adding it here.
   ============================================================ */
.tie-plugin-root .tie-hero-inner {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  box-sizing: border-box !important;
}
@media (max-width: 768px) {
  .tie-plugin-root .tie-hero-inner {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* ============================================================
   FIX 3: tie-fact-item / tie-fact-list — Quick Reference sidebar
   label and value render inline with no separation (no CSS defined
   for these classes). Fix: flex row with space-between.
   ============================================================ */
.tie-plugin-root .tie-fact-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}
.tie-plugin-root .tie-fact-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  padding: 0.45rem 0 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  gap: 0.75rem !important;
  font-size: 0.875rem !important;
}
.tie-plugin-root .tie-fact-item:last-child {
  border-bottom: none !important;
}
.tie-plugin-root .tie-fact-label {
  color: #64748b !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
  flex-shrink: 0 !important;
  max-width: 55% !important;
}
.tie-plugin-root .tie-fact-value {
  color: #0f172a !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
  text-align: right !important;
  flex: 1 !important;
}

/* ============================================================
   FIX 4: Old gate modal — ensure tie-gate-email input on white
   background is visible (not transparent/white-on-white).
   Also fix tie-gate-sub and tie-gate-disclaimer on white bg.
   ============================================================ */
.tie-gate-overlay .tie-gate-email {
  display: block !important;
  width: 100% !important;
  padding: 0.82rem 1rem !important;
  border: 2px solid #64748b !important;
  border-radius: 10px !important;
  font-size: 0.95rem !important;
  color: #0f172a !important;
  background: #f1f5f9 !important;
  font-family: inherit !important;
  box-sizing: border-box !important;
  outline: none !important;
  margin-bottom: 0.5rem !important;
}
.tie-gate-overlay .tie-gate-email:focus {
  border-color: #1E1E5E !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(30,30,94,0.15) !important;
}
.tie-gate-overlay .tie-gate-email::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}
.tie-gate-overlay .tie-gate-disclaimer {
  color: #64748b !important;
  font-size: 0.72rem !important;
  text-align: center !important;
  margin-top: 0.75rem !important;
  line-height: 1.5 !important;
}
.tie-gate-overlay .tie-gate-sub {
  color: #475569 !important;
  font-size: 0.875rem !important;
  line-height: 1.6 !important;
  margin-bottom: 1rem !important;
}
.tie-gate-overlay .tie-gate-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}

/* Old gate modal body padding (no topbar) */
.tie-gate-overlay .tie-gate-modal:not(:has(.tie-gate-topbar)) {
  padding: 2rem 2rem 1.75rem !important;
}

/* === END PATCH v2.21.21 === */

/* ============================================================
   PATCH v2.21.22 — tie-hero-content container fix
   ============================================================
   FIX: tie-hero-content (used by 91 notice + form pages) had no
   max-width, padding, or margin:auto — so the hero content bled
   to the full viewport left/right edge.

   The v2.21.21 patch fixed tie-hero-inner (61 pages) but missed
   tie-hero-content (91 pages). This patch covers both containers.
   The authority-bar (badge row below hero) is also constrained to
   1200px so it aligns with the hero text above it.
   ============================================================ */

/* Hero content inner container — notice + form pages */
.tie-plugin-root .tie-hero-content {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  box-sizing: border-box !important;
}
@media (max-width: 768px) {
  .tie-plugin-root .tie-hero-content {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* Authority bar — constrain items to same 1200px grid as hero */
.tie-plugin-root .tie-authority-bar {
  padding-left: calc((100% - 1200px) / 2 + 1.5rem) !important;
  padding-right: calc((100% - 1200px) / 2 + 1.5rem) !important;
}
@media (max-width: 1232px) {
  .tie-plugin-root .tie-authority-bar {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}
@media (max-width: 768px) {
  .tie-plugin-root .tie-authority-bar {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* === END PATCH v2.21.22 === */

/* ============================================================
   PATCH v2.21.24
   
   FIX: tie-verified-bar blank area on 70 form pages
   
   ROOT CAUSE: 70 form pages use <span class="tie-verified-item">
   directly inside <div class="tie-verified-bar"> with NO inner
   wrapper div. The existing CSS only sets display:flex on
   .tie-verified-bar-inner — so when items are direct children,
   .tie-verified-bar defaults to display:block and each span
   stacks vertically, inflating the bar to ~1190px of blank
   mint-green space.
   
   FIX: Add display:flex directly to .tie-verified-bar so it
   works regardless of whether items are wrapped or direct.
   ============================================================ */

.tie-plugin-root .tie-verified-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.5rem 1.25rem !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Ensure inner wrapper (when present) still works correctly */
.tie-plugin-root .tie-verified-bar .tie-verified-bar-inner,
.tie-plugin-root .tie-verified-bar .tie-container {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.5rem 1.25rem !important;
  width: 100% !important;
}

/* Direct tie-verified-item children — consistent styling */
.tie-plugin-root .tie-verified-bar > .tie-verified-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: #166534 !important;
  white-space: nowrap !important;
}

.tie-plugin-root .tie-verified-bar > .tie-verified-item svg {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
}

/* tie-verified-badge and tie-verified-date (notice page pattern) */
.tie-plugin-root .tie-verified-bar > .tie-verified-badge {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: #166534 !important;
}

.tie-plugin-root .tie-verified-bar > .tie-verified-date {
  font-size: 0.8125rem !important;
  color: #475569 !important;
  font-weight: 400 !important;
}

@media (max-width: 768px) {
  .tie-plugin-root .tie-verified-bar > .tie-verified-item {
    white-space: normal !important;
  }
}

/* === END PATCH v2.21.24 === */

/* === PATCH v2.21.27 ===
   FIX 1: .tie-sidebar-cta .tie-btn — button uses .tie-btn (not .tie-btn-primary)
   so it inherits dark navy text on a dark navy background = invisible.
   Fix: force yellow background + dark text on any .tie-btn inside .tie-sidebar-cta.
   ============================================================ */
.tie-plugin-root .tie-sidebar-cta .tie-btn,
.tie-plugin-root .tie-sidebar-cta a.tie-btn {
}
.tie-plugin-root .tie-sidebar-cta .tie-btn:hover,
.tie-plugin-root .tie-sidebar-cta a.tie-btn:hover {
}

/* ============================================================
   FIX 2: .tie-content-layout — no max-width or horizontal padding
   causes the two-column layout to span edge-to-edge on wide screens.
   Constrain to 1280px and add consistent horizontal padding.
   ============================================================ */
.tie-plugin-root .tie-content-layout {
}
@media (max-width: 768px) {
  .tie-plugin-root .tie-content-layout {
  }
}

/* ============================================================
   FIX 3: .tie-cta-section — full-bleed section needs inner padding
   to avoid edge-to-edge text on wide screens.
   ============================================================ */
.tie-plugin-root .tie-cta-section,
.tie-plugin-root section.tie-cta-section {
}
/* === END PATCH v2.21.27 === */

/* === PATCH v2.21.27 ===
   FIX 1: .tie-sidebar-cta .tie-btn — button uses .tie-btn (not .tie-btn-primary)
   so it inherits dark navy text on a dark navy background = invisible.
   Fix: force yellow background + dark text on any .tie-btn inside .tie-sidebar-cta.
   ============================================================ */
.tie-plugin-root .tie-sidebar-cta .tie-btn,
.tie-plugin-root .tie-sidebar-cta a.tie-btn {
  background: #F6B820 !important;
  color: #0a0f1e !important;
  display: block !important;
  text-align: center !important;
  padding: 0.75rem 1rem !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  width: 100% !important;
  font-size: 0.9375rem !important;
  box-shadow: 0 2px 8px rgba(246,184,32,0.30) !important;
  box-sizing: border-box !important;
}
.tie-plugin-root .tie-sidebar-cta .tie-btn:hover,
.tie-plugin-root .tie-sidebar-cta a.tie-btn:hover {
  background: #e0a800 !important;
  color: #0a0f1e !important;
  text-decoration: none !important;
}
/* FIX 2: .tie-content-layout — constrain to 1280px with horizontal padding */
.tie-plugin-root .tie-content-layout {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  box-sizing: border-box !important;
}
@media (max-width: 768px) {
  .tie-plugin-root .tie-content-layout {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}
/* FIX 3: .tie-cta-section — add horizontal padding */
.tie-plugin-root .tie-cta-section,
.tie-plugin-root section.tie-cta-section {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
  box-sizing: border-box !important;
}
/* === END PATCH v2.21.27 === */

/* === PATCH v2.21.28 — White text fixes ===
   FIX 1: Hero h1 (plain tag, no class) inside .tie-hero-section — dark navy theme overrides white
   FIX 2: Sidebar CTA h3 (plain tag, no class) inside .tie-sidebar-cta — same issue
   FIX 3: Breadcrumb links inside .tie-hero-section (plain <a> tags, no class)
   All use !important to beat the Hello Biz theme's h1/h2/h3/a color rules.
   ============================================================ */

/* Hero h1 title */
.tie-plugin-root .tie-hero-section h1,
.tie-plugin-root .tie-hero-section h2,
.tie-plugin-root .tie-hero-inner h1,
.tie-plugin-root .tie-hero-inner h2 {
  color: #ffffff !important;
}

/* Hero breadcrumb plain <a> tags */
.tie-plugin-root .tie-hero-section .tie-breadcrumb a,
.tie-plugin-root .tie-hero-inner .tie-breadcrumb a,
.tie-plugin-root .tie-hero-section nav a,
.tie-plugin-root .tie-hero-inner nav a {
  color: rgba(255,255,255,0.80) !important;
  text-decoration: none !important;
}
.tie-plugin-root .tie-hero-section .tie-breadcrumb a:hover,
.tie-plugin-root .tie-hero-inner .tie-breadcrumb a:hover {
  color: #F6B820 !important;
}

/* Hero breadcrumb separators and current page span */
.tie-plugin-root .tie-hero-section .tie-breadcrumb span,
.tie-plugin-root .tie-hero-inner .tie-breadcrumb span {
  color: rgba(255,255,255,0.50) !important;
}

/* Sidebar CTA card h3 heading */
.tie-plugin-root .tie-sidebar-cta h3,
.tie-plugin-root .tie-sidebar-cta h4 {
  color: #ffffff !important;
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  margin-bottom: 0.5rem !important;
  line-height: 1.3 !important;
}

/* === END PATCH v2.21.28 === */

/* === PATCH v2.21.32 — Tax Credit Pages: Hero Text Color + Width Fix === */

/* Hero section for tax credit individual pages */
.tie-plugin-root .tie-hero.tie-hero--inner {
  background: linear-gradient(145deg, #0f1240 0%, #1E1E5E 55%, #2a2a7a 100%) !important;
  padding: 3rem 0 2.5rem !important;
  color: #fff !important;
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.tie-plugin-root .tie-hero.tie-hero--inner::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
  background: radial-gradient(ellipse at 80% 20%, rgba(246,184,32,0.07) 0%, transparent 60%) !important;
  pointer-events: none !important;
}
.tie-plugin-root .tie-hero.tie-hero--inner .tie-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 1.5rem !important;
  position: relative !important;
  z-index: 1 !important;
  box-sizing: border-box !important;
}
.tie-plugin-root .tie-hero.tie-hero--inner .tie-page-title,
.tie-plugin-root .tie-hero.tie-hero--inner h1 {
  color: #ffffff !important;
  font-size: 2.125rem !important;
  font-weight: 800 !important;
  margin-bottom: 0.625rem !important;
  letter-spacing: -0.03em !important;
  line-height: 1.2 !important;
}
.tie-plugin-root .tie-hero.tie-hero--inner .tie-page-subtitle,
.tie-plugin-root .tie-hero.tie-hero--inner > .tie-container > p {
  color: rgba(255,255,255,0.82) !important;
  font-size: 1rem !important;
  line-height: 1.65 !important;
  margin-bottom: 1.25rem !important;
  max-width: 780px !important;
}
.tie-plugin-root .tie-hero.tie-hero--inner .tie-breadcrumb {
  margin-bottom: 1rem !important;
  font-size: 0.8125rem !important;
  color: rgba(255,255,255,0.6) !important;
}
.tie-plugin-root .tie-hero.tie-hero--inner .tie-breadcrumb a {
  color: rgba(255,255,255,0.75) !important;
  text-decoration: none !important;
}
.tie-plugin-root .tie-hero.tie-hero--inner .tie-breadcrumb a:hover {
  color: #F6B820 !important;
}
.tie-plugin-root .tie-hero.tie-hero--inner .tie-breadcrumb span {
  color: rgba(255,255,255,0.4) !important;
  margin: 0 0.35rem !important;
}
.tie-plugin-root .tie-hero.tie-hero--inner .tie-hero-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  margin-top: 0.25rem !important;
}
.tie-plugin-root .tie-hero.tie-hero--inner .tie-hero-tag {
  background: rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.88) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  border-radius: 20px !important;
  padding: 0.25rem 0.75rem !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}
.tie-plugin-root .tie-page-content {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}
@media (max-width: 768px) {
  .tie-plugin-root .tie-hero.tie-hero--inner .tie-page-title,
  .tie-plugin-root .tie-hero.tie-hero--inner h1 {
    font-size: 1.625rem !important;
  }
  .tie-plugin-root .tie-hero.tie-hero--inner .tie-container {
    padding: 0 1rem !important;
  }
}

/* === END PATCH v2.21.32 === */

/* === PATCH v2.21.32b — Tax Credits Hub: Body Width Fix === */

/* Constrain the hub body wrapper */
.tie-plugin-root .tie-hub-body {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 2.5rem 1.5rem !important;
  box-sizing: border-box !important;
  width: 100% !important;
  overflow-x: hidden !important;
}

/* Constrain the intro text block */
.tie-plugin-root .tie-hub-intro {
  max-width: 900px !important;
  margin-bottom: 2.5rem !important;
}
.tie-plugin-root .tie-hub-intro p {
  color: #374151 !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
  margin-bottom: 1rem !important;
}

/* Ensure hub sections don't overflow */
.tie-plugin-root .tie-hub-section {
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Prevent the outer page wrapper from overflowing on hub pages */
.tie-plugin-root {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

@media (max-width: 768px) {
  .tie-plugin-root .tie-hub-body {
    padding: 1.5rem 1rem !important;
  }
}

/* === END PATCH v2.21.32b === */


/* === PATCH v2.21.35 — Hub Card Classes + Visual Improvements === */

/* tie-strategy-irc, tie-strategy-title, tie-strategy-desc */
.tie-plugin-root .tie-strategy-irc {
  display: inline-block !important;
  background: rgba(30,30,94,0.08) !important;
  color: #1E1E5E !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  padding: 0.2rem 0.55rem !important;
  border-radius: 4px !important;
  margin-bottom: 2px !important;
  white-space: nowrap !important;
}
.tie-plugin-root .tie-strategy-title {
  color: #0f172a !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  margin: 0.5rem 0 0.375rem !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
}
.tie-plugin-root .tie-strategy-desc {
  color: #475569 !important;
  font-size: 0.8125rem !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}
.tie-plugin-root .tie-strategy-card--view-all {
  background: #1E1E5E !important;
  border-color: #1E1E5E !important;
}
.tie-plugin-root .tie-strategy-card--view-all .tie-strategy-irc {
  background: rgba(246,184,32,0.18) !important;
  color: #F6B820 !important;
}
.tie-plugin-root .tie-strategy-card--view-all .tie-strategy-title {
  color: #fff !important;
}
.tie-plugin-root .tie-strategy-card--view-all .tie-strategy-desc {
  color: rgba(255,255,255,0.75) !important;
}
.tie-plugin-root .tie-strategy-card--view-all:hover {
  background: #16165a !important;
  border-color: #16165a !important;
  transform: translateY(-2px) !important;
}

/* Section accent top-border by section ID */
#irs-representation .tie-strategy-card { border-top: 3px solid #dc2626 !important; }
#client-types .tie-strategy-card       { border-top: 3px solid #2563eb !important; }
#legislative-updates .tie-strategy-card{ border-top: 3px solid #7c3aed !important; }
#practice-management .tie-strategy-card{ border-top: 3px solid #0891b2 !important; }
#industry-guides .tie-strategy-card    { border-top: 3px solid #059669 !important; }
#how-to-guides .tie-strategy-card      { border-top: 3px solid #d97706 !important; }

/* Keep view-all card navy/yellow top border */
#irs-representation .tie-strategy-card--view-all,
#client-types .tie-strategy-card--view-all,
#legislative-updates .tie-strategy-card--view-all,
#practice-management .tie-strategy-card--view-all,
#industry-guides .tie-strategy-card--view-all,
#how-to-guides .tie-strategy-card--view-all {
  border-top: 3px solid #F6B820 !important;
}

/* Section label accent colors by section */
#irs-representation .tie-section-label   { color: #dc2626 !important; }
#client-types .tie-section-label         { color: #2563eb !important; }
#legislative-updates .tie-section-label  { color: #7c3aed !important; }
#practice-management .tie-section-label  { color: #0891b2 !important; }
#industry-guides .tie-section-label      { color: #059669 !important; }
#how-to-guides .tie-section-label        { color: #d97706 !important; }

/* Sidebar button fix (--gold) */
.tie-plugin-root .tie-btn--gold {
  background: #F6B820 !important;
  color: #121212 !important;
  font-weight: 700 !important;
  border: none !important;
  padding: 0.625rem 1.25rem !important;
  border-radius: 6px !important;
  display: inline-block !important;
  text-decoration: none !important;
  font-size: 0.875rem !important;
  cursor: pointer !important;
}
.tie-plugin-root .tie-btn--gold:hover {
  background: #e5a910 !important;
  color: #121212 !important;
  text-decoration: none !important;
}
.tie-plugin-root .tie-btn--full { width: 100% !important; text-align: center !important; display: block !important; }

/* Bottom CTA section */
.tie-plugin-root .tie-bottom-cta {
  background: #1E1E5E !important;
  padding: 3rem 0 !important;
}
.tie-plugin-root .tie-bottom-cta-inner { max-width: 760px !important; }
.tie-plugin-root .tie-bottom-cta-eyebrow {
  color: #F6B820 !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 0.75rem !important;
}
.tie-plugin-root .tie-bottom-cta-title {
  color: #fff !important;
  font-size: 1.625rem !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  margin-bottom: 0.875rem !important;
}
.tie-plugin-root .tie-bottom-cta-sub {
  color: rgba(255,255,255,0.78) !important;
  font-size: 1rem !important;
  line-height: 1.65 !important;
  margin-bottom: 1.5rem !important;
}
.tie-plugin-root .tie-bottom-cta-actions {
  display: flex !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
}

/* Marketplace CTA block */
.tie-plugin-root .tie-marketplace-cta {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-left: 4px solid #1E1E5E !important;
  border-radius: 8px !important;
  padding: 1.5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1.5rem !important;
  flex-wrap: wrap !important;
}
.tie-plugin-root .tie-marketplace-cta-text h3 {
  color: #0f172a !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  margin-bottom: 0.375rem !important;
}
.tie-plugin-root .tie-marketplace-cta-text p {
  color: #475569 !important;
  font-size: 0.875rem !important;
  margin: 0 !important;
}

/* Hub card tags */
.tie-plugin-root .tie-card-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.3rem !important;
  margin-bottom: 0.5rem !important;
}
.tie-plugin-root .tie-card-tag {
  background: rgba(30,30,94,0.07) !important;
  color: #1E1E5E !important;
  font-size: 0.625rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  padding: 0.15rem 0.45rem !important;
  border-radius: 3px !important;
  text-transform: uppercase !important;
}
.tie-plugin-root .tie-card-title {
  color: #0f172a !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  margin: 0 0 0.375rem !important;
  line-height: 1.4 !important;
}
.tie-plugin-root .tie-card-desc {
  color: #64748b !important;
  font-size: 0.8125rem !important;
  line-height: 1.5 !important;
  margin: 0 0 0.5rem !important;
}
.tie-plugin-root .tie-card-arrow {
  color: #1E1E5E !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
}

/* Hub section title */
.tie-plugin-root .tie-hub-section-title {
  color: #0f172a !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  margin-bottom: 1rem !important;
  padding-bottom: 0.5rem !important;
  border-bottom: 2px solid #F6B820 !important;
}

/* Hub CTA block */
.tie-plugin-root .tie-hub-cta {
  background: #1E1E5E !important;
  border-radius: 12px !important;
  padding: 2.5rem !important;
  margin-top: 3rem !important;
  text-align: center !important;
}
.tie-plugin-root .tie-hub-cta-inner h2 {
  color: #fff !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  margin-bottom: 0.75rem !important;
}
.tie-plugin-root .tie-hub-cta-inner p {
  color: rgba(255,255,255,0.78) !important;
  font-size: 0.9375rem !important;
  margin-bottom: 1.25rem !important;
}
.tie-plugin-root .tie-hub-cta-btn {
  display: inline-block !important;
  background: #F6B820 !important;
  color: #121212 !important;
  font-weight: 700 !important;
  padding: 0.75rem 1.75rem !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  font-size: 0.9375rem !important;
}
.tie-plugin-root .tie-hub-cta-btn:hover {
  background: #e5a910 !important;
  color: #121212 !important;
  text-decoration: none !important;
}

/* Comparison table */
.tie-plugin-root .tie-comparison-table { margin: 2.5rem 0 !important; }
.tie-plugin-root .tie-comparison-table h2 {
  color: #0f172a !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  margin-bottom: 1rem !important;
}
.tie-plugin-root .tie-table-source {
  color: #94a3b8 !important;
  font-size: 0.75rem !important;
  margin-top: 0.5rem !important;
}

/* Hub intro */
.tie-plugin-root .tie-hub-intro h2 {
  color: #0f172a !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  margin-bottom: 0.75rem !important;
}
.tie-plugin-root .tie-hub-intro p {
  color: #374151 !important;
  font-size: 0.9375rem !important;
  line-height: 1.7 !important;
  margin-bottom: 0.875rem !important;
}

/* Sticky bar */
.tie-plugin-root .tie-sticky-bar { display: none !important; }

/* Module view-all link */
.tie-plugin-root .tie-module-view-all {
  color: #1E1E5E !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  border-bottom: 2px solid #F6B820 !important;
  padding-bottom: 2px !important;
}
.tie-plugin-root .tie-module-view-all:hover {
  color: #F6B820 !important;
  text-decoration: none !important;
}

/* === END PATCH v2.21.35 === */

/* === PATCH v2.21.35b — Sub-hub stat/label aliases + hub-body === */
.tie-plugin-root .tie-stat-num {
  color: #F6B820 !important;
  font-size: 2rem !important;
  font-weight: 800 !important;
  display: block !important;
  letter-spacing: -0.03em !important;
}
.tie-plugin-root .tie-stat-label {
  color: rgba(255,255,255,0.72) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
}
.tie-plugin-root .tie-hub-label {
  display: inline-block !important;
  color: #F6B820 !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  margin-bottom: 0.75rem !important;
}
.tie-plugin-root .tie-hub-body {
  padding: 2.5rem 0 !important;
}
.tie-plugin-root .tie-page-wrap {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}
/* === END PATCH v2.21.35b === */

/* === PATCH v2.21.35c — tie-page-hero.tie-hero--inner alias === */
/* PM, How-To, Industry, Client-Types, Legislative pages use tie-page-hero instead of tie-hero */
.tie-plugin-root .tie-page-hero.tie-hero--inner {
  background: linear-gradient(145deg, #0f1240 0%, #1E1E5E 55%, #2a2a7a 100%) !important;
  padding: 3rem 0 2.5rem !important;
  color: #fff !important;
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.tie-plugin-root .tie-page-hero.tie-hero--inner::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
  background: radial-gradient(ellipse at 80% 20%, rgba(246,184,32,0.07) 0%, transparent 60%) !important;
  pointer-events: none !important;
}
.tie-plugin-root .tie-page-hero.tie-hero--inner .tie-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 1.5rem !important;
  position: relative !important;
  z-index: 1 !important;
  box-sizing: border-box !important;
}
.tie-plugin-root .tie-page-hero.tie-hero--inner .tie-page-title,
.tie-plugin-root .tie-page-hero.tie-hero--inner h1 {
  color: #ffffff !important;
  font-size: 2.125rem !important;
  font-weight: 800 !important;
  margin-bottom: 0.625rem !important;
  letter-spacing: -0.03em !important;
  line-height: 1.2 !important;
}
.tie-plugin-root .tie-page-hero.tie-hero--inner .tie-page-subtitle {
  color: rgba(255,255,255,0.82) !important;
  font-size: 1rem !important;
  line-height: 1.65 !important;
  margin-bottom: 1.25rem !important;
  max-width: 780px !important;
}
.tie-plugin-root .tie-page-hero.tie-hero--inner .tie-breadcrumb {
  margin-bottom: 1rem !important;
  font-size: 0.8125rem !important;
  color: rgba(255,255,255,0.6) !important;
}
.tie-plugin-root .tie-page-hero.tie-hero--inner .tie-breadcrumb a {
  color: rgba(255,255,255,0.75) !important;
  text-decoration: none !important;
}
.tie-plugin-root .tie-page-hero.tie-hero--inner .tie-hero-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  margin-top: 1rem !important;
}
.tie-plugin-root .tie-page-hero.tie-hero--inner .tie-hero-tag {
  background: rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.9) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  padding: 0.25rem 0.75rem !important;
  border-radius: 20px !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
}
@media (max-width: 768px) {
  .tie-plugin-root .tie-page-hero.tie-hero--inner { padding: 2rem 0 1.75rem !important; }
  .tie-plugin-root .tie-page-hero.tie-hero--inner .tie-page-title,
  .tie-plugin-root .tie-page-hero.tie-hero--inner h1 { font-size: 1.625rem !important; }
}

/* === PATCH v2.21.35d — New-format page classes (Client Types, PM, Legislative, etc.) === */

/* Outer page wrapper */
.tie-plugin-root .tie-page-wrap {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Eyebrow label above H1 in hero */
.tie-plugin-root .tie-eyebrow {
  display: block !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.65) !important;
  margin-bottom: 0.5rem !important;
}

/* Hero inner content wrapper */
.tie-plugin-root .tie-hero-content {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 1.5rem !important;
  position: relative !important;
  z-index: 1 !important;
  box-sizing: border-box !important;
}

/* Tag row — flex container for hero tags */
.tie-plugin-root .tie-tag-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  margin-top: 1rem !important;
}

/* Individual tag pill */
.tie-plugin-root .tie-tag {
  display: inline-block !important;
  background: rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.9) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  padding: 0.25rem 0.75rem !important;
  border-radius: 20px !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

/* Page body — two-column layout (main + sidebar) */
.tie-plugin-root .tie-page-body {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 2rem 1.5rem !important;
  display: grid !important;
  grid-template-columns: 1fr 300px !important;
  gap: 2rem !important;
  box-sizing: border-box !important;
  align-items: start !important;
}

/* Main content column */
.tie-plugin-root .tie-content-main {
  min-width: 0 !important;
}

/* Content section */
.tie-plugin-root .tie-section {
  margin-bottom: 2rem !important;
}

.tie-plugin-root .tie-section h2,
.tie-plugin-root .tie-section .tie-section-title {
  font-size: 1.375rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin-bottom: 1rem !important;
  padding-bottom: 0.5rem !important;
  border-bottom: 2px solid #f0b429 !important;
}

.tie-plugin-root .tie-section p {
  color: #374151 !important;
  line-height: 1.75 !important;
  margin-bottom: 1rem !important;
  font-size: 0.9375rem !important;
}

/* FAQ section for new-format pages */
.tie-plugin-root .tie-faq-section {
  margin-bottom: 2rem !important;
}

.tie-plugin-root .tie-faq-section h2 {
  font-size: 1.375rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin-bottom: 1rem !important;
  padding-bottom: 0.5rem !important;
  border-bottom: 2px solid #f0b429 !important;
}

/* FAQ item — button-based accordion */
.tie-plugin-root .tie-faq-item {
  border-bottom: 1px solid #e5e7eb !important;
}

.tie-plugin-root .tie-faq-item button.tie-faq-q {
  width: 100% !important;
  text-align: left !important;
  background: none !important;
  border: none !important;
  padding: 1rem 0 !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  color: #1E1E5E !important;
  cursor: pointer !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  line-height: 1.45 !important;
}

.tie-plugin-root .tie-faq-item button.tie-faq-q::after {
  content: '+' !important;
  font-size: 1.25rem !important;
  font-weight: 300 !important;
  color: #94a3b8 !important;
  flex-shrink: 0 !important;
  margin-left: 1rem !important;
}

.tie-plugin-root .tie-faq-item button.tie-faq-q:hover {
  color: #f0b429 !important;
}

.tie-plugin-root .tie-faq-item .tie-faq-a {
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.3s ease !important;
  padding: 0 !important;
  background: none !important;
}

.tie-plugin-root .tie-faq-item .tie-faq-a.open,
.tie-plugin-root .tie-faq-item.open .tie-faq-a {
  max-height: 800px !important;
  padding-bottom: 1rem !important;
}

.tie-plugin-root .tie-faq-item .tie-faq-a p {
  color: #374151 !important;
  font-size: 0.9rem !important;
  line-height: 1.7 !important;
  margin-bottom: 0.5rem !important;
}

/* Sidebar for new-format pages */
.tie-plugin-root .tie-page-sidebar {
  position: sticky !important;
  top: 2rem !important;
}

.tie-plugin-root .tie-sidebar-card {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  padding: 1.25rem !important;
  margin-bottom: 1.5rem !important;
}

.tie-plugin-root .tie-sidebar-card h3 {
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #1E1E5E !important;
  margin-bottom: 0.75rem !important;
}

.tie-plugin-root .tie-sidebar-card ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.tie-plugin-root .tie-sidebar-card ul li {
  padding: 0.4rem 0 !important;
  border-bottom: 1px solid #f3f4f6 !important;
}

.tie-plugin-root .tie-sidebar-card ul li:last-child {
  border-bottom: none !important;
}

.tie-plugin-root .tie-sidebar-card ul li a {
  color: #1E1E5E !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.tie-plugin-root .tie-sidebar-card ul li a:hover {
  color: #f0b429 !important;
}

/* Bottom CTA for new-format pages */
.tie-plugin-root .tie-bottom-cta {
  background: linear-gradient(135deg, #0f1240 0%, #1E1E5E 100%) !important;
  color: #fff !important;
  padding: 3rem 1.5rem !important;
  text-align: center !important;
  margin-top: 2rem !important;
}

.tie-plugin-root .tie-bottom-cta h2 {
  font-size: 1.625rem !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin-bottom: 0.75rem !important;
}

.tie-plugin-root .tie-bottom-cta p {
  color: rgba(255,255,255,0.8) !important;
  font-size: 1rem !important;
  margin-bottom: 1.5rem !important;
  max-width: 600px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.tie-plugin-root .tie-bottom-cta .tie-btn,
.tie-plugin-root .tie-bottom-cta a {
  display: inline-block !important;
  background: #f0b429 !important;
  color: #0f1240 !important;
  font-weight: 700 !important;
  padding: 0.875rem 2rem !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  font-size: 1rem !important;
  margin: 0.25rem !important;
}

/* Restore white button style in bottom CTA */
.tie-plugin-root .tie-bottom-cta .tie-btn-white {
  background: #ffffff !important;
  color: #1E1E5E !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
}
.tie-plugin-root .tie-bottom-cta .tie-btn-white:hover {
  background: #f8fafc !important;
  color: #1E1E5E !important;
}

/* Responsive — stack to single column on mobile */
@media (max-width: 768px) {
  .tie-plugin-root .tie-page-body {
    grid-template-columns: 1fr !important;
    padding: 1.5rem 1rem !important;
  }
  .tie-plugin-root .tie-page-sidebar {
    position: static !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PATCH v2.21.36c — Mobile UI Fixes
   ═══════════════════════════════════════════════════════════════ */

/* 1. Hide WordPress theme header on TIE pages */
#header,
#headerimg,
#page > hr:first-of-type,
.wp-site-blocks > header,
.wp-block-template-part[data-type="header"],
header.wp-block-template-part {
  display: none !important;
}

/* 2. Remove gap above TIE content caused by WP header */
#page {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.tie-plugin-root {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 3. Fix table overflow on mobile — horizontal scroll */
@media (max-width: 768px) {
  .tie-plugin-root table,
  .tie-plugin-root .tie-table,
  .tie-plugin-root .tie-comparison-table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    font-size: 0.8rem !important;
  }

  .tie-plugin-root table th,
  .tie-plugin-root table td {
    white-space: normal !important;
    min-width: 80px !important;
    padding: 0.4rem 0.5rem !important;
  }

  /* Section title overflow */
  .tie-plugin-root .tie-section-title,
  .tie-plugin-root .tie-page-title,
  .tie-plugin-root h1,
  .tie-plugin-root h2,
  .tie-plugin-root h3 {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Breadcrumb overflow */
  .tie-plugin-root .tie-breadcrumb,
  .tie-plugin-root .tie-page-breadcrumb {
    font-size: 0.75rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
  }

  /* Content layout — stack on mobile */
  .tie-plugin-root .tie-content-layout,
  .tie-plugin-root .tie-page-body,
  .tie-plugin-root .tie-content-main {
    flex-direction: column !important;
    gap: 1.5rem !important;
  }

  .tie-plugin-root .tie-page-sidebar,
  .tie-plugin-root .tie-sidebar {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    order: 2 !important;
  }

  .tie-plugin-root .tie-main-content,
  .tie-plugin-root .tie-content-main > div:first-child {
    width: 100% !important;
    order: 1 !important;
  }
}

/* 4. Fix Kam Code callout background on mobile */
.tie-plugin-root .tie-kamcode-callout,
.tie-plugin-root .kamcode-callout,
.tie-plugin-root [class*="kam-code"],
.tie-plugin-root [class*="kamcode"] {
  background: #fffbeb !important;
  border-left: 4px solid #F6B820 !important;
  padding: 1rem 1.25rem !important;
  margin: 1.5rem 0 !important;
  border-radius: 0 0.375rem 0.375rem 0 !important;
}

/* 5. Fix coaching callout */
.tie-plugin-root .tie-coaching-callout,
.tie-plugin-root [class*="coaching"] {
  background: #eff6ff !important;
  border-left: 4px solid #2563eb !important;
  padding: 1rem 1.25rem !important;
  margin: 1.5rem 0 !important;
  border-radius: 0 0.375rem 0.375rem 0 !important;
}

/* 6. Fix hero gap on new-format pages (tie-page-hero vs tie-hero) */
.tie-plugin-root .tie-page-hero {
  margin-top: 0 !important;
}

.tie-plugin-root .tie-hero {
  margin-top: 0 !important;
}

/* 7. Fix search bar on mobile */
@media (max-width: 768px) {
  .tie-plugin-root .tie-inpage-search-bar {
    padding: 1rem !important;
  }

  .tie-plugin-root .tie-inpage-search-inner {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  .tie-plugin-root .tie-inpage-search-input {
    width: 100% !important;
    font-size: 0.9rem !important;
  }

  .tie-plugin-root .tie-inpage-chips {
    flex-wrap: wrap !important;
    gap: 0.375rem !important;
  }

  .tie-plugin-root .tie-inpage-chip {
    font-size: 0.75rem !important;
    padding: 0.25rem 0.625rem !important;
  }

  /* Fix hero padding on mobile */
  .tie-plugin-root .tie-hero.tie-hero--inner,
  .tie-plugin-root .tie-page-hero.tie-hero--inner {
    padding: 1.5rem 1rem 2rem !important;
  }

  /* Fix hero H1 size on mobile */
  .tie-plugin-root .tie-hero--inner h1,
  .tie-plugin-root .tie-page-hero h1,
  .tie-plugin-root .tie-page-title {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
  }

  /* Fix section padding on mobile */
  .tie-plugin-root .tie-container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Fix card grid on mobile */
  .tie-plugin-root .tie-hub-grid,
  .tie-plugin-root .tie-strategy-grid,
  .tie-plugin-root .tie-card-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  /* Fix stats on mobile */
  .tie-plugin-root .tie-hub-stats,
  .tie-plugin-root .tie-page-hero-stats {
    flex-wrap: wrap !important;
    gap: 1rem !important;
  }

  .tie-plugin-root .tie-hub-stat,
  .tie-plugin-root .tie-page-hero-stat {
    min-width: calc(50% - 0.5rem) !important;
  }
}

/* 8. Fix the sticky footer bar on mobile */
@media (max-width: 480px) {
  .tie-plugin-root .tie-sticky-footer,
  .tie-plugin-root .tie-sticky-bar {
    flex-direction: column !important;
    gap: 0.5rem !important;
    padding: 0.75rem 1rem !important;
    text-align: center !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PATCH v2.21.36d — Hide WP Theme Header on TIE Pages
   ═══════════════════════════════════════════════════════════════ */

/* Hide the WordPress theme header and separator on all TIE pages */
body.tie-active-page #header,
body.tie-active-page #headerimg,
body.tie-active-page #page > hr,
body.tie-active-page .site-header,
body.tie-active-page .wp-block-template-part[class*="header"],
body.tie-active-page header.wp-block-template-part,
body.tie-active-page .wp-site-blocks > header {
  display: none !important;
}

/* Remove top padding/margin from page wrapper on TIE pages */
body.tie-active-page #page,
body.tie-active-page #content,
body.tie-active-page .site-content,
body.tie-active-page .wp-site-blocks {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Ensure TIE plugin root starts at the very top */
body.tie-active-page .tie-plugin-root {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   PATCH v2.21.36e — Mobile Responsive Fixes
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Table overflow — mobile only ── */
/* On mobile, tables scroll horizontally */
@media (max-width: 768px) {
  .tie-page-content table,
  .tie-content-main table,
  .tie-main-content table,
  .tie-section table,
  .tie-page-body table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    width: 100%;
  }

  /* Ensure table cells don't shrink too small */
  .tie-page-content table th,
  .tie-page-content table td,
  .tie-content-main table th,
  .tie-content-main table td,
  .tie-section table th,
  .tie-section table td {
    min-width: 70px;
    white-space: normal;
    word-break: break-word;
  }
}

/* Desktop tables — normal display */
@media (min-width: 769px) {
  .tie-page-content table,
  .tie-content-main table,
  .tie-main-content table,
  .tie-section table,
  .tie-page-body table {
    display: table;
    width: 100%;
    table-layout: auto;
  }
}

/* ── 2. Section titles word wrap ── */
.tie-section-title,
.tie-section h2,
.tie-section h3,
.tie-content-main h2,
.tie-content-main h3,
.tie-main-content h2,
.tie-main-content h3,
.tie-page-body h2,
.tie-page-body h3 {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  max-width: 100%;
}

/* ── 3. Mobile layout fixes ── */
@media (max-width: 768px) {

  /* Fix sidebar gap — stack sidebar below content on mobile */
  .tie-content-layout,
  .tie-page-layout {
    display: block !important;
    flex-direction: column !important;
  }

  .tie-main-content,
  .tie-content-main {
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
  }

  .tie-sidebar,
  .tie-page-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 2rem !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  /* Remove the white gap between hero and content */
  .tie-page-hero + .tie-content-layout,
  .tie-hero + .tie-content-layout,
  .tie-hero.tie-hero--inner + .tie-content-layout,
  .tie-page-hero.tie-hero--inner + .tie-content-layout {
    margin-top: 0 !important;
    padding-top: 1.5rem !important;
  }

  /* Fix hero padding on mobile */
  .tie-hero,
  .tie-hero--inner,
  .tie-page-hero,
  .tie-hub-hero {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  /* Fix section padding on mobile */
  .tie-section,
  .tie-page-section {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Fix content layout padding on mobile */
  .tie-content-layout {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Fix strategy cards grid on mobile */
  .tie-strategy-grid,
  .tie-card-grid {
    grid-template-columns: 1fr !important;
  }

  /* Fix hub stats on mobile */
  .tie-hub-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  /* Fix section label on mobile */
  .tie-section-label {
    font-size: 0.65rem !important;
    letter-spacing: 0.1em !important;
  }

  /* Fix bottom CTA on mobile */
  .tie-bottom-cta {
    padding: 2rem 1rem !important;
  }

  .tie-bottom-cta h2 {
    font-size: 1.4rem !important;
  }

  /* Fix sticky footer on mobile */
  .tie-sticky-footer {
    padding: 0.75rem 1rem !important;
    font-size: 0.8rem !important;
  }

  /* Fix FAQ items on mobile */
  .tie-faq-item,
  .tie-faq-q {
    padding: 0.75rem 1rem !important;
  }

  /* Fix callout boxes on mobile */
  .tie-callout,
  .tie-warning-box,
  .tie-tip-box,
  .tie-kamcode-callout,
  .tie-coaching-callout {
    padding: 1rem !important;
    margin: 1rem 0 !important;
  }

  /* Fix breadcrumb on mobile */
  .tie-breadcrumb {
    font-size: 0.75rem !important;
    flex-wrap: wrap !important;
  }

  /* Fix hero tags on mobile */
  .tie-hero-tags,
  .tie-tag-row,
  .tie-page-tags {
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
  }

  /* Fix search bar on mobile */
  .tie-inpage-search-bar {
    padding: 1rem !important;
  }

  .tie-inpage-search-inner {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  .tie-inpage-search-inner input {
    width: 100% !important;
    border-radius: 6px !important;
  }

  .tie-inpage-search-inner button {
    width: 100% !important;
    border-radius: 6px !important;
  }

  /* Fix hub tab nav on mobile */
  .tie-tab-nav {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    padding-bottom: 0.5rem !important;
  }

  /* Fix card grid on mobile */
  .tie-cards-grid,
  .tie-strategy-cards {
    grid-template-columns: 1fr !important;
  }

  /* Fix section heading size on mobile */
  .tie-section-heading {
    font-size: 1.3rem !important;
  }

  /* Fix table wrapper for horizontal scroll */
  .tie-table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 -1rem !important;
    padding: 0 1rem !important;
  }
}

/* ── 4. Ensure all content tables have scroll wrapper ── */
.tie-page-content .tie-table-wrapper,
.tie-content-main .tie-table-wrapper,
.tie-section .tie-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

/* ── 5. Fix the gap between hero and content area ── */
.tie-page-body {
  margin-top: 0 !important;
}

.tie-hero--inner + * {
  margin-top: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   PATCH v2.21.36g — Fix table header wrapping on mobile
   ═══════════════════════════════════════════════════════════════ */

/* Table headers should not wrap — they define column widths */
@media (max-width: 768px) {
  .tie-page-content table th,
  .tie-content-main table th,
  .tie-main-content table th,
  .tie-section table th,
  .tie-page-body table th {
    white-space: nowrap !important;
    word-break: normal !important;
    min-width: 80px !important;
  }

  /* Data cells: use overflow-wrap (not word-break) for natural breaks */
  .tie-page-content table td,
  .tie-content-main table td,
  .tie-main-content table td,
  .tie-section table td,
  .tie-page-body table td {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    min-width: 70px !important;
  }
}

/* Desktop: ensure no word-break on table cells */
@media (min-width: 769px) {
  .tie-page-content table th,
  .tie-page-content table td,
  .tie-content-main table th,
  .tie-content-main table td,
  .tie-section table th,
  .tie-section table td {
    word-break: normal !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
  }
}


/* ============================================================
   QC FIX v2.21.39 — Missing CSS Class Definitions
   ============================================================ */

.tie-plugin-root .tie-callout--info { background: #eff6ff; border-left-color: #3b82f6; }
.tie-plugin-root .tie-callout--warning { background: #fffbeb; border-left-color: #f59e0b; }
.tie-plugin-root .tie-callout--tip { background: #f0fdf4; border-left-color: #22c55e; }
.tie-plugin-root .tie-callout--case { background: #f5f3ff; border-left-color: #8b5cf6; }
.tie-plugin-root .tie-callout--gold { background: #fffbeb; border-left-color: #F6B820; }
.tie-plugin-root .tie-callout--script { background: #f0f4ff; border-left-color: #162F58; }
.tie-plugin-root .tie-callout--success { background: #f0fdf4; border-left-color: #16a34a; }
.tie-plugin-root .tie-callout-title { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #162F58; margin-bottom: 8px; }
.tie-plugin-root .tie-callout--info .tie-callout-title { color: #1d4ed8; }
.tie-plugin-root .tie-callout--warning .tie-callout-title { color: #b45309; }
.tie-plugin-root .tie-callout--tip .tie-callout-title { color: #15803d; }
.tie-plugin-root .tie-callout--case .tie-callout-title { color: #6d28d9; }
.tie-plugin-root .tie-callout-body { font-size: 15px; line-height: 1.65; color: #374151; }
.tie-plugin-root .tie-callout-icon { font-size: 20px; margin-right: 10px; vertical-align: middle; }

.tie-plugin-root .tie-case-study { background: #f8f9fa; border: 1px solid #e5e7eb; border-radius: 10px; padding: 28px 32px; margin: 28px 0; }
.tie-plugin-root .tie-case-study-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #6b7280; margin-bottom: 10px; }
.tie-plugin-root .tie-case-study-content { font-size: 15px; line-height: 1.7; color: #374151; }

.tie-plugin-root .tie-script-block { background: #162F58; border-radius: 10px; padding: 28px 32px; margin: 28px 0; color: #fff; }
.tie-plugin-root .tie-script-block p { color: rgba(255,255,255,0.88) !important; }
.tie-plugin-root .tie-script-block strong { color: #F6B820 !important; }

.tie-plugin-root .tie-sidebar-widget { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 20px 22px; margin-bottom: 20px; }
.tie-plugin-root .tie-sidebar-widget-title, .tie-plugin-root .tie-widget-title { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #6b7280; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid #e5e7eb; }

.tie-plugin-root .tie-sidebar-ref { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 20px 22px; margin-bottom: 20px; }
.tie-plugin-root .tie-sidebar-ref-title { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #162F58; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid #F6B820; }
.tie-plugin-root .tie-ref-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tie-plugin-root .tie-ref-table td { padding: 6px 4px; border-bottom: 1px solid #f3f4f6; color: #374151; vertical-align: top; }
.tie-plugin-root .tie-ref-table td:last-child { text-align: right; font-weight: 600; color: #162F58; }
.tie-plugin-root .tie-ref-table tr:last-child td { border-bottom: none; }
.tie-plugin-root .tie-ref-row { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid #f3f4f6; font-size: 13px; }

.tie-plugin-root .tie-quick-facts { background: #f8f9fa; border: 1px solid #e5e7eb; border-radius: 10px; padding: 20px 24px; margin: 24px 0; }
.tie-plugin-root .tie-quick-facts-title { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #162F58; margin-bottom: 12px; }
.tie-plugin-root .tie-quick-facts-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tie-plugin-root .tie-quick-facts-table td { padding: 7px 8px; border-bottom: 1px solid #e5e7eb; color: #374151; }
.tie-plugin-root .tie-quick-facts-table td:last-child { font-weight: 600; color: #162F58; text-align: right; }
.tie-plugin-root .tie-quick-ref { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 20px 24px; margin: 24px 0; }

.tie-plugin-root .tie-related { margin: 32px 0; padding: 20px 24px; background: #f8f9fa; border-radius: 10px; border: 1px solid #e5e7eb; }
.tie-plugin-root .tie-related-links { list-style: none; padding: 0; margin: 0; }
.tie-plugin-root .tie-related-links li { padding: 6px 0; border-bottom: 1px solid #e5e7eb; }
.tie-plugin-root .tie-related-links li:last-child { border-bottom: none; }

.tie-plugin-root .tie-section--cta { background: #162F58; border-radius: 12px; padding: 40px 48px; margin: 40px 0; text-align: center; }
.tie-plugin-root .tie-section--cta h2, .tie-plugin-root .tie-section--cta h3 { color: #fff !important; font-size: 1.5rem !important; font-weight: 700 !important; margin-bottom: 12px !important; }
.tie-plugin-root .tie-section--cta p { color: rgba(255,255,255,0.82) !important; margin-bottom: 20px !important; }
/* Fix: inner marketplace CTA box text must be dark (not white-on-white) */
.tie-plugin-root .tie-section--cta .tie-marketplace-cta { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-left: 4px solid #F6B820 !important; border-radius: 8px !important; padding: 1.5rem !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 1.5rem !important; flex-wrap: wrap !important; text-align: left !important; }
.tie-plugin-root .tie-section--cta .tie-marketplace-cta h2,
.tie-plugin-root .tie-section--cta .tie-marketplace-cta h3 { color: #0f172a !important; font-size: 1rem !important; font-weight: 700 !important; margin-bottom: 0.375rem !important; }
.tie-plugin-root .tie-section--cta .tie-marketplace-cta p { color: #475569 !important; font-size: 0.875rem !important; margin: 0 !important; }

/* ============================================================
   BREADCRUMBS — white text on dark hero backgrounds
   ============================================================ */
.tie-plugin-root .tie-breadcrumb {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0.25rem !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  margin-bottom: 0.75rem !important;
  color: rgba(255,255,255,0.75) !important;
}
.tie-plugin-root .tie-breadcrumb a {
  color: rgba(255,255,255,0.75) !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}
.tie-plugin-root .tie-breadcrumb a:hover { color: #F6B820 !important; }
.tie-plugin-root .tie-breadcrumb-sep {
  color: rgba(255,255,255,0.4) !important;
  font-size: 0.75rem !important;
  margin: 0 0.1rem !important;
}
.tie-plugin-root .tie-breadcrumb-current {
  color: rgba(255,255,255,0.55) !important;
  font-weight: 400 !important;
}

.tie-plugin-root .tie-cta-box { background: #fffbeb; border: 1px solid #F6B820; border-radius: 10px; padding: 24px 28px; margin: 24px 0; text-align: center; }
.tie-plugin-root .tie-cta-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #b45309; margin-bottom: 8px; }
.tie-plugin-root .tie-cta-buttons { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 16px; }
.tie-plugin-root .tie-cta-btn { display: inline-block; padding: 10px 22px; background: #162F58; color: #fff !important; border-radius: 6px; font-weight: 700; font-size: 14px; text-decoration: none !important; cursor: pointer; }
.tie-plugin-root .tie-cta-btn:hover { background: #1e3f7a; color: #fff !important; }

.tie-plugin-root .tie-hero-label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #F6B820; margin-bottom: 10px; display: block; }
.tie-plugin-root .tie-sticky-btn { display: inline-block; padding: 10px 22px; background: #F6B820; color: #0a0f1e !important; border-radius: 6px; font-weight: 700; font-size: 14px; text-decoration: none !important; cursor: pointer; white-space: nowrap; }
.tie-plugin-root .tie-inline-link { color: #162F58; text-decoration: underline; font-weight: 500; }
.tie-plugin-root .tie-inline-link:hover { color: #F6B820; }

.tie-plugin-root .tie-btn--primary { background: #162F58 !important; color: #fff !important; border: none !important; padding: 10px 22px !important; border-radius: 6px !important; font-weight: 700 !important; font-size: 14px !important; text-decoration: none !important; display: inline-block !important; cursor: pointer !important; }
.tie-plugin-root .tie-btn--outline { background: transparent !important; color: #162F58 !important; border: 2px solid #162F58 !important; padding: 10px 22px !important; border-radius: 6px !important; font-weight: 700 !important; font-size: 14px !important; text-decoration: none !important; display: inline-block !important; cursor: pointer !important; }
.tie-plugin-root .tie-btn--full { width: 100% !important; display: block !important; text-align: center !important; }
.tie-plugin-root .tie-btn--gold { background: #F6B820 !important; color: #0a0f1e !important; border: none !important; padding: 10px 22px !important; border-radius: 6px !important; font-weight: 700 !important; font-size: 14px !important; text-decoration: none !important; display: inline-block !important; cursor: pointer !important; }

.tie-plugin-root .tie-sidebar-cta-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #F6B820; margin-bottom: 6px; }
.tie-plugin-root .tie-sidebar-cta-text { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.82); margin-bottom: 14px; }

.tie-plugin-root .tie-bottom-cta-action { display: inline-block; padding: 12px 28px; background: #F6B820; color: #0a0f1e !important; border-radius: 6px; font-weight: 700; font-size: 15px; text-decoration: none !important; cursor: pointer; margin-top: 8px; }
.tie-plugin-root .tie-bottom-cta-question { font-size: 14px; color: rgba(255,255,255,0.7); margin-top: 10px; font-style: italic; }

.tie-plugin-root .tie-gate-fields { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.tie-plugin-root .tie-gate-fields .tie-gate-field { flex: 1; min-width: 140px; }
.tie-plugin-root .tie-gate-footer-stats { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; margin-top: 16px; font-size: 12px; color: rgba(255,255,255,0.6); }
.tie-plugin-root .tie-gate-trigger { display: inline-block; padding: 8px 18px; background: #F6B820; color: #0a0f1e !important; border-radius: 6px; font-weight: 700; font-size: 13px; text-decoration: none !important; cursor: pointer; }

.tie-plugin-root .tie-authority-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 20px 0; }
.tie-plugin-root .tie-authority-table th { background: #162F58; color: #fff; padding: 10px 14px; text-align: left; font-weight: 600; font-size: 12px; letter-spacing: 0.04em; }
.tie-plugin-root .tie-authority-table td { padding: 9px 14px; border-bottom: 1px solid #e5e7eb; color: #374151; }
.tie-plugin-root .tie-authority-table tr:nth-child(even) td { background: #f9fafb; }
.tie-plugin-root .tie-auth-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #6b7280; }
.tie-plugin-root .tie-auth-value { font-weight: 600; color: #162F58; }

.tie-plugin-root .tie-hub-card-badge { display: inline-block; padding: 2px 8px; background: #F6B820; color: #0a0f1e; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-left: 8px; vertical-align: middle; }
.tie-plugin-root .tie-hub-card-badge--notax { background: #22c55e; color: #fff; }
.tie-plugin-root .tie-hub-card-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #6b7280; margin-bottom: 4px; }
.tie-plugin-root .tie-hub-card-meta { font-size: 12px; color: #9ca3af; margin-top: 6px; }
.tie-plugin-root .tie-hub-card-tag { display: inline-block; padding: 2px 8px; background: #f3f4f6; color: #374151; border-radius: 4px; font-size: 11px; margin-right: 4px; margin-top: 4px; }
.tie-plugin-root .tie-hub-section-header { font-size: 22px; font-weight: 700; color: #162F58; margin-bottom: 6px; }
.tie-plugin-root .tie-hub-section-desc { font-size: 15px; color: #6b7280; margin-bottom: 20px; }

.tie-plugin-root .tie-calculators-section { margin: 40px 0; }
.tie-plugin-root .tie-calculators-header { font-size: 22px; font-weight: 700; color: #162F58; margin-bottom: 20px; }
.tie-plugin-root .tie-calculators-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.tie-plugin-root .tie-calculator-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 24px; text-align: center; }
.tie-plugin-root .tie-calculator-card-icon { font-size: 32px; margin-bottom: 12px; }
.tie-plugin-root .tie-calculator-card-title { font-size: 16px; font-weight: 700; color: #162F58; margin-bottom: 8px; }
.tie-plugin-root .tie-calculator-card-desc { font-size: 13px; color: #6b7280; line-height: 1.5; }

.tie-plugin-root .tie-steps { counter-reset: tie-step; margin: 24px 0; padding-left: 0; list-style: none; }
.tie-plugin-root .tie-steps > li, .tie-plugin-root .tie-steps > div { counter-increment: tie-step; position: relative; padding-left: 44px; margin-bottom: 20px; }
.tie-plugin-root .tie-steps > li::before, .tie-plugin-root .tie-steps > div::before { content: counter(tie-step); position: absolute; left: 0; top: 2px; width: 28px; height: 28px; background: #162F58; color: #fff; border-radius: 50%; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* ============================================================
   QC FIX v2.21.39 — Mobile Overflow Fixes
   ============================================================ */
@media (max-width: 768px) {
  .tie-plugin-root .tie-page-content,
  .tie-plugin-root .tie-content-layout,
  .tie-plugin-root .tie-page-layout,
  .tie-plugin-root .tie-page-wrap,
  .tie-plugin-root .tie-page-main,
  .tie-plugin-root .tie-content-main,
  .tie-plugin-root .tie-main-content,
  .tie-plugin-root .tie-page-body { overflow-x: hidden !important; max-width: 100% !important; box-sizing: border-box !important; }
  .tie-plugin-root .tie-section-title,
  .tie-plugin-root .tie-section-heading { overflow-wrap: break-word !important; word-break: break-word !important; }
  .tie-plugin-root .tie-table-wrap,
  .tie-plugin-root .tie-data-table,
  .tie-plugin-root .tie-quick-facts-table,
  .tie-plugin-root .tie-authority-table,
  .tie-plugin-root .tie-ref-table { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; display: block !important; width: 100% !important; }
  .tie-plugin-root .tie-cta-buttons,
  .tie-plugin-root .tie-bottom-cta-actions { flex-direction: column !important; align-items: stretch !important; }
  .tie-plugin-root .tie-cta-btn,
  .tie-plugin-root .tie-bottom-cta-action { text-align: center !important; width: 100% !important; }
  .tie-plugin-root .tie-section--cta { padding: 28px 20px !important; }
  .tie-plugin-root .tie-calculators-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   SCROLL-TRIGGERED REGISTRATION WALL — v2.21.42
   Replaces instant-show gate with scroll-depth trigger.
   Two-column layout: navy value panel (left) + white form (right).
   ============================================================ */

/* Gate overlay: JS controls display via inline style */
/* Entrance animation handled by JS (opacity + transform) */

/* TWO-COLUMN MODAL */
.tie-gate-modal--split {
  max-width: 860px;
  display: flex;
  flex-direction: row;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 40px 120px rgba(0,0,0,0.65);
  max-height: 95vh;
  width: 100%;
}

/* LEFT: Navy value panel */
.tie-gate-panel-left {
  background: #1E1E5E;
  padding: 2.75rem 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 0 0 42%;
  min-width: 0;
}
.tie-gate-panel-left .tie-gate-eyebrow {
  color: #F6B820;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.tie-gate-panel-left .tie-gate-eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #F6B820; flex-shrink: 0;
}
.tie-gate-panel-left .tie-gate-headline {
  color: #ffffff !important;
  font-size: 1.55rem !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.03em !important;
  margin-bottom: 0.6rem !important;
}
.tie-gate-panel-left .tie-gate-headline em {
  font-style: normal !important;
  color: #F6B820 !important;
}
.tie-gate-panel-left .tie-gate-sub {
  color: rgba(255,255,255,0.72) !important;
  font-size: 0.875rem !important;
  line-height: 1.6 !important;
  margin-bottom: 1.5rem !important;
}
.tie-gate-panel-left .tie-gate-bullets { margin-bottom: 1.5rem; }
.tie-gate-panel-left .tie-gate-bullet { color: rgba(255,255,255,0.9) !important; font-size: 0.84rem !important; }
.tie-gate-panel-left .tie-gate-check {
  background: rgba(246,184,32,0.18) !important;
  border: 1px solid rgba(246,184,32,0.4) !important;
}
.tie-gate-panel-left .tie-gate-check svg path { stroke: #F6B820 !important; }
.tie-gate-panel-left .tie-gate-trust {
  border-top: 1px solid rgba(255,255,255,0.12) !important;
  padding-top: 1rem !important;
  margin-top: auto !important;
  flex-wrap: wrap !important;
  gap: 0.4rem !important;
  justify-content: flex-start !important;
}
.tie-gate-panel-left .tie-gate-trust-item { color: rgba(255,255,255,0.5) !important; font-size: 0.68rem !important; }
.tie-gate-panel-left .tie-gate-trust-sep { color: rgba(255,255,255,0.25) !important; }

/* RIGHT: White form panel */
.tie-gate-panel-right {
  background: #ffffff;
  padding: 2.75rem 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  min-width: 0;
}
.tie-gate-panel-right .tie-gate-headline {
  color: #0a0f1e !important;
  font-size: 1.25rem !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.025em !important;
  margin-bottom: 0.45rem !important;
}
.tie-gate-panel-right .tie-gate-sub {
  color: #475569 !important;
  font-size: 0.875rem !important;
  line-height: 1.6 !important;
  margin-bottom: 1.5rem !important;
}
.tie-gate-panel-right .tie-gate-competitors { margin-bottom: 1.25rem; }

/* MOBILE: Bottom sheet */
@media (max-width: 680px) {
  .tie-gate-modal--split {
    flex-direction: column;
    max-width: 100%;
    border-radius: 16px 16px 0 0;
    max-height: 92vh;
    overflow-y: auto;
    margin-top: auto;
    align-self: flex-end;
    width: 100%;
  }
  .tie-gate-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .tie-gate-panel-left {
    padding: 1.75rem 1.5rem 1.25rem;
    flex: none;
  }
  .tie-gate-panel-left .tie-gate-headline { font-size: 1.2rem !important; }
  .tie-gate-panel-left .tie-gate-sub,
  .tie-gate-panel-left .tie-gate-trust { display: none !important; }
  .tie-gate-panel-left .tie-gate-bullets { margin-bottom: 0; }
  .tie-gate-panel-right { padding: 1.5rem 1.5rem 2rem; flex: none; }
  .tie-gate-panel-right .tie-gate-headline { display: none !important; }
  .tie-gate-panel-right .tie-gate-sub { margin-bottom: 1rem !important; }
  .tie-gate-fields-row { flex-direction: column !important; }
}

/* READING PROGRESS BAR (pre-gate, shows scroll depth) */
.tie-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #1E1E5E 0%, #F6B820 100%);
  z-index: 99999;
  width: 0%;
  transition: width 0.1s linear;
  pointer-events: none;
}