/* ── Article wrapper ── */
.af-article {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #1F2937;
  line-height: 1.75;
  max-width: 760px;
  margin: 0 auto;
  font-size: 16px;
}
.af-article h1, .af-article h2, .af-article h3 {
  font-family: 'Outfit', sans-serif;
  line-height: 1.3;
  color: #1B2A4A;
}
.af-article h1 { font-size: 32px; font-weight: 800; margin: 0 0 16px; }
.af-article h2 { font-size: 24px; font-weight: 700; margin: 40px 0 16px; }
.af-article h3 { font-size: 18px; font-weight: 700; margin: 28px 0 12px; }
.af-article p { margin: 0 0 16px; }
.af-article a { color: #0EA5A0; text-decoration: underline; text-underline-offset: 3px; }
.af-article a:hover { color: #0C8C88; }
.af-article ul, .af-article ol { margin: 0 0 16px; padding-left: 24px; }
.af-article li { margin-bottom: 8px; }

/* ── Reading time / meta bar ── */
.af-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0 20px;
  border-bottom: 1px solid #E5E7EB;
  margin-bottom: 28px;
  font-size: 13px;
  color: #6B7280;
}
.af-meta-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.af-meta-tag--explorer { background: #D1FAE5; color: #059669; }
.af-meta-tag--adopter { background: #DBEAFE; color: #3B82F6; }
.af-meta-tag--accelerator { background: #EDE7F6; color: #673AB7; }
.af-meta-tag--leader { background: #FEF3C7; color: #D97706; }

.af-meta-tag--guide { background: #DBEAFE; color: #3B82F6; }
.af-meta-tag--tutorial { background: #D1FAE5; color: #059669; }
.af-meta-tag--reference { background: #FEF3C7; color: #D97706; }
.af-meta-tag--strategy { background: #EDE7F6; color: #673AB7; }
.af-meta-tag--compliance { background: #FED7AA; color: #C2410C; }
.af-meta-tag--casestudy { background: #FCE7F3; color: #DB2777; }

/* ── Prompt box (green) ── */
.af-prompt-box {
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  border-radius: 12px;
  padding: 20px;
  margin: 12px 0;
  font-family: 'DM Sans', monospace;
  font-size: 14px;
  line-height: 1.7;
  color: #1F2937;
  white-space: pre-wrap;
  word-break: break-word;
  position: relative;
}
.af-prompt-box::before {
  content: '📋 Copy this prompt';
  display: block;
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #059669;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

/* ── Prompt label (number + title) ── */
.af-prompt-label {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #1B2A4A;
  margin: 28px 0 4px;
}
.af-prompt-label span {
  color: #0EA5A0;
}

/* ── Tip line (why this works) ── */
.af-prompt-tip {
  font-size: 14px;
  font-style: italic;
  color: #4B5563;
  margin: 8px 0 4px;
  line-height: 1.6;
}
.af-prompt-tip strong {
  font-style: normal;
  color: #1B2A4A;
}

/* ── Best-in badge ── */
.af-prompt-best {
  font-size: 13px;
  font-weight: 600;
  color: #4B5563;
  margin: 4px 0 16px;
}

/* ── Info box (blue — how-to, instructions) ── */
.af-info-box {
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;
  font-size: 14px;
  line-height: 1.7;
}
.af-info-box strong {
  display: block;
  font-size: 15px;
  margin-bottom: 8px;
  color: #1B2A4A;
}
.af-info-box ol, .af-info-box ul {
  margin: 8px 0 0;
  padding-left: 20px;
}
.af-info-box li {
  margin-bottom: 4px;
  color: #374151;
}

/* ── Tip box (purple — pro tips, insights) ── */
.af-tip-box {
  background: #F8F5FE;
  border-left: 4px solid #673AB7;
  border-radius: 0 12px 12px 0;
  padding: 16px 20px;
  margin: 20px 0;
  font-size: 14px;
  line-height: 1.7;
}
.af-tip-box strong {
  display: block;
  font-size: 13px;
  color: #673AB7;
  margin-bottom: 4px;
}

/* ── Warning box (amber — cautions, disclaimers) ── */
.af-warning-box {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-left: 4px solid #F59E0B;
  border-radius: 0 12px 12px 0;
  padding: 16px 20px;
  margin: 20px 0;
  font-size: 14px;
  line-height: 1.7;
}
.af-warning-box strong {
  display: block;
  font-size: 13px;
  color: #D97706;
  margin-bottom: 4px;
}

/* ── CTA box (teal — audit, newsletter) ── */
.af-cta-box {
  background: #F0FAFA;
  border: 2px solid #D0F5F3;
  border-radius: 16px;
  padding: 28px 24px;
  margin: 32px 0;
  text-align: center;
}
.af-cta-box h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #1B2A4A;
  margin: 0 0 8px;
}
.af-cta-box p {
  font-size: 14px;
  color: #4B5563;
  margin: 0 0 16px;
}
.af-cta-btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 10px;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 15px;
  background: #0EA5A0;
  color: #FFFFFF !important;
  text-decoration: none !important;
  transition: all 0.3s;
}
.af-cta-btn:hover {
  background: #0C8C88;
  transform: translateY(-2px);
}

/* ── Download CTA box (pink — lead magnets) ── */
.af-download-box {
  background: #FDF2F8;
  border: 2px solid #FBCFE8;
  border-radius: 16px;
  padding: 28px 24px;
  margin: 32px 0;
  text-align: center;
}
.af-download-box h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #1B2A4A;
  margin: 0 0 8px;
}
.af-download-box p {
  font-size: 14px;
  color: #4B5563;
  margin: 0;
}

/* ── Tool recommendation box ── */
.af-tool-box {
  background: #F7F8FA;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 20px;
  margin: 24px 0;
}
.af-tool-box h4 {
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #1B2A4A;
  margin: 0 0 10px;
}
.af-tool-box a {
  color: #0EA5A0;
  font-weight: 600;
}

/* ── Related articles ── */
.af-related {
  border-top: 1px solid #E5E7EB;
  margin-top: 40px;
  padding-top: 28px;
}
.af-related h2 {
  font-size: 20px;
  margin-bottom: 12px;
}
.af-related ul {
  list-style: none;
  padding: 0;
}
.af-related li {
  padding: 8px 0;
  border-bottom: 1px solid #F0F1F3;
}
.af-related a {
  font-weight: 600;
  font-size: 15px;
}

/* ── Step boxes (numbered steps for tutorials) ── */
.af-step-box {
  display: flex;
  gap: 16px;
  margin: 16px 0;
  padding: 16px;
  background: #F7F8FA;
  border-radius: 12px;
}
.af-step-num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #0EA5A0;
  color: #FFFFFF;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.af-step-content {
  flex: 1;
}
.af-step-content strong {
  display: block;
  color: #1B2A4A;
  margin-bottom: 4px;
}

/* ── Quick win timer badge ── */
.af-time-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  background: #FEF3E2;
  border: 1px solid #FDE68A;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #D97706;
}

/* ── Comparison table ── */
.af-compare-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 14px;
}
.af-compare-table th {
  background: #1B2A4A;
  color: #FFFFFF;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 13px;
  padding: 12px 16px;
  text-align: left;
}
.af-compare-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #E5E7EB;
  vertical-align: top;
}
.af-compare-table tr:nth-child(even) td {
  background: #F7F8FA;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .af-article h1 { font-size: 26px; }
  .af-article h2 { font-size: 20px; }
  .af-prompt-box { padding: 16px; font-size: 13px; }
  .af-meta { flex-wrap: wrap; gap: 8px; }
  .af-cta-box, .af-download-box { padding: 20px 16px; }
  .af-step-box { flex-direction: column; gap: 8px; }
}
/* ============================================================
   AI FLUENT — NAVIGATION STYLING v2
   ============================================================
   Paste this into: Appearance → Customize → Additional CSS
   REPLACES the previous version — delete the old CSS first
   
   Fixed: nth-child numbers adjusted for Kadence's nav structure
   
   Journey Colour System:
   - Assess    = Teal   #0EA5A0
   - Explore   = Purple #673AB7
   - Implement = Gold   #F5A623
   - Learn     = Navy   #1B2A4A
   ============================================================ */

/* --- GLOBAL NAV FONTS --- */
.header-navigation .menu > li > a,
#masthead .navigation .menu > li > a,
.primary-menu-container .menu > li > a {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: 0.3px;
  color: #4B5563 !important;
  transition: all 0.25s ease !important;
  border-bottom: 2.5px solid transparent !important;
  padding-bottom: 6px !important;
}


/* ─────────────────────────────────────────────
   HOME — neutral navy, no colour accent
   ───────────────────────────────────────────── */
.header-navigation .menu > li:first-child > a:hover,
.header-navigation .menu > li:first-child.current-menu-item > a,
#masthead .navigation .menu > li:first-child > a:hover,
#masthead .navigation .menu > li:first-child.current-menu-item > a,
.primary-menu-container .menu > li:first-child > a:hover,
.primary-menu-container .menu > li:first-child.current-menu-item > a {
  color: #1B2A4A !important;
}


/* ─────────────────────────────────────────────
   ASSESS = TEAL (#0EA5A0)
   Trying BOTH nth-child(2) AND nth-child(3)
   to catch whichever Kadence uses
   ───────────────────────────────────────────── */
.header-navigation .menu > li:nth-child(2) > a:hover,
.header-navigation .menu > li:nth-child(2).current-menu-item > a,
.header-navigation .menu > li:nth-child(2).current-menu-ancestor > a,
#masthead .navigation .menu > li:nth-child(2) > a:hover,
#masthead .navigation .menu > li:nth-child(2).current-menu-item > a,
#masthead .navigation .menu > li:nth-child(2).current-menu-ancestor > a,
.primary-menu-container .menu > li:nth-child(2) > a:hover,
.primary-menu-container .menu > li:nth-child(2).current-menu-item > a,
.primary-menu-container .menu > li:nth-child(2).current-menu-ancestor > a {
  color: #0EA5A0 !important;
  border-bottom-color: #0EA5A0 !important;
}


/* ─────────────────────────────────────────────
   EXPLORE = PURPLE (#673AB7)
   ───────────────────────────────────────────── */
.header-navigation .menu > li:nth-child(3) > a:hover,
.header-navigation .menu > li:nth-child(3).current-menu-item > a,
.header-navigation .menu > li:nth-child(3).current-menu-ancestor > a,
#masthead .navigation .menu > li:nth-child(3) > a:hover,
#masthead .navigation .menu > li:nth-child(3).current-menu-item > a,
#masthead .navigation .menu > li:nth-child(3).current-menu-ancestor > a,
.primary-menu-container .menu > li:nth-child(3) > a:hover,
.primary-menu-container .menu > li:nth-child(3).current-menu-item > a,
.primary-menu-container .menu > li:nth-child(3).current-menu-ancestor > a {
  color: #673AB7 !important;
  border-bottom-color: #673AB7 !important;
}


/* ─────────────────────────────────────────────
   IMPLEMENT = GOLD (#F5A623)
   ───────────────────────────────────────────── */
.header-navigation .menu > li:nth-child(4) > a:hover,
.header-navigation .menu > li:nth-child(4).current-menu-item > a,
.header-navigation .menu > li:nth-child(4).current-menu-ancestor > a,
#masthead .navigation .menu > li:nth-child(4) > a:hover,
#masthead .navigation .menu > li:nth-child(4).current-menu-item > a,
#masthead .navigation .menu > li:nth-child(4).current-menu-ancestor > a,
.primary-menu-container .menu > li:nth-child(4) > a:hover,
.primary-menu-container .menu > li:nth-child(4).current-menu-item > a,
.primary-menu-container .menu > li:nth-child(4).current-menu-ancestor > a {
  color: #F5A623 !important;
  border-bottom-color: #F5A623 !important;
}


/* ─────────────────────────────────────────────
   LEARN = MEDIUM BLUE (#4A90D9)
   ───────────────────────────────────────────── */
.header-navigation .menu > li:nth-child(5) > a:hover,
.header-navigation .menu > li:nth-child(5).current-menu-item > a,
.header-navigation .menu > li:nth-child(5).current-menu-ancestor > a,
#masthead .navigation .menu > li:nth-child(5) > a:hover,
#masthead .navigation .menu > li:nth-child(5).current-menu-item > a,
#masthead .navigation .menu > li:nth-child(5).current-menu-ancestor > a,
.primary-menu-container .menu > li:nth-child(5) > a:hover,
.primary-menu-container .menu > li:nth-child(5).current-menu-item > a,
.primary-menu-container .menu > li:nth-child(5).current-menu-ancestor > a {
  color: #4A90D9 !important;
  border-bottom-color: #4A90D9 !important;
}


/* ─────────────────────────────────────────────
   BULLETPROOF FALLBACK — Target by link URL
   This works regardless of nth-child position
   ───────────────────────────────────────────── */

/* Assess = Teal */
.header-navigation a[href*="/assess"],
#masthead .navigation a[href*="/assess"],
.primary-menu-container a[href*="/assess"] {
  /* default state handled above */
}
.header-navigation li a[href*="/assess"]:hover,
.header-navigation li.current-menu-item a[href*="/assess"],
.header-navigation li.current-menu-ancestor a[href*="/assess"],
#masthead li a[href*="/assess"]:hover,
#masthead li.current-menu-item a[href*="/assess"],
#masthead li.current-menu-ancestor a[href*="/assess"] {
  color: #0EA5A0 !important;
  border-bottom-color: #0EA5A0 !important;
}

/* Explore = Purple */
.header-navigation li a[href*="/explore"]:hover,
.header-navigation li.current-menu-item a[href*="/explore"],
.header-navigation li.current-menu-ancestor a[href*="/explore"],
#masthead li a[href*="/explore"]:hover,
#masthead li.current-menu-item a[href*="/explore"],
#masthead li.current-menu-ancestor a[href*="/explore"] {
  color: #673AB7 !important;
  border-bottom-color: #673AB7 !important;
}

/* Implement = Gold */
.header-navigation li a[href*="/implement"]:hover,
.header-navigation li.current-menu-item a[href*="/implement"],
.header-navigation li.current-menu-ancestor a[href*="/implement"],
#masthead li a[href*="/implement"]:hover,
#masthead li.current-menu-item a[href*="/implement"],
#masthead li.current-menu-ancestor a[href*="/implement"] {
  color: #F5A623 !important;
  border-bottom-color: #F5A623 !important;
}

/* Learn = Medium Blue */
.header-navigation li a[href*="/learn"]:hover,
.header-navigation li.current-menu-item a[href*="/learn"],
.header-navigation li.current-menu-ancestor a[href*="/learn"],
#masthead li a[href*="/learn"]:hover,
#masthead li.current-menu-item a[href*="/learn"],
#masthead li.current-menu-ancestor a[href*="/learn"] {
  color: #4A90D9 !important;
  border-bottom-color: #4A90D9 !important;
}


/* ─────────────────────────────────────────────
   DROPDOWN / SUBMENU STYLING
   ───────────────────────────────────────────── */
.header-navigation .menu > li > .sub-menu,
#masthead .navigation .menu > li > .sub-menu,
.primary-menu-container .menu > li > .sub-menu,
.header-navigation .menu > li > ul,
#masthead .navigation .menu > li > ul {
  background: #FFFFFF !important;
  border-radius: 12px !important;
  padding: 12px 0 !important;
  box-shadow: 0 8px 32px rgba(27,42,74,0.12) !important;
  border: 1px solid #E2E8F0 !important;
  min-width: 220px !important;
  overflow: hidden !important;
}

