/* ==========================================================================
   VYROX Complete Feature List - shared component
   Replaces the legacy border-under-every-row list with a scannable grid.
   Same tokens as vx-demo.css / vx-visuals, so it reads as one system.
   One file, used identically across all app pages for consistency.
   ========================================================================== */

.vx-feats {
  max-width: 1180px;
  margin: 0 auto 48px;
  padding: 0 16px;
  font-family: var(--font-family, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
}

.vx-feats__head { text-align: center; margin: 0 0 28px; }
.vx-feats__eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 600; letter-spacing: .10em; text-transform: uppercase;
  color: var(--vx-accent-deep, #0a58b0); background: var(--vx-accent-soft, rgba(0,113,227,.10));
  border: 1px solid var(--vx-accent-line, rgba(0,113,227,.18));
  border-radius: 980px; padding: 6px 14px; margin-bottom: 12px;
}
.vx-feats__title {
  font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 700; letter-spacing: -.02em;
  color: var(--vx-ink, #0f2740); margin: 0 0 8px; line-height: 1.15;
}
.vx-feats__sub {
  font-size: 16px; line-height: 1.55; color: var(--vx-ink-muted, #587290);
  max-width: 640px; margin: 0 auto;
}

.vx-feats__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 20px;
}
.vx-feats__grid li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--vx-line-soft, rgba(15,39,64,.06));
  border-radius: var(--radius-md, 14px);
  font-size: 15px; line-height: 1.5; color: var(--vx-ink-body, #33506e);
  transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease, border-color .2s ease;
}
.vx-feats__grid li:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(15,39,64,.05));
  border-color: var(--vx-accent-line, rgba(0,113,227,.18));
}
/* Checkmark glyph: a small span.vx-feats__chk placed inside each <li>, styled here
   so every page renders it identically without relying on an icon font. */
.vx-feats__chk {
  flex: 0 0 auto;
  width: 18px; height: 18px; margin-top: 1px;
  border-radius: 50%;
  background: var(--vx-accent-soft, rgba(0,113,227,.10));
  position: relative;
}
.vx-feats__chk::before {
  content: '';
  position: absolute;
  left: 5px; top: 4px;
  width: 4px; height: 8px;
  border-right: 2px solid var(--vx-accent-deep, #0a58b0);
  border-bottom: 2px solid var(--vx-accent-deep, #0a58b0);
  transform: rotate(40deg);
}

@media (max-width: 720px) {
  .vx-feats__grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .vx-feats { padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .vx-feats__grid li { transition-duration: .01ms !important; }
}