.qx-app-examples { scroll-margin-top: 96px; }
.qx-app-examples .qx-section-heading > p { max-width: 440px; }
.qx-app-examples-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.qx-app-example { min-width: 0; background: #fff; border: 1px solid #e3e7ee; border-radius: 10px; overflow: hidden; }
.qx-app-example-image { position: relative; display: block; background: #f1f1ee; overflow: hidden; }
.qx-app-example-image img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: contain; }
.qx-app-example-image:focus-visible { outline: 3px solid #245cff; outline-offset: -4px; }
.qx-app-example-enlarge { position: absolute; right: 14px; bottom: 14px; padding: 7px 12px; border: 1px solid #e3e7ee; border-radius: 5px; background: rgba(255, 255, 255, .96); color: #263348; font-size: 14px; line-height: 1.4; }
.qx-app-example-copy { padding: 24px; }
.qx-app-example-type { color: #5e6b80; font-size: 14px; }
.qx-app-example-copy h3 { color: #17283e; font-size: 21px; line-height: 1.5; margin: 8px 0 12px; font-weight: 600; }
.qx-app-example-copy p { color: #617087; font-size: 16px; line-height: 1.8; margin: 0; }
.qx-app-example-copy ul { display: flex; flex-wrap: wrap; gap: 8px 16px; list-style: none; padding: 18px 0 0; margin: 18px 0 0; border-top: 1px solid #edf0f4; }
.qx-app-example-copy li { color: #475c77; font-size: 14px; line-height: 1.6; }
.qx-app-examples-note { color: #68768a; font-size: 14px; line-height: 1.9; margin: 24px 0 0; }
@media (max-width: 1020px) {
    .qx-app-examples-grid { gap: 18px; }
    .qx-app-example-copy { padding: 18px; }
    .qx-app-example-copy h3 { font-size: 19px; }
}
@media (max-width: 760px) {
    .qx-app-examples-grid { grid-template-columns: 1fr; gap: 24px; }
    .qx-app-example { width: 100%; max-width: 520px; margin: 0 auto; }
    .qx-app-example-copy { padding: 22px; }
    .qx-app-example-copy h3 { font-size: 21px; }
    .qx-app-examples-note { margin-top: 20px; }
}