/* Native illustrations, limited to the Exchange solution page. No inline SVG or runtime drawing. */
.document-body .exchange-mail-solution { container:exchange-solution / inline-size; }
.exchange-mail-solution .solution-scenarios { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:14px 0 26px; padding:0; list-style:none; }
.exchange-mail-solution .solution-scenarios li { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-width:0; margin:0; padding:16px 12px; border:1px solid #d8e5ef; border-radius:10px; background:linear-gradient(155deg,#fff,#f3f8fc); color:#284e6d; font-size:.9375rem; font-weight:550; line-height:1.6; text-align:center; cursor:default; }
.exchange-mail-solution .solution-scenarios li::before { content:""; display:block; flex:none; width:52px; height:44px; background-position:center; background-size:contain; background-repeat:no-repeat; }
/* Reviewed scenario meanings per page; see docs/icon-semantics.md before reordering copy. */
[data-content-path="/Solutions/Exchangefa2.html"] .solution-scenarios li:nth-child(1)::before { background-image:url('/images/solution-exchange.svg'); }
[data-content-path="/Solutions/Exchangefa2.html"] .solution-scenarios li:nth-child(2)::before { background-image:url('/images/semantic-storage.svg'); }
[data-content-path="/Solutions/Exchangefa2.html"] .solution-scenarios li:nth-child(3)::before { background-image:url('/images/semantic-maintenance.svg'); }
[data-content-path="/Solutions/Exchangefa2.html"] .solution-scenarios li:nth-child(4)::before { background-image:url('/images/solution-client.svg'); }
[data-content-path="/Solutions/ExchangeHybrid.html"] .solution-scenarios li:nth-child(1)::before { background-image:url('/images/solution-exchange.svg'); }
[data-content-path="/Solutions/ExchangeHybrid.html"] .solution-scenarios li:nth-child(2)::before { background-image:url('/images/semantic-calendar.svg'); }
[data-content-path="/Solutions/ExchangeHybrid.html"] .solution-scenarios li:nth-child(3)::before { background-image:url('/images/solution-cloud.svg'); }
[data-content-path="/Solutions/ExchangeHybrid.html"] .solution-scenarios li:nth-child(4)::before { background-image:url('/images/semantic-migration.svg'); }
[data-content-path="/Solutions/ExchangeCloudMigration.html"] .solution-scenarios li:nth-child(1)::before { background-image:url('/images/semantic-migration.svg'); }
[data-content-path="/Solutions/ExchangeCloudMigration.html"] .solution-scenarios li:nth-child(2)::before { background-image:url('/images/semantic-maintenance.svg'); }
[data-content-path="/Solutions/ExchangeCloudMigration.html"] .solution-scenarios li:nth-child(3)::before { background-image:url('/images/semantic-identity.svg'); }
[data-content-path="/Solutions/ExchangeCloudMigration.html"] .solution-scenarios li:nth-child(4)::before { background-image:url('/images/semantic-support.svg'); }
@container exchange-solution (max-width:720px) {
	.exchange-mail-solution .solution-scenarios { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@container exchange-solution (max-width:360px) {
	.exchange-mail-solution .solution-scenarios { grid-template-columns:minmax(0,1fr); gap:10px; }
	.exchange-mail-solution .solution-scenarios li { flex-direction:row; justify-content:flex-start; gap:14px; padding:12px 16px; text-align:left; }
	.exchange-mail-solution .solution-scenarios li::before { width:44px; height:38px; }
}
.exchange-mail-solution .solution-architecture { margin:18px 0 28px; padding:22px; border:1px solid #d5e3ef; border-radius:14px; background:#fff; }
.exchange-mail-solution .solution-architecture figcaption { margin-bottom:18px; font-size:1rem; font-weight:650; color:#244f73; }
.exchange-mail-solution .solution-lane { --route-color:#4b89b7; padding:16px; border-radius:12px; background:#f0f6fc; }
.exchange-mail-solution .solution-lane-mail { --route-color:#519583; background:#f0f8f4; }
.exchange-mail-solution .solution-lane h3 { display:flex; align-items:center; gap:8px; margin:0 0 14px; padding:0; border:0; font-size:.9375rem; font-weight:650; line-height:1.6; color:#315e80; }
.exchange-mail-solution .solution-lane h3::before { content:""; width:6px; height:16px; border-radius:3px; background:var(--route-color); }
.exchange-mail-solution .solution-lane-mail h3 { color:#367364; }
.exchange-mail-solution .solution-lane + .solution-lane { margin-top:20px; }
.exchange-mail-solution .solution-route { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; margin:0; padding:0; list-style:none; }
.exchange-mail-solution .solution-node { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:7px; min-width:0; margin:0; padding:12px 8px; border:1px solid transparent; border-radius:10px; background:transparent; text-align:center; font-size:.8125rem; line-height:1.6; }
.exchange-mail-solution .solution-node strong { font-size:.9375rem; color:#254c6d; }
.exchange-mail-solution .solution-node:nth-child(2) { border-color:#d3e3ef; background:#ffffffb8; }
.exchange-mail-solution .solution-lane-mail .solution-node:nth-child(2) { border-color:#d0e5dc; }
.exchange-mail-solution .solution-node small { font-size:.75rem; color:#617b90; }
/* Two arrowheads: client requests/responses and SMTP inbound/outbound are bidirectional. */
.exchange-mail-solution .solution-node:not(:last-child)::after { content:""; position:absolute; top:50px; left:100%; width:32px; height:12px; background:var(--route-color); clip-path:polygon(0 50%,22% 0,22% 37%,78% 37%,78% 0,100% 50%,78% 100%,78% 63%,22% 63%,22% 100%); }
.exchange-mail-solution .solution-node-core { border-color:#b6d2e8; background:#e0effc; box-shadow:0 3px 8px #255b8010; }
.exchange-mail-solution .solution-lane-mail .solution-node-core { border-color:#b6d2e8; background:#e0effc; }
.exchange-mail-solution .solution-icon { display:block; flex:none; width:96px; height:80px; max-width:100%; margin:0 0 5px; background-position:center; background-size:contain; background-repeat:no-repeat; }
.exchange-mail-solution .solution-icon-computer { background-image:url('/images/solution-client.svg'); }
.exchange-mail-solution .solution-icon-server { background-image:url('/images/solution-exchange.svg'); }
.exchange-mail-solution .solution-icon-cluster { background-image:url('/images/solution-access.svg'); }
.exchange-mail-solution .solution-icon-cloud { background-image:url('/images/solution-cloud.svg'); }
.exchange-mail-solution .solution-lane-mail .solution-node:first-child .solution-icon { background-image:url('/images/solution-external-mail.svg'); }
.exchange-mail-solution .solution-lane-mail .solution-node:nth-child(2) .solution-icon { background-image:url('/images/solution-mail-gateway.svg'); }
/* New cloud solutions reuse the layout, but keep identity/data directions distinct. */
.exchange-mail-solution.exchange-cloud-solution .solution-lane-neutral .solution-node .solution-icon-server { background-image:url('/images/solution-exchange.svg'); }
.exchange-mail-solution.exchange-cloud-solution .solution-lane-neutral .solution-node .solution-icon-cluster { background-image:url('/images/solution-access.svg'); }
.exchange-mail-solution.exchange-cloud-solution .solution-lane-neutral .solution-node .solution-icon-computer { background-image:url('/images/solution-client.svg'); }
.exchange-mail-solution.exchange-cloud-solution .solution-lane-neutral .solution-node .solution-icon-cloud { background-image:url('/images/solution-cloud.svg'); }
/* Identity is not mail flow: directory accounts -> account synchronization -> cloud identity. */
[data-content-path="/Solutions/ExchangeHybrid.html"] .solution-route-forward .solution-icon-server,
[data-content-path="/Solutions/ExchangeHybrid.html"] .solution-route-forward .solution-icon-cloud { background-image:url('/images/semantic-identity.svg'); }
[data-content-path="/Solutions/ExchangeHybrid.html"] .solution-route-forward .solution-icon-cluster { background-image:url('/images/semantic-identity-sync.svg'); }
[data-content-path="/Solutions/ExchangeHybrid.html"] .exchange-cloud-solution .solution-lane-neutral .solution-node .solution-icon-cluster { background-image:url('/images/semantic-connection.svg'); }
[data-content-path="/Solutions/ExchangeHybrid.html"] .solution-options .solution-icon-cluster { background-image:url('/images/semantic-identity.svg'); }
[data-content-path="/Solutions/ExchangeHybrid.html"] .solution-options .solution-icon-server { background-image:url('/images/semantic-dns.svg'); }
[data-content-path="/Solutions/ExchangeHybrid.html"] .solution-options .solution-icon-cloud { background-image:url('/images/semantic-maintenance.svg'); }
/* Moving mailbox data is distinct from access protection; retain genuine access and mailbox nodes. */
[data-content-path="/Solutions/ExchangeCloudMigration.html"] .solution-route-forward .solution-icon-cluster { background-image:url('/images/semantic-migration.svg'); }
[data-content-path="/Solutions/ExchangeCloudMigration.html"] .solution-options .solution-icon-server { background-image:url('/images/semantic-checklist.svg'); }
[data-content-path="/Solutions/ExchangeCloudMigration.html"] .solution-options .solution-icon-cluster { background-image:url('/images/semantic-migration.svg'); }
[data-content-path="/Solutions/ExchangeCloudMigration.html"] .solution-options .solution-icon-cloud { background-image:url('/images/semantic-monitor.svg'); }
.exchange-cloud-solution .solution-route-forward .solution-node:not(:last-child)::after { clip-path:polygon(0 37%,72% 37%,72% 0,100% 50%,72% 100%,72% 63%,0 63%); }
.exchange-mail-solution .solution-foundation { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:22px 0 0; padding:16px 0 0; border-top:1px solid #dbe6ef; list-style:none; }
.exchange-mail-solution .solution-foundation li { margin:0; padding:8px 10px; border-left:3px solid #b5cddf; border-radius:3px; background:#f6f9fc; font-size:.75rem; line-height:1.7; }
.exchange-mail-solution .solution-foundation strong { display:block; color:#3b5a73; font-size:.8125rem; }
.exchange-mail-solution .solution-diagram-note { margin:14px 0 0; color:#60788c; font-size:.75rem; line-height:1.7; }
.exchange-mail-solution .solution-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:16px 0; }
.exchange-mail-solution .solution-option { min-width:0; padding:18px 14px; border:1px solid #d9e5ef; border-top:3px solid #93b4d0; border-radius:10px; background:#f9fbfd; }
.exchange-mail-solution .solution-option-ha { border-top-color:#347fb7; background:#f2f7fc; }
.exchange-mail-solution .solution-option-hybrid { border-top-color:#549f90; background:#f4faf8; }
.exchange-mail-solution .solution-option h3 { margin:0 0 14px; padding:0; border:0; font-size:1rem; line-height:1.5; text-align:center; }
.exchange-mail-solution .solution-option-visual { display:flex; justify-content:center; align-items:center; gap:8px; min-height:104px; margin-bottom:14px; padding:10px 0; border-bottom:1px solid #dce6ed; }
.exchange-mail-solution .solution-mini-node { display:grid; justify-items:center; gap:6px; min-width:0; font-size:.75rem; line-height:1.5; color:#365b79; }
.exchange-mail-solution .solution-mini-node .solution-icon { width:clamp(52px,9cqi,72px); height:60px; margin:0; }
.exchange-mail-solution .solution-replication { display:grid; justify-items:center; gap:4px; color:#5983a3; line-height:1; }
.exchange-mail-solution .solution-replication > span { font-size:1.75rem; }
.exchange-mail-solution .solution-replication small { padding:4px; border-radius:4px; background:#e1edf8; font-size:.75rem; }
.exchange-mail-solution .solution-option-hybrid .solution-replication small { background:#dff0e9; color:#35725f; }
.exchange-mail-solution .solution-option p { margin:0; font-size:.875rem; line-height:1.75; }
.exchange-mail-solution .solution-option .solution-option-note { margin:10px 0 0; padding-top:10px; border-top:1px solid #dce6ed; color:#5d7385; font-size:.8125rem; }
.exchange-mail-solution .solution-notes { margin:16px 0 24px; padding-left:1.25em; font-size:.875rem; line-height:1.8; }
.exchange-mail-solution .solution-notes li { margin-bottom:8px; }
/* Same four stages as before, horizontal only when there is enough room for a continuous flow. */
@container exchange-solution (min-width:641px) {
	.document-body .exchange-mail-solution .solution-delivery { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; margin:20px 0 18px; }
	.exchange-mail-solution .solution-delivery > li { display:flex; flex-direction:column; gap:10px; padding:0; }
	.exchange-mail-solution .solution-delivery > li:not(:last-child)::before { left:46px; right:-12px; top:17px; bottom:auto; width:auto; height:2px; }
	.exchange-mail-solution .solution-delivery > li:not(:last-child)::after { top:14px; bottom:auto; left:auto; right:-12px; transform:rotate(-45deg); }
	.exchange-mail-solution .solution-delivery p { font-size:.8125rem; }
}
@container exchange-solution (max-width:600px) {
	.exchange-cloud-solution .solution-route-forward .solution-node:not(:last-child)::after { clip-path:polygon(37% 0,63% 0,63% 72%,100% 72%,50% 100%,0 72%,37% 72%); }
	.exchange-mail-solution .solution-options { grid-template-columns:minmax(0,1fr); }
	.exchange-mail-solution .solution-option { display:grid; grid-template-columns:160px minmax(0,1fr); column-gap:18px; align-items:center; }
	.exchange-mail-solution .solution-option h3 { grid-column:1; margin-bottom:8px; }
	.exchange-mail-solution .solution-option-visual { grid-column:1; grid-row:2 / span 2; margin:0; }
	.exchange-mail-solution .solution-option p { grid-column:2; grid-row:1 / span 2; }
	.exchange-mail-solution .solution-option .solution-option-note { grid-column:2; grid-row:3; }
	.exchange-mail-solution .solution-route { grid-template-columns:minmax(0,1fr); gap:24px; }
	.exchange-mail-solution .solution-node { display:grid; grid-template-columns:72px minmax(0,1fr); gap:3px 12px; padding:12px; text-align:left; align-items:center; }
	.exchange-mail-solution .solution-node .solution-icon { grid-column:1; grid-row:1 / span 3; width:72px; height:60px; margin:0; }
	.exchange-mail-solution .solution-node > :not(.solution-icon) { grid-column:2; }
	.exchange-mail-solution .solution-node:not(:last-child)::after { top:100%; left:calc(50% - 6px); width:12px; height:24px; clip-path:polygon(50% 0,100% 25%,63% 25%,63% 75%,100% 75%,50% 100%,0 75%,37% 75%,37% 25%,0 25%); }
	.exchange-mail-solution .solution-foundation { grid-template-columns:minmax(0,1fr); gap:8px; }
	.exchange-mail-solution .solution-foundation li { display:flex; flex-wrap:wrap; gap:4px 12px; }
}
@container exchange-solution (max-width:360px) {
	.exchange-mail-solution .solution-architecture { padding:16px 10px; }
	.exchange-mail-solution .solution-lane { padding:12px 8px; }
	.exchange-mail-solution .solution-node { grid-template-columns:56px minmax(0,1fr); gap:3px 8px; padding:12px 8px; }
	.exchange-mail-solution .solution-node .solution-icon { width:56px; height:50px; }
	.exchange-mail-solution .solution-option { display:block; }
	.exchange-mail-solution .solution-option-visual { margin:0 0 12px; }
}