/* Feature Grid — tokens only. Raw hex/px retained where Figma-exact (noted inline). */
.rw-block-feature-grid {
  position: relative; overflow: hidden; isolation: isolate;
}
/* Dotted halftone decoration — base styles come from global .bg-dots utility. */
.rw-block-feature-grid .bg-dots { left: 32%; top: 32%; z-index: 1; }
.rw-block-feature-grid .rw-container { position: relative; z-index: 2; }

.rw-block-feature-grid .layout {
  display: grid;
  grid-template-columns: minmax(0, 33.4375rem) minmax(0, 40.5rem);
  gap: var(--rw-space-2xl);
  justify-content: space-between;
  align-items: start;
}
.rw-block-feature-grid .intro { display: flex; flex-direction: column; }
.rw-block-feature-grid .eyebrow-mark {
  width: 0.6875rem; height: 0.6875rem; /* Figma-exact 11px square */
  background: var(--rw-color-primary-yellow); border-radius: 1px; flex: none;
}
.rw-block-feature-grid h2 {
  margin: 1rem 0 2rem;
  /* Figma local override: feature-grid h2 = 32 → 44px (mobile floor 32 from 1008:428,
     desktop ceiling 44 = h3 token ceiling). Slope mirrors --rw-h3-size. */
  font-size: clamp(2rem, 1.69vw + 1.21rem, 2.75rem);
  line-height: var(--rw-h3-line); letter-spacing: var(--rw-h3-tracking);
  color: var(--rw-color-primary-green);
}
.rw-block-feature-grid .body {
  margin: 0; max-width: 27rem;
  color: var(--rw-color-grey-01);
  font-size: var(--rw-p1-size); line-height: 1.28; letter-spacing: var(--rw-p1-tracking);
}

.rw-block-feature-grid .cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rw-space-md);
}
.rw-block-feature-grid .card {
  background: var(--rw-color-white);
  border: 1px solid #E1E1E1; /* Figma-exact card border */
  border-radius: var(--rw-radius-lg);
  min-height: 12.25rem; /* Figma-exact 196px card height */
  padding: 1rem;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--rw-space-md); text-align: center;
}
.rw-block-feature-grid .card .icon {
  width: 2rem; height: 2rem; /* Figma-exact 32px chip */
  border-radius: 999px;
  background: rgba(109, 109, 109, 0.1); /* Figma-exact chip fill */
  color: var(--rw-color-grey-01);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.rw-block-feature-grid .card .label {
  margin: 0;
  font-weight: 700; font-size: var(--rw-p1-size); line-height: 1.44; letter-spacing: -0.016em;
  color: var(--rw-color-primary-green);
}

/* Tablet: stack intro above cards, cards become 2-col. */
@media (max-width: 1023px) {
  .rw-block-feature-grid .layout { grid-template-columns: 1fr; }
  .rw-block-feature-grid .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rw-block-feature-grid .bg-dots { left: auto; right: -10%; top: 20%; opacity: 0.35; }
}
/* Mobile (Figma 1008:428): square 3-col tile wrap, 8px gaps, compact padding.
   Tiles drop fixed min-height and become 1:1 squares to match the 111×111 dimensions
   in Figma at 390px (3 tiles + 2×8px gap fit the 350px content width exactly). */
@media (max-width: 639px) {
  .rw-block-feature-grid .cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--rw-space-xs);
  }
  .rw-block-feature-grid .card {
    aspect-ratio: 1 / 1;
    min-height: 0;
    padding: var(--rw-space-md);
    gap: 0.75rem; /* Figma-exact 12px icon→label gap */
  }
  .rw-block-feature-grid .card .label {
    font-size: var(--rw-caption-size); /* 12px floor — Figma label sizing */
    line-height: 1.17;
  }
}