.hr-benefits {
    background: #bd83b83b;
    padding: 115px 0
}

.hr-section-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 60px;
    margin-bottom: 45px
}

.hr-section-head h2 {
    font-size: clamp(2.6rem, 4.8vw, 4.2rem);
    line-height: 1.04;
    margin: 13px 0 0
}

.hr-section-head h2 em {
    font-style: normal;
    color: #9b729e
}

.hr-section-head>p {
    max-width: 410px;
    color: #776e7d
}

.hr-benefit-layout {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 18px
}

.hr-benefit-feature {
    min-height: 550px;
    border-radius: 24px;
    background: linear-gradient(145deg, #000000, #bd83b8);
    color: #fff;
    padding: 35px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden
}

.hr-benefit-art {
    height: 270px;
    position: relative;
    display: grid;
    place-items: center
}

.hr-art-card {
    position: relative;
    z-index: 2;
    width: min(100%, 340px);
    background: rgba(255, 255, 255, .96);
    color: #241a34;
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 28px 60px rgba(0, 0, 0, .25);
    transform: rotate(-3deg)
}

.hr-art-card span,
.hr-art-card small {
    display: block;
    color: #7d7284;
    font-size: .68rem
}

.hr-art-card strong {
    display: inline-block;
    font: 800 2.2rem Manrope;
    margin: 8px 4px 18px 0
}

.hr-art-card i {
    display: block;
    height: 7px;
    border-radius: 99px;
    background: linear-gradient(90deg, #bd80b8 58%, #e7e1e9 58%)
}

.hr-art-check {
    position: absolute;
    z-index: 3;
    right: 12%;
    top: 10%;
    width: 50px;
    height: 50px;
    border-radius: 16px;
    background: #dcd5ff;
    color: #4f3d80;
    display: grid;
    place-items: center;
    font-weight: 900;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .2)
}

.hr-art-lines {
    position: absolute;
    inset: 20px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 50%
}

.hr-art-lines i {
    position: absolute;
    inset: 25px;
    border: inherit;
    border-radius: inherit
}

.hr-art-lines i:nth-child(2) {
    inset: 55px
}

.hr-art-lines i:nth-child(3) {
    inset: 85px
}

.hr-benefit-copy>span {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #d1caff;
    font-weight: 900
}

.hr-benefit-copy h3 {
    font-size: 1.8rem;
    margin: 8px 0
}

.hr-benefit-copy p {
    color: #c7bfce;
    max-width: 520px
}

.hr-benefit-list {
    border: 1px solid #e3dce6;
    border-radius: 24px;
    overflow: hidden
}

.hr-benefit-list article {
    min-height: 137px;
    display: grid;
    grid-template-columns: 38px 1fr 30px;
    gap: 10px;
    align-items: center;
    padding: 22px;
    border-bottom: 1px solid #e8e2ea;
    background: #fff;
    transition: .25s
}

.hr-benefit-list article:last-child {
    border: 0
}

.hr-benefit-list article:hover {
    background: #f8f4fa;
    padding-left: 27px
}

.hr-benefit-list>article>span {
    color: #b278ac;
    font-size: .65rem;
    font-weight: 900
}

.hr-benefit-list h3 {
    font-size: 1.05rem;
    margin: 0 0 4px
}

.hr-benefit-list p {
    font-size: .7rem;
    color: #7a7081;
    margin: 0
}

.hr-benefit-list svg {
    width: 21px;
    fill: none;
    stroke: #bd83b8;
    stroke-width: 1.7
}

.hr-voices {
    background: #f7f4ef;
    padding: 110px 0
}

.hr-demo-label {
    border: 1px solid #ded6e2;
    border-radius: 99px;
    padding: 8px 13px;
    color: #827687;
    font-size: .62rem
}

.hr-voice-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px
}

.hr-voice-grid article {
    min-height: 290px;
    border: 1px solid #e2dbe5;
    border-radius: 20px;
    background: #fff;
    padding: 27px;
    display: flex;
    flex-direction: column
}

.hr-stars {
    color: #c9a96e;
    letter-spacing: 3px;
    font-size: .75rem
}

.hr-voice-grid blockquote {
    font: 600 1.02rem/1.7 Manrope;
    margin: 24px 0 auto
}

