.integration-architecture{background:#fff}
.integration-architecture>.wrap{width:calc(100% - 64px);max-width:1600px}
.architecture-viewer{margin:0;min-width:0;color:var(--navy)}
.architecture-guide{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 24px;padding-bottom:20px;border-bottom:1px solid var(--line);font-size:15px;line-height:1.5;color:var(--muted)}
.architecture-link-key{display:flex;align-items:center;gap:12px}
.architecture-link-key>svg{width:20px;height:20px;flex:none;color:var(--teal)}
.architecture-scroll-hint{display:none}
.architecture-viewport{width:100%;overflow-x:auto;overflow-y:hidden;background:#fff;padding:14px 0;scrollbar-width:thin;scrollbar-color:var(--teal) #edf3f5}
.architecture-drawing{position:relative;width:100%;min-width:1320px;margin:0 auto;isolation:isolate}
.architecture-drawing>img{display:block;width:100%;height:auto;max-width:none;user-select:none}
.architecture-product-link{position:absolute;display:block;color:var(--teal);border:2px solid var(--teal);text-decoration:none}
.architecture-link-arrow{position:absolute;top:-12px;right:-12px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--teal);color:white}
.architecture-link-arrow>svg{width:14px;height:14px}
.architecture-product-link:hover,.architecture-product-link.is-active{border-color:var(--navy);background:rgba(0,122,143,.09)}
.architecture-product-link.is-active .architecture-link-arrow{background:var(--navy)}
.architecture-product-link:focus-visible,.architecture-viewport:focus-visible,.architecture-product-index a:focus-visible{outline:3px solid var(--teal);outline-offset:5px}
.architecture-product-index{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 36px;margin-top:32px;padding-top:8px;border-top:1px solid var(--line)}
.architecture-product-index a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:58px;padding:12px 0;border-bottom:1px solid var(--line);color:var(--navy);font-size:16px;font-weight:600;text-decoration:none}
.architecture-product-index svg{width:16px;height:16px;flex:none;color:var(--teal)}
.architecture-product-index a:hover,.architecture-product-index a.is-active{color:var(--teal);text-decoration:underline;text-underline-offset:5px}

@media(max-width:1450px){.architecture-scroll-hint{display:block}}
@media(max-width:760px){.architecture-guide{align-items:flex-start;flex-direction:column;gap:10px;font-size:14px}.architecture-product-index{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;margin-top:24px}.architecture-product-index a{font-size:15px}.architecture-viewport{padding-top:4px}}
@media(max-width:420px){.architecture-product-index{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.architecture-viewer *{transition:none!important}}
@media print{.architecture-guide,.architecture-product-index,.architecture-link-arrow{display:none}.architecture-viewport{overflow:visible}.architecture-drawing{width:100%;min-width:0}.architecture-product-link{border:0}}

@media(min-width:1100px){.architecture-drawing{min-width:0}.architecture-scroll-hint{display:none}}
@media(max-width:700px){.integration-architecture>.wrap{width:calc(100% - 40px)}}
/* The legend is bounded by the drawing, outside its horizontal scroll container. */
.architecture-exploration{position:relative}
.architecture-legend{position:sticky;top:var(--architecture-header-height,96px);z-index:8;background:#fff;border-block:1px solid var(--line);padding:14px 0 16px}
.architecture-legend-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
.architecture-legend h3{font-size:22px;line-height:1.2;margin:0}
.architecture-legend ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 20px;list-style:none;margin:0;padding:0}
.architecture-legend li{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600;line-height:1.4;color:var(--navy)}
.architecture-legend li svg{width:60px;height:20px;flex:none}
.architecture-web .architecture-system-surface{fill-opacity:.55;stroke-opacity:.6}
.architecture-web .architecture-system-heading{fill-opacity:.55}
.architecture-web .architecture-node-title{font-weight:600}
.architecture-svg>svg{display:block;width:100%;height:auto;user-select:none}
.architecture-product-link{transform-origin:center}
.architecture-product-link:hover{background:transparent}
.architecture-product-link.is-active{background:rgba(0,122,143,.06)}
.architecture-vecu-info{position:absolute;z-index:5}
.architecture-vecu-info>button{display:grid;place-items:center;width:30px;height:30px;padding:3px;border:0;border-radius:50%;background:#fff;color:var(--teal);cursor:pointer;transform:translate(-50%,-50%)}
.architecture-vecu-info>button svg{width:24px;height:24px}
.architecture-vecu-info>button:hover,.architecture-vecu-info>button[aria-expanded=true]{background:var(--teal);color:#fff}
.architecture-vecu-info>button:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.architecture-info-panel{position:absolute;right:0;top:26px;width:280px;padding:20px;background:#fff;color:var(--navy);border:1px solid var(--teal);font-size:14px;line-height:1.5}
.architecture-info-panel strong{display:block;font-size:16px}
.architecture-info-panel p{margin:10px 0}
.architecture-info-panel ul{padding-left:18px;margin:0}
@media(max-width:1100px){.architecture-legend ul{grid-template-columns:repeat(3,minmax(0,1fr))}.architecture-legend li{font-size:15px}.architecture-legend li svg{width:48px}}
@media(max-width:760px){.architecture-legend{padding:10px 0}.architecture-legend h3{font-size:20px}.architecture-legend ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px}.architecture-legend li{font-size:14px;gap:6px}.architecture-legend li svg{width:42px}.architecture-info-panel{width:260px}}
@media print{.architecture-legend{position:static}.architecture-vecu-info{display:none}}

/* Continuous hover path between the information button and its panel. */
.architecture-info-panel::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}

/* Gentle hover disclosure. */
.architecture-info-panel{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(4px);transition:opacity 160ms ease-out,transform 160ms ease-out,visibility 0s 160ms}
.architecture-info-panel.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition:opacity 280ms cubic-bezier(.22,1,.36,1),transform 280ms cubic-bezier(.22,1,.36,1),visibility 0s}
@media(prefers-reduced-motion:reduce){.architecture-info-panel,.architecture-info-panel.is-open{transform:none;transition:none}}

/* Product emphasis with connected geometry; no continuous CAN flow. */
.architecture-product-link{transition:background .24s,border-color .24s}
.architecture-link-arrow{transition:background .24s,transform .24s}
.architecture-product-link.is-active .architecture-link-arrow{transform:translate(2px,-2px)}
.architecture-product-index a{transition:color .24s}
.architecture-product-index svg{transition:transform .24s}
.architecture-product-index a:hover svg{transform:translate(2px,-2px)}
@media(prefers-reduced-motion:reduce){.architecture-product-link.is-active .architecture-link-arrow,.architecture-product-index a:hover svg{transform:none}}