@layer components {
    .cta-details {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-2);
        align-items: center;
    }

    .download-notice {
        color: var(--color-text-secondary);
        font-size: var(--font-size-sm);

        li {
            display: inline-block;
        }
    }

    .cta-box {
        border-radius: var(--radius-lg);
        background: linear-gradient(
            var(--color-background),
            var(--apple-blue-surface)
        );
        padding: var(--spacing-12) var(--spacing-24);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: var(--spacing-6);
        align-items: flex-start;
        min-height: max(42rem, 70vh);

        header {
            max-width: 60%;
            .brand-icon {
                height: 5rem;
                width: 5rem;
                margin-bottom: 6rem;
            }

            h2 {
                font-size: min(var(--font-size-3xl), 4cqi);
                font-weight: var(--font-weight-bold);
            }

            p {
                font-size: min(var(--font-size-2xl), 4cqi);
                color: var(--color-text-secondary);
                white-space: nowrap;
            }
        }

        .cta-details {
            align-items: center;
            align-self: flex-end;
        }
    }
}