/* Two Paths — Figma 2323:181 / 2345:1346 (PathCard 2361:2076, CheckItem 2310:29) */
.paths__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.paths__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  min-height: 510px;
  padding: 40px;
  border-radius: 28px;
  transition:
    transform var(--t-card) var(--ease),
    box-shadow var(--t-card) var(--ease);
}
.paths__card--invest {
  background: var(--surface);
  border: 1px solid var(--line);
}
.paths__card--earn {
  background: linear-gradient(152.64deg, var(--ink-btn) 13.4%, #0b5f6b 86.6%);
  color: #fff;
}

.paths__tag {
  padding: 6px 13px;
  border-radius: 99px;
  background: #edf3f7;
  color: var(--accent-deep);
}
.paths__card--earn .paths__tag {
  background: rgba(49, 226, 154, .18);
  color: var(--accent);
}

.paths__title { color: var(--ink); }
.paths__card--earn .paths__title { color: #fff; }

.paths__body { color: var(--muted); }
.paths__card--earn .paths__body { color: rgba(255, 255, 255, .82); }

.paths__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-bottom: 16px; /* Figma: flexible spacer between list and CTA */
}
.paths__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
.paths__card--earn .paths__item { color: rgba(255, 255, 255, .84); }

.paths__tick {
  display: grid;
  place-items: center;
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2.5px; /* centre the 16px tick on the first 21px line */
  border-radius: 8px;
  background: rgba(22, 169, 122, .14);
}
.paths__card--earn .paths__tick { background: rgba(49, 226, 154, .2); }

.paths__cta { margin-top: auto; }

@media (hover: hover) {
  .paths__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--el-md);
  }
}

@media (max-width: 900px) {
  .paths__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .paths__card { min-height: 0; }
}

@media (max-width: 720px) {
  .paths__card {
    gap: 14px;
    padding: 28px 24px;
    border-radius: 24px;
  }
  .paths__card--earn {
    background: linear-gradient(137.47deg, var(--ink-btn) 13.4%, #0b5f6b 86.6%);
  }
  .paths__title { font-size: 22px; line-height: 1.18; }
  .paths__body { font-size: 14.5px; }
  .paths__list { margin-bottom: 0; }
  .paths__cta { width: 100%; }
}