/* agent-spatial-architecture-glass.css — gradient-glass planes, layer-coloured labels, narrow-screen tags, title overlay
   with the scan-line reveal. Generated from feature_design/agent-hero-comic-integration-v1/source/site-module.css. */
.spatial-architecture .architecture-graphic .layer-parts text{fill:currentColor}
.spatial-architecture .architecture-graphic .plane{stroke-opacity:.92;stroke-width:1.1}
.spatial-architecture .architecture-graphic .plane-edge{fill-opacity:.36;stroke-opacity:.92}
.spatial-architecture .architecture-graphic .plane-shine{opacity:.9!important;mix-blend-mode:screen}
.spatial-architecture .architecture-graphic .component-surface{fill-opacity:.2}
.spatial-architecture .architecture-graphic .component-dash{opacity:.75}
.spatial-architecture .spatial-surface{filter:drop-shadow(0 12px 22px color-mix(in srgb,currentColor 22%,transparent))}
.spatial-architecture .architecture-graphic.has-selection .spatial-layer:not(.is-lit) .spatial-surface{opacity:.42}
.spatial-architecture .spatial-layer.is-lit .plane{stroke-width:2;filter:drop-shadow(0 0 8px color-mix(in srgb,currentColor 45%,transparent))}
.spatial-architecture .spatial-layer.is-lit .plane-edge{fill-opacity:.55}
.spatial-architecture .architecture-drawing{position:relative}
.spatial-architecture .architecture-graphic{transition:opacity .2s linear}
/* Title overlay: the intro sits centred over the (initially hidden) stack and yields to it on scroll. */
.agent-marketing-home #architecture.spatial-architecture .spatial-intro{top:50%;left:0;right:0;text-align:center;padding:0 24px;z-index:5}
.agent-marketing-home #architecture.spatial-architecture h2{font-size:clamp(34px,3.6vw,54px)}
.spatial-intro>p{font-size:16px}
/* Scan-line reveal: a page-dark front layer over cards and drawing; a light above the title grows as the layer fades. */
.reveal-stage{position:absolute;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);z-index:4;pointer-events:none;opacity:0;transition:opacity .2s linear;overflow:hidden}
.reveal-cover{position:absolute;inset:0;display:none;background:#0d0b14}
.reveal-cover.is-dark{background:#0d0b14}
.reveal-line{position:absolute;height:2px;transform:translateX(-50%);display:none;background:linear-gradient(90deg,transparent,#d9c8ff 18%,#f1e9ff 50%,#d9c8ff 82%,transparent);box-shadow:0 0 18px 6px #9d7ef066,0 0 48px 14px #7946ee33}
/* Narrow screens: capability cards become wrapping tags and the explanation card shrinks. */
@media(max-width:980px),(max-height:599px){
.agent-marketing-home #architecture.spatial-architecture .spatial-intro{min-height:calc(62svh - 64px);display:flex;flex-direction:column;justify-content:flex-end;align-items:center;text-align:center;padding:72px 16px 28px;margin:0}
.agent-marketing-home #architecture.spatial-architecture .spatial-intro>p{display:block;font-size:15px}
.agent-marketing-home #architecture.spatial-architecture h2{margin-bottom:14px}
.spatial-architecture .difference-grid{display:flex;flex-wrap:wrap;gap:8px 8px;padding:4px 0 2px}
.agent-marketing-home .spatial-architecture .feature-card,.agent-marketing-home .spatial-architecture .feature-card:first-child,.spatial-architecture .feature-card:nth-child(2){display:inline-grid;grid-template-columns:26px auto;gap:0 8px;align-items:center;width:auto;max-width:calc(50% - 4px);min-height:40px;padding:6px 14px 6px 7px;border:1px solid #b6a1d038;border-radius:999px;background:#15111d;color:#ddd2e8}
.agent-marketing-home .spatial-architecture .feature-card.is-active{background:#2a2038;border-color:var(--feature-color,#b59dcf);box-shadow:none}
.spatial-architecture .capability-art{width:26px;height:26px;grid-row:1;opacity:.9}
.spatial-architecture .feature-card .feature-title{font-size:13px;line-height:1.25;font-weight:500;white-space:normal;text-align:left}
.spatial-architecture .feature-card .feature-description{display:none}
.spatial-architecture .spatial-detail{min-height:0;margin-top:12px;padding:10px 12px 11px;border-radius:7px}
.spatial-architecture .spatial-detail-title{font-size:15px!important;line-height:1.35!important;margin:0 0 4px!important}
.spatial-architecture .spatial-detail-copy{font-size:12px!important;line-height:1.6!important;min-height:0}
.agent-marketing-home .architecture-download{margin:8px 4px 0;font-size:12px;min-height:36px}
}
@media(max-width:400px){.spatial-architecture .feature-card .feature-title{font-size:12px}.agent-marketing-home .spatial-architecture .feature-card{padding:5px 11px 5px 6px;min-height:36px}}
@media(prefers-reduced-motion:reduce){.spatial-architecture .architecture-graphic{transition:none}}