/* Homepage system feature explorer. Deliberately scoped to this section. */
#system.feature-proof .built-in-layout { align-items: start; }
#system .feature-proof-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 28px; }
#system .feature-proof-controls[hidden] { display: none; }
#system .feature-proof-control { display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; align-content: start; min-height: 108px; padding: 16px; border: 1px solid #63776b; border-radius: 8px; background: #13271f; color: #fff; text-align: left; font: inherit; font-size: 1rem; font-weight: 750; line-height: 1.4; cursor: pointer; }
#system .feature-proof-number { grid-column: 1 / -1; color: #d0dfd4; font-size: .8125rem; font-weight: 600; }
#system .feature-proof-check { visibility: hidden; font-weight: 900; }
#system .feature-proof-control:hover { border-color: #c4d940; }
#system .feature-proof-control[aria-pressed="true"] { border-color: #c4d940; background: #c4d940; color: #071118; }
#system .feature-proof-control[aria-pressed="true"] .feature-proof-number { color: #283a20; }
#system .feature-proof-control[aria-pressed="true"] .feature-proof-check { visibility: visible; }
#system .feature-proof-control:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
#system .feature-proof-panels { display: grid; gap: 24px; min-width: 0; }
#system .feature-proof-panel { min-width: 0; border: 1px solid #536c5d; border-radius: 8px; overflow: hidden; background: #0c1c17; box-shadow: 0 18px 45px rgba(0,0,0,.16); }
#system.is-enhanced .feature-proof-panel { grid-area: 1 / 1; }
#system.is-enhanced .feature-proof-panel:not(.is-active) { visibility: hidden; pointer-events: none; }
#system.is-enhanced .feature-proof-panel.is-active { animation: feature-proof-reveal 140ms ease-out; }
#system .feature-proof-figure { margin: 0; }
#system .feature-proof-image { position: relative; aspect-ratio: 3 / 2; background: #162a22; }
#system .feature-proof-image picture, #system .feature-proof-image img { display: block; width: 100%; height: 100%; }
#system .feature-proof-image img { object-fit: cover; object-position: center; }
#system .feature-proof-image picture[hidden] { display: none; }
#system .feature-proof-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; padding: 24px; color: #ecf2e8; text-align: center; }
#system .feature-proof-fallback span:first-child { font-weight: 750; }
#system .feature-proof-fallback[hidden] { display: none; }
#system .feature-proof-figure figcaption { padding: 12px 20px 0; font-size: .875rem; line-height: 1.5; color: #bacbbc; }
#system .feature-proof-description { padding: 16px 20px 24px; }
#system .feature-proof-description h3 { margin: 0 0 12px; color: #fff; }
#system .feature-proof-description p { margin: 0; color: #dce7df; }
@keyframes feature-proof-reveal { from { opacity: .6; } to { opacity: 1; } }
@media (max-width: 980px) {
  #system.feature-proof .built-in-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  #system.feature-proof .built-in-copy { max-width: none; }
}
@media (max-width: 480px) {
  #system .feature-proof-control { min-height: 112px; padding: 12px; }
  #system .feature-proof-description { padding: 16px 16px 20px; }
  #system .feature-proof-figure figcaption { padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  #system.is-enhanced .feature-proof-panel.is-active { animation: none; }
}