/* /* /* =========================================================
   VIRALMINT AI — PRICING MOBILE
   FINAL MOBILE OVERRIDE
   =========================================================

   This file is intentionally separate from pricing.css.

   It targets the ACTUAL pricing HTML classes:
   .pricing-hero
   .billing-section
   .billing-toggle
   .billing-option
   .plans-section
   .plans-grid
   .plan-card
   .plan-heading
   .price-block
   .price-line
   .usage-list
   .features-list
   .comparison-section
   .comparison-wrapper
   .comparison-table
   .comparison-row
   .pricing-cta

========================================================= */


/* =========================================================
   GLOBAL MOBILE SAFETY
========================================================= */

@media (max-width: 760px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    main {
        width: 100%;
        max-width: 100%;
        overflow: visible;
    }

}


/* =========================================================
   NAVIGATION
========================================================= */

@media (max-width: 760px) {

    .pricing-header {
        width: 100%;
    }

    .pricing-nav {
        width: calc(100% - 28px);

        min-height: 62px;

        margin: 0 auto;

        padding: 0;

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 12px;
    }

    .pricing-logo {
        font-size: 1.18rem;

        line-height: 1;

        white-space: nowrap;
    }

    .dashboard-link {
        display: inline-flex;

        align-items: center;
        justify-content: center;

        min-height: 34px;

        font-size: 0.68rem;

        white-space: nowrap;
    }

}


@media (max-width: 430px) {

    .pricing-nav {
        width: calc(100% - 24px);

        min-height: 58px;
    }

    .pricing-logo {
        font-size: 1.12rem;
    }

    /*
       On very small screens only keep
       the arrow visible.
    */

    .dashboard-link {
        font-size: 0;
    }

    .dashboard-link span {
        font-size: 1rem;
    }

}


/* =========================================================
   HERO
========================================================= */

@media (max-width: 760px) {

    .pricing-hero {
        width: calc(100% - 28px);

        margin: 0 auto;

        padding:
            48px 0 20px;

        text-align: center;
    }


    .pricing-hero .eyebrow {
        margin-bottom: 17px;

        font-size: 0.61rem;

        line-height: 1;
    }


    /*
       IMPORTANT:
       Controlled width + font size prevents
       the giant heading seen previously.
    */

    .pricing-hero h1 {
        width: 100%;

        max-width: 355px;

        margin:
            0 auto;

        font-size:
            clamp(
                2.18rem,
                9.6vw,
                3rem
            );

        line-height: 1.01;

        letter-spacing: -0.055em;

        overflow: visible;

        text-wrap: balance;

        padding:
            0 0 0.13em;
    }


    /*
       "Creator Intelligence Plan"
       remains a controlled block.
    */

    .pricing-hero h1 span {
        display: block;

        width: 100%;

        max-width: 355px;

        margin: 0 auto;

        line-height: 1.01;

        overflow: visible;

        padding-bottom: 0.10em;
    }


    .hero-description {
        width: 100%;

        max-width: 340px;

        margin:
            20px auto 0;

        font-size: 0.77rem;

        line-height: 1.62;

        text-wrap: balance;
    }

}


/* =========================================================
   HERO TRUST POINTS
========================================================= */

@media (max-width: 760px) {

    .trust-points {
        width: 100%;

        max-width: 350px;

        margin:
            20px auto 0;

        display: flex;

        align-items: center;
        justify-content: center;

        flex-wrap: wrap;

        gap: 6px;
    }


    .trust-points span {
        min-height: 28px;

        padding:
            0 8px;

        display: inline-flex;

        align-items: center;
        justify-content: center;

        border-radius: 999px;

        font-size: 0.57rem;

        line-height: 1;

        white-space: nowrap;
    }

}


/* =========================================================
   BILLING SWITCHER
========================================================= */

@media (max-width: 760px) {

    .billing-section {
        width: 100%;

        margin:
            10px auto 0;

        padding:
            0 14px;

        display: flex;

        flex-direction: column;

        align-items: center;
    }


    .billing-toggle {
        width: 236px;

        max-width: 100%;

        min-height: 45px;

        padding: 4px;

        display: flex;

        align-items: center;

        border-radius: 14px;
    }


    .billing-option {
        flex:
            1 1 0;

        width: 50%;

        min-width: 0;

        min-height: 37px;

        padding:
            0 8px;

        border-radius: 10px;

        font-size: 0.68rem;

        line-height: 1;

        white-space: nowrap;
    }


    .billing-save {
        width: 100%;

        max-width: 290px;

        margin:
            9px auto 0;

        text-align: center;

        font-size: 0.61rem;

        line-height: 1.45;

        text-wrap: balance;
    }

}


/* =========================================================
   PLANS SECTION
========================================================= */

@media (max-width: 760px) {

    .plans-section {
        width: calc(100% - 24px);

        max-width: 430px;

        margin:
            0 auto;

        padding:
            30px 0 58px;
    }


    .plans-grid {
        width: 100%;

        display: grid;

        grid-template-columns: 1fr;

        gap: 13px;

        align-items: stretch;
    }

}


/* =========================================================
   PRICING CARD
========================================================= */

@media (max-width: 760px) {

    .plan-card {
        width: 100%;

        min-width: 0;

        margin: 0;

        padding:
            20px 18px 19px;

        border-radius: 20px;

        overflow: visible;

        transform: none !important;
    }


    .plan-card:hover {
        transform: none !important;
    }


    .creator-plus-card {
        grid-column: auto;

        width: 100%;

        max-width: none;

        justify-self: stretch;
    }

}


/* =========================================================
   CARD TOP
========================================================= */

