
/* HastiGem FAQ page — v103 */
body.hg-faq-template-page{
    background:var(--hg-surface,#f6f6f2);
}

.hg-faq-page{
    --faq-page:#f6f6f2;
    --faq-page2:#eeeee7;
    --faq-card:#ffffff;
    --faq-card2:#f9f9f5;
    --faq-ink:#151923;
    --faq-muted:#6f7480;
    --faq-line:rgba(21,25,35,.10);
    --faq-accent:#0f766e;
    --faq-accent2:#14b8a6;
    --faq-accent3:#0ea5e9;
    --faq-warn:#f59e0b;
    --faq-shadow:0 20px 55px rgba(31,34,45,.10);
    --faq-radius:28px;
    color:var(--faq-ink);
    background:linear-gradient(180deg,var(--faq-page),var(--faq-page2));
    overflow:hidden;
}

html[data-hg-theme="dark"] .hg-faq-page{
    --faq-page:#0f131a;
    --faq-page2:#131923;
    --faq-card:#171d27;
    --faq-card2:#1b2230;
    --faq-ink:#edf2f7;
    --faq-muted:#a3adba;
    --faq-line:rgba(255,255,255,.10);
    --faq-accent:#2dd4bf;
    --faq-accent2:#5eead4;
    --faq-accent3:#38bdf8;
    --faq-shadow:0 22px 70px rgba(0,0,0,.34);
}

html[data-hg-theme="dark"] body.hg-faq-template-page{
    background:#0f131a!important;
}

.hg-faq-page *,
.hg-faq-page *:before,
.hg-faq-page *:after{
    box-sizing:border-box;
}

.hg-faq-wrap{
    width:min(1140px,calc(100% - 28px));
    margin:auto;
    padding:34px 0 46px;
}

.hg-faq-card{
    border:1px solid var(--faq-line);
    border-radius:var(--faq-radius);
    background:rgba(255,255,255,.90);
    box-shadow:var(--faq-shadow);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}

html[data-hg-theme="dark"] .hg-faq-card{
    background:rgba(23,29,39,.88);
}

.hg-faq-hero{
    display:grid;
    grid-template-columns:minmax(0,1fr) 360px;
    gap:18px;
    align-items:stretch;
}

.hg-faq-hero-main{
    padding:34px;
    min-height:390px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    overflow:hidden;
}

.hg-faq-eyebrow{
    width:max-content;
    max-width:100%;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border:1px solid rgba(15,118,110,.20);
    border-radius:999px;
    color:var(--faq-accent);
    background:rgba(20,184,166,.08);
    font-size:12px;
    margin-bottom:16px;
    font-weight:800;
}

.hg-faq-eyebrow i{
    width:8px;
    height:8px;
    border-radius:999px;
    background:var(--faq-accent);
    box-shadow:0 0 0 5px rgba(20,184,166,.14);
    flex:none;
}

.hg-faq-hero h1{
    margin:0;
    font-size:clamp(34px,5vw,62px);
    line-height:1.08;
    letter-spacing:-1.8px;
    max-width:760px;
    color:var(--faq-ink);
}

.hg-faq-hero h1 span{
    display:inline-block;
    color:var(--faq-accent);
}

.hg-faq-lead{
    margin:18px 0 0;
    color:var(--faq-muted);
    line-height:2.05;
    font-size:15px;
    max-width:760px;
}

.hg-faq-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin-top:26px;
}

.hg-faq-btn{
    min-height:52px;
    padding:0 18px;
    border-radius:18px;
    border:1px solid var(--faq-line);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    font-weight:900;
    cursor:pointer;
    transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
    text-align:center;
    text-decoration:none;
}

.hg-faq-btn-primary{
    border:0;
    color:#fff!important;
    background:radial-gradient(circle at 18% 18%, rgba(255,255,255,.28), transparent 28%),linear-gradient(135deg,var(--faq-accent),var(--faq-accent2));
    box-shadow:0 16px 30px rgba(15,118,110,.24);
}

.hg-faq-btn-soft{
    color:var(--faq-ink)!important;
    background:linear-gradient(180deg,var(--faq-card),var(--faq-card2));
}

.hg-faq-btn:hover{
    transform:translateY(-2px);
}

.hg-faq-pills{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin-top:28px;
}

.hg-faq-pill{
    border:1px solid var(--faq-line);
    background:var(--faq-card2);
    border-radius:20px;
    padding:14px;
}

.hg-faq-pill b{
    display:block;
    font-size:18px;
    letter-spacing:-.5px;
    color:var(--faq-ink);
}

.hg-faq-pill span{
    display:block;
    color:var(--faq-muted);
    font-size:12px;
    line-height:1.8;
    margin-top:4px;
}

