/* 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; }
.feature-intro { min-width: 0; overflow-wrap: anywhere; }
/* Agent capabilities, examples, and FAQs share one reading column in every locale. */
.agent-column { width: 90%; max-width: 800px; margin-inline: auto; min-width: 0; overflow-wrap: anywhere; }
.agent-section { padding-block: 3.5rem; border-top: 1px solid #29364a; }
.agent-content p { color: var(--col-darkfore2); }
.agent-content p + p { margin-top: 1rem; }
.agent-content h2 { text-align: start; }
.agent-content h3 { color: var(--col-darkfore1); font-family: var(--sofiasans); font-size: 1.35rem; line-height: 1.35; margin-bottom: .75rem; }
.agent-content a { color: var(--col-lightaccent2); text-decoration: underline; text-underline-offset: .2em; }
.agent-capabilities { margin-top: 2rem; display: grid; gap: 1rem; }
.agent-capability, .agent-prompt-panel { padding: 1.75rem; border: 1px solid #29364a; border-radius: 12px; background: #141f30; }
.agent-prompt-panel { margin-top: 1.75rem; }
.agent-request-list { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .75rem; counter-reset: agent-request; }
.agent-request-list li { display: flex; align-items: baseline; gap: 1rem; padding: 1rem 1.25rem; border: 1px solid #344660; border-radius: 8px; color: var(--col-darkfore1); line-height: 1.6; background: #101824; counter-increment: agent-request; }
.agent-request-list li::before { content: counter(agent-request, decimal-leading-zero); flex-shrink: 0; white-space: nowrap; color: var(--col-lightaccent2); font-size: .85rem; font-variant-numeric: tabular-nums; }
.agent-content summary { line-height: 1.6; }
.agent-content summary:focus-visible { outline: 2px solid var(--col-lightaccent2); outline-offset: 5px; border-radius: 2px; }
.agent-content .mcp-details[open] summary { margin-bottom: .75rem; }
/* The screenshot edition keeps images alongside the reading flow. */
.agent-content--illustrated .agent-section:first-child > .agent-column { max-width: 1000px; }
.agent-content--illustrated .agent-section-intro { max-width: 800px; margin-inline: 0; }
.agent-content--illustrated :is(h2, h3) { scroll-margin-top: 120px; text-wrap: balance; }
.agent-content--illustrated .agent-capabilities { margin-top: 3.5rem; gap: 0; }
.agent-content--illustrated .agent-capability {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center; gap: 3.5rem; padding: 2.5rem 0;
    border: 0; border-top: 1px solid #29364a; border-radius: 0; background: none;
}
.agent-content--illustrated .agent-capability:nth-child(even) .agent-capability-copy { order: 2; }
.agent-content--illustrated .agent-capability h3 { max-width: 25ch; font-size: 1.5rem; }
.agent-content--illustrated .agent-capability p { font-size: .95rem; }
.agent-screenshot { margin: 0; min-width: 0; }
.agent-screenshot a { position: relative; display: block; overflow: hidden; border: 1px solid #344660; border-radius: 10px; background: #1e293b; }
.agent-screenshot img { display: block; width: 100%; height: auto; }
.agent-screenshot-expand { position: absolute; inset: auto .6rem .6rem auto; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #526680; border-radius: 7px; background: #111827e6; color: #c4dcf0; }
.agent-screenshot a:hover, .agent-screenshot a:focus-visible { border-color: var(--col-lightaccent2); }
.agent-screenshot figcaption { margin-top: .75rem; color: var(--col-darkfore3); font-size: .8rem; line-height: 1.6; }
.agent-content--illustrated .agent-prompt-layout:has(.agent-screenshot) { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 2.5rem; align-items: center; margin-top: 2rem; }
.agent-content--illustrated .agent-prompt-panel { padding: 0; margin: 0; border: 0; background: none; }
.agent-content--illustrated .agent-prompt-panel h3 { font-size: 1.15rem; }
.agent-content--illustrated .agent-prompt-panel > p { font-size: .9rem; }
.agent-content--illustrated .agent-request-list { gap: 0; }
.agent-content--illustrated .agent-request-list li { padding: 1rem 0; border: 0; border-top: 1px solid #29364a; border-radius: 0; background: none; }
.agent-screenshot--prompts img { height: 330px; object-fit: cover; object-position: top; }
.agent-screenshot--prompts a::after { content: ''; position: absolute; inset: auto 0 0; height: 48px; background: linear-gradient(transparent, #111827); pointer-events: none; }
.agent-screenshot--prompts .agent-screenshot-expand { z-index: 1; }
@media (max-width: 760px) {
    .agent-content--illustrated .agent-capabilities { margin-top: 2.5rem; }
    .agent-content--illustrated .agent-capability { grid-template-columns: 1fr; gap: 1.5rem; padding-block: 2rem; }
    .agent-content--illustrated .agent-capability:nth-child(even) .agent-capability-copy { order: initial; }
    .agent-content--illustrated .agent-capability .agent-screenshot { width: 100%; max-width: 440px; margin-inline: auto; }
    .agent-content--illustrated .agent-prompt-layout:has(.agent-screenshot) { grid-template-columns: 1fr; gap: 1.5rem; }
    .agent-screenshot--prompts { width: 250px; margin-inline: auto; }
}
@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; }
    .agent-section { padding-block: 2.5rem; }
    .agent-capability, .agent-prompt-panel { padding: 1.25rem; }
    .agent-request-list li { padding: .875rem; gap: .75rem; }
}