/* ==================================================
   SAAP MOBILE REFINEMENT
   Smaller type + cleaner spacing + fixed hero bubble
   ================================================== */

@media (max-width: 650px) {

    /* ------------------------------------------
       GLOBAL MOBILE WIDTH
       ------------------------------------------ */

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

    .saap-home,
    .saap-sextortion-page,
    .saap-ht-page,
    .saap-campus-page,
    .saap-sg-page {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .saap-home-inner,
    .saap-sex-inner,
    .saap-ht-inner,
    .saap-campus-inner,
    .saap-sg-inner {
        width: calc(100% - 32px) !important;
        max-width: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }


    /* ------------------------------------------
       FORCE MOBILE STACKING
       ------------------------------------------ */

    .saap-hero-layout,
    .saap-start-layout,
    .saap-start-cards,
    .saap-help-items,
    .saap-info-grid,
    .saap-resource-grid,
    .saap-community-grid,

    .saap-sex-hero-grid,
    .saap-sex-two-col,
    .saap-sex-grid-4,
    .saap-sex-grid-3,
    .saap-sex-dark-grid,
    .saap-sex-purple-grid,
    .saap-sex-doc-list,
    .saap-sex-support-grid,
    .saap-sex-support-layout,
    .saap-sex-support-list,
    .saap-sex-next-grid,
    .saap-sex-final-grid,

    .saap-ht-hero-grid,
    .saap-ht-two-col,
    .saap-ht-grid-2,
    .saap-ht-grid-3,
    .saap-ht-grid-4,
    .saap-ht-dark-grid,
    .saap-ht-purple-grid,
    .saap-ht-purple-list,
    .saap-ht-support-layout,
    .saap-ht-support-list,
    .saap-ht-next-grid,
    .saap-ht-final-grid,

    .saap-campus-hero-grid,
    .saap-campus-two-col,
    .saap-campus-grid-4,
    .saap-campus-grid-3,
    .saap-campus-dark-grid,
    .saap-campus-purple-grid,
    .saap-campus-purple-list,
    .saap-campus-support-grid,
    .saap-campus-irsc-grid,
    .saap-campus-topic-grid,
    .saap-campus-support-layout,
    .saap-campus-support-list,
    .saap-campus-next-grid,
    .saap-campus-final-grid,

    .saap-sg-hero-grid,
    .saap-sg-two-col,
    .saap-sg-grid-3,
    .saap-sg-grid-4,
    .saap-sg-dark-grid,
    .saap-sg-dark-list,
    .saap-sg-purple-grid,
    .saap-sg-compare,
    .saap-sg-availability-grid,
    .saap-sg-support-grid,
    .saap-sg-support-list,
    .saap-sg-next-grid,
    .saap-sg-final-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 18px !important;
    }


    /* ------------------------------------------
       MOBILE HERO
       ------------------------------------------ */

    .saap-home-hero,
    .saap-sex-hero,
    .saap-ht-hero,
    .saap-campus-hero,
    .saap-sg-hero {
        min-height: auto !important;
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }

    .saap-hero-layout {
        min-height: auto !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .saap-logo-wrap {
        margin-bottom: 16px !important;
    }

    .saap-home-logo {
        width: 200px !important;
        max-width: 75% !important;
    }


    /* ------------------------------------------
       HERO TITLES
       ------------------------------------------ */

    .saap-hero-copy h1,
    .saap-sex-hero h1,
    .saap-ht-hero h1,
    .saap-campus-hero h1,
    .saap-sg-hero h1 {
        font-size: 42px !important;
        line-height: 1.03 !important;
        letter-spacing: -1px !important;
        overflow-wrap: break-word !important;
    }

    .saap-accent-line,
    .saap-sex-accent,
    .saap-ht-accent,
    .saap-campus-accent,
    .saap-sg-accent {
        width: 62px !important;
        height: 4px !important;
        margin: 16px 0 18px !important;
    }


    /* ------------------------------------------
       HERO BODY TEXT
       ------------------------------------------ */

    .saap-hero-description,
    .saap-sex-hero-lead,
    .saap-ht-hero-lead,
    .saap-campus-hero-lead,
    .saap-sg-hero-lead {
        font-size: 16px !important;
        line-height: 1.55 !important;
    }

    .saap-hero-counties,
    .saap-sex-hero-note,
    .saap-ht-hero-note,
    .saap-campus-hero-note,
    .saap-sg-hero-note {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }


    /* ------------------------------------------
       FIX HOMEPAGE HERO BUBBLE
       ------------------------------------------ */

    .saap-hero-message {
        min-height: auto !important;
        margin-top: 18px !important;
    }

    .saap-hero-message-card {
        width: 100% !important;
        max-width: 340px !important;

        margin: 0 auto !important;

        padding: 34px 24px !important;

        border-radius: 28px !important;

        background: rgba(255,255,255,.65) !important;

        box-shadow: 0 16px 35px rgba(40,74,78,.08) !important;
    }

    .saap-hero-message-card p {
        font-size: 17px !important;
    }

    .saap-hero-message-card h2 {
        font-size: 29px !important;
        line-height: 1.1 !important;
    }

    .saap-heart {
        font-size: 36px !important;
        margin-bottom: 7px !important;
    }

    .saap-hero-message-card span {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }


    /* ------------------------------------------
       OTHER HERO FEATURE CARDS
       ------------------------------------------ */

    .saap-sex-hero-card,
    .saap-ht-hero-card,
    .saap-campus-hero-card,
    .saap-sg-hero-card {
        width: 100% !important;
        max-width: 100% !important;

        padding: 26px 22px !important;

        border-radius: 16px !important;
    }

    .saap-sex-hero-card h2,
    .saap-ht-hero-card h2,
    .saap-campus-hero-card h2,
    .saap-sg-hero-card h2 {
        font-size: 24px !important;
        line-height: 1.2 !important;
    }

    .saap-sex-hero-card p,
    .saap-ht-hero-card p,
    .saap-campus-hero-card p,
    .saap-sg-hero-card p {
        font-size: 13px !important;
        line-height: 1.55 !important;
    }


    /* ------------------------------------------
       SECTION TITLES
       ------------------------------------------ */

    .saap-center-heading h2,
    .saap-start-intro h2,
    .saap-why-card h2,
    .saap-about-card h2,

    .saap-sex-heading h2,
    .saap-sex-two-col h2,
    .saap-sex-dark-section h2,
    .saap-sex-purple-section h2,
    .saap-sex-support-section h2,

    .saap-ht-heading h2,
    .saap-ht-two-col h2,
    .saap-ht-dark-section h2,
    .saap-ht-purple-section h2,
    .saap-ht-support-section h2,

    .saap-campus-heading h2,
    .saap-campus-two-col h2,
    .saap-campus-dark-section h2,
    .saap-campus-purple-section h2,
    .saap-campus-irsc-header h2,
    .saap-campus-support-section h2,

    .saap-sg-heading h2,
    .saap-sg-two-col h2,
    .saap-sg-dark-section h2,
    .saap-sg-purple-section h2,
    .saap-sg-availability-section h2,
    .saap-sg-support-section h2 {
        font-size: 29px !important;
        line-height: 1.18 !important;
    }


    /* ------------------------------------------
       SECTION BODY TEXT
       ------------------------------------------ */

    .saap-home p,
    .saap-sextortion-page p,
    .saap-ht-page p,
    .saap-campus-page p,
    .saap-sg-page p {
        font-size: 13px !important;
        line-height: 1.6 !important;
    }


    /* ------------------------------------------
       SMALL LABELS
       ------------------------------------------ */

    .saap-section-label,
    .saap-light-label,
    .saap-sex-label,
    .saap-sex-light-label,
    .saap-ht-label,
    .saap-ht-light-label,
    .saap-campus-label,
    .saap-campus-light-label,
    .saap-sg-label,
    .saap-sg-light-label {
        font-size: 9px !important;
        letter-spacing: 1.5px !important;
    }


    /* ------------------------------------------
       CARD SIZE + TEXT
       ------------------------------------------ */

    .saap-start-card,
    .saap-resource-card,
    .saap-community-small-card,
    .saap-community-featured,

    .saap-sex-card,
    .saap-sex-step-card,
    .saap-sex-soft-card,
    .saap-sex-dark-card,
    .saap-sex-next-card,

    .saap-ht-card,
    .saap-ht-type-card,
    .saap-ht-soft-card,
    .saap-ht-dark-card,
    .saap-ht-next-card,

    .saap-campus-card,
    .saap-campus-soft-card,
    .saap-campus-dark-card,
    .saap-campus-highlight-card,
    .saap-campus-irsc-card,
    .saap-campus-topic,
    .saap-campus-next-card,

    .saap-sg-card,
    .saap-sg-group-card,
    .saap-sg-soft-card,
    .saap-sg-purple-card,
    .saap-sg-contact-card,
    .saap-sg-next-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        min-height: auto !important;

        padding: 22px 20px !important;

        border-radius: 13px !important;
    }


    /* ------------------------------------------
       CARD HEADINGS
       ------------------------------------------ */

    .saap-start-card h3,
    .saap-help-item h3,
    .saap-resource-card h3,
    .saap-community-small-card h3,

    .saap-sex-card h3,
    .saap-sex-step-card h3,
    .saap-sex-soft-card h3,
    .saap-sex-next-card h3,

    .saap-ht-card h3,
    .saap-ht-type-card h3,
    .saap-ht-soft-card h3,
    .saap-ht-next-card h3,

    .saap-campus-card h3,
    .saap-campus-soft-card h3,
    .saap-campus-dark-card h3,
    .saap-campus-irsc-card h3,
    .saap-campus-topic h3,
    .saap-campus-next-card h3,

    .saap-sg-card h3,
    .saap-sg-group-card h3,
    .saap-sg-soft-card h3,
    .saap-sg-next-card h3 {
        font-size: 18px !important;
        line-height: 1.25 !important;
    }


    /* ------------------------------------------
       HOME START HERE CARDS
       ------------------------------------------ */

    .saap-start-card {
        grid-template-columns: 46px 1fr !important;
        gap: 13px !important;
    }

    .saap-round-icon {
        width: 46px !important;
        height: 46px !important;
        font-size: 21px !important;
    }

    .saap-start-card-content {
        min-height: auto !important;
    }


    /* ------------------------------------------
       HOW WE HELP
       ------------------------------------------ */

    .saap-help-items {
        gap: 0 !important;
    }

    .saap-help-item {
        padding: 20px 10px !important;

        border-right: 0 !important;
        border-bottom: 1px solid #e3eaea !important;
    }

    .saap-help-item:last-child {
        border-bottom: 0 !important;
    }

    .saap-help-icon {
        width: 48px !important;
        height: 48px !important;

        margin-bottom: 10px !important;

        font-size: 20px !important;
    }


    /* ------------------------------------------
       WHY + ABOUT HOME
       ------------------------------------------ */

    .saap-why-card,
    .saap-about-card {
        min-height: auto !important;
        padding: 26px 22px !important;
        border-radius: 13px !important;
    }


    /* ------------------------------------------
       COMMUNITY FEATURED
       ------------------------------------------ */

    .saap-community-featured {
        min-height: auto !important;

        justify-content: flex-start !important;

        padding: 26px 22px !important;
    }

    .saap-community-featured h3 {
        font-size: 25px !important;
    }


    /* ------------------------------------------
       SUPPORT / COMPARISON BOXES
       ------------------------------------------ */

    .saap-sex-support-good,
    .saap-sex-support-avoid,
    .saap-campus-support-good,
    .saap-campus-support-avoid {
        padding: 24px 20px !important;
    }


    /* ------------------------------------------
       BUTTONS
       ------------------------------------------ */

    .saap-hero-actions,
    .saap-sex-hero-actions,
    .saap-ht-hero-actions,
    .saap-campus-hero-actions,
    .saap-sg-hero-actions {
        flex-direction: column !important;
        gap: 10px !important;
        margin-top: 20px !important;
    }

    .saap-main-button,
    .saap-phone-button,
    .saap-sex-main-button,
    .saap-sex-outline-button,
    .saap-ht-main-button,
    .saap-ht-outline-button,
    .saap-campus-main-button,
    .saap-campus-outline-button,
    .saap-sg-main-button,
    .saap-sg-outline-button {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        min-height: 48px !important;

        padding: 11px 18px !important;

        font-size: 12px !important;
    }


    /* ------------------------------------------
       FINAL HELPLINE
       ------------------------------------------ */

    .saap-bottom-layout,
    .saap-sex-final-grid,
    .saap-ht-final-grid,
    .saap-campus-final-grid,
    .saap-sg-final-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .saap-bottom-help,
    .saap-sex-final,
    .saap-ht-final,
    .saap-campus-final,
    .saap-sg-final {
        padding-top: 34px !important;
        padding-bottom: 34px !important;
    }

    .saap-bottom-layout h2,
    .saap-sex-final h2,
    .saap-ht-final h2,
    .saap-campus-final h2,
    .saap-sg-final h2 {
        font-size: 23px !important;
    }

    .saap-bottom-phone,
    .saap-bottom-options,
    .saap-sex-final-phone,
    .saap-ht-final-phone,
    .saap-campus-final-phone,
    .saap-sg-final-phone {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }


    /* ------------------------------------------
       REDUCE SECTION HEIGHT
       ------------------------------------------ */

    .saap-start-section,
    .saap-help-section,
    .saap-resource-section,
    .saap-community-section,

    .saap-sex-section,
    .saap-sex-light-section,
    .saap-sex-dark-section,
    .saap-sex-purple-section,
    .saap-sex-support-section,
    .saap-sex-next-section,

    .saap-ht-section,
    .saap-ht-light-section,
    .saap-ht-dark-section,
    .saap-ht-purple-section,
    .saap-ht-support-section,
    .saap-ht-next-section,

    .saap-campus-section,
    .saap-campus-light-section,
    .saap-campus-dark-section,
    .saap-campus-purple-section,
    .saap-campus-irsc-section,
    .saap-campus-support-section,
    .saap-campus-next-section,

    .saap-sg-section,
    .saap-sg-light-section,
    .saap-sg-dark-section,
    .saap-sg-purple-section,
    .saap-sg-availability-section,
    .saap-sg-support-section,
    .saap-sg-next-section {
        padding-top: 44px !important;
        padding-bottom: 44px !important;
    }


    /* ------------------------------------------
       IMAGES + OVERFLOW SAFETY
       ------------------------------------------ */

    .saap-home *,
    .saap-sextortion-page *,
    .saap-ht-page *,
    .saap-campus-page *,
    .saap-sg-page * {
        min-width: 0 !important;
        max-width: 100%;
    }

    .saap-home img,
    .saap-sextortion-page img,
    .saap-ht-page img,
    .saap-campus-page img,
    .saap-sg-page img {
        max-width: 100% !important;
        height: auto !important;
    }

}