.faq-section {
    padding:
        8rem
        0;

    background:#000;
}


.faq-layout {
    display:block;
}


.faq-heading {
    position:static;
}


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

    margin:0;

    color:var(--label);

    font-size:
        clamp(
            2.95rem,
            13.1vw,
            4.55rem
        );

    line-height:.915;

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

    text-wrap:balance;
}


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

    margin:1.3rem 0 0;

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

    font-size:.89rem;
    line-height:1.56;
}


.faq-list {
    width:100%;

    margin-top:4.6rem;

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


.faq-item {
    position:relative;

    margin:0;

    overflow:hidden;

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

    background:transparent;
}


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

    position:absolute;

    left:0;
    top:1.5rem;
    bottom:1.5rem;

    width:2px;

    border-radius:1rem;

    background:var(--blue-bright);

    opacity:0;

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

    transition:
        opacity 160ms var(--ease-out),
        transform 280ms var(--ease-ios);

    pointer-events:none;
}


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

    transform:scaleY(1);
}


.faq-item summary {
    position:relative;

    min-height:6.6rem;

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

    gap:1.35rem;

    padding:
        1.55rem
        0;

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

    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:calc(100% - 3.25rem);

    font-size:
        clamp(
            1.16rem,
            5.1vw,
            1.4rem
        );

    line-height:1.16;

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

    text-wrap:pretty;
}


.faq-mark {
    position:relative;

    flex:0 0 auto;

    width:2rem;
    height:2rem;

    display:block;

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

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

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


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

    position:absolute;

    left:50%;
    top:50%;

    width:.66rem;
    height:1px;

    border-radius:1rem;

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

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

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


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


.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 {
    padding:
        .05rem
        1rem
        2.5rem
        .9rem;
}


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

    margin:0;

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

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


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


.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:.65rem -.5rem;

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

    pointer-events:none;
}


@media (max-width:390px) {
    .faq-section {
        padding-top:7.5rem;
        padding-bottom:7.5rem;
    }


    .faq-heading h2 {
        font-size:
            clamp(
                2.8rem,
                12.9vw,
                4rem
            );
    }


    .faq-list {
        margin-top:4.2rem;
    }


    .faq-item summary {
        min-height:6.3rem;
    }
}


@media (max-width:350px) {
    .faq-item summary {
        gap:1rem;
    }


    .faq-item summary > span {
        max-width:calc(100% - 2.8rem);

        font-size:1.08rem;
    }


    .faq-mark {
        width:1.85rem;
        height:1.85rem;
    }


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


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


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


    .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-motion:reduce) {
    .faq-item::before,
    .faq-mark,
    .faq-mark::before,
    .faq-mark::after {
        transition:none;
    }
}