/* ── Benefits section — diagonal staircase layout ───────────────────────────
   Non scroll-jacked. The section title is pinned top-left while the five
   benefit cards step leftward as they descend: card 1 sits far right, each
   subsequent card shifts one step left. Below 1300px everything collapses to a
   single full-width column (see css/mobile.css). */

.benefits {
  background: #0a0a0a;
  color: #fff;
  padding: 110px 0 130px;
  position: relative;
  z-index: 1;
}

.benefits__inner {
  max-width: var(--col-width);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--content-pad);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: 48px;
  align-items: start;
}

/* ── Left column: title pinned top-left ─────────────────────────────────── */

.benefits__left {
  position: sticky;
  top: 96px;
}

.benefits__left h2 {
  font-size: 40px;
  margin-bottom: 14px;
}

.benefits__desc {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.7;
  max-width: 520px;
}

/* ── Right column: diagonal staircase ───────────────────────────────────── */

.benefits__stack {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.benefits__stack .benefit-card {
  width: 64%;
  min-height: 296px;   /* equal height — fits the tallest card ([03]) */
}
.benefits__stack .benefit-card:nth-child(1) { margin-left: 36%; }
.benefits__stack .benefit-card:nth-child(2) { margin-left: 27%; }
.benefits__stack .benefit-card:nth-child(3) { margin-left: 18%; }
.benefits__stack .benefit-card:nth-child(4) { margin-left: 9%;  }
.benefits__stack .benefit-card:nth-child(5) { margin-left: 0;   }

/* ── Benefit card ───────────────────────────────────────────────────────── */

.benefit-card {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  padding: 34px 38px 30px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-sizing: border-box;
  flex-shrink: 0;
}

/* Orange corner accents */
.benefit-card__corner {
  position: absolute;
  width: 15px;
  height: 15px;
  background: #ff8400;
  display: block;
}

.benefit-card__corner--tl {
  top: -8px;
  left: -8px;
}

.benefit-card__corner--br {
  bottom: -8px;
  right: -8px;
}

/* Card number label */
.benefit-card__num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Card headline */
.benefit-card__headline {
  font-family: var(--font-pixel-square);
  font-size: 28px;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* Card description */
.benefit-card__desc {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 300;
  color: rgba(255, 255, 255, 1);
  line-height: 1.65;
  margin-top: 12px;
}