/* ==========================================================================
   KOBIL — AI Trust — Section: Benefits
   Figma: desktop 5501:34626 (1440x654 — py 72, head 828 wide, then a 3x2 grid
   of 424.67-wide cards with a 3px column gap and no row gap) ·
   mobile 6087:14033 (369 — the same six cards in two 158.5 columns filled
   top-to-bottom, 20 apart horizontally and 24 vertically).
   ========================================================================== */

.sec-ait-benefits {
  display: flex;
  flex-direction: column;
  gap: var(--w40);
  width: 100%;
  padding: var(--w72) var(--w80);
}

.ait-benefits__head {
  display: flex;
  flex-direction: column;
  gap: var(--w24);
  width: var(--w828);
  max-width: 100%;
}

.ait-benefits__title {
  font-family: var(--font-serif);
  font-size: var(--w56);
  font-weight: 400;
  line-height: 1.1;
  color: var(--navy);
}

.ait-benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 0 var(--w3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* No hover state, deliberately. These six cards are an `<li>` each — no link,
   no toggle, nothing to activate — and they used to borrow the lift the site's
   other card grids use (css/sections/capabilities.css). Those grids are
   interactive; this one only states what AI Trust solves, so the lift was
   promising an action that does not exist and read as a card that would not
   respond. Figma's frame (5501:34626) has no hover variant either. The 24 of
   padding stays: it is the card's own layout in that frame (icon at 24,24, copy
   at 24,84), not a backdrop for the removed effect. */
.ait-benefits__card {
  display: flex;
  flex-direction: column;
  gap: var(--w12);
  padding: var(--w24);
  border-radius: var(--w12);
}

.ait-benefits__icon {
  flex: none;
  width: var(--w48);
  height: var(--w48);
}

.ait-benefits__card-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--w8);
}

.ait-benefits__card-title {
  font-family: var(--font-sans);
  font-size: var(--w20);
  font-weight: 600;
  line-height: var(--w26);
  color: var(--navy);
}

.ait-benefits__card-text {
  font-family: var(--font-sans);
  font-size: var(--w16);
  font-weight: 400;
  line-height: var(--w23);
  color: var(--navy-70);
}

@media (max-width: 768px) {
  .sec-ait-benefits {
    gap: var(--m16);
    padding: var(--m40) var(--m28);
  }

  .ait-benefits__head { width: 100%; gap: var(--m16); }
  .ait-benefits__title { font-size: var(--m34); line-height: 1.2; }

  /* Column-first flow so the cards read down the left column and then the
     right one, exactly as the phone frame stacks them. */
  .ait-benefits__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    gap: var(--m24) var(--m20);
  }

  .ait-benefits__card { gap: var(--m12); padding: 0; border-radius: 0; }

  .ait-benefits__icon { width: var(--m40); height: var(--m40); }
  .ait-benefits__card-copy { gap: var(--m4); }
  .ait-benefits__card-title { font-size: var(--m16); line-height: var(--m23); }
  .ait-benefits__card-text { font-size: var(--m14); line-height: var(--m20); }
}