/* Dropdown item links */
.header-navigation .menu > li .sub-menu li a,
#masthead .navigation .menu > li .sub-menu li a,
.primary-menu-container .menu > li .sub-menu li a {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  color: #4B5563 !important;
  padding: 10px 20px !important;
  transition: all 0.2s ease !important;
  border-left: 3px solid transparent !important;
}

/* Dropdown hover — colour-coded by parent URL */
/* Assess dropdown */
.header-navigation li a[href*="/assess"] ~ .sub-menu li a:hover,
#masthead li a[href*="/assess"] ~ .sub-menu li a:hover,
.header-navigation li[class*="assess"] .sub-menu li a:hover,
#masthead li[class*="assess"] .sub-menu li a:hover {
  background: #E8F5F4 !important;
  color: #0EA5A0 !important;
  border-left-color: #0EA5A0 !important;
}

/* Explore dropdown */
.header-navigation li a[href*="/explore"] ~ .sub-menu li a:hover,
#masthead li a[href*="/explore"] ~ .sub-menu li a:hover,
.header-navigation li[class*="explore"] .sub-menu li a:hover,
#masthead li[class*="explore"] .sub-menu li a:hover {
  background: #EDE7F6 !important;
  color: #673AB7 !important;
  border-left-color: #673AB7 !important;
}

