/* Feature cards
   A marketing section: a centred heading and a grid of cards with an icon,
   title, description and a read-more link. Colour and type from tokens.css
   (marketing theme). */

.dp-fsection {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--dp-space-12) var(--dp-space-6);
}

.dp-fsection-head {
  max-width: 44rem;
  margin: 0 auto var(--dp-space-8);
  text-align: center;
}

.dp-fsection-title {
  margin: 0 0 var(--dp-space-3);
  font-size: var(--dp-text-3xl);
  line-height: var(--dp-leading-tight);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-navy);
}

.dp-fsection-sub {
  margin: 0;
  font-size: var(--dp-text-lg);
  color: var(--dp-text-muted);
}

.dp-fc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--dp-space-6);
}

.dp-fc {
  display: flex;
  flex-direction: column;
  padding: var(--dp-space-6);
  background: var(--dp-surface);
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius-xl);
}

.dp-fc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--dp-space-5);
  border-radius: var(--dp-radius-lg);
  background: var(--dp-blue-200);
  color: var(--dp-blue-700);
}

.dp-fc-icon svg { width: 1.5rem; height: 1.5rem; }

.dp-fc-title {
  margin: 0 0 var(--dp-space-2);
  font-size: var(--dp-text-xl);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-navy);
}

.dp-fc-desc {
  flex: 1;
  margin: 0 0 var(--dp-space-5);
  font-size: var(--dp-text-base);
  color: var(--dp-text-muted);
}

.dp-fc-more { align-self: flex-start; }