@media (max-width: 760px) {

    .plan-top {
        width: 100%;

        min-width: 0;
    }


    .plan-heading {
        min-width: 0;
    }


    .plan-eyebrow {
        display: block;

        margin-bottom: 6px;

        font-size: 0.58rem;

        line-height: 1.2;

        letter-spacing: 0.08em;

        white-space: nowrap;
    }


    .plan-heading h2 {
        margin: 0;

        font-size: 1.55rem;

        line-height: 1.03;

        letter-spacing: -0.045em;

        overflow: visible;

        padding-bottom: 0.08em;
    }

}


/* =========================================================
   BADGES
========================================================= */

@media (max-width: 760px) {

    .popular-badge,
    .coming-soon-badge {
        top: 14px;

        right: 14px;

        min-height: 25px;

        padding:
            0 9px;

        display: inline-flex;

        align-items: center;
        justify-content: center;

        border-radius: 999px;

        font-size: 0.53rem;

        line-height: 1;

        white-space: nowrap;
    }

}


@media (max-width: 390px) {

    .popular-badge,
    .coming-soon-badge {
        top: 12px;

        right: 12px;

        min-height: 23px;

        padding:
            0 8px;

        font-size: 0.50rem;
    }

}


/* =========================================================
   PLAN DESCRIPTION
========================================================= */

@media (max-width: 760px) {

    .plan-description {
        width: 100%;

        min-height: 0;

        margin:
            16px 0 0;

        font-size: 0.70rem;

        line-height: 1.55;

        text-wrap: pretty;
    }

}


/* =========================================================
   PRICE BLOCK
========================================================= */

@media (max-width: 760px) {

    .price-block {
        width: 100%;

        min-width: 0;

        margin:
            18px 0 0;

        padding:
            14px 0 0;

        border-top:
            1px solid rgba(255,255,255,0.07);
    }


    .price-line {
        width: 100%;

        min-width: 0;

        display: flex;

        align-items: baseline;

        flex-wrap: wrap;

        column-gap: 4px;

        row-gap: 2px;

        overflow: visible;
    }


    .price-line .price {
        display: inline-block;

        font-size: 2.55rem;

        line-height: 0.98;

        letter-spacing: -0.065em;

        white-space: nowrap;

        overflow: visible;

        padding-bottom: 0.08em;
    }


    .price-period {
        font-size: 0.60rem;

        line-height: 1;

        white-space: nowrap;

        opacity: 0.62;
    }


    .price-note {
        display: block;

        width: 100%;

        margin:
            7px 0 0;

        font-size: 0.61rem;

        line-height: 1.4;

        overflow: visible;
    }

}


/* =========================================================
   YEARLY DETAILS
========================================================= */

@media (max-width: 760px) {

    .pro-yearly-details {
        width: 100%;

        margin:
            7px 0 0;

        display: flex;

        flex-direction: column;

        gap: 2px;

        opacity: 0;

        transform: translateY(-2px);

        transition:
            opacity 160ms ease,
            transform 160ms ease;

        pointer-events: none;
    }


    .pro-yearly-details.is-visible {
        opacity: 1;

        transform: translateY(0);

        pointer-events: auto;
    }


    .yearly-effective-price {
        font-size: 0.70rem;

        line-height: 1.35;

        font-weight: 600;

        color:
            rgba(255,255,255,0.70);

        white-space: nowrap;
    }


    .pro-yearly-details .yearly-savings {
        margin: 0;

        font-size: 0.62rem;

        line-height: 1.35;

        font-weight: 600;

        color:
            rgba(255,255,255,0.54);

        white-space: nowrap;
    }

}


/* =========================================================
   USAGE HEADER
========================================================= */

@media (max-width: 760px) {

    .usage-header {
        margin-top: 17px;

        margin-bottom: 6px;
    }


    .usage-header span {
        font-size: 0.72rem;

        line-height: 1.2;
    }


    .usage-header small {
        margin-top: 3px;

        font-size: 0.58rem;

        line-height: 1.3;
    }

}


/* =========================================================
   USAGE LIST
========================================================= */

@media (max-width: 760px) {

    .usage-list {
        width: 100%;

        margin: 0;

        padding: 0;

        list-style: none;
    }


    .usage-list li {
        min-width: 0;

        padding:
            3px 0;

        display: flex;

        align-items: baseline;

        justify-content: space-between;

        gap: 10px;

        font-size: 0.62rem;

        line-height: 1.35;
    }


    .usage-list li span {
        min-width: 0;

        flex: 1 1 auto;

        overflow-wrap: anywhere;
    }


    .usage-list li strong {
        flex: 0 0 auto;

        white-space: nowrap;

        font-size: 0.62rem;
    }

}


/* =========================================================
   PLAN SECTIONS
========================================================= */

@media (max-width: 760px) {

    .plan-section {
        margin-top: 17px;

        min-width: 0;
    }


    .plan-section + .plan-section {
        margin-top: 16px;
    }


    .plan-section h3 {
        margin:
            0 0 7px;

        font-size: 0.72rem;

        line-height: 1.25;

        letter-spacing: -0.01em;
    }

}


/* =========================================================
   FEATURE LIST
========================================================= */

@media (max-width: 760px) {

    .features-list,
    .feature-list {
        width: 100%;

        margin: 0;

        padding: 0;

        list-style: none;
    }


    .features-list li,
    .feature-list li {
        min-width: 0;

        padding:
            3px 0;

        display: flex;

        align-items: flex-start;

        gap: 7px;

        font-size: 0.62rem;

        line-height: 1.38;
    }


    .features-list li span,
    .feature-list li span {
        min-width: 0;

        flex: 1 1 auto;

        overflow-wrap: anywhere;
    }

}


/* =========================================================
   CREATOR+ CONTENT
========================================================= */

