/* ==========================================================================
   GOLDPOOL COFFEE - MOBILE STYLESHEET (max-width: 768px)
   Strictly scoped to mobile phones
   ========================================================================== */

@media screen and (max-width: 768px) {
    /* Prevent iOS Safari automatic layout zoom on input tap (requires >= 16px font-size) */
    input, select, textarea, .search-input-wrap input, .form-control {
        font-size: 16px !important;
    }

    /* Eliminate 300ms double-tap zoom delay on interactive elements */
    a, button, input, select, textarea, .btn, .btn-gold, .btn-outline, .luxury-chip-btn, .mobile-menu-toggle {
        touch-action: manipulation;
    }

    /* 1. Mobile Header & Hamburger Toggle */
    header {
        position: relative ;
        z-index: 1000 ;
        background: #080808 ;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) ;
    }

    .navbar {
        position: relative ;
        top: auto ;
        left: auto ;
        right: auto ;
        width: 100% ;
        height: 56px ;
        padding: 0 4% ;
        background: #080808 ;
        display: flex ;
        justify-content: space-between ;
        align-items: center ;
        z-index: 1000 ;
        box-sizing: border-box ;
    }

    .mobile-menu-toggle {
        display: flex ;
        flex-direction: column ;
        justify-content: center ;
        align-items: center ;
        gap: 6px ;
        width: 38px ;
        height: 38px ;
        background: transparent ;
        border: none ;
        border-radius: 0 ;
        box-shadow: none ;
        outline: none ;
        cursor: pointer ;
        z-index: 10001 ;
        padding: 0 ;
    }

    .mobile-menu-toggle:hover,
    .mobile-menu-toggle:focus,
    .mobile-menu-toggle:active {
        background: transparent ;
        border: none ;
        box-shadow: none ;
        outline: none ;
    }

    .mobile-menu-toggle span {
        display: block ;
        width: 22px ;
        height: 2px ;
        background: var(--gold, #D4AF37) ;
        border-radius: 2px ;
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease ;
        transform-origin: center ;
    }

    .mobile-menu-toggle.active span:first-child {
        transform: translateY(4px) rotate(45deg) ;
    }

    .mobile-menu-toggle.active span:last-child {
        transform: translateY(-4px) rotate(-45deg) ;
    }

    /* Mobile Side Navigation Drawer (Solid Luxury Charcoal - Zero Transparency - Full-Screen) */
    .nav-links {
        display: flex ;
        flex-direction: column ;
        position: fixed ;
        top: 0 ;
        left: 0 ;
        right: 0 ;
        bottom: 0 ;
        width: 100vw ;
        max-width: 100vw ;
        height: 100vh ;
        height: 100dvh ;
        background: #0A0A0C ;
        backdrop-filter: none ;
        -webkit-backdrop-filter: none ;
        border: none ;
        padding: 1.15rem 1.35rem 2.25rem 1.35rem ;
        box-shadow: none ;
        transform: translateX(100%) ;
        visibility: hidden ;
        pointer-events: none ;
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease ;
        z-index: 10000 ;
        overflow-y: auto ;
        box-sizing: border-box ;
        justify-content: space-between ;
        align-items: stretch ;
    }

    .nav-links.active {
        transform: translateX(0) ;
        visibility: visible ;
        pointer-events: auto ;
        box-shadow: none ;
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s ;
    }

    .drawer-header-brand {
        display: flex ;
        align-items: center ;
        justify-content: flex-start ;
        min-height: 44px ;
        margin-bottom: 1.25rem ;
        padding-bottom: 0.9rem ;
        border-bottom: 1px solid rgba(212, 175, 55, 0.2) ;
        padding-right: 48px ;
        box-sizing: border-box ;
    }

    .drawer-logo-row {
        display: flex ;
        align-items: center ;
        gap: 10px ;
        margin: 0 ;
    }

    .drawer-emblem-img {
        width: 28px ;
        height: 28px ;
        max-width: 28px ;
        max-height: 28px ;
        object-fit: contain ;
        flex-shrink: 0 ;
        filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.4)) ;
    }

    .drawer-logo-text {
        display: flex ;
        flex-direction: column ;
        justify-content: center ;
    }

    .drawer-brand {
        font-family: 'Montserrat', sans-serif ;
        font-size: 1.25rem ;
        font-weight: 300 ;
        letter-spacing: 5px ;
        color: var(--gold, #D4AF37) ;
        line-height: 1.1 ;
        text-transform: uppercase ;
    }

    .drawer-brand span {
        color: var(--gold, #D4AF37) ;
        font-weight: 300 ;
    }

    .drawer-sub {
        font-family: 'Montserrat', sans-serif ;
        font-size: 0.78rem ;
        font-weight: 300 ;
        letter-spacing: 7px ;
        color: var(--gold, #D4AF37) ;
        opacity: 0.9 ;
        margin-top: 2px ;
        line-height: 1 ;
        text-transform: uppercase ;
    }

    .drawer-tagline {
        display: none ;
    }

    .menu-main {
        display: flex ;
        flex-direction: column ;
        gap: 0 ;
        align-items: stretch ;
        text-align: left ;
        width: 100% ;
        margin: 0 0 auto 0 ;
        flex: 1 ;
    }

    .menu-main a {
        font-family: 'Montserrat', sans-serif ;
        font-size: 0.94rem ;
        font-weight: 700 ;
        letter-spacing: 2.2px ;
        text-transform: uppercase ;
        color: #E0E0E0 ;
        text-decoration: none ;
        padding: 1.15rem 0.6rem ;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) ;
        display: flex ;
        align-items: center ;
        justify-content: space-between ;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) ;
        opacity: 0;
        transform: translateX(20px);
    }

    /* Staggered Cascade Entry Animation */
    .nav-links.active .menu-main a:nth-child(1) {
        animation: drawerItemCascade 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.05s forwards ;
    }
    .nav-links.active .menu-main a:nth-child(2) {
        animation: drawerItemCascade 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.10s forwards ;
    }
    .nav-links.active .menu-main a:nth-child(3) {
        animation: drawerItemCascade 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards ;
    }
    .nav-links.active .menu-main a:nth-child(4) {
        animation: drawerItemCascade 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.20s forwards ;
    }
    .nav-links.active .menu-main a:nth-child(5) {
        animation: drawerItemCascade 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards ;
    }
    .nav-links.active .menu-footer {
        animation: drawerItemCascade 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.30s forwards ;
    }

    @keyframes drawerItemCascade {
        from {
            opacity: 0;
            transform: translateX(20px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .menu-main a:hover,
    .menu-main a.active {
        color: var(--gold, #D4AF37) ;
        padding-left: 0.95rem ;
        background: rgba(212, 175, 55, 0.08) ;
        border-bottom-color: rgba(212, 175, 55, 0.3) ;
    }

    .menu-num {
        display: inline-block ;
        font-size: 0.72rem ;
        font-weight: 800 ;
        color: var(--gold, #D4AF37) ;
        margin-right: 12px ;
        opacity: 0.85 ;
    }

    .menu-label {
        flex-grow: 1 ;
    }

    .menu-arrow {
        display: inline-block ;
        font-size: 0.72rem ;
        color: rgba(212, 175, 55, 0.6) ;
        transition: transform 0.25s ease ;
    }

    .menu-main a:hover .menu-arrow {
        transform: translateX(4px) ;
        color: var(--gold, #D4AF37) ;
    }

    .menu-footer {
        display: flex ;
        flex-direction: column ;
        gap: 12px ;
        margin-top: 1.5rem ;
        padding-top: 1.25rem ;
        border-top: 1px solid rgba(212, 175, 55, 0.15) ;
        opacity: 0;
        transform: translateX(20px);
    }

    .menu-footer .btn-outline {
        display: inline-flex ;
        align-items: center ;
        justify-content: center ;
        font-family: 'Montserrat', sans-serif ;
        font-size: 0.86rem ;
        font-weight: 800 ;
        letter-spacing: 2px ;
        text-transform: uppercase ;
        text-align: center ;
        padding: 15px 20px ;
        border-radius: 12px ;
        color: #0A0A0C ;
        background: var(--gold, #D4AF37) ;
        border: none ;
        text-decoration: none ;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) ;
    }

    /* Mobile Drawer Subscriber Status & Signout Card */
    .menu-footer .subscriber-pill {
        display: flex ;
        align-items: center ;
        justify-content: space-between ;
        width: 100% ;
        box-sizing: border-box ;
        background: rgba(22, 22, 26, 0.95) ;
        border: 1px solid rgba(212, 175, 55, 0.35) ;
        border-radius: 12px ;
        padding: 10px 14px ;
        margin: 0 ;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) ;
    }

    .menu-footer .subscriber-pill .nav-sub-email {
        display: inline-flex ;
        align-items: center ;
        gap: 8px ;
        color: #F3EFE0 ;
        font-family: 'Outfit', sans-serif ;
        font-size: 0.86rem ;
        font-weight: 700 ;
        text-decoration: none ;
        max-width: 65% ;
        overflow: hidden ;
        text-overflow: ellipsis ;
        white-space: nowrap ;
    }

    .menu-footer .subscriber-pill .btn-signout-icon {
        display: inline-flex ;
        align-items: center ;
        justify-content: center ;
        gap: 5px ;
        background: rgba(255, 255, 255, 0.08) ;
        border: 1px solid rgba(255, 255, 255, 0.15) ;
        color: #CCC ;
        border-radius: 8px ;
        padding: 6px 12px ;
        font-family: 'Outfit', sans-serif ;
        font-size: 0.74rem ;
        font-weight: 700 ;
        letter-spacing: 0.5px ;
        text-transform: uppercase ;
        cursor: pointer ;
        border-left: none ;
        transition: all 0.2s ease ;
    }

    .menu-footer .subscriber-pill .btn-signout-icon:hover {
        background: rgba(231, 76, 60, 0.2) ;
        border-color: rgba(231, 76, 60, 0.5) ;
        color: #ff6b6b ;
    }



    /* 2. Full-Viewport Mobile Hero Stage (Proportioned for Roomy Luxury Elegance) */
    .home-hero-section,
    .signature-hero-section,
    .reserve-hero-section,
    .creators-hero-section,
    .how-hero-section,
    .founding-hero-section,
    .portal-hero-section,
    .hero-stage-section {
        position: relative ;
        padding: 0 1.15rem 0.5rem 1.15rem ;
        background: #08080A ;
        min-height: auto ;
        display: flex ;
        flex-direction: column ;
        justify-content: flex-start ;
        box-sizing: border-box ;
    }

    .home-hero-container,
    .signature-hero-container,
    .reserve-hero-container,
    .creators-hero-container,
    .how-hero-container,
    .founding-hero-container,
    .portal-hero-container,
    .hero-stage-container {
        min-height: auto ;
        flex-direction: column ;
        align-items: center ;
        text-align: center ;
        gap: 0 ;
        padding-top: 0 ;
        width: 100% ;
        margin: 0 auto ;
        display: flex ;
        flex-direction: column ;
        justify-content: flex-start ;
    }

    /* Full-Width Cinematic Mobile Hero Visual */
    .hero-bg-faded-artwork,
    .home-hero-section .hero-bg-faded-artwork,
    .signature-hero-section .hero-bg-faded-artwork,
    .reserve-hero-section .hero-bg-faded-artwork,
    .creators-hero-section .hero-bg-faded-artwork,
    .how-hero-section .hero-bg-faded-artwork,
    .founding-hero-section .hero-bg-faded-artwork,
    .portal-hero-section .hero-bg-faded-artwork {
        order: 1 ;
        position: relative ;
        top: auto ;
        right: auto ;
        bottom: auto ;
        left: auto ;
        width: 100vw ;
        max-width: 100vw ;
        margin-left: calc(-50vw + 50%) ;
        margin-right: calc(-50vw + 50%) ;
        height: clamp(230px, 34vh, 300px) ;
        margin-top: 0 ;
        margin-bottom: 1.15rem ;
        border-radius: 0 ;
        border: none ;
        box-shadow: none ;
        overflow: hidden ;
        pointer-events: auto ;
        z-index: 2 ;
    }

    .hero-carousel-track {
        position: relative ;
        width: 100% ;
        height: 100% ;
        overflow: hidden ;
    }

    .hero-slide {
        position: absolute ;
        inset: 0 ;
        width: 100% ;
        height: 100% ;
        opacity: 0 ;
        transition: opacity 1.8s cubic-bezier(0.4, 0, 0.2, 1) ;
        z-index: 1 ;
    }

    .hero-slide.active {
        opacity: 1 ;
        z-index: 2 ;
    }

    .hero-slide img,
    .ken-burns-img {
        width: 100% ;
        height: 100% ;
        object-fit: cover ;
        object-position: center center ;
        mask-image: linear-gradient(to bottom, #000 82%, rgba(0,0,0,0.6) 94%, transparent 100%) ;
        -webkit-mask-image: linear-gradient(to bottom, #000 82%, rgba(0,0,0,0.6) 94%, transparent 100%) ;
        border-radius: 0 ;
        animation: none ;
        transform: none ;
    }

    .home-hero-section .hero-slide img,
    .home-hero-section .ken-burns-img,
    .signature-hero-section .hero-slide img,
    .signature-hero-section .ken-burns-img {
        object-position: 60% center ;
    }

    /* Complete 12oz Gold Pouch Display */
    .reserve-hero-section .hero-bg-faded-artwork,
    .home-hero-section .hero-slide:nth-child(2) {
        display: flex ;
        align-items: center ;
        justify-content: center ;
    }

    .reserve-hero-section .hero-bg-faded-artwork img,
    .reserve-hero-section .ken-burns-img,
    .home-hero-section .hero-slide:nth-child(2) img {
        width: auto ;
        max-width: 100% ;
        height: 96% ;
        object-fit: contain ;
        object-position: center center ;
        margin: auto ;
        mask-image: none ;
        -webkit-mask-image: none ;
    }

    /* Ultra-subtle bottom feather to smoothly blend the image seam without darkening the bags */
    .hero-artwork-vignette {
        display: none ;
    }

    /* 3. Mobile Hero Typography & Proportioned Spacing */
    .hero-content-inner {
        order: 2 ;
        width: 100% ;
        max-width: 100% ;
        text-align: center ;
        margin-top: 0 ;
    }

    .hero-creator-badge {
        margin-top: 0.35rem ;
        margin-bottom: 1.1rem ;
        padding: 5.5px 18px ;
        font-size: 0.72rem ;
    }

    .hero-creator-title {
        font-family: 'Outfit', sans-serif ;
        font-size: clamp(1.45rem, 5.2vw, 1.82rem) ;
        font-weight: 900 ;
        line-height: 1.18 ;
        margin-bottom: 1.1rem ;
        letter-spacing: -0.3px ;
    }

    .hero-gold-accent {
        display: block ;
        font-family: 'Outfit', sans-serif ;
        font-size: 0.82em ;
        font-weight: 800 ;
        color: var(--gold, #D4AF37) ;
        margin-top: 0 ;
        letter-spacing: -0.2px ;
    }

    .hero-creator-desc {
        font-size: 0.88rem ;
        line-height: 1.55 ;
        color: #C5C5C8 ;
        margin: 0 auto 1.35rem auto ;
        max-width: 96% ;
    }

    /* 4. High-Impact Benefit Cards (Gold Header Band + Dark Body - Scaled Up) */
    .hero-metrics-grid {
        display: grid ;
        grid-template-columns: repeat(3, 1fr) ;
        gap: 8px ;
        width: 100% ;
        margin: 0 0 1.25rem 0 ;
        box-sizing: border-box ;
    }

    .reserve-hero-section .hero-metrics-grid,
    .how-hero-section .hero-metrics-grid,
    .founding-hero-section .hero-metrics-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        max-width: 480px !important;
        margin: 0 auto 1.35rem auto !important;
    }

    .hero-metric-card {
        padding: 0 ;
        border-radius: 11px ;
        background: #0E0E12 ;
        border: 1.5px solid rgba(212, 175, 55, 0.45) ;
        box-shadow: 0 5px 16px rgba(0, 0, 0, 0.65) ;
        text-align: center ;
        display: flex ;
        flex-direction: column ;
        justify-content: flex-start ;
        overflow: hidden ;
        min-height: 82px ;
        cursor: default ;
    }

    .reserve-hero-section .hero-metric-card,
    .how-hero-section .hero-metric-card,
    .founding-hero-section .hero-metric-card {
        padding: 0.85rem 1rem !important;
        min-height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .hero-metric-card .metric-top-band {
        background: var(--gold, #D4AF37) ;
        color: #0A0A0C ;
        font-family: 'Montserrat', sans-serif ;
        font-size: clamp(0.62rem, 2.1vw, 0.74rem) ;
        font-weight: 900 ;
        letter-spacing: 0.4px ;
        text-transform: uppercase ;
        padding: 6px 3px ;
        line-height: 1.15 ;
        display: flex ;
        align-items: center ;
        justify-content: center ;
        min-height: 38px ;
        text-align: center ;
    }

    .hero-metric-card .metric-body {
        padding: 8px 3px 9px 3px ;
        font-family: 'Montserrat', sans-serif ;
        font-size: clamp(0.57rem, 1.9vw, 0.68rem) ;
        font-weight: 700 ;
        letter-spacing: 0.1px ;
        color: #F2F2F5 ;
        line-height: 1.25 ;
        display: flex ;
        align-items: center ;
        justify-content: center ;
        flex: 1 ;
        text-align: center ;
        hyphens: none ;
        -webkit-hyphens: none ;
        word-break: keep-all ;
    }

    .hero-flavors-grid {
        display: grid ;
        grid-template-columns: repeat(2, 1fr) ;
        gap: 8px ;
        width: 100% ;
        margin: 1.35rem 0 1.25rem 0 ;
        box-sizing: border-box ;
    }

    .hero-flavor-card {
        background: #0E0E12 ;
        border: 1.5px solid rgba(212, 175, 55, 0.45) ;
        border-radius: 11px ;
        padding: 10px 8px ;
        display: flex ;
        flex-direction: row ;
        align-items: center ;
        justify-content: center ;
        gap: 8px ;
        box-shadow: 0 5px 16px rgba(0, 0, 0, 0.65) ;
    }

    .hero-flavor-card .flavor-icon-wrap {
        height: auto ;
    }

    .hero-flavor-card .flavor-icon-wrap img {
        width: 24px ;
        height: 24px ;
    }

    .hero-flavor-card .flavor-name {
        font-size: 0.8rem ;
        font-weight: 800 ;
    }

    /* 5. Touch-Friendly Large Mobile CTAs (Full Gold & Glass Styling) */
    .explore-section-wrapper {
        display: none ;
    }

    .mobile-only-hero-cta {
        display: flex ;
        flex-direction: column ;
        width: 100% ;
        gap: 10px ;
        margin-top: 0.75rem ;
    }

    .hero-primary-btn {
        display: inline-flex ;
        align-items: center ;
        justify-content: center ;
        gap: 10px ;
        padding: 13.5px 18px ;
        font-family: 'Montserrat', sans-serif ;
        font-size: 0.84rem ;
        font-weight: 800 ;
        letter-spacing: 1.5px ;
        text-transform: uppercase ;
        color: #0A0A0C ;
        background-color: #D4AF37 ;
        background-image: none ;
        background: #D4AF37 ;
        border: none ;
        border-radius: 12px ;
        text-decoration: none ;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) ;
        box-sizing: border-box ;
        width: 100% ;
        transition: transform 0.28s cubic-bezier(0.34, 1.45, 0.64, 1), box-shadow 0.28s ease ;
    }

    .hero-primary-btn:active {
        transform: scale(0.97) ;
    }

    .hero-secondary-btn {
        display: inline-flex ;
        align-items: center ;
        justify-content: center ;
        gap: 10px ;
        padding: 13.5px 18px ;
        font-family: 'Montserrat', sans-serif ;
        font-size: 0.84rem ;
        font-weight: 800 ;
        letter-spacing: 1.5px ;
        text-transform: uppercase ;
        color: var(--gold, #D4AF37) ;
        background-color: #121216 ;
        background-image: none ;
        background: #121216 ;
        border: 1.5px solid var(--gold, #D4AF37) ;
        border-radius: 12px ;
        text-decoration: none ;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) ;
        box-sizing: border-box ;
        width: 100% ;
        transition: transform 0.28s cubic-bezier(0.34, 1.45, 0.64, 1), box-shadow 0.28s ease ;
    }

    .hero-secondary-btn:active {
        transform: scale(0.97) ;
    }

    .hero-scroll-indicator {
        order: 99 !important;
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        display: flex !important;
        margin: 1.1rem auto 0.35rem auto !important;
        width: 100% !important;
        justify-content: center !important;
        align-items: center !important;
        z-index: 5 !important;
    }

    .hero-scroll-indicator:hover {
        transform: none !important;
    }

    /* 7. Section Grids & Layouts on Mobile */
    .offerings-duo-section,
    section.offerings-duo-section,
    .editorial-section,
    section.editorial-section,
    #why-special-reserve {
        padding: 2.25rem 1.15rem 3.5rem 1.15rem !important;
    }

    .offerings-duo-section .editorial-container > div:first-child {
        margin-bottom: 2rem !important;
    }

    .offerings-duo-grid,
    .reserve-showcase-grid,
    .postcard-showcase-grid,
    .creators-grid,
    .how-it-works-grid {
        grid-template-columns: 1fr ;
        gap: 1.5rem ;
    }

    .dual-cards-grid {
        display: flex ;
        flex-direction: column ;
        gap: 2rem ;
        width: 100% ;
    }

    .offering-card {
        width: 100% ;
        padding: 1.5rem 1.25rem ;
        box-sizing: border-box ;
    }

    .offering-card > a:first-child {
        width: 100% ;
        height: auto ;
        aspect-ratio: 16 / 10 ;
        min-height: 200px ;
        max-height: 240px ;
        display: block ;
        position: relative ;
        overflow: hidden ;
        border-radius: 14px ;
        margin-bottom: 1.25rem ;
    }

    .offering-card > a:first-child img {
        width: 100% ;
        height: 100% ;
        min-height: 100% ;
        object-fit: cover ;
        object-position: center ;
        display: block ;
    }

    .offering-card .btn-primary,
    .offering-card .btn-outline,
    .offering-card a.btn-primary,
    .offering-card a.btn-outline {
        aspect-ratio: auto ;
        min-height: 48px ;
        max-height: none ;
        margin-bottom: 0 ;
        display: inline-flex ;
        align-items: center ;
        justify-content: center ;
        width: 100% ;
        box-sizing: border-box ;
        white-space: nowrap ;
        flex-wrap: nowrap ;
        font-size: clamp(0.78rem, 3.4vw, 0.92rem) ;
        padding: 0.85rem 0.75rem ;
        gap: 6px ;
    }

    .tasting-card-container {
        width: 100% ;
        padding: 1rem ;
    }

    .mission-cta-wrap {
        width: 100% ;
        margin-top: 2.5rem ;
        text-align: center ;
        display: flex ;
        justify-content: center ;
        padding: 0 1rem ;
        box-sizing: border-box ;
    }

    .mission-cta-wrap .btn-outline {
        width: auto ;
        max-width: 100% ;
        padding: 0.85rem 1.4rem ;
        display: inline-flex ;
        align-items: center ;
        justify-content: center ;
        white-space: nowrap ;
        flex-wrap: nowrap ;
        font-size: clamp(0.82rem, 3.6vw, 0.95rem) ;
        box-sizing: border-box ;
        gap: 8px ;
    }

    .sensory-duo-container {
        grid-template-columns: 1fr !important;
        gap: 1.75rem !important;
        width: 100% !important;
        margin-top: 2.25rem !important;
    }

    .sensory-duo-media {
        height: 220px !important;
    }

    .nerdy-bean-quote-card {
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        border-radius: 18px !important;
        margin-top: 2.25rem !important;
    }

    .nerdy-bean-media,
    .nerdy-bean-quote-card > div:first-child {
        height: 220px !important;
        min-height: 220px !important;
        width: 100% !important;
        position: relative !important;
    }

    .nerdy-bean-gradient-overlay {
        background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(12, 10, 8, 0.95) 100%) !important;
    }

    .nerdy-bean-content,
    .nerdy-bean-quote-card > div:last-child {
        padding: 1.4rem 1.25rem 1.6rem 1.25rem !important;
        text-align: left !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .nerdy-bean-content .quote-text {
        font-size: 0.96rem !important;
        line-height: 1.65 !important;
    }

    /* Mobile Pipeline & Membership Steps Layout */
    .mission-section {
        padding: 3rem 1.15rem 3rem 1.15rem !important;
    }

    .pipeline-track,
    .pipeline-nodes,
    .pipeline-cup {
        display: none !important;
    }

    .pipeline-wrapper {
        display: block !important;
        margin: 1.5rem 0 0 0 !important;
        padding: 0 !important;
        position: relative !important;
    }

    .steps {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
        width: 100% !important;
        padding: 0 !important;
    }

    .step {
        width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* 6. Universal Mobile Card Button Centering & Creator Preview Card */
    .creator-preview-section {
        padding: 3rem 1rem 4rem 1rem;
    }

    .creator-preview-card {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0;
        overflow: hidden;
        border-radius: 18px;
        box-sizing: border-box;
        width: 100%;
    }

    .creator-preview-card .creator-card-media {
        width: 100%;
        height: 240px;
        min-height: 240px;
    }

    .creator-preview-card .creator-card-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .creator-preview-card .creator-card-content {
        padding: 1.75rem 1.25rem 2rem 1.25rem;
        box-sizing: border-box;
    }

    .creator-preview-card .card-cta-row,
    .creator-preview-card div[style*="display: flex;"]:last-child,
    .card-cta-row,
    .signature-preview-card .card-cta-row,
    .reserve-preview-card .card-cta-row {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin-top: 1.5rem;
        text-align: center;
    }

    .creator-preview-card .card-cta-row a.btn-primary,
    .card-cta-row a.btn-primary {
        width: 100%;
        justify-content: center;
        box-sizing: border-box;
    }

    /* Mobile Creator Directory & Filter Controls */
    .creator-controls-box {
        padding: 1.25rem 1rem !important;
        margin-bottom: 2rem !important;
        border-radius: 16px !important;
    }

    .search-input-wrap {
        margin-bottom: 0.9rem !important;
    }

    .search-input-wrap input {
        font-size: 0.88rem !important;
        padding: 0.75rem 1rem 0.75rem 2.6rem !important;
        box-sizing: border-box !important;
    }

    .niche-filter-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        padding: 4px 2px 8px 2px !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .niche-filter-tabs::-webkit-scrollbar {
        display: none !important;
    }

    .niche-tab {
        flex-shrink: 0 !important;
        padding: 7px 14px !important;
        font-size: 0.78rem !important;
    }

    .founding-pool-horizontal-banner {
        margin-bottom: 2rem !important;
        border-radius: 18px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .founding-banner-inner {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.25rem !important;
        padding: 1.5rem 1.15rem !important;
        align-items: stretch !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .founding-col-header,
    .founding-col-content,
    .founding-col-action {
        width: 100% !important;
        border: none !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .founding-col-header {
        align-items: center !important;
        text-align: center !important;
    }

    .founding-col-content .creator-channel-desc,
    .founding-col-content .creator-testimonial-quote {
        text-align: left !important;
    }

    .founding-col-action {
        margin-top: 0.5rem !important;
    }

    /* ==========================================================================
       DIRECT CREATOR 3D FLIP CARDS (EVERLY & CREATOR INVITATION / JOIN US)
       ========================================================================== */
    .creators-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1.75rem !important;
        width: 100% !important;
        max-width: 440px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        padding: 0 4px !important;
    }

    .creator-card-custom {
        width: 100% !important;
        max-width: 420px !important;
        height: 600px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        border-radius: 22px !important;
        perspective: 1200px !important;
    }

    .creator-card-inner {
        width: 100% !important;
        height: 100% !important;
        border-radius: 22px !important;
    }

    .creator-card-front,
    .creator-card-back {
        width: 100% !important;
        height: 100% !important;
        border-radius: 22px !important;
        overflow: hidden !important;
    }

    /* FRONT FACE MOBILE ARCHITECTURE */
    .creator-card-front {
        background: #0d0d10 !important;
        border: 1.5px solid rgba(212, 175, 55, 0.35) !important;
        box-shadow: 0 16px 36px rgba(0, 0, 0, 0.75), 0 0 20px rgba(212, 175, 55, 0.1) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
    }

    .creator-card-vip .creator-card-front {
        background: linear-gradient(155deg, #16130b 0%, #0d0d10 100%) !important;
        border: 2px dashed var(--gold) !important;
    }

    /* TOP MEDIA WRAP (FLEX 1 1 AUTO TO FILL ALL REMAINING UPPER SPACE) */
    .creator-card-media-wrap {
        flex: 1 1 0% !important;
        min-height: 280px !important;
        height: auto !important;
        width: 100% !important;
        position: relative !important;
        overflow: hidden !important;
        background: #050507 !important;
    }

    .creator-card-media-wrap img.poster-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center 22% !important;
        display: block !important;
    }

    /* REMOVE CLUNKY FLOATING BUTTON FROM PHOTO */
    .creator-flip-icon-btn {
        display: none !important;
    }

    /* VIP Graphic Invite Top Area (Join Us Card) */
    .creator-vip-media-wrap {
        background: radial-gradient(circle at center, rgba(212, 175, 55, 0.18) 0%, #09090c 85%) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .creator-vip-media-wrap > div {
        padding: 1rem !important;
        gap: 8px !important;
    }

    .creator-vip-media-wrap img {
        width: 52px !important;
        height: 52px !important;
        filter: drop-shadow(0 0 16px rgba(212, 175, 55, 0.7)) !important;
    }

    .creator-vip-media-wrap span[style*="letter-spacing: 1.5px"] {
        font-size: 0.85rem !important;
        letter-spacing: 1.2px !important;
        color: var(--gold) !important;
        font-weight: 800 !important;
    }

    .creator-vip-media-wrap span[style*="max-width: 220px"] {
        font-size: 0.74rem !important;
        color: #999 !important;
        max-width: 210px !important;
        line-height: 1.35 !important;
    }

    /* Non-colliding Floating Badges on Image */
    .creator-badge-tag {
        top: 10px !important;
        left: 10px !important;
        font-size: 0.62rem !important;
        font-weight: 800 !important;
        padding: 4px 9px !important;
        border-radius: 8px !important;
        letter-spacing: 0.5px !important;
        max-width: calc(100% - 130px) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        background: rgba(0, 0, 0, 0.85) !important;
        border: 1px solid var(--gold) !important;
        color: var(--gold) !important;
        backdrop-filter: blur(8px) !important;
        z-index: 3 !important;
    }

    .creator-flip-icon-btn {
        top: 10px !important;
        right: 10px !important;
        font-size: 0.65rem !important;
        font-weight: 800 !important;
        padding: 4px 10px !important;
        border-radius: 16px !important;
        gap: 5px !important;
        background: rgba(10, 10, 12, 0.85) !important;
        border: 1px solid var(--gold) !important;
        color: var(--gold) !important;
        backdrop-filter: blur(8px) !important;
        z-index: 3 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
    }

    /* BOTTOM CONTENT AREA (FLEX AUTO SIZING - GUARANTEED IMMUNITY AGAINST CLIPPING) */
    .creator-card-front-content {
        flex-shrink: 0 !important;
        height: auto !important;
        padding: 0.85rem 1.1rem 1.15rem 1.1rem !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        background: linear-gradient(180deg, #101014 0%, #08080a 100%) !important;
        border-top: 1px solid rgba(212, 175, 55, 0.22) !important;
        box-sizing: border-box !important;
    }

    /* HEADER ROW ON MOBILE */
    .creator-card-header {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        margin-bottom: 0 !important;
        width: 100% !important;
    }

    .creator-avatar {
        width: 48px !important;
        height: 48px !important;
        border-radius: 50% !important;
        border: 2px solid var(--gold) !important;
        box-shadow: 0 0 10px rgba(212, 175, 55, 0.35) !important;
        flex-shrink: 0 !important;
        object-fit: cover !important;
    }

    .creator-avatar-partner {
        background: #1a1608 !important;
        border: 2px dashed var(--gold) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: var(--gold) !important;
        font-size: 1.25rem !important;
        flex-shrink: 0 !important;
    }

    .creator-header-meta {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
    }

    .creator-name-title {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        margin: 0 !important;
        line-height: 1.2 !important;
        flex-wrap: nowrap !important;
    }

    .creator-display-name {
        font-family: 'Outfit', sans-serif !important;
        font-size: 1.18rem !important;
        font-weight: 800 !important;
        color: #FFF !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .creator-role-badge {
        font-size: 0.58rem !important;
        font-weight: 800 !important;
        padding: 2px 6px !important;
        border-radius: 4px !important;
        letter-spacing: 0.4px !important;
        background: rgba(212, 175, 55, 0.18) !important;
        border: 1px solid var(--gold) !important;
        color: var(--gold) !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    .creator-handle-sub {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
        font-size: 0.78rem !important;
        line-height: 1.2 !important;
        margin-top: 1px !important;
    }

    .creator-handle-link {
        font-size: 0.78rem !important;
        font-weight: 700 !important;
        color: var(--gold) !important;
        text-decoration: none !important;
        white-space: nowrap !important;
    }

    .creator-social-links {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        margin-left: 2px !important;
    }

    .creator-social-icon-btn {
        width: 24px !important;
        height: 24px !important;
        font-size: 0.65rem !important;
        border-radius: 50% !important;
        flex-shrink: 0 !important;
    }

    /* Revenue Share Payout Strip (Removed per user request to maximize photo space) */
    .creator-card-payout-tag {
        display: none !important;
    }

    /* Flip Profile Pill Button in Header (fallback/legacy) */
    .creator-switch-btn {
        display: none !important;
    }

    /* CTA BUTTON & SWITCH VIEW ROW ON MOBILE */
    .creator-front-actions {
        width: 100% !important;
        margin-top: auto !important;
        padding-top: 4px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        flex-shrink: 0 !important;
    }

    .creator-action-btn {
        width: 100% !important;
        padding: 0.72rem 1rem !important;
        font-size: 0.92rem !important;
        font-weight: 800 !important;
        letter-spacing: 0.3px !important;
        border-radius: 12px !important;
        background: linear-gradient(135deg, #E6CA65 0%, #D4AF37 50%, #B8860B 100%) !important;
        color: #000 !important;
        border: none !important;
        cursor: pointer !important;
        box-shadow: 0 4px 18px rgba(212, 175, 55, 0.35) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        min-height: 42px !important;
        box-sizing: border-box !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease !important;
        flex-shrink: 0 !important;
    }

    .creator-action-btn:active {
        transform: scale(0.98) !important;
    }

    /* SLEEK SWITCH VIEW BUTTON ON BOTTOM */
    .creator-switch-view-btn {
        width: 100% !important;
        min-height: 38px !important;
        padding: 7px 12px !important;
        font-size: 0.78rem !important;
        font-weight: 800 !important;
        letter-spacing: 0.4px !important;
        text-transform: uppercase !important;
        border-radius: 10px !important;
        background: linear-gradient(135deg, rgba(212, 175, 55, 0.12) 0%, rgba(18, 18, 22, 0.95) 100%) !important;
        border: 1.5px solid rgba(212, 175, 55, 0.55) !important;
        color: var(--gold) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
        transition: all 0.2s ease !important;
        margin-top: 0 !important;
        flex-shrink: 0 !important;
    }

    .creator-switch-view-btn:active {
        transform: scale(0.98) !important;
        background: var(--gold) !important;
        color: #000 !important;
    }

    /* BACK FACE MOBILE ARCHITECTURE */
    .creator-card-back {
        background: linear-gradient(160deg, #141418 0%, #09090c 100%) !important;
        border: 1.5px solid var(--gold) !important;
        box-shadow: 0 16px 36px rgba(0, 0, 0, 0.85), 0 0 25px rgba(212, 175, 55, 0.2) !important;
        padding: 1.1rem 1.15rem 1rem 1.15rem !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        box-sizing: border-box !important;
    }

    .creator-card-vip .creator-card-back {
        background: linear-gradient(160deg, #18140b 0%, #09090c 100%) !important;
        border: 2px solid var(--gold) !important;
    }

    .creator-card-back-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding-bottom: 0.5rem !important;
        border-bottom: 1px solid rgba(212, 175, 55, 0.25) !important;
        margin-bottom: 0.35rem !important;
        flex-shrink: 0 !important;
    }

    .creator-avatar-mini {
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        border: 1.5px solid var(--gold) !important;
        flex-shrink: 0 !important;
    }

    .creator-card-back-header span[style*="font-size: 1.05rem"] {
        font-size: 0.95rem !important;
        font-weight: 800 !important;
        color: #FFF !important;
    }

    .creator-flip-back-btn {
        background: rgba(212, 175, 55, 0.16) !important;
        border: 1px solid var(--gold) !important;
        color: var(--gold) !important;
        font-size: 0.66rem !important;
        font-weight: 800 !important;
        padding: 4px 10px !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
    }

    .creator-card-back-scroll {
        flex-grow: 1 !important;
        margin: 0.35rem 0 0.55rem 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-right: 3px !important;
    }

    .creator-channel-desc {
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid rgba(255, 255, 255, 0.07) !important;
        padding: 0.65rem 0.8rem !important;
        border-radius: 9px !important;
        font-size: 0.78rem !important;
        line-height: 1.42 !important;
        color: #CCC !important;
        margin: 0 !important;
    }

    .creator-channel-desc .desc-label {
        font-size: 0.66rem !important;
        font-weight: 800 !important;
        color: var(--gold) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.8px !important;
        margin-bottom: 2px !important;
    }

    .creator-testimonial-quote {
        background: #141417 !important;
        border-left: 3px solid var(--gold) !important;
        padding: 0.65rem 0.85rem !important;
        border-radius: 0 9px 9px 0 !important;
        font-size: 0.78rem !important;
        line-height: 1.42 !important;
        color: #DDD !important;
        margin: 0 !important;
    }

    .creator-testimonial-quote .quote-header {
        font-size: 0.68rem !important;
        font-weight: 800 !important;
        color: var(--gold) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.8px !important;
        margin-bottom: 3px !important;
    }

    .creator-payout-ribbon {
        background: rgba(212, 175, 55, 0.1) !important;
        border: 1px solid rgba(212, 175, 55, 0.35) !important;
        border-radius: 7px !important;
        padding: 6px 9px !important;
        font-size: 0.72rem !important;
        font-weight: 700 !important;
        color: #F1DFC0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 7px !important;
        margin: 0 !important;
    }

    .creator-back-actions {
        width: 100% !important;
        margin-top: auto !important;
        flex-shrink: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }

    .creator-back-actions .creator-action-btn {
        width: 100% !important;
        padding: 0.72rem 1rem !important;
        font-size: 0.92rem !important;
        border-radius: 12px !important;
        min-height: 42px !important;
    }

    .creator-flip-link {
        font-size: 0.72rem !important;
        color: #999 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        margin-top: 5px !important;
        padding: 3px !important;
        width: 100% !important;
        background: none !important;
        border: none !important;
        cursor: pointer !important;
    }

    .creator-flip-link:hover {
        color: var(--gold) !important;
    }

    /* 7. Hide Complex Desktop-Only World Map on Mobile & Optimize 6 Origins Grid */
    .world-map-wrapper {
        display: none !important;
    }

    .origins-matrix-grid {
        grid-template-columns: 1fr !important;
        gap: 1.15rem !important;
        margin-top: 1.5rem !important;
    }

    .origin-connoisseur-card {
        padding: 1.35rem 1.25rem !important;
        border-radius: 16px !important;
        text-align: left !important;
    }

    .origin-card-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 0.75rem !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }

    .origin-flag-title {
        font-size: 1.2rem !important;
        gap: 8px !important;
    }

    .origin-role-tag {
        font-size: 0.68rem !important;
        padding: 4px 10px !important;
        letter-spacing: 1px !important;
    }

    .origin-terroir-specs {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-bottom: 0.75rem !important;
        font-size: 0.78rem !important;
    }

    .origin-spec-item {
        background: rgba(212, 175, 55, 0.08) !important;
        border: 1px solid rgba(212, 175, 55, 0.22) !important;
        padding: 4px 8px !important;
        border-radius: 6px !important;
    }

    .origin-flavor-desc {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
        color: #CCC !important;
    }

    /* 8. Roastery Technique Card Mobile Spacing & Artwork Ratio */
    .roastery-unified-card {
        grid-template-columns: 1fr ;
        gap: 0 ;
        border-radius: 18px ;
    }

    .roastery-unified-card > div:first-child {
        height: 200px ;
        min-height: 200px ;
        max-height: 200px ;
        width: 100% ;
    }

    .roastery-unified-card > div:last-child {
        padding: 1.4rem 1.25rem 1.65rem 1.25rem ;
    }

    .roastery-unified-card h2 {
        font-size: 1.65rem ;
        margin-bottom: 0.65rem ;
    }

    /* 9. Product Superiority Mobile Horizontal Touch Swipe Carousel */
    .superiority-grid-showcase {
        display: flex ;
        overflow-x: auto ;
        scroll-snap-type: x mandatory ;
        -webkit-overflow-scrolling: touch ;
        gap: 14px ;
        padding: 0 4px 14px 4px ;
        margin-top: 1.25rem ;
        scrollbar-width: none ;
    }

    .superiority-grid-showcase::-webkit-scrollbar {
        display: none ;
    }

    .superiority-card {
        flex: 0 0 85vw ;
        max-width: 85vw ;
        scroll-snap-align: center ;
        box-sizing: border-box ;
    }

    /* 10. FAQ 2-Column Responsive Stacking on Mobile */
    .faq-grid-2col {
        grid-template-columns: 1fr ;
        gap: 1rem ;
    }

    /* 11. Unified Tabbed Slideshow Mobile Optimization */
    .reserve-tabs-nav,
    .how-tabs-nav,
    .superiority-tabs-nav {
        display: flex ;
        flex-wrap: nowrap ;
        overflow-x: auto ;
        justify-content: flex-start ;
        gap: 8px ;
        padding: 4px 0.5rem 12px 0.5rem ;
        margin: 1rem 0 1.25rem 0 ;
        -webkit-overflow-scrolling: touch ;
        scrollbar-width: none ;
    }

    .reserve-tabs-nav::-webkit-scrollbar,
    .how-tabs-nav::-webkit-scrollbar,
    .superiority-tabs-nav::-webkit-scrollbar {
        display: none ;
    }

    .reserve-tab-btn,
    .how-tab-btn,
    .superiority-tab-btn {
        flex: 0 0 auto ;
        padding: 0.6rem 1rem ;
        font-size: 0.8rem ;
        white-space: nowrap ;
    }

    .reserve-slideshow-container,
    .how-slideshow-container,
    .superiority-slideshow-container {
        border-radius: 18px ;
        margin: 0 ;
        width: 100% ;
    }

    .reserve-slides-track,
    .how-slides-track,
    .superiority-slides-track {
        min-height: auto ;
    }

    .reserve-slide,
    .how-slide,
    .superiority-slide {
        grid-template-columns: 1fr ;
        min-height: auto ;
    }

    .reserve-slide-media,
    .how-slide-media,
    .superiority-slide-media {
        min-height: 240px ;
        height: 240px ;
    }

    .reserve-slide-content,
    .how-slide-content,
    .superiority-slide-content {
        padding: 1.75rem 1.25rem 1.5rem 1.25rem ;
    }

    .reserve-slide-title,
    .how-slide-title,
    .superiority-slide-title {
        font-size: 1.4rem ;
    }

    .reserve-slide-desc,
    .how-slide-desc,
    .superiority-slide-desc {
        font-size: 0.92rem ;
        line-height: 1.6 ;
    }

    /* Mobile Cupping Feedback Callout Card */
    .cupping-feedback-callout-card {
        margin-top: 2rem !important;
        padding: 1.35rem 1.15rem !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.85rem !important;
        border-radius: 16px !important;
    }

    .cupping-feedback-callout-card .callout-icon-wrap {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        font-size: 1.15rem !important;
        margin-top: 0 !important;
        margin-bottom: 0.25rem !important;
    }

    .cupping-feedback-callout-card .callout-content-wrap {
        width: 100% !important;
    }

    .cupping-feedback-callout-card .callout-title {
        font-size: 1.15rem !important;
        line-height: 1.3 !important;
    }

    .cupping-feedback-callout-card .callout-desc {
        font-size: 0.88rem !important;
        line-height: 1.55 !important;
    }

    /* Mobile Membership Benefits Grid */
    .membership-benefits-grid {
        grid-template-columns: 1fr !important;
        gap: 1.15rem !important;
        margin-bottom: 2rem !important;
    }

    .membership-benefits-grid .benefit-card {
        padding: 1.35rem 1.25rem !important;
        border-radius: 16px !important;
    }

    .membership-benefits-grid .benefit-icon-wrap {
        width: 42px !important;
        height: 42px !important;
        font-size: 1.15rem !important;
        margin-bottom: 0.85rem !important;
    }

    .membership-benefits-grid .benefit-card h4 {
        font-size: 1.15rem !important;
        margin-bottom: 0.4rem !important;
    }

    .membership-benefits-grid .benefit-card p {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
    }

    /* ==========================================================================
       MOBILE CHECKOUT MODAL & CART VIEW
       ========================================================================== */
    .checkout-modal-content {
        padding: 1.25rem 1rem 1.15rem !important;
        width: 95% !important;
        max-width: 480px !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 18px !important;
        margin: 1rem auto !important;
    }

    .checkout-modal-content .close-modal-btn {
        top: 8px !important;
        right: 10px !important;
        width: 32px !important;
        height: 32px !important;
        font-size: 1.2rem !important;
    }

    /* Modal Creator Attribution Header */
    .modal-creator-info {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 10px 12px !important;
        gap: 8px !important;
        border-radius: 12px !important;
        margin-bottom: 0.9rem !important;
    }

    .modal-creator-info > div:first-child {
        gap: 10px !important;
        width: 100% !important;
    }

    .modal-creator-img {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
    }

    .modal-creator-title {
        font-size: 1.15rem !important;
    }

    .modal-creator-subtitle {
        font-size: 0.68rem !important;
    }

    #modal-creator-desc {
        font-size: 0.74rem !important;
        line-height: 1.35 !important;
    }

    .modal-creator-info > div:last-child {
        align-self: flex-start !important;
        font-size: 0.68rem !important;
        padding: 3px 8px !important;
    }

    /* Plan Tier Selector: Super Clean Full-Width Horizontal Stack on Mobile */
    .membership-card-selector {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-bottom: 1rem !important;
        width: 100% !important;
    }

    .membership-select-card {
        display: grid !important;
        grid-template-columns: 64px 1fr !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 0.85rem 0.9rem !important;
        border-radius: 12px !important;
        text-align: left !important;
        min-height: auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .tier-card-badge {
        top: -8px !important;
        left: 12px !important;
        transform: none !important;
        font-size: 0.6rem !important;
        padding: 2px 7px !important;
    }

    .tier-card-thumb-wrap {
        width: 64px !important;
        height: 64px !important;
        margin: 0 !important;
        border-radius: 8px !important;
        flex-shrink: 0 !important;
    }

    .tier-card-info {
        width: 100% !important;
        text-align: left !important;
    }

    .tier-card-title {
        font-size: 0.98rem !important;
        margin-bottom: 1px !important;
    }

    .tier-card-price {
        font-size: 1.25rem !important;
        margin-bottom: 1px !important;
    }

    .tier-card-price span {
        font-size: 0.74rem !important;
    }

    .tier-card-sub {
        font-size: 0.74rem !important;
    }

    .studio-bags-select {
        font-size: 0.74rem !important;
        padding: 4px 6px !important;
        margin-top: 3px !important;
    }

    /* Staggered Roast & Delivery Schedule Timeline */
    .staggered-gantt-container {
        padding: 10px 12px !important;
        border-radius: 12px !important;
        margin-bottom: 0.9rem !important;
    }

    .gantt-header-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
        margin-bottom: 8px !important;
    }

    .gantt-nodes-grid {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    .gantt-node-card {
        padding: 6px 10px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    .gantt-node-card .node-title {
        margin: 0 !important;
        font-size: 0.82rem !important;
    }

    .gantt-node-card .node-sub {
        font-size: 0.7rem !important;
    }

    .terms-checkbox label {
        font-size: 0.75rem !important;
        line-height: 1.35 !important;
    }

    /* Mobile Modal Actions */
    .modal-actions {
        flex-direction: column-reverse !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .modal-actions button {
        width: 100% !important;
        min-width: 100% !important;
        padding: 0.85rem 1rem !important;
        font-size: 0.95rem !important;
        text-align: center !important;
    }

    /* ==========================================================================
       FULL-WIDTH MOBILE PRODUCER FIRST / CREATOR LOVE BANNER
       ========================================================================== */
    .creator-love-banner {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        flex-direction: column !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        background: linear-gradient(135deg, var(--gold) 0%, #aa8022 100%) !important;
    }

    .creator-love-text {
        width: 100% !important;
        flex: 1 1 100% !important;
        min-width: 100% !important;
        padding: 3.25rem 1.25rem 2.25rem 1.25rem !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    .creator-love-text h2 {
        font-size: 2rem !important;
        line-height: 1.15 !important;
        letter-spacing: 1.5px !important;
    }

    .creator-love-text p {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        margin-top: 1rem !important;
        max-width: 100% !important;
        padding: 0 0.5rem !important;
    }

    .creator-love-image {
        width: 100% !important;
        flex: 1 1 100% !important;
        min-width: 100% !important;
        line-height: 0 !important;
    }

    .creator-love-image img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        aspect-ratio: 16/10 !important;
        object-fit: cover !important;
    }

    /* ==========================================================================
       FOUNDING CREATORS PAGE MOBILE OVERRIDES
       ========================================================================== */
    #standards {
        padding-top: 1.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .affiliate-spotlight-section {
        margin: 1.5rem 0 2rem 0 !important;
        padding: 0 !important;
    }

    .affiliate-spotlight-card {
        padding: 2rem 1.25rem !important;
        border-radius: 18px !important;
        margin-top: 0 !important;
    }

    .affiliate-spotlight-header {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
        margin-bottom: 1.75rem !important;
        text-align: left !important;
    }

    .affiliate-headline {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
        margin-bottom: 0.5rem !important;
    }

    .affiliate-lead-text {
        font-size: 0.95rem !important;
        line-height: 1.65 !important;
    }

    .affiliate-perks-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .affiliate-perk-card {
        padding: 1.35rem 1.25rem !important;
        border-radius: 14px !important;
    }

    /* Centered Process Step Cards on Mobile */
    .steps-grid-2col {
        gap: 16px !important;
        margin-bottom: 1.5rem !important;
    }

    .step-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 2rem 1.25rem !important;
        gap: 12px !important;
    }

    .step-num {
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        font-size: 1.45rem !important;
        font-weight: 900 !important;
        margin: 0 auto 0.25rem auto !important;
        border: 2px solid var(--gold) !important;
        box-shadow: 0 0 18px rgba(212, 175, 55, 0.35) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .step-content {
        width: 100% !important;
        text-align: center !important;
    }

    .step-content h4 {
        text-align: center !important;
        font-size: 1.22rem !important;
        margin-bottom: 6px !important;
    }

    .step-content p {
        text-align: center !important;
        font-size: 0.92rem !important;
    }

    .creator-guidance-box {
        padding: 1.75rem 1.25rem !important;
        margin: 1.25rem 0 1.75rem 0 !important;
    }

    /* ==========================================================================
       HOW IT WORKS TABBED SLIDESHOW MOBILE OPTIMIZATION
       ========================================================================== */
    .how-tabs-nav {
        gap: 6px !important;
        margin: 1rem auto 1.25rem auto !important;
        justify-content: center !important;
    }

    .how-tab-btn {
        padding: 0.5rem 0.85rem !important;
        font-size: 0.76rem !important;
        border-radius: 25px !important;
        gap: 5px !important;
    }

    .how-tab-btn .tab-badge {
        font-size: 0.65rem !important;
        padding: 2px 6px !important;
    }

    .how-slideshow-container {
        border-radius: 16px !important;
    }

    .how-slide {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
    }

    .how-slide-media {
        height: clamp(170px, 25vh, 210px) !important;
        min-height: 170px !important;
        max-height: 210px !important;
    }

    .how-slide-content {
        padding: 1.25rem 1.15rem 1.35rem 1.15rem !important;
    }

    .how-slide-eyebrow {
        font-size: 0.68rem !important;
        margin-bottom: 0.25rem !important;
    }

    .how-slide-title {
        font-size: 1.35rem !important;
        line-height: 1.18 !important;
        margin-bottom: 0.35rem !important;
    }

    .how-slide-sub {
        font-size: 0.88rem !important;
        line-height: 1.4 !important;
        margin-bottom: 0.65rem !important;
    }

    .how-slide-desc {
        font-size: 0.84rem !important;
        line-height: 1.55 !important;
        margin-bottom: 0.95rem !important;
    }

    .how-slide-specs {
        gap: 6px !important;
    }

    .spec-pill {
        padding: 5px 9px !important;
        font-size: 0.72rem !important;
    }
}