/* benefits section (Aurix design) — values from outline/benefits@1440|1024|390 + styles/benefits@*.json
   ≥1200: pt 153 · 3 cols · 810–1199: pt 120 · 2 cols · ≤809: pt 120 · 1 col. Header → grid gap 56. */

.ax-benefits__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 56px;
  padding-top: 153px;
}

.ax-benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: center;
  align-items: start; /* measured: cards keep their content height (1024: 192.6px card in a 210.8px row) */
  gap: 16px;
  width: 100%;
}

/* card: radial surface + two inset hairlines, r16, 32 padding, column gap 32 */
.ax-benefits__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 32px;
  border-radius: 16px;
  background-image: radial-gradient(100% 100% at 50% 0%, rgb(24, 28, 38) 0%, rgb(16, 18, 25) 51.3514%, rgb(12, 14, 19) 100%);
  box-shadow: rgba(255, 255, 255, 0.2) 0px 1px 1px 0px inset, rgba(255, 255, 255, 0.05) 0px -1px 2px 0px inset;
  overflow: hidden;
}

/* dot texture, masked radial(100% 100% at 50% 0, .2 → 0). Aurix paints it with a bitmap at
   background-size 267.5px (dot pitch 267.5/54 = 4.954px, dot radius ≈1.18px, dot colour
   rgb(216,216,216) at alpha .10/.29/.60 on ~50% of grid points); rebuilt here as CSS dot grids
   with the same pitch, radius, colour and alpha mix. */
.ax-benefits__dots {
  --p: 4.954px;
  --r: 1.18px;
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at calc(var(--p) / 2) calc(var(--p) / 2), rgba(216, 216, 216, 0.6) var(--r), rgba(216, 216, 216, 0) calc(var(--r) + 0.5px)),
    radial-gradient(circle at calc(var(--p) / 2) calc(var(--p) / 2), rgba(216, 216, 216, 0.29) var(--r), rgba(216, 216, 216, 0) calc(var(--r) + 0.5px)),
    radial-gradient(circle at calc(var(--p) / 2) calc(var(--p) / 2), rgba(216, 216, 216, 0.12) var(--r), rgba(216, 216, 216, 0) calc(var(--r) + 0.5px));
  background-size: calc(var(--p) * 5) calc(var(--p) * 5), calc(var(--p) * 2) calc(var(--p) * 2), var(--p) var(--p);
  background-position: calc(var(--p) * 2) calc(var(--p) * 3), var(--p) 0, 0 0;
  -webkit-mask-image: radial-gradient(100% 100% at 50% 0px, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(100% 100% at 50% 0px, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
}

/* icon tile: 40×40 r10, green radial core + layered drop shadow + inset highlights */
.ax-benefits__icon {
  position: relative;
  z-index: 0;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background-image: radial-gradient(50% 50%, rgba(129, 140, 248, 0.15) 0%, rgb(12, 14, 19) 100%);
  box-shadow:
    rgba(0, 0, 0, 0.11) 0px 0.839802px 0.419901px -0.46875px,
    rgba(0, 0, 0, 0.11) 0px 1.99048px 0.99524px -0.9375px,
    rgba(0, 0, 0, 0.11) 0px 3.63084px 1.81542px -1.40625px,
    rgba(0, 0, 0, 0.1) 0px 6.03627px 3.01813px -1.875px,
    rgba(0, 0, 0, 0.1) 0px 9.74808px 4.87404px -2.34375px,
    rgba(0, 0, 0, 0.09) 0px 15.9566px 7.97832px -2.8125px,
    rgba(0, 0, 0, 0.07) 0px 27.4762px 13.7381px -3.28125px,
    rgba(0, 0, 0, 0.04) 0px 50px 25px -3.75px,
    rgba(255, 255, 255, 0.6) 0px 0.5px 2px -1px inset,
    rgba(255, 255, 255, 0.08) 0px 10px 10px -1px inset;
  color: rgb(255, 255, 255);
}
.ax-benefits__icon svg {
  position: absolute;
  inset: 8px;
  width: 24px;
  height: 24px;
}
/* Aurix's icons are two-tone: white outline, green (accent) detail strokes */
.ax-benefits__icon svg > * + * { stroke: var(--ax-accent); }

.ax-benefits__text {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  overflow: hidden;
  text-align: center;
}
.ax-benefits__title {
  width: 100%;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  color: rgb(255, 255, 255);
  text-wrap: balance;
}
.ax-benefits__body {
  width: 100%;
  font-size: 14px;
  line-height: 18.2px;
  color: rgba(255, 255, 255, 0.4);
  text-wrap: balance;
}
/* Aurix h2 wraps with text-wrap: balance */
.ax-benefits .ax-h2 { text-wrap: balance; }

@media (max-width: 1199px) {
  .ax-benefits__inner { padding-top: 120px; }
  .ax-benefits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 809px) {
  .ax-benefits__grid { grid-template-columns: minmax(0, 1fr); }
}