@media (max-width: 760px) {

    .coming-title {
        margin:
            19px 0 0;

        font-size: 1.55rem;

        line-height: 1.02;

        letter-spacing: -0.045em;

        overflow: visible;

        padding-bottom: 0.08em;
    }


    .creator-more {
        margin-top: 4px;

        padding-top: 15px;
    }


    .creator-more-title {
        margin-bottom: 7px;

        font-size: 0.72rem;

        line-height: 1.25;
    }

}


/* =========================================================
   PLAN BUTTONS
========================================================= */

@media (max-width: 760px) {

    .plan-button,
    .secondary-btn {
        width: 100%;

        min-height: 43px;

        margin-top: 18px;

        border-radius: 11px;

        font-size: 0.68rem;

        line-height: 1;
    }


    .disabled-button {
        opacity: 0.62;
    }

}


/* =========================================================
   PRICING NOTE
========================================================= */

@media (max-width: 760px) {

    .pricing-note {
        width: calc(100% - 36px);

        max-width: 360px;

        margin:
            0 auto 52px;

        text-align: center;
    }


    .pricing-note p {
        margin: 0;

        font-size: 0.59rem;

        line-height: 1.55;

        text-wrap: balance;
    }

}


/* =========================================================
   COMPARISON SECTION
========================================================= */

@media (max-width: 760px) {

    .comparison-section {
        width: calc(100% - 24px);

        max-width: 430px;

        margin:
            0 auto;

        padding:
            0 0 58px;

        min-width: 0;
    }


    .section-heading {
        width: 100%;

        margin:
            0 auto 20px;

        text-align: center;
    }


    .section-heading .eyebrow {
        margin-bottom: 13px;

        font-size: 0.60rem;
    }


    .section-heading h2 {
        width: 100%;

        max-width: 340px;

        margin:
            0 auto;

        font-size:
            clamp(
                1.62rem,
                7.8vw,
                2.15rem
            );

        line-height: 1.04;

        letter-spacing: -0.05em;

        overflow: visible;

        padding-bottom: 0.12em;

        text-wrap: balance;
    }


    .section-heading p {
        width: 100%;

        max-width: 320px;

        margin:
            11px auto 0;

        font-size: 0.68rem;

        line-height: 1.55;

        text-wrap: balance;
    }

}


/* =========================================================
   COMPARISON WRAPPER
   HORIZONTAL SCROLL IS INTENTIONAL
========================================================= */

@media (max-width: 760px) {

    .comparison-wrapper {
        position: relative;

        width: 100%;

        max-width: 100%;

        overflow-x: auto;

        overflow-y: hidden;

        -webkit-overflow-scrolling: touch;

        overscroll-behavior-x: contain;

        border-radius: 17px;

        scrollbar-width: thin;

        touch-action: pan-x;
    }


    /*
       The table stays wide enough to preserve
       readable Free / Pro / Creator+ columns.
    */

    .comparison-table {
        width: max-content;

        min-width: 650px;

        overflow: visible;
    }


    .comparison-row {
        grid-template-columns:
            175px
            155px
            155px
            155px;

        min-height: 51px;

        padding:
            0 12px;
    }


    .comparison-row > div {
        min-width: 0;

        font-size: 0.62rem;

        line-height: 1.3;
    }


    .comparison-row > div:first-child {
        text-align: left;

        white-space: normal;
    }


    .comparison-row > div:not(:first-child) {
        text-align: center;

        white-space: nowrap;
    }


    .comparison-header {
        min-height: 50px;
    }


    .comparison-header > div {
        font-size: 0.64rem;
    }

}


/* =========================================================
   COMPARISON — SMALL PHONES
========================================================= */

@media (max-width: 390px) {

    .comparison-table {
        min-width: 620px;
    }


    .comparison-row {
        grid-template-columns:
            165px
            150px
            150px
            150px;

        min-height: 49px;

        padding:
            0 10px;
    }


    .comparison-row > div {
        font-size: 0.59rem;
    }

}


/* =========================================================
   COMPARISON SCROLL AFFORDANCE
========================================================= */

@media (max-width: 760px) {

    .comparison-wrapper::after {
        content: "";

        position: absolute;

        top: 0;
        right: 0;

        width: 24px;
        height: 100%;

        pointer-events: none;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(10, 6, 15, 0.72)
            );

        opacity: 0.55;
    }


    /*
       Hide scrollbar visually on WebKit while
       keeping native horizontal scrolling.
    */

    .comparison-wrapper::-webkit-scrollbar {
        height: 4px;
    }

}


/* =========================================================
   COMPARISON NOTE
========================================================= */

@media (max-width: 760px) {

    .comparison-note {
        width: 100%;

        max-width: 330px;

        margin:
            12px auto 0;

        text-align: center;

        font-size: 0.59rem;

        line-height: 1.5;
    }

}


/* =========================================================
   FINAL CTA
========================================================= */

@media (max-width: 760px) {

    .pricing-cta {
        width: calc(100% - 24px);

        max-width: 430px;

        margin:
            0 auto 48px;

        padding:
            34px 18px;

        border-radius: 20px;

        text-align: center;

        overflow: visible;
    }


    .pricing-cta .cta-content {
        width: 100%;

        max-width: 100%;
    }


    .pricing-cta h2 {
        width: 100%;

        max-width: 350px;

        margin:
            15px auto 11px;

        font-size:
            clamp(
                1.72rem,
                8vw,
                2.25rem
            );

        line-height: 1.04;

        letter-spacing: -0.055em;

        overflow: visible;

        padding-bottom: 0.14em;

        text-wrap: balance;
    }


    .pricing-cta h2 span {
        display: block;

        line-height: inherit;

        overflow: visible;

        padding-bottom: 0.08em;
    }


    .pricing-cta p {
        width: 100%;

        max-width: 310px;

        margin:
            0 auto 18px;

        font-size: 0.68rem;

        line-height: 1.55;

        text-wrap: balance;
    }


    .pricing-cta .cta-button {
        min-width: 165px;

        min-height: 44px;

        border-radius: 11px;

        font-size: 0.68rem;
    }

}


