.upgrade-main-content {
    max-width: 1100px;
    margin: 48px auto 56px auto;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.10);
    padding: 48px 40px 40px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
        }
        .upgrade-title {
    font-size: 2.4rem;
    font-weight: 800;
    margin-bottom: 12px;
    color: #1a1a1a;
    letter-spacing: -1.2px;
    text-align: center;
        }
        .upgrade-subtitle {
    font-size: 1.18rem;
    color: #555;
    margin-bottom: 36px;
    text-align: center;
        }
        .plan-cards-row {
    display: flex;
    gap: 36px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 40px;
        }
        .plan-card {
    flex: 1 1 340px;
    background: #f7f9fb;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(46,125,255,0.07);
    padding: 44px 36px 36px 36px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 300px;
    max-width: 400px;
    border: 2px solid transparent;
    transition: border 0.2s, box-shadow 0.2s, transform 0.18s;
    position: relative;
    background-clip: padding-box;
    z-index: 1;
}
.plan-card:hover {
    box-shadow: 0 8px 32px rgba(46,125,255,0.13);
    transform: translateY(-2px) scale(1.02);
    border-color: #0079f2;
}
        .plan-card.featured {
    border: 2px solid #2e7dff;
    background: linear-gradient(135deg, #eaf2ff 80%, #f7f9fb 100%);
    box-shadow: 0 8px 32px rgba(46,125,255,0.13);
        }
        .plan-name {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: #1a1a1a;
    letter-spacing: -0.7px;
        }
        .plan-price {
    font-size: 2.2rem;
    font-weight: 800;
    color: #2e7dff;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
        }
        .pricing-amount {
            font-size: 2.1rem;
            font-weight: 700;
            color: #2e7dff;
        }
        .pricing-duration {
            font-size: 1.05rem;
            font-weight: 500;
            color: #555;
            margin-left: 6px;
        }
        .plan-upfront-note {
            font-size: 0.98rem;
            color: #2e7dff;
            font-weight: 500;
            margin-top: 0.3rem;
        }
        .plan-desc {
            font-size: 1.05rem;
            color: #444;
            margin-bottom: 18px;
            min-height: 38px;
        }
        .plan-how {
            font-size: 0.98rem;
            color: #444;
            margin-bottom: 0.7rem;
        }
        .plan-features {
            list-style: none;
            padding: 0;
            margin: 0 0 22px 0;
            font-size: 0.98rem;
            color: #333;
        }
        .plan-features li {
            margin-bottom: 8px;
            display: flex;
            align-items: center;
        }
        .plan-features .material-icons {
            font-size: 1.1em;
            color: #2e7dff;
            margin-right: 7px;
        }
        .plan-features .excluded .material-icons {
            color: #bfc9d9;
        }
        .plan-features .excluded {
            color: #bfc9d9;
            text-decoration: line-through;
        }
        .plan-btn {
    background: linear-gradient(90deg, #2e7dff 80%, #0079f2 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 15px 36px;
    font-size: 1.12rem;
    font-weight: 700;
    cursor: pointer;
    margin-top: auto;
    transition: background 0.18s, box-shadow 0.18s, transform 0.18s;
    box-shadow: 0 2px 8px rgba(46,125,255,0.10);
    letter-spacing: 0.2px;
}
.plan-btn:hover:not(:disabled):not(.current) {
    background: linear-gradient(90deg, #0079f2 80%, #2e7dff 100%);
    box-shadow: 0 4px 16px rgba(46,125,255,0.18);
    transform: translateY(-1px) scale(1.03);
        }
        .plan-btn:disabled,
        .plan-btn.current {
            background: #bfc9d9;
            color: #fff;
            cursor: default;
            box-shadow: none;
        }
        .plan-card .plan-badge {
    position: absolute;
    top: 18px;
    right: 18px;
    background: linear-gradient(90deg, #2e7dff 80%, #0079f2 100%);
    color: #fff;
    font-size: 0.92rem;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 8px;
    letter-spacing: 0.7px;
    box-shadow: 0 2px 8px rgba(46,125,255,0.13);
        }
        .plan-after-6mo {
            margin-top: 0.7rem;
            font-size: 0.98rem;
            color: #444;
            text-align: left;
        }
        @media (max-width: 900px) {
    .plan-cards-row { flex-direction: column; gap: 24px; }
    .upgrade-main-content { padding: 28px 8px 24px 8px; }
    .plan-card { min-width: 220px; max-width: 100%; }
        }