.card-box.svelte-908dsd {
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
        padding: 20px 24px;
        margin-bottom: 18px;
    }
    .eyebrow.svelte-908dsd {
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--color-reach-gray);
        margin-bottom: 8px;
    }
    .btn-primary-sm.svelte-908dsd {
        background: var(--color-reach-blue);
        color: #fff;
        border-radius: 6px;
        padding: 6px 12px;
        font-weight: 700;
        font-size: 14px;
        cursor: pointer;
    }
    .btn-secondary-sm.svelte-908dsd {
        border: 1px solid var(--color-reach-navy);
        color: var(--color-reach-navy);
        border-radius: 6px;
        padding: 6px 12px;
        font-weight: 700;
        font-size: 13px;
        text-decoration: none;
        cursor: pointer;
    }

    /* Flat thumbnail grid — density driven by the --cols custom property at
       desktop; responsive below. Mirrors the image gallery's grid. */
    .cols-dynamic.svelte-jgffno {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    @media (min-width: 640px) {
        .cols-dynamic.svelte-jgffno {
            grid-template-columns: repeat(5, minmax(0, 1fr));
        }
    }
    @media (min-width: 1024px) {
        .cols-dynamic.svelte-jgffno {
            grid-template-columns: repeat(var(--cols, 7), minmax(0, 1fr));
        }
    }

    /* Column count for the image grids. The scoped style is the sole source of
       grid-template-columns (no competing Tailwind grid-cols-* on the element),
       so there's no specificity/order conflict. Breakpoints mirror Tailwind's
       sm (640px) and lg (1024px). Mobile/tablet stay responsive; at desktop the
       per-row dropdown takes over via the --cols custom property. */
    .cols-dynamic.svelte-txt9j4 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    @media (min-width: 640px) {
        .cols-dynamic.svelte-txt9j4 {
            grid-template-columns: repeat(5, minmax(0, 1fr));
        }
    }

    @media (min-width: 1024px) {
        .cols-dynamic.svelte-txt9j4 {
            grid-template-columns: repeat(var(--cols, 7), minmax(0, 1fr));
        }
    }

    .btn-sl.svelte-1wr9voi {
        display: inline-flex;
        align-items: center;
        border-radius: 0.5rem;
        border: 1px solid var(--color-reach-border);
        background: white;
        padding: 0.375rem 0.875rem;
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--color-reach-navy);
        white-space: nowrap;
        cursor: pointer;
    }