/* Preserve the connected diagram and dark readout as a distinct homepage layout. */
body[data-readability] #main .deployment-section{padding-block:clamp(3.5rem,7vw,7rem)}
body[data-readability] #main .deployment-section .control-title{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:1.5rem clamp(2rem,4vw,4rem);margin-bottom:3rem;align-items:end}
body[data-readability] #main .deployment-section .control-title>.label{grid-column:1/-1;margin:0}
body[data-readability] #main .deployment-section .control-title h2{margin:0;width:auto;max-width:22ch}
body[data-readability] #main .deployment-section .deployment-intro{margin:0;max-width:43ch;font-size:var(--reading-body);line-height:1.65}
body[data-readability] #main .deployment-section figcaption{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem 2rem;padding-block:1rem}
body[data-readability] #main .deployment-section figcaption span:last-child{max-width:none;text-align:left;color:var(--muted)}
body[data-readability] #main .deployment-section .boundary-panel{padding:0}
body[data-readability] #main .deployment-section .boundary-panel-top{padding:1.25rem 2rem 0;gap:1rem;display:flex;justify-content:space-between;flex-wrap:wrap}
body[data-readability] #main .deployment-section .boundary-path{padding:1.5rem 2rem 0;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;align-items:stretch}
body[data-readability] #main .deployment-section .boundary-node{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:0;padding:.5rem .25rem 1rem;text-align:center}
body[data-readability] #main .deployment-section .boundary-node img{width:clamp(7rem,12vw,11rem);height:auto;aspect-ratio:1;margin:.5rem 0}
body[data-readability] #main .deployment-section .boundary-node-title{font-size:1.5rem;line-height:1.3;min-height:0;max-width:none;letter-spacing:-.025em}
body[data-readability] #main .deployment-section .boundary-node-subtitle{display:block;font-size:var(--reading-small);line-height:1.5;font-family:inherit;letter-spacing:normal;margin-top:.375rem}
body[data-readability] #main .deployment-section .boundary-node[aria-selected="true"]{background:#dbe3d2;border-bottom-color:var(--ink)}
body[data-readability] #main .deployment-section .boundary-node:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
body[data-readability] #main .deployment-section .boundary-return{margin:1rem 17% 1.5rem;height:auto;min-height:1.5rem;display:flex;justify-content:center;padding-top:.75rem;border:0}
body[data-readability] #main .deployment-section .boundary-return::before{content:"";position:absolute;inset:0 0 .55em;border:1px solid #a5b398;border-top:0}
body[data-readability] #main .deployment-section .boundary-return>span{position:relative;left:auto;bottom:auto;transform:none;font-size:var(--reading-label);white-space:normal;text-align:center;max-width:100%}
body[data-readability] #main .deployment-section .boundary-readouts{margin-top:0;padding:2rem;display:grid}
body[data-readability] #main .deployment-section .boundary-readout{grid-template-columns:.55fr 1fr 1.65fr;gap:2rem;align-items:start;min-height:0}
/* Reserve the largest answer to keep the diagram stationary when switching.
   Hidden answers stay invisible and outside the accessibility/focus tree. */
