/* section 05-benefits — template "Benefits" section (framer-154lyd), values copied from the template CSS and measured live.
   desktop: 3 columns · tablet 810–1199.98: 2 columns · phone < 810: 1 column. Gap 16 everywhere, rows of equal height. */

/* Framer leaves will-change: transform on both animated blocks after they appear, so they stay composited layers.
   That moves where text is rasterised (Inter body copy lands 1 px lower than without it) → kept on purpose:
   with it, the description glyphs are pixel-identical to the template's (DPR 2 diff = 0). */
.bnf .bnf__title, .bnf .bnf__grid { will-change: transform; }

/* title block: full width, max 480 (framer-1y9c4uk) */
.bnf .bnf__title { position: relative; width: 100%; max-width: 480px; }
.bnf .bnf__title h2 { white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; }

/* grid (framer-9s8inc): 3 × minmax(50px, 1fr), rows minmax(0, 1fr) → every row as tall as the tallest card */
.bnf .bnf__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(50px, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  justify-content: center;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* cell (framer-1haaoos-container): the card fills its cell so all six cards share one height */
.bnf .bnf__cell { position: relative; display: flex; flex-direction: column; min-width: 0; width: 100%; }

/* card (framer-163mdp6 "Default"): #0f151b, radius 16, 0.8px border #ffffff0d drawn inside (data-border="soft"),
   padding 20/24, column gap 16, clipped */
.bnf .bnf__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px;
  flex: 1 0 auto;
  width: 100%;
  padding: 20px 24px;
  border-radius: var(--r-16);
  background-color: var(--surface);
  overflow: hidden;
}

/* icon (framer-1ia1s7n): 28 × 28, 24-unit grid, stroke 1.6 (--js9iwy), white (token cecf886f), round caps + joins */
.bnf .bnf__icon {
  position: relative;
  flex: none;
  display: block;
  width: 28px;
  height: 28px;
  overflow: hidden;
  fill: none;
  stroke: var(--t-100);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bnf .bnf__icon .bnf__dot { fill: var(--t-100); }

/* text stack (framer-h3s2z1): column, gap 8 */
.bnf .bnf__text { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; }

/* title: Google Sans 500 18/120 %, -0.02em, white (preset 1efpdce, same on every breakpoint) */
.bnf .bnf__name {
  position: relative;
  width: 100%;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--t-100);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* description: Inter 400 16/140 %, -0.02em, white 60 % (preset 1jyfdru + token b2053b36) */
.bnf .bnf__desc {
  position: relative;
  width: 100%;
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--t-60);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  /* the template's copy never leaves a lone last word; ours would ("included." / "way." / "Singapore.") → let the
     browser rebalance the last line. Same font, size, width and line count, only the break point moves. */
  text-wrap: pretty;
}

@media (min-width: 810px) and (max-width: 1199.98px) {
  .bnf .bnf__grid { grid-template-columns: repeat(2, minmax(50px, 1fr)); }
}
@media (max-width: 809.98px) {
  /* one column: the template keeps rows repeat(2, minmax(0,1fr)) + auto rows minmax(0,1fr) here too, so the six cards
     stay one uniform height (the tallest card's), exactly like the template's stack */
  .bnf .bnf__grid { grid-template-columns: repeat(1, minmax(50px, 1fr)); }
}