.examples{border-top:1px solid var(--line)}
.example-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.example-open{display:block;width:100%;padding:0;border:1px solid #d1d0c9;background:#fff;color:#17202e;cursor:zoom-in;text-align:left}
.example-open img{display:block;width:100%;height:auto}
.example-zoom{display:flex;justify-content:space-between;padding:14px 16px;font-size:13px;font-weight:700}
.example-open:hover{border-color:#1459ec}
.example-open:focus-visible,.example-close:focus-visible{outline:3px solid #1459ec;outline-offset:5px}
.example-category{color:#1459ec;font-size:12px;font-weight:800;margin:22px 0 8px}
.example-card h3{font-size:18px;line-height:1.5;letter-spacing:-.5px}
.example-bottom{display:flex;justify-content:space-between;align-items:center;gap:32px;margin-top:36px}
.example-bottom p{font-size:13px;line-height:1.9;color:#525e70}
.example-bottom .btn{flex-shrink:0}
.example-dialog{padding:0;border:0;background:#f9f6ef;color:#17202e;width:min(580px,calc(100% - 24px));max-height:90dvh;margin:auto;overflow:auto}
.example-dialog::backdrop{background:rgba(15,23,35,.8)}
.example-dialog-head{display:flex;gap:18px;align-items:center;justify-content:space-between;padding:20px;position:sticky;top:0;background:#f9f6ef;border-bottom:1px solid #d1d0c9;z-index:1}
.example-dialog-head h2{font-size:17px;line-height:1.5;letter-spacing:-.4px}
.example-dialog-head p{font-size:12px;color:#525e70;margin-top:5px}
.example-close{flex-shrink:0;background:#17202e;color:#fff;border:0;padding:12px;cursor:pointer;font:inherit;font-size:13px}
.example-dialog-body{padding:24px}
.example-dialog-body img{display:block;width:100%;max-width:390px;height:auto;margin:auto}
body.example-viewing{overflow:hidden}
@media(max-width:960px){.example-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px}.example-bottom{align-items:flex-start;flex-direction:column}}
@media(max-width:560px){.example-grid{gap:28px 12px}.example-card h3{font-size:15px}.example-category{margin-top:16px}.example-zoom{padding:11px;font-size:12px}.example-dialog-head{padding:14px}.example-dialog-body{padding:12px}.example-bottom{gap:20px}.example-dialog-head h2{font-size:15px}}
/* Paired screenshots keep both responsive compositions visible without overlap. */
.example-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 28px}
.example-pair{display:grid;grid-template-columns:minmax(0,1fr) 22%;align-items:center;gap:16px;padding:22px;background:#eeeae2}
.example-device-label{display:block;font-size:11px;font-weight:800;color:#525e70;margin-bottom:8px}
.example-desktop,.example-mobile{display:block;min-width:0}
.example-pair img{border:1px solid #d1d0c9}
.example-dialog{width:min(1200px,calc(100% - 24px))}
.example-device-switch{display:flex;gap:8px;padding:16px 24px 0}
.example-device-switch button{font:inherit;font-size:14px;font-weight:700;padding:10px 18px;border:1px solid #d1d0c9;background:transparent;color:#17202e;cursor:pointer}
.example-device-switch button[aria-pressed="true"]{color:white;background:#1459ec;border-color:#1459ec}
.example-device-switch button:focus-visible{outline:3px solid #1459ec;outline-offset:3px}
.example-dialog-body img{max-width:100%}
.example-dialog[data-device="mobile"] .example-dialog-body img{max-width:390px}
@media(max-width:760px){.example-grid{grid-template-columns:1fr;gap:32px}.example-pair{padding:16px;gap:12px}.example-card h3{font-size:18px}.example-device-switch{padding:14px 12px 0}}
.example-design-note{font-size:15px;color:#525e70;line-height:1.85;margin-top:16px;max-width:60ch}
.practice-evidence{border-top:1px solid rgba(255,255,255,.25);margin-top:36px;padding-top:32px;max-width:900px}
.practice-evidence h3{font-size:24px;margin-bottom:16px}
.practice-evidence p{line-height:1.9;color:#d9dfeb}
.practice-evidence>div{display:flex;flex-wrap:wrap;gap:16px 28px;margin:24px 0}
.practice-evidence a{text-decoration:underline;text-underline-offset:5px;font-size:15px;font-weight:700}
.practice-evidence .practice-caption{font-size:13px;color:#bfc9da}