/* AEXGrid · Black / spectral identity
 * The content stage is deliberately UNFRAMED. Borders belong to individual
 * hardware objects and real controls, not a container around every page.
 * Tuning points: grid opacity/spacing, heading gradient, and optical recipes.
 */
:root { --grid-opacity: .20; --grid-size: 52px; --content-rule: #ffffff18; }
html { background: #000; scrollbar-color: #39393f #000; }
body { background: #000; }
.background-grid { z-index: 0; background: none; }
.background-grid::before { content: ''; position: absolute; inset: 0; opacity: var(--grid-opacity); background: linear-gradient(112deg, #00e6f1 4%, #2082ff 35%, #8756ff 62%, #f956cc 95%); mask-image: linear-gradient(to right, #000 1px, transparent 1px), linear-gradient(to bottom, #000 1px, transparent 1px); mask-size: var(--grid-size) var(--grid-size); mask-repeat: repeat; }
.background-grid::after { background: radial-gradient(ellipse 43% 60% at 50% 43%, #000c, #0008 65%, transparent 100%), linear-gradient(#0008, transparent 18%, transparent 85%, #0007); }
.site-header { background: #000; border-bottom-color: #ffffff16; }
.site-header::after { content: ''; position: absolute; inset: auto 3% -1px; height: 1px; background: linear-gradient(90deg, transparent, #00d4f044 14%, #6961ff33 57%, #f85be233 88%, transparent); pointer-events: none; }
.wordmark { min-width: 180px; letter-spacing: 0; }
.wordmark .brand-lockup { width: 190px; height: 40px; color: #f5f5f7; }
.header-descriptor { color: #93939f; }
.header-nav { color: #b9b9c3; }
.header-download { background: transparent; border-color: #44444b; min-height: 44px; }
.header-download:hover { background: #ffffff09; border-color: var(--cyan); }
.mobile-menu nav { background: #080809; border-color: #343438; }
.agent-board { background: #050505; box-shadow: 0 4px 0 #0008; }
.agent-node__socket { background: #030303; }
.agent-node__descriptor { color: #9e9eae; }
.route__base { stroke: currentColor; opacity: .20; }
.stage-rails path { stroke: #9191a5; opacity: .09; }
.channel-mode .scene-chrome { background: linear-gradient(transparent, #000 36%); }
.motion-control, .reading-control { color: #a8a8b4; }
.section-title { font-weight: 570; letter-spacing: -.055em; line-height: 1.09; }
.section-title > span { color: #cad3e9; background: linear-gradient(100deg, #44e1f2 0%, #8ec8ff 37%, #b298f5 69%, #ef8fdb 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 500; }
.section-description { color: #b4b4be; }
.eyebrow { letter-spacing: .15em; }
.section-heading { margin-bottom: 35px; }
.text-link { text-underline-offset: 6px; }
.button--secondary { background: #080809; border-color: #44444c; }
.button--secondary:hover { background: #121214; }
.button--unavailable { background: #0b0b0c; border-color: #353539; color: #a7a7b2; }
.context-note { color: #9696a1; }

/* Only the video gets a media boundary. Its title/caption are outside the picture,
 * not a giant filled dashboard card with a slab along the bottom. */
.demo-stage { border: 0; box-shadow: none; background: transparent; }
.demo-stage__media { border: 1px solid #ffffff23; background: #020203; }
.demo-stage__topbar { background: linear-gradient(#080808f5, #080808ed); border-bottom-color: #ffffff13; }
.demo-stage__caption { position: relative; padding: 14px 0 0; min-height: 0; border: 0; background: transparent; gap: 12px; }
.demo-stage__caption-mark { width: 28px; height: 28px; background: transparent; border-color: #30d7ef40; }
.demo-stage__caption strong { font-size: 13px; color: #e8e8ee; }
.demo-stage__caption p { font-size: 10px; color: #9c9ca8; }
.demo-stage .frame-corner { display: none; }
.demo-stage__pending { color: #9b9ba7; font-size: 8px; }
.demo-stage video { background: #000; }
.video-error { background: #060606f5; }

/* Open editorial explorers. Tabs stay discoverable, with an underline instead
 * of a filled segmented control or enclosing rectangle. */
.feature-explorer, .connections-explorer, .workflow-illustration { border: 0; background: transparent; box-shadow: none; }
.editorial-tabs { background: transparent; border-bottom: 1px solid var(--content-rule); gap: 26px; }
.editorial-tabs [role='tab'] { flex: 0 1 auto; min-height: 50px; padding: 0 0 8px; font-size: 13px; gap: 10px; }
.editorial-tabs [role='tab'] + [role='tab'] { border-left: 0; }
.editorial-tabs [role='tab'][aria-selected='true'], .editorial-tabs [role='tab']:hover { background: transparent; color: #f4f4f8; }
.editorial-tabs [role='tab'][aria-selected='true']::after { left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(--section-color), #bbccff); }
.editorial-tabs [role='tab'] .icon { width: 14px; height: 14px; margin-left: 8px; }
.feature-panel { grid-template-columns: 43% 57%; }
.feature-illustration { border: 0; background: none; padding-left: 14px; padding-right: 38px; }
.feature-panel__copy { padding: 31px 0 24px 35px; }
.feature-panel__copy h3 { font-size: 27px; letter-spacing: -.8px; }
.feature-panel__copy > p { font-size: 13px; }
.feature-panel__copy dd { font-size: 12px; color: #aeafba; }
.feature-panel__copy dt { font-size: 13px; }
.diagram-coordinate { color: #8b8b99; letter-spacing: .11em; }
.diagram-coordinate--bottom { color: #aa9bbf; }
.mini-room { background: #040c0c; border-color: #30c5c760; }
.mini-room--violet { background: #0d0715; border-color: #aa5cea75; }
.mini-role, .mini-workers > div { background: #060608; }
.context-stack__front { background: #07070a; border-color: #6e63a880; }
.context-stack__back { background: #020203; border-color: #69617e50; }
.section-bottomline { border-top: 1px solid var(--content-rule); padding-top: 8px; }

/* Reporting hierarchy: only the actual nodes are bounded. */
.diagram-topline { background: transparent; border-bottom: 1px solid var(--content-rule); padding-left: 0; padding-right: 0; }
.workflow-tree { background: none; }
.workflow-room { background: transparent; border-width: 0; border-top: 1px solid #4e9b823c; padding-top: 20px; }
.workflow-room--violet { background: transparent; border-top-color: #b47cff40; }
.workflow-room__label { background: #000; }
.workflow-root { background: #050a09; border-color: #32cdad66; }
.workflow-manager { background: #050a08; border-color: #32ad885e; }
.workflow-room--violet .workflow-manager { background: #0c0610; border-color: #a35dec73; }
.workflow-worker { background: #060607; border-color: #ffffff25; }
.workflow-review { background: transparent; padding-left: 0; padding-right: 0; border-top-color: var(--content-rule); }
.workflow-review.is-reviewed { background: #00e39b06; border-top-color: #00e39b8a; }
.review-icon { background: transparent; }

/* Connection objects float directly over the shared grid. */
.connection-map { background: none; }
.connection-pill, .connection-end--application .connection-pill { background: #070708; border-color: #75829b66; }
.connection-end--application .connection-pill { border-color: #ab77c96b; }
.connection-hub { background: #050505; border: 0; box-shadow: none; }
.connection-hub::before, .connection-hub::after { display: none; }
.connection-hub .emblem { width: 62px; height: 62px; }
.connection-hub__sub { color: #93939e; }
.connection-panel { padding: 25px 0; gap: 36px; }
.connection-panel h3 { font-size: 26px; }
.connection-panel > div > p { font-size: 13px; }
.compatibility-note { background: transparent; padding: 0 0 0 18px; border: 0; border-left: 1px solid #506b9999; color: #ababba; font-size: 12px; }

/* Pricing / Downloads: remove the outer rectangle, the filled illustration area,
 * the footer slab, and the redundant padded card feeling at every breakpoint. */
.pricing-placeholder, .download-placeholder { border: 0; background: transparent; grid-template-columns: 34% 66%; column-gap: 0; }
.pricing-art, .download-art { background: none; border: 0; min-height: 264px; }
.pricing-art__outer, .pricing-art__inner { border: 0; }
.pricing-art__outer { width: 214px; height: 160px; background: linear-gradient(90deg, #00dcf65e, #a58dff6e, #f85cca5c) 0 50% / 100% 1px no-repeat, linear-gradient(#00dcf600, #b99bff63, #00dcf600) 50% 0 / 1px 100% no-repeat; }
.pricing-chip { width: 118px; height: 130px; background: #070705; border-color: #ddc568; box-shadow: 0 0 0 5px #000, 0 0 28px #e9c55508; }
.pricing-chip > .mono { color: #dbc96c; }
.pricing-chip__slots i { border-color: #e1c56e; background: #e1c56e15; }
.chip-pin { background: repeating-linear-gradient(90deg, #b69c5a 0 2px, transparent 2px 12px); }
.pricing-art__cross { opacity: .55; }
.pricing-art__cross--one { top: 48px; left: 24px; }
.pricing-art__cross--two { bottom: 49px; right: 24px; }
.pricing-placeholder__copy, .download-placeholder__copy { padding: 28px 0 30px 35px; }
.availability-label { font-size: 9px; color: #ecd07c; letter-spacing: .13em; }
.pricing-placeholder__copy h3, .download-placeholder__copy h3 { font-size: 32px; font-weight: 530; max-width: 405px; line-height: 1.18; letter-spacing: -.9px; }
.pricing-placeholder__copy p, .download-placeholder__copy > p:not(.download-reason) { font-size: 13px; max-width: 425px; color: #b1b1be; line-height: 1.85; }
.pricing-placeholder__copy .text-link { min-height: 44px; font-size: 12px; color: #e9cc72; }
.pricing-detail-row, .download-detail-row { padding: 24px 0 18px; margin-top: 9px; border-top: 1px solid var(--content-rule); background: none; gap: 22px; }
.pricing-detail-row > div + div, .download-detail-row > div + div { border: 0; padding-left: 0; }
.pricing-detail-row dt, .download-detail-row dt { font-size: 12px; color: #e0e0e7; }
.pricing-detail-row dd, .download-detail-row dd { font-size: 10px; color: #a6a6b3; }
.download-art__bracket { border-color: #8a68ff45; }
.download-art__platform { background: #9165ff12; border-color: #9c79f878; }
.download-art__platform::after { border-color: #a37bf744; }
.download-art__label { color: #bca9e6; }
.download-reason { color: #9e9eac; }
.published-plan, .release-card { background: transparent; border-width: 1px 0 0; border-color: var(--content-rule); padding: 24px 0; }
.site-footer { border-top-color: var(--content-rule); }
.footer-identity .emblem { width: 33px; height: 33px; }
.site-footer .text-link { color: #aaaab5; }

/* The optical engine owns geometry and timing; CSS only positions its light. */
.channel-mask-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.channel-fx { display: none; position: fixed; left: 50%; top: var(--channel-top); bottom: var(--channel-bottom); width: var(--stage-width); max-width: 940px; transform: translateX(-50%); overflow: hidden; z-index: 8; pointer-events: none; color: var(--channel-color, var(--cyan)); contain: layout paint; }
.channel-mode .channel-fx.is-running { display: block; }
.channel-fx__field { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.channel-plane.is-materializing { will-change: clip-path; }
.channel-fx__label { position: absolute; left: 0; bottom: 7px; font: 8px var(--font-mono); letter-spacing: .13em; color: currentColor; opacity: .7; }
.channel-fx__progress { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: linear-gradient(90deg, #00e6ff, #6280ff 48%, #e474ef); opacity: .55; transform-origin: left; transform: scaleX(var(--transfer-progress, 0)); }
html.channel-mode[data-transitioning='true'] .section__inner { pointer-events: none; }
@media (min-width: 1121px) and (max-height: 800px) and (pointer: fine) {
  .channel-mode .section--home .demo-stage, .channel-mode .home-actions { width: min(100%, 540px); }
  .channel-mode .home-actions { margin-top: 8px; }
  .channel-mode .section--home .section-heading { margin-bottom: 13px; }
  .channel-mode .section--home .section-title { font-size: 39px; }
  .channel-mode .section--home .section-description { margin-top: 9px; }
  .channel-mode .section--home .demo-stage__caption { padding-top: 10px; }
  .channel-mode .download-placeholder { grid-template-columns: 29% 71%; }
  .channel-mode .download-placeholder__copy { padding: 18px 0 20px 28px; }
  .channel-mode .download-detail-row { padding: 18px 0 12px; }
  .channel-mode .feature-panel__copy { padding-left: 26px; padding-right: 0; }
  .channel-mode .connection-panel { padding-left: 0; padding-right: 0; }
}
@media (min-width: 1121px) and (min-height: 801px) and (pointer: fine) {
  .channel-mode .section--home .demo-stage, .channel-mode .home-actions { width: min(100%, 720px); }
  .channel-mode .download-detail-row { padding-left: 0; padding-right: 0; }
}
@media (max-width: 1120px), (max-height: 659px), (pointer: coarse) {
  .agent-network { background: #000; border-bottom-color: #ffffff12; }
  .motion-control, .reading-control { background: #080809; border-color: #343438; }
  .channel-mode .section__inner, .channel-fx { width: min(840px, calc(100% - 2 * var(--content-gutter))); }
  .header-descriptor { display: none; }
}
@media (max-width: 679px) {
  :root { --grid-size: 40px; --grid-opacity: .2; }
  .site-header { gap: 12px; }
  .wordmark { min-width: 0; }
  .wordmark .brand-lockup { width: 154px; height: 35px; }
  .header-download { min-height: 44px; }
  .mobile-menu summary { min-width: 44px; min-height: 44px; }
  .section-title { font-size: 37px; }
  .feature-panel { grid-template-columns: 1fr; }
  .feature-illustration { padding: 26px 18px; min-height: 235px; border: 0; }
  .feature-panel__copy { padding: 5px 0 22px; }
  .feature-panel__copy h3 { font-size: 26px; max-width: none; }
  .editorial-tabs { gap: 22px; }
  .editorial-tabs [role='tab'] { min-height: 47px; padding: 0 0 8px; font-size: 12px; }
  .editorial-tabs [role='tab'] .icon { display: none; }
  .editorial-tabs [role='tab'][aria-selected='true']::after { left: 0; right: 0; }
  .demo-stage__caption { padding: 12px 0 0; min-height: 0; }
  .demo-stage__caption p { font-size: 10px; max-width: none; }
  .demo-stage__caption strong { font-size: 13px; }
  .section--home .home-actions__note { font-size: 10px; }
  .connection-panel { padding: 24px 0 0; }
  .compatibility-note { font-size: 12px; padding: 0 0 0 12px; }
  .connection-map { padding-left: 0; padding-right: 0; }
  .connection-hub .emblem { width: 46px; height: 46px; }
  .pricing-placeholder, .download-placeholder { grid-template-columns: 1fr; }
  .pricing-art { min-height: 195px; }
  .pricing-art__cross--one { top: 30px; left: 38px; }
  .pricing-art__cross--two { bottom: 30px; right: 38px; }
  .pricing-chip { width: 98px; height: 110px; }
  .pricing-art__outer { width: 237px; height: 145px; }
  .pricing-placeholder__copy, .download-placeholder__copy { padding: 8px 0 22px; }
  .pricing-placeholder__copy h3, .download-placeholder__copy h3 { max-width: none; font-size: 29px; }
  .pricing-placeholder__copy p, .download-placeholder__copy > p:not(.download-reason) { font-size: 13px; }
  .pricing-detail-row, .download-detail-row { grid-template-columns: 1fr; gap: 20px; padding: 22px 0 12px; }
  .pricing-detail-row > div, .download-detail-row > div { display: flex; justify-content: space-between; gap: 8px; }
  .pricing-detail-row > div + div, .download-detail-row > div + div { padding: 0; }
  .pricing-detail-row dt, .download-detail-row dt { font-size: 12px; }
  .pricing-detail-row dd, .download-detail-row dd { font-size: 9px; text-align: right; }
  .download-art { min-height: 220px; border: 0; }
  .workflow-review { padding: 18px 0; }
  .diagram-topline { padding: 0; }
  .workflow-room { padding-top: 14px; }
  .channel-fx__label { font-size: 7px; }
}
@media (max-width: 375px) {
  .wordmark .brand-lockup { width: 135px; }
  .site-header { padding-left: 14px; padding-right: 14px; gap: 7px; }
  .header-download { padding: 0 9px; gap: 7px; }
  .section-title { font-size: 33px; }
  .editorial-tabs { gap: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .channel-fx { display: none !important; }
  .section-title > span { -webkit-text-fill-color: currentColor; background: none; }
}
@media (forced-colors: active) {
  .section-title > span { background: none; -webkit-text-fill-color: currentColor; }
  .background-grid, .channel-fx { display: none; }
}
@media print {
  .section-title > span { background: none; color: black; -webkit-text-fill-color: black; }
  .section-description { color: black; }
  .brand-lockup { color: black; }
}

/* Optical fit after rendered inspection: one consistent left edge for the
 * media and its CTA, with no caption hidden inside the 16:9 clipping box. */
@media (min-width: 1121px) and (pointer: fine) {
  .channel-mode .section--home .demo-stage, .channel-mode .home-actions { margin-left: 0; margin-right: 0; }
}