/* Homepage feature grid: 3 columns with the model-finder card in the middle.
 * Loaded only by index.php via $extra_css; site.css is untouched. */
.feature-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.feature-card--finder {
  background: #FCFAF5;
  border: 1.5px solid var(--teal);
  box-shadow: 0 1px 2px rgba(20, 32, 30, 0.05), 0 10px 26px rgba(20, 32, 30, 0.07);
  transition: transform .15s, box-shadow .15s;
}
.feature-card--finder:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(20, 32, 30, 0.07), 0 16px 34px rgba(20, 32, 30, 0.12); }
.feature-card--finder:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.feature-card--finder .feature-card__eyebrow { color: var(--teal); }
.feature-card--finder .feature-card__cta { color: var(--teal); }

/* Mini fit-bar visual, sized to sit where the hardware card shows its photo. */
.feature-card__viz {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 11px;
  height: 140px;
  margin-bottom: 18px;
  padding: 0 18px;
  border-radius: 10px;
  background: linear-gradient(135deg, #175A5E 0%, #0D3B3E 100%);
}
.finder-viz__bar { position: relative; height: 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); }
.finder-viz__bar::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 999px; background: #8FD6CF; }
.finder-viz__bar--tight::after { background: #E3B04B; }
.finder-viz__bar--over::after { background: #E0805A; background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0 4px, rgba(255, 255, 255, 0) 4px 8px); }
.finder-viz__limit { position: absolute; top: 14px; bottom: 14px; left: calc(18px + (100% - 36px) * 0.68); width: 2px; background: rgba(255, 255, 255, 0.75); border-radius: 1px; }

@media (max-width: 960px) {
  .feature-grid--three { grid-template-columns: 1fr; }
}