/* ==========================================================
   PRINTQLY PUBLIC FAQ
   Audience switch + responsive accordion.
   ========================================================== */
.faq-page{
    min-height:60vh;
    background:#090909;
    color:#fff;
    padding:34px 0 90px;
}

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

.faq-hero{
    text-align:left;
    margin:0 0 34px;
}

.faq-kicker{
    display:block;
    margin-bottom:10px;
    color:#FFD400;
    font-size:10px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:1.8px;
    text-transform:uppercase;
}

.faq-hero h1{
    margin:0 0 12px;
    color:#fff;
    font-size:42px;
    line-height:1.12;
    font-weight:800;
    letter-spacing:-1px;
}

.faq-hero p{
    max-width:760px;
    margin:0;
    color:#999;
    font-size:14px;
    line-height:1.75;
}

.faq-switcher{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5px;
    padding:5px;
    margin:0 0 44px;
    background:#111;
    border:1px solid #292929;
    border-radius:15px;
    box-shadow:0 8px 28px rgba(0,0,0,.22);
}

.faq-switcher-btn{
    min-height:54px;
    border:1px solid transparent;
    border-radius:11px;
    background:transparent;
    color:#999;
    font:inherit;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}

.faq-switcher-btn i{font-size:15px}
.faq-switcher-btn:hover{color:#fff;background:#171717}
.faq-switcher-btn:focus-visible{outline:2px solid #FFD400;outline-offset:2px}
.faq-switcher-btn.is-active{
    background:#FFD400;
    color:#090909;
    border-color:#FFD400;
    box-shadow:0 0 22px rgba(255,212,0,.12);
}

.faq-panel[hidden]{display:none!important}
.faq-panel{display:block;animation:faqPanelIn .22s ease both}

@keyframes faqPanelIn{
    from{opacity:0;transform:translateY(5px)}
    to{opacity:1;transform:translateY(0)}
}

.faq-section-heading{margin-bottom:22px}
.faq-section-heading .faq-kicker{margin-bottom:8px}
.faq-section-heading h2{
    margin:0 0 9px;
    color:#fff;
    font-size:30px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:-.5px;
}
.faq-section-heading p{
    margin:0;
    color:#8f8f8f;
    font-size:13px;
    line-height:1.7;
}
.faq-count{
    display:inline-flex;
    margin-top:14px;
    padding:7px 11px;
    border:1px solid #292929;
    border-radius:999px;
    color:#aaa;
    background:#101010;
    font-size:10px;
    font-weight:700;
}

.faq-list{display:grid;gap:12px}

.faq-item{
    margin:0;
    background:#151515;
    border:1px solid #252525;
    border-radius:14px;
    overflow:hidden;
    transition:border-color .2s ease,background .2s ease,transform .2s ease;
}
.faq-item:hover{border-color:#3b3b3b;background:#171717}
.faq-item[open]{border-color:rgba(255,212,0,.42);background:#151515}

.faq-item summary{
    min-height:70px;
    padding:15px 18px;
    display:grid;
    grid-template-columns:40px minmax(0,1fr) 30px;
    align-items:center;
    gap:12px;
    list-style:none;
    cursor:pointer;
    user-select:none;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:focus-visible{outline:2px solid #FFD400;outline-offset:-2px}

.faq-number{
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:#202020;
    color:#FFD400;
    font-size:10px;
    font-weight:800;
}
.faq-question{
    color:#fff;
    font-size:15px;
    line-height:1.45;
    font-weight:700;
}
.faq-chevron{
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    color:#FFD400;
    font-size:12px;
    transition:transform .2s ease;
}
.faq-item[open] .faq-chevron{transform:rotate(180deg)}

.faq-answer{
    padding:0 60px 20px 70px;
    color:#a6a6a6;
    font-size:12px;
    line-height:1.8;
}

@media (max-width:767px){
    .faq-page{padding:28px 0 80px}
    .faq-container{width:calc(100% - 32px)}
    .faq-hero{margin-bottom:26px}
    .faq-hero h1{font-size:31px;letter-spacing:-.7px}
    .faq-hero p{font-size:12px;line-height:1.7}

    .faq-switcher{
        position:sticky;
        top:8px;
        z-index:10;
        margin-bottom:34px;
        border-radius:13px;
    }
    .faq-switcher-btn{min-height:48px;font-size:12px}

    .faq-section-heading h2{font-size:24px}
    .faq-section-heading p{font-size:12px}
    .faq-count{font-size:9px}

    .faq-item{border-radius:13px}
    .faq-item summary{
        min-height:64px;
        padding:13px 13px;
        grid-template-columns:34px minmax(0,1fr) 27px;
        gap:9px;
    }
    .faq-number{width:32px;height:32px;border-radius:9px;font-size:9px}
    .faq-question{font-size:14px;line-height:1.4}
    .faq-chevron{width:27px;height:27px;font-size:11px}
    .faq-answer{padding:0 14px 18px 56px;font-size:11px;line-height:1.75}
}

@media (max-width:420px){
    .faq-container{width:calc(100% - 24px)}
    .faq-hero h1{font-size:28px}
    .faq-switcher-btn{font-size:11px;gap:7px}
    .faq-item summary{grid-template-columns:30px minmax(0,1fr) 24px;padding:12px 10px}
    .faq-number{width:29px;height:29px}
    .faq-question{font-size:13px}
    .faq-answer{padding-left:49px}
}

@media (prefers-reduced-motion:reduce){
    .faq-panel{animation:none}
    .faq-switcher-btn,.faq-item,.faq-chevron{transition:none}
}