/* ============================================================================
   FEATURE GRID COMPONENT (lp-bento / lp-feature) — shared by the About page
   ("What we believe") and the Pricing page ("Pricing you can trust").

   Authored as a standalone component because the homepage redesign removed the
   bento/feature rules from landing.css; these two secondary "values" bands
   still rely on them. Every value references the shared monochrome tokens
   (foundation/tokens.css): hairline borders and surface depth, one ink accent,
   no gradients, no colored left-borders.
   ========================================================================= */

.lp-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.lp-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.6vw, 30px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  transition:
    border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out);
}

.lp-feature:hover {
  border-color: var(--color-border-strong, var(--color-border));
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Icon badge — bordered, monochrome (never a colored left-border tell) */
.lp-feature__icon {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
  color: var(--color-text);
  flex-shrink: 0;
}

.lp-feature__icon svg {
  width: 21px;
  height: 21px;
}

.lp-feature__title {
  margin: 0;
}

.lp-feature__body {
  margin: var(--space-3) 0 0;
  max-width: 46ch;
  color: var(--color-text-soft);
  font-size: var(--text-sm);
  line-height: 1.7;
}

/* ── Responsive: fan out to three tracks at the tablet breakpoint ────────── */
@media (min-width: 720px) {
  .lp-bento {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-feature {
    transition: none;
  }

  .lp-feature:hover {
    transform: none;
  }
}