/* Benefits How Section - Mobile */
.benefits-how {
    position: relative;
    width: 100%;
    background-color: #000000;
    padding: 4rem 1rem; /* 64px on mobile */
}

.benefits-how__container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.benefits-how__wrapper {
    display: flex;
    flex-direction: column;
    gap: 3rem; /* 48px */
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Left Section - Phone & Card */
.benefits-how__visual {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: -18.6vw;
}

.benefits-how__phone_border {
    position: relative;
    border-radius: 2.125rem;
    padding: 1px;
    background: linear-gradient(164deg, #29FFC6 0%, #8B7CF3 102.64%);
}

/* Phone Container */
.benefits-how__phone {
    display: flex;
    width: 15rem; /* 240px */
    height: 30.32rem; /* 485.115px */
    padding: 0.699rem 0.826rem 0.714rem 0.826rem; /* 11.186px 13.22px 11.421px 13.22px */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: inherit;
    box-shadow: 3.305rem 0.661rem 3.305rem 0 rgba(9, 20, 50, 0.15); /* 52.881px 10.576px 52.881px 0 */
    position: relative;
    z-index: 1;
    background: #000000;
}

.benefits-how__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1.5rem; /* 24px */
}

.benefits-how__blob {
    position: absolute;
    top: 100px;
    left: 30px;
    z-index: 2;
}

/* Card Image Container */
.benefits-how__card-wrapper {
    position: absolute;
    display: flex;
    width: 11.654rem; /* 186.468px */
    transform: rotate(-8.265deg);
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    top: 16.938rem; /* 271px */
    left: 9.341rem; /* 149.46px */
    z-index: 3;
}

.benefits-how__card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.5rem; /* 8px */
}

/* Right Section - Content */
.benefits-how__content {
    display: flex;
    flex-direction: column;
    gap: 2.625rem; /* 42px */
}

/* Content Item */
.benefits-how__item {
    display: flex;
    flex-direction: row;
    gap: 1.5rem; /* 24px */
    align-items: flex-start;
}

.benefits-how__item-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.625rem; /* 10px */
    flex: 1;
}

/* Number Badge */
.benefits-how__number-wrapper {
    display: flex;
    align-items: center;
    gap: 0.625rem; /* 10px */
}

.benefits-how__number {
    display: flex;
    width: 3.375rem; /* 54px */
    height: 3.375rem; /* 54px */
    padding: 0 0.75rem; /* 0 12px */
    justify-content: center;
    align-items: center;
    gap: 0.625rem; /* 10px */
    border-radius: 0.5rem; /* 8px */
    background-image: url('../img/general/grad_bg.jpg');
    background-color: lightgray;
    background-position: 21.3% 50%;
    background-size: 1200px auto;
    background-repeat: no-repeat;
    color: #000000;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 1.5rem; /* 24px */
    font-style: normal;
    font-weight: 600;
    line-height: 120%; /* 28.8px */
    letter-spacing: -0.03rem; /* -0.48px */
}

/* Item Title */
.benefits-how__item-title {
    font-family: 'Inter', sans-serif;
    font-size: 1.5rem; /* 24px */
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    background-image: url('../img/hero/title-bg.jpg');
    background-size: 59.934rem 41.951rem;
    background-position: 12% 42%;
    background-repeat: no-repeat;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Item Description */
.benefits-how__item-desc {
    color: #F3F4F6;
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem; /* 14px on mobile */
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    opacity: 0.8;
}

/* Disclaimer Text */
.benefits-how__disclaimer {
    color: #ffffff;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 1rem; /* 20px */
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 24px */
    opacity: 0.6;
    margin-top: 3rem; /* 48px bottom spacing */
}