.who-is-it-for {
    margin-inline: 48px;
    border-radius: 28px;
    background-color: var(--color-bg-blue);
    background-image: url("../../../../assets/images/who-is-it-for/who-is-it-for-bg.webp");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    margin-bottom: 120px;
}

.who-is-it-for__inner {
    width: min(100% - 48px, var(--container-lg));
    margin-inline: auto;
    padding-block: 80px;
}

.who-is-it-for__head {
    align-items: flex-start;
    margin-bottom: 48px;
}

.who-is-it-for__title {
    font-size: 56px;
    font-weight: 700;
    line-height: 114%;
    letter-spacing: -1%;
    color: var(--color-text-primary);
    margin-bottom: 14px;
    text-transform: capitalize;

    span {
        display: block;
        color: var(--color-primary);
    }
}

.who-is-it-for__subtitle {
    max-width: 645px;
    color: var(--color-text-muted);
}

/* ---------------------------- Cards ---------------------------- */
.who-is-it-for__track {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.who-is-it-for__card {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    padding: 18px;
    background-color: var(--color-bg-white-80);
    border: 1px solid var(--color-bg-white-60);
    border-radius: 14px;
}

.who-is-it-for__card-head {
    gap: 10px;
    margin-bottom: 20px;

    .who-is-it-for__card-icon {
        flex-shrink: 0;
        width: 36px;
        height: 36px;
        border-radius: var(--radius-sm);
        background-color: var(--color-primary);

        img {
            width: 19px;
            height: 19px;
        }
    }

    .who-is-it-for__card-title {
        font-size: 20px;
        font-weight: 700;
        line-height: 130%;
        letter-spacing: -0.1%;
        color: var(--color-text-primary);
    }

    .who-is-it-for__badge {
        position: absolute;
        top: 4.5px;
        right: 4.5px;
        flex-shrink: 0;
        padding: 3px 8px;
        border-radius: 16px;
        color: var(--color-text-muted);
        background-color: var(--color-primary-5);
        text-wrap: nowrap;
    }
}

.who-is-it-for__list {
    margin: 0 0 30px;
    padding: 0;
    list-style: none;

    li {
        position: relative;
        padding-left: 16px;
        font-size: 16px;
        font-weight: 500;
        line-height: 130%;
        color: var(--color-text-muted);
        text-wrap: nowrap;

        &::before {
            content: "";
            position: absolute;
            left: 4px;
            top: 5px;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: var(--color-primary-alt);
        }
    }

    li + li {
        margin-top: 8px;
    }
}

.who-is-it-for__divider {
    height: 1px;
    margin-top: auto;
    background-color: var(--color-primary-10);
}

.who-is-it-for__card-footer {
    gap: 12px;
    padding-top: 18px;

    .who-is-it-for__card-label {
        font-size: 10px;
        font-weight: 700;
        line-height: 14px;
        letter-spacing: 0.59px;
        text-transform: uppercase;
        color: var(--color-text-secondary);
    }

    .who-is-it-for__card-stat {
        font-size: 22px;
        font-weight: 700;
        line-height: 127%;
        letter-spacing: -0.1%;
        color: var(--color-primary-alt);
        text-wrap: nowrap;
    }
}

.who-is-it-for__dots {
    display: none;
    align-items: center;
    gap: 4px;
    width: fit-content;
    margin-top: 24px;
    margin-inline: auto;
    padding: 4px 6px;
    background-color: var(--color-bg-white);
    border-radius: 95px;
    box-shadow: 0 0 11.78px 0 var(color-mix(in srgb, var(--color-black) 25%, transparent));

    .who-is-it-for__dot {
        flex: 0 0 auto;
        width: 11px;
        height: 5px;
        padding: 0;
        border: none;
        border-radius: 11.5px;
        background-color: var(--color-border-soft);
        cursor: pointer;
        transition: width 0.25s ease, background-color 0.25s ease;

        &:hover {
            background-color: var(--color-disabled);
        }

        &:focus-visible {
            outline: none;
        }

        &.is-active {
            width: 28px;
            background-color: var(--color-text-primary);
        }

        &:focus-visible {
            outline: 2px solid var(--color-primary);
            outline-offset: 2px;
        }
    }
}

/* ---------------------------- Breakpoints ---------------------- */
@media screen and (max-width: 1919px) {
    .who-is-it-for {
        margin-inline: 16px;
    }
}

@media screen and (max-width: 1440px) {
    .who-is-it-for {
        margin-bottom: 93px;
    }

    .who-is-it-for__inner {
        width: min(100% - 48px, var(--container));
    }

    .who-is-it-for__title {
        font-size: 56px;
    }

    .who-is-it-for__subtitle {
        font-size: 18px;
    }

    .who-is-it-for__card-head {
        .who-is-it-for__card-title {
            font-size: 18px;
        }

        .who-is-it-for__card-icon {
            width: 30px;
            height: 30px;

            img {
                width: 16px;
                height: 16px;
            }
        }

        .who-is-it-for__badge {
            font-size: 9px;
        }
    }

    .who-is-it-for__list {
        li {
            font-size: 14px;
        }
    }

    .who-is-it-for__card-footer {
        .who-is-it-for__card-stat {
            font-size: 24px;
        }
    }
}

@media screen and (max-width: 1024px) {
    .who-is-it-for {
        /* Section edge to content inset, per the Figma tablet design (~60px at 1024px). */
        --who-inset: clamp(24px, 6vw, 60px);
        overflow-x: clip;
        margin-bottom: 80px;
    }

    .who-is-it-for__inner {
        width: 100%;
        margin-inline: 0;
        padding-block: 60px;
        padding-inline: var(--who-inset);
    }

    .who-is-it-for__head {
        max-width: 476px;

        .who-is-it-for__title {
            font-size: 42px;
        }
    }

    .who-is-it-for__track {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;

        margin-inline: calc(var(--who-inset) * -1);
        padding-inline: var(--who-inset);
        scroll-padding-inline: var(--who-inset);
    }

    .who-is-it-for__track::-webkit-scrollbar {
        display: none;
    }

    .who-is-it-for__card {
        flex: 0 0 252px;
        scroll-snap-align: start;
    }

    .who-is-it-for__list {
        margin-bottom: 18px;
    }
}

@media screen and (max-width: 576px) {
    .who-is-it-for {
        margin-bottom: 60px;
        margin-inline: 8px;
    }

    .who-is-it-for__head {
        margin-bottom: 24px;

        .who-is-it-for__title {
            font-size: 24px;
        }

        .who-is-it-for__subtitle {
            font-size: 12px;
        }
    }

    .who-is-it-for__card-head {
        margin-bottom: 14px;

        .who-is-it-for__card-title {
            font-size: 16px;
        }

        .who-is-it-for__card-icon {
            width: 26px;
            height: 26px;

            img {
                width: 14px;
                height: 14px;
            }
        }

        .who-is-it-for__badge {
            font-size: 9px;
        }
    }

    .who-is-it-for__list {
        margin-bottom: 14px;

        li {
            font-size: 12px;
        }
    }

    .who-is-it-for__card-footer {
        padding-top: 14px;

        .who-is-it-for__card-label {
            font-size: 8px;
        }

        .who-is-it-for__card-stat {
            font-size: 18px;
        }
    }

    .who-is-it-for {
        /* The mobile design uses a tighter inset than the fluid tablet value. */
        --who-inset: 8px;
        border-radius: 16px;
    }

    .who-is-it-for__inner {
        padding-block: 24px;
    }

    .who-is-it-for__head {
        align-items: center;
        text-align: center;
    }

    .who-is-it-for__subtitle {
        text-align: center;
    }

    .who-is-it-for__title {
        font-size: 32px;
        text-transform: lowercase;
    }

    .who-is-it-for__title::first-letter {
        text-transform: uppercase;
    }

    .who-is-it-for__card {
        flex-basis: 72%;
    }

    .who-is-it-for__dots {
        display: flex;
    }
}