/* ============================================================
   BENEFITS — editorial index
   ============================================================ */
.benefits { padding: var(--section-y) 0; }
.benefits-layout {
  display: grid; grid-template-columns: 1.4fr 1.1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.benefits-list { border-top: 1px solid var(--hairline); }
.benefit-row {
  display: grid;
  grid-template-columns: 3.2rem .85fr 1.15fr;
  gap: clamp(.9rem, 2.2vw, 1.6rem);
  align-items: baseline;
  padding: clamp(1.1rem, 2vw, 1.5rem) clamp(.5rem, 1.2vw, 1rem);
  border-bottom: 1px solid var(--hairline);
  position: relative; cursor: pointer;
  transition: background .45s var(--ease-soft);
}
.benefit-row:hover, .benefit-row.active { background: var(--canvas-card); }
.benefit-num {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 1.1rem; color: oklch(24% 0.022 55 / 0.65);
  transition: color .4s;
}
.benefit-row:hover .benefit-num, .benefit-row.active .benefit-num { color: var(--accent); }
.benefit-name {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.15;
  letter-spacing: -.01em;
}
.benefit-desc {
  color: var(--ink-soft); font-size: .92rem; line-height: 1.6;
}
.benefit-tag {
  display: inline-block; margin-left: .7rem; vertical-align: middle;
  font: 600 .58rem var(--sans); letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent-deep);
  border: 1px solid oklch(45% 0.122 152 / 0.4);
  padding: .26rem .65rem; border-radius: 99px;
}
/* sticky image panel */
.benefits-figure {
  position: sticky;
  top: max(90px, calc(50vh - 250px));
  padding: 0 clamp(0px, 1vw, 12px);
}
.benefits-frame {
  animation-duration: 16s;
  box-shadow: 0 30px 70px -30px oklch(24% 0.022 55 / 0.40);
}
.benefits-frame img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0; transform: scale(1.07);
  transition: opacity .55s var(--ease-soft), transform 1.4s var(--ease-out);
}
.benefits-frame img.active { opacity: 1; transform: scale(1); }
@media (max-width: 880px) {
  .benefits-layout { grid-template-columns: 1fr; }
  .benefits-figure {
    position: static; order: -1;
    max-width: 320px;
    margin: 0 auto clamp(2rem, 6vw, 3rem);
  }
  .benefit-row { grid-template-columns: 3rem 1fr; }
  .benefit-desc { grid-column: 2; }
}