/*
 * Price cards built on the theme's numbers block (mq20-numbers).
 * Shared by software-subscription.php and hire-puvnaa.php.
 * Usage: <section class="wp-block-create-block-mq20-numbers dark plan-cards">
 */
        /* Plan details inside the existing numbers block (pricing section). */
        .plan-cards .numbers-item {
            display: flex;
            flex-direction: column;
        }

        .plan-cards .plan-label {
            margin-bottom: 24px;
            color: var(--c_brand--200, #a498fe);
            letter-spacing: .08em;
            text-transform: uppercase;
        }

        .plan-cards .number-main {
            white-space: nowrap;
        }

        .plan-cards .plan-period {
            margin: 4px 0 24px;
            color: var(--c_neutral--300);
        }

        .plan-cards .number-desc {
            margin-bottom: 32px;
        }

        /* margin-top:auto keeps the three "included" lists on one line */
        .plan-cards .plan-includes {
            margin: auto 0 0;
            padding: 24px 0 0;
            list-style: none;
            border-top: 1px solid var(--c_neutral--800);
        }

        .plan-cards .plan-includes li {
            position: relative;
            padding: 6px 0 6px 24px;
            line-height: 1.5;
            color: var(--c_neutral--white);
        }

        .plan-cards .plan-includes li:before {
            content: "";
            position: absolute;
            top: 15px;
            left: 0;
            width: 8px;
            height: 8px;
            background: var(--c_brand--500, #5b2ce8);
        }

        /* web application + optional android app */
        .plan-cards .plan-addon {
            display: flex;
            align-items: center;
            gap: 40px;
            margin-top: 24px;
            padding: 40px;
            border: 1px solid var(--c_neutral--800);
        }

        .plan-cards .plan-addon-plus {
            flex: 0 0 auto;
            color: var(--c_brand--200, #a498fe);
        }

        .plan-cards .plan-addon-body {
            flex: 1 1 auto;
        }

        .plan-cards .plan-addon-body p {
            margin-top: 8px;
            color: var(--c_neutral--300);
        }

        .plan-cards .plan-addon-price {
            flex: 0 0 auto;
            text-align: right;
            white-space: nowrap;
        }

        .plan-cards .plan-addon-price span {
            display: block;
            color: var(--c_neutral--300);
        }

        .plan-cards .plan-scope {
            margin-top: 24px;
            padding: 24px 40px;
            border-left: 2px solid var(--c_brand--500, #5b2ce8);
            background: rgb(255 255 255 / 0.04);
            color: var(--c_neutral--white);
        }

        /* price cards read one per row on tablets and phones */
        @media screen and (max-width: 1024px) {
            .plan-cards .numbers-items {
                flex-direction: column;
                flex-wrap: nowrap;
            }

            .plan-cards .numbers-items .numbers-item,
            .plan-cards .numbers-items .numbers-item:first-child {
                flex: 0 0 auto;
                width: 100%;
                max-width: none;
                padding: 40px 24px;
                border: 1px solid var(--c_neutral--800);
                border-top: 0;
            }

            .plan-cards .numbers-items .numbers-item:first-child {
                border-top: 1px solid var(--c_neutral--800);
            }

            .plan-cards .number-desc {
                padding-right: 0;
            }
        }

        @media only screen and (max-width: 768px) {
            .plan-cards .plan-addon {
                flex-direction: column;
                align-items: flex-start;
                gap: 16px;
                padding: 32px 24px;
            }

            .plan-cards .plan-addon-price {
                text-align: left;
            }

            .plan-cards .plan-scope {
                padding: 20px 24px;
            }
        }

/* ------------------------------------------------------------------
   Extras used by hire-puvnaa.php
   ------------------------------------------------------------------ */

/* yearly price shown under the monthly price */
.plan-cards .plan-annual {
    margin: -12px 0 24px;
    color: var(--c_neutral--white);
}

/* "Request taken up within ..." — the plan's defining line */
.plan-cards .plan-response {
    margin-top: auto;
    padding: 20px 24px;
    border: 1px solid var(--c_neutral--800);
    background: rgb(255 255 255 / 0.03);
}

.plan-cards .plan-response span {
    display: block;
    color: var(--c_neutral--300);
}

.plan-cards .plan-response strong {
    display: block;
    margin-top: 4px;
    color: var(--c_neutral--white);
    font-weight: var(--fw--medium, 500);
}

/* supporting line under the section heading (partner-program.php) */
.plan-cards .plan-intro {
    max-width: 720px;
    margin-top: 24px;
    color: var(--c_neutral--300);
}

/* explanation blocks under the cards */
.plan-cards .plan-notes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 24px;
}

/* two notes side by side (partner-program.php); stacks with the rule below */
.plan-cards .plan-notes--two {
    grid-template-columns: repeat(2, 1fr);
}

.plan-cards .plan-note {
    padding: 32px;
    border: 1px solid var(--c_neutral--800);
}

.plan-cards .plan-note h3 {
    margin-bottom: 12px;
}

.plan-cards .plan-note p,
.plan-cards .plan-note li {
    color: var(--c_neutral--300);
}

.plan-cards .plan-note ul {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.plan-cards .plan-note li {
    position: relative;
    padding: 4px 0 4px 20px;
    line-height: 1.5;
}

.plan-cards .plan-note li:before {
    content: "";
    position: absolute;
    top: 13px;
    left: 0;
    width: 8px;
    height: 1px;
    background: var(--c_neutral--300);
}

.plan-cards .plan-note--key {
    border-color: var(--c_brand--500, #5b2ce8);
    border-left-width: 2px;
}

.plan-cards .plan-note--key p {
    color: var(--c_neutral--white);
}

@media screen and (max-width: 1024px) {
    .plan-cards .plan-notes {
        grid-template-columns: 1fr;
    }

    .plan-cards .plan-note {
        padding: 24px;
    }
}

/* ------------------------------------------------------------------
   "What all plans include": numbered editorial rows (hire-puvnaa.php)
   number | kicker + statement | supporting content
   ------------------------------------------------------------------ */
.plan-cards .plan-terms {
    margin-top: 96px;
}

/* steps directly under the section header, no gap (partner-program.php) */
.plan-cards .plan-terms.plan-terms--flush {
    margin-top: 0;
}

.plan-cards .plan-terms-title {
    margin-bottom: 48px;
}

.plan-cards .plan-term {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1.25fr);
    column-gap: 48px;
    padding: 48px 0;
    border-top: 1px solid var(--c_neutral--800);
}

.plan-cards .plan-term:last-child {
    border-bottom: 1px solid var(--c_neutral--800);
}

.plan-cards .plan-term-num {
    color: var(--c_neutral--600);
    line-height: 1;
}

.plan-cards .plan-term-kicker {
    margin-bottom: 12px;
    color: var(--c_neutral--300);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.plan-cards .plan-term-title {
    color: var(--c_neutral--white);
}

.plan-cards .plan-term-ne {
    color: var(--c_brand--200, #a498fe);
}

.plan-cards .plan-term-text {
    color: var(--c_neutral--300);
}

/* response time vs completion time, side by side */
.plan-cards .plan-term-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin: 0 0 32px;
}

.plan-cards .plan-term-compare > div {
    padding-top: 16px;
    border-top: 2px solid var(--c_neutral--700);
}

.plan-cards .plan-term-compare > div:first-child {
    border-top-color: var(--c_brand--200, #a498fe);
}

.plan-cards .plan-term-compare dt {
    margin-bottom: 6px;
    color: var(--c_neutral--300);
}

.plan-cards .plan-term-compare > div:first-child dt {
    color: var(--c_brand--200, #a498fe);
}

.plan-cards .plan-term-compare dd {
    margin: 0;
    color: var(--c_neutral--white);
}

.plan-cards .plan-term-points {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.plan-cards .plan-term-points li {
    position: relative;
    padding: 6px 0 6px 20px;
    line-height: 1.5;
    color: var(--c_neutral--white);
}

.plan-cards .plan-term-points li:before {
    content: "";
    position: absolute;
    top: 17px;
    left: 0;
    width: 8px;
    height: 1px;
    background: var(--c_neutral--300);
}

.plan-cards .plan-term-points--excluded li {
    color: var(--c_neutral--300);
}

.plan-cards .plan-term-accent {
    color: var(--c_brand--200, #a498fe);
    font-weight: var(--fw--medium, 500);
}

/* maintenance-only option: the monthly price is the headline, kept to a faint tint */
.plan-cards .plan-maint {
    display: flex;
    align-items: center;
    gap: 24px;
    margin: 32px 0;
    padding: 24px;
    border-left: 2px solid var(--c_brand--200, #a498fe);
    background: rgb(164 152 254 / 0.06);
}

.plan-cards .plan-maint-rate {
    flex: 0 0 auto;
    color: var(--c_brand--200, #a498fe);
    line-height: 1;
    white-space: nowrap;
}

.plan-cards .plan-maint-rate-unit {
    margin-left: 4px;
    color: var(--c_neutral--300);
    font-size: 16px;
    font-weight: var(--fw--medium, 500);
    letter-spacing: 0;
}

.plan-cards .plan-maint-label {
    color: var(--c_neutral--300);
}

.plan-cards .plan-maint-label strong {
    display: block;
    margin-bottom: 2px;
    color: var(--c_neutral--white);
    font-weight: var(--fw--medium, 500);
}

.plan-cards .plan-maint-scope {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.plan-cards .plan-maint-scope-title {
    color: var(--c_neutral--300);
}

.plan-cards .plan-maint-scope .plan-term-points {
    grid-template-columns: 1fr;
    margin-top: 8px;
}

/* request flow: a rail with a marker per step, across the full row */
.plan-cards .plan-flow {
    grid-column: 2 / -1;
    display: flex;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
}

.plan-cards .plan-flow li {
    position: relative;
    flex: 1 1 0;
    padding: 24px 40px 0 0;
    border-top: 1px solid var(--c_neutral--700);
    color: var(--c_neutral--white);
}

.plan-cards .plan-flow li:before {
    content: "";
    position: absolute;
    top: -5px;
    left: 0;
    width: 9px;
    height: 9px;
    background: var(--c_brand--200, #a498fe);
}

.plan-cards .plan-flow li:after {
    content: "→";
    position: absolute;
    top: 24px;
    right: 16px;
    color: var(--c_neutral--500);
}

.plan-cards .plan-flow li:last-child {
    border-top-color: transparent;
}

.plan-cards .plan-flow li:last-child:after {
    content: none;
}

@media screen and (max-width: 1024px) {
    .plan-cards .plan-terms {
        margin-top: 72px;
    }

    .plan-cards .plan-term {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 24px;
        padding: 40px 0;
    }

    .plan-cards .plan-term-num {
        font-size: 32px;
    }

    .plan-cards .plan-flow {
        grid-column: auto;
        margin-top: 8px;
    }
}

@media only screen and (max-width: 768px) {
    .plan-cards .plan-terms-title {
        margin-bottom: 32px;
    }

    .plan-cards .plan-term-compare,
    .plan-cards .plan-maint-scope,
    .plan-cards .plan-term-points {
        grid-template-columns: 1fr;
    }

    .plan-cards .plan-term-compare {
        gap: 16px;
    }

    .plan-cards .plan-maint {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 20px;
    }

    /* flow turns vertical: rail on the left */
    .plan-cards .plan-flow {
        flex-direction: column;
    }

    .plan-cards .plan-flow li {
        padding: 0 0 20px 28px;
        border-top: 0;
        border-left: 1px solid var(--c_neutral--700);
    }

    .plan-cards .plan-flow li:before {
        top: 6px;
        left: -5px;
    }

    .plan-cards .plan-flow li:after {
        content: none;
    }

    .plan-cards .plan-flow li:last-child {
        padding-bottom: 0;
        border-left-color: transparent;
    }
}