/* ============================================================
   WhichCar Design System  ·  v1.0
   Premium automotive · Dark navy + Emerald + Gold
   Drop-in: <link rel="stylesheet" href="/css/whichcar-ds.css">
   Mobile-first. Tokens + reusable components only.
   No page-structure changes.
   ============================================================ */

/* ---------- 1. DESIGN TOKENS ---------- */
:root {
  /* Brand colors */
  --wc-navy:        #071B34;
  --wc-navy-2:      #0C2A4D;
  --wc-navy-deep:   #04101F;
  --wc-emerald:     #16C784;
  --wc-emerald-dk:  #0E9E68;
  --wc-gold:        #F5B942;
  --wc-gold-dk:     #D99B1F;

  /* Neutrals */
  --wc-ink:         #0E1726;
  --wc-text:        #1A2332;
  --wc-muted:       #64748B;
  --wc-faint:       #94A3B8;
  --wc-line:        #E6E9EF;
  --wc-off:         #F6F8FB;
  --wc-white:       #FFFFFF;

  /* Semantic */
  --wc-good:        #16A34A;
  --wc-warn:        #F59E0B;
  --wc-bad:         #EF4444;

  /* Surfaces (light + dark) */
  --wc-surface:     #FFFFFF;
  --wc-surface-2:   #F6F8FB;
  --wc-surface-dk:  rgba(255,255,255,.04);
  --wc-border:      #E6E9EF;
  --wc-border-dk:   rgba(255,255,255,.10);

  /* Radii */
  --wc-r-sm:  10px;
  --wc-r-md:  16px;
  --wc-r-lg:  24px;   /* primary card radius */
  --wc-r-xl:  32px;
  --wc-r-pill:100px;

  /* Spacing scale (4px base) */
  --wc-s1: 4px;  --wc-s2: 8px;  --wc-s3: 12px; --wc-s4: 16px;
  --wc-s5: 20px; --wc-s6: 24px; --wc-s8: 32px; --wc-s10: 40px;
  --wc-s12: 48px; --wc-s16: 64px;

  /* Premium shadows (layered for depth) */
  --wc-shadow-sm: 0 1px 2px rgba(7,27,52,.06), 0 2px 6px rgba(7,27,52,.04);
  --wc-shadow:    0 4px 12px rgba(7,27,52,.08), 0 2px 4px rgba(7,27,52,.04);
  --wc-shadow-md: 0 10px 28px rgba(7,27,52,.10), 0 4px 10px rgba(7,27,52,.05);
  --wc-shadow-lg: 0 20px 48px rgba(7,27,52,.14), 0 8px 16px rgba(7,27,52,.06);
  --wc-shadow-gold: 0 8px 28px rgba(245,185,66,.28);
  --wc-shadow-emerald: 0 8px 28px rgba(22,199,132,.28);

  /* Typography */
  --wc-font-display: 'Frank Ruhl Libre', serif;
  --wc-font-body:    'Heebo', system-ui, sans-serif;
  --wc-font-mono:    'JetBrains Mono', monospace;

  /* Motion */
  --wc-ease: cubic-bezier(.16,1,.3,1);
  --wc-dur: .25s;
}

/* ---------- 2. TYPOGRAPHY ---------- */
.wc-eyebrow {
  font-family: var(--wc-font-mono);
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--wc-muted);
}
.wc-eyebrow--gold { color: var(--wc-gold-dk); }
.wc-eyebrow--emerald { color: var(--wc-emerald-dk); }

.wc-h1 {
  font-family: var(--wc-font-display);
  font-weight: 900;
  font-size: clamp(28px, 5vw, 52px);
  letter-spacing: -2px;
  line-height: 1.05;
  color: var(--wc-navy);
}
.wc-h2 {
  font-family: var(--wc-font-display);
  font-weight: 900;
  font-size: clamp(22px, 3.5vw, 34px);
  letter-spacing: -1.5px;
  line-height: 1.1;
  color: var(--wc-navy);
}
.wc-h3 {
  font-family: var(--wc-font-display);
  font-weight: 900;
  font-size: clamp(18px, 2.5vw, 22px);
  letter-spacing: -0.5px;
  color: var(--wc-navy);
}
.wc-lead {
  font-size: clamp(14px, 2vw, 17px);
  line-height: 1.7;
  color: var(--wc-muted);
  font-weight: 300;
}
.wc-num {  /* big numeric display (prices, scores) */
  font-family: var(--wc-font-display);
  font-weight: 900;
  letter-spacing: -1.5px;
  line-height: 1;
  color: var(--wc-navy);
}
.wc-num--emerald { color: var(--wc-emerald-dk); }
.wc-num--gold { color: var(--wc-gold-dk); }

