@layer components {
    .marketing-preview {
            border-top: 1px solid var(--dashboard-color-border);
            min-width: 0;
        }

    .marketing-preview__topbar,
        .marketing-preview__body {
            border: 1px solid var(--dashboard-color-border);
        }

    .marketing-preview__topbar {
            align-items: center;
            border-bottom: 0;
            display: flex;
            gap: 0.5rem;
            min-width: 0;
            overflow: hidden;
            padding: 0.875rem;
        }

    .marketing-preview__crumb {
            color: var(--dashboard-color-text-muted);
            flex: 1 1 auto;
            font-size: 0.875rem;
            font-weight: 650;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

    .marketing-preview__pill {
            background: var(--dashboard-color-pill);
            border-radius: var(--dashboard-radius-pill);
            color: var(--dashboard-color-text-muted);
            flex: 0 0 auto;
            font-size: 0.8125rem;
            font-weight: 700;
            line-height: 1;
            padding: 0.625rem 0.75rem;
        }

    .marketing-preview__pill--active {
            background: var(--dashboard-color-text);
            color: #ffffff;
        }

    .marketing-preview__body {
            display: grid;
            gap: 1.5rem;
            padding: 1.25rem;
        }

    .marketing-preview__metric {
            display: grid;
            gap: 0.25rem;
        }

    .marketing-preview__label {
            color: var(--dashboard-color-text-muted);
            font-size: 0.875rem;
            font-weight: 650;
        }

    .marketing-preview__metric strong {
            color: var(--dashboard-color-text);
            font-size: clamp(2rem, 6vw, 3.5rem);
            font-weight: 780;
            letter-spacing: 0;
            line-height: 1;
        }

    .marketing-preview__return {
            color: var(--dashboard-color-positive);
            font-size: 1rem;
            font-weight: 650;
        }

    .marketing-preview__chart {
            align-items: end;
            border-bottom: 1px dashed var(--dashboard-color-border-strong);
            display: grid;
            gap: 0.5rem;
            grid-template-columns: repeat(8, minmax(0, 1fr));
            height: 12rem;
            padding-top: 1rem;
        }

    .marketing-preview__bar {
            background: linear-gradient(
                180deg,
                rgb(var(--dashboard-color-brand-rgb) / 0.9),
                rgb(var(--dashboard-color-brand-rgb) / 0.16)
            );
            border-radius: 0.5rem 0.5rem 0 0;
            display: block;
            height: var(--bar-height);
            min-height: 1rem;
        }

    .marketing-preview__grid {
            border-top: 1px solid var(--dashboard-color-border);
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            margin-left: -1.25rem;
            margin-right: -1.25rem;
            margin-bottom: -1.25rem;
        }

    .marketing-preview__grid > div {
            align-items: center;
            display: grid;
            gap: 0.375rem;
            justify-items: center;
            min-width: 0;
            padding: 1rem;
            text-align: center;
        }

    .marketing-preview__grid > div + div {
            border-top: 1px solid var(--dashboard-color-border);
        }

    .marketing-preview__grid span {
            color: var(--dashboard-color-text-muted);
            font-size: 0.875rem;
            font-weight: 650;
        }

    .marketing-preview__grid strong {
            color: var(--dashboard-color-positive);
            font-size: 1rem;
            font-weight: 760;
            line-height: 1.2;
        }

    .marketing-preview__grid .is-negative {
            color: var(--dashboard-color-negative);
        }

    @media (min-width: 48rem) {
        .marketing-preview__grid {
                    grid-template-columns: repeat(3, minmax(0, 1fr));
                }
    }

    @media (min-width: 48rem) {
        .marketing-preview__grid > div + div {
                    border-left: 1px solid var(--dashboard-color-border);
                    border-top: 0;
                }
    }

    @media (min-width: 48rem) {
        .marketing-preview {
                    align-content: center;
                    border-left: 1px solid var(--dashboard-color-border);
                    border-top: 0;
                    display: grid;
                }
    }
}