/* ── 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
   
   v2 — added mobile responsive rules
   ============================================= */

/* --- 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;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  box-sizing: border-box;
}

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

.aif-comparison-table td,
.aif-comparison-table th {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.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;
  overflow-x: auto;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.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;
}


/* =============================================
   MOBILE RESPONSIVE — max-width: 768px
   ============================================= */
@media screen and (max-width: 768px) {

  /* --- Body text --- */
  .entry-content p,
  .entry-content li,
  .post-content p,
  .post-content li,
  article p,
  article li {
    font-size: 15px;
    line-height: 1.65;
  }

  /* --- Key Takeaways Box --- */
  .aif-key-takeaways {
    padding: 20px 16px;
    margin-bottom: 24px;
    border-radius: 10px;
  }

  .aif-key-takeaways h2 {
    font-size: 18px;
    margin-bottom: 12px;
  }

  .aif-key-takeaways li {
    font-size: 14px;
    margin-bottom: 10px;
  }

  .aif-key-takeaways ul {
    padding-left: 16px;
  }

  /* --- Tool Card --- */
  .aif-tool-card {
    padding: 20px 16px;
    border-radius: 10px;
  }

  .aif-tool-card:hover {
    transform: none;
  }

  .aif-tool-card h3 {
    font-size: 16px;
  }

  .aif-tool-card p {
    font-size: 14px;
  }

  /* --- Comparison Table --- */
  .aif-comparison-table {
    margin: 16px 0 24px;
    max-width: 100%;
  }

  .aif-comparison-table table {
    font-size: 13px;
    min-width: 0;
    width: 100%;
  }

  .aif-comparison-table th {
    font-size: 12px;
    padding: 10px 12px;
    white-space: nowrap;
  }

  .aif-comparison-table td {
    padding: 10px 12px;
    font-size: 13px;
  }

  /* --- Checklist --- */
  .aif-checklist {
    padding: 20px 16px;
    margin: 16px 0 24px;
    border-radius: 10px;
  }

  .aif-checklist h3 {
    font-size: 16px;
  }

  .aif-checklist li {
    font-size: 14px;
  }

  /* --- Prompt Block --- */
  .aif-prompt-block {
    padding: 20px 16px;
    border-radius: 10px;
  }

  .aif-prompt-block h3 {
    font-size: 16px;
  }

  .aif-prompt-code {
    padding: 16px;
    font-size: 13px;
    border-radius: 6px;
  }

  .aif-prompt-context,
  .aif-prompt-tip {
    font-size: 13px;
  }

  /* --- Related Reading --- */
  .aif-related-reading {
    padding: 20px 16px;
    margin-top: 32px;
    border-radius: 10px;
  }

  .aif-related-reading h2 {
    font-size: 19px;
  }

  .aif-related-reading li {
    font-size: 14px;
    padding-left: 18px;
  }

  /* --- Disclosure --- */
  .aif-disclosure {
    font-size: 12px;
    padding: 6px 0 6px 12px;
  }
}


/* =============================================
   SMALL MOBILE — max-width: 480px
   ============================================= */
@media screen and (max-width: 480px) {

  .aif-key-takeaways,
  .aif-tool-card,
  .aif-checklist,
  .aif-prompt-block,
  .aif-related-reading {
    padding: 16px 14px;
    border-radius: 8px;
  }

  .aif-key-takeaways h2,
  .aif-related-reading h2 {
    font-size: 17px;
  }

  .aif-key-takeaways li,
  .aif-checklist li,
  .aif-related-reading li {
    font-size: 13px;
  }

  .aif-comparison-table table {
    font-size: 12px;
    width: 100%;
  }

  .aif-comparison-table th {
    font-size: 11px;
    padding: 8px 10px;
  }

  .aif-comparison-table td {
    padding: 8px 10px;
    font-size: 12px;
  }

  .aif-prompt-code {
    padding: 14px;
    font-size: 12px;
  }
}
/* ============================================================
   AI FLUENT — GEO/AEO Enhancement Styles
   New classes: .aif-tldr, .aif-faq, .aif-last-reviewed
   
   Add to: WordPress Customiser > Additional CSS
   Or: WPCode snippet (site-wide header)
   
   Matches existing brand: Outfit headings, DM Sans body,
   Navy #1B2A4A, Teal #0EA5A0, Light Teal #E8F5F4
   ============================================================ */

