/* Magnetic Signs — page-specific touches */
.vs-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.vs-card { background: white; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; }
.vs-card.win-mag { border-top: 4px solid var(--blue); }
.vs-card.win-wrap { border-top: 4px solid var(--navy); }
.vs-card h3 { font-size: 1.25rem; margin-bottom: 1rem; display:flex; align-items:center; gap:0.6rem; }
.vs-card h3 .vs-dot { display:inline-block; width:10px; height:10px; border-radius:50%; }
.vs-card.win-mag h3 .vs-dot { background: var(--blue); }
.vs-card.win-wrap h3 .vs-dot { background: var(--navy); }
.vs-card .feature-list { margin: 0; padding: 0; list-style:none; }
.vs-card .feature-list li { display:flex; gap:0.65rem; padding: 0.55rem 0; align-items:flex-start; font-size: 0.95rem; line-height: 1.55; color: var(--text-2); border-bottom: 1px dashed var(--border-soft); }
.vs-card .feature-list li:last-child { border-bottom: none; }
.vs-card .feature-list svg { flex-shrink:0; margin-top: 3px; }
.vs-footer { background: var(--bg-alt); padding: 1.5rem; border-radius: var(--radius); margin-top: 1.5rem; text-align:center; }
.vs-footer p { color: var(--text-2); font-size: 0.98rem; }

.compat-grid { display:grid; grid-template-columns: 2fr 1fr 2fr; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow:hidden; background: white; }
.compat-h { background: var(--navy); color: white; padding: 0.95rem 1.25rem; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.04em; text-transform: uppercase; }
.compat-row { padding: 0.9rem 1.25rem; border-top: 1px solid var(--border); display:flex; align-items:center; gap: 0.6rem; font-size: 0.95rem; color: var(--text-2); }
.compat-row.alt { background: var(--bg-alt); }
.compat-row .ok { color: #047857; font-weight:700; }
.compat-row .no { color: #B91C1C; font-weight:700; }
.compat-note { background: rgba(14,165,233,.06); border: 1px solid rgba(14,165,233,.18); border-radius: var(--radius); padding: 1rem 1.25rem; margin-top: 1.5rem; font-size: 0.95rem; color: var(--text-2); }
.compat-note strong { color: var(--navy); }

@media (max-width: 760px) {
  .vs-grid { grid-template-columns: 1fr; }
  .compat-grid { grid-template-columns: 1fr; }
}