/* TOOLS page selector cards. Markup is stored in the article body (KindEditor whitelist: no style/script/svg). */
.vs-selector { color:#0d1523; font-family:Arial, Helvetica, sans-serif; line-height:1.45; }
.vs-intro { padding:0 0 32px; }
.vs-title { margin:0 0 10px; font-size:clamp(30px,3.6vw,46px); font-weight:700; line-height:1.15; letter-spacing:-.03em; }
.vs-lead { margin:0; color:#68778d; font-size:clamp(16px,1.5vw,20px); line-height:1.45; }

.vs-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid #e5eaf1; }
.vs-card { position:relative; display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); align-items:center; min-height:280px; padding:30px 24px; border-bottom:1px solid #e5eaf1; transition:background .25s ease; }
.vs-card:nth-child(odd) { border-right:1px solid #e5eaf1; }
.vs-card:nth-last-child(-n+2) { border-bottom:0; }
.vs-card:hover, .vs-card:focus-within { background:#f0f7ff; }

.vs-card-title { margin:0 0 14px; font-size:clamp(22px,2.2vw,30px); font-weight:700; line-height:1.2; letter-spacing:-.02em; }
.vs-link, .vs-link:hover { color:inherit; text-decoration:none; }
/* Makes the whole card clickable without wrapping block elements in the anchor. */
.vs-link::after { content:""; position:absolute; top:0; right:0; bottom:0; left:0; z-index:2; }
.vs-desc { max-width:340px; margin:0 0 26px; color:#68778d; font-size:clamp(15px,1.2vw,18px); line-height:1.55; }

.vs-cta { display:inline-flex; align-items:center; color:#2476ff; font-size:clamp(15px,1.25vw,18px); line-height:1.2; white-space:nowrap; }
.vs-cta::before { content:""; flex:none; width:44px; height:44px; margin-right:16px; border:2px solid #2476ff; border-radius:50%; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232476ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16m-7-7 7 7-7 7'/%3E%3C/svg%3E") center / 22px 22px no-repeat; transition:transform .2s ease; }
.vs-card:hover .vs-cta::before { transform:translateX(4px); background-color:#2476ff; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16m-7-7 7 7-7 7'/%3E%3C/svg%3E"); }

.vs-media { display:flex; align-items:center; justify-content:center; min-width:0; height:230px; }
.vs-img { display:block; width:100%; height:100%; object-fit:contain; }

@media (max-width:900px) {
  .vs-card { grid-template-columns:1fr; min-height:0; }
  .vs-media { grid-row:1; height:210px; margin-bottom:14px; }
  .vs-desc { margin-bottom:18px; }
}

@media (max-width:620px) {
  .vs-intro { padding-bottom:22px; }
  .vs-grid { grid-template-columns:1fr; }
  .vs-card { padding:24px 4px; border-right:0 !important; border-bottom:1px solid #e5eaf1; }
  .vs-card:last-child { border-bottom:0; }
  .vs-card:nth-last-child(2) { border-bottom:1px solid #e5eaf1; }
  .vs-cta::before { width:40px; height:40px; }
}

@media (prefers-reduced-motion:reduce) {
  .vs-card, .vs-cta::before { transition:none; }
}