/* DEVSID.IN — FAQ PAGE */
:root {
    --faq-black: #090909;
    --faq-paper: #f3f3ef;
    --faq-white: #fff;
    --faq-orange: #ff914d;
    --faq-line: rgba(9,9,9,.15);
    --faq-dark-line: rgba(255,255,255,.14)
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body.faq-page {
    margin: 0;
    background: var(--faq-paper);
    color: var(--faq-black);
    font-family: "Manrope",sans-serif;
    overflow-x: hidden
}

.faq-container {
    width: min(1400px,calc(100% - 80px));
    margin: 0 auto
}

.faq-topline,.faq-scroll,.faq-index-label,.faq-index-links,.faq-section-head>span,.faq-number,.faq-plus,.faq-cta-label,.investment-note>span {
    font-family: "DM Mono",monospace;
    text-transform: uppercase;
    letter-spacing: .08em
}

.faq-topline b,.faq-section-head b,.faq-cta-label b {
    color: var(--faq-orange)
}

.faq-hero {
    min-height: 790px;
    padding-bottom: 60px
}

.faq-topline {
    display: flex;
    justify-content: space-between;
    padding-top: 130px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--faq-line);
    font-size: 10px
}

.faq-hero-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 100px;
    padding-top: 75px
}

.faq-hero h1 {
    margin: 0;
    font-size: clamp(70px,8vw,130px);
    line-height: .87;
    letter-spacing: -.075em;
    font-weight: 800
}