body[data-readability] #main .deployment-section .is-interactive .boundary-readout{grid-area:1/1;padding:0}
body[data-readability] #main .deployment-section .is-interactive .boundary-readout[hidden]{display:grid;visibility:hidden;pointer-events:none}
body[data-readability] #main .deployment-section .boundary-readout:focus-visible{outline:2px solid #d5e1bc;outline-offset:8px}
body[data-readability] #main .deployment-section .boundary-readout-label{font-size:var(--reading-label);color:#bfd0b6;padding:0;line-height:1.6}
body[data-readability] #main .deployment-section .boundary-readout h3{font-size:clamp(1.75rem,1.4rem + .7vw,2.125rem);line-height:1.2}
body[data-readability] #main .deployment-section .boundary-detail-copy>p{font-size:var(--reading-body);line-height:1.6;color:#e1e8d8}
body[data-readability] #main .deployment-section .boundary-detail-copy .boundary-detail-note{font-size:var(--reading-small);line-height:1.6;color:#bdcfb6;margin-top:1rem}
body[data-readability] #main .deployment-section .boundary-foundation{padding:1rem 2rem;justify-content:space-between;flex-wrap:wrap;font-size:var(--reading-label);line-height:1.6;gap:.5rem 1.5rem;color:#bdcfb6}
body[data-readability] #main .deployment-section .control-caption{display:flex;justify-content:space-between;align-items:start;gap:1.5rem 3rem;padding-top:1.5rem}
body[data-readability] #main .deployment-section .control-caption>p{font-size:var(--reading-small);line-height:1.6;max-width:55ch}
body[data-readability] #main .deployment-section .control-caption .text-link{flex-shrink:0;margin:0;padding-top:0}

@media(max-width:1100px){
 body[data-readability] #main .deployment-section .control-title{grid-template-columns:1fr;gap:1.5rem}
 body[data-readability] #main .deployment-section .deployment-intro{max-width:58ch}
}
@media(max-width:1000px){
 body[data-readability] #main .deployment-section .boundary-readout{grid-template-columns:1fr 1.5fr;gap:1rem 2rem}
 body[data-readability] #main .deployment-section .boundary-readout-label{grid-column:1/-1}
 body[data-readability] #main .deployment-section .control-caption{flex-wrap:wrap}
}
@media(max-width:700px){
 body[data-readability] #main .deployment-section .control-title{margin-bottom:1.5rem}
 body[data-readability] #main .deployment-section .control-title{gap:1rem}
 body[data-readability] #main .deployment-section figcaption{font-size:var(--reading-label);line-height:1.5;gap:.25rem 1rem}
 body[data-readability] #main .deployment-section .boundary-panel-top{padding:1rem .75rem 0;font-size:var(--reading-label);gap:.25rem}
 body[data-readability] #main .deployment-section .boundary-select-hint{margin:0}
 body[data-readability] #main .deployment-section .boundary-path{padding:1rem .5rem 0;font-size:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,5em),1fr));gap:.25rem}
 body[data-readability] #main .deployment-section .boundary-node{padding:.5rem .125rem .75rem;min-width:0}
 body[data-readability] #main .deployment-section .boundary-node-index{display:none}
 body[data-readability] #main .deployment-section .boundary-node img{width:clamp(3rem,16vw,4rem);height:auto;margin:0 0 .5rem}
 body[data-readability] #main .deployment-section .boundary-node-title{font-size:1rem;line-height:1.4;letter-spacing:-.025em}
 body[data-readability] #main .deployment-section .boundary-node-subtitle{font-size:var(--reading-label);line-height:1.5;max-width:10ch;margin-top:.25rem}
 body[data-readability] #main .deployment-section .boundary-return{margin:.75rem 17% 1.25rem;min-height:1rem}
 body[data-readability] #main .deployment-section .boundary-return>span{padding-inline:.5rem;font-size:var(--reading-label)}
 body[data-readability] #main .deployment-section .boundary-readouts{padding:1.25rem}
 body[data-readability] #main .deployment-section .boundary-readout{display:grid;grid-template-columns:1fr;gap:.75rem;min-height:0}
 body[data-readability] #main .deployment-section .boundary-readout h3{font-size:1.75rem;line-height:1.25}
 body[data-readability] #main .deployment-section .boundary-readout-label{margin:0}
 body[data-readability] #main .deployment-section .boundary-detail-copy .boundary-detail-note{margin-top:.75rem}
 body[data-readability] #main .deployment-section .boundary-foundation{padding:1rem 1.25rem;gap:.25rem}
 body[data-readability] #main .deployment-section .control-caption .text-link{width:100%;gap:1rem}
}