/* -------------------------------------------------------
   TL;DR BOX
   Appears after Key Takeaways. Standalone summary for
   AI engines to cite. Visually distinct but not competing
   with Key Takeaways.
   ------------------------------------------------------- */

.aif-tldr {
  background: #E8F5F4;
  border-left: 4px solid #0EA5A0;
  border-radius: 0 10px 10px 0;
  padding: 20px 24px;
  margin: 32px 0;
}

.aif-tldr p {
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: #1B2A4A;
  margin: 0;
}

.aif-tldr strong {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  color: #0EA5A0;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}


/* -------------------------------------------------------
   FAQ SECTION
   Appears before disclosure footer. Contains FAQPage
   schema markup. Clean, scannable Q&A format.
   ------------------------------------------------------- */

.aif-faq {
  background: #F4F6F8;
  border-radius: 12px;
  padding: 32px;
  margin: 48px 0 32px;
}

.aif-faq h2 {
  font-family: 'Outfit', sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: #1B2A4A;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #E2E8F0;
}

.aif-faq h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #1B2A4A;
  margin-top: 20px;
  margin-bottom: 8px;
  padding-left: 20px;
  position: relative;
}

.aif-faq h3::before {
  content: 'Q';
  position: absolute;
  left: 0;
  top: 0;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: #0EA5A0;
}

.aif-faq > div {
  padding-bottom: 16px;
  border-bottom: 1px solid #E2E8F0;
}

.aif-faq > div:last-of-type {
  padding-bottom: 0;
  border-bottom: none;
}

.aif-faq p {
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: #6B7A8D;
  margin: 0;
  padding-left: 20px;
}


/* -------------------------------------------------------
   LAST REVIEWED DATE
   Freshness signal for AI engines. Subtle, positioned
   just above the disclosure footer.
   ------------------------------------------------------- */

.aif-last-reviewed {
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 13px;
  color: #94A3B8;
  margin: 24px 0 16px;
  padding-top: 16px;
  border-top: 1px solid #E2E8F0;
}

.aif-last-reviewed em {
  font-style: normal;
  font-weight: 500;
}


/* -------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------- */

@media (max-width: 768px) {

  .aif-tldr {
    padding: 16px 18px;
    margin: 24px 0;
  }

  .aif-faq {
    padding: 24px 20px;
    margin: 36px 0 24px;
  }

  .aif-faq h2 {
    font-size: 21px;
  }

  .aif-faq h3 {
    font-size: 16px;
  }
}
.entry-content, 
.entry-content p,
.entry-content li,
.entry-content .classic-editor-block p {
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #6B7A8D;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
  font-family: 'Outfit', sans-serif;
  color: #1B2A4A;
}
.aif-faq h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
}
/* AI Fluent — Industry Guide Heading Adjustments */

/* H1 — page title */
.entry-content h1,
.wp-block-kadence-advancedheading h1 {
  font-size: clamp(1.75rem, 4vw, 2.25rem); /* ~28px to 36px */
  line-height: 1.2;
}

/* H2 — section headings */
.entry-content h2,
.wp-block-kadence-advancedheading h2 {
  font-size: clamp(1.375rem, 3vw, 1.75rem); /* ~22px to 28px */
  line-height: 1.25;
}

/* H3 — sub-section headings */
.entry-content h3,
.wp-block-kadence-advancedheading h3 {
  font-size: clamp(1.125rem, 2.5vw, 1.375rem); /* ~18px to 22px */
  line-height: 1.3;
}

