/* Only the ten opted-in Solutions/Bridge demos use this compact presentation. */
.delivery-page .delivery-demo.is-compact { display: grid; grid-template-columns: minmax(0, 2.25fr) minmax(260px, 1fr); gap: 24px 36px; align-items: start; margin-top: 32px !important; }
.is-compact .solution-demo-toolbar { grid-column: 1 / -1; display: flex; align-items: center; gap: 24px; border-bottom: 1px solid #cdd6d8; }
.is-compact .delivery-controls { --demo-line-inset: 30px; flex: 1; min-width: 0; margin: 0; border: 0; }
.is-compact .delivery-controls button { min-height: 48px; padding-block: 12px; font-size: 12px; gap: 10px; }
.is-compact .delivery-controls button[aria-pressed="true"]::after { right: var(--demo-line-inset); background: #cdd6d8; }
.is-compact .delivery-controls button > .solution-demo-progress { position: absolute; z-index: 1; bottom: -1px; left: 0; right: var(--demo-line-inset); height: 2px; margin: 0; background: var(--delivery-accent); transform-origin: left center; pointer-events: none; }
.is-compact .delivery-controls button[aria-pressed="false"] > .solution-demo-progress { display: none; }
.solution-demo-playback { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.solution-demo-playback > span { color: #52616c; font-size: 10px; font-variant-numeric: tabular-nums; }
.solution-demo-playback button { min-height: 44px; min-width: 64px; padding: 8px 12px; border: 0; border-radius: 0; background: transparent; color: #102334; font-family: inherit; font-size: 12px; line-height: 1.4; cursor: pointer; }
.solution-demo-playback button:hover { color: var(--delivery-accent); }
.solution-demo-stage { min-width: 0; }
.delivery-page .is-compact .delivery-explanations { min-width: 0; margin: 0; padding: 0 0 0 26px; border: 0; border-left: 1px solid #cdd6d8; }
.delivery-page .is-compact .delivery-explanation { min-height: 0; grid-template-columns: 1fr; gap: 16px; padding: 0; align-content: start; }
.delivery-page .is-compact .delivery-explanation h3 { font-size: clamp(23px, 2vw, 28px); line-height: 1.2; }
.delivery-page .is-compact .delivery-explanation > div > p:not(.delivery-panel-label) { font-size: 13px; line-height: 1.65; }
.delivery-page .is-compact .delivery-explanation > div > p.delivery-example-detail { font-size: 11px; margin-top: 14px; }
.is-compact .delivery-panel-label { margin-bottom: 10px; }
.delivery-page .delivery-demo.is-compact > figcaption { grid-column: 1 / -1; margin: 0; font-size: 10px; line-height: 1.6; }

/* Reduce diagram whitespace while keeping text at its intended reading size. */
.is-compact :is(.building-network, .maintenance-handoffs) { gap: 24px; padding-top: 0; }
.is-compact .network-layer { padding-block: 4px 0; }
.is-compact .network-layer:not(:last-child)::after { right: -20px; top: 115px; font-size: 19px; }
.is-compact :is(.network-building-drawing, .network-hub, .network-work-list) { height: 142px; margin-block: 14px; }
.is-compact .network-layer-copy h3 { font-size: 16px; }
.is-compact .network-layer-copy p { font-size: 11px; }
.is-compact .network-hub-core { top: 22px; width: 104px; height: 78px; left: calc(50% - 52px); font-size: 12px; }
.is-compact .network-hub-lines { width: 88px; height: 88px; left: calc(50% - 44px); top: 17px; }
.is-compact .network-hub-satellite { font-size: 9px; padding-inline: 12px; }
.is-compact .satellite-two, .is-compact .satellite-three { bottom: 0; }
.is-compact .network-work-list { gap: 8px; }
.is-compact .network-work-list > div { padding: 9px 7px; font-size: 10px; gap: 6px; }
.is-compact .handoff-person { min-height: 62px; gap: 9px; }
.is-compact .handoff-person svg { width: 46px; height: 40px; }
.is-compact .handoff-person > span { font-size: 11px; }
.is-compact .handoff-packet { min-height: 190px; padding: 18px 15px; }
.is-compact .handoff-packet h3 { font-size: 18px; }
.is-compact .handoff-detail-lines { margin-top: 14px; padding-top: 12px; gap: 8px; }
.is-compact .handoff-takeaway { font-size: 11px; margin-top: 12px !important; }
.is-compact .maintenance-lane:not(:last-child)::after { top: 143px; right: -20px; font-size: 19px; }
.is-compact .maintenance-return { margin-top: 16px; min-height: 28px; }
.is-compact .maintenance-return > span { top: 12px; font-size: 9px; padding-inline: 8px; }
.is-compact .asset-knowledge-map { gap: 30px; }
.is-compact .asset-knowledge-visual { padding: 0; }
.is-compact .asset-knowledge-visual::after { right: -24px; width: 20px; }
.is-compact .asset-knowledge-visual > p { font-size: 22px; margin-top: 18px !important; }
.is-compact .asset-knowledge-row { padding: 14px 0 14px 22px; }
.is-compact .asset-knowledge-row h3 { font-size: 22px; }
.is-compact .asset-knowledge-row > p { font-size: 12px; margin-top: 8px !important; }
.is-compact .asset-knowledge-terms { margin-top: 10px; gap: 6px 12px; }
.is-compact .portfolio-overview { padding: 16px 20px; gap: 16px; }
.is-compact .portfolio-overview h3 { font-size: 20px; margin-top: 7px !important; }
.is-compact .portfolio-overview ul { gap: 12px; }
.is-compact .portfolio-overview li { padding-left: 12px; font-size: 10px; }
.is-compact .portfolio-properties { gap: 22px; margin-top: 30px; }
.is-compact .portfolio-property { padding-top: 12px; }
.is-compact .portfolio-property svg { height: 70px; margin-bottom: 12px; }
.is-compact .portfolio-property h3 { font-size: 19px; }
.is-compact .portfolio-property > p { font-size: 11px; line-height: 1.6; margin-top: 8px !important; }
.is-compact .portfolio-responsibility { margin-top: 18px; padding-top: 14px; gap: 8px 20px; }
.is-compact .field-visit-board { gap: 5%; }
.is-compact .field-job { padding: 20px; }
.is-compact .field-job-heading { padding-bottom: 14px; gap: 12px; }
.is-compact .field-job-asset { padding-block: 16px; gap: 12px; }
.is-compact .field-job-asset h3 { font-size: 23px; }
.is-compact .field-job-asset p { font-size: 11px; }
.is-compact .field-job-finding { padding-top: 14px; }
.is-compact .field-job-finding dd { font-size: 12px; }
.is-compact .field-job-handoff { margin-top: 14px; padding-top: 12px; }
.is-compact .field-visit-path li { padding-block: 15px; gap: 12px; grid-template-columns: 30px minmax(0, 1fr); }
.is-compact .field-stage-number { width: 30px; height: 30px; }
.is-compact .field-visit-path li:not(:last-child)::after { left: 14px; top: 50px; bottom: -10px; }
.is-compact .field-visit-path h3 { font-size: 20px; }
.is-compact .field-visit-path p { font-size: 12px; line-height: 1.6; margin-top: 7px !important; }
.is-compact .team-people { gap: 24px; }
.is-compact .team-person { padding-bottom: 10px; }
.is-compact .team-person-icon { height: 32px; }
.is-compact .team-person-icon svg { height: 32px; width: 32px; }
.is-compact .team-person h3 { font-size: 20px; margin-top: 8px !important; }
.is-compact .team-person > span { margin-top: 10px; font-size: 10px; }
.is-compact .team-person p { font-size: 12px; margin-top: 8px !important; line-height: 1.6; }
.is-compact .team-connection { height: 20px; margin-bottom: 22px; }
.is-compact .team-connection::before { height: 41px; }
.is-compact .team-shared-record { padding: 18px 20px; }
.is-compact .team-record-heading { padding-bottom: 15px; gap: 12px; }
.is-compact .team-record-heading h3 { font-size: 21px; }
.is-compact .team-record-history { margin-top: 14px; gap: 16px; }
.is-compact .team-record-history li { padding-left: 10px; }
.is-compact .team-record-history strong { font-size: 12px; }
.is-compact .monitor-operation { gap: 24px; }
.is-compact .monitor-equipment h3 { font-size: 23px; }
.is-compact .monitor-equipment img { margin-block: 16px; }
.is-compact .monitor-equipment > p { font-size: 12px; }
.is-compact .monitor-signal { padding: 20px; }
.is-compact .monitor-signal-heading { padding-bottom: 14px; gap: 10px; }
.is-compact .monitor-reading { margin-top: 16px; padding-left: 12px; }
.is-compact .monitor-reading h3 { font-size: 26px; }
.is-compact .monitor-reading p { font-size: 12px; margin-top: 8px !important; }
.is-compact .monitor-context { margin-top: 14px; }
.is-compact .monitor-context > div { padding-block: 12px; gap: 14px; }
.is-compact .monitor-context :is(dt, dd) { font-size: 11px; }
.is-compact .monitor-response { padding: 12px; font-size: 11px; }
.is-compact .energy-demand { padding: 16px 20px; }
.is-compact .energy-data { grid-column: 1 / -1; margin: 0; }
.is-compact .energy-example-context { gap: 20px; margin-top: 12px; }
.is-compact .energy-example-context > div { padding-top: 10px; }
.is-compact .energy-example-context h3 { font-size: 17px; margin-top: 6px !important; }
.is-compact .ai-workbench { gap: 16px; grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1.2fr); }
.is-compact .ai-context-source { gap: 18px; }
.is-compact .ai-context-source article { padding-left: 16px; }
.is-compact .ai-context-source blockquote { font-size: 20px; margin-top: 12px; }
.is-compact .ai-context-source h3 { font-size: 20px; margin-top: 12px !important; }
.is-compact .ai-context-source p { font-size: 12px; }
.is-compact .ai-proposal-sheet { padding: 22px; }
.is-compact .ai-proposal-sheet h3 { font-size: 26px; margin-top: 14px !important; }
.is-compact .ai-proposal-sheet > p { font-size: 12px; margin-top: 12px !important; }
.is-compact .ai-proposal-tasks { margin-top: 14px; }
.is-compact .ai-proposal-tasks li { font-size: 12px; margin-top: 12px; padding-top: 12px; }
.is-compact .bridge-connection-map { gap: 12px; grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1.1fr); }
.is-compact .bridge-source { padding-top: 8px; }
.is-compact :is(.bridge-source-drawing, .bridge-node-mark) { height: 100px; margin-block: 12px; }
.is-compact .bridge-source-drawing svg { height: 95px; }
.is-compact .bridge-node-mark svg { width: 104px; height: 95px; }
.is-compact :is(.bridge-source, .bridge-node) h3 { font-size: 21px; }
.is-compact .bridge-reading-value { font-size: 34px; }
.is-compact .bridge-destination { padding: 18px; }
.is-compact .bridge-destination-header { margin-top: 14px; padding-block: 14px; }
.is-compact .bridge-destination-header strong { font-size: 23px; margin-top: 8px; }
.is-compact .bridge-destination .bridge-reading-value { margin-top: 14px; }
.is-compact .bridge-destination dl { margin-top: 14px; }
.is-compact .bridge-destination dl > div { padding-top: 10px; margin-top: 10px; }
.is-compact .bridge-reading-origin { padding-top: 14px; margin-top: 14px; }
.is-compact .bridge-node-functions { margin-top: 16px; }

@media (max-width: 1100px) {
  .is-compact .delivery-controls { --demo-line-inset: 12px; }
  .delivery-page .delivery-demo.is-compact { grid-template-columns: minmax(0, 2fr) minmax(225px, 1fr); gap: 20px 24px; }
  .delivery-page .is-compact .delivery-explanations { padding-left: 20px; }
  .is-compact .handoff-packet { min-height: 208px; padding-inline: 12px; }
  .is-compact .handoff-packet h3 { font-size: 16px; }
  .is-compact .solution-demo-toolbar { gap: 16px; }
  .is-compact .field-visit-board, .is-compact .monitor-operation { grid-template-columns: 1fr; }
  .is-compact .field-job-asset { grid-template-columns: 1fr 1fr; }
  .is-compact .field-job-asset img { max-width: 170px; justify-self: end; }
  .is-compact .field-visit-path { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .is-compact .field-visit-path li { display: block; }
  .is-compact .field-visit-path li::after { display: none; }
  .is-compact .field-visit-path h3 { margin-top: 12px !important; font-size: 16px; }
  .is-compact .monitor-equipment { display: grid; grid-template-columns: 1fr 140px; gap: 8px 12px; }
  .is-compact .monitor-equipment img { grid-column: 2; grid-row: 1 / 4; margin: 0; align-self: center; }
  .is-compact .monitor-equipment h3 { margin-top: 0 !important; font-size: 21px; }
  .is-compact .monitor-equipment > p { display: none; }
}
@media (max-width: 900px) {
  .delivery-page .delivery-demo.is-compact { grid-template-columns: 1fr; gap: 20px; }
  .delivery-page .is-compact .delivery-explanations { border: 0; padding: 0; }
  .delivery-page .is-compact .delivery-explanation { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 26px; }
  .is-compact .field-visit-board, .is-compact .monitor-operation { grid-template-columns: 1fr 1fr; }
  .is-compact .field-visit-path { display: block; }
  .is-compact .field-visit-path li { display: grid; }
  .is-compact .field-visit-path h3 { margin-top: 0 !important; }
  .is-compact .monitor-equipment { display: block; }
  .is-compact .monitor-equipment img { max-width: 260px; margin: 16px auto; }
}
@media (max-width: 760px) {
  .is-compact .solution-demo-toolbar { flex-wrap: wrap; gap: 0; padding-bottom: 8px; }
  .is-compact .delivery-controls { flex-basis: 100%; }
  .solution-demo-playback { margin-left: auto; }
}
/* Keep the selected visual in view instead of stacking the whole diagram. */
@media (max-width: 1100px), (max-height: 600px) {
  .is-compact[data-demo-step="0"] [data-demo-scene]:not([data-demo-scene~="0"]),
  .is-compact[data-demo-step="1"] [data-demo-scene]:not([data-demo-scene~="1"]),
  .is-compact[data-demo-step="2"] [data-demo-scene]:not([data-demo-scene~="2"]) { display: none; }
  .is-compact :is(.maintenance-handoffs, .building-network, .bridge-connection-map, .energy-example-context) { grid-template-columns: 1fr; }
  .is-compact .maintenance-lane { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 12px 20px; }
  .is-compact .handoff-person { flex-direction: column; padding-top: 10px; text-align: center; }
  .is-compact .handoff-packet { min-height: 0; padding: 16px; }
  .is-compact .handoff-packet h3 { font-size: 20px; }
  .is-compact .handoff-takeaway { grid-column: 2; margin: 0 !important; }
  .is-compact .maintenance-return { margin: 14px 0 0 40px; }
  .is-compact :is(.maintenance-lane, .network-layer)::after, .is-compact .bridge-map-link { display: none; }
  .is-compact .network-layer { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px 24px; border: 0; padding: 0; }
  .is-compact .network-layer-label { grid-column: 1 / -1; }
  .is-compact :is(.network-building-drawing, .network-hub, .network-work-list) { align-self: center; }
  .is-compact .network-layer-copy { align-self: center; }
  .is-compact .asset-knowledge-map { grid-template-columns: minmax(90px, .7fr) minmax(0, 1.3fr); gap: 20px; }
  .is-compact .asset-knowledge-visual::after { display: none; }
  .is-compact .asset-knowledge-visual > p { font-size: 17px; }
  .is-compact .asset-knowledge-visual > span { font-size: 10px; }
  .is-compact .asset-knowledge-row { padding: 12px 0 12px 16px; }
  .is-compact .asset-knowledge-row h3 { font-size: 22px; }
  .is-compact .asset-knowledge-row:first-child { padding-top: 12px; }
  .is-compact .portfolio-properties { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 0; }
  .is-compact .portfolio-property { display: block; }
  .is-compact .portfolio-property svg { width: 100%; height: 64px; margin-bottom: 12px; }
  .is-compact .portfolio-property h3 { font-size: 16px; }
  .is-compact :is(.portfolio-overview, .portfolio-properties, .portfolio-property)::before,
  .is-compact .portfolio-overview::after { display: none; }
  .is-compact .portfolio-responsibility { margin-top: 0; }
  .is-compact .field-visit-board { grid-template-columns: 1fr; gap: 12px; }
  .is-compact .field-job { padding: 16px 20px; }
  .is-compact .field-job-asset { padding-block: 10px; }
  .is-compact .field-job-asset img { max-width: 115px; }
  .is-compact .field-job-heading { padding-bottom: 12px; }
  .is-compact .field-visit-path li { padding-block: 8px; }
  .is-compact .field-visit-path h3 { font-size: 19px; }
  .is-compact .team-collaboration-map { display: grid; grid-template-columns: minmax(90px, .65fr) minmax(0, 1.35fr); gap: 20px; align-items: start; }
  .is-compact .team-people, .is-compact .team-record-history { grid-template-columns: 1fr; }
  .is-compact .team-person { display: block; border: 0; padding: 0; }
  .is-compact .team-person::after { display: none; }
  .is-compact .team-connection { display: none; }
  .is-compact .team-shared-record { padding: 16px; }
  .is-compact .team-record-heading { display: block; }
  .is-compact .team-record-heading > span { display: block; margin-top: 10px; }
  .is-compact .team-record-heading h3 { font-size: 20px; }
  .is-compact .monitor-operation { grid-template-columns: minmax(90px, .7fr) minmax(0, 1.3fr); gap: 20px; }
  .is-compact .monitor-equipment h3 { font-size: 18px; }
  .is-compact .monitor-equipment > span { font-size: 10px; }
  .is-compact .monitor-signal { padding: 16px; }
  .is-compact .monitor-context > div { grid-template-columns: 1fr; gap: 6px; }
  .is-compact .energy-demand { padding: 16px; }
  .is-compact .energy-demand-heading { gap: 8px; }
  .is-compact .ai-workbench { grid-template-columns: 1fr; }
  .is-compact .ai-workbench-connector { display: none; }
  .is-compact .ai-context-source { gap: 14px; }
  .is-compact .bridge-source-drawing { position: static; width: 100%; }
  .is-compact .bridge-source { display: grid; grid-template-columns: minmax(90px, .7fr) minmax(0, 1.3fr); gap: 12px 20px; padding: 0; align-items: center; }
  .is-compact .bridge-source > .bridge-node-label { grid-column: 1 / -1; }
  .is-compact .bridge-source-drawing { grid-column: 1; grid-row: 2 / 5; }
  .is-compact .bridge-source h3 { grid-column: 2; margin: 0 !important; }
  .is-compact .bridge-source .bridge-reading-value { grid-column: 2; margin: 0; }
  .is-compact .bridge-source > p { grid-column: 2; margin: 0 !important; }
  .is-compact .bridge-reading-origin { grid-column: 1 / -1; grid-template-columns: 65px 1fr; }
  .is-compact .bridge-node { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 16px 24px; padding: 0; text-align: left; }
  .is-compact .bridge-node > .bridge-node-label { grid-column: 1 / -1; }
  .is-compact .bridge-node-mark { grid-row: 2 / 4; margin: 0; align-self: center; }
  .is-compact .bridge-node-functions { grid-column: 2; margin: 0; }
  .is-compact .bridge-destination { max-width: 480px; }
  .is-compact .bridge-destination-header { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 8px 14px; align-items: center; }
  .is-compact .bridge-destination-header > span { grid-column: 1 / -1; }
  .is-compact .bridge-destination-header :is(strong, p) { margin: 0 !important; }
  .is-compact .bridge-destination dl { display: block; }
  .is-compact .bridge-destination dl > div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 14px; align-items: baseline; }
  .is-compact .bridge-destination dd { margin: 0; }
}
@media (max-width: 480px) {
  .is-compact .delivery-controls button { font-size: 11px; min-height: 58px; padding: 10px 12px 10px 0; }
  .delivery-page .is-compact .delivery-explanation { grid-template-columns: 1fr; gap: 10px; }
  .delivery-page .is-compact .delivery-explanation h3 { font-size: 24px; }
  .delivery-page .is-compact .delivery-explanation > div > p.delivery-example-detail { margin-top: 10px; }
  .is-compact .delivery-panel-label { margin-bottom: 7px; }
  .is-compact .portfolio-properties { grid-template-columns: 1fr; gap: 12px; }
  .is-compact .portfolio-property { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 4px 16px; padding-top: 10px; }
  .is-compact .portfolio-property svg { width: 50px; height: 64px; grid-row: 1 / 4; align-self: center; margin: 0; }
  .is-compact .portfolio-property .delivery-panel-label { margin: 0; }
  .is-compact .portfolio-property > p { grid-column: 2; margin: 0 !important; }
}