.capabilities-hero { padding: 2.5rem 0 4rem; }
.capabilities-hero .page-title { max-width: 1000px; }
.capabilities-hero .byom-hero-lede { max-width: 850px; }
.capabilities-index { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 3.5rem; border: 1px solid var(--color-border-default); background: var(--color-border-default); }
.capabilities-index a { display: flex; align-items: baseline; gap: .75rem; padding: 1.25rem; background: var(--color-bg-panel); font-size: .9rem; font-weight: 600; text-decoration: none; }
.capabilities-index a:hover, .capabilities-index a:focus-visible { background: var(--color-bg-subtle); }
.capabilities-index a:last-child { grid-column: span 2; }
.capabilities-index a > span:first-child { color: var(--color-direction); font-size: .75rem; }
.capabilities-index a > span:last-child { margin-left: auto; color: var(--color-brand); }
.capabilities-detail { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 5rem; padding: 3.5rem 0; border-top: 1px solid var(--color-border-default); scroll-margin-top: 100px; }
.capabilities-detail h2 { max-width: 17ch; margin: 1rem 0 0; font-family: var(--font-brand); font-size: clamp(1.7rem, 2.5vw, 2.2rem); line-height: 1.15; letter-spacing: -.035em; }
.capabilities-number { color: var(--color-direction); }
.capabilities-detail .eyebrow { justify-content: flex-start; }
.capabilities-detail-copy > p { margin: 0; color: var(--color-text-secondary); line-height: 1.8; }
.capabilities-example { margin: 1.5rem 0; padding: 1.25rem 1.5rem; border-left: 3px solid var(--color-direction); background: var(--color-bg-panel); }
.capabilities-example > span { color: var(--color-brand); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.capabilities-example p { margin: .65rem 0 0; line-height: 1.7; font-size: .92rem; }
.capabilities-screenshot { margin: 2rem 0 0; }
.capabilities-screenshot a, .capabilities-screenshot img { display: block; width: 100%; }
.capabilities-screenshot img { height: auto; border: 1px solid var(--color-border-default); }
.capabilities-screenshot figcaption { margin-top: .75rem; color: var(--color-text-secondary); font-size: .8rem; line-height: 1.6; }
.capabilities-workflow { background: var(--color-bg-panel); border-block: 1px solid var(--color-border-subtle); scroll-margin-top: 80px; }
.capabilities-workflow .section-heading { max-width: 850px; }
.capabilities-related { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; margin-top: 2.5rem; line-height: 1.6; }
.capabilities-community-title { margin-top: 3rem; }
@media (max-width: 980px) {
    .capabilities-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .capabilities-detail { gap: 2.5rem; }
}
@media (max-width: 760px) {
    .capabilities-hero .eyebrow, .capabilities-hero .hero-actions { justify-content: flex-start; }
    .capabilities-detail { grid-template-columns: 1fr; gap: 1.5rem; padding-block: 2.5rem; }
    .capabilities-detail h2 { max-width: 24ch; }
}
@media (max-width: 480px) {
    .capabilities-index { grid-template-columns: 1fr; }
    .capabilities-index a { padding: 1rem; }
    .capabilities-index a:last-child { grid-column: auto; }
}