.faq-hero h1 span {
        background: linear-gradient(45deg, #ff914d 0%, #a02d37 50%, #383838 100%);
    -webkit-background-clip
Determines the background painting area.
: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.faq-hero-copy {
    align-self: end;
    max-width: 420px
}

.faq-hero-copy p {
    margin: 0 0 24px;
    color: #666661;
    font-size: 14px;
    line-height: 1.7
}

.faq-hero-copy .faq-hero-lead {
    color: var(--faq-black);
    font-size: 19px;
    line-height: 1.45
}

.faq-scroll {
    display: flex;
    justify-content: space-between;
    margin-top: 120px;
    padding-top: 16px;
    border-top: 1px solid var(--faq-line);
    color: #777773;
    font-size: 9px
}

.faq-index {
    background: #fff;
    padding: 90px 0
}

.faq-index-grid {
    display: grid;
    grid-template-columns: .55fr 1.45fr;
    gap: 100px
}

.faq-index-label {
    color: #888883;
    font-size: 9px
}

.faq-index-links {
    display: grid;
    grid-template-columns: 1fr 1fr
}

.faq-index-links a {
    padding: 18px 0;
    border-top: 1px solid var(--faq-line);
    font-size: 12px;
    transition: color .2s,padding-left .2s
}

.faq-index-links a:hover {
    color: var(--faq-orange);
    padding-left: 8px
}

.faq-index-links span {
    display: inline-block;
    width: 45px;
    color: var(--faq-orange);
    font-size: 9px
}

.faq-section {
    padding: 145px 0;
    background: var(--faq-paper)
}

.faq-section-dark {
    background: var(--faq-black);
    color: #fff
}

.faq-section-head {
    display: grid;
    grid-template-columns: .45fr 1fr;
    gap: 100px;
    align-items: start;
    margin-bottom: 75px
}

.faq-section-head>span {
    color: #777773;
    font-size: 9px
}

.faq-section-head h2 {
    margin: 0;
    font-size: clamp(58px,6.8vw,105px);
    line-height: .87;
    letter-spacing: -.075em
}

.faq-section-head h2 em {
    color: var(--faq-orange);
    font-style: normal;
        background: linear-gradient(45deg, #ff914d 0%, #a02d37 50%, #383838 100%);
    -webkit-background-clip
Determines the background painting area.
: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.faq-list {
    border-top: 1px solid var(--faq-line)
}

.faq-list-dark {
    border-color: var(--faq-dark-line)
}

.faq-item {
    border-bottom: 1px solid var(--faq-line)
}

.faq-list-dark .faq-item {
    border-color: var(--faq-dark-line)
}

.faq-item summary {
    display: grid;
    grid-template-columns: 70px 1fr 35px;
    gap: 20px;
    align-items: center;
    padding: 26px 0;
    cursor: pointer;
    list-style: none
}

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

.faq-number {
    color: var(--faq-orange);
    font-size: 9px
}

.faq-question {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.025em
}

.faq-plus {
    color: #888883;
    font-size: 16px;
    text-align: right;
    transition: transform .25s
}

.faq-item[open] .faq-plus {
    transform: rotate(45deg);
    color: var(--faq-orange)
}

.faq-answer {
    padding: 0 70px 30px 90px
}

.faq-answer p {
    max-width: 670px;
    margin: 0;
    color: #666661;
    font-size: 14px;
    line-height: 1.75
}

.faq-list-dark .faq-answer p {
    color: #969691
}

.faq-investment {
    background: #fff
}

.investment-note {
    display: grid;
    grid-template-columns: .35fr 1fr;
    gap: 40px;
    margin: -20px 0 75px;
    padding: 28px 0;
    border-top: 1px solid var(--faq-line);
    border-bottom: 1px solid var(--faq-line)
}

.investment-note>span {
    color: var(--faq-orange);
    font-size: 9px
}

.investment-note strong {
    display: block;
    max-width: 620px;
    font-size: 23px;
    line-height: 1.2;
    letter-spacing: -.04em
}

.investment-note p {
    max-width: 620px;
    margin: 15px 0 0;
    color: #666661;
    font-size: 13px;
    line-height: 1.7
}

.faq-real {
    background: #fff;
    padding-top: 50px
}

.faq-cta {
    background: var(--faq-orange);
    padding: 125px 0 140px
}

.faq-cta-label {
    font-size: 10px
}

.faq-cta-grid {
    display: grid;
    grid-template-columns: 1.3fr .4fr;
    gap: 100px;
    margin-top: 65px
}

.faq-cta h2 {
    margin: 0;
    font-size: clamp(65px,7.5vw,120px);
    line-height: .85;
    letter-spacing: -.075em
}

.faq-cta h2 span {
    color: var(--faq-paper)
}

.faq-cta-side {
    align-self: end;
    max-width: 350px
}

.faq-cta-side p {
    margin: 0 0 30px;
    font-size: 14px;
    line-height: 1.65
}

.faq-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    padding: 18px 21px;
    background: var(--faq-black);
    color: #fff;
    font: 10px "DM Mono",monospace;
    text-transform: uppercase;
    transition: transform .25s,background .25s
}

.faq-cta-button:hover {
    transform: translateY(-4px);
    background: #222
}

@media(max-width: 1050px) {
    .faq-container {
        width:min(100% - 48px,1400px)
    }

    .faq-hero-grid,.faq-section-head,.faq-cta-grid {
        grid-template-columns: 1fr
    }

    .faq-hero-grid {
        gap: 55px
    }

    .faq-hero-copy {
        justify-self: start
    }

    .faq-section-head {
        gap: 35px
    }

    .faq-index-grid {
        grid-template-columns: 1fr;
        gap: 40px
    }
}

@media(max-width: 650px) {
    .faq-container {
        width:calc(100% - 36px)
    }

    .faq-hero {
        min-height: auto
    }

    .faq-topline {
        padding-top: 105px;
        font-size: 9px
    }

    .faq-topline span:last-child {
        display: none
    }

    .faq-hero-grid {
        padding-top: 48px
    }

    .faq-hero h1 {
        font-size: clamp(55px,15vw,78px)
    }

    .faq-scroll {
        margin-top: 75px
    }

    .faq-index {
        padding: 70px 0
    }

    .faq-index-links {
        grid-template-columns: 1fr
    }

    .faq-section {
        padding: 90px 0
    }

    .faq-section-head {
        margin-bottom: 50px
    }

    .faq-section-head h2 {
        font-size: 54px
    }

    .faq-item summary {
        grid-template-columns: 35px 1fr 25px;
        gap: 12px;
        padding: 22px 0
    }

    .faq-question {
        font-size: 16px;
        line-height: 1.3
    }

    .faq-answer {
        padding: 0 25px 25px 47px
    }

    .faq-answer p {
        font-size: 13px
    }

    .investment-note {
        display: block;
        margin-bottom: 55px
    }

    .investment-note strong {
        font-size: 19px
    }

    .faq-cta {
        padding: 90px 0 100px
    }

    .faq-cta-grid {
        margin-top: 45px;
        gap: 45px
    }

    .faq-cta h2 {
        font-size: 56px
    }
}