/* The examples pages: whole organisations, each team as a card. */
.ex { padding-top: 56px; }
.ex header h1 { margin: 0 0 14px; font-size: clamp(32px, 5vw, 52px); line-height: 1.08; font-weight: 650; letter-spacing: -.03em; text-wrap: balance; }
.ex .lead { max-width: 760px; margin: 0 0 22px; font-size: clamp(17px, 2vw, 20px); color: var(--muted); }
.ex .toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ex .toc a { display: inline-block; padding: 7px 14px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--panel); text-decoration: none; font-size: 15px; }
.ex .toc a:hover { background: var(--raised); }
.ex .window { margin: 36px 0 10px; }
.ex .caption { margin: 0 0 8px; color: var(--muted); font-size: 15px; }
.ex h2 { margin: 96px 0 8px; font-size: clamp(28px, 3.8vw, 40px); scroll-margin-top: 80px; }
.ex h3 { margin: 32px 0 10px; font-size: 19px; font-weight: 600; }
.ex .for { margin: 0 0 18px; color: var(--muted); }
.ex .org { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 14px; margin: 18px 0 6px; }
.ex .squad { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.ex .squad .head { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.ex .squad .name { font-weight: 600; }
.ex .squad .goal { font-size: 14px; color: var(--muted); line-height: 1.45; }
.ex .squad ul { list-style: none; margin: 0; padding: 10px 16px 14px; font-size: 15px; }
.ex .squad li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 3px 0; font-family: var(--mono); font-size: 13.5px; }
.ex .squad li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--worker); flex: none; align-self: center; }
.ex .squad li.coord { color: var(--text); font-weight: 600; }
.ex .squad li.coord::before { background: var(--coord); border-radius: 2px; transform: rotate(45deg); }
.ex .squad li .p { font-family: var(--sans); font-size: 13px; font-weight: 400; color: var(--muted); }
.ex .links { list-style: none; margin: 10px 0 0; padding: 0; font-size: 15.5px; }
.ex .links li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.ex .links b { color: var(--coord); font-weight: 600; }
.ex pre { margin: 12px 0; padding: 18px 20px; border-radius: 14px; background: var(--term); color: #e9ebee; font: 14px/1.6 var(--mono); overflow-x: auto; white-space: pre-wrap; }
.ex pre code { background: none; padding: 0; font-size: inherit; }
.ex .note { margin: 16px 0; padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); font-size: 15.5px; }
.ex ol.steps li { margin: 8px 0; }
.ex details { margin: 12px 0; padding: 12px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.ex summary { cursor: pointer; font-weight: 600; }
.ex code { overflow-wrap: anywhere; }