.hg-faq-side-card{
    padding:22px;
    display:flex;
    flex-direction:column;
    gap:14px;
}

.hg-faq-side-card h2{
    margin:0;
    font-size:22px;
    letter-spacing:-.5px;
    color:var(--faq-ink);
}

.hg-faq-side-card p{
    margin:0;
    color:var(--faq-muted);
    line-height:1.95;
    font-size:13px;
}

.hg-faq-support-box{
    display:grid;
    gap:10px;
    margin-top:2px;
}

.hg-faq-support-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:12px;
    border:1px solid var(--faq-line);
    border-radius:18px;
    background:var(--faq-card2);
}

.hg-faq-support-item code{
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    color:var(--faq-ink);
    font-size:13px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.hg-faq-copy{
    border:1px solid rgba(20,184,166,.26);
    border-radius:14px;
    padding:9px 12px;
    color:var(--faq-accent);
    background:rgba(20,184,166,.08);
    cursor:pointer;
    flex:none;
    font-weight:850;
}

.hg-faq-callout{
    display:flex;
    gap:9px;
    align-items:flex-start;
    border:1px solid rgba(245,158,11,.30);
    background:rgba(245,158,11,.10);
    color:#9a5b05;
    border-radius:18px;
    padding:12px;
    font-size:12px;
    line-height:1.9;
}

html[data-hg-theme="dark"] .hg-faq-callout{
    color:#fbbf24;
}

.hg-faq-tools{
    margin-top:18px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:12px;
    align-items:center;
    padding:14px;
}

.hg-faq-searchbox{
    min-height:54px;
    border:1px solid var(--faq-line);
    border-radius:20px;
    background:var(--faq-card2);
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 14px;
}

.hg-faq-searchbox svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:var(--faq-muted);
    stroke-width:2;
    stroke-linecap:round;
    flex:none;
}

.hg-faq-searchbox input{
    width:100%;
    border:0;
    outline:0;
    background:transparent;
    color:var(--faq-ink);
    min-height:52px;
    font-size:14px;
}

.hg-faq-searchbox input::placeholder{
    color:var(--faq-muted);
}

.hg-faq-cat-scroll{
    display:flex;
    align-items:center;
    gap:8px;
    overflow:auto;
    scrollbar-width:none;
    padding-bottom:1px;
}

.hg-faq-cat-scroll::-webkit-scrollbar{
    display:none;
}

.hg-faq-cat-btn{
    border:1px solid var(--faq-line);
    border-radius:999px;
    background:var(--faq-card2);
    color:var(--faq-muted);
    min-height:44px;
    padding:0 14px;
    cursor:pointer;
    white-space:nowrap;
    font-weight:850;
    font-size:12px;
    transition:.2s ease;
}

.hg-faq-cat-btn.active{
    color:#fff;
    border-color:transparent;
    background:linear-gradient(135deg,var(--faq-accent),var(--faq-accent2));
    box-shadow:0 12px 24px rgba(15,118,110,.18);
}

.hg-faq-layout{
    display:grid;
    grid-template-columns:280px minmax(0,1fr);
    gap:18px;
    align-items:start;
    margin-top:18px;
}

.hg-faq-quick-panel{
    position:sticky;
    top:92px;
    padding:18px;
}

.hg-faq-quick-panel strong{
    display:block;
    margin-bottom:12px;
    font-size:14px;
    color:var(--faq-ink);
}

.hg-faq-quick-list{
    display:grid;
    gap:9px;
}

.hg-faq-quick-list a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:11px 12px;
    border-radius:16px;
    background:var(--faq-card2);
    border:1px solid var(--faq-line);
    color:var(--faq-muted);
    font-size:12px;
    text-decoration:none;
}

.hg-faq-quick-list span{
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    border-radius:11px;
    background:rgba(20,184,166,.10);
    color:var(--faq-accent);
    flex:none;
    direction:ltr;
    font-weight:950;
}

.hg-faq-content{
    display:grid;
    gap:14px;
}

.hg-faq-group{
    display:grid;
    gap:10px;
    scroll-margin-top:110px;
}

.hg-faq-group[hidden]{
    display:none!important;
}

.hg-faq-group-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:18px 20px;
}

.hg-faq-group-title h2{
    margin:0;
    font-size:21px;
    letter-spacing:-.5px;
    color:var(--faq-ink);
}

.hg-faq-group-title span{
    color:var(--faq-muted);
    font-size:12px;
    line-height:1.7;
}

.hg-faq-item{
    border:1px solid var(--faq-line);
    border-radius:22px;
    background:var(--faq-card);
    box-shadow:0 10px 28px rgba(31,34,45,.055);
    overflow:hidden;
    animation:hgFaqRise .45s ease both;
}

.hg-faq-item[hidden]{
    display:none!important;
}

