/* Capability pages share layout while keeping their copy and media independent. */
.feature-page main { padding-top: 80px; }
.feature-wrap { max-width: 1200px; margin-inline: auto; padding-inline: 5%; }
.feature-hero { position: relative; padding-block: 5rem 4rem; overflow: hidden; }
.feature-hero-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 4rem; }
.feature-eyebrow { color: var(--col-lightaccent2); font-size: .9rem; font-weight: 600; margin-bottom: 1rem; }
.feature-intro h1 { color: var(--col-darkfore1); font-family: var(--sofiasans); font-size: clamp(2.5rem, 5vw, 3.75rem); line-height: 1.1; margin-bottom: 1.5rem; }
.feature-page main p { line-height: 1.8; }
.feature-description { color: var(--col-darkfore2); font-size: 1.1rem; }
.feature-intro .mcp-hero-actions { margin-top: 2rem; }
.feature-media { margin: 0; min-width: 0; }
.feature-video { display: block; width: 100%; height: auto; border-radius: 18px; background: #172337; }
.feature-media-placeholder { aspect-ratio: 4 / 3; border: 1px dashed #4b6380; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem; padding: 1.5rem; text-align: center; color: var(--col-darkfore3); background: #172337; }
.feature-media-placeholder svg { color: var(--col-lightaccent2); opacity: .7; }
.feature-media figcaption { color: var(--col-darkfore3); font-size: .9rem; margin-top: 1rem; line-height: 1.6; }
.feature-details { padding-block: 4rem; border-block: 1px solid #29364a; background: #141f30; }
.feature-details-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; }
.feature-page main h2 { color: var(--col-darkfore1); font-family: var(--sofiasans); font-size: 1.8rem; line-height: 1.25; margin-bottom: 1.25rem; }
.feature-details h2 { text-align: start; }
.feature-details p { color: var(--col-darkfore2); }
.feature-details a { color: var(--col-lightaccent2); text-decoration: underline; text-underline-offset: .2em; }
.feature-applications { padding-block: 4rem; border-bottom: 1px solid #29364a; }
.feature-applications-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 4rem; align-items: start; }
.feature-applications h2 { text-align: start; max-width: 22ch; }
.feature-applications p { color: var(--col-darkfore2); }
.feature-applications p + p { margin-top: 1.25rem; }
.feature-related { padding-block: 3.5rem 4.5rem; }
.feature-related ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.feature-related a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 100%; padding: 1.2rem 1.5rem; border: 1px solid #344660; border-radius: 10px; color: var(--col-darkfore1); text-decoration: none; transition: background .15s; }
.feature-related a:hover { background: #1f2e43; }
.feature-related a span { color: var(--col-lightaccent2); }
.feature-page :is(a, button):focus-visible { outline: 2px solid var(--col-lightaccent2); outline-offset: 5px; }
@media (max-width: 901px) {
    .feature-hero { padding-block: 3rem; }
    .feature-hero-inner, .feature-details-grid, .feature-applications-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .feature-related ul { grid-template-columns: 1fr; }
    .feature-details, .feature-applications { padding-block: 3rem; }
    .feature-applications-grid { gap: 0; }
}