/* Implement dropdown */
.header-navigation li a[href*="/implement"] ~ .sub-menu li a:hover,
#masthead li a[href*="/implement"] ~ .sub-menu li a:hover,
.header-navigation li[class*="implement"] .sub-menu li a:hover,
#masthead li[class*="implement"] .sub-menu li a:hover {
  background: #FFF8EC !important;
  color: #F5A623 !important;
  border-left-color: #F5A623 !important;
}


/* ─────────────────────────────────────────────
   CTA BUTTON — "Get Your Free AI Audit"
   Compact size, Outfit font matching nav
   ───────────────────────────────────────────── */
.header-button a,
#masthead .header-button a,
.kadence-header-button a {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  background: #0EA5A0 !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
  padding: 8px 18px !important;
  box-shadow: 0 2px 12px rgba(14,165,160,0.2) !important;
  transition: all 0.3s ease !important;
  border: none !important;
  letter-spacing: 0.3px !important;
}
.header-button a:hover,
#masthead .header-button a:hover,
.kadence-header-button a:hover {
  background: #0C8C88 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(14,165,160,0.3) !important;
}


/* ─────────────────────────────────────────────
   LOGO — Larger for better presence
   ───────────────────────────────────────────── */
.site-branding img,
.custom-logo,
#masthead .site-branding img,
#masthead .custom-logo {
  max-height: 56px !important;
  width: auto !important;
}


