/* ============================================================
   UseCasesSection (.c-use-cases)
   ============================================================ */

/* Section background override (source: bg-black + radial #0054FF →
   closest token: blue-500) */
.section.c-use-cases {
  background-color: var(--color-black);
  background-image: radial-gradient(ellipse 65% 75% at 12% 0%, var(--color-blue-500) 0%, transparent 60%);
}

.c-use-cases__grid {
  display: grid;
  gap: 40px;
}
@media (min-width: 1024px) {
  .c-use-cases__grid { grid-template-columns: 1fr 1.4fr; gap: 80px; }
  .c-use-cases__intro { position: sticky; top: 96px; align-self: start; }
}

.c-use-cases__heading {
  margin-top: 16px;
  font-size: 26px;
  line-height: 1.1;
}
@media (min-width: 640px) { .c-use-cases__heading { margin-top: 20px; font-size: 30px; } }
@media (min-width: 768px) { .c-use-cases__heading { font-size: 36px; } }
@media (min-width: 1024px) { .c-use-cases__heading { font-size: 48px; } }

.c-use-cases__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.c-use-cases__item {
  position: relative;
  padding: 20px 40px 20px 0;
}
.c-use-cases__item + .c-use-cases__item {
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}
@media (min-width: 640px) { .c-use-cases__item { padding: 24px 48px 24px 0; } }
@media (min-width: 768px) { .c-use-cases__item { padding-top: 28px; padding-bottom: 28px; } }

.c-use-cases__index {
  position: absolute;
  right: 0;
  top: 20px;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.40);
}
@media (min-width: 640px) { .c-use-cases__index { top: 24px; } }
@media (min-width: 768px) { .c-use-cases__index { top: 28px; } }

.c-use-cases__label {
  font-size: var(--fs-xl);
  line-height: 28px;
  color: var(--color-white);
}
@media (min-width: 640px) { .c-use-cases__label { font-size: var(--fs-2xl); } }
@media (min-width: 768px) { .c-use-cases__label { font-size: 24px; line-height: 32px; } }

.c-use-cases__body {
  margin-top: 8px;
  max-width: 512px;
  font-size: var(--fs-sm);
  line-height: var(--leading-body);
  color: var(--color-grey-on-black);
}
@media (min-width: 768px) { .c-use-cases__body { font-size: var(--fs-body); } }