/* Tighten spacing above headings so sections don't float */
.entry-content h2 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.entry-content h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
/* =================================================================
   AI FLUENT — CONTENT TYPE CSS SYSTEM
   Each content type has distinct visual treatment while using
   the brand palette (Teal #0EA5A0, Purple #673AB7, Gold #F5A623, 
   Navy #1B2A4A, Sky #4A90D9) and typography (Outfit headings, DM Sans body)
   ================================================================= */

/* -----------------------------------------------------------------
   SHARED: Base styles used across all content types
   ----------------------------------------------------------------- */

.aif-article {
    font-family: 'DM Sans', -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: #374151;
    max-width: 780px;
}

.aif-article h1, .aif-article h2, .aif-article h3, .aif-article h4 {
    font-family: 'Outfit', -apple-system, sans-serif;
    color: #1B2A4A;
    line-height: 1.25;
}

.aif-article h2 { font-size: 28px; font-weight: 800; margin: 2.5rem 0 1rem; }
.aif-article h3 { font-size: 20px; font-weight: 700; margin: 1.8rem 0 0.8rem; }
.aif-article p { margin-bottom: 1.2rem; }
.aif-article a { color: #0EA5A0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.aif-article a:hover { color: #0C8C87; }

/* Content type badge — appears at top of every article */
.aif-type-badge {
    display: inline-block;
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 4px;
    margin-bottom: 1rem;
}

/* Time estimate badge */
.aif-time-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #6B7A8D;
    margin-bottom: 1.5rem;
}

.aif-time-badge::before {
    content: '⏱';
    font-size: 14px;
}

/* Existing GEO elements — refined */
.aif-tldr {
    background: #F0FDFC;
    border-left: 4px solid #0EA5A0;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    border-radius: 0 8px 8px 0;
    font-size: 15px;
}

