/* ============================================================
   LOBF v5.1 — Qualifier Tool Component
   Pure HTML/CSS navigation via :target + :has()
   Inline JS only for dataLayer attribution (3 events)
   ============================================================ */

#lobf-pillar .lobf-q-wrap { 
  background: #ffffff !important; 
  border-radius: 16px !important; 
  padding: 0 !important; 
  margin: 40px 0 !important; 
  box-shadow: 0 12px 48px rgba(15,26,46,0.15) !important; 
  overflow: hidden !important; 
  border: 1px solid #f0e9dc !important; 
  width: 100% !important;
  box-sizing: border-box !important;
  font-family: 'DM Sans', sans-serif !important;
}

/* :target navigation pattern — v5.1 locked spec */
#lobf-pillar .lobf-q-wrap .lobf-screen { display: none !important; padding: 36px 32px !important; box-sizing: border-box !important; }
#lobf-pillar .lobf-q-wrap .lobf-screen:target { display: block !important; }
#lobf-pillar .lobf-q-wrap > .lobf-screen:first-child { display: block !important; }
#lobf-pillar .lobf-q-wrap:has(.lobf-screen:target) > .lobf-screen:first-child:not(:target) { display: none !important; }

/* Question screens */
#lobf-pillar .qual-eyebrow { 
  font-family: 'DM Sans', sans-serif !important; 
  color: #b8964a !important; 
  -webkit-text-fill-color: #b8964a !important; 
  font-size: 11px !important; 
  font-weight: 700 !important; 
  letter-spacing: 2px !important; 
  text-transform: uppercase !important; 
  margin-bottom: 12px !important; 
}
#lobf-pillar .qual-question { 
  font-family: 'Fraunces', serif !important; 
  color: #0f1a2e !important; 
  -webkit-text-fill-color: #0f1a2e !important; 
  font-size: 26px !important; 
  line-height: 1.3 !important; 
  margin: 0 0 10px !important; 
  font-weight: 600 !important; 
}
#lobf-pillar .qual-context { 
  color: #6a6a6a !important; 
  -webkit-text-fill-color: #6a6a6a !important; 
  font-size: 15px !important; 
  margin: 0 0 28px !important; 
  line-height: 1.55 !important; 
  font-family: 'DM Sans', sans-serif !important;
  max-width: 65ch !important;
}
#lobf-pillar .qual-progress { 
  background: #f0e9dc !important; 
  height: 6px !important; 
  border-radius: 3px !important; 
  margin-bottom: 24px !important; 
  overflow: hidden !important; 
}
#lobf-pillar .qual-progress-fill { 
  background: linear-gradient(90deg, #b8964a 0%, #d4b572 100%) !important; 
  height: 100% !important; 
  border-radius: 3px !important; 
}

/* Answer buttons */
#lobf-pillar .qual-answers { 
  display: grid !important; 
  grid-template-columns: 1fr 1fr 1fr !important; 
  gap: 12px !important; 
  margin: 28px 0 16px !important; 
}
#lobf-pillar .qual-answers a:link,
#lobf-pillar .qual-answers a:visited { 
  background: #faf6ef !important; 
  color: #0f1a2e !important; 
  -webkit-text-fill-color: #0f1a2e !important; 
  padding: 18px 14px !important; 
  border-radius: 10px !important; 
  text-decoration: none !important; 
  text-align: center !important; 
  font-weight: 600 !important; 
  font-size: 15px !important; 
  border: 2px solid #f0e9dc !important; 
  transition: all 0.2s !important; 
  font-family: 'DM Sans', sans-serif !important;
}
#lobf-pillar .qual-answers a:hover { 
  background: #1a2942 !important; 
  color: #faf6ef !important; 
  -webkit-text-fill-color: #faf6ef !important; 
  border-color: #1a2942 !important; 
  text-decoration: none !important;
}

/* Back navigation */
#lobf-pillar .qual-nav { 
  display: flex !important; 
  justify-content: flex-start !important; 
  margin-top: 18px !important; 
  padding-top: 18px !important; 
  border-top: 1px solid #f0e9dc !important; 
}
#lobf-pillar .qual-nav a:link,
#lobf-pillar .qual-nav a:visited { 
  color: #6a6a6a !important; 
  -webkit-text-fill-color: #6a6a6a !important; 
  text-decoration: none !important; 
  font-size: 14px !important; 
  font-weight: 500 !important; 
}
#lobf-pillar .qual-nav a:hover { 
  color: #b8964a !important; 
  -webkit-text-fill-color: #b8964a !important; 
}

