/* Page shells */
.subs-hero, .subs-plans, .subs-faq {
    background: #0a0a0a;
    color: #fff;
}

    .subs-hero .container, .subs-plans .container, .subs-faq .container {
        padding-top: 28px;
        padding-bottom: 28px;
    }

/* Breadcrumb */
.subs-breadcrumb {
    font-size: 13px;
    color: rgba(255,255,255,.65);
    margin-bottom: 8px;
}

    .subs-breadcrumb a {
        color: rgba(255,255,255,.8);
        text-decoration: none;
    }

    .subs-breadcrumb span {
        margin: 0 6px;
        color: rgba(255,255,255,.35);
    }

/* Title & subtitle */
.subs-title {
    font-size: 32px;
    font-weight: 800;
    margin: 6px 0 4px;
}

.subs-subtitle {
    color: rgba(255,255,255,.65);
    margin-bottom: 16px;
}

/* Toggle Monthly/Yearly (active white) */
.subs-toggle {
    display: inline-flex;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 10px;
    padding: 4px;
    gap: 4px;
}

.toggle-btn {
    appearance: none;
    border: 0;
    padding: 6px 12px;
    border-radius: 8px;
    color: #fff;
    background: transparent;
    font-size: 13px;
    cursor: pointer;
}

    .toggle-btn.is-active {
        background: #fff;
        color: #111;
        box-shadow: none;
    }

/* Plans grid */
.plans-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* Card: sfondo più chiaro, bordo solo su hover */
.plan-card {
    flex: 1 1 260px;
    max-width: 300px;
    background: #141414; /* più chiaro del #111 */
    border-radius: 10px;
    border: 1px solid transparent; /* nascosto di default */
    padding: 14px;
    position: relative;
    box-shadow: 0 8px 20px rgba(0,0,0,.20);
    transition: border-color .2s ease, transform .2s ease;
}

    .plan-card:hover {
        border-color: rgba(255,255,255,.22);
        transform: translateY(-1px);
    }

    .plan-card.is-popular {
        outline: 1px solid rgba(168,85,247,.45);
        outline-offset: -1px;
    }

.plan-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #7c3aed;
    color: #fff;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 999px;
    box-shadow: 0 8px 20px rgba(124,58,237,.35);
}

/* Head */
.plan-head h3 {
    margin: 0 0 8px;
    font-weight: 700;
}

.plan-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

    .plan-price span {
        font-size: 22px;
        font-weight: 800;
    }

    .plan-price small {
        color: rgba(255,255,255,.6);
    }

/* NEW: badge annuale “One month free” */
.badge-free {
    display: inline-block;
    margin-left: auto;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(124,58,237,.15);
    color: #d7c6ff;
    border: 1px solid rgba(124,58,237,.35);
}

/* Body */
.plan-subtitle {
    font-size: 12px;
    color: rgba(255,255,255,.6);
    margin: 6px 0 8px;
}

/* Features: spunte ✓ al posto dei pallini */
.plan-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 6px;
}

    /* Features: spunte ✓ bianche, minimal */
    .plan-features li {
        font-size: 13px;
        color: #eaeaea;
        padding-left: 22px;
        position: relative;
    }

        .plan-features li::before {
            content: "\2713"; /* ✓ */
            position: absolute;
            left: 0;
            top: 0;
            line-height: 1.4;
            color: #fff; /* bianco puro */
            font-weight: 400; /* leggero, non bold */
            opacity: 0.8; /* effetto soft */
            font-size: 14px;
        }


/* CTA: pill button */
.plan-cta {
    margin-top: 12px;
}

.btn-ghost {
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 10px 14px;
    border-radius: 999px; /* pill */
    color: #fff;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.28);
    background: transparent;
}

    .btn-ghost:hover {
        background: #7c3aed; /* viola Mymixlab */
        border-color: #7c3aed;
        color: #fff;
        box-shadow: 0 0 18px rgba(124, 58, 237, 0.45); /* lieve glow */
    }

    /* per effetto “active” opzionale */
    .btn-ghost:active {
        transform: scale(0.97);
        box-shadow: 0 0 8px rgba(124, 58, 237, 0.35);
    }

/* FAQ */
.faq-title {
    font-size: 20px;
    font-weight: 700;
    margin: 24px 0 12px;
}

.faq-accordion details {
    background: #0d0d0d;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 8px;
}

.faq-accordion summary {
    list-style: none;
    cursor: pointer;
    color: #fff;
    font-weight: 600;
    position: relative;
}

    .faq-accordion summary::-webkit-details-marker {
        display: none;
    }

    .faq-accordion summary::after {
        content: "▾";
        position: absolute;
        right: 0;
        top: 0;
        color: rgba(255,255,255,.6);
    }

.faq-accordion details[open] summary::after {
    content: "▴";
}

.faq-body {
    color: rgba(255,255,255,.75);
    font-size: 14px;
    padding-top: 8px;
}

/* Period visibility helpers */
.plan-card .yearly,
.plan-card .period.yearly,
.plan-card .badge-free.yearly {
    display: none;
}

.plan-card[data-period="yearly"] .yearly,
.plan-card[data-period="yearly"] .period.yearly,
.plan-card[data-period="yearly"] .badge-free.yearly {
    display: inline;
}

.plan-card[data-period="yearly"] .monthly,
.plan-card[data-period="yearly"] .period.monthly {
    display: none;
}

.d-none {
    display: none !important;
}

.is-hidden {
    display: none !important;
}



/* Responsive */
@media (max-width: 991.98px) {
    .plans-row {
        justify-content: center;
    }
}