/* ===== 05 Our approach (Figma 292:353) ===== */
.approach__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 666px); /* 60→680 intro, 786→1452 steps */
  column-gap: 60px;
  align-items: stretch;
}

/* left column */
.approach__intro { display: flex; flex-direction: column; align-items: flex-start; }
.approach__title { max-width: 620px; }
.approach__body { max-width: 600px; margin-top: 24px; color: var(--w-50); }

.approach__btn {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 13px 0 18px; margin-top: 28px;
  border-radius: 999px; background: rgba(255,255,255,.12); color: var(--white);
  font-size: 14px; line-height: 1; letter-spacing: -0.02em; white-space: nowrap;
  transition: background-color .25s var(--ease), transform .25s var(--ease);
}
.approach__btn:hover { background: rgba(255,255,255,.2); transform: translateY(-1px); }
.approach__btn img { width: 14px; height: 14px; flex: none; transition: transform .25s var(--ease); }
.approach__btn:hover img { transform: translateX(3px); }

/* stats sit at the bottom of the left column, aligned with the closing statement */
.approach__stats { margin-top: auto; padding-top: 80px; display: flex; flex-direction: column; gap: 48px; }
.approach__stat-num { font-variant-numeric: tabular-nums; }
.approach__stat-label { margin-top: 12px; font-size: 16px; line-height: 1; color: var(--w-50); }

/* right column: numbered steps */
.approach__step {
  display: grid; grid-template-columns: 63px minmax(0, 1fr); /* num 50 + 13 → text at 849 */
  padding-top: 40px;
}
.approach__step:first-child { padding-top: 0; }
.approach__step-num { font-family: var(--font-mono); font-size: 16px; line-height: 1; color: var(--w-25); padding-top: .2em; }
.approach__step-text { max-width: 600px; }
.approach__step-body { margin-top: 12px; max-width: 540px; color: var(--w-50); }
.approach__rule { grid-column: 1 / -1; width: 100%; height: 1px; margin-top: 40px; }

.approach__outcome { margin-top: 40px; }
.approach__outcome-label { line-height: 1; color: var(--w-50); }
.approach__outcome-text {
  margin-top: 20px; max-width: 640px;
  font-size: clamp(21px, 1.72vw, 26px); line-height: 1.22; letter-spacing: -0.025em;
}

/* tablet / mobile: stack */
@media (max-width: 1100px) {
  .approach__grid { grid-template-columns: 1fr; row-gap: 64px; }
  .approach__stats { margin-top: 0; padding-top: 56px; flex-direction: row; gap: 40px; }
  .approach__stat { flex: 1 1 0; min-width: 0; }
}
@media (max-width: 720px) {
  .approach__grid { row-gap: 48px; }
  .approach__step { grid-template-columns: 40px minmax(0, 1fr); padding-top: 32px; }
  .approach__rule { margin-top: 32px; }
  .approach__outcome { margin-top: 32px; }
  .approach__stats { gap: 20px; }
}