/* ─────────────────────────────────────────────
   HEADER BAR — Clean white with subtle shadow
   ───────────────────────────────────────────── */
#masthead,
.site-header {
  background: #FFFFFF !important;
  box-shadow: 0 1px 8px rgba(27,42,74,0.06) !important;
  border-bottom: none !important;
}


/* ─────────────────────────────────────────────
   MOBILE NAV
   ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .mobile-navigation .menu > li > a {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    color: #4B5563 !important;
    padding: 12px 20px !important;
  }
  
  /* Mobile journey colours by URL */
  .mobile-navigation li a[href*="/assess"] { border-left: 3px solid #0EA5A0 !important; }
  .mobile-navigation li a[href*="/explore"] { border-left: 3px solid #673AB7 !important; }
  .mobile-navigation li a[href*="/implement"] { border-left: 3px solid #F5A623 !important; }
  .mobile-navigation li a[href*="/learn"] { border-left: 3px solid #4A90D9 !important; }
}
/* =============================================
   AI FLUENT — Article Component Styles
   Add to WordPress: Appearance → Customise → Additional CSS
   Or add to your theme's style.css
   ============================================= */

/* --- Article Body Text Override --- */
.entry-content p,
.entry-content li,
.post-content p,
.post-content li,
article p,
article li {
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #6B7A8D;
}

/* --- Key Takeaways Box --- */
.aif-key-takeaways {
  background: #E8F5F4;
  border-left: 4px solid #0EA5A0;
  border-radius: 14px;
  padding: 28px 24px;
  margin-bottom: 32px;
}

.aif-key-takeaways h2 {
  font-family: 'Outfit', -apple-system, sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: #1B2A4A;
  margin-top: 0;
  margin-bottom: 16px;
  line-height: 1.3;
}

.aif-key-takeaways ul {
  margin: 0;
  padding-left: 20px;
}

.aif-key-takeaways li {
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 15px;
  color: #4B5563;
  line-height: 1.6;
  margin-bottom: 8px;
}

.aif-key-takeaways li strong {
  color: #1B2A4A;
}

/* --- Tool Recommendation Card --- */
.aif-tool-card {
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 28px 24px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(27, 42, 74, 0.06);
  transition: all 0.3s ease;
}

.aif-tool-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(27, 42, 74, 0.1);
  border-top: 3px solid #0EA5A0;
}

.aif-tool-card h3 {
  font-family: 'Outfit', -apple-system, sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #1B2A4A;
  margin-top: 0;
  margin-bottom: 12px;
}

.aif-tool-card h3 a {
  color: #0EA5A0;
  text-decoration: none;
}

.aif-tool-card h3 a:hover {
  color: #0C8C88;
  text-decoration: underline;
}

.aif-tool-card p {
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 15px;
  color: #6B7A8D;
  line-height: 1.6;
  margin-bottom: 8px;
}

.aif-tool-card p:last-child {
  margin-bottom: 0;
}

/* --- Comparison Table --- */
.aif-comparison-table {
  margin: 24px 0 32px;
  overflow-x: auto;
}

.aif-comparison-table table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 14px;
  overflow: hidden;
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 15px;
}

.aif-comparison-table thead {
  background: #1B2A4A;
}

.aif-comparison-table th {
  color: #ffffff;
  font-family: 'Outfit', -apple-system, sans-serif;
  font-weight: 600;
  font-size: 14px;
  padding: 14px 16px;
  text-align: left;
}

.aif-comparison-table td {
  padding: 14px 16px;
  color: #4B5563;
  border-bottom: 1px solid #E2E8F0;
}

.aif-comparison-table tbody tr:nth-child(even) {
  background: #F4F6F8;
}

.aif-comparison-table tbody tr:hover {
  background: #E8F5F4;
}

.aif-comparison-table a {
  color: #0EA5A0;
  text-decoration: none;
  font-weight: 500;
}

.aif-comparison-table a:hover {
  color: #0C8C88;
  text-decoration: underline;
}

/* --- Compliance Checklist --- */
.aif-checklist {
  background: #FFF8EC;
  border-left: 4px solid #F5A623;
  border-radius: 14px;
  padding: 28px 24px;
  margin: 24px 0 32px;
}

.aif-checklist h3 {
  font-family: 'Outfit', -apple-system, sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #1B2A4A;
  margin-top: 0;
  margin-bottom: 16px;
}

.aif-checklist ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.aif-checklist li {
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 15px;
  color: #4B5563;
  line-height: 1.6;
  margin-bottom: 10px;
  padding-left: 4px;
}

/* --- Prompt Library Block --- */
.aif-prompt-block {
  background: #E8EAF0;
  border-radius: 14px;
  padding: 28px 24px;
  margin: 24px 0;
}

.aif-prompt-block h3 {
  font-family: 'Outfit', -apple-system, sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #1B2A4A;
  margin-top: 0;
  margin-bottom: 8px;
}

.aif-prompt-context {
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 14px;
  color: #6B7A8D;
  font-style: italic;
  margin-bottom: 16px;
}

.aif-prompt-code {
  background: #1B2A4A;
  color: #E8F5F4;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 12px;
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.6;
}

.aif-prompt-code p {
  color: #E8F5F4;
  margin: 0;
}

.aif-prompt-tip {
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 14px;
  color: #6B7A8D;
  margin-bottom: 0;
}

.aif-prompt-tip strong {
  color: #0EA5A0;
}

/* --- Related Reading CTA --- */
.aif-related-reading {
  background: #F4F6F8;
  border-radius: 14px;
  padding: 28px 24px;
  margin-top: 40px;
}

.aif-related-reading h2 {
  font-family: 'Outfit', -apple-system, sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: #1B2A4A;
  margin-top: 0;
  margin-bottom: 12px;
}

.aif-related-reading > p {
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 15px;
  color: #6B7A8D;
  margin-bottom: 16px;
}

.aif-related-reading ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.aif-related-reading li {
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 12px;
  padding-left: 20px;
  position: relative;
}

.aif-related-reading li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: #0EA5A0;
  font-weight: 700;
}

.aif-related-reading a {
  color: #0EA5A0;
  text-decoration: none;
}

.aif-related-reading a:hover {
  color: #0C8C88;
  text-decoration: underline;
}

.aif-related-reading a strong {
  color: #1B2A4A;
}

.aif-related-reading a:hover strong {
  color: #0C8C88;
}

/* --- Inline Affiliate Disclosure --- */
.aif-disclosure {
  font-size: 13px;
  color: #8896A6;
  border-left: 3px solid #E2E8F0;
  padding: 8px 0 8px 16px;
  margin: 16px 0 32px 0;
  line-height: 1.5;
}

.aif-disclosure a {
  color: #0EA5A0;
  text-decoration: none;
}

.aif-disclosure a:hover {
  text-decoration: underline;
}