.vs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    position: relative;
  }
  .vs-grid::before {
    content: 'VS';
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 22px;
    color: rgba(255,255,255,0.4);
    letter-spacing: 0.08em;
    background: rgba(8,8,8,0.75);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 10px 28px -10px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
    padding: 10px 18px;
    border-radius: 999px;
    z-index: 3;
    pointer-events: none;
  }
  .vs-card {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    background: #0A0A0A;
    border: 1px solid rgba(255,255,255,0.07);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    padding: 28px 28px 24px;
    display: flex; flex-direction: column; gap: 18px;
  }
  .vs-card::before {
    content: '';
    position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background: radial-gradient(ellipse 60% 55% at 100% 0%, var(--vs-tint, rgba(255,255,255,0.08)), transparent 70%);
    opacity: 0.5;
  }
  .vs-card > * { position: relative; z-index: 1; }
  .vs-card.red  { --vs-tint: rgba(255,107,107,0.14); }
  .vs-card.green{ --vs-tint: rgba(74,222,128,0.12); }
  .vs-head { display: flex; align-items: center; gap: 12px; }
  .vs-chip {
    width: 38px; height: 38px; border-radius: 10px;
    display: grid; place-items: center;
    font-size: 19px; line-height: 1;
    flex-shrink: 0;
  }
  .vs-card.red .vs-chip {
    background: rgba(255,107,107,0.12);
    border: 1px solid rgba(255,107,107,0.32);
    color: #ff8a8a;
  }
  .vs-card.green .vs-chip {
    background: rgba(74,222,128,0.12);
    border: 1px solid rgba(74,222,128,0.32);
    color: #5eeaa0;
  }
  .vs-title {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  }
  .vs-card.red .vs-title { color: #ff8a8a; }
  .vs-card.green .vs-title { color: #5eeaa0; }
  .vs-headline {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 22px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.25;
    color: var(--fg);
    margin: 0;
  }
  .vs-headline em {
    font-family: 'Playfair Display', serif; font-style: italic; font-weight: 500;
  }
  .vs-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .vs-item {
    display: grid; grid-template-columns: 22px 1fr auto; gap: 12px;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 13.5px; color: var(--fg-dim);
  }
  .vs-item:last-child { border-bottom: none; }
  .vs-item .i { width: 18px; height: 18px; border-radius: 99px; display: grid; place-items: center; flex-shrink: 0; }
  .vs-card.red .vs-item .i {
    background: rgba(255,107,107,0.12);
    color: #ff7c7c;
  }
  .vs-card.green .vs-item .i {
    background: rgba(74,222,128,0.14);
    color: #5eeaa0;
  }
  .vs-item .i svg { width: 11px; height: 11px; display: block; }
  .vs-item .label { color: var(--fg-dim); }
  /* real brand marks on rows that name tools */
  .vs-logos { display: inline-flex; gap: 4px; vertical-align: -3px; margin-left: 6px; }
  .vs-logos img { width: 15px; height: 15px; border-radius: 4px; display: block;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.10); }
  .vs-card.red .vs-logos img { filter: grayscale(0.55) brightness(0.9); opacity: 0.85; }
  .vs-item .cost {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--fg-mute);
    text-align: right;
  }
  .vs-card.red .vs-item .cost { color: #ff9f9f; }
  .vs-card.green .vs-item .cost { color: #8df0b5; }
  .vs-total {
    margin-top: 6px;
    display: flex; justify-content: space-between; align-items: baseline;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  .vs-total .k {
    font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--fg-mute); font-weight: 500;
  }
  .vs-total .v {
    font-family: 'Playfair Display', serif; font-style: italic; font-weight: 500;
    font-size: 30px; letter-spacing: -0.02em; line-height: 1;
  }
  .vs-card.red .vs-total .v {
    background: linear-gradient(100deg, #ff9f9f 0%, #ff6b6b 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .vs-card.green .vs-total .v {
    background: linear-gradient(100deg, #8df0b5 0%, #4ade80 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .vs-cta {
    margin-top: 6px;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 18px; border-radius: 999px;
    background: linear-gradient(135deg, #BF5AF2 0%, #8B3DF5 100%);
    color: #fff; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13.5px;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 6px 18px -6px rgba(139,61,245,0.5);
    align-self: flex-start;
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .vs-cta:hover { transform: translateY(-1px); }
  @media (max-width: 820px) {
    .vs-grid { grid-template-columns: 1fr; }
    .vs-grid::before { left: 50%; top: 50%; }
  }