/* ---------- 3. CARDS (every card has depth) ---------- */
.wc-card {
  background: var(--wc-surface);
  border: 1px solid var(--wc-border);
  border-radius: var(--wc-r-lg);
  padding: var(--wc-s6);
  box-shadow: var(--wc-shadow);
  transition: transform var(--wc-dur) var(--wc-ease),
              box-shadow var(--wc-dur) var(--wc-ease),
              border-color var(--wc-dur) var(--wc-ease);
}
.wc-card--hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--wc-shadow-lg);
  border-color: #D4DAE4;
}
.wc-card--flush { padding: 0; overflow: hidden; }   /* for cards with edge-to-edge visuals */
.wc-card--dark {
  background: linear-gradient(160deg, var(--wc-navy-deep), var(--wc-navy));
  border-color: var(--wc-border-dk);
  color: var(--wc-white);
  box-shadow: var(--wc-shadow-md);
}
.wc-card--glass {
  background: var(--wc-surface-dk);
  border: 1px solid var(--wc-border-dk);
  border-radius: var(--wc-r-lg);
  padding: var(--wc-s6);
  backdrop-filter: blur(20px);
  color: var(--wc-white);
}
/* Gold/emerald accent top-border (premium ranking feel) */
.wc-card--top-gold { border-top: 3px solid var(--wc-gold); }
.wc-card--top-emerald { border-top: 3px solid var(--wc-emerald); }

/* Card with a brand-gradient visual header */
.wc-card-visual {
  position: relative;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, #070c16, #0f1828);
}
.wc-card-visual__ghost {
  position: absolute;
  font-family: var(--wc-font-display);
  font-weight: 900;
  font-size: clamp(70px, 12vw, 140px);
  letter-spacing: -6px;
  color: rgba(255,255,255,.05);
  white-space: nowrap;
  z-index: 1;
}
.wc-card-visual__svg { position: relative; z-index: 2; width: 70%; opacity: .6; }
.wc-card-visual__overlay {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(0deg, var(--wc-white) 2%, transparent 55%);
}

/* ---------- 4. BUTTONS (consistent) ---------- */
.wc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wc-s2);
  font-family: var(--wc-font-body);
  font-weight: 700;
  font-size: 15px;
  padding: 13px 28px;
  border-radius: var(--wc-r-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--wc-dur) var(--wc-ease),
              box-shadow var(--wc-dur) var(--wc-ease),
              background var(--wc-dur) var(--wc-ease);
  white-space: nowrap;
}
.wc-btn:active { transform: scale(.98); }

.wc-btn--primary {
  background: var(--wc-navy);
  color: var(--wc-white);
}
.wc-btn--primary:hover { background: var(--wc-navy-2); transform: translateY(-2px); box-shadow: var(--wc-shadow-md); }

.wc-btn--emerald {
  background: linear-gradient(135deg, var(--wc-emerald), var(--wc-emerald-dk));
  color: #04221A;
}
.wc-btn--emerald:hover { transform: translateY(-2px); box-shadow: var(--wc-shadow-emerald); }

.wc-btn--gold {
  background: linear-gradient(135deg, var(--wc-gold), var(--wc-gold-dk));
  color: var(--wc-navy);
}
.wc-btn--gold:hover { transform: translateY(-2px); box-shadow: var(--wc-shadow-gold); }

.wc-btn--ghost {
  background: transparent;
  border: 1.5px solid var(--wc-border);
  color: var(--wc-navy);
}
.wc-btn--ghost:hover { border-color: var(--wc-navy); }

.wc-btn--ghost-light {
  background: rgba(255,255,255,.06);
  border: 1px solid var(--wc-border-dk);
  color: var(--wc-white);
}
.wc-btn--ghost-light:hover { background: rgba(255,255,255,.12); }

.wc-btn--block { width: 100%; }
.wc-btn--lg { padding: 17px 36px; font-size: 17px; }
.wc-btn--sm { padding: 9px 20px; font-size: 13px; }
.wc-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- 5. BADGES (consistent) ---------- */
.wc-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--wc-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 4px 12px;
  border-radius: var(--wc-r-pill);
  border: 1px solid transparent;
}
.wc-badge--emerald { background: rgba(22,199,132,.10); color: var(--wc-emerald-dk); border-color: rgba(22,199,132,.30); }
.wc-badge--gold    { background: rgba(245,185,66,.12); color: var(--wc-gold-dk); border-color: rgba(245,185,66,.40); }
.wc-badge--navy    { background: rgba(7,27,52,.06); color: var(--wc-navy); border-color: rgba(7,27,52,.15); }
.wc-badge--blue    { background: rgba(59,130,246,.10); color: #2563EB; border-color: rgba(59,130,246,.30); }
.wc-badge--good    { background: rgba(22,163,74,.10); color: var(--wc-good); border-color: rgba(22,163,74,.30); }
.wc-badge--warn    { background: rgba(245,158,11,.10); color: var(--wc-warn); border-color: rgba(245,158,11,.30); }
.wc-badge--bad     { background: rgba(239,68,68,.10); color: var(--wc-bad); border-color: rgba(239,68,68,.30); }
/* On dark surfaces */
.wc-badge--on-dark { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.20); }