/* Result verdict screens — 4 outcome tiers */
#lobf-pillar .qual-verdict { 
  padding: 36px 32px !important; 
  border-radius: 16px !important; 
  margin: 0 0 24px !important; 
  color: #faf6ef !important; 
  -webkit-text-fill-color: #faf6ef !important; 
  box-sizing: border-box !important;
}
#lobf-pillar .qual-verdict-strong { background: linear-gradient(135deg, #1a4d3a 0%, #2d6a4f 100%) !important; }
#lobf-pillar .qual-verdict-possible { background: linear-gradient(135deg, #8a6428 0%, #b8964a 100%) !important; }
#lobf-pillar .qual-verdict-gated { background: linear-gradient(135deg, #1a2942 0%, #0f1a2e 100%) !important; }
#lobf-pillar .qual-verdict-weak { background: linear-gradient(135deg, #3a3a4a 0%, #555566 100%) !important; }
#lobf-pillar .qual-verdict-eyebrow { 
  font-family: 'DM Sans', sans-serif !important; 
  color: #d4b572 !important; 
  -webkit-text-fill-color: #d4b572 !important; 
  font-size: 11px !important; 
  font-weight: 700 !important; 
  letter-spacing: 2px !important; 
  text-transform: uppercase !important; 
  margin-bottom: 14px !important; 
}
#lobf-pillar .qual-verdict-strong .qual-verdict-eyebrow { 
  color: #d4f0dc !important; 
  -webkit-text-fill-color: #d4f0dc !important; 
}
#lobf-pillar .qual-verdict h3 { 
  font-family: 'Fraunces', serif !important; 
  color: #faf6ef !important; 
  -webkit-text-fill-color: #faf6ef !important; 
  font-size: 28px !important; 
  margin: 0 0 16px !important; 
  font-weight: 600 !important; 
  line-height: 1.25 !important; 
}
#lobf-pillar .qual-verdict p { 
  color: #faf6ef !important; 
  -webkit-text-fill-color: #faf6ef !important; 
  font-size: 16px !important; 
  line-height: 1.6 !important; 
  margin: 0 0 14px !important; 
  opacity: 0.95 !important; 
  font-family: 'DM Sans', sans-serif !important;
  max-width: 70ch !important;
}
#lobf-pillar .qual-verdict p strong {
  color: #faf6ef !important;
  -webkit-text-fill-color: #faf6ef !important;
}

/* Phone-first button pair on result screens */
#lobf-pillar .qual-actions { 
  display: grid !important; 
  grid-template-columns: 1fr 1fr !important; 
  gap: 14px !important; 
  margin-top: 24px !important; 
}
#lobf-pillar a.qual-btn:link,
#lobf-pillar a.qual-btn:visited { 
  background: #ffffff !important; 
  color: #0f1a2e !important; 
  -webkit-text-fill-color: #0f1a2e !important; 
  padding: 18px 16px !important; 
  border-radius: 10px !important; 
  text-decoration: none !important; 
  text-align: center !important; 
  font-weight: 700 !important; 
  font-size: 16px !important; 
  display: block !important; 
  box-shadow: 0 6px 20px rgba(0,0,0,0.25) !important; 
  font-family: 'DM Sans', sans-serif !important;
  transition: transform 0.15s ease !important;
}
#lobf-pillar a.qual-btn:hover {
  color: #0f1a2e !important;
  -webkit-text-fill-color: #0f1a2e !important;
  text-decoration: none !important;
  transform: translateY(-1px) !important;
}
#lobf-pillar .qual-btn-sub { 
  display: block !important; 
  font-size: 12px !important; 
  font-weight: 500 !important; 
  color: #6a6a6a !important; 
  -webkit-text-fill-color: #6a6a6a !important; 
  margin-top: 4px !important; 
  text-transform: uppercase !important; 
  letter-spacing: 1px !important; 
}
#lobf-pillar .qual-trust { 
  color: #2a2a2a !important; 
  -webkit-text-fill-color: #2a2a2a !important; 
  font-size: 13px !important; 
  margin-top: 20px !important; 
  text-align: center !important; 
  font-family: 'DM Sans', sans-serif !important;
}
#lobf-pillar .qual-restart { 
  margin-top: 22px !important; 
  text-align: center !important; 
}
#lobf-pillar .qual-restart a:link,
#lobf-pillar .qual-restart a:visited { 
  color: #6a6a6a !important; 
  -webkit-text-fill-color: #6a6a6a !important; 
  font-size: 14px !important; 
  text-decoration: underline !important; 
}

/* Mobile sizing — mandatory per v5.1 */
@media (max-width: 520px) {
  #lobf-pillar .lobf-q-wrap {
    margin: 28px 0 !important;
    border-radius: 12px !important;
  }
  #lobf-pillar .lobf-q-wrap .lobf-screen { 
    padding: 26px 22px !important; 
  }
  #lobf-pillar .qual-question { 
    font-size: 21px !important; 
    line-height: 1.3 !important;
  }
  #lobf-pillar .qual-context { 
    font-size: 14px !important; 
    margin: 0 0 20px !important; 
  }
  #lobf-pillar .qual-answers { 
    grid-template-columns: 1fr !important; 
    gap: 10px !important;
  }
  #lobf-pillar .qual-answers a:link,
  #lobf-pillar .qual-answers a:visited { 
    padding: 15px 14px !important; 
    font-size: 15px !important; 
  }
  #lobf-pillar .qual-verdict { 
    padding: 26px 22px !important; 
    border-radius: 12px !important;
  }
  #lobf-pillar .qual-verdict h3 { 
    font-size: 22px !important; 
    line-height: 1.25 !important;
  }
  #lobf-pillar .qual-verdict p { 
    font-size: 15px !important; 
    line-height: 1.55 !important;
  }
  #lobf-pillar .qual-actions { 
    grid-template-columns: 1fr !important; 
    gap: 12px !important;
  }
  #lobf-pillar a.qual-btn:link,
  #lobf-pillar a.qual-btn:visited { 
    padding: 16px 14px !important; 
    font-size: 15px !important; 
  }
}