/* =========================================================
   VERY SMALL PHONE
========================================================= */

@media (max-width: 390px) {

    .pricing-hero {
        width: calc(100% - 24px);

        padding-top: 43px;
    }


    .pricing-hero h1 {
        max-width: 330px;

        font-size: 2.05rem;

        line-height: 1.02;
    }


    .hero-description {
        max-width: 315px;

        font-size: 0.73rem;
    }


    .plans-section {
        width: calc(100% - 20px);

        padding-top: 27px;
    }


    .plan-card {
        padding:
            18px 16px 18px;

        border-radius: 18px;
    }


    .plan-heading h2 {
        font-size: 1.48rem;
    }


    .plan-description {
        font-size: 0.66rem;
    }


    .price-line .price {
        font-size: 2.42rem;
    }


    .usage-list li,
    .features-list li,
    .feature-list li {
        font-size: 0.59rem;
    }


    .pricing-cta {
        width: calc(100% - 20px);

        padding:
            31px 16px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

        scroll-behavior: auto !important;
    }

} 

/* =========================================================
   VIRALMINT AI — MOBILE PRICING SYSTEM
   Mobile-only pricing optimization
   Desktop pricing remains untouched
========================================================= */

@media (max-width: 768px) {

    /* =====================================================
       GLOBAL MOBILE PRICING
    ====================================================== */

    html {
        overflow-x: hidden;
    }

    body {
        overflow-x: hidden;
    }

    .pricing-header {
        padding: 0 16px;
    }

    .pricing-nav {
        min-height: 62px;
    }

    .pricing-logo {
        font-size: 18px;
    }

    .dashboard-link {
        font-size: 0;
    }

    .dashboard-link span {
        font-size: 18px;
    }


    /* =====================================================
       HERO
    ====================================================== */

    .pricing-hero {
        width: 100%;
        max-width: 100%;
        padding: 54px 18px 0;
        text-align: center;
    }

    .pricing-hero .eyebrow {
        margin-bottom: 18px;
    }

    /*
       Force the main heading into a clean 2-line structure.
    */

    .pricing-hero h1 {
        width: 100%;
        max-width: 360px;
        margin: 0 auto;
        font-size: clamp(38px, 10.5vw, 52px);
        line-height: 0.98;
        letter-spacing: -0.055em;
        text-wrap: balance;
    }

    .pricing-hero h1 span {
        display: block;
        margin-top: 2px;

        /*
           Prevent awkward 3-line wrapping.
        */
        font-size: 0.93em;
        line-height: 0.98;
    }

    .hero-description {
        max-width: 340px;
        margin: 26px auto 0;
        font-size: 14px;
        line-height: 1.55;
    }


    /* =====================================================
       TRUST POINTS
    ====================================================== */

    .trust-points {
        max-width: 350px;
        margin: 24px auto 0;

        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 7px;
    }

    .trust-points span {
        font-size: 9px;
        line-height: 1;
        padding: 8px 10px;
        white-space: nowrap;
    }


    /* =====================================================
       BILLING
    ====================================================== */

    .billing-section {
        margin-top: 28px;
        padding: 0 16px;
    }

    .billing-toggle {
        width: min(100%, 230px);
        margin: 0 auto;
    }

    .billing-option {
        min-height: 42px;
        font-size: 12px;
    }

    .billing-message {
        margin-top: 10px;
        font-size: 10px;
        line-height: 1.4;
    }


    /* =====================================================
       PLANS CONTAINER
    ====================================================== */

    .plans-section {
        width: 100%;
        padding: 0 16px;
        margin-top: 26px;
    }

    .plans-grid {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }


    /* =====================================================
       MOBILE CARD
    ====================================================== */

    .plan-card {
        width: 100%;
        min-width: 0;

        /*
           Important:
           Don't force a fixed height.
           The JS collapse system controls the content.
        */
        height: auto;
        min-height: 0;

        padding: 20px 16px 16px;

        border-radius: 18px;

        overflow: hidden;

        box-sizing: border-box;
    }


    /* =====================================================
       CARD HEADER
    ====================================================== */

    .plan-top {
        position: relative;
        min-height: 0;
    }

    .plan-eyebrow {
        font-size: 9px;
        letter-spacing: 0.09em;
    }

    .plan-heading h2 {
        margin-top: 4px;
        font-size: 25px;
        line-height: 1;
        letter-spacing: -0.04em;
    }

    .plan-description {
        margin-top: 18px;
        max-width: 100%;

        font-size: 11px;
        line-height: 1.55;
    }


    /* =====================================================
       BADGES
    ====================================================== */

    .popular-badge,
    .coming-badge {
        top: 16px;
        right: 14px;

        font-size: 8px;
        padding: 7px 10px;

        white-space: nowrap;
    }


    /* =====================================================
       PRICE
    ====================================================== */

    .price-block {
        margin-top: 18px;
        padding-top: 17px;
    }

    .price-line {
        align-items: baseline;
        flex-wrap: nowrap;
    }

    .price {
        font-size: 42px;
        line-height: 0.95;
        letter-spacing: -0.055em;
        white-space: nowrap;
    }

    .price-period {
        font-size: 10px;
        margin-left: 3px;
        white-space: nowrap;
    }

    .price-note {
        display: block;
        margin-top: 8px;
        font-size: 9px;
        line-height: 1.35;
    }

    .yearly-equivalent {
        margin-top: 5px;
        font-size: 12px;
        line-height: 1.3;
    }

    .yearly-savings {
        margin-top: 5px;
        font-size: 9px;
        line-height: 1.4;
    }


    /* =====================================================
       USAGE
    ====================================================== */

    .usage-header {
        margin-top: 17px;
        padding-top: 15px;
    }

    .usage-header span {
        font-size: 11px;
    }

    .usage-header small {
        display: block;
        margin-top: 3px;
        font-size: 8px;
    }

    .usage-list {
        margin-top: 8px;
        gap: 0;
    }

    .usage-list li {
        min-height: 25px;
        font-size: 9px;
        line-height: 1.3;
    }

    .usage-list li strong {
        font-size: 9px;
        white-space: nowrap;
    }


    /* =====================================================
       COLLAPSIBLE CONTENT
    ====================================================== */

    /*
       The JS adds .mobile-collapsed to the card.
       Only the long feature content gets hidden.
    */

    .plan-card.mobile-collapsed .feature-group,
    .plan-card.mobile-collapsed .pro-bottom,
    .plan-card.mobile-collapsed .plan-action {
        display: none;
    }

    /*
       Keep the compact top portion visible.
    */

    .plan-card.mobile-expanded .feature-group,
    .plan-card.mobile-expanded .pro-bottom,
    .plan-card.mobile-expanded .plan-action {
        display: block;
    }


    /* =====================================================
       MOBILE EXPAND BUTTON
    ====================================================== */

    .mobile-plan-toggle {
        width: 100%;
        margin-top: 16px;

        min-height: 38px;

        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;

        border: 1px solid rgba(255, 255, 255, 0.10);
        border-radius: 10px;

        background: rgba(255, 255, 255, 0.025);

        color: rgba(255, 255, 255, 0.72);

        font-family: inherit;
        font-size: 10px;
        font-weight: 700;

        cursor: pointer;

        transition:
            background 180ms ease,
            border-color 180ms ease,
            color 180ms ease;
    }

    .mobile-plan-toggle:active {
        transform: scale(0.985);
    }

    .mobile-plan-toggle:hover {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.16);
        color: #fff;
    }

    .mobile-plan-toggle .toggle-icon {
        transition: transform 220ms ease;
    }

    .plan-card.mobile-expanded .mobile-plan-toggle .toggle-icon {
        transform: rotate(180deg);
    }


    /* =====================================================
       FEATURE GROUPS
    ====================================================== */

    .feature-group {
        margin-top: 18px;
        padding-top: 15px;
    }

    .feature-group h3 {
        font-size: 11px;
        line-height: 1.25;
        margin-bottom: 8px;
    }

    .feature-list {
        gap: 0;
    }

    .feature-list li {
        min-height: 25px;

        display: grid;
        grid-template-columns: 16px minmax(0, 1fr);

        align-items: center;

        font-size: 9px;
        line-height: 1.35;
    }

    .feature-list .check,
    .feature-list .lock {
        font-size: 9px;
    }


    /* =====================================================
       PRO BOTTOM
    ====================================================== */

    .pro-bottom {
        margin-top: 20px;
        padding-top: 15px;
    }

    .pro-bottom p {
        font-size: 10px;
        line-height: 1.45;
        margin-bottom: 12px;
    }


    /* =====================================================
       BUTTONS
    ====================================================== */

    .plan-button {
        width: 100%;
        min-height: 40px;

        border-radius: 10px;

        font-size: 10px;
    }


    /* =====================================================
       CREATOR+
    ====================================================== */

    .creator-plus-card .coming-title {
        margin-top: 20px;

        font-size: 28px;
        line-height: 1;

        letter-spacing: -0.045em;
    }


    /* =====================================================
       COMPARISON SECTION
    ====================================================== */

    .comparison-section {
        width: 100%;
        padding: 60px 16px 0;
    }

    .section-heading {
        width: 100%;
        max-width: 350px;
        margin: 0 auto;
        text-align: center;
    }

    .section-heading .eyebrow {
        display: inline-flex;
        margin-bottom: 16px;
    }

    .section-heading h2 {
        max-width: 340px;
        margin: 0 auto;

        font-size: 29px;
        line-height: 1.02;
        letter-spacing: -0.045em;

        text-wrap: balance;
    }

    .section-heading p {
        max-width: 320px;
        margin: 16px auto 0;

        font-size: 10px;
        line-height: 1.5;
    }


    /* =====================================================
       COMPARISON HORIZONTAL SCROLL
    ====================================================== */

    .comparison-wrapper {
        width: 100%;

        margin-top: 22px;

        overflow-x: auto;
        overflow-y: hidden;

        -webkit-overflow-scrolling: touch;

        /*
           Important:
           Don't let the table squeeze itself.
        */
        overscroll-behavior-x: contain;

        scrollbar-width: thin;
    }

    .comparison-table {
        /*
           4 columns:
           Feature + Free + Pro + Creator+
        */
        width: max-content;
        min-width: 700px;
    }

    .comparison-row {
        display: grid;

        grid-template-columns:
            220px
            150px
            150px
            150px;

        min-height: 58px;
    }

    .comparison-row > div {
        min-width: 0;
        padding: 15px 14px;

        display: flex;
        align-items: center;
    }

    .comparison-header {
        min-height: 58px;
    }

    .comparison-header > div {
        font-size: 10px;
    }

    .comparison-row:not(.comparison-header) > div {
        font-size: 9px;
    }

    .comparison-row > div:first-child {
        white-space: nowrap;
    }

    .comparison-row > div:not(:first-child) {
        justify-content: center;
        text-align: center;
        white-space: nowrap;
    }

    /*
       Makes the three plan columns easy to distinguish
       while scrolling.
    */

    .comparison-table .pro-column {
        position: relative;
    }

    .comparison-note {
        max-width: 330px;
        margin: 14px auto 0;

        font-size: 9px;
        line-height: 1.5;

        text-align: center;
    }


    /* =====================================================
       FINAL CTA
    ====================================================== */

    .pricing-cta {
        width: calc(100% - 32px);

        margin: 52px auto 24px;

        border-radius: 18px;
    }

    .cta-content {
        padding: 38px 18px;
        text-align: center;
    }

    .cta-content h2 {
        max-width: 330px;
        margin: 16px auto 0;

        font-size: 31px;
        line-height: 1.02;
        letter-spacing: -0.045em;

        text-wrap: balance;
    }

    .cta-content h2 span {
        display: block;
        margin-top: 3px;
    }

    .cta-content p {
        max-width: 310px;
        margin: 15px auto 0;

        font-size: 10px;
        line-height: 1.5;
    }

    .cta-button {
        width: min(100%, 180px);
        margin: 20px auto 0;
    }


    /* =====================================================
       VERY SMALL PHONES
    ====================================================== */

    @media (max-width: 380px) {

        .pricing-hero {
            padding-left: 14px;
            padding-right: 14px;
        }

        .pricing-hero h1 {
            max-width: 340px;
            font-size: 37px;
        }

        .pricing-hero h1 span {
            font-size: 0.91em;
        }

        .plans-section {
            padding-left: 12px;
            padding-right: 12px;
        }

        .plan-card {
            padding-left: 14px;
            padding-right: 14px;
        }

        .price {
            font-size: 39px;
        }

        .comparison-section {
            padding-left: 12px;
            padding-right: 12px;
        }

        .comparison-table {
            min-width: 660px;
        }

        .comparison-row {
            grid-template-columns:
                200px
                145px
                145px
                145px;
        }
    }

}

