/* BLOCK: How It Works */

.block-how-it-works .content-wrapper {
    --size: calc(var(--page-size) + 11rem);
    height: 300vh;
}

.block-how-it-works .text-content {
    margin-bottom: 5rem;
    max-width: 51.5rem;
    margin-inline: auto;
    text-align: center;
}

.block-how-it-works .text-content > * {
    margin: 0;
}

.block-how-it-works .text-content > :not(:last-child) {
    margin-bottom: 2.5rem;
}

.block-how-it-works .phone-wrapper {
    position: sticky;
    top: calc(var(--header-height) + 1rem);
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.block-how-it-works .phone-wrapper .phone {
    position: absolute;
    height: 82%;
    width: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.block-how-it-works .phone-wrapper .text-bubble {
    --n: 110;
    --d: 2deg;
    --t: 1px;
    --c: rgb(from var(--c-secondary) r g b / .2);
    aspect-ratio: 1;
    position: relative;
    background: radial-gradient(50% 50% at 50% 50%, rgb(from var(--color) r g b / .3) 0%, transparent 90%);
    border-radius: 50%;
    isolation: isolate;
}

.block-how-it-works .phone-wrapper .text-bubble .border {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    padding: var(--t);
    background: var(--c);
    mask:
        linear-gradient(#0000 0 0) content-box,
        repeating-conic-gradient(
            from calc(var(--d) / 2),
            #000  0 calc(360deg / var(--n) - var(--d)),
            #0000 0 calc(360deg / var(--n))
        );
    mask-composite: intersect;
    z-index: -1;
}

@keyframes spin-left {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}

@keyframes spin-right {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.block-how-it-works .phone-wrapper .text-bubble--left.animate-border .border {
    animation: 15s linear infinite both spin-right;
}

.block-how-it-works .phone-wrapper .text-bubble--right.animate-border .border {
    animation: 15s linear infinite both spin-left;
}

.block-how-it-works .phone-wrapper .text-bubble .title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 32%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.875rem;
    text-align: center;
}

.block-how-it-works .phone-wrapper .text-bubble .title svg {
    height: 0.5em;
    width: auto;
}

.block-how-it-works .phone-wrapper .text-bubble .keyword {
    position: absolute;
    max-width: 7.5625rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
    color: var(--c-text-dark);
    font-size: var(--font-18-10);
}

.block-how-it-works .phone-wrapper .text-bubble .keyword svg {
    color: var(--color);
    height: 1.125rem;
    width: auto;
}

.block-how-it-works .phone-wrapper .text-bubble .keyword--0 {
    top: 8.5%;
    left: 50%;
    transform: translate(-50%, 0%);
}

.block-how-it-works .phone-wrapper .text-bubble--left .keyword--1 {
    top: 27.7%;
    left: 10.6%;
}

.block-how-it-works .phone-wrapper .text-bubble--right .keyword--1 {
    top: 27.7%;
    right: 10.6%;
}

.block-how-it-works .phone-wrapper .text-bubble--left .keyword--2 {
    bottom: 27.7%;
    left: 10.6%;
}

.block-how-it-works .phone-wrapper .text-bubble--right .keyword--2 {
    bottom: 27.7%;
    right: 10.6%;
}

.block-how-it-works .phone-wrapper .text-bubble .keyword--3 {
    bottom: 8.5%;
    left: 50%;
    transform: translate(-50%, 0%);
}

@media screen and (width <= 1024px) {
    .block-how-it-works .phone-wrapper {
        top: var(--header-height);
        grid-template-columns: unset;
        grid-template-rows: 1fr 1fr;
        max-width: 20.375rem;
        margin-inline: auto;
    }
    .block-how-it-works .phone-wrapper .phone {
        height: auto;
        width: 60%;
        transform: translate(-50%, -45%);
    }
    .block-how-it-works .phone-wrapper .text-bubble {
        --offset-inline: 9%;
        width: calc(100% + 4rem);
        margin-left: calc(-2rem - var(--pad) / 2);
    }
    .block-how-it-works .phone-wrapper .text-bubble--left {
        margin-bottom: -2.5rem;
    }
    .block-how-it-works .phone-wrapper .text-bubble--right {
        margin-top: -2.5rem;
    }
    .block-how-it-works .phone-wrapper .text-bubble .title {
        gap: 0.625rem;
    }
    .block-how-it-works .phone-wrapper .text-bubble--left .title {
        flex-direction: column-reverse;
        top: 15%;
        transform: translate(-50%, 0);
    }
    .block-how-it-works .phone-wrapper .text-bubble--left .title svg {
        transform: rotate(90deg);
    }
    .block-how-it-works .phone-wrapper .text-bubble--right .title {
        top: unset;
        bottom: 15%;
        transform: translate(-50%, 0);
    }
    .block-how-it-works .phone-wrapper .text-bubble--right .title svg {
        transform: rotate(90deg);
    }
    .block-how-it-works .phone-wrapper .text-bubble .keyword {
        /* max-width: 3.375rem; */
        max-width: 3.8rem;
        gap: 0.375rem;
    }
    .block-how-it-works .phone-wrapper .text-bubble .keyword svg {
        height: 0.625rem;
    }
    .block-how-it-works .phone-wrapper .text-bubble--left .keyword--0 {
        left: var(--offset-inline);
        top: 65%;
        transform: none;
    }
    .block-how-it-works .phone-wrapper .text-bubble--left .keyword--1 {
        left: var(--offset-inline);
        top: 45%;
    }
    .block-how-it-works .phone-wrapper .text-bubble--left .keyword--2 {
        bottom: unset;
        left: unset;
        right: var(--offset-inline);
        top: 45%;
    }
    .block-how-it-works .phone-wrapper .text-bubble--left .keyword--3 {
        bottom: unset;
        left: unset;
        right: var(--offset-inline);
        top: 65%;
        transform: none;
    }
    .block-how-it-works .phone-wrapper .text-bubble--right .keyword--0 {
        top: unset;
        left: var(--offset-inline);
        bottom: 65%;
        transform: none;
    }
    .block-how-it-works .phone-wrapper .text-bubble--right .keyword--1 {
        top: unset;
        right: unset;
        left: var(--offset-inline);
        bottom: 45%;
    }
    .block-how-it-works .phone-wrapper .text-bubble--right .keyword--2 {
        right: var(--offset-inline);
        bottom: 65%;
    }
    .block-how-it-works .phone-wrapper .text-bubble--right .keyword--3 {
        left: unset;
        right: var(--offset-inline);
        bottom: 45%;
        transform: none;
    }
}

@media screen and (width <= 620px) {
    .block-how-it-works .text-content {
        margin-bottom: 3.75rem;
    }
    .block-how-it-works .text-content > :not(:last-child) {
        margin-bottom: 1.5rem;
    }
    .block-how-it-works .phone-wrapper {
        top: 2.5rem;
    }
    /* sept29 */
    .block-how-it-works .phone-wrapper .text-bubble--right .title {
        bottom: 10%;
    }
    .block-how-it-works .phone-wrapper .text-bubble {
        --offset-inline: 6%;
        width: calc(100% + 3rem);
        margin-left: calc(-1rem - var(--pad) / 2);
    }
    .block-how-it-works .phone-wrapper .text-bubble--right .title {
        bottom: 8%;
    }
    .block-how-it-works .phone-wrapper .phone {
        transform: translate(-50%, -47%);
    }
    /* sept29 */
}