@layer components {
    .upgrade-page__hero {
            display: grid;
            gap: 0.875rem;
            justify-items: center;
            text-align: center;
        }

    .upgrade-page__price {
            align-items: center;
            color: var(--dashboard-color-text-muted);
            display: flex;
            flex-wrap: wrap;
            font-size: 1.25rem;
            font-weight: 500;
            gap: 0.25rem 0.5rem;
            justify-content: center;
            line-height: 1.4;
        }

    .upgrade-page__price strong {
            color: var(--dashboard-color-text);
            font-weight: 750;
        }

    .upgrade-page__discount,
        .upgrade-feature__badge {
            background: rgb(var(--dashboard-color-positive-rgb) / 0.12);
            border-radius: var(--dashboard-radius-pill);
            color: #15803d;
            display: inline-flex;
            font-size: 0.75rem;
            font-weight: 700;
            line-height: 1;
            padding: 0.25rem 0.5rem;
        }

    .upgrade-page__body {
            display: grid;
            gap: 0;
            padding-bottom: 0;
        }

    .upgrade-page__checkout {
            justify-self: center;
            margin-bottom: 1.5rem;
            min-width: min(18rem, 100%);
        }
}