/* Feature detail pages share one compact benefits treatment. */
.feature-detail .feature-hero-fig {max-width:1000px;margin:0 auto}
.feature-detail .fig-downloads a {color:inherit;text-decoration:underline;text-underline-offset:2px}
.feature-detail .feature-does {max-width:820px;margin:18px auto 0;padding-left:22px;color:var(--ui-text)}
.feature-detail .feature-does li {margin-bottom:8px;color:var(--ui-text);font-size:var(--ui-text-base);line-height:1.55}

.feature-detail .feature-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--ui-space-8);
  margin-top: var(--ui-space-6);
  border-top: 1px solid var(--ui-border);
}

.feature-detail .feature-benefit {
  padding: var(--ui-space-6) 0;
  border-bottom: 1px solid var(--ui-border);
}

.feature-detail .feature-benefit h3 {
  margin: 0 0 var(--ui-space-2);
  color: var(--ui-text);
  font-size: var(--ui-text-lg);
  font-weight: 650;
  line-height: 1.3;
}

.feature-detail .feature-benefit p {
  max-width: 58ch;
  margin: 0;
  color: var(--ui-muted);
  font-size: var(--ui-text-base);
  line-height: 1.6;
}

.feature-detail .feature-diagram-details {
  max-width: 1000px;
  margin: var(--ui-space-6) auto 0;
  border-top: 1px solid var(--ui-border);
  border-bottom: 1px solid var(--ui-border);
}

.feature-detail .feature-diagram-details summary {
  min-height: 56px;
  padding: var(--ui-space-4) var(--ui-space-2);
  color: var(--ui-text);
  font: 600 var(--ui-text-sm)/1.5 var(--ui-font-sans);
  cursor: pointer;
}

.feature-detail .feature-diagram-details summary:focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 2px;
}

.feature-detail .feature-diagram-details .feature-hero-fig {
  margin-bottom: var(--ui-space-5);
}

@media (max-width: 640px) {
  .feature-detail .feature-benefits {grid-template-columns: 1fr}
}