/*
=================================

Space Vanta Theme 1.0

Feature:

FAQ Visual System

Version:

1.1 — Layout Optimization

Purpose:

FAQ
Category
Question
Modal

Update:

- Desktop FAQ introduction shifted toward
  the visual center while remaining left-biased
- Mobile introduction receives restrained
  horizontal inset
- Mobile heading composition refined
- Typography hierarchy refined for Space Vanta
- Spacing tightened between FAQ introduction
  and functional content
- Existing FAQ interaction preserved

IMPORTANT:

- No HTML changes
- No JS changes
- No category logic changes
- No question logic changes
- No modal logic changes
- No hidden/display behavior changes

=================================
*/


/* =========================

FAQ Base

========================== */


.sv-faq {

    width: 100%;

    box-sizing: border-box;

}



/* =========================

FAQ Header

Desktop:
Visual center, slightly left-biased

========================== */


.sv-faq__header {

    width: 100%;

    max-width: 760px;

    margin-top: 0;

    margin-right: auto;

    margin-bottom:
        clamp(34px, 4vw, 48px);

    /*
     * Move the introduction toward
     * the visual center without centering
     * the entire FAQ system.
     */
    margin-left:
        clamp(70px, 13vw, 190px);

    box-sizing: border-box;

}



/* =========================

FAQ Eyebrow

========================== */


.sv-faq__eyebrow {

    margin:
        0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        9px;

    line-height:
        1;

    letter-spacing:
        0.22em;

    font-weight:
        600;

    text-transform:
        uppercase;

    opacity:
        0.44;

}



/* =========================

FAQ Heading

========================== */


.sv-faq__heading {

    max-width:
        680px;

    margin:
        14px 0 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(42px, 4.8vw, 68px);

    line-height:
        0.96;

    letter-spacing:
        -0.058em;

    font-weight:
        600;

    text-wrap:
        balance;

    opacity:
        0.95;

}



/* =========================

FAQ Heading Editorial Accent

========================== */


.sv-faq__heading::after {

    content:
        "";

    display:
        block;

    width:
        46px;

    height:
        1px;

    margin-top:
        25px;

    background:
        currentColor;

    opacity:
        0.22;

}



/* =========================

FAQ Description

========================== */


.sv-faq__description {

    max-width:
        470px;

    margin-top:
        20px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(13px, 1.05vw, 15px);

    line-height:
        1.65;

    letter-spacing:
        -0.006em;

    font-weight:
        400;

    /*
     * Deliberately softer than the FAQ heading.
     */
    opacity:
        0.56;

}



/* =========================

FAQ Blocks

========================== */


.sv-faq__blocks {

    width: 100%;

    box-sizing: border-box;

}



/* =========================

FAQ Category

========================== */


.sv-faq-category {

    width: 100%;

    border-top:
        1px solid rgba(0, 0, 0, .08);

    padding:
        25px 0;

    box-sizing: border-box;

}



/* =========================

Category Header

========================== */


.sv-faq-category__header {

    width: 100%;

    display: flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        24px;

    padding:
        0;

    border:
        0;

    background:
        transparent;

    text-align:
        left;

    cursor:
        pointer;

}



/* =========================

Category Heading

========================== */


.sv-faq-category__heading {

    min-width:
        0;

}



/* =========================

Category Title

========================== */


.sv-faq-category__title {

    margin:
        0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(21px, 2vw, 24px);

    line-height:
        1.25;

    letter-spacing:
        -0.025em;

    font-weight:
        600;

}



/* =========================

Category Description

========================== */


.sv-faq-category__description {

    max-width:
        560px;

    margin-top:
        7px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        13px;

    line-height:
        1.6;

    letter-spacing:
        -0.004em;

    font-weight:
        400;

    /*
     * More restrained than the main FAQ
     * introduction.
     */
    opacity:
        0.55;

}



/* =========================

Category Icon

========================== */


.sv-faq-category__icon {

    flex-shrink:
        0;

    width:
        34px;

    height:
        34px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        20px;

    line-height:
        1;

    border-radius:
        50%;

    background:
        #f4f6f8;

    opacity:
        .75;

    transition:

        transform .25s ease,

        background .25s ease,

        opacity .25s ease;

}



/* =========================

Category Icon — Open

========================== */


.sv-faq-category.is-open .sv-faq-category__icon {

    transform:
        rotate(0deg);

    background:
        #eef7ff;

    color:
        #5aaaff;

    opacity:
        1;

}



/* =========================

Category Icon — Closed

========================== */


