main .diagram-intro {max-width:900px;} .diagram-intro .brand-cta {display:inline-flex;margin-block:12px;} .diagram-example {margin:24px 0;overflow-x:auto;border:1px solid #e1e5dc;border-radius:24px;background:white;padding:12px;} .diagram-example img {display:block;width:100%;min-width:600px;height:auto;} .diagram-example figcaption {font-size:14px;padding:12px;color:#3F4556;} .diagram-guide-detail {border-top:2px solid #11131B;padding:18px 0;max-width:850px;margin-block:12px;} .diagram-guide-detail summary {font-family:var(--font-display,'Bricolage Grotesque'),sans-serif;font-size:clamp(22px,2.5vw,28px);font-weight:800;color:#11131B;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;list-style:none;} .diagram-guide-detail summary::-webkit-details-marker {display:none;} .diagram-guide-detail summary span {color:#E5560C;font-size:30px;} .diagram-guide-detail[open] summary span {transform:rotate(45deg);} .diagram-guide-detail p {font-size:16px;max-width:760px;} .diagram-guide-detail summary:focus-visible {outline:3px solid #E5560C;outline-offset:5px;} .site-header .brand img,.locale-footer .brand img {flex-shrink:0;} @media(max-width:650px){.site-header {flex-wrap:wrap;gap:16px;} .site-nav {flex-wrap:wrap;} .diagram-example {margin-inline:0;} .diagram-guide-detail summary {font-size:22px;} }