body {
    background-color: var(--bg-color); color: var(--text-main);
    font-family: var(--font-main); margin: 0; padding: 0;
}

.pricing-container {
    max-width: 1400px; /* Ampliato per dare respiro a 4 card (1 custom + 3 Stripe) */
    margin: 2rem auto; 
    padding: 0 1rem;
    
    /* Gestione Flexbox unificata */
    display: flex; 
    flex-direction: row; 
    align-items: flex-start; /* Evita lo stretch verticale */
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap; /* Rete di sicurezza: su schermi piccoli va in verticale */
}

.card {
    background-color: var(--card-bg); border: 1px solid #333; border-radius: 10px;
    padding: 2rem; text-align: center; transition: transform 0.3s, border-color 0.3s;
    display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-10px); border-color: var(--gold-primary); }
.card.featured {
    border: 2px solid var(--gold-primary); background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.15); position: relative;
}
.badge {
    position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
    background-color: var(--gold-primary); color: #000; padding: 5px 15px;
    font-size: 0.8rem; font-weight: bold; border-radius: 20px; text-transform: uppercase;
}

.plan-name { font-size: 1.5rem; margin-bottom: 1rem; color: #fff; }
.price { font-size: 3rem; font-weight: bold; color: var(--gold-shiny); margin-bottom: 0.5rem; }
.period { font-size: 0.9rem; color: #777; margin-bottom: 2rem; }
.features { list-style: none; padding: 0; margin-bottom: 2rem; flex-grow: 1; }
.features li { margin-bottom: 1rem; color: #ccc; border-bottom: 1px solid #222; padding-bottom: 10px; }
/* Container to hold the entire price line */
.price-line {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: baseline;   /* Align text by their bottom baseline */
    gap: 12px;               /* Space between old and new price */
    margin: 1rem 0 0.5rem 0;
}

/* The "Old" Price (Monthly x 12) */
.old-price {
    text-decoration: line-through; /* The strikethrough effect */
    color: #666;                   /* Muted/Dimmed color */
    font-size: 1.4rem;             /* Smaller than the main price */
    font-weight: 500;
}

/* The "New" Discounted Price */
.new-price {
    color: var(--gold-primary);    /* Highlight color (or #fff) */
    font-size: 3rem;               /* Big and Bold */
    font-weight: 800;
    line-height: 1;
}

/* The "/year" label */
.period-inline {
    color: #888;
    font-size: 1rem;
    font-weight: normal;
}

/* Optional: "Save 20%" Badge */
.save-badge {
    background: rgba(40, 167, 69, 0.2);
    color: #4cd964;
    border: 1px solid #28a745;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 12px;
    display: inline-block;
    margin-bottom: 10px;
    font-weight: bold;
    text-transform: uppercase;
}

.btn {
    background-color: transparent;
    border: 1px solid var(--gold-primary);
    color: var(--gold-primary);
    /* MODIFICATO: Padding laterale aumentato */
    padding: 1rem 2.5rem;
    /* RIMOSSO: width: 100%; */
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    transition: all 0.3s;
    text-decoration: none;
    display: inline-block;
    /* Opzionale: assicura un margine superiore se la lista è corta */
    margin-top: auto; 
}

.btn:hover, .card.featured .btn { background-color: var(--gold-primary); color: #000; }
.back-link { display: block; text-align: center; margin: 3rem 0; color: #777; text-decoration: none; }
.back-link:hover { color: var(--gold-shiny); }

@media (max-width: 768px) { .logo { font-size: 1.2rem; } }