.faq-section {
    position:relative;

    padding:
        clamp(10rem,14vw,13rem)
        var(--side);

    background:#000;
}


.faq-layout {
    display:grid;

    grid-template-columns:
        minmax(22rem,.58fr)
        minmax(36rem,1fr);

    align-items:start;

    gap:
        clamp(
            6rem,
            11vw,
            11rem
        );
}


.faq-heading {
    position:sticky;
    top:8.5rem;
}


.faq-heading h2 {
    max-width:38rem;

    margin:0;

    color:var(--label);

    font-size:
        clamp(
            3.25rem,
            5vw,
            5.3rem
        );

    line-height:.93;

    font-weight:700;
    letter-spacing:-.051em;

    text-wrap:balance;
}


.faq-heading > p {
    max-width:30rem;

    margin:1.45rem 0 0;

    color:rgba(235,235,245,.48);

    font-size:.96rem;
    line-height:1.55;
}


.faq-list {
    width:100%;

    border-top:.5px solid rgba(255,255,255,.115);
}


.faq-item {
    position:relative;

    margin:0;

    border:0;
    border-bottom:.5px solid rgba(255,255,255,.09);

    background:transparent;

    overflow:hidden;
}


.faq-item::before {
    content:"";

    position:absolute;

    width:2px;

    left:0;
    top:2rem;
    bottom:2rem;

    border-radius:1rem;

    background:var(--blue-bright);

    opacity:0;

    transform:scaleY(.35);
    transform-origin:center;

    transition:
        opacity 180ms var(--ease-out),
        transform 320ms var(--ease-ios);

    pointer-events:none;
}


.faq-item[open]::before {
    opacity:.72;

    transform:scaleY(1);
}


.faq-item summary {
    position:relative;

    min-height:7.4rem;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:2.5rem;

    padding:
        2rem
        .2rem;

    color:rgba(245,245,247,.92);

    cursor:pointer;

    list-style:none;

    -webkit-tap-highlight-color:transparent;
}


.faq-item summary::-webkit-details-marker {
    display:none;
}


.faq-item summary::marker {
    content:"";
}


.faq-item summary > span {
    max-width:42rem;

    font-size:
        clamp(
            1.35rem,
            2vw,
            1.8rem
        );

    line-height:1.13;

    font-weight:620;
    letter-spacing:-.026em;

    text-wrap:balance;

    transition:
        color 160ms var(--ease-out),
        transform 220ms var(--ease-ios);
}


.faq-item summary:hover > span {
    color:#fff;

    transform:translateX(.25rem);
}


.faq-item[open] summary > span {
    color:#fff;
}


.faq-mark {
    position:relative;

    flex:0 0 auto;

    width:2.25rem;
    height:2.25rem;

    display:block;

    border:.5px solid rgba(255,255,255,.12);
    border-radius:50%;

    background:rgba(255,255,255,.025);

    transition:
        border-color 180ms var(--ease-out),
        background 180ms var(--ease-out),
        transform 320ms var(--ease-ios);
}


.faq-mark::before,
.faq-mark::after {
    content:"";

    position:absolute;

    left:50%;
    top:50%;

    width:.72rem;
    height:1px;

    border-radius:1rem;

    background:rgba(245,245,247,.75);

    transform:
        translate(-50%,-50%);

    transition:
        opacity 180ms var(--ease-out),
        transform 320ms var(--ease-ios),
        background 180ms var(--ease-out);
}


.faq-mark::after {
    transform:
        translate(-50%,-50%)
        rotate(90deg);
}


.faq-item summary:hover .faq-mark {
    border-color:rgba(255,255,255,.2);

    background:rgba(255,255,255,.05);
}


.faq-item[open] .faq-mark {
    border-color:rgba(10,132,255,.34);

    background:rgba(10,132,255,.09);

    transform:rotate(90deg);
}


.faq-item[open] .faq-mark::before {
    background:var(--blue-bright);
}


.faq-item[open] .faq-mark::after {
    opacity:0;

    transform:
        translate(-50%,-50%)
        rotate(90deg)
        scaleX(.3);
}


.faq-answer {
    overflow:hidden;
}


.faq-answer-inner {
    max-width:46rem;

    padding:
        .1rem
        4.6rem
        3rem
        1.7rem;
}


.faq-answer-inner p {
    max-width:43rem;

    margin:0;

    color:rgba(235,235,245,.53);

    font-size:.94rem;
    line-height:1.62;
}


.faq-answer-inner p + p {
    margin-top:1.15rem;
}


.faq-answer-inner p:last-child {
    color:rgba(245,245,247,.76);
}


.faq-item summary:focus-visible {
    outline:none;
}


.faq-item summary:focus-visible::after {
    content:"";

    position:absolute;

    inset:.8rem -.7rem;

    border:2px solid rgba(10,132,255,.72);
    border-radius:1rem;

    pointer-events:none;
}


@media (max-width:1050px) {
    .faq-layout {
        grid-template-columns:
            minmax(19rem,.56fr)
            minmax(31rem,1fr);

        gap:5rem;
    }


    .faq-heading h2 {
        font-size:
            clamp(
                3rem,
                4.7vw,
                4.5rem
            );
    }


    .faq-item summary {
        gap:1.8rem;
    }
}


@media (max-width:850px) {
    .faq-layout {
        gap:3.5rem;
    }


    .faq-heading {
        top:7.8rem;
    }


    .faq-item summary > span {
        font-size:1.3rem;
    }


    .faq-answer-inner {
        padding-right:2.8rem;
    }
}


@media (prefers-contrast:more) {
    .faq-list {
        border-top-color:rgba(255,255,255,.34);
    }


    .faq-item {
        border-bottom-color:rgba(255,255,255,.28);
    }


    .faq-heading > p,
    .faq-answer-inner p {
        color:rgba(245,245,247,.78);
    }


    .faq-mark {
        border-color:rgba(255,255,255,.4);
    }
}


@media (prefers-reduced-transparency:reduce) {
    .faq-mark {
        background:#111114;
    }
}


@media (prefers-reduced-motion:reduce) {
    .faq-item::before,
    .faq-item summary > span,
    .faq-mark,
    .faq-mark::before,
    .faq-mark::after {
        transition:none;
    }


    .faq-item summary:hover > span {
        transform:none;
    }
}