/* ════════════════════════════════════════════════════════════════════════
   faq.css — L3 for zAbout/FAQ (zBrush: [page, faq]). The canonical page shell
   (hero / sections / zc-title / buttons) does the chrome; this file adds ONLY
   the Q&A reading format: a divided question list with a gradient "Q" marker
   and readable multi-paragraph answers.

   Each question (zH3) is a SIBLING of its answer (zMD) inside the Q block, so
   its `_zClass` is dropped — questions are styled by element under .faq-item.
   ════════════════════════════════════════════════════════════════════════ */

.faq-item {
    max-width:     760px;
    margin:        0 auto;
    padding:       1.9rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.faq-item:last-child { border-bottom: none; }

/* question — element-styled, gradient "Q" marker in the left gutter */
.faq-item h3 {
    position:       relative;
    margin:         0 0 1rem;
    padding-left:   2.3rem;
    font-size:      clamp(1.18rem, 2.3vw, 1.45rem);
    font-weight:    700;
    line-height:    1.4;
    letter-spacing: -0.02em;
    color:          var(--text-light);
}
.faq-item h3::before {
    content:                 'Q';
    position:                absolute;
    left:                    0;
    top:                     0;
    font-size:               1.25rem;
    font-weight:             800;
    line-height:             1.35;
    background:              linear-gradient(135deg, var(--color-secondary, #9370DB), var(--color-primary, #A2D46E));
    -webkit-background-clip: text;
    background-clip:         text;
    -webkit-text-fill-color: transparent;
}

/* answer — multi-paragraph prose (zMD renders one <p> per paragraph) */
.faq-item [data-zkey="zMD"] { padding-left: 2.3rem; }
.faq-item p {
    color:       var(--text-gray);
    font-size:   1.04rem;
    line-height: 1.8;
    margin:      0 0 1rem;
    max-width:   none;
}
.faq-item p:last-child { margin-bottom: 0; }
.faq-item a         { color: #a5b4fc; text-decoration: underline; text-underline-offset: 2px; }
.faq-item a:hover   { color: #c7d2fe; }

@media (max-width: 768px) {
    .faq-item h3,
    .faq-item [data-zkey="zMD"] { padding-left: 1.9rem; }
}