.cbm-plan {
    --plan-border-color: var(--cbm-color-secondary);
    --plan-text-color: var(--cbm-color-secondary);
    --plan-head-color: var(--cmb-color-secondary);
    --plan-bg-color: transparent;
    --plan-scale: 1;
    
    padding: 1.75rem 1.25rem;
    border: 1px solid;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    border-radius: .75rem;
    position: relative;
    
    border-color: var(--plan-border-color);
    background-color: var(--plan-bg-color);
    color: var(--plan-text-color);
    scale: var(--plan-scale);
}

.cbm-plan.highlight {
    --plan-border-color: var(--cbm-color-secondary);
    --plan-text-color: var(--cbm-color-secondary-foreground);
    --plan-head-color: var(--cbm-color-accent);
    --plan-bg-color: var(--cbm-color-secondary);
    --plan-scale: 1.075;
}

.cbm-plan.highlight::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80%;
    background: rgba(255,255,255,0.075);
    clip-path: ellipse(100% 100% at 50% 100%);
    pointer-events: none;
    z-index: 0;
}

.cbm-plan.transition-all:hover {
    --plan-scale: 1.085;
}
.cbm-plan.transition-all.highlight:hover {
    --plan-scale: 1.0925;
}

.cbm-plan .plan-price {
    font-weight: 700;
    color: var(--plan-head-color);
}

.cbm-plan .cbm-button {
    width: 100%;
}

@media (max-width: 768px) {
    .cbm-plan.transition-all.highlight:hover,
    .cbm-plan.transition-all:hover,
    .cbm-plan.highlight {
        --plan-scale: 1;
    }
}