.hg-faq-question{
    width:100%;
    min-height:66px;
    border:0;
    background:transparent;
    color:var(--faq-ink);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:17px 18px;
    cursor:pointer;
    text-align:right;
    font-weight:950;
    line-height:1.7;
}

.hg-faq-q{
    display:flex;
    align-items:flex-start;
    gap:10px;
}

.hg-faq-num{
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    border-radius:13px;
    background:rgba(20,184,166,.10);
    color:var(--faq-accent);
    direction:ltr;
    font-size:12px;
    flex:none;
    margin-top:1px;
}

.hg-faq-plus{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:14px;
    border:1px solid var(--faq-line);
    color:var(--faq-accent);
    background:var(--faq-card2);
    flex:none;
    transition:.2s ease;
    font-size:19px;
    line-height:1;
}

.hg-faq-item.open .hg-faq-plus{
    transform:rotate(45deg);
    background:rgba(20,184,166,.12);
}

.hg-faq-answer{
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows .26s ease;
}

.hg-faq-item.open .hg-faq-answer{
    grid-template-rows:1fr;
}

.hg-faq-answer-inner{
    overflow:hidden;
}

.hg-faq-answer p{
    margin:0;
    padding:0 60px 18px 18px;
    color:var(--faq-muted);
    line-height:2.05;
    font-size:13px;
}

.hg-faq-no-result{
    display:none;
    padding:24px;
    text-align:center;
    color:var(--faq-muted);
    line-height:2;
}

.hg-faq-no-result.show{
    display:block;
}

.hg-faq-accept-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:24px;
    background:linear-gradient(135deg,rgba(20,184,166,.10),rgba(255,255,255,.92));
}

html[data-hg-theme="dark"] .hg-faq-accept-card{
    background:linear-gradient(135deg,rgba(45,212,191,.10),rgba(23,29,39,.92));
}

.hg-faq-accept-card h2{
    margin:0;
    font-size:24px;
    color:var(--faq-ink);
}

.hg-faq-accept-card p{
    margin:8px 0 0;
    color:var(--faq-muted);
    line-height:2;
    font-size:13px;
}

.hg-faq-toast{
    position:fixed;
    top:20px;
    right:50%;
    transform:translateX(50%) translateY(-18px);
    opacity:0;
    pointer-events:none;
    z-index:90;
    padding:11px 14px;
    border:1px solid var(--faq-line);
    border-radius:16px;
    color:var(--faq-ink);
    background:var(--faq-card);
    box-shadow:var(--faq-shadow);
    transition:.24s ease;
    font-size:13px;
}

.hg-faq-toast.show{
    opacity:1;
    transform:translateX(50%) translateY(0);
}

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

@media(max-width:980px){
    .hg-faq-hero,
    .hg-faq-layout{
        grid-template-columns:1fr;
    }

    .hg-faq-quick-panel{
        position:relative;
        top:auto;
    }

    .hg-faq-quick-list{
        display:flex;
        overflow:auto;
        padding-bottom:4px;
    }

    .hg-faq-quick-list a{
        white-space:nowrap;
        flex:none;
    }

    .hg-faq-tools{
        grid-template-columns:1fr;
    }
}

@media(max-width:640px){
    .hg-faq-wrap{
        width:min(100% - 20px,1140px);
        padding:22px 0 calc(34px + var(--hg-mobile-nav-height,84px));
    }

    .hg-faq-hero-main{
        padding:24px;
        min-height:auto;
    }

    .hg-faq-actions,
    .hg-faq-accept-card{
        flex-direction:column;
        align-items:stretch;
    }

    .hg-faq-btn{
        width:100%;
    }

    .hg-faq-pills{
        grid-template-columns:1fr;
    }

    .hg-faq-side-card,
    .hg-faq-group-title{
        padding:18px;
    }

    .hg-faq-question{
        padding:15px;
        align-items:flex-start;
    }

    .hg-faq-answer p{
        padding:0 56px 16px 15px;
    }
}

@media print{
    .site-header,
    .mobile-nav,
    .search-overlay,
    .hg-faq-actions,
    .hg-faq-tools,
    .hg-faq-quick-panel,
    .hg-faq-toast{display:none!important}
    .hg-faq-page{background:white;color:#111}
    .hg-faq-wrap{width:100%;padding:0}
    .hg-faq-card,
    .hg-faq-item{box-shadow:none;border:1px solid #ddd;background:white}
    .hg-faq-hero,
    .hg-faq-layout{grid-template-columns:1fr}
    .hg-faq-answer{grid-template-rows:1fr!important}
}

@media (prefers-reduced-motion:reduce){
    .hg-faq-page *,
    .hg-faq-page *:before,
    .hg-faq-page *:after{
        animation:none!important;
        transition:none!important;
        scroll-behavior:auto!important;
    }
}
