/* FeatureGrid - ported from Framer code component FeatureGrid.tsx
   Cells on a hairline grid (3 cols >=1440, 2 cols >=810, 1 col below). Hover
   lifts the ground one step and draws a keyline (scaleX 0 -> 1) along the top
   edge. Nothing translates or scales, so the cells never fight the clipped grid.
   Under prefers-reduced-motion the keyline does not wipe: it holds hidden and
   simply appears on hover. Defaults are the education-navy (dark) palette from
   the TSX; override --fr-feat-* on the .fr-feat element for other grounds. */
.fr-feat {
  --fr-feat-line: rgba(107, 172, 246, 0.16);
  --fr-feat-ground: rgb(3, 19, 31);
  --fr-feat-ground-hover: rgb(8, 32, 47);
  --fr-feat-accent: rgb(74, 144, 226);
  --fr-feat-icon: rgb(74, 158, 255);
  --fr-feat-icon-hover: rgb(108, 172, 246);
  --fr-feat-title: rgb(255, 255, 255);
  --fr-feat-body: rgb(147, 163, 180);
  --fr-feat-body-hover: rgb(184, 196, 208);
  --fr-feat-ease: cubic-bezier(.16, 1, .3, 1);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--fr-feat-line);
  border: 1px solid var(--fr-feat-line);
  border-radius: 4px;
  overflow: hidden;
}
@media (max-width: 1439px) { .fr-feat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 809px) { .fr-feat { grid-template-columns: minmax(0, 1fr); } }
.fr-feat__cell {
  position: relative;
  margin: 0;
  padding: 27.2px 24px;
  background: var(--fr-feat-ground);
  transition: background-color 220ms var(--fr-feat-ease);
}
.fr-feat__line {
  position: absolute;
  left: 0; top: 0; right: 0;
  height: 2px;
  background: var(--fr-feat-accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 320ms var(--fr-feat-ease);
  pointer-events: none;
}
.fr-feat__icon {
  display: block;
  width: 26px; height: 26px;
  margin: 0 0 14.4px;
  color: var(--fr-feat-icon);
  transition: color 220ms var(--fr-feat-ease);
}
.fr-feat__icon svg { display: block; width: 100%; height: 100%; }
.fr-feat__title {
  margin: 0 0 6.4px;
  font-family: var(--jifu-font-display, "Heuvel Grotesk", Montserrat, sans-serif);
  font-weight: 700;
  font-size: 15.3px;
  line-height: 1.2;
  color: var(--fr-feat-title);
}
.fr-feat__body {
  margin: 0;
  font-family: var(--jifu-font-body, Montserrat, sans-serif);
  font-weight: 400;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fr-feat-body);
  transition: color 220ms var(--fr-feat-ease);
}
@media (hover: hover) {
  .fr-feat__cell:hover { background: var(--fr-feat-ground-hover); }
  .fr-feat__cell:hover .fr-feat__line { transform: scaleX(1); }
  .fr-feat__cell:hover .fr-feat__icon { color: var(--fr-feat-icon-hover); }
  .fr-feat__cell:hover .fr-feat__body { color: var(--fr-feat-body-hover); }
}
@media (prefers-reduced-motion: reduce) {
  .fr-feat__line { transition: none; transform: none; opacity: 0; }
  .fr-feat__cell:hover .fr-feat__line { opacity: 1; }
}