{"id":1714,"date":"2026-04-20T09:00:34","date_gmt":"2026-04-20T09:00:34","guid":{"rendered":"https:\/\/bbpmfg.com\/?page_id=1714"},"modified":"2026-04-21T03:14:56","modified_gmt":"2026-04-21T03:14:56","slug":"seal-selector","status":"publish","type":"page","link":"https:\/\/bbpmfg.com\/ar\/sand-dredge-pumps\/gravel-pump\/seal-selector\/","title":{"rendered":"\u0645\u062d\u062f\u062f \u0627\u0644\u062e\u062a\u0645"},"content":{"rendered":"\n<div class=\"wp-block-stackable-columns alignfull stk-block-columns stk-block stk-2e91a49\" data-block-id=\"2e91a49\"><div class=\"stk-row stk-inner-blocks stk-block-content stk-content-align stk-2e91a49-column alignfull\">\n<div class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-5228c15\" data-v=\"4\" data-block-id=\"5228c15\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-5228c15-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-5228c15-inner-blocks\">\n<div class=\"wp-block-stackable-columns alignfull stk-block-columns stk-block stk-9e8b68b\" data-block-id=\"9e8b68b\"><style>.stk-9e8b68b {margin-bottom:0px !important;}<\/style><div class=\"stk-row stk-inner-blocks stk-block-content stk-content-align stk-9e8b68b-column alignfull\">\n<div class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-15719e8\" data-v=\"4\" data-block-id=\"15719e8\"><style>.stk-15719e8-container{margin-top:var(--stk--preset--spacing--50, 1.5rem) !important;margin-right:var(--stk--preset--spacing--50, 1.5rem) !important;margin-bottom:var(--stk--preset--spacing--50, 1.5rem) !important;margin-left:var(--stk--preset--spacing--50, 1.5rem) !important;}<\/style><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-15719e8-container stk--no-background stk--no-padding\"><div class=\"has-text-align-center stk-block-content stk-inner-blocks stk-15719e8-inner-blocks\"><div class=\"ct-breadcrumbs\" data-source=\"rankmath\" ><nav aria-label=\"breadcrumbs\" class=\"rank-math-breadcrumb\"><p><span class=\"last\">Home<\/span><\/p><\/nav><\/div><\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>BBP Gravel Pump Seal Type Selector<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=IBM+Plex+Mono:wght@400;500;600&#038;family=IBM+Plex+Sans:wght@400;500;600;700&#038;display=swap\" rel=\"stylesheet\">\n<style>\n\/* \u2500\u2500\u2500 Reset & Base \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n\/* \u2500\u2500\u2500 Scoped Wrapper \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n#seal-selector-tool {\n  --primary:   #1848C0;\n  --primary-dk:#0f339a;\n  --accent:    #F0C018;\n  --accent-dk: #c9a010;\n  --neutral-0: #ffffff;\n  --neutral-50:#f5f7fb;\n  --neutral-100:#e8ecf4;\n  --neutral-200:#c8d0e4;\n  --neutral-300:#8f9bbf;\n  --neutral-500:#4a5578;\n  --neutral-700:#1e2540;\n  --neutral-900:#0a0e1a;\n  --green:     #16a34a;\n  --amber:     #d97706;\n  --red:       #dc2626;\n  --font-mono: 'IBM Plex Mono', monospace;\n  --font-sans: 'IBM Plex Sans', sans-serif;\n  --radius:    0px;\n  --shadow:    0 2px 12px rgba(24,72,192,0.10);\n\n  font-family: var(--font-sans);\n  color: var(--neutral-700);\n  background: var(--neutral-50);\n  max-width: 1120px;\n  margin: 0 auto;\n  padding: 0 16px 64px;\n}\n\n\/* \u2500\u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n#seal-selector-tool .tool-header {\n  background: var(--primary);\n  color: var(--neutral-0);\n  padding: 32px 40px 28px;\n  margin: 0 -16px 40px;\n  position: relative;\n  overflow: hidden;\n}\n#seal-selector-tool .tool-header::after {\n  content: '';\n  position: absolute;\n  right: -40px;\n  top: -40px;\n  width: 220px;\n  height: 220px;\n  background: rgba(240,192,24,0.12);\n  transform: rotate(15deg);\n}\n#seal-selector-tool .tool-header-label {\n  font-family: var(--font-mono);\n  font-size: 11px;\n  font-weight: 500;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n  color: var(--accent);\n  margin-bottom: 10px;\n}\n#seal-selector-tool .tool-header h1 {\n  font-size: clamp(20px, 3vw, 28px);\n  font-weight: 700;\n  line-height: 1.2;\n  margin-bottom: 8px;\n}\n#seal-selector-tool .tool-header p {\n  font-size: 14px;\n  opacity: 0.82;\n  max-width: 620px;\n}\n\n\/* \u2500\u2500\u2500 Progress Bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n#seal-selector-tool .progress-bar-wrap {\n  margin-bottom: 36px;\n}\n#seal-selector-tool .progress-steps {\n  display: flex;\n  gap: 0;\n  list-style: none;\n}\n#seal-selector-tool .progress-step {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  position: relative;\n}\n#seal-selector-tool .progress-step::before {\n  content: '';\n  position: absolute;\n  top: 14px;\n  left: 50%;\n  width: 100%;\n  height: 2px;\n  background: var(--neutral-200);\n  z-index: 0;\n}\n#seal-selector-tool .progress-step:last-child::before { display: none; }\n#seal-selector-tool .step-dot {\n  width: 28px;\n  height: 28px;\n  border: 2px solid var(--neutral-200);\n  background: var(--neutral-0);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-family: var(--font-mono);\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--neutral-300);\n  position: relative;\n  z-index: 1;\n  transition: all 0.2s;\n}\n#seal-selector-tool .progress-step.active .step-dot {\n  border-color: var(--primary);\n  background: var(--primary);\n  color: var(--neutral-0);\n}\n#seal-selector-tool .progress-step.done .step-dot {\n  border-color: var(--primary);\n  background: var(--primary);\n  color: var(--neutral-0);\n}\n#seal-selector-tool .progress-step.done::before {\n  background: var(--primary);\n}\n#seal-selector-tool .step-label {\n  font-size: 10px;\n  font-family: var(--font-mono);\n  color: var(--neutral-300);\n  margin-top: 6px;\n  text-align: center;\n  letter-spacing: 0.04em;\n  line-height: 1.3;\n}\n#seal-selector-tool .progress-step.active .step-label { color: var(--primary); font-weight: 600; }\n#seal-selector-tool .progress-step.done .step-label { color: var(--primary); }\n\n\/* \u2500\u2500\u2500 Form Sections \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n#seal-selector-tool .form-section {\n  background: var(--neutral-0);\n  border: 1px solid var(--neutral-100);\n  padding: 28px 32px;\n  margin-bottom: 16px;\n  transition: border-color 0.2s;\n}\n#seal-selector-tool .form-section.active-section {\n  border-color: var(--primary);\n  box-shadow: 0 0 0 1px var(--primary);\n}\n#seal-selector-tool .section-header {\n  display: flex;\n  align-items: flex-start;\n  gap: 16px;\n  margin-bottom: 22px;\n}\n#seal-selector-tool .section-num {\n  font-family: var(--font-mono);\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--neutral-0);\n  background: var(--primary);\n  width: 24px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  margin-top: 2px;\n}\n#seal-selector-tool .section-title {\n  font-size: 16px;\n  font-weight: 700;\n  color: var(--neutral-700);\n  line-height: 1.3;\n}\n#seal-selector-tool .section-subtitle {\n  font-size: 12px;\n  color: var(--neutral-300);\n  font-family: var(--font-mono);\n  margin-top: 3px;\n}\n\n\/* \u2500\u2500\u2500 Radio Options \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n#seal-selector-tool .radio-group {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 10px;\n}\n#seal-selector-tool .radio-option {\n  position: relative;\n  cursor: pointer;\n}\n#seal-selector-tool .radio-option input[type=\"radio\"] {\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n#seal-selector-tool .radio-card {\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n  padding: 14px 16px;\n  border: 1.5px solid var(--neutral-200);\n  background: var(--neutral-50);\n  cursor: pointer;\n  transition: all 0.15s;\n}\n#seal-selector-tool .radio-option input:checked + .radio-card {\n  border-color: var(--primary);\n  background: rgba(24,72,192,0.05);\n  box-shadow: 0 0 0 1px var(--primary);\n}\n#seal-selector-tool .radio-option:hover .radio-card {\n  border-color: var(--primary);\n  background: rgba(24,72,192,0.03);\n}\n#seal-selector-tool .radio-indicator {\n  width: 16px;\n  height: 16px;\n  border: 2px solid var(--neutral-300);\n  border-radius: 50%;\n  flex-shrink: 0;\n  margin-top: 2px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.15s;\n}\n#seal-selector-tool .radio-option input:checked + .radio-card .radio-indicator {\n  border-color: var(--primary);\n  background: var(--primary);\n}\n#seal-selector-tool .radio-option input:checked + .radio-card .radio-indicator::after {\n  content: '';\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: var(--neutral-0);\n}\n#seal-selector-tool .radio-text strong {\n  display: block;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--neutral-700);\n  margin-bottom: 3px;\n}\n#seal-selector-tool .radio-text span {\n  font-size: 11px;\n  font-family: var(--font-mono);\n  color: var(--neutral-300);\n}\n\n\/* \u2500\u2500\u2500 Dropdown \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n#seal-selector-tool .dropdown-wrap {\n  position: relative;\n}\n#seal-selector-tool .select-field {\n  width: 100%;\n  max-width: 360px;\n  padding: 12px 40px 12px 16px;\n  border: 1.5px solid var(--neutral-200);\n  background: var(--neutral-50);\n  font-family: var(--font-mono);\n  font-size: 13px;\n  color: var(--neutral-700);\n  appearance: none;\n  cursor: pointer;\n  transition: border-color 0.15s;\n  outline: none;\n}\n#seal-selector-tool .select-field:focus {\n  border-color: var(--primary);\n  box-shadow: 0 0 0 1px var(--primary);\n}\n#seal-selector-tool .select-arrow {\n  position: absolute;\n  right: 14px;\n  top: 50%;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: var(--neutral-300);\n}\n\n\/* \u2500\u2500\u2500 Action Bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n#seal-selector-tool .action-bar {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  margin-top: 32px;\n  flex-wrap: wrap;\n}\n#seal-selector-tool .btn-primary {\n  background: var(--accent);\n  color: var(--neutral-900);\n  border: none;\n  padding: 14px 32px;\n  font-family: var(--font-sans);\n  font-size: 14px;\n  font-weight: 700;\n  letter-spacing: 0.03em;\n  cursor: pointer;\n  transition: background 0.15s, transform 0.1s;\n  text-transform: uppercase;\n}\n#seal-selector-tool .btn-primary:hover { background: var(--accent-dk); }\n#seal-selector-tool .btn-primary:active { transform: scale(0.98); }\n#seal-selector-tool .btn-primary:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n  transform: none;\n}\n#seal-selector-tool .btn-secondary {\n  background: transparent;\n  color: var(--neutral-500);\n  border: 1.5px solid var(--neutral-200);\n  padding: 13px 24px;\n  font-family: var(--font-sans);\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s;\n}\n#seal-selector-tool .btn-secondary:hover {\n  border-color: var(--neutral-500);\n  color: var(--neutral-700);\n}\n#seal-selector-tool .missing-hint {\n  font-size: 12px;\n  font-family: var(--font-mono);\n  color: var(--red);\n  opacity: 0;\n  transition: opacity 0.2s;\n}\n#seal-selector-tool .missing-hint.visible { opacity: 1; }\n\n\/* \u2500\u2500\u2500 Results Panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n#seal-selector-tool .results-panel {\n  display: none;\n  margin-top: 40px;\n  animation: fadeUp 0.35s ease;\n}\n#seal-selector-tool .results-panel.visible { display: block; }\n@keyframes fadeUp {\n  from { opacity: 0; transform: translateY(16px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n\n\/* \u2500\u2500\u2500 Recommendation Card \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n#seal-selector-tool .recommendation-card {\n  background: var(--primary);\n  color: var(--neutral-0);\n  padding: 32px 36px;\n  margin-bottom: 24px;\n  position: relative;\n  overflow: hidden;\n}\n#seal-selector-tool .recommendation-card::before {\n  content: '';\n  position: absolute;\n  top: 0; left: 0;\n  width: 5px;\n  height: 100%;\n  background: var(--accent);\n}\n#seal-selector-tool .rec-label {\n  font-family: var(--font-mono);\n  font-size: 10px;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  color: var(--accent);\n  margin-bottom: 12px;\n}\n#seal-selector-tool .rec-type {\n  font-size: clamp(22px, 4vw, 32px);\n  font-weight: 700;\n  margin-bottom: 10px;\n}\n#seal-selector-tool .confidence-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  background: rgba(255,255,255,0.12);\n  padding: 6px 14px;\n  font-family: var(--font-mono);\n  font-size: 11px;\n  font-weight: 600;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  margin-bottom: 18px;\n}\n#seal-selector-tool .confidence-dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n}\n#seal-selector-tool .confidence-badge.strong .confidence-dot { background: #4ade80; }\n#seal-selector-tool .confidence-badge.good   .confidence-dot { background: var(--accent); }\n#seal-selector-tool .confidence-badge.acceptable .confidence-dot { background: #f87171; }\n#seal-selector-tool .rec-explanation {\n  font-size: 14px;\n  line-height: 1.7;\n  opacity: 0.88;\n  max-width: 680px;\n}\n\n\/* \u2500\u2500\u2500 Score Bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n#seal-selector-tool .scores-section {\n  background: var(--neutral-0);\n  border: 1px solid var(--neutral-100);\n  padding: 28px 32px;\n  margin-bottom: 24px;\n}\n#seal-selector-tool .scores-title {\n  font-size: 13px;\n  font-family: var(--font-mono);\n  font-weight: 600;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  color: var(--neutral-500);\n  margin-bottom: 22px;\n}\n#seal-selector-tool .score-row {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  margin-bottom: 16px;\n}\n#seal-selector-tool .score-row:last-child { margin-bottom: 0; }\n#seal-selector-tool .score-name {\n  font-family: var(--font-mono);\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--neutral-700);\n  width: 200px;\n  flex-shrink: 0;\n}\n#seal-selector-tool .score-name.winner { color: var(--primary); }\n#seal-selector-tool .score-track {\n  flex: 1;\n  height: 8px;\n  background: var(--neutral-100);\n  position: relative;\n  overflow: hidden;\n}\n#seal-selector-tool .score-fill {\n  height: 100%;\n  background: var(--neutral-200);\n  transition: width 0.8s cubic-bezier(0.22,0.61,0.36,1);\n  width: 0;\n}\n#seal-selector-tool .score-row.winner .score-fill { background: var(--primary); }\n#seal-selector-tool .score-val {\n  font-family: var(--font-mono);\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--neutral-500);\n  width: 32px;\n  text-align: right;\n}\n#seal-selector-tool .score-row.winner .score-val { color: var(--primary); }\n\n\/* \u2500\u2500\u2500 Comparison Table \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n#seal-selector-tool .comparison-section {\n  background: var(--neutral-0);\n  border: 1px solid var(--neutral-100);\n  padding: 28px 32px;\n  margin-bottom: 24px;\n  overflow-x: auto;\n}\n#seal-selector-tool .comparison-title {\n  font-size: 13px;\n  font-family: var(--font-mono);\n  font-weight: 600;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  color: var(--neutral-500);\n  margin-bottom: 22px;\n}\n#seal-selector-tool table.comp-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 13px;\n}\n#seal-selector-tool .comp-table thead tr {\n  background: var(--neutral-700);\n  color: var(--neutral-0);\n}\n#seal-selector-tool .comp-table th {\n  padding: 12px 16px;\n  text-align: left;\n  font-family: var(--font-mono);\n  font-size: 11px;\n  font-weight: 600;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  white-space: nowrap;\n}\n#seal-selector-tool .comp-table th.col-winner {\n  background: var(--primary);\n  color: var(--neutral-0);\n}\n#seal-selector-tool .comp-table td {\n  padding: 11px 16px;\n  border-bottom: 1px solid var(--neutral-100);\n  font-family: var(--font-mono);\n  font-size: 12px;\n  color: var(--neutral-500);\n  vertical-align: middle;\n}\n#seal-selector-tool .comp-table td.criterion {\n  font-weight: 600;\n  color: var(--neutral-700);\n  font-family: var(--font-sans);\n  font-size: 13px;\n}\n#seal-selector-tool .comp-table tbody tr:hover td { background: var(--neutral-50); }\n#seal-selector-tool .comp-table td.col-winner {\n  background: rgba(24,72,192,0.05);\n  color: var(--primary);\n  font-weight: 600;\n}\n#seal-selector-tool .comp-table tr:last-child td { border-bottom: none; }\n\n\/* Cell ratings *\/\n#seal-selector-tool .rating {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n}\n#seal-selector-tool .rating-dots {\n  display: inline-flex;\n  gap: 3px;\n}\n#seal-selector-tool .dot {\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background: var(--neutral-200);\n}\n#seal-selector-tool .dot.filled { background: var(--primary); }\n#seal-selector-tool td.col-winner .dot.filled { background: var(--primary); }\n\n\/* \u2500\u2500\u2500 CTA Block \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n#seal-selector-tool .cta-block {\n  background: var(--neutral-900);\n  padding: 32px 36px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 24px;\n  flex-wrap: wrap;\n}\n#seal-selector-tool .cta-text h3 {\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--neutral-0);\n  margin-bottom: 6px;\n}\n#seal-selector-tool .cta-text p {\n  font-size: 13px;\n  font-family: var(--font-mono);\n  color: var(--neutral-300);\n}\n#seal-selector-tool .btn-cta {\n  display: inline-block;\n  background: var(--accent);\n  color: var(--neutral-900);\n  text-decoration: none;\n  padding: 15px 32px;\n  font-family: var(--font-sans);\n  font-size: 14px;\n  font-weight: 700;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n  cursor: pointer;\n  border: none;\n  transition: background 0.15s, transform 0.1s;\n  white-space: nowrap;\n}\n#seal-selector-tool .btn-cta:hover { background: var(--accent-dk); }\n#seal-selector-tool .btn-cta:active { transform: scale(0.98); }\n\n\/* \u2500\u2500\u2500 Criteria Tags \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n#seal-selector-tool .criteria-summary {\n  background: var(--neutral-0);\n  border: 1px solid var(--neutral-100);\n  padding: 20px 28px;\n  margin-bottom: 24px;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n  align-items: center;\n}\n#seal-selector-tool .criteria-label {\n  font-family: var(--font-mono);\n  font-size: 10px;\n  font-weight: 600;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  color: var(--neutral-300);\n  margin-right: 4px;\n}\n#seal-selector-tool .criteria-tag {\n  background: var(--neutral-100);\n  color: var(--neutral-700);\n  font-family: var(--font-mono);\n  font-size: 11px;\n  font-weight: 500;\n  padding: 4px 10px;\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n#seal-selector-tool .criteria-tag-key {\n  color: var(--neutral-300);\n  font-size: 10px;\n}\n\n\/* \u2500\u2500\u2500 Warning Banner \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n#seal-selector-tool .warn-banner {\n  background: rgba(217,119,6,0.1);\n  border-left: 4px solid var(--amber);\n  padding: 12px 16px;\n  font-size: 12px;\n  font-family: var(--font-mono);\n  color: var(--neutral-700);\n  margin-top: 16px;\n}\n\n\/* \u2500\u2500\u2500 Responsive \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n@media (max-width: 640px) {\n  #seal-selector-tool .tool-header { padding: 24px 20px 20px; }\n  #seal-selector-tool .form-section { padding: 20px 16px; }\n  #seal-selector-tool .radio-group { grid-template-columns: 1fr; }\n  #seal-selector-tool .recommendation-card { padding: 24px 20px; }\n  #seal-selector-tool .comparison-section,\n  #seal-selector-tool .scores-section { padding: 20px 16px; }\n  #seal-selector-tool .cta-block { flex-direction: column; align-items: flex-start; }\n  #seal-selector-tool .score-name { width: 140px; font-size: 11px; }\n  #seal-selector-tool .progress-step .step-label { display: none; }\n  #seal-selector-tool .criteria-summary { padding: 16px; }\n}\n<\/style>\n<\/head>\n<body>\n\n<div id=\"seal-selector-tool\">\n\n  <!-- Header -->\n  <div class=\"tool-header\">\n    <div class=\"tool-header-label\">BBP Engineering Tool \u2014 Interactive Selector<\/div>\n    <h1>Gravel Pump Seal Type Selection Guide<\/h1>\n    <p>Answer 5 questions about your operating conditions to receive a data-driven seal type recommendation with full scoring breakdown.<\/p>\n  <\/div>\n\n  <!-- Progress Steps -->\n  <div class=\"progress-bar-wrap\" aria-label=\"Form progress\">\n    <ol class=\"progress-steps\" id=\"progress-steps\">\n      <li class=\"progress-step active\" data-step=\"0\">\n        <div class=\"step-dot\">1<\/div>\n        <div class=\"step-label\">Abrasive-<br>ness<\/div>\n      <\/li>\n      <li class=\"progress-step\" data-step=\"1\">\n        <div class=\"step-dot\">2<\/div>\n        <div class=\"step-label\">Leakage<br>Tolerance<\/div>\n      <\/li>\n      <li class=\"progress-step\" data-step=\"2\">\n        <div class=\"step-dot\">3<\/div>\n        <div class=\"step-label\">Maintenance<br>Access<\/div>\n      <\/li>\n      <li class=\"progress-step\" data-step=\"3\">\n        <div class=\"step-dot\">4<\/div>\n        <div class=\"step-label\">Operating<br>Hours<\/div>\n      <\/li>\n      <li class=\"progress-step\" data-step=\"4\">\n        <div class=\"step-dot\">5<\/div>\n        <div class=\"step-label\">Budget<br>Priority<\/div>\n      <\/li>\n    <\/ol>\n  <\/div>\n\n  <!-- Form -->\n  <form id=\"seal-selector-form\" novalidate>\n\n    <!-- Q1: Slurry Abrasiveness -->\n    <div class=\"form-section active-section\" id=\"section-0\">\n      <div class=\"section-header\">\n        <div class=\"section-num\">1<\/div>\n        <div>\n          <div class=\"section-title\">Slurry Abrasiveness<\/div>\n          <div class=\"section-subtitle\">Particle size and concentration of solids in the pumped medium<\/div>\n        <\/div>\n      <\/div>\n      <div class=\"radio-group\" role=\"radiogroup\" aria-label=\"Slurry abrasiveness\">\n        <label class=\"radio-option\">\n          <input type=\"radio\" name=\"abrasiveness\" value=\"low\">\n          <div class=\"radio-card\">\n            <div class=\"radio-indicator\"><\/div>\n            <div class=\"radio-text\">\n              <strong>Low<\/strong>\n              <span>Fine sand \/ silt slurry &lt;1 mm particles<\/span>\n            <\/div>\n          <\/div>\n        <\/label>\n        <label class=\"radio-option\">\n          <input type=\"radio\" name=\"abrasiveness\" value=\"medium\">\n          <div class=\"radio-card\">\n            <div class=\"radio-indicator\"><\/div>\n            <div class=\"radio-text\">\n              <strong>Medium<\/strong>\n              <span>Coarse sand \/ small gravel 1\u201320 mm<\/span>\n            <\/div>\n          <\/div>\n        <\/label>\n        <label class=\"radio-option\">\n          <input type=\"radio\" name=\"abrasiveness\" value=\"high\">\n          <div class=\"radio-card\">\n            <div class=\"radio-indicator\"><\/div>\n            <div class=\"radio-text\">\n              <strong>High<\/strong>\n              <span>Large gravel \/ rocks \/ tailings &gt;20 mm<\/span>\n            <\/div>\n          <\/div>\n        <\/label>\n      <\/div>\n    <\/div>\n\n    <!-- Q2: Leakage Tolerance -->\n    <div class=\"form-section\" id=\"section-1\">\n      <div class=\"section-header\">\n        <div class=\"section-num\">2<\/div>\n        <div>\n          <div class=\"section-title\">Leakage Tolerance<\/div>\n          <div class=\"section-subtitle\">Environmental, regulatory, and operational constraints on leakage<\/div>\n        <\/div>\n      <\/div>\n      <div class=\"radio-group\" role=\"radiogroup\" aria-label=\"Leakage tolerance\">\n        <label class=\"radio-option\">\n          <input type=\"radio\" name=\"leakage\" value=\"acceptable\">\n          <div class=\"radio-card\">\n            <div class=\"radio-indicator\"><\/div>\n            <div class=\"radio-text\">\n              <strong>Some Leakage Acceptable<\/strong>\n              <span>Open dredge \/ outdoor pit operation<\/span>\n            <\/div>\n          <\/div>\n        <\/label>\n        <label class=\"radio-option\">\n          <input type=\"radio\" name=\"leakage\" value=\"minimal\">\n          <div class=\"radio-card\">\n            <div class=\"radio-indicator\"><\/div>\n            <div class=\"radio-text\">\n              <strong>Minimal Leakage Required<\/strong>\n              <span>Near water bodies \/ contained work area<\/span>\n            <\/div>\n          <\/div>\n        <\/label>\n        <label class=\"radio-option\">\n          <input type=\"radio\" name=\"leakage\" value=\"zero\">\n          <div class=\"radio-card\">\n            <div class=\"radio-indicator\"><\/div>\n            <div class=\"radio-text\">\n              <strong>Zero Leakage Required<\/strong>\n              <span>Environmental compliance \/ hazardous slurry<\/span>\n            <\/div>\n          <\/div>\n        <\/label>\n      <\/div>\n    <\/div>\n\n    <!-- Q3: Maintenance Access -->\n    <div class=\"form-section\" id=\"section-2\">\n      <div class=\"section-header\">\n        <div class=\"section-num\">3<\/div>\n        <div>\n          <div class=\"section-title\">Maintenance Access<\/div>\n          <div class=\"section-subtitle\">How easily maintenance crews can access the pump seal area<\/div>\n        <\/div>\n      <\/div>\n      <div class=\"radio-group\" role=\"radiogroup\" aria-label=\"Maintenance access\">\n        <label class=\"radio-option\">\n          <input type=\"radio\" name=\"maintenance\" value=\"easy\">\n          <div class=\"radio-card\">\n            <div class=\"radio-indicator\"><\/div>\n            <div class=\"radio-text\">\n              <strong>Easy<\/strong>\n              <span>Land-based, open area \u2014 full tool access<\/span>\n            <\/div>\n          <\/div>\n        <\/label>\n        <label class=\"radio-option\">\n          <input type=\"radio\" name=\"maintenance\" value=\"moderate\">\n          <div class=\"radio-card\">\n            <div class=\"radio-indicator\"><\/div>\n            <div class=\"radio-text\">\n              <strong>Moderate<\/strong>\n              <span>Confined space \/ barge-mounted operation<\/span>\n            <\/div>\n          <\/div>\n        <\/label>\n        <label class=\"radio-option\">\n          <input type=\"radio\" name=\"maintenance\" value=\"difficult\">\n          <div class=\"radio-card\">\n            <div class=\"radio-indicator\"><\/div>\n            <div class=\"radio-text\">\n              <strong>Difficult<\/strong>\n              <span>Submerged \/ remote \/ minimal shutdown windows<\/span>\n            <\/div>\n          <\/div>\n        <\/label>\n      <\/div>\n    <\/div>\n\n    <!-- Q4: Operating Hours -->\n    <div class=\"form-section\" id=\"section-3\">\n      <div class=\"section-header\">\n        <div class=\"section-num\">4<\/div>\n        <div>\n          <div class=\"section-title\">Operating Hours per Year<\/div>\n          <div class=\"section-subtitle\">Total annual pump runtime \u2014 impacts lifecycle seal wear calculation<\/div>\n        <\/div>\n      <\/div>\n      <div class=\"dropdown-wrap\">\n        <select name=\"hours\" class=\"select-field\" aria-label=\"Operating hours per year\">\n          <option value=\"\">\u2014 Select annual operating hours \u2014<\/option>\n          <option value=\"low\">&lt;2,000 hrs \/ yr  (seasonal \/ intermittent)<\/option>\n          <option value=\"medium\">2,000 \u2013 4,000 hrs \/ yr  (standard operation)<\/option>\n          <option value=\"high\">4,000 \u2013 6,000 hrs \/ yr  (intensive operation)<\/option>\n          <option value=\"continuous\">&gt;6,000 hrs \/ yr  (near-continuous \/ 24\/7)<\/option>\n        <\/select>\n        <svg class=\"select-arrow\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"square\"><polyline points=\"6 9 12 15 18 9\"\/><\/svg>\n      <\/div>\n    <\/div>\n\n    <!-- Q5: Budget Priority -->\n    <div class=\"form-section\" id=\"section-4\">\n      <div class=\"section-header\">\n        <div class=\"section-num\">5<\/div>\n        <div>\n          <div class=\"section-title\">Budget Priority<\/div>\n          <div class=\"section-subtitle\">Primary cost driver for seal selection decision<\/div>\n        <\/div>\n      <\/div>\n      <div class=\"radio-group\" role=\"radiogroup\" aria-label=\"Budget priority\">\n        <label class=\"radio-option\">\n          <input type=\"radio\" name=\"budget\" value=\"upfront\">\n          <div class=\"radio-card\">\n            <div class=\"radio-indicator\"><\/div>\n            <div class=\"radio-text\">\n              <strong>Lowest Upfront Cost<\/strong>\n              <span>Minimize initial purchase + install spend<\/span>\n            <\/div>\n          <\/div>\n        <\/label>\n        <label class=\"radio-option\">\n          <input type=\"radio\" name=\"budget\" value=\"lifecycle\">\n          <div class=\"radio-card\">\n            <div class=\"radio-indicator\"><\/div>\n            <div class=\"radio-text\">\n              <strong>Lowest Lifecycle Cost<\/strong>\n              <span>Optimize total cost over 3\u20135 year horizon<\/span>\n            <\/div>\n          <\/div>\n        <\/label>\n        <label class=\"radio-option\">\n          <input type=\"radio\" name=\"budget\" value=\"reliability\">\n          <div class=\"radio-card\">\n            <div class=\"radio-indicator\"><\/div>\n            <div class=\"radio-text\">\n              <strong>Maximum Reliability<\/strong>\n              <span>Minimize unplanned downtime at any cost<\/span>\n            <\/div>\n          <\/div>\n        <\/label>\n      <\/div>\n    <\/div>\n\n    <!-- Action Bar -->\n    <div class=\"action-bar\">\n      <button type=\"button\" class=\"btn-primary\" id=\"calc-btn\">Analyze &amp; Recommend Seal<\/button>\n      <button type=\"button\" class=\"btn-secondary\" id=\"reset-btn\">Reset<\/button>\n      <div class=\"missing-hint\" id=\"missing-hint\" role=\"alert\">Please complete all 5 fields above.<\/div>\n    <\/div>\n\n  <\/form>\n\n  <!-- Results -->\n  <div class=\"results-panel\" id=\"results-panel\" role=\"region\" aria-live=\"polite\" aria-label=\"Seal type recommendation\">\n\n    <!-- Criteria summary tags -->\n    <div class=\"criteria-summary\" id=\"criteria-summary\"><\/div>\n\n    <!-- Recommendation Card -->\n    <div class=\"recommendation-card\" id=\"recommendation-card\">\n      <div class=\"rec-label\">BBP Recommended Seal Type<\/div>\n      <div class=\"rec-type\" id=\"rec-type\"><\/div>\n      <div class=\"confidence-badge\" id=\"confidence-badge\">\n        <div class=\"confidence-dot\"><\/div>\n        <span id=\"confidence-text\"><\/span>\n      <\/div>\n      <div class=\"rec-explanation\" id=\"rec-explanation\"><\/div>\n    <\/div>\n\n    <!-- Score Bars -->\n    <div class=\"scores-section\">\n      <div class=\"scores-title\">Suitability Score \u2014 Your Conditions<\/div>\n      <div id=\"score-bars\"><\/div>\n    <\/div>\n\n    <!-- Comparison Table -->\n    <div class=\"comparison-section\">\n      <div class=\"comparison-title\">Criteria Comparison \u2014 All Seal Types<\/div>\n      <table class=\"comp-table\" id=\"comp-table\">\n        <thead>\n          <tr id=\"comp-thead-row\"><\/tr>\n        <\/thead>\n        <tbody id=\"comp-tbody\"><\/tbody>\n      <\/table>\n    <\/div>\n\n    <!-- CTA -->\n    <div class=\"cta-block\">\n      <div class=\"cta-text\">\n        <h3>Ready to Confirm Your Seal Selection?<\/h3>\n        <p>Speak with a BBP applications engineer to validate fit for your exact pump model and duty cycle.<\/p>\n      <\/div>\n      <a href=\"#ct-popup-820\" class=\"btn-cta\" id=\"cta-btn\">Confirm Seal Selection with BBP Engineer<\/a>\n    <\/div>\n\n  <\/div>\n<\/div>\n\n<script>\n(function () {\n  'use strict';\n\n  \/* \u2500\u2500\u2500 Scoring Matrices \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     Each input maps to points [Packing, Mechanical, Combined]\n     Higher = better fit. Max possible = 25 per seal type.\n  \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  var SCORES = {\n    abrasiveness: {\n      low:    [3, 5, 4],\n      medium: [5, 2, 5],\n      high:   [5, 1, 4]\n    },\n    leakage: {\n      acceptable: [5, 3, 4],\n      minimal:    [3, 4, 5],\n      zero:       [0, 5, 3]\n    },\n    maintenance: {\n      easy:       [5, 4, 4],\n      moderate:   [4, 3, 4],\n      difficult:  [3, 1, 3]\n    },\n    hours: {\n      low:        [5, 4, 3],\n      medium:     [4, 4, 4],\n      high:       [3, 3, 5],\n      continuous: [2, 2, 5]\n    },\n    budget: {\n      upfront:    [5, 3, 1],\n      lifecycle:  [3, 4, 5],\n      reliability:[2, 3, 5]\n    }\n  };\n\n  var SEAL_NAMES = ['Packing Seal', 'Mechanical Seal', 'Combined (Packing + Mechanical)'];\n  var SEAL_KEYS  = ['packing', 'mechanical', 'combined'];\n\n  \/* \u2500\u2500\u2500 Comparison Table Criteria \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  var CRITERIA = [\n    {\n      label: 'High-Abrasion Resistance',\n      ratings: {\n        packing:    { dots: 5, label: 'Excellent' },\n        mechanical: { dots: 1, label: 'Poor' },\n        combined:   { dots: 4, label: 'Good' }\n      }\n    },\n    {\n      label: 'Leakage Control',\n      ratings: {\n        packing:    { dots: 2, label: 'Limited' },\n        mechanical: { dots: 5, label: 'Excellent' },\n        combined:   { dots: 4, label: 'Good' }\n      }\n    },\n    {\n      label: 'Ease of Maintenance',\n      ratings: {\n        packing:    { dots: 5, label: 'Excellent' },\n        mechanical: { dots: 3, label: 'Moderate' },\n        combined:   { dots: 3, label: 'Moderate' }\n      }\n    },\n    {\n      label: 'Seal Life \u2014 Intensive Duty',\n      ratings: {\n        packing:    { dots: 3, label: 'Moderate' },\n        mechanical: { dots: 2, label: 'Low' },\n        combined:   { dots: 5, label: 'Excellent' }\n      }\n    },\n    {\n      label: 'Upfront Cost',\n      ratings: {\n        packing:    { dots: 5, label: 'Lowest' },\n        mechanical: { dots: 3, label: 'Moderate' },\n        combined:   { dots: 1, label: 'Highest' }\n      }\n    },\n    {\n      label: 'Lifecycle Cost Efficiency',\n      ratings: {\n        packing:    { dots: 3, label: 'Moderate' },\n        mechanical: { dots: 4, label: 'Good' },\n        combined:   { dots: 5, label: 'Best' }\n      }\n    },\n    {\n      label: 'Reliability \/ Uptime',\n      ratings: {\n        packing:    { dots: 3, label: 'Moderate' },\n        mechanical: { dots: 3, label: 'Moderate' },\n        combined:   { dots: 5, label: 'Highest' }\n      }\n    },\n    {\n      label: 'Suitability \u2014 Difficult Access',\n      ratings: {\n        packing:    { dots: 3, label: 'Moderate' },\n        mechanical: { dots: 1, label: 'Low' },\n        combined:   { dots: 3, label: 'Moderate' }\n      }\n    }\n  ];\n\n  \/* \u2500\u2500\u2500 Explanation Templates \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  var EXPLANATIONS = {\n    packing: function (d) {\n      return 'Packing seals are the optimal choice for your conditions. ' +\n        'Their sacrificial braided rings tolerate abrasive solids that would quickly destroy precision mechanical seal faces. ' +\n        'With ' + d.maintenanceLabel + ' maintenance access, field adjustment and regreasing is straightforward, ' +\n        'and your ' + d.hoursLabel + ' runtime makes the regular packing replacement interval manageable. ' +\n        'The lower upfront and spare-part cost aligns with your budget priority.';\n    },\n    mechanical: function (d) {\n      return 'A mechanical seal is the correct specification for your application. ' +\n        'Your ' + d.abrasiveness + '-abrasion slurry keeps seal face contamination low, ' +\n        'and the leakage tolerance of \"' + d.leakageLabel + '\" demands the near-zero emission capability only a precision mechanical seal delivers. ' +\n        'With ' + d.maintenanceLabel + ' access and ' + d.hoursLabel + ' operating hours, ' +\n        'the lower maintenance frequency of a properly specified mechanical seal offsets its higher initial cost.';\n    },\n    combined: function (d) {\n      return 'The combined packing + mechanical arrangement delivers the best balance for your demanding conditions. ' +\n        'The packing stage acts as a sacrificial primary barrier against your ' + d.abrasiveness + '-abrasion slurry, ' +\n        'while the mechanical seal stage provides the controlled leakage performance your site requires. ' +\n        'For ' + d.hoursLabel + ' annual runtime, the extended replacement interval of the combined system reduces total planned maintenance events, ' +\n        'and the higher initial investment is recovered through reduced downtime and consumable spend.';\n    }\n  };\n\n  var CONFIDENCE_MAP = {\n    strong:     { label: 'Strong Match', cls: 'strong' },\n    good:       { label: 'Good Match',   cls: 'good'   },\n    acceptable: { label: 'Acceptable',   cls: 'acceptable' }\n  };\n\n  \/* \u2500\u2500\u2500 Label Maps for display \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  var LABELS = {\n    abrasiveness: { low: 'Low Abrasiveness', medium: 'Medium Abrasiveness', high: 'High Abrasiveness' },\n    leakage:      { acceptable: 'Some Leakage OK', minimal: 'Minimal Leakage', zero: 'Zero Leakage' },\n    maintenance:  { easy: 'Easy Access', moderate: 'Moderate Access', difficult: 'Difficult Access' },\n    hours:        { low: '<2,000 hrs\/yr', medium: '2,000\u20134,000 hrs\/yr', high: '4,000\u20136,000 hrs\/yr', continuous: '>6,000 hrs\/yr' },\n    budget:       { upfront: 'Lowest Upfront Cost', lifecycle: 'Lowest Lifecycle Cost', reliability: 'Maximum Reliability' }\n  };\n\n  \/* \u2500\u2500\u2500 DOM refs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  var form       = document.getElementById('seal-selector-form');\n  var calcBtn    = document.getElementById('calc-btn');\n  var resetBtn   = document.getElementById('reset-btn');\n  var missingHint= document.getElementById('missing-hint');\n  var resultsPanel= document.getElementById('results-panel');\n  var progressSteps = document.querySelectorAll('#progress-steps .progress-step');\n\n  \/* \u2500\u2500\u2500 Progress update \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  function updateProgress () {\n    var vals = getValues();\n    var completed = [\n      !!vals.abrasiveness,\n      !!vals.leakage,\n      !!vals.maintenance,\n      !!vals.hours,\n      !!vals.budget\n    ];\n    progressSteps.forEach(function (step, i) {\n      step.classList.remove('active', 'done');\n      if (completed[i]) {\n        step.classList.add('done');\n      } else {\n        \/\/ Find first incomplete\n        var allBefore = completed.slice(0, i).every(Boolean);\n        if (allBefore) step.classList.add('active');\n      }\n    });\n    \/\/ Highlight active section\n    var sections = form.querySelectorAll('.form-section');\n    sections.forEach(function (s, i) {\n      s.classList.toggle('active-section', !completed[i]);\n    });\n    \/\/ If all complete \u2014 keep none highlighted\n    if (completed.every(Boolean)) {\n      sections.forEach(function (s) { s.classList.remove('active-section'); });\n    }\n  }\n\n  \/* \u2500\u2500\u2500 Collect values \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  function getValues () {\n    var data = {};\n    data.abrasiveness = (form.querySelector('input[name=\"abrasiveness\"]:checked') || {}).value || '';\n    data.leakage      = (form.querySelector('input[name=\"leakage\"]:checked')      || {}).value || '';\n    data.maintenance  = (form.querySelector('input[name=\"maintenance\"]:checked')  || {}).value || '';\n    data.hours        = form.querySelector('select[name=\"hours\"]').value;\n    data.budget       = (form.querySelector('input[name=\"budget\"]:checked')       || {}).value || '';\n    return data;\n  }\n\n  function isComplete (data) {\n    return data.abrasiveness && data.leakage && data.maintenance && data.hours && data.budget;\n  }\n\n  \/* \u2500\u2500\u2500 Scoring \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  function calcScores (data) {\n    var totals = [0, 0, 0];\n    var fields = ['abrasiveness', 'leakage', 'maintenance', 'hours', 'budget'];\n    fields.forEach(function (field) {\n      var pts = SCORES[field][data[field]];\n      for (var i = 0; i < 3; i++) totals[i] += pts[i];\n    });\n    return totals;  \/\/ max = 25\n  }\n\n  function getConfidence (scores, winnerIdx) {\n    var winnerScore = scores[winnerIdx];\n    var others = scores.filter(function (_, i) { return i !== winnerIdx; });\n    var maxOther = Math.max.apply(null, others);\n    var gap = winnerScore - maxOther;\n    var pct = Math.round((winnerScore \/ 25) * 100);\n    if (gap >= 5 && pct >= 72) return 'strong';\n    if (gap >= 2 && pct >= 60) return 'good';\n    return 'acceptable';\n  }\n\n  \/* \u2500\u2500\u2500 Render dots \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  function renderDots (n, iswinner) {\n    var html = '<div class=\"rating\"><div class=\"rating-dots\">';\n    for (var i = 1; i <= 5; i++) {\n      html += '<div class=\"dot' + (i <= n ? ' filled' : '') + '\"><\/div>';\n    }\n    html += '<\/div><\/div>';\n    return html;\n  }\n\n  \/* \u2500\u2500\u2500 Render Results \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  function renderResults (data) {\n    var scores = calcScores(data);\n    var maxScore = Math.max.apply(null, scores);\n    var winnerIdx = scores.indexOf(maxScore);\n    var winnerKey = SEAL_KEYS[winnerIdx];\n    var confidence = getConfidence(scores, winnerIdx);\n    var confInfo = CONFIDENCE_MAP[confidence];\n\n    \/* Criteria summary tags *\/\n    var summaryEl = document.getElementById('criteria-summary');\n    var fields = ['abrasiveness', 'leakage', 'maintenance', 'hours', 'budget'];\n    var fieldLabels = ['Abrasiveness', 'Leakage', 'Access', 'Hours', 'Budget'];\n    var tagsHTML = '<span class=\"criteria-label\">Your Inputs:<\/span>';\n    fields.forEach(function (f, i) {\n      tagsHTML += '<div class=\"criteria-tag\"><span class=\"criteria-tag-key\">' +\n        fieldLabels[i] + '<\/span> ' + LABELS[f][data[f]] + '<\/div>';\n    });\n    summaryEl.innerHTML = tagsHTML;\n\n    \/* Recommendation card *\/\n    document.getElementById('rec-type').textContent = SEAL_NAMES[winnerIdx];\n\n    var badgeEl = document.getElementById('confidence-badge');\n    badgeEl.className = 'confidence-badge ' + confInfo.cls;\n    document.getElementById('confidence-text').textContent = confInfo.label;\n\n    var expData = {\n      abrasiveness:  data.abrasiveness,\n      leakageLabel:  LABELS.leakage[data.leakage],\n      maintenanceLabel: LABELS.maintenance[data.maintenance].replace(' Access', '').toLowerCase() + ' access',\n      hoursLabel:    LABELS.hours[data.hours]\n    };\n    document.getElementById('rec-explanation').textContent = EXPLANATIONS[winnerKey](expData);\n\n    \/* Score bars *\/\n    var barsHTML = '';\n    scores.forEach(function (score, i) {\n      var pct = Math.round((score \/ 25) * 100);\n      var isWin = (i === winnerIdx);\n      barsHTML += '<div class=\"score-row' + (isWin ? ' winner' : '') + '\">' +\n        '<div class=\"score-name' + (isWin ? ' winner' : '') + '\">' + SEAL_NAMES[i] + '<\/div>' +\n        '<div class=\"score-track\"><div class=\"score-fill\" data-pct=\"' + pct + '\" style=\"width:0%\"><\/div><\/div>' +\n        '<div class=\"score-val\">' + score + '<span style=\"color:var(--neutral-300);font-weight:400\">\/25<\/span><\/div>' +\n        '<\/div>';\n    });\n    document.getElementById('score-bars').innerHTML = barsHTML;\n\n    \/* Comparison table *\/\n    var theadRow = document.getElementById('comp-thead-row');\n    var theadHTML = '<th style=\"min-width:160px\">Criterion<\/th>';\n    SEAL_NAMES.forEach(function (name, i) {\n      theadHTML += '<th class=\"' + (i === winnerIdx ? 'col-winner' : '') + '\">' + name + '<\/th>';\n    });\n    theadRow.innerHTML = theadHTML;\n\n    var tbodyEl = document.getElementById('comp-tbody');\n    var tbodyHTML = '';\n    CRITERIA.forEach(function (row) {\n      tbodyHTML += '<tr><td class=\"criterion\">' + row.label + '<\/td>';\n      SEAL_KEYS.forEach(function (key, ki) {\n        var r = row.ratings[key];\n        tbodyHTML += '<td class=\"' + (ki === winnerIdx ? 'col-winner' : '') + '\">' +\n          renderDots(r.dots, ki === winnerIdx) +\n          '<span style=\"margin-left:8px;font-size:10px\">' + r.label + '<\/span>' +\n          '<\/td>';\n      });\n      tbodyHTML += '<\/tr>';\n    });\n    tbodyEl.innerHTML = tbodyHTML;\n\n    \/* Show results *\/\n    resultsPanel.classList.add('visible');\n    resultsPanel.scrollIntoView({ behavior: 'smooth', block: 'start' });\n\n    \/* Animate score bars after brief paint delay *\/\n    setTimeout(function () {\n      document.querySelectorAll('.score-fill').forEach(function (el) {\n        el.style.width = el.getAttribute('data-pct') + '%';\n      });\n    }, 80);\n\n    \/* Update CTA href *\/\n    document.getElementById('cta-btn').setAttribute('href', '#ct-popup-820');\n  }\n\n  \/* \u2500\u2500\u2500 Events \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  form.addEventListener('change', function () {\n    updateProgress();\n    \/\/ If results are already showing, re-run on any change\n    if (resultsPanel.classList.contains('visible')) {\n      var data = getValues();\n      if (isComplete(data)) renderResults(data);\n    }\n  });\n\n  calcBtn.addEventListener('click', function () {\n    var data = getValues();\n    if (!isComplete(data)) {\n      missingHint.classList.add('visible');\n      \/\/ Scroll to first incomplete section\n      var fields = ['abrasiveness', 'leakage', 'maintenance', 'hours', 'budget'];\n      for (var i = 0; i < fields.length; i++) {\n        if (!data[fields[i]]) {\n          document.getElementById('section-' + i).scrollIntoView({ behavior: 'smooth', block: 'center' });\n          break;\n        }\n      }\n      return;\n    }\n    missingHint.classList.remove('visible');\n    renderResults(data);\n  });\n\n  resetBtn.addEventListener('click', function () {\n    form.reset();\n    missingHint.classList.remove('visible');\n    resultsPanel.classList.remove('visible');\n    updateProgress();\n    document.getElementById('seal-selector-tool').scrollIntoView({ behavior: 'smooth', block: 'start' });\n  });\n\n  \/* \u2500\u2500\u2500 Init \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  updateProgress();\n\n})();\n<\/script>\n<\/body>\n<\/html>\n<\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>BBP Gravel Pump Seal Type Selector BBP Engineering Tool \u2014 Interactive Selector Gravel Pump Seal Type Selection Guide Answer 5 questions about your operating conditions to receive a data-driven seal type recommendation with full scoring breakdown. 1 Abrasive-ness 2 LeakageTolerance 3 MaintenanceAccess 4 OperatingHours 5 BudgetPriority 1 Slurry Abrasiveness Particle size and concentration of solids [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"parent":879,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_gspb_post_css":"","footnotes":""},"class_list":["post-1714","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/bbpmfg.com\/ar\/wp-json\/wp\/v2\/pages\/1714","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bbpmfg.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bbpmfg.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bbpmfg.com\/ar\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/bbpmfg.com\/ar\/wp-json\/wp\/v2\/comments?post=1714"}],"version-history":[{"count":0,"href":"https:\/\/bbpmfg.com\/ar\/wp-json\/wp\/v2\/pages\/1714\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/bbpmfg.com\/ar\/wp-json\/wp\/v2\/pages\/879"}],"wp:attachment":[{"href":"https:\/\/bbpmfg.com\/ar\/wp-json\/wp\/v2\/media?parent=1714"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}