/* Product explanations precede workspace examples. Existing variant module
   components retain their own composition and source-selected palette. */
.application-capabilities {
  padding-block: 0;
}
.application-capabilities > #inside {
  margin: 0;
}
.preview-connextion .deal-cover > .application-capabilities {
  padding-block: var(--space-12) 0;
}
.preview-connextion .deal-cover > .application-capabilities .deal-inside {
  padding: 0;
  background: transparent;
}
.preview-connextion .deal-cover > .application-capabilities > .swage-shell {
  width: 100%;
  max-width: none;
  padding-inline: 0;
}
.application-capabilities__compact,
.application-capabilities__stories,
.application-capabilities__directory {
  padding-block: var(--space-16);
}
.application-capabilities__compact h2,
.application-capabilities__stories > h2,
.application-capabilities__directory h2 {
  margin: 0 0 var(--space-8);
  font: var(--swage-weight-heading) var(--swage-type-section)/var(--swage-leading-heading)
    var(--swage-font-heading, var(--font-heading));
  color: var(--swage-ink, var(--foreground));
}
.application-capabilities__compact p,
.application-capabilities__story p {
  margin: 0 0 var(--space-4);
  font: var(--swage-weight-regular) var(--swage-type-card)/var(--swage-leading-body)
    var(--swage-font-body, var(--font-body));
  color: var(--swage-muted, var(--muted-foreground));
}
.application-capabilities__story {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--space-12);
  padding-block: var(--space-8);
  border-top: 1px solid var(--swage-line, var(--border));
}
.application-capabilities__story h3,
.application-capabilities__directory h3 {
  margin: var(--space-3) 0 0;
  font: var(--swage-weight-semibold) var(--swage-type-card)/var(--swage-leading-heading)
    var(--swage-font-heading, var(--font-heading));
  color: var(--swage-ink, var(--foreground));
}
.application-capabilities__story header > a {
  display: inline-flex;
  gap: var(--space-3);
  font: var(--swage-weight-medium) var(--swage-type-body-fixed)/var(--swage-leading-body)
    var(--swage-font-body, var(--font-body));
  color: var(--swage-text-accent, var(--foreground));
}
.application-capabilities__compact ul,
.application-capabilities__quick-links ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}
.application-capabilities__directory-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-12);
}
.application-capabilities__directory ul {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0 0;
}
.application-capabilities__directory li + li {
  margin-top: var(--space-6);
}
.application-capabilities__directory li > a {
  font: var(--swage-weight-semibold) var(--swage-type-lead-fixed)/var(--swage-leading-body)
    var(--swage-font-body, var(--font-body));
}
.application-capabilities__directory li > p {
  margin: var(--space-2) 0 0;
  font: var(--swage-weight-regular) var(--swage-type-body-fixed)/var(--swage-leading-body)
    var(--swage-font-body, var(--font-body));
  color: var(--swage-muted, var(--muted-foreground));
}
:is(.application-capabilities, .application-capabilities__directory) a:hover {
  text-decoration: underline;
  text-underline-offset: var(--space-1);
}
:is(.application-capabilities, .application-capabilities__directory) a:focus-visible {
  outline: 2px solid var(--swage-text-accent, var(--foreground));
  outline-offset: var(--space-1);
}
@media (width < 48rem) {
  .application-capabilities__story,
  .application-capabilities__directory-groups {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }
  .application-capabilities__compact,
  .application-capabilities__stories,
  .application-capabilities__directory {
    padding-block: var(--space-12);
  }
}