/* ============================================================
   kola-comparison.css — cp- Comparison Pages
   KolaTrading · Last updated: May 2026
   Sidebar styles: reused from kola-reviews.css (rv- classes)
   ============================================================ */

/* ── Hero ── */
.cp-hero{background:linear-gradient(135deg,#0D3B6E 0%,#1A5BA8 100%);padding:48px 5% 0;position:relative;overflow:hidden}
.cp-hero-decor{position:absolute;right:-60px;top:-60px;width:300px;height:300px;border-radius:50%;border:1px solid rgba(0,200,150,.1);z-index:1}
.cp-hero-inner{max-width:900px;position:relative;z-index:2}
.cp-breadcrumb{font-family:'DM Sans',sans-serif;font-size:12px;color:rgba(255,255,255,.5);margin-bottom:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cp-breadcrumb a{color:rgba(255,255,255,.5);text-decoration:none}
.cp-breadcrumb a:hover{color:#00C896}
.cp-breadcrumb-sep{color:rgba(255,255,255,.25)}
.cp-hero h1{font-family:'Sora',sans-serif;font-size:30px;font-weight:700;color:#fff;line-height:1.2;letter-spacing:-.02em;margin-bottom:10px}
.cp-hero h1 em{color:#00C896;font-style:normal}
.cp-hero-desc{font-size:14px;color:rgba(255,255,255,.7);line-height:1.65;max-width:640px;margin-bottom:24px}
.cp-hero-meta{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:0}
.cp-hero-meta-item{display:flex;align-items:center;gap:6px;font-size:12px;color:rgba(255,255,255,.6)}
.cp-hero-meta-item strong{color:#fff}

/* ── Brokers Bar ── */
.cp-brokers-bar{background:#fff;border-bottom:1px solid #D9E3EE;padding:0 5%;display:grid;grid-template-columns:1fr auto 1fr}
.cp-broker-col{padding:20px 0;display:flex;align-items:center;gap:14px}
.cp-broker-col.right{justify-content:flex-end;text-align:right}
.cp-broker-logo{width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:'Sora',sans-serif;font-size:14px;font-weight:700;color:#fff;flex-shrink:0}
.cp-broker-name{font-family:'Sora',sans-serif;font-size:16px;font-weight:700;color:#0B1F3A}
.cp-broker-reg{font-size:11px;color:#8A9BB2;margin-top:2px}
.cp-broker-score{font-family:'Sora',sans-serif;font-size:22px;font-weight:700;color:#0B1F3A}
.cp-broker-score span{font-size:11px;color:#8A9BB2;font-family:'DM Sans',sans-serif;font-weight:400}
.cp-broker-stars{color:#F5A623;font-size:12px;letter-spacing:-1px}
.cp-vs-badge{display:flex;align-items:center;justify-content:center}
.cp-vs-circle{width:44px;height:44px;border-radius:50%;background:#0D3B6E;display:flex;align-items:center;justify-content:center;font-family:'Sora',sans-serif;font-size:13px;font-weight:700;color:#fff;border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.1)}

/* ── Jump Nav ── */
.cp-jump-nav{background:#F5F7FA;border-bottom:1px solid #D9E3EE;padding:10px 5%;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cp-jump-label{font-family:'DM Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#8A9BB2;margin-right:4px}
.cp-jump-link{font-size:12px;font-weight:500;color:#1A5BA8;background:#fff;border:1px solid #D9E3EE;padding:4px 12px;border-radius:20px;text-decoration:none;white-space:nowrap;transition:all .15s}
.cp-jump-link:hover{background:#0D3B6E;color:#fff;border-color:#0D3B6E}

/* ── Page Layout ── */
.cp-page { padding: 32px 24px 52px; background: #F5F7FA; }
.cp-layout { display: grid; grid-template-columns: 1fr 320px; gap: 32px; max-width: 100%; margin: 0 auto; }

/* ── Sections ── */
.cp-section{background:#fff;border:1px solid #D9E3EE;border-radius:12px;overflow:hidden;margin-bottom:20px}
.cp-section-head{padding:18px 22px;border-bottom:1px solid #D9E3EE;display:flex;align-items:center;gap:10px}
.cp-section-icon{font-size:18px}
.cp-section-title{font-family:'Sora',sans-serif;font-size:16px;font-weight:600;color:#0B1F3A;letter-spacing:-.01em}
.cp-section-body{padding:20px 22px}
.cp-section-body p{font-size:13px;color:#4A5E78;line-height:1.7;margin-bottom:12px}
.cp-section-body p:last-child{margin-bottom:0}

/* ── Verdict Box ── */
.cp-verdict-box{background:linear-gradient(135deg,rgba(13,59,110,.04),rgba(0,200,150,.04));border:1px solid rgba(0,200,150,.2);border-left:3px solid #00C896;border-radius:10px;padding:18px 20px;margin-bottom:20px}
.cp-verdict-label{font-family:'DM Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#00A578;margin-bottom:8px}
.cp-verdict-text{font-size:14px;color:#0B1F3A;line-height:1.7;font-weight:500}

/* ── Quick Verdict Cards ── */
.cp-quick-verdict{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:4px}
.cp-qv-card{border-radius:9px;padding:16px}
.cp-qv-card.ic{background:#EBF0F7;border:1px solid rgba(124,58,237,.15)}
.cp-qv-card.pp{background:#F0FDF9;border:1px solid rgba(0,200,150,.2)}
.cp-qv-broker{font-family:'Sora',sans-serif;font-size:12px;font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:7px}
.cp-qv-card.ic .cp-qv-broker{color:#7C3AED}
.cp-qv-card.pp .cp-qv-broker{color:#00A578}
.cp-qv-item{font-size:12px;color:#4A5E78;line-height:1.5;margin-bottom:5px;display:flex;align-items:flex-start;gap:6px}
.cp-qv-item:last-child{margin-bottom:0}
.cp-qv-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;margin-top:5px}
.cp-qv-card.ic .cp-qv-dot{background:#7C3AED}
.cp-qv-card.pp .cp-qv-dot{background:#00C896}

/* ── Comparison Table ── */
.cp-compare-table{width:100%;border-collapse:collapse;table-layout:fixed}
.cp-compare-table thead tr{background:#F5F7FA}
.cp-compare-table th{padding:11px 16px;font-family:'DM Mono',monospace;font-size:10px;font-weight:500;color:#8A9BB2;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid #D9E3EE;text-align:left}
.cp-compare-table th:nth-child(2){color:#7C3AED}
.cp-compare-table th:nth-child(3){color:#00A578}
.cp-compare-table td{padding:11px 16px;font-size:13px;color:#4A5E78;border-bottom:1px solid #F5F7FA;vertical-align:middle}
.cp-compare-table tr:last-child td{border-bottom:none}
.cp-compare-table td:first-child{color:#0B1F3A;font-weight:500;font-size:12px}
.cp-compare-table td.val{font-family:'DM Mono',monospace;font-size:12px;font-weight:500;color:#0B1F3A;text-align:center}
.cp-compare-table td.winner{font-family:'DM Mono',monospace;font-size:12px;font-weight:600;color:#00A578;text-align:center;background:rgba(0,200,150,.04)}
.cp-compare-table td.loser{font-family:'DM Mono',monospace;font-size:12px;color:#8A9BB2;text-align:center}

/* ── Scores Grid ── */
.cp-scores-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cp-score-item{background:#F5F7FA;border-radius:9px;padding:14px}
.cp-score-label{font-family:'Sora',sans-serif;font-size:12px;font-weight:600;color:#0B1F3A;margin-bottom:10px}
.cp-score-bars{display:flex;flex-direction:column;gap:6px}
.cp-score-bar-row{display:flex;align-items:center;gap:8px}
.cp-score-bar-name{font-size:10px;color:#8A9BB2;width:22px;text-align:right;flex-shrink:0}
.cp-score-bar-bg{flex:1;height:6px;background:#D9E3EE;border-radius:3px;overflow:hidden}
.cp-score-bar-fill-ic{height:100%;border-radius:3px;background:#7C3AED}
.cp-score-bar-fill-pp{height:100%;border-radius:3px;background:#00C896}
.cp-score-bar-val{font-family:'Sora',sans-serif;font-size:11px;font-weight:700;color:#0B1F3A;width:22px;flex-shrink:0}

/* ── Detail Content ── */
.cp-detail-h3{font-family:'Sora',sans-serif;font-size:14px;font-weight:600;color:#0B1F3A;margin:20px 0 8px}
.cp-detail-h3:first-child{margin-top:0}
.cp-detail-winner{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 10px;border-radius:4px;margin-bottom:10px}
.cp-detail-winner.ic{color:#7C3AED;background:rgba(124,58,237,.1)}
.cp-detail-winner.pp{color:#00A578;background:#E0FBF3}
.cp-detail-winner.tie{color:#8A9BB2;background:#F5F7FA}

/* ── Who Should Choose ── */
.cp-who-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cp-who-card{border-radius:9px;padding:18px}
.cp-who-card.ic{background:#EBF0F7;border:1px solid rgba(124,58,237,.15)}
.cp-who-card.pp{background:#F0FDF9;border:1px solid rgba(0,200,150,.2)}
.cp-who-title{font-family:'Sora',sans-serif;font-size:13px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.cp-who-card.ic .cp-who-title{color:#7C3AED}
.cp-who-card.pp .cp-who-title{color:#00A578}
.cp-who-item{font-size:12px;color:#4A5E78;line-height:1.5;margin-bottom:6px;display:flex;align-items:flex-start;gap:7px}
.cp-who-item:last-child{margin-bottom:0}

/* ── Final Verdict ── */
.cp-final-verdict{background:#0D3B6E;border-radius:12px;padding:28px;margin-bottom:20px}
.cp-fv-label{font-family:'DM Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.5);margin-bottom:10px}
.cp-fv-title{font-family:'Sora',sans-serif;font-size:18px;font-weight:700;color:#fff;margin-bottom:14px}
.cp-fv-text{font-size:13px;color:rgba(255,255,255,.75);line-height:1.7;margin-bottom:20px}
.cp-fv-btns{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cp-fv-btn{display:block;text-align:center;padding:13px;border-radius:9px;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:700;text-decoration:none;transition:all .2s}
.cp-fv-btn.primary{background:#00C896;color:#0D3B6E}
.cp-fv-btn.primary:hover{background:#00A578;color:#0D3B6E}
.cp-fv-btn.secondary{background:rgba(255,255,255,.1);color:#fff;border:.5px solid rgba(255,255,255,.2)}
.cp-fv-btn.secondary:hover{background:rgba(255,255,255,.18)}
.cp-fv-disclaimer{font-size:10px;color:rgba(255,255,255,.3);margin-top:12px;line-height:1.6}

/* ── FAQ ── */
.cp-faq-item{border-bottom:1px solid #F5F7FA;padding:14px 0}
.cp-faq-item:first-child{padding-top:0}
.cp-faq-item:last-child{border-bottom:none;padding-bottom:0}
.cp-faq-q{font-family:'Sora',sans-serif;font-size:13px;font-weight:600;color:#0B1F3A;margin-bottom:7px}
.cp-faq-a{font-size:13px;color:#4A5E78;line-height:1.65}
.cp-faq-a p{margin:0 0 8px}
.cp-faq-a p:last-child{margin-bottom:0}

/* ── Disclaimer ── */
.cp-disclaimer{background:#EBF0F7;border-top:1px solid #D9E3EE;padding:16px 5%}
.cp-disclaimer p{font-size:11px;color:#8A9BB2;line-height:1.65;border-left:2px solid #D9E3EE;padding-left:12px;max-width:900px}

/* ── Responsive: Tablet ≤1024px ── */
@media (max-width:1024px) {
  .cp-layout{grid-template-columns:1fr}
  .cp-sidebar{display:none}
  .cp-quick-verdict,.cp-who-grid,.cp-fv-btns,.cp-scores-grid{grid-template-columns:1fr}
}

/* ── Responsive: Mobile ≤768px ── */
@media (max-width:768px) {
  .cp-hero{padding:28px 16px 24px !important;overflow:hidden !important;box-sizing:border-box !important}
  .cp-hero h1{font-size:22px !important;line-height:1.3 !important;word-break:break-word !important}
  .cp-hero-meta{flex-wrap:wrap !important;gap:6px !important}
  .cp-page{padding-left:14px !important;padding-right:14px !important}
  .cp-brokers-bar{padding:12px 14px !important}
  .cp-broker-name{font-size:13px !important}
  .cp-broker-logo{width:36px !important;height:36px !important;font-size:10px !important}
  .cp-broker-score{font-size:16px !important}
  .cp-broker-reg{font-size:9px !important}
  .cp-jump-nav{overflow-x:auto !important;flex-wrap:nowrap !important;-webkit-overflow-scrolling:touch !important}
  .cp-jump-link{white-space:nowrap !important;flex-shrink:0 !important;font-size:11px !important}
  .cp-section-body{padding:14px !important}
  .cp-final-verdict{padding:20px !important}
  .cp-section table{display:block !important;overflow-x:auto !important;-webkit-overflow-scrolling:touch !important;max-width:100% !important}
  .cp-compare-table{min-width:480px !important}
}
/* ── Comparison Hub Page (cp-hub) ───────────────────────────── */
.cp-hub * { box-sizing: border-box; }
.cp-hub {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 15px; line-height: 1.7; color: #1a2a3a;
  max-width: 1000px; margin: 0 auto;
}

/* ── Intro strip ─────────────────────────────────────────────── */
.cp-intro {
  background: linear-gradient(135deg, #0D3B6E 0%, #1A5BA8 100%);
  border-radius: 14px; padding: 32px 36px; margin-bottom: 28px;
  position: relative; overflow: hidden;
}
.cp-intro::after {
  content: ''; position: absolute; right: -60px; top: -60px;
  width: 260px; height: 260px; border-radius: 50%;
  background: rgba(0,200,150,.07); border: 1px solid rgba(0,200,150,.12);
}
.cp-intro-label {
  font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 10px;
}
.cp-intro h1 {
  font-family: 'Sora', sans-serif; font-size: 28px; font-weight: 700;
  color: #fff; line-height: 1.2; letter-spacing: -.02em; margin: 0 0 12px;
}
.cp-intro h1 em { color: #00C896; font-style: normal; }
.cp-intro-sub {
  font-size: 15px; color: rgba(255,255,255,.72);
  max-width: 560px; line-height: 1.6; margin-bottom: 18px;
}
.cp-intro-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.cp-badge {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  border-radius: 20px; padding: 4px 13px;
  font-size: 11px; color: rgba(255,255,255,.75); font-weight: 500;
}

/* ── Section headers ─────────────────────────────────────────── */
.cp-section-label {
  font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: #00A578; margin-bottom: 6px;
}
.cp-section-h2 {
  font-family: 'Sora', sans-serif; font-size: 20px; font-weight: 700;
  color: #0B1F3A; letter-spacing: -.015em; margin: 0 0 16px;
}

/* ── Comparison cards grid ───────────────────────────────────── */
.cp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
.cp-card {
  background: #fff;
  border: 1px solid #D9E3EE;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  display: block;
  transition: border-color .15s, box-shadow .15s, transform .15s;
  box-shadow: 0 2px 8px rgba(13,59,110,.04);
}
.cp-card:hover {
  border-color: #2E7DD6;
  box-shadow: 0 4px 20px rgba(13,59,110,.1);
  transform: translateY(-2px);
}
.cp-card.featured { border-color: #00C896; border-width: 2px; }
.cp-card-head {
  padding: 18px 20px 14px;
  border-bottom: 1px solid #F0F4FA;
  display: flex; align-items: center; gap: 12px;
}
.cp-vs-logos { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.cp-logo {
  width: 38px; height: 38px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Sora', sans-serif; font-size: 11px; font-weight: 700; color: #fff;
}
.cp-vs-sep {
  font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 700;
  color: #8A9BB2; background: #F5F7FA; border-radius: 4px;
  padding: 2px 5px;
}
.cp-card-title {
  font-family: 'Sora', sans-serif; font-size: 14px; font-weight: 700;
  color: #0B1F3A; line-height: 1.3;
}
.cp-card-tag {
  font-size: 10px; font-weight: 700; padding: 2px 8px;
  border-radius: 3px; display: inline-block; margin-top: 3px;
}
.cp-card-body { padding: 14px 20px 16px; }
.cp-card-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 0; border-bottom: 1px solid #F5F7FA;
  font-size: 12px;
}
.cp-card-row:last-child { border-bottom: none; }
.cp-card-row .lbl { color: #8A9BB2; }
.cp-card-row .val { font-weight: 600; color: #0B1F3A; font-family: 'DM Mono', monospace; font-size: 11px; }
.cp-card-row .val.green { color: #00A578; }
.cp-card-footer {
  padding: 10px 20px;
  background: #F5F7FA;
  border-top: 1px solid #F0F4FA;
  font-size: 12px; font-weight: 700; color: #1A5BA8;
  display: flex; align-items: center; justify-content: space-between;
}
.cp-card.featured .cp-card-footer { background: rgba(0,200,150,.06); color: #00A578; }

/* ── Quick comparison table ──────────────────────────────────── */
.cp-table-wrap {
  background: #fff; border: 1px solid #D9E3EE;
  border-radius: 12px; overflow: hidden; margin-bottom: 32px;
}
.cp-table-head {
  padding: 16px 22px; background: #F5F7FA;
  border-bottom: 1px solid #D9E3EE;
  font-family: 'Sora', sans-serif; font-size: 15px; font-weight: 600; color: #0B1F3A;
}
.cp-table { width: 100%; border-collapse: collapse; font-size: 13px; overflow-x: auto; }
.cp-table thead tr { background: #F5F7FA; }
.cp-table th {
  padding: 10px 16px;
  font-family: 'DM Mono', monospace; font-size: 10px;
  font-weight: 600; color: #8A9BB2; text-transform: uppercase;
  letter-spacing: .07em; border-bottom: 1px solid #D9E3EE;
  text-align: left; white-space: nowrap;
}
.cp-table th:first-child { width: 180px; }
.cp-table td {
  padding: 10px 16px; border-bottom: 1px solid #F5F7FA;
  color: #2A3E54; text-align: left;
}
.cp-table tr:last-child td { border-bottom: none; }
.cp-table tr:nth-child(even) { background: #FAFBFD; }
.cp-table td:first-child { font-weight: 600; color: #0B1F3A; }
.cp-table .best { color: #00A578; font-weight: 700; }
.cp-table .mono { font-family: 'DM Mono', monospace; }

/* ── How we compare ──────────────────────────────────────────── */
.cp-method {
  background: #fff; border: 1px solid #D9E3EE;
  border-radius: 12px; padding: 24px; margin-bottom: 32px;
}
.cp-method-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 16px; }
.cp-method-item {
  background: #F5F7FA; border: 1px solid #E8EFF8;
  border-radius: 10px; padding: 16px;
}
.cp-method-icon { font-size: 22px; margin-bottom: 8px; }
.cp-method-title { font-family: 'Sora', sans-serif; font-size: 13px; font-weight: 700; color: #0B1F3A; margin-bottom: 5px; }
.cp-method-desc { font-size: 12px; color: #4A5E78; line-height: 1.55; margin: 0; }

/* ── Coming soon cards ───────────────────────────────────────── */
.cp-coming-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 32px;
}
.cp-coming-card {
  background: #F5F7FA; border: 1px dashed #D9E3EE;
  border-radius: 10px; padding: 16px; text-align: center;
}
.cp-coming-logos { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 8px; }
.cp-coming-title { font-size: 12px; font-weight: 600; color: #4A5E78; margin-bottom: 4px; }
.cp-coming-tag { font-size: 10px; color: #8A9BB2; }

/* ── CTA ─────────────────────────────────────────────────────── */
.cp-cta {
  background: linear-gradient(135deg, #0D3B6E, #1A5BA8);
  border-radius: 14px; padding: 28px 32px; margin-bottom: 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.cp-cta h3 { font-family: 'Sora', sans-serif; font-size: 18px; font-weight: 700; color: #fff; margin: 0 0 6px; }
.cp-cta p  { color: rgba(255,255,255,.7); font-size: 13px; margin: 0; line-height: 1.55; }
.cp-cta-btns { display: flex; gap: 10px; flex-wrap: wrap; flex-shrink: 0; }
.cp-btn-green {
  background: #00C896; color: #0D3B6E; font-weight: 700; font-size: 13px;
  padding: 10px 20px; border-radius: 8px; text-decoration: none; white-space: nowrap;
}
.cp-btn-green:hover { background: #00A578; color: #0D3B6E; }
.cp-btn-ghost {
  background: rgba(255,255,255,.1); color: #fff; font-weight: 600; font-size: 13px;
  padding: 10px 18px; border-radius: 8px; border: 1px solid rgba(255,255,255,.22);
  text-decoration: none; white-space: nowrap;
}
.cp-btn-ghost:hover { background: rgba(255,255,255,.18); }

/* ── Disclaimer ──────────────────────────────────────────────── */
.cp-disclaimer {
  background: #F5F7FA; border: 1px solid #D9E3EE; border-radius: 10px;
  padding: 14px 18px; font-size: 11.5px; color: #8A9BB2; line-height: 1.65;
}
.cp-disclaimer a { color: #8A9BB2; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .cp-grid { grid-template-columns: 1fr; }
  .cp-method-grid { grid-template-columns: 1fr; }
  .cp-coming-grid { grid-template-columns: repeat(2,1fr); }
  .cp-cta { flex-direction: column; }
  .cp-intro h1 { font-size: 22px; }
}
@media (max-width: 480px) {
  .cp-coming-grid { grid-template-columns: 1fr; }
}