.hr-voice-grid footer {
    display: flex;
    gap: 11px;
    align-items: center;
    border-top: 1px solid #ece7ee;
    padding-top: 18px
}

.hr-voice-grid footer>span {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #2c2144;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: .68rem;
    font-weight: 800
}

.hr-voice-grid footer strong,
.hr-voice-grid footer small {
    display: block
}

.hr-voice-grid footer small {
    color: #817687;
    font-size: .63rem
}

.hr-faq {
    background: #bd83b83b;
    padding: 110px 0
}

.hr-faq-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 45px
}

.hr-faq-head h2 {
    font-size: clamp(2.5rem, 4.5vw, 4rem);
    margin: 13px 0
}

.hr-faq-head p {
    color: #776e7d
}

.hr-faq-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 20px;
    align-items: start
}

.hr-faq-list {
    border: 1px solid #e2dbe5;
    border-radius: 20px;
    padding: 0 25px;
    background: #fff
}

.hr-faq-list .faq-item button {
    display: grid;
    grid-template-columns: 36px 1fr 24px;
    align-items: center;
    gap: 10px;
    padding: 23px 0
}

.hr-faq-list .faq-item button>span {
    color: #b278ac;
    font-size: .63rem
}

.hr-faq-list .faq-item button[aria-expanded=true]>span {
    transform: none
}

.hr-faq-list .faq-item button>b {
    text-align: left;
    font-size: .9rem
}

.hr-faq-list .faq-item button>i {
    font-style: normal;
    color: #bd83b8;
    font-size: 1.3rem;
    transition: .2s
}

.hr-faq-list .faq-item button[aria-expanded=true]>i {
    transform: rotate(45deg)
}

.hr-faq-list .faq-answer {
    padding: 0 35px 20px 46px
}

.hr-faq-list .faq-answer p {
    margin: 0;
    font-size: .78rem
}

.hr-faq-help {
    border-radius: 20px;
    background: #f0ecf4;
    padding: 28px
}

.hr-faq-help>span {
    width: 45px;
    height: 45px;
    border-radius: 14px;
    background: #2c2144;
    color: #fff;
    display: grid;
    place-items: center;
    font: 800 1.1rem Manrope
}

.hr-faq-help h3 {
    font-size: 1.25rem;
    margin: 20px 0 8px
}

.hr-faq-help p {
    color: #766d7d;
    font-size: .75rem
}

.hr-faq-help .button {
    width: 100%;
    margin: 10px 0 15px
}

.hr-faq-help>a:last-child {
    display: block;
    text-align: center;
    color: #bd83b8;
    font-size: .68rem;
    font-weight: 800
}

.hr-final {
    background: linear-gradient(0deg, #bd83b8, #000000);
    color: #fff;
    padding: 62px 0
}

.hr-final-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px
}

.hr-final h2 {
    font-size: clamp(2rem, 4vw, 3.2rem);
    margin: 8px 0
}

.hr-final p {
    color: #c5bdcd;
    margin: 0
}

.hr-final-inner>div:last-child {
    display: flex;
    align-items: center;
    gap: 20px
}

.hr-final-inner>div:last-child>a:last-child {
    font-size: .72rem;
    font-weight: 800;
    border-bottom: 1px solid rgba(255, 255, 255, .35);
    padding-bottom: 3px
}

@media(max-width:900px) {

    .hr-benefit-layout,
    .hr-faq-shell {
        grid-template-columns: 1fr
    }

    .hr-benefit-feature {
        min-height: 500px
    }

    .hr-section-head,
    .hr-final-inner {
        display: block
    }

    .hr-section-head>p {
        margin-top: 20px
    }

    .hr-final-inner>div:last-child {
        margin-top: 25px
    }

    .hr-faq-help {
        max-width: none
    }

    .hr-voice-grid {
        grid-template-columns: 1fr
    }
}

@media(max-width:600px) {

    .hr-benefits,
    .hr-voices,
    .hr-faq {
        padding: 78px 0
    }

    .hr-section-head {
        align-items: start
    }

    .hr-demo-label {
        margin-top: 18px;
        width: max-content
    }

    .hr-benefit-feature {
        min-height: 460px;
        padding: 24px
    }

    .hr-art-card strong {
        font-size: 1.8rem
    }

    .hr-final-inner>div:last-child {
        display: grid
    }

    .hr-final-inner .button {
        width: 100%
    }
}