/* ============================================================
   65-serv-benefits — 4 benefit cards with drawn-check icons.
   Scoped under .sec-65-serv-benefits. Section background is
   white (per spec, echoing 65-serv-helps' third tone); cards
   use bone-2 + shadow-soft so they never read as flat white
   cards on a white section.

   Check-icon draw echoes the .pulse-line--draw technique in
   css/base.css: stroke-dasharray/dashoffset driven purely by
   the [data-reveal].is-visible state core.js already applies
   to the card itself — no extra JS needed.
   ============================================================ */

.sec-65-serv-benefits {
  background: var(--white);
}

.sec-65-serv-benefits__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-gap);
}

.sec-65-serv-benefits__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.9rem;
  background: var(--bone-2);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: 2rem 1.5rem;
  transition: box-shadow 400ms var(--ease-out), transform 400ms var(--ease-out);
}
.sec-65-serv-benefits__card:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-4px);
}

.sec-65-serv-benefits__icon {
  color: var(--accent-strong);
  /* box-sizing:border-box is global and the <svg> carries width/height attributes, so this
     padding was taken OUT of the icon: the content box came to under 1px and the tick
     rendered sub-pixel. Every card showed a bare disc. content-box puts the padding
     AROUND the glyph. */
  box-sizing: content-box;
  padding: 0.6rem;
  border-radius: 50%;
  background: var(--accent-soft);
}
.sec-65-serv-benefits__icon path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.sec-65-serv-benefits__card[data-reveal].is-visible .sec-65-serv-benefits__icon path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 900ms var(--ease-out) 250ms;
}

.sec-65-serv-benefits__text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h4);
  max-width: 20ch;
}

@media (max-width: 900px) {
  .sec-65-serv-benefits__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .sec-65-serv-benefits__grid { grid-template-columns: 1fr; }
}

html.reduced-motion .sec-65-serv-benefits__icon path {
  stroke-dashoffset: 0;
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .sec-65-serv-benefits__card { transition: none; }
}