.aif-tldr p { margin: 0; }
.aif-tldr strong { color: #0EA5A0; font-weight: 600; }

.aif-key-takeaways {
    background: #F8F9FB;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

.aif-key-takeaways h2 {
    font-size: 18px !important;
    font-weight: 700 !important;
    margin: 0 0 0.75rem !important;
    color: #1B2A4A;
}

.aif-key-takeaways ul { padding-left: 1.25rem; margin: 0; }
.aif-key-takeaways li { margin-bottom: 0.5rem; font-size: 15px; }

/* FAQ — smaller headings as discussed */
.aif-faq {
    background: #FAFAFA;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 1.5rem;
    margin: 2rem 0 1rem;
}

.aif-faq h2 {
    font-size: 22px !important;
    font-weight: 800 !important;
    margin: 0 0 1rem !important;
}

.aif-faq h3 {
    font-size: 16px !important;
    font-weight: 600 !important;
    margin: 1.2rem 0 0.4rem !important;
    color: #1B2A4A;
}

.aif-faq p {
    font-size: 15px;
    color: #4B5563;
    margin-bottom: 0.75rem;
}

.aif-last-reviewed {
    font-size: 13px;
    color: #94A3B8;
}

/* Where to go next */
.aif-next-steps {
    background: #F0F4FF;
    border: 1px solid #D0DBEF;
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    margin: 2rem 0;
}

/* Disclosure */
.aif-disclosure {
    font-size: 13px;
    color: #94A3B8;
    border-top: 1px solid #E5E7EB;
    padding-top: 1rem;
    margin-top: 2rem;
}


/* =================================================================
   1. QUICK START
   Visual: Clean, numbered steps, progress feel, green success accents
   Badge: Teal background
   ================================================================= */

.aif-quick-start .aif-type-badge {
    background: #E0F5F4;
    color: #0C8C87;
    border: 1px solid #B2E4E2;
}

/* Step counter */
.aif-quick-start .aif-step {
    position: relative;
    padding-left: 3.5rem;
    margin-bottom: 2rem;
    min-height: 2.5rem;
}

.aif-quick-start .aif-step::before {
    content: attr(data-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 2.5rem;
    height: 2.5rem;
    background: #0EA5A0;
    color: white;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* Confirmation box after each step */
.aif-quick-start .aif-check {
    background: #ECFDF5;
    border-left: 3px solid #16A34A;
    padding: 0.6rem 1rem;
    font-size: 14px;
    color: #166534;
    margin: 0.75rem 0 0.5rem;
    border-radius: 0 6px 6px 0;
}

.aif-quick-start .aif-check::before {
    content: '✓ ';
    font-weight: 700;
}

/* What just happened box */
.aif-quick-start .aif-what-happened {
    background: #F0FDFC;
    border: 1px solid #B2E4E2;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
}

.aif-quick-start .aif-what-happened h3 {
    font-size: 16px !important;
    color: #0C8C87 !important;
    margin: 0 0 0.5rem !important;
}

/* Screenshot placeholder */
.aif-quick-start .aif-screenshot {
    background: #F3F4F6;
    border: 2px dashed #D1D5DB;
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    color: #9CA3AF;
    font-size: 14px;
    margin: 1rem 0;
}


/* =================================================================
   2. HOW-TO GUIDE
   Visual: Structured, numbered sections with depth, blue accents
   Badge: Sky blue
   ================================================================= */

.aif-how-to .aif-type-badge {
    background: #EBF4FF;
    color: #2563EB;
    border: 1px solid #BFDBFE;
}

/* Prerequisites box */
.aif-how-to .aif-prerequisites {
    background: #FFF8E0;
    border: 1px solid #FDE68A;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
}

.aif-how-to .aif-prerequisites h3 {
    font-size: 16px !important;
    color: #92400E !important;
    margin: 0 0 0.5rem !important;
}

.aif-how-to .aif-prerequisites::before {
    content: '📋 ';
}

/* Tip callout */
.aif-how-to .aif-tip {
    background: #EBF4FF;
    border-left: 3px solid #4A90D9;
    padding: 0.75rem 1rem;
    font-size: 14px;
    margin: 1rem 0;
    border-radius: 0 6px 6px 0;
}

.aif-how-to .aif-tip::before {
    content: '💡 Tip: ';
    font-weight: 600;
    color: #1E40AF;
}

/* Warning callout */
.aif-how-to .aif-warning {
    background: #FEF2F2;
    border-left: 3px solid #DC2626;
    padding: 0.75rem 1rem;
    font-size: 14px;
    margin: 1rem 0;
    border-radius: 0 6px 6px 0;
}

.aif-how-to .aif-warning::before {
    content: '⚠️ Watch out: ';
    font-weight: 600;
    color: #991B1B;
}

/* Common mistakes box */
.aif-how-to .aif-mistakes {
    background: #FFF1F2;
    border: 1px solid #FECDD3;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
}

.aif-how-to .aif-mistakes h3 {
    font-size: 16px !important;
    color: #BE123C !important;
    margin: 0 0 0.5rem !important;
}

/* Tool comparison table */
.aif-how-to table, .aif-deep-dive table, .aif-industry table, .aif-compliance table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin: 1.5rem 0;
}

.aif-how-to th, .aif-deep-dive th, .aif-industry th, .aif-compliance th {
    background: #1B2A4A;
    color: white;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 13px;
    padding: 10px 12px;
    text-align: left;
}

.aif-how-to td, .aif-deep-dive td, .aif-industry td, .aif-compliance td {
    padding: 10px 12px;
    border-bottom: 1px solid #E5E7EB;
}

.aif-how-to tr:nth-child(even), .aif-deep-dive tr:nth-child(even), 
.aif-industry tr:nth-child(even), .aif-compliance tr:nth-child(even) {
    background: #F9FAFB;
}

/* Time estimate per section */
.aif-how-to .aif-section-time {
    font-size: 12px;
    color: #94A3B8;
    font-weight: 500;
    margin-left: 0.5rem;
}


/* =================================================================
   3. DEEP DIVE GUIDE
   Visual: Rich, analytical, purple accents, data-heavy feel
   Badge: Purple
   ================================================================= */

.aif-deep-dive .aif-type-badge {
    background: #F0E6FF;
    color: #673AB7;
    border: 1px solid #D4B8F0;
}

/* Who this is for qualifier */
.aif-deep-dive .aif-audience {
    background: #F0E6FF;
    border: 1px solid #D4B8F0;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    font-size: 15px;
}

.aif-deep-dive .aif-audience strong {
    color: #673AB7;
}

/* Decision matrix styling */
.aif-deep-dive .aif-matrix {
    background: #FAFAFA;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 1.25rem;
    margin: 1.5rem 0;
}

/* Benchmark box */
.aif-deep-dive .aif-benchmark {
    background: #F5F3FF;
    border-left: 4px solid #673AB7;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    border-radius: 0 8px 8px 0;
}

.aif-deep-dive .aif-benchmark h4 {
    font-size: 15px;
    color: #673AB7;
    margin: 0 0 0.5rem;
}

/* ROI calculation box */
.aif-deep-dive .aif-roi {
    background: #ECFDF5;
    border: 2px solid #16A34A;
    border-radius: 8px;
    padding: 1.25rem;
    margin: 1.5rem 0;
}

.aif-deep-dive .aif-roi h4 {
    font-size: 16px;
    color: #166534;
    margin: 0 0 0.5rem;
}


/* =================================================================
   4. INDUSTRY OVERVIEW
   Visual: Welcoming, broad, uses journey teal, clear pathway feel
   Badge: Teal
   ================================================================= */

.aif-industry .aif-type-badge {
    background: #E0F5F4;
    color: #0C8C87;
    border: 1px solid #B2E4E2;
}

/* Day in the life comparison panels */
.aif-industry .aif-before-after {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1.5rem 0;
}

@media (max-width: 640px) {
    .aif-industry .aif-before-after { grid-template-columns: 1fr; }
}

.aif-industry .aif-before {
    background: #FEF2F2;
    border: 1px solid #FECDD3;
    border-radius: 8px;
    padding: 1rem;
}

.aif-industry .aif-before h4 {
    color: #DC2626;
    font-size: 14px;
    margin: 0 0 0.5rem;
}

.aif-industry .aif-after {
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    border-radius: 8px;
    padding: 1rem;
}

.aif-industry .aif-after h4 {
    color: #16A34A;
    font-size: 14px;
    margin: 0 0 0.5rem;
}

/* Impact vs effort matrix visual */
.aif-industry .aif-impact-matrix {
    background: #F8F9FB;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 1.25rem;
    margin: 1.5rem 0;
}

/* Maturity pathway */
.aif-industry .aif-pathway {
    display: flex;
    gap: 0.5rem;
    margin: 1.5rem 0;
    flex-wrap: wrap;
}

.aif-industry .aif-pathway-step {
    flex: 1;
    min-width: 180px;
    background: white;
    border: 1px solid #E5E7EB;
    border-top: 3px solid #0EA5A0;
    border-radius: 0 0 8px 8px;
    padding: 1rem;
    text-align: center;
}

.aif-industry .aif-pathway-step h4 {
    font-size: 14px;
    color: #0EA5A0;
    margin: 0 0 0.4rem;
}

.aif-industry .aif-pathway-step p {
    font-size: 13px;
    color: #6B7A8D;
    margin: 0;
}


/* =================================================================
   5. CASE STUDY
   Visual: Story-driven, warm gold accents, metrics panels, quotes
   Badge: Gold
   ================================================================= */

.aif-case-study .aif-type-badge {
    background: #FFF8E0;
    color: #92400E;
    border: 1px solid #FDE68A;
}

/* Business profile card */
.aif-case-study .aif-profile {
    background: #FFF8E0;
    border: 1px solid #FDE68A;
    border-radius: 8px;
    padding: 1.25rem;
    margin: 1.5rem 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

@media (max-width: 640px) {
    .aif-case-study .aif-profile { grid-template-columns: 1fr; }
}

.aif-case-study .aif-profile dt {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #92400E;
}

.aif-case-study .aif-profile dd {
    font-size: 15px;
    margin: 0 0 0.75rem;
    color: #374151;
}

/* Results metrics panel */
.aif-case-study .aif-results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.aif-case-study .aif-metric {
    background: white;
    border: 1px solid #E5E7EB;
    border-top: 3px solid #F5A623;
    border-radius: 0 0 8px 8px;
    padding: 1rem;
    text-align: center;
}

.aif-case-study .aif-metric .aif-metric-number {
    font-family: 'Outfit', sans-serif;
    font-size: 28px;
    font-weight: 800;
    color: #1B2A4A;
    display: block;
}

.aif-case-study .aif-metric .aif-metric-label {
    font-size: 13px;
    color: #6B7A8D;
    display: block;
    margin-top: 0.25rem;
}

/* Pull quote */
.aif-case-study .aif-quote {
    border-left: 4px solid #F5A623;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    font-size: 17px;
    font-style: italic;
    color: #1B2A4A;
    background: #FFFBEB;
    border-radius: 0 8px 8px 0;
}

.aif-case-study .aif-quote cite {
    display: block;
    font-size: 13px;
    font-style: normal;
    color: #6B7A8D;
    margin-top: 0.5rem;
}

/* Timeline */
.aif-case-study .aif-timeline {
    position: relative;
    padding-left: 2rem;
    margin: 1.5rem 0;
}

.aif-case-study .aif-timeline::before {
    content: '';
    position: absolute;
    left: 0.5rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #F5A623;
}

.aif-case-study .aif-timeline-item {
    position: relative;
    margin-bottom: 1.25rem;
    padding-left: 1rem;
}

.aif-case-study .aif-timeline-item::before {
    content: '';
    position: absolute;
    left: -1.75rem;
    top: 0.4rem;
    width: 10px;
    height: 10px;
    background: #F5A623;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 0 0 2px #F5A623;
}

.aif-case-study .aif-timeline-item h4 {
    font-size: 14px;
    color: #92400E;
    margin: 0 0 0.3rem;
}

/* Cost vs savings table */
.aif-case-study table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin: 1.5rem 0;
}

.aif-case-study th {
    background: #F5A623;
    color: white;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    padding: 10px 12px;
    text-align: left;
}

.aif-case-study td {
    padding: 10px 12px;
    border-bottom: 1px solid #E5E7EB;
}


/* =================================================================
   6. STRATEGY / FRAMEWORK
   Visual: Senior, structured, navy accents, framework diagrams
   Badge: Navy
   ================================================================= */

.aif-strategy .aif-type-badge {
    background: #E8EBF0;
    color: #1B2A4A;
    border: 1px solid #C4CBD8;
}

/* Framework box */
.aif-strategy .aif-framework {
    background: #F8F9FB;
    border: 2px solid #1B2A4A;
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.aif-strategy .aif-framework h3 {
    color: #1B2A4A !important;
    font-size: 18px !important;
    margin: 0 0 1rem !important;
    text-align: center;
}

/* Phase/roadmap steps */
.aif-strategy .aif-phases {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.aif-strategy .aif-phase {
    background: white;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 1.25rem;
    position: relative;
}

.aif-strategy .aif-phase::before {
    content: attr(data-phase);
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #6B7A8D;
    margin-bottom: 0.5rem;
}

.aif-strategy .aif-phase h4 {
    font-size: 16px;
    color: #1B2A4A;
    margin: 0 0 0.5rem;
}

/* Decision criteria box */
.aif-strategy .aif-criteria {
    background: #F0F4FF;
    border: 1px solid #D0DBEF;
    border-radius: 8px;
    padding: 1.25rem;
    margin: 1.5rem 0;
}

/* Risk assessment */
.aif-strategy .aif-risk {
    background: #FFF1F2;
    border: 1px solid #FECDD3;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin: 1rem 0;
}

/* KPI box */
.aif-strategy .aif-kpi {
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin: 1rem 0;
}


/* =================================================================
   7. COMPLIANCE & REGULATION
   Visual: Authoritative, careful, structured checklists, red/green
   Badge: Muted red
   ================================================================= */

.aif-compliance .aif-type-badge {
    background: #FEE2E2;
    color: #991B1B;
    border: 1px solid #FECACA;
}

/* Plain English translation box */
.aif-compliance .aif-plain-english {
    background: #EBF4FF;
    border: 1px solid #BFDBFE;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
}

.aif-compliance .aif-plain-english h4 {
    font-size: 15px;
    color: #1E40AF;
    margin: 0 0 0.5rem;
}

.aif-compliance .aif-plain-english h4::before {
    content: '🔤 ';
}

/* Requirements checklist */
.aif-compliance .aif-checklist {
    margin: 1.5rem 0;
}

.aif-compliance .aif-checklist-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #F3F4F6;
}

.aif-compliance .aif-must {
    background: #DC2626;
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 3px;
    white-space: nowrap;
    flex-shrink: 0;
}

.aif-compliance .aif-should {
    background: #F5A623;
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 3px;
    white-space: nowrap;
    flex-shrink: 0;
}

.aif-compliance .aif-nice {
    background: #16A34A;
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 3px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Official source link styling */
.aif-compliance .aif-source {
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    padding: 0.6rem 1rem;
    margin: 0.5rem 0;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.aif-compliance .aif-source::before {
    content: '🔗';
}

/* Updated date badge — more prominent for compliance */
.aif-compliance .aif-last-reviewed {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    display: inline-block;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    color: #991B1B;
}


/* =================================================================
   8. PROMPT LIBRARY / REFERENCE
   Visual: Clean, functional, copy-ready, minimal chrome
   Badge: Purple (Explore journey)
   ================================================================= */

.aif-prompt-lib .aif-type-badge {
    background: #F0E6FF;
    color: #673AB7;
    border: 1px solid #D4B8F0;
}

/* Individual prompt card */
.aif-prompt-lib .aif-prompt {
    background: #F8F9FB;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 1.25rem;
    margin: 1.25rem 0;
    position: relative;
}

.aif-prompt-lib .aif-prompt h3 {
    font-size: 15px !important;
    margin: 0 0 0.5rem !important;
}

/* The actual prompt text — monospace-ish, copy-ready */
.aif-prompt-lib .aif-prompt-text {
    background: #1B2A4A;
    color: #E2E8F0;
    font-family: 'DM Sans', monospace;
    font-size: 14px;
    line-height: 1.6;
    padding: 1rem;
    border-radius: 6px;
    margin: 0.75rem 0;
    white-space: pre-wrap;
    position: relative;
}

/* Customisation tip under each prompt */
.aif-prompt-lib .aif-customise {
    font-size: 13px;
    color: #6B7A8D;
    margin: 0.5rem 0 0;
    padding-left: 1.5rem;
    position: relative;
}

.aif-prompt-lib .aif-customise::before {
    content: '✏️';
    position: absolute;
    left: 0;
}

/* Difficulty/impact badge */
.aif-prompt-lib .aif-difficulty {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 3px;
    margin-right: 0.5rem;
}

.aif-prompt-lib .aif-difficulty-easy { background: #ECFDF5; color: #166534; }
.aif-prompt-lib .aif-difficulty-moderate { background: #FFF8E0; color: #92400E; }
.aif-prompt-lib .aif-difficulty-advanced { background: #F0E6FF; color: #673AB7; }

/* Tool compatibility badges */
.aif-prompt-lib .aif-tools {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.aif-prompt-lib .aif-tool-badge {
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 12px;
    background: #F3F4F6;
    color: #4B5563;
}

/* Category jump links */
.aif-prompt-lib .aif-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.5rem 0;
    padding: 1rem;
    background: #F8F9FB;
    border-radius: 8px;
}

.aif-prompt-lib .aif-categories a {
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    background: white;
    border: 1px solid #E5E7EB;
    text-decoration: none;
    color: #673AB7;
    transition: all 0.2s;
}

.aif-prompt-lib .aif-categories a:hover {
    background: #673AB7;
    color: white;
    border-color: #673AB7;
}