/* A typographic capability index, independent of the earlier feature cards. */
.feature-index { overflow: clip; }

.feature-index-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 48px;
  margin-bottom: 38px;
}

.feature-index .section-kicker { margin-bottom: 12px; }

.feature-index-lead {
  max-width: 420px;
  padding-bottom: 4px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.85;
}

.capability-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.capability-row {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 30px;
  min-height: 114px;
  padding-block: 22px;
  border-bottom: 1px solid var(--line);
}

.capability-number {
  color: #99afa0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 54px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -2px;
  transition: color .3s ease;
}

.capability-title {
  max-width: 390px;
  min-width: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.35rem, 2.1vw, 1.85rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -.65px;
  overflow-wrap: break-word;
  transition: color .3s ease;
}

.capability-description {
  max-width: 435px;
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.85;
  overflow-wrap: break-word;
}

@media (hover: hover) {
  .capability-row:hover .capability-number { color: var(--amber); }
  .capability-row:hover .capability-title { color: var(--teal); }
}

/* Loaded after landing.css: direction changes only these six reveal rows. */
.motion-ready .capability-row.reveal-from-left {
  transform: translateX(-45px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22, .65, .25, 1);
}

.motion-ready .capability-row.reveal-from-right {
  transform: translateX(45px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22, .65, .25, 1);
}

.motion-ready .capability-row.reveal.is-visible {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 900px) {
  .feature-index-intro { gap: 32px; }
  .feature-index-lead { font-size: 13px; }
  .capability-row { grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.05fr); gap: 22px; }
  .capability-number { font-size: 46px; }
  .capability-title { font-size: 24px; }
}

@media (max-width: 640px) {
  .feature-index-intro { grid-template-columns: 1fr; gap: 18px; margin-bottom: 29px; }
  .feature-index-lead { max-width: 420px; padding-bottom: 0; font-size: 13px; }
  .capability-row {
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: start;
    gap: 12px 18px;
    min-height: 0;
    padding-block: 24px;
  }
  .capability-number { grid-column: 1; grid-row: 1; font-size: 36px; letter-spacing: -1.5px; }
  .capability-title { grid-column: 2; grid-row: 1; align-self: center; font-size: 23px; }
  .capability-description { grid-column: 2; font-size: 12px; line-height: 1.85; }
}

@media (max-width: 360px) {
  .capability-row { grid-template-columns: 35px minmax(0, 1fr); column-gap: 13px; }
  .capability-number { font-size: 32px; }
  .capability-title { font-size: 21px; letter-spacing: -.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-ready .capability-row.reveal,
  .motion-ready .capability-row.reveal-from-left,
  .motion-ready .capability-row.reveal-from-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}