.console-section { padding: 130px 0 144px; }
.console-heading { display: grid; grid-template-columns: 1.2fr .8fr; gap: 62px; align-items: end; margin-bottom: 43px; }
.console-heading h2 { max-width: 710px; margin: 9px 0 0; font-size: clamp(2.3rem, 4vw, 4rem); line-height: 1.05; letter-spacing: -.07em; }
.console-heading > p { max-width: 390px; margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.75; }
.console-frame { position: relative; margin: 0; overflow: hidden; border: 1px solid #bfe9d83b; border-radius: 8px; background: #061011; box-shadow: 0 32px 80px #0008; }
.console-frame img { display: block; width: 100%; height: auto; }
.console-frame figcaption { padding: 12px 16px; color: #89a097; border-top: 1px solid #bfe9d81c; background: #0b1718; font-family: var(--mono); font-size: .63rem; }
.console-frame figcaption span { margin-right: 12px; color: var(--acid); font-size: .58rem; letter-spacing: .11em; }
.connector-roadmap { display: grid; grid-template-columns: .9fr 1.1fr; gap: 45px; margin-top: 15px; padding: 32px; border: 1px solid var(--line); background: linear-gradient(120deg, #10201f, #0d191b); }
.roadmap-label { color: var(--orange); font-family: var(--mono); font-size: .6rem; letter-spacing: .11em; }
.connector-roadmap h3 { margin: 13px 0 9px; max-width: 360px; font-size: 1.4rem; line-height: 1.15; letter-spacing: -.05em; }
.connector-roadmap p { max-width: 410px; margin: 0; color: var(--muted); font-size: .77rem; line-height: 1.7; }
.connector-list { display: flex; flex-wrap: wrap; align-content: center; gap: 8px; }
.connector-list span { display: inline-flex; align-items: center; gap: 7px; padding: 9px 10px; border: 1px solid #b9e2d12b; border-radius: 3px; color: #d2e6db; background: #0b1516; font-size: .74rem; font-weight: 700; }
.connector-list i { padding: 2px 4px; border-radius: 2px; background: #3a3020; color: #f1bd78; font-family: var(--mono); font-size: .5rem; font-style: normal; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
@media (max-width: 700px) { .console-section { padding: 85px 0; } .console-heading { display: block; margin-bottom: 30px; } .console-heading > p { margin-top: 18px; } .console-frame figcaption { font-size: .58rem; } .connector-roadmap { grid-template-columns: 1fr; gap: 26px; padding: 23px; } }

/* Capability-card details must participate in layout; absolute positioning caused long copy to
   flow underneath their approval and evidence panels at desktop widths. */
.supervision-ui { position: static; margin-top: 20px; }
.proof-list { position: static; margin: 20px 0 0; }

/* These two cards intentionally retain a dark surface in the light theme. */
body.light .capability-card:not(.capability-featured):not(.capability-quote) { color: #e8f3eb; }
body.light .capability-card:not(.capability-featured):not(.capability-quote) > p:not(.card-index) { color: #a9beb2; }
body.light .capability-card:not(.capability-featured):not(.capability-quote) .card-index { color: var(--mint); }

/* Navigation and content share one desktop grid. */
@media (min-width: 651px) { .site-header { width: min(1180px, calc(100% - 48px)); } }

.contact-email { display: inline-flex; gap: 9px; align-items: center; margin-top: 24px; color: var(--acid); font-family: var(--mono); font-size: .78rem; letter-spacing: .02em; }
.contact-email:hover, .briefing-form small a, .footer-email:hover { color: var(--acid); text-decoration: underline; text-underline-offset: 4px; }
.footer-main > div > p { max-width: 350px; margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.6; }
.footer-email { display: inline-block; margin-top: 12px; color: var(--mint); font-family: var(--mono); font-size: .7rem; }