/* Shared presentation for worked examples across marketing and help pages. */
#worked-example {
    padding-top: 3rem;
    padding-bottom: 3rem;
    scroll-margin-top: 6rem;
}
#worked-example h2 { margin-bottom: 1.25rem; }
#worked-example h3 { margin-top: 2rem; margin-bottom: 1rem; }
#worked-example p, #worked-example li { line-height: 1.75; }
#worked-example .small { line-height: 1.65; }
#worked-example .help-screenshot {
    margin: 1.75rem 0;
    padding: .65rem;
    border: 1px solid var(--marketing-line, var(--help-line, #dce2ff));
    border-radius: 16px;
    background: var(--marketing-surface-soft, #f5f7ff);
}
#worked-example .help-screenshot img { display: block; width: 100%; height: auto; border-radius: 10px; }
#worked-example figcaption { padding: .75rem .35rem .15rem; color: var(--marketing-muted, #5e688c); font-size: .875rem; line-height: 1.6; }
#worked-example .table-responsive { margin: 1.5rem 0; }
#worked-example table { font-size: .95rem; }
#worked-example th, #worked-example td { min-width: 8rem; padding: 1rem; vertical-align: top; }
.code-example { max-width: 100%; padding: 1.5rem; overflow-x: auto; background: #07113d; color: #f5f7ff; border-radius: 12px; font-size: .875rem; line-height: 1.65; }
.lesson-diagram { margin: 1.5rem 0; overflow-x: auto; border: 1px solid var(--help-line, #dce2ff); border-radius: 12px; }
.lesson-diagram svg { display: block; width: 100%; height: auto; min-width: 36rem; }
.template-link-index { columns: 3 16rem; column-gap: 2rem; padding-left: 1.25rem; }
.template-link-index li { break-inside: avoid; margin-bottom: .75rem; }
.cardLogos { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem; max-width: 100%; }
.cardLogos img { max-width: 100%; height: 24px; width: auto; }
@media (max-width: 575.98px) {
    #worked-example { padding-top: 2rem; padding-bottom: 2rem; }
    #worked-example th, #worked-example td { padding: .75rem; }
    .code-example { padding: 1rem; }
    .template-link-index { columns: 1; }
}
#worked-example [id] { scroll-margin-top: 7rem; }