/* =========================================================
   VIRALMINT AI — FINAL MOBILE POLISH
   HERO + COMPARISON + CTA
   Pricing cards intentionally untouched.
========================================================= */

@media (max-width: 768px) {

    /* =====================================================
       HERO HEADING — EXACTLY 2 LINES
    ===================================================== */

    .pricing-hero h1 {
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;

        font-size: clamp(2.25rem, 9.5vw, 3.2rem);
        line-height: 0.98;

        letter-spacing: -0.045em;

        overflow: visible;
        word-break: normal;
        overflow-wrap: normal;

        padding-bottom: 0.08em;
    }

    /*
       "Creator Intelligence Plan" stays together
       as the second line instead of becoming:

       Choose your
       Creator
       Intelligence Plan
    */

    .pricing-hero h1 span {
        display: block;

        width: max-content;
        max-width: 100%;

        margin-left: auto;
        margin-right: auto;

        white-space: nowrap;

        line-height: 0.98;

        overflow: visible;
        padding-bottom: 0.08em;
    }


    /* =====================================================
       COMPARE SECTION — COMPACT MOBILE HEADER
    ===================================================== */

    .comparison-section {
        width: calc(100% - 28px);

        padding-bottom: 55px;
    }


    .comparison-section .section-heading {
        margin-bottom: 20px;
    }


    .comparison-section .section-heading h2 {
        max-width: 340px;
        margin-left: auto;
        margin-right: auto;

        font-size: clamp(1.75rem, 7.5vw, 2.25rem);

        line-height: 1.02;

        letter-spacing: -0.035em;

        overflow: visible;

        padding-bottom: 0.08em;
    }


    .comparison-section .section-heading p {
        max-width: 310px;
        margin-left: auto;
        margin-right: auto;

        font-size: 0.70rem;
        line-height: 1.55;
    }


    /* =====================================================
       COMPARISON WRAPPER
    ===================================================== */

    .comparison-wrapper {
        position: relative;

        width: 100%;

        border-radius: 18px;

        overflow: hidden;
    }


    /*
       Horizontal scrolling remains available when expanded.
    */

    .comparison-wrapper {
        overflow-x: auto;
        overflow-y: hidden;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: thin;
    }


    .comparison-wrapper table {
        width: max-content;
        min-width: 100%;

        border-collapse: separate;
        border-spacing: 0;
    }


    /*
       Keep the comparison columns comfortable.
       We intentionally DON'T squeeze Free/Pro/Creator+
       into tiny columns.
    */

    .comparison-wrapper th,
    .comparison-wrapper td {
        min-width: 105px;

        white-space: nowrap;
    }


    .comparison-wrapper th:first-child,
    .comparison-wrapper td:first-child {
        min-width: 150px;
    }


    /* =====================================================
       COMPARISON COLLAPSED STATE
    ===================================================== */

    .comparison-wrapper.mobile-comparison-collapsed {
        max-height: 395px;
    }


    /*
       Hide rows beyond the initial preview.
       JavaScript adds .comparison-hidden-row.
    */

    .comparison-wrapper.mobile-comparison-collapsed
    .comparison-hidden-row {
        display: none;
    }


    /* =====================================================
       COMPARISON EXPANDED STATE
    ===================================================== */

    .comparison-wrapper.mobile-comparison-expanded {
        max-height: none;

        overflow-x: auto;
        overflow-y: hidden;
    }


    /* =====================================================
       VIEW FULL COMPARISON BUTTON
    ===================================================== */

    .mobile-comparison-toggle {
        display: flex;

        width: 100%;
        min-height: 44px;

        align-items: center;
        justify-content: center;
        gap: 8px;

        margin: 12px 0 0;

        padding: 0 18px;

        border: 1px solid rgba(255, 255, 255, 0.10);

        border-radius: 12px;

        background:
            linear-gradient(
                135deg,
                rgba(255, 255, 255, 0.045),
                rgba(255, 255, 255, 0.018)
            );

        color: rgba(255, 255, 255, 0.78);

        font-family: inherit;
        font-size: 0.72rem;
        font-weight: 700;

        letter-spacing: 0.01em;

        cursor: pointer;

        -webkit-tap-highlight-color: transparent;

        transition:
            background 180ms ease,
            border-color 180ms ease,
            transform 180ms ease;
    }


    .mobile-comparison-toggle:hover {
        border-color: rgba(255, 42, 168, 0.28);

        background:
            linear-gradient(
                135deg,
                rgba(255, 42, 168, 0.08),
                rgba(150, 70, 255, 0.06)
            );
    }


    .mobile-comparison-toggle:active {
        transform: scale(0.985);
    }


    .mobile-comparison-toggle .comparison-toggle-icon {
        font-size: 0.85rem;

        line-height: 1;

        transition:
            transform 180ms ease;
    }


    .mobile-comparison-toggle.is-expanded
    .comparison-toggle-icon {
        transform: rotate(180deg);
    }


    /* =====================================================
       FINAL CTA — EXACTLY 2 LINES
    ===================================================== */

    .pricing-cta {
        width: calc(100% - 28px);

        padding:
            42px 20px 40px;

        border-radius: 22px;
    }


    .pricing-cta h2 {
        width: 100%;
        max-width: 340px;

        margin-left: auto;
        margin-right: auto;

        font-size: clamp(1.8rem, 7.8vw, 2.4rem);

        line-height: 1.02;

        letter-spacing: -0.035em;

        overflow: visible;

        padding-bottom: 0.10em;
    }


    /*
       Keep:
       Start free.
       Upgrade when you're ready.

       instead of creating a third line.
    */

    .pricing-cta h2 span {
        display: block;

        width: max-content;
        max-width: 100%;

        margin-left: auto;
        margin-right: auto;

        white-space: nowrap;

        line-height: 1.02;

        overflow: visible;

        padding-bottom: 0.08em;
    }


    .pricing-cta p {
        max-width: 300px;

        margin-left: auto;
        margin-right: auto;

        font-size: 0.72rem;
        line-height: 1.55;
    }


    .pricing-cta .cta-button {
        min-height: 44px;

        padding: 0 22px;

        font-size: 0.72rem;
    }
}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 390px) {

    .pricing-hero h1 {
        font-size: 2.15rem;
    }


    .pricing-hero h1 span {
        font-size: 0.92em;
    }


    .comparison-section .section-heading h2 {
        font-size: 1.7rem;
    }


    .pricing-cta h2 {
        font-size: 1.72rem;
    }


    .pricing-cta h2 span {
        font-size: 0.95em;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .mobile-comparison-toggle,
    .mobile-comparison-toggle .comparison-toggle-icon {
        transition: none !important;
    }

}

/* =========================================================
   VIRALMINT AI — FINAL MOBILE PRICING POLISH
   Heading + CTA overflow fixes
========================================================= */

@media (max-width: 768px) {

    /* =====================================================
       MAIN PRICING HERO HEADING
    ====================================================== */

    .pricing-hero h1,
    .pricing-header h1,
    .pricing-section h1 {
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;

        font-size: clamp(34px, 9vw, 46px);
        line-height: 0.98;

        white-space: normal;
        overflow-wrap: normal;
        word-break: normal;

        text-wrap: balance;

        padding-left: 8px;
        padding-right: 8px;

        box-sizing: border-box;
    }


    /* Gradient heading/text inside the main heading */

    .pricing-hero h1 span,
    .pricing-header h1 span,
    .pricing-section h1 span {
        max-width: 100%;

        white-space: normal;
        overflow-wrap: normal;
        word-break: normal;

        display: inline;
    }


    /* =====================================================
       FINAL CTA HEADING
    ====================================================== */

    .pricing-cta h2,
    .final-cta h2,
    .pricing-final-cta h2 {
        width: 100%;
        max-width: 100%;

        margin-left: auto;
        margin-right: auto;

        font-size: clamp(30px, 8.5vw, 42px);
        line-height: 1.02;

        white-space: normal;
        overflow-wrap: normal;
        word-break: normal;

        text-wrap: balance;

        padding-left: 8px;
        padding-right: 8px;

        box-sizing: border-box;
    }


    /* Gradient portion of CTA heading */

    .pricing-cta h2 span,
    .final-cta h2 span,
    .pricing-final-cta h2 span {
        max-width: 100%;

        white-space: normal;
        overflow-wrap: normal;
        word-break: normal;

        display: inline;
    }


    /* =====================================================
       PREVENT HORIZONTAL OVERFLOW
    ====================================================== */

    .pricing-section,
    .pricing-hero,
    .pricing-header,
    .pricing-cta,
    .final-cta,
    .pricing-final-cta {
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }


    /* =====================================================
       CTA CARD — COMFORTABLE MOBILE WIDTH
    ====================================================== */

    .pricing-cta,
    .final-cta,
    .pricing-final-cta {
        width: calc(100% - 8px);
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;

        box-sizing: border-box;
    }


    /* =====================================================
       MOBILE HERO SPACING
    ====================================================== */

    .pricing-hero h1,
    .pricing-header h1 {
        margin-bottom: 20px;
    }

}/* =========================================================
   VIRALMINT AI — FINAL MOBILE PRICING POLISH
   Heading + CTA overflow fixes
========================================================= */

@media (max-width: 768px) {

    /* =====================================================
       MAIN PRICING HERO HEADING
    ====================================================== */

    .pricing-hero h1,
    .pricing-header h1,
    .pricing-section h1 {
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;

        font-size: clamp(34px, 9vw, 46px);
        line-height: 0.98;

        white-space: normal;
        overflow-wrap: normal;
        word-break: normal;

        text-wrap: balance;

        padding-left: 8px;
        padding-right: 8px;

        box-sizing: border-box;
    }


    /* Gradient heading/text inside the main heading */

    .pricing-hero h1 span,
    .pricing-header h1 span,
    .pricing-section h1 span {
        max-width: 100%;

        white-space: normal;
        overflow-wrap: normal;
        word-break: normal;

        display: inline;
    }


    /* =====================================================
       FINAL CTA HEADING
    ====================================================== */

    .pricing-cta h2,
    .final-cta h2,
    .pricing-final-cta h2 {
        width: 100%;
        max-width: 100%;

        margin-left: auto;
        margin-right: auto;

        font-size: clamp(30px, 8.5vw, 42px);
        line-height: 1.02;

        white-space: normal;
        overflow-wrap: normal;
        word-break: normal;

        text-wrap: balance;

        padding-left: 8px;
        padding-right: 8px;

        box-sizing: border-box;
    }


    /* Gradient portion of CTA heading */

    .pricing-cta h2 span,
    .final-cta h2 span,
    .pricing-final-cta h2 span {
        max-width: 100%;

        white-space: normal;
        overflow-wrap: normal;
        word-break: normal;

        display: inline;
    }


    /* =====================================================
       PREVENT HORIZONTAL OVERFLOW
    ====================================================== */

    .pricing-section,
    .pricing-hero,
    .pricing-header,
    .pricing-cta,
    .final-cta,
    .pricing-final-cta {
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }


    /* =====================================================
       CTA CARD — COMFORTABLE MOBILE WIDTH
    ====================================================== */

    .pricing-cta,
    .final-cta,
    .pricing-final-cta {
        width: calc(100% - 8px);
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;

        box-sizing: border-box;
    }


    /* =====================================================
       MOBILE HERO SPACING
    ====================================================== */

    .pricing-hero h1,
    .pricing-header h1 {
        margin-bottom: 20px;
    }

}

/* =========================================================
   VIRALMINT AI — MOBILE COMPARISON POLISH
   Final mobile refinement
========================================================= */

@media (max-width: 768px) {

    /* -----------------------------------------------------
       COMPARISON WRAPPER
    ----------------------------------------------------- */

    .comparison-wrapper {
        position: relative;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;

        /* Smooth native mobile scrolling */
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;

        /* Hide scrollbar without disabling scrolling */
        scrollbar-width: none;
    }

    .comparison-wrapper::-webkit-scrollbar {
        display: none;
    }


    /* -----------------------------------------------------
       REMOVE THE OLD "SWIPE LEFT..." MESSAGE
    ----------------------------------------------------- */

    .comparison-scroll-hint,
    .comparison-swipe-hint,
    .swipe-hint {
        display: none !important;
    }


    /* -----------------------------------------------------
       SUBTLE SCROLL ARROW
       Small visual hint instead of instructional text
    ----------------------------------------------------- */

    .comparison-wrapper::after {
        content: "→";

        position: absolute;
        top: 50%;
        right: 8px;

        transform: translateY(-50%);

        width: 28px;
        height: 28px;

        display: flex;
        align-items: center;
        justify-content: center;

        border-radius: 50%;

        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.12);

        color: rgba(255, 255, 255, 0.75);

        font-size: 15px;
        font-weight: 600;

        pointer-events: none;

        opacity: 0.85;

        /* Very subtle fade */
        animation: comparisonArrowHint 2.4s ease-in-out infinite;
    }


    /* -----------------------------------------------------
       FULL COMPARISON BUTTON
    ----------------------------------------------------- */

    .comparison-toggle,
    .view-full-comparison,
    .comparison-expand-btn {
        width: 100%;

        min-height: 44px;

        margin-top: 14px;

        padding: 10px 18px;

        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;

        border-radius: 10px;

        background:
            linear-gradient(
                135deg,
                rgba(255, 0, 140, 0.07),
                rgba(168, 76, 255, 0.08)
            );

        border: 1px solid rgba(255, 0, 150, 0.28);

        color: rgba(255, 255, 255, 0.88);

        font-size: 12px;
        font-weight: 700;

        letter-spacing: 0.01em;

        cursor: pointer;

        transition:
            background 0.25s ease,
            border-color 0.25s ease,
            transform 0.2s ease,
            box-shadow 0.25s ease;
    }


    .comparison-toggle:hover,
    .view-full-comparison:hover,
    .comparison-expand-btn:hover {

        background:
            linear-gradient(
                135deg,
                rgba(255, 0, 140, 0.12),
                rgba(168, 76, 255, 0.14)
            );

        border-color: rgba(255, 0, 150, 0.42);

        box-shadow:
            0 6px 22px rgba(180, 0, 150, 0.12);
    }


    .comparison-toggle:active,
    .view-full-comparison:active,
    .comparison-expand-btn:active {
        transform: scale(0.985);
    }


    /* -----------------------------------------------------
       TOGGLE ARROW
    ----------------------------------------------------- */

    .comparison-toggle .toggle-icon,
    .view-full-comparison .toggle-icon,
    .comparison-expand-btn .toggle-icon {
        font-size: 13px;
        line-height: 1;

        transition: transform 0.25s ease;
    }


    /* -----------------------------------------------------
       SMALL FOOTNOTE BELOW COMPARISON
    ----------------------------------------------------- */

    .comparison-note {
        margin-top: 12px;

        padding: 0 12px;

        text-align: center;

        font-size: 10px;
        line-height: 1.5;

        color: rgba(255, 255, 255, 0.42);
    }

}


/* =========================================================
   ARROW ANIMATION
========================================================= */

@keyframes comparisonArrowHint {

    0%,
    100% {
        opacity: 0.35;
        transform: translate(0, -50%);
    }

    50% {
        opacity: 0.85;
        transform: translate(4px, -50%);
    }

}

@media (max-width: 768px) {

    .comparison-wrapper::after {
        display: none !important;
        content: none !important;
    }

}

@media (min-width: 769px) {

    .comparison-wrapper {
        width: 100%;
        max-width: 100%;
        overflow: visible;
    }

    .comparison-table {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

}