/* ---------- 6. RANKINGS (consistent medals + badges) ---------- */
.wc-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  font-family: var(--wc-font-display);
  font-weight: 900;
  font-size: 18px;
}
.wc-rank--1 { background: linear-gradient(135deg, var(--wc-gold), var(--wc-gold-dk)); color: var(--wc-navy); box-shadow: var(--wc-shadow-gold); }
.wc-rank--2 { background: linear-gradient(135deg, #D8DDE5, #9AA3B2); color: var(--wc-navy); }
.wc-rank--3 { background: linear-gradient(135deg, #E0A372, #B06A2E); color: #fff; }
.wc-rank--default { background: rgba(6,13,26,.7); border: 2px solid var(--wc-gold); color: #fff; }

/* Medal labels for podiums */
.wc-medal {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700;
  padding: 6px 14px; border-radius: var(--wc-r-pill);
}
.wc-medal--gold   { background: rgba(245,185,66,.15); color: var(--wc-gold-dk); }
.wc-medal--silver { background: rgba(154,163,178,.18); color: #5C6776; }
.wc-medal--bronze { background: rgba(176,106,46,.15); color: #8A4F22; }

/* Score ring (SVG-friendly numeric badge) */
.wc-score {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(6,13,26,.85);
  border: 2px solid var(--wc-emerald);
  color: #fff;
}
.wc-score__num { font-family: var(--wc-font-display); font-weight: 900; font-size: 18px; line-height: 1; }
.wc-score__max { font-size: 8px; opacity: .6; }

/* ---------- 7. PROGRESS / METERS (match scores) ---------- */
.wc-meter { display: flex; align-items: center; gap: var(--wc-s3); }
.wc-meter__label { font-size: 12px; color: var(--wc-muted); width: 66px; flex-shrink: 0; }
.wc-meter__track { flex: 1; height: 8px; background: #E6EAF1; border-radius: var(--wc-r-pill); overflow: hidden; }
.wc-meter__fill {
  height: 100%; border-radius: var(--wc-r-pill);
  background: linear-gradient(90deg, var(--wc-emerald), #34D399);
  transition: width 1s var(--wc-ease);
}
.wc-meter__fill--gold { background: linear-gradient(90deg, var(--wc-gold), #FBD34D); }
.wc-meter__fill--blue { background: linear-gradient(90deg, #3B82F6, #60A5FA); }
.wc-meter__pct { font-family: var(--wc-font-mono); font-size: 11px; font-weight: 700; color: var(--wc-navy); width: 24px; flex-shrink: 0; }

/* ---------- 8. STAT TILES ---------- */
.wc-stat { text-align: center; }
.wc-stat__val { font-family: var(--wc-font-display); font-weight: 900; font-size: clamp(22px, 4vw, 40px); letter-spacing: -1.5px; line-height: 1; color: var(--wc-navy); }
.wc-stat__val--gold { color: var(--wc-gold-dk); }
.wc-stat__val--emerald { color: var(--wc-emerald-dk); }
.wc-stat__label { font-family: var(--wc-font-mono); font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--wc-muted); margin-top: 6px; }

/* ---------- 9. LAYOUT HELPERS ---------- */
.wc-container { max-width: 1100px; margin: 0 auto; padding-left: 5%; padding-right: 5%; }
.wc-container--narrow { max-width: 860px; }
.wc-section { padding-top: var(--wc-s12); padding-bottom: var(--wc-s12); }
.wc-grid { display: grid; gap: var(--wc-s4); }
.wc-grid--2 { grid-template-columns: repeat(2, 1fr); }
.wc-grid--3 { grid-template-columns: repeat(3, 1fr); }
.wc-grid--4 { grid-template-columns: repeat(4, 1fr); }
.wc-grid--auto { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.wc-stack { display: flex; flex-direction: column; gap: var(--wc-s4); }
.wc-row { display: flex; align-items: center; gap: var(--wc-s3); flex-wrap: wrap; }
.wc-between { display: flex; align-items: center; justify-content: space-between; gap: var(--wc-s3); flex-wrap: wrap; }

/* ---------- 10. PROS / CONS (consistent) ---------- */
.wc-pro, .wc-con { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.5; padding: 3px 0; }
.wc-pro { color: #166534; }
.wc-pro::before { content: '✓'; color: var(--wc-emerald-dk); font-weight: 700; flex-shrink: 0; }
.wc-con { color: #991B1B; }
.wc-con::before { content: '✕'; color: var(--wc-bad); flex-shrink: 0; }

/* Pill-style insight chips */
.wc-chip {
  font-size: 12px; color: #166534;
  background: #F0FDF4; border: 1px solid #BBF7D0;
  border-radius: var(--wc-r-pill); padding: 3px 10px;
  display: inline-flex; align-items: center; gap: 4px;
}
.wc-chip::before { content: '✓'; color: var(--wc-emerald-dk); font-weight: 700; }

/* ---------- 11. NAV + FOOTER (consistent shells) ---------- */
.wc-nav {
  background: var(--wc-navy);
  height: 60px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 5%;
  position: sticky; top: 0; z-index: 300;
}
.wc-nav__logo { font-family: var(--wc-font-display); font-size: 20px; font-weight: 900; color: #fff; text-decoration: none; }
.wc-nav__logo em { color: var(--wc-gold); font-style: normal; }
.wc-nav__links { display: flex; gap: 18px; align-items: center; }
.wc-nav__links a { font-size: 13px; color: rgba(255,255,255,.6); text-decoration: none; transition: color var(--wc-dur); }
.wc-nav__links a:hover { color: var(--wc-gold); }

.wc-footer { background: var(--wc-navy); padding: var(--wc-s8) 5%; text-align: center; }
.wc-footer__logo { font-family: var(--wc-font-display); font-size: 18px; font-weight: 900; color: #fff; margin-bottom: var(--wc-s3); }
.wc-footer__logo em { color: var(--wc-gold); font-style: normal; }
.wc-footer__links { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.wc-footer__links a { font-size: 13px; color: rgba(255,255,255,.5); text-decoration: none; }

/* ---------- 12. HERO SHELL (dark premium) ---------- */
.wc-hero {
  background: linear-gradient(160deg, var(--wc-navy-deep), var(--wc-navy));
  padding: var(--wc-s16) 5% var(--wc-s10);
  position: relative;
  overflow: hidden;
}
.wc-hero::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--wc-gold), transparent);
}
.wc-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(22,199,132,.07), transparent);
}
.wc-hero__inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; }
.wc-hero .wc-h1 { color: #fff; }
.wc-hero .wc-h1 em { color: var(--wc-gold); font-style: normal; }
.wc-hero .wc-lead { color: rgba(255,255,255,.55); }

/* ---------- 13. UTILITIES ---------- */
.wc-mt-2 { margin-top: var(--wc-s2); } .wc-mt-4 { margin-top: var(--wc-s4); }
.wc-mt-6 { margin-top: var(--wc-s6); } .wc-mt-8 { margin-top: var(--wc-s8); }
.wc-mb-2 { margin-bottom: var(--wc-s2); } .wc-mb-4 { margin-bottom: var(--wc-s4); }
.wc-mb-6 { margin-bottom: var(--wc-s6); } .wc-mb-8 { margin-bottom: var(--wc-s8); }
.wc-text-center { text-align: center; }
.wc-text-muted { color: var(--wc-muted); }
.wc-text-gold { color: var(--wc-gold-dk); }
.wc-text-emerald { color: var(--wc-emerald-dk); }

/* ---------- 14. MOBILE-FIRST RESPONSIVE ---------- */
/* Base styles above are mobile. Stack grids by default on small screens. */
@media (max-width: 768px) {
  .wc-grid--2, .wc-grid--3, .wc-grid--4 { grid-template-columns: 1fr; }
  .wc-nav__links { display: none; }
  .wc-card { padding: var(--wc-s5); }
  .wc-hero { padding-top: var(--wc-s12); padding-bottom: var(--wc-s8); }
}
@media (min-width: 600px) {
  .wc-grid--sm-2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 769px) {
  .wc-grid--md-3 { grid-template-columns: repeat(3, 1fr); }
  .wc-grid--md-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .wc-card, .wc-btn, .wc-meter__fill { transition: none; }
}

/* ============================================================
   WhichCar Design System  ·  v1.1 ADDITIONS
   Comparison cards · Tables · Feature grids · CTA · Pills
   Same rules: wc- prefixed, optional, backward-compatible.
   ============================================================ */

/* ---------- 15. PILLS (filter/toggle chips) ---------- */
.wc-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--wc-font-body);
  font-size: 13px; font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--wc-r-pill);
  border: 1.5px solid var(--wc-border);
  background: var(--wc-white);
  color: var(--wc-navy);
  cursor: pointer;
  transition: all var(--wc-dur) var(--wc-ease);
  white-space: nowrap;
}
.wc-pill:hover { border-color: var(--wc-navy); }
.wc-pill--active { background: var(--wc-navy); color: #fff; border-color: var(--wc-navy); }
.wc-pill--emerald.wc-pill--active { background: var(--wc-emerald-dk); border-color: var(--wc-emerald-dk); color: #fff; }
.wc-pill--gold.wc-pill--active { background: var(--wc-gold-dk); border-color: var(--wc-gold-dk); color: var(--wc-navy); }
.wc-pill-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- 16. COMPARISON CARDS ---------- */
/* Small "winner of category" tiles */
.wc-compare-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--wc-s3); }
.wc-compare {
  background: var(--wc-surface);
  border: 1px solid var(--wc-border);
  border-radius: var(--wc-r-md);
  padding: var(--wc-s4);
  text-align: center;
  box-shadow: var(--wc-shadow-sm);
  transition: transform var(--wc-dur) var(--wc-ease), box-shadow var(--wc-dur) var(--wc-ease);
}
.wc-compare:hover { transform: translateY(-3px); box-shadow: var(--wc-shadow-md); }
.wc-compare__icon { font-size: 22px; margin-bottom: 6px; }
.wc-compare__title { font-size: 11px; color: var(--wc-muted); margin-bottom: 6px; }
.wc-compare__winner { font-family: var(--wc-font-display); font-size: 15px; font-weight: 900; color: var(--wc-navy); line-height: 1.1; }

/* Head-to-head VS card (two vehicles side by side) */
.wc-vs {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: stretch; gap: 0;
  background: var(--wc-surface);
  border: 1px solid var(--wc-border);
  border-radius: var(--wc-r-lg);
  overflow: hidden;
  box-shadow: var(--wc-shadow);
}
.wc-vs__side { padding: var(--wc-s6); text-align: center; }
.wc-vs__side--win { background: linear-gradient(160deg, rgba(22,199,132,.06), transparent); }
.wc-vs__divider {
  display: flex; align-items: center; justify-content: center;
  background: var(--wc-navy); color: var(--wc-gold);
  font-family: var(--wc-font-display); font-weight: 900; font-size: 18px;
  padding: 0 var(--wc-s4); min-width: 56px;
}
.wc-vs__name { font-family: var(--wc-font-display); font-size: 18px; font-weight: 900; color: var(--wc-navy); margin-bottom: var(--wc-s2); }
.wc-vs__metric { font-size: 13px; color: var(--wc-muted); padding: 6px 0; border-bottom: 1px solid var(--wc-line); }
.wc-vs__metric:last-child { border: none; }
.wc-vs__metric b { color: var(--wc-navy); }

/* ---------- 17. TABLES (premium, not spreadsheet) ---------- */
.wc-table-wrap {
  background: var(--wc-surface);
  border: 1px solid var(--wc-border);
  border-radius: var(--wc-r-lg);
  overflow: hidden;
  box-shadow: var(--wc-shadow);
}
.wc-table { width: 100%; border-collapse: collapse; }
.wc-table thead th {
  background: var(--wc-navy);
  color: rgba(255,255,255,.85);
  font-family: var(--wc-font-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 1px; text-transform: uppercase;
  text-align: right;
  padding: 14px 18px;
  position: sticky; top: 0; z-index: 2;
}
.wc-table tbody td { padding: 14px 18px; font-size: 14px; color: var(--wc-text); border-bottom: 1px solid var(--wc-line); }
.wc-table tbody tr { transition: background var(--wc-dur); }
.wc-table tbody tr:nth-child(even) { background: var(--wc-surface-2); }   /* zebra */
.wc-table tbody tr:hover { background: rgba(22,199,132,.05); }
.wc-table tbody tr:last-child td { border-bottom: none; }
.wc-table__strong { font-weight: 700; color: var(--wc-navy); }
.wc-table__num { font-family: var(--wc-font-mono); font-weight: 700; }
.wc-table__num--emerald { color: var(--wc-emerald-dk); }
/* inline mini-bar inside a table cell */
.wc-table-bar { display: flex; align-items: center; gap: 8px; }
.wc-table-bar__track { flex: 1; height: 6px; background: #E6EAF1; border-radius: var(--wc-r-pill); overflow: hidden; min-width: 60px; }
.wc-table-bar__fill { height: 100%; border-radius: var(--wc-r-pill); background: var(--wc-emerald); }

/* ---------- 18. FEATURE GRIDS ---------- */
.wc-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--wc-s4); }
.wc-feature {
  background: var(--wc-surface);
  border: 1px solid var(--wc-border);
  border-radius: var(--wc-r-md);
  padding: var(--wc-s5);
  transition: transform var(--wc-dur) var(--wc-ease), border-color var(--wc-dur) var(--wc-ease), box-shadow var(--wc-dur) var(--wc-ease);
}
.wc-feature:hover { transform: translateY(-2px); border-color: var(--wc-emerald); box-shadow: var(--wc-shadow-md); }
.wc-feature__icon { font-size: 28px; margin-bottom: var(--wc-s3); display: block; }
.wc-feature__title { font-family: var(--wc-font-display); font-size: 16px; font-weight: 900; color: var(--wc-navy); margin-bottom: var(--wc-s2); }
.wc-feature__text { font-size: 13px; color: var(--wc-muted); line-height: 1.6; }
.wc-feature__source { font-family: var(--wc-font-mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--wc-emerald-dk); margin-top: var(--wc-s2); }

/* Big "why different" feature cards (3-up, colored) */
.wc-feature-lg {
  border-radius: var(--wc-r-lg);
  padding: var(--wc-s8) var(--wc-s6);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.wc-feature-lg__icon { font-size: 40px; margin-bottom: var(--wc-s4); display: block; }
.wc-feature-lg__title { font-family: var(--wc-font-display); font-size: 22px; font-weight: 900; letter-spacing: -1px; margin-bottom: var(--wc-s2); }
.wc-feature-lg__text { font-size: 14px; opacity: .85; line-height: 1.6; }
.wc-feature-lg--navy { background: linear-gradient(135deg, var(--wc-navy), var(--wc-navy-2)); }
.wc-feature-lg--emerald { background: linear-gradient(135deg, #0E5A3E, var(--wc-emerald-dk)); }
.wc-feature-lg--gold { background: linear-gradient(135deg, #8A6510, var(--wc-gold-dk)); }
.wc-feature-lg--red { background: linear-gradient(135deg, #7F1D1D, #B91C1C); }

/* ---------- 19. CTA SECTIONS ---------- */
.wc-cta {
  border-radius: var(--wc-r-lg);
  padding: var(--wc-s10) var(--wc-s8);
  text-align: center;
}
.wc-cta--navy { background: linear-gradient(135deg, var(--wc-navy), var(--wc-navy-2)); }
.wc-cta--emerald { background: linear-gradient(135deg, var(--wc-emerald), var(--wc-emerald-dk)); }
.wc-cta__title { font-family: var(--wc-font-display); font-size: clamp(20px, 3vw, 30px); font-weight: 900; color: #fff; margin-bottom: var(--wc-s2); }
.wc-cta__text { font-size: 14px; color: rgba(255,255,255,.6); margin-bottom: var(--wc-s5); }
.wc-cta--emerald .wc-cta__text { color: rgba(255,255,255,.82); }

/* ---------- 20. STAT CARDS (bordered, with icon) ---------- */
.wc-stat-card {
  background: var(--wc-surface);
  border: 1px solid var(--wc-border);
  border-radius: var(--wc-r-md);
  padding: var(--wc-s5);
  box-shadow: var(--wc-shadow-sm);
}
.wc-stat-card--dark { background: var(--wc-surface-dk); border-color: var(--wc-border-dk); }
.wc-stat-card__icon { font-size: 20px; margin-bottom: var(--wc-s2); }
.wc-stat-card__label { font-size: 11px; color: var(--wc-muted); margin-bottom: var(--wc-s2); }
.wc-stat-card--dark .wc-stat-card__label { color: rgba(255,255,255,.45); }
.wc-stat-card__val { font-family: var(--wc-font-display); font-size: 22px; font-weight: 900; letter-spacing: -1px; color: var(--wc-navy); line-height: 1.1; }
.wc-stat-card--dark .wc-stat-card__val { color: var(--wc-gold); }

/* ---------- 21. PODIUM ---------- */
.wc-podium { display: flex; align-items: flex-end; justify-content: center; gap: var(--wc-s3); }
.wc-podium__spot { flex: 1; max-width: 200px; text-align: center; cursor: pointer; transition: transform var(--wc-dur) var(--wc-ease); }
.wc-podium__spot:hover { transform: translateY(-4px); }
.wc-podium__medal { font-size: 32px; margin-bottom: var(--wc-s2); }
.wc-podium__name { font-family: var(--wc-font-display); font-size: 15px; font-weight: 900; color: var(--wc-navy); line-height: 1.1; margin-bottom: var(--wc-s1); }
.wc-podium__bar { border-radius: 10px 10px 0 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 14px; font-family: var(--wc-font-display); font-size: 28px; font-weight: 900; color: #fff; }
.wc-podium__spot:nth-child(1) .wc-podium__bar { background: linear-gradient(180deg, #D8DDE5, #9AA3B2); height: 90px; }
.wc-podium__spot:nth-child(2) .wc-podium__bar { background: linear-gradient(180deg, var(--wc-gold), var(--wc-gold-dk)); height: 120px; }
.wc-podium__spot:nth-child(3) .wc-podium__bar { background: linear-gradient(180deg, #E0A372, #B06A2E); height: 64px; }

/* ---------- 22. v1.1 RESPONSIVE ---------- */
@media (max-width: 768px) {
  .wc-compare-grid { grid-template-columns: 1fr 1fr; }
  .wc-vs { grid-template-columns: 1fr; }
  .wc-vs__divider { min-height: 44px; }
  .wc-table thead th, .wc-table tbody td { padding: 10px 12px; font-size: 12px; }
}

/* ============================================================
   WhichCar Design System  ·  v1.2 — COMPARISON COMPONENTS
   For /vs/ pages. Injected by /js/vs-enhance.js.
   wc- prefixed, backward-compatible.
   ============================================================ */

/* Battle hero */
.wc-cmp-hero{background:linear-gradient(160deg,var(--wc-navy-deep),var(--wc-navy));border-radius:var(--wc-r-lg);padding:32px 24px;position:relative;overflow:hidden;margin-bottom:24px}
.wc-cmp-hero::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--wc-gold),transparent)}
.wc-cmp-hero__grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;position:relative;z-index:1}
@media(max-width:560px){.wc-cmp-hero__grid{grid-template-columns:1fr;gap:12px}}
.wc-cmp-side{text-align:center}
.wc-cmp-side__name{font-family:'Frank Ruhl Libre',serif;font-size:clamp(18px,3vw,26px);font-weight:900;color:#fff;line-height:1.05;margin-bottom:10px}
.wc-cmp-side__ring{width:84px;height:84px;margin:0 auto;position:relative}
.wc-cmp-side__ring svg{transform:rotate(-90deg)}
.wc-cmp-ring-track{fill:none;stroke:rgba(255,255,255,.12);stroke-width:7}
.wc-cmp-ring-fill{fill:none;stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset 1.2s var(--wc-ease)}
.wc-cmp-side__num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Frank Ruhl Libre',serif;font-size:28px;font-weight:900;color:#fff}
.wc-cmp-side--winner .wc-cmp-side__name{color:var(--wc-gold)}
.wc-cmp-side__crown{font-size:13px;font-weight:700;color:var(--wc-gold);margin-top:8px;font-family:'JetBrains Mono',monospace;letter-spacing:1px;min-height:18px}
.wc-cmp-vs{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;background:rgba(229,184,77,.12);border:1.5px solid rgba(229,184,77,.4);font-family:'Frank Ruhl Libre',serif;font-weight:900;font-size:18px;color:var(--wc-gold);margin:0 auto}
.wc-cmp-verdict-bar{margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);text-align:center;position:relative;z-index:1}
.wc-cmp-verdict-bar__winner{font-family:'Frank Ruhl Libre',serif;font-size:18px;font-weight:900;color:#fff;margin-bottom:6px}
.wc-cmp-verdict-bar__winner b{color:var(--wc-gold)}
.wc-cmp-verdict-bar__conf{font-size:13px;color:rgba(255,255,255,.5)}
.wc-cmp-verdict-bar__best{display:inline-block;margin-top:8px;font-size:12px;color:var(--wc-emerald);background:rgba(22,199,132,.1);border:1px solid rgba(22,199,132,.3);border-radius:100px;padding:4px 14px}

/* Score grid (rings/bars per dimension) */
.wc-cmp-scores{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;margin-bottom:24px}
.wc-cmp-score{background:#fff;border:1px solid var(--wc-border);border-radius:var(--wc-r-md);padding:16px;box-shadow:var(--wc-shadow-sm)}
.wc-cmp-score__label{font-size:12px;color:var(--wc-muted);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.wc-cmp-score__bars{display:flex;flex-direction:column;gap:8px}
.wc-cmp-score__row{display:flex;align-items:center;gap:8px}
.wc-cmp-score__car{font-size:11px;width:54px;flex-shrink:0;color:var(--wc-navy);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wc-cmp-score__track{flex:1;height:7px;background:#E6EAF1;border-radius:100px;overflow:hidden}
.wc-cmp-score__fill{height:100%;border-radius:100px;transition:width 1s var(--wc-ease)}
.wc-cmp-score__fill--a{background:linear-gradient(90deg,#3B82F6,#60A5FA)}
.wc-cmp-score__fill--b{background:linear-gradient(90deg,var(--wc-emerald),#34D399)}
.wc-cmp-score__pct{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;color:var(--wc-navy);width:22px;flex-shrink:0}

/* Category battles */
.wc-cmp-battles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:24px}
.wc-cmp-battle{background:#fff;border:1px solid var(--wc-border);border-radius:var(--wc-r-md);padding:16px 18px;box-shadow:var(--wc-shadow-sm);transition:transform .2s var(--wc-ease),box-shadow .2s var(--wc-ease)}
.wc-cmp-battle:hover{transform:translateY(-2px);box-shadow:var(--wc-shadow-md)}
.wc-cmp-battle__cat{font-size:14px;font-weight:700;color:var(--wc-navy);margin-bottom:6px;display:flex;align-items:center;gap:6px}
.wc-cmp-battle__winner{font-size:13px;display:flex;align-items:center;gap:6px}
.wc-cmp-battle__winner--a{color:#2563EB}
.wc-cmp-battle__winner--b{color:var(--wc-emerald-dk)}
.wc-cmp-battle__winner--tie{color:var(--wc-muted)}

/* Winner summary card */
.wc-cmp-winner{background:#fff;border:1px solid var(--wc-border);border-top:3px solid var(--wc-gold);border-radius:var(--wc-r-lg);padding:24px;box-shadow:var(--wc-shadow);margin-bottom:24px}
.wc-cmp-winner__title{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--wc-gold-dk);margin-bottom:8px}
.wc-cmp-winner__name{font-family:'Frank Ruhl Libre',serif;font-size:26px;font-weight:900;color:var(--wc-navy);letter-spacing:-1px;margin-bottom:16px}
.wc-cmp-winner__cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:560px){.wc-cmp-winner__cols{grid-template-columns:1fr}}
.wc-cmp-winner__col h5{font-size:13px;font-weight:700;margin-bottom:10px}
.wc-cmp-winner__col--pro h5{color:var(--wc-emerald-dk)}
.wc-cmp-winner__col--con h5{color:var(--wc-bad)}

/* Buyer profiles */
.wc-cmp-buyers{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}
@media(max-width:560px){.wc-cmp-buyers{grid-template-columns:1fr}}
.wc-cmp-buyer{background:#fff;border:1px solid var(--wc-border);border-radius:var(--wc-r-md);padding:20px;box-shadow:var(--wc-shadow-sm)}
.wc-cmp-buyer__name{font-family:'Frank Ruhl Libre',serif;font-size:17px;font-weight:900;color:var(--wc-navy);margin-bottom:12px}

/* AI verdict */
.wc-cmp-ai{background:linear-gradient(135deg,#f0fdf4,#ecfdf5);border:1px solid #bbf7d0;border-right:3px solid var(--wc-emerald);border-radius:var(--wc-r-md);padding:22px 24px;margin-bottom:24px}
.wc-cmp-ai__label{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:4px;text-transform:uppercase;color:var(--wc-emerald-dk);margin-bottom:10px}
.wc-cmp-ai__text{font-size:15px;line-height:1.8;color:var(--wc-navy)}
.wc-cmp-ai__text b{color:var(--wc-emerald-dk)}

/* ============================================================
   WhichCar DS  ·  v1.3 — MOBILE OVERFLOW GUARD
   Defensive rules so any "showcase" result card (giant ghost
   text + big score over a gradient header) can never bleed off
   a narrow screen. Class-agnostic: targets common patterns.
   wc- guard uses attribute/loose selectors but stays scoped to
   result/showcase contexts to avoid touching unrelated layout.
   ============================================================ */

/* Root-level: never allow horizontal scroll on phones */
@media (max-width: 600px) {
  html, body { overflow-x: clip; max-width: 100%; }

  /* Any element whose class hints at a showcase/result visual header
     must clip its contents and not overflow. */
  [class*="showcase"], [class*="visual"], [class*="card-visual"],
  [class*="result-card"], [class*="rec-card"], [class*="car-card"] {
    overflow: hidden !important;
    max-width: 100% !important;
  }

  /* Oversized "ghost" brand text behind cards — clamp + clip so a long
     name like "Emgrand" cannot push past the viewport. */
  [class*="ghost"] {
    font-size: clamp(40px, 14vw, 64px) !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    pointer-events: none;
  }

  /* Big score numbers in a visual header (e.g. "95%") — keep on-screen. */
  [class*="score-num"], [class*="showcase"] [class*="score"],
  [class*="visual"] [class*="pct"], [class*="visual"] [class*="score"] {
    font-size: clamp(28px, 9vw, 52px) !important;
    max-width: 100% !important;
    word-break: keep-all;
  }
}