        @media (max-width: 860px) {
            .how-it-works .steps-container {
                flex-direction: column;
                gap: 20px;
                padding: 0 20px;
                align-items: center;
            }

            .how-it-works .step {
                text-align: center;
                width: 100%;
            }

            .how-it-works .step-connector {
                justify-content: center;
                width: 100%;
                padding-top: 0;
                transform: rotate(90deg);
            }
        }

        main > div.why-coffeestamp-section {
            margin-top: 70px;
        }

        main > div.who-is-coffeestamp-for {
            margin-top: 70px;
        }

        /* How it works */

        .how-it-works {
            padding: 60px 5% 40px;
        }

        .how-it-works .steps-container {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            gap: 20px;
            margin-top: 40px;
            max-width: 960px;
            margin-left: auto;
            margin-right: auto;
        }

        .how-it-works .step {
            flex: 1;
            text-align: center;
        }

        .how-it-works .step-number {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 52px;
            height: 52px;
            border-radius: 50%;
            background-color: #B88A69;
            color: #fff;
            font-family: Gilroy-Bold;
            font-size: 1.4rem;
            margin-bottom: 16px;
        }

        .how-it-works .step h3 {
            font-family: Gilroy-Bold;
            font-size: calc(16px + 0.5vw);
            color: #fff;
            margin-bottom: 10px;
        }

        .how-it-works .step p {
            font-family: Gilroy-Light;
            font-size: calc(14px + 0.3vw);
            color: rgba(255, 255, 255, 0.85);
            line-height: 1.6;
            max-width: 280px;
            margin: 0 auto;
        }

        .how-it-works .step-connector {
            display: flex;
            align-items: center;
            justify-content: center;
            /* margin-bottom: 24px; */
            color: rgba(255, 255, 255, 0.3);
            font-size: 1.5rem;
        }

        /* Counter Display / QR Stand */

        .counter-display-section {
            padding: 70px 5% 60px;
            text-align: center;
        }

        .counter-display-section .subtitle {
            font-family: Gilroy-Light;
            font-size: calc(14px + 0.3vw);
            color: rgba(255, 255, 255, 0.75);
            max-width: 560px;
            margin: 0 auto 50px;
            line-height: 1.6;
        }

        .counter-display-section .counter-image {
            max-width: 680px;
            width: 100%;
            height: auto;
            margin: 0 auto;
            border-radius: 16px;
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
            display: block;
        }

        .counter-display-section .counter-label {
            margin-top: 28px;
            font-family: Gilroy-Light;
            font-size: calc(13px + 0.2vw);
            color: rgba(255, 255, 255, 0.5);
            font-style: italic;
        }
