#problem, #solution {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    max-width: 650px;
    margin: 0 auto;
}

#problem p span, #solution p span {
    vertical-align: super;
    font-size: 1rem;
}

#problem {
    margin-top: 4rem;
}

#solution {
    margin-top: 6rem;
}

.capabilities {
    margin-top: 4rem;
}

.capabilities,
.capabilities.lg > div {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.capabilities.lg {
    display: none;
}

#virtual-rooms,
#messaging,
#direct-calls {
    position: relative;
    width: 100%;
    margin-top: 2rem;
}

#virtual-rooms img:nth-child(1),
#messaging img:nth-child(1),
#direct-calls img:nth-child(1) {
    /* background */
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.75rem;
}

#virtual-rooms {
    height: 256px;
    min-height: 256px;
}
#virtual-rooms img:nth-child(2) {
    /* members panel */
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    width: 44px;
    height: 295px;
    border-radius: 16px;
}
#virtual-rooms img:nth-child(3) {
    /* member preview panel */
    position: absolute;
    top: 76px;
    right: 64px;
    width: 280px;
    height: 140px;
    border-radius: 10px;
    border-top-right-radius: 5px;
}

#messaging {
    height: 280px;
    min-height: 280px;
}
#messaging img:nth-child(2) {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 225px;
    height: 325px;
    border-radius: 8px;
}

#direct-calls {
    height: 128px;
    min-height: 128px;
}
#direct-calls img:nth-child(2) {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 330px;
    height: 56px;
    border-radius: 20px;
}

#pricing {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: var(--primary-100);
    color: var(--primary-900);
}
#pricing h3 {
    height: 3.125rem;
    font-size: 3rem;
    font-weight: 510;
    line-height: 105%;
    letter-spacing: -4%;
    padding: 0 0.75rem;
    margin-bottom: 0;
    color: var(--primary-900);
}
#pricing h3 span {
    position: relative;
    bottom: 4px;
    font-size: 1.5rem;
    letter-spacing: -1%;
    color: var(--primary-600);
}
#pricing ul {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
}
#pricing li:first-of-type {
    margin-bottom: 0.5rem;
}
#pricing li:not(:last-of-type) {
    padding: 0 0.75rem;
}
#pricing h4 {
    display: inline-block;
    font-size: 1rem;
    font-weight: 510;
    line-height: 100%;
    color: var(--primary-900);
}
#pricing p {
    font-size: 1rem;
    font-weight: 400;
}
#pricing li:last-of-type {
    padding: 0.75rem;
    border-radius: 0.5rem;
    background: var(--primary-200);
}
#pricing .button {
    height: 3rem;
    border-radius: 1.5rem;
    margin-top: 0.5rem;
    font-size: 1rem;
    background: var(--primary-800);
    color: var(--primary-100);
}

#cta {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

#faq, #sources {
    margin-top: 4rem;
}

#faq .accordion {
    margin-top: 1rem;
}

#sources ol {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
#sources a {
    color: var(--text-secondary);
}

.glass {
    background: linear-gradient(135deg, rgb(255 255 255 / 20%), rgb(255 255 255 / 6%));
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    outline: 1px solid rgb(255 255 255 / 7%);
    outline-offset: -1px;
    box-shadow:
        inset 0 1px 4px rgb(255 255 255 / 15%),
        0 8px 24px rgb(0 0 0 / 20%);
}

@media screen and (min-width: 768px) {
    #problem,
    #solution {
        gap: 4rem;
    }

    #solution {
        margin-top: 8rem;
    }

    #problem p,
    #solution p {
        font-size: 2rem;
    }

    .capabilities {
        flex-direction: row;
        margin-top: 8rem;
    }
    .capabilities.sm {
        display: none;
    }
    .capabilities.lg {
        display: flex;
    }

    #cta {
        flex-direction: row;
    }
    #cta > div {
        width: 100%;
    }
    #cta .contact.card {
        align-self: flex-start;
    }

    #cta, #faq {
        margin-top: 7rem;
    }
}