.sv-faq-category:not(.is-open) .sv-faq-category__icon {

    transform:
        rotate(-90deg);

}



/* =========================

Category Questions

========================== */


.sv-faq-category__questions {

    margin-top:
        20px;

    overflow:
        hidden;

    transition:

        opacity .25s ease;

}



/* =========================

Hidden Questions

IMPORTANT:
Preserved exactly

========================== */


.sv-faq-category__questions[hidden] {

    display:
        none;

}



/* =========================

Open Questions

========================== */


.sv-faq-category.is-open .sv-faq-category__questions {

    opacity:
        1;

}



/* =========================

FAQ Question

========================== */


.sv-faq-question {

    margin-top:
        10px;

}



/* =========================

Question Trigger

========================== */


.sv-faq-question__trigger {

    width:
        100%;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        24px;

    padding:
        20px 24px;

    background:
        #f7f8fa;

    border:
        1px solid rgba(0, 0, 0, .06);

    border-radius:
        16px;

    cursor:
        pointer;

    text-align:
        left;

    transition:

        transform .25s ease,

        border-color .25s ease,

        background .25s ease;

}



/* =========================

Question Trigger Hover

========================== */


.sv-faq-question__trigger:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(90, 170, 255, .35);

    background:
        #f9fafb;

}



/* =========================

Question Text

========================== */


.sv-faq-question__text {

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        16px;

    line-height:
        1.5;

    letter-spacing:
        -0.008em;

}



/* =========================

Question Icon

========================== */


.sv-faq-question__icon {

    flex-shrink:
        0;

    font-size:
        22px;

    font-weight:
        300;

    color:
        #5aaaff;

}



/* =========================

FAQ Modal

========================== */


.sv-faq-modal {

    position:
        fixed;

    inset:
        0;

    z-index:
        9999;

    display:
        none;

}



/* =========================

FAQ Modal Active

========================== */


.sv-faq-modal.is-active {

    display:
        block;

}



/* =========================

Modal Overlay

========================== */


.sv-faq-modal__overlay {

    position:
        absolute;

    inset:
        0;

    background:
        rgba(245, 247, 250, .78);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

}



/* =========================

Modal Container

========================== */


.sv-faq-modal__container {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        min(90%, 560px);

    padding:
        42px;

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

    background:
        #f7f8fa;

    border:
        1px solid rgba(90, 170, 255, .25);

    border-radius:
        28px;

    z-index:
        2;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, .12);

    opacity:
        0;

    transition:

        opacity .25s ease,

        transform .25s ease;

}



/* =========================

Modal Active Container

========================== */


.sv-faq-modal.is-active .sv-faq-modal__container {

    opacity:
        1;

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

}



/* =========================

Modal Accent

========================== */


.sv-faq-modal__container::before {

    content:
        "";

    position:
        absolute;

    inset:
        -1px;

    border-radius:
        28px;

    background:
        linear-gradient(135deg,
            rgba(90, 170, 255, .45),
            transparent 40%);

    pointer-events:
        none;

    opacity:
        .5;

}



/* =========================

Modal Content

========================== */


.sv-faq-modal__content {

    position:
        relative;

    z-index:
        2;

}



/* =========================

Modal Close

========================== */


.sv-faq-modal__close {

    position:
        absolute;

    right:
        22px;

    top:
        18px;

    width:
        36px;

    height:
        36px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        0;

    border-radius:
        50%;

    background:
        white;

    cursor:
        pointer;

    font-size:
        22px;

    line-height:
        1;

    z-index:
        3;

}



/* =========================

Modal Close Hover

========================== */


.sv-faq-modal__close:hover {

    background:
        #eef7ff;

    color:
        #5aaaff;

}



/* =========================

Modal Question

========================== */


.sv-faq-modal__question {

    margin:
        0 0 20px;

    padding-right:
        40px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        26px;

    line-height:
        1.3;

    letter-spacing:
        -0.035em;

}



/* =========================

Modal Answer

========================== */


.sv-faq-modal__answer {

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        16px;

    line-height:
        1.7;

    opacity:
        .85;

}



/* =========================

Body Lock

========================== */


.sv-faq-modal-open {

    overflow:
        hidden;

}



/* =========================================================
   MOBILE
   ========================================================= */


@media (max-width: 767px) {



    /* =========================
       FAQ BASE
       ========================== */


    .sv-faq {

        width:
            100%;

        box-sizing:
            border-box;

    }



    /* =========================
       FAQ HEADER
       
       Restrained horizontal inset.
       The accordion remains full width.
       ========================== */


    .sv-faq__header {

        width:
            auto;

        max-width:
            none;

        margin-top:
            0;

        margin-right:
            clamp(10px, 4vw, 18px);

        margin-bottom:
            32px;

        margin-left:
            clamp(10px, 4vw, 18px);

    }



    /* =========================
       MOBILE EYEBROW
       ========================== */


    .sv-faq__eyebrow {

        font-size:
            8px;

        line-height:
            1;

        letter-spacing:
            0.22em;

        font-weight:
            600;

        opacity:
            0.42;

    }



    /* =========================
       MOBILE HEADING
       
       More editorial.
       Less oversized than the
       previous 42px setting.
       ========================== */


    .sv-faq__heading {

        max-width:
            270px;

        margin-top:
            13px;

        font-size:
            clamp(32px, 9.5vw, 40px);

        line-height:
            0.97;

        letter-spacing:
            -0.055em;

        font-weight:
            600;

    }



    /* =========================
       MOBILE HEADING ACCENT
       ========================== */


    .sv-faq__heading::after {

        width:
            34px;

        height:
            1px;

        margin-top:
            20px;

        opacity:
            0.22;

    }



    /* =========================
       MOBILE DESCRIPTION
       ========================== */


    .sv-faq__description {

        max-width:
            310px;

        margin-top:
            17px;

        font-size:
            13px;

        line-height:
            1.62;

        letter-spacing:
            -0.005em;

        opacity:
            0.55;

    }



    /* =========================
       MOBILE CATEGORY
       
       Keep category system
       full-width.
       ========================== */


    .sv-faq-category {

        padding:
            22px 0;

    }



    /* =========================
       MOBILE CATEGORY HEADER
       ========================== */


    .sv-faq-category__header {

        gap:
            16px;

    }



    /* =========================
       MOBILE CATEGORY TITLE
       ========================== */


    .sv-faq-category__title {

        font-size:
            20px;

        line-height:
            1.25;

        letter-spacing:
            -0.025em;

    }



    /* =========================
       MOBILE CATEGORY DESCRIPTION
       ========================== */


    .sv-faq-category__description {

        max-width:
            300px;

        margin-top:
            6px;

        font-size:
            12px;

        line-height:
            1.55;

        opacity:
            0.52;

    }



    /* =========================
       MOBILE CATEGORY ICON
       ========================== */


    .sv-faq-category__icon {

        width:
            30px;

        height:
            30px;

        font-size:
            18px;

    }



    /* =========================
       MOBILE QUESTIONS
       ========================== */


    .sv-faq-category__questions {

        margin-top:
            17px;

    }



    /* =========================
       MOBILE QUESTION
       ========================== */


    .sv-faq-question {

        margin-top:
            8px;

    }



    /* =========================
       MOBILE QUESTION TRIGGER
       ========================== */


    .sv-faq-question__trigger {

        gap:
            16px;

        padding:
            17px 18px;

        border-radius:
            14px;

    }



    /* =========================
       MOBILE QUESTION TEXT
       ========================== */


    .sv-faq-question__text {

        font-size:
            14px;

        line-height:
            1.5;

    }



    /* =========================
       MOBILE QUESTION ICON
       ========================== */


    .sv-faq-question__icon {

        font-size:
            20px;

    }



    /* =========================
       MOBILE MODAL
       
       Functional behavior preserved.
       Only proportions adjusted.
       ========================== */


    .sv-faq-modal__container {

        width:
            calc(100% - 28px);

        padding:
            34px 24px;

        border-radius:
            22px;

    }



    .sv-faq-modal__container::before {

        border-radius:
            22px;

    }



    /* =========================
       MOBILE MODAL CLOSE
       ========================== */


    .sv-faq-modal__close {

        right:
            14px;

        top:
            12px;

        width:
            34px;

        height:
            34px;

    }



    /* =========================
       MOBILE MODAL QUESTION
       ========================== */


    .sv-faq-modal__question {

        margin-bottom:
            17px;

        padding-right:
            34px;

        font-size:
            22px;

        line-height:
            1.3;

    }



    /* =========================
       MOBILE MODAL ANSWER
       ========================== */


    .sv-faq-modal__answer {

        font-size:
            14px;

        line-height:
            1.65;

    }

}



/* =========================================================
   REDUCED MOTION

   Preserve existing behavior.
   ========================================================= */


@media (prefers-reduced-motion: reduce) {

    .sv-faq *,
    .sv-faq *::before,
    .sv-faq *::after {

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

    }

}