:root{
  --red:#BF1B3E;--navy:#151C48;--blue:#2D86CE;--teal:#19ACC0;
  --gray:#575756;--red-l:#f7e6ea;--nav-l:#e8eaf2;--blu-l:#e6f2fb;
  --bg:#f3f4f8;--surf:#fff;--bord:#e2e4ea;
  --text:#111827;--muted:#575756;--hint:#9ca3af;
  --font:'Poppins',sans-serif;--r:8px;--rl:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:13px;min-height:100vh}

/* ── TOPBAR ─────────────────────────────────────────── */
.topbar{background:var(--navy);height:58px;display:flex;align-items:center;padding:0 28px;gap:0;position:sticky;top:0;z-index:100}
.logo-clm{font-size:24px;font-weight:800;color:var(--red);letter-spacing:-1px}
.logo-vad{font-size:9px;font-weight:500;color:rgba(255,255,255,.4);letter-spacing:.1em;text-transform:uppercase;margin-left:9px;padding-left:9px;border-left:1px solid rgba(255,255,255,.15)}
.t-sep{width:1px;height:20px;background:rgba(255,255,255,.12);margin:0 16px}
.t-title{font-size:13px;font-weight:500;color:rgba(255,255,255,.8)}
.t-chip{background:var(--red);color:#fff;font-size:10px;font-weight:700;padding:3px 9px;border-radius:3px;letter-spacing:.05em;text-transform:uppercase;margin-left:auto}

/* ── HERO ────────────────────────────────────────────── */
.hero{background:var(--navy);padding:48px 44px 40px;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-80px;right:-80px;width:360px;height:360px;border-radius:50%;border:70px solid rgba(191,27,62,.1);pointer-events:none}
.hero::after{content:'';position:absolute;bottom:-60px;right:120px;width:200px;height:200px;border-radius:50%;border:40px solid rgba(45,134,206,.08);pointer-events:none}
.hero-eye{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:10px}
.hero-title{font-size:32px;font-weight:800;color:#fff;line-height:1.15;margin-bottom:10px}
.hero-title span{color:var(--red)}
.hero-sub{font-size:14px;color:rgba(255,255,255,.5);max-width:560px;line-height:1.7}

/* ── MAIN LAYOUT ─────────────────────────────────────── */
.main{display:grid;grid-template-columns:320px 1fr;min-height:calc(100vh - 58px)}

/* ── LEFT PANEL — filters ────────────────────────────── */
.filters{background:var(--surf);border-right:1px solid var(--bord);padding:24px 20px;overflow-y:auto}
.filter-section{margin-bottom:24px}
.filter-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:12px;display:block}
.search-box{width:100%;padding:9px 12px;border:1.5px solid var(--bord);border-radius:var(--r);font-size:13px;font-family:var(--font);background:var(--bg);color:var(--text)}
.search-box:focus{outline:none;border-color:var(--red);background:#fff}
.filter-chips{display:flex;flex-wrap:wrap;gap:6px}
.f-chip{font-size:11px;font-weight:600;padding:5px 11px;border-radius:20px;border:1.5px solid var(--bord);cursor:pointer;background:var(--surf);color:var(--muted);transition:all .15s;user-select:none}
.f-chip:hover{border-color:var(--red);color:var(--red)}
.f-chip.active{background:var(--red);border-color:var(--red);color:#fff}
.clear-btn{font-size:11px;color:var(--hint);cursor:pointer;text-decoration:underline;margin-top:8px;display:inline-block}
.clear-btn:hover{color:var(--red)}
.divider{height:1px;background:var(--bord);margin:20px 0}

/* challenge chips */
.challenge-list{display:flex;flex-direction:column;gap:6px;max-height:320px;overflow-y:auto}
.c-chip{display:flex;align-items:flex-start;gap:8px;padding:9px 11px;border:1.5px solid var(--bord);border-radius:var(--r);cursor:pointer;background:var(--surf);transition:all .15s}
.c-chip:hover{border-color:var(--blue);background:var(--blu-l)}
.c-chip.active{border-color:var(--red);background:var(--red-l)}
.c-chip-dot{width:7px;height:7px;border-radius:50%;background:var(--bord);margin-top:4px;flex-shrink:0;transition:background .15s}
.c-chip.active .c-chip-dot{background:var(--red)}
.c-chip-text{font-size:12px;font-weight:500;color:var(--text);line-height:1.4}
.c-chip.active .c-chip-text{color:var(--red)}

/* ── RIGHT PANEL — results ───────────────────────────── */
.results{padding:28px 32px;overflow-y:auto}
.results-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.results-count{font-size:13px;color:var(--muted)}
.results-count strong{color:var(--navy);font-weight:700}
.sort-row{display:flex;gap:6px}
.sort-btn{font-size:11px;font-weight:600;padding:5px 12px;border-radius:20px;border:1.5px solid var(--bord);cursor:pointer;background:var(--surf);color:var(--muted);transition:all .15s}
.sort-btn.active{background:var(--navy);border-color:var(--navy);color:#fff}

/* ── SOLUTION CARDS ──────────────────────────────────── */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.sol-card{background:var(--surf);border:1.5px solid var(--bord);border-radius:var(--rl);padding:20px;transition:all .2s;cursor:pointer}
.sol-card:hover{border-color:var(--red);transform:translateY(-2px);box-shadow:0 6px 20px rgba(191,27,62,.1)}
.sol-card.highlight{border-color:var(--red);background:#fdf8f9}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:10px}
.card-acronym{font-size:10px;font-weight:800;padding:3px 8px;border-radius:4px;text-transform:uppercase;letter-spacing:.04em;background:var(--nav-l);color:var(--navy);white-space:nowrap;flex-shrink:0}
.card-title{font-size:14px;font-weight:700;color:var(--navy);line-height:1.3;flex:1}
.card-desc{font-size:12px;color:var(--hint);line-height:1.6;margin-bottom:14px}
.card-vendors{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
.vendor-badge{font-size:10px;font-weight:700;padding:3px 9px;border-radius:4px;background:var(--bg);border:1px solid var(--bord);color:var(--navy);cursor:pointer;transition:all .15s}
.vendor-badge:hover{background:var(--nav-l);border-color:var(--navy)}
.vendor-badge.sel{background:var(--navy);color:#fff;border-color:var(--navy)}
.card-footer{display:flex;align-items:center;justify-content:space-between}
.challenge-tags{display:flex;flex-wrap:wrap;gap:5px}
.c-tag{font-size:9px;font-weight:600;padding:2px 7px;border-radius:10px;background:var(--red-l);color:var(--red);text-transform:uppercase;letter-spacing:.04em}
.match-score{font-size:10px;font-weight:700;color:var(--teal)}

/* ── VENDOR MODAL ────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(17,24,39,.55);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(2px)}
.modal-box{background:var(--surf);border-radius:var(--rl);width:100%;max-width:780px;max-height:88vh;overflow-y:auto;box-shadow:0 24px 64px rgba(0,0,0,.2)}
.modal-banner{background:var(--navy);padding:24px 28px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.modal-vendor-name{font-size:22px;font-weight:800;color:#fff;margin-bottom:4px}
.modal-vendor-sub{font-size:12px;color:rgba(255,255,255,.5)}
.modal-close{width:30px;height:30px;border-radius:6px;border:1px solid rgba(255,255,255,.2);background:transparent;cursor:pointer;color:rgba(255,255,255,.6);font-size:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.modal-close:hover{background:rgba(255,255,255,.1);color:#fff}
.modal-body{padding:24px 28px}
.modal-section{margin-bottom:20px}
.modal-section-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--hint);margin-bottom:10px}
.sol-pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;padding:6px 12px;border-radius:6px;background:var(--bg);border:1px solid var(--bord);margin:4px 4px 0 0;cursor:pointer;transition:all .15s}
.sol-pill:hover{background:var(--red-l);border-color:var(--red);color:var(--red)}
.sol-pill-dot{width:6px;height:6px;border-radius:50%}

/* ── EMPTY STATE ─────────────────────────────────────── */
.empty{text-align:center;padding:60px 24px;grid-column:1/-1}
.empty-icon{font-size:40px;color:var(--bord);margin-bottom:12px}
.empty-title{font-size:15px;font-weight:600;color:var(--muted);margin-bottom:5px}
.empty-sub{font-size:13px;color:var(--hint)}

/* ── RESULT ACTIONS ──────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--r);font-size:12px;font-family:var(--font);font-weight:600;cursor:pointer;border:1.5px solid transparent;transition:all .18s}
.btn-red{background:var(--red);color:#fff;border-color:var(--red)}.btn-red:hover{background:#a01535}
.btn-outline{background:transparent;color:var(--navy);border-color:var(--bord)}.btn-outline:hover{border-color:var(--navy);background:var(--nav-l)}
.btn-sm{padding:5px 12px;font-size:11px}

/* ── Quiz ──────────────────────────────────────────────────────────────── */
.quiz-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;
  background:var(--red);color:#fff;border:none;border-radius:var(--r);
  font-size:13px;font-weight:700;font-family:var(--font);cursor:pointer;
  transition:all .18s;margin-top:18px}
.quiz-btn:hover{background:#a01535}
.quiz-overlay{display:none;position:fixed;inset:0;background:rgba(10,12,30,.72);
  z-index:200;align-items:center;justify-content:center;padding:16px}
.quiz-overlay.open{display:flex}
.quiz-box{background:var(--surf);border-radius:16px;width:100%;max-width:560px;
  max-height:90vh;overflow-y:auto;box-shadow:0 24px 64px rgba(0,0,0,.32)}
.quiz-header{background:var(--navy);border-radius:16px 16px 0 0;
  padding:22px 24px 18px;display:flex;align-items:flex-start;justify-content:space-between}
.quiz-header-title{font-size:18px;font-weight:800;color:#fff}
.quiz-header-sub{font-size:12px;color:rgba(255,255,255,.5);margin-top:3px}
.quiz-close{background:none;border:none;color:rgba(255,255,255,.6);
  font-size:20px;cursor:pointer;line-height:1;padding:2px 6px}
.quiz-close:hover{color:#fff}
.quiz-body{padding:24px}
.quiz-progress{display:flex;gap:4px;margin-bottom:20px}
.quiz-progress-dot{flex:1;height:4px;border-radius:2px;background:var(--bord);transition:background .3s}
.quiz-progress-dot.done{background:var(--red)}
.quiz-progress-dot.active{background:var(--navy)}
.quiz-lang{display:flex;gap:10px;justify-content:center;margin-bottom:28px}
.quiz-lang-btn{padding:10px 28px;border-radius:8px;border:2px solid var(--bord);
  background:var(--bg);font-size:15px;font-weight:700;cursor:pointer;
  font-family:var(--font);color:var(--navy);transition:all .18s}
.quiz-lang-btn:hover{border-color:var(--red);background:var(--red-l)}
.quiz-q{font-size:15px;font-weight:700;color:var(--navy);margin-bottom:16px;line-height:1.4}
.quiz-q-sub{font-size:12px;color:var(--muted);margin-top:-10px;margin-bottom:14px}
.quiz-options{display:flex;flex-direction:column;gap:8px}
.quiz-opt{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;
  border:1.5px solid var(--bord);border-radius:var(--r);cursor:pointer;
  background:var(--bg);transition:all .18s;text-align:left}
.quiz-opt:hover{border-color:var(--navy);background:var(--nav-l)}
.quiz-opt.selected{border-color:var(--red);background:var(--red-l)}
.quiz-opt-icon{font-size:18px;flex-shrink:0;margin-top:1px}
.quiz-opt-text{font-size:13px;font-weight:600;color:var(--navy);line-height:1.3}
.quiz-opt-sub{font-size:11px;color:var(--muted);margin-top:2px;font-weight:400}
.quiz-nav{display:flex;justify-content:space-between;align-items:center;margin-top:20px}
.quiz-nav-btn{padding:9px 20px;border-radius:var(--r);font-size:13px;font-weight:700;
  font-family:var(--font);cursor:pointer;border:1.5px solid var(--bord);
  background:var(--surf);color:var(--navy);transition:all .18s}
.quiz-nav-btn:hover{border-color:var(--navy)}
.quiz-nav-btn.primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.quiz-nav-btn.primary:hover{background:#0d1230}
.quiz-nav-btn:disabled{opacity:.4;cursor:not-allowed}
.quiz-result-title{font-size:16px;font-weight:800;color:var(--navy);margin-bottom:4px}
.quiz-result-sub{font-size:12px;color:var(--muted);margin-bottom:20px}
.quiz-rec-card{border:1.5px solid var(--bord);border-radius:var(--r);
  padding:14px 16px;margin-bottom:10px;background:var(--bg);
  display:flex;align-items:flex-start;gap:12px}
.quiz-rec-rank{width:26px;height:26px;border-radius:50%;background:var(--navy);
  color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;
  justify-content:center;flex-shrink:0;margin-top:1px}
.quiz-rec-rank.gold{background:var(--red)}
.quiz-rec-body{flex:1}
.quiz-rec-vendor{font-size:14px;font-weight:800;color:var(--navy)}
.quiz-rec-solution{font-size:11px;font-weight:700;color:var(--red);
  text-transform:uppercase;letter-spacing:.06em;margin:2px 0}
.quiz-rec-desc{font-size:12px;color:var(--muted);line-height:1.5}
.quiz-restart{width:100%;margin-top:16px;padding:10px;border-radius:var(--r);
  border:1.5px solid var(--bord);background:transparent;font-size:13px;
  font-weight:700;font-family:var(--font);cursor:pointer;color:var(--muted)}
.quiz-restart:hover{border-color:var(--navy);color:var(--navy)}

/* Isolate Vendor Finder styles — prevent leaking into Divi footer */
#main-footer { background-color: #222222 !important; }
#footer-bottom { background-color: rgba(0,0,0,0.32) !important; }

/* Fix footer color to match CLM brand */
#main-footer, #footer-widgets { background-color: #BF1B3E !important; }