/* css/page-faq.css */
@layer pages {

    /* ── Hero ── */
    .faq-hero {
        text-align: center;
        padding: 3rem 0 2.5rem;
    }

    .faq-hero .page-h1 em {
        font-style: italic;
        color: var(--color-sub);
    }

    /* ── FAQ Group ── */
    .faq-group {
        background: linear-gradient(145deg, #fff 0%, #f4f7ff 100%);
        border: 1.5px solid rgba(255,255,255,0.85);
        border-radius: 22px 18px 22px 18px / 18px 22px 18px 22px;
        box-shadow: 0 6px 0 rgba(180,200,230,0.45), 0 2px 16px rgba(100,120,200,0.08);
        overflow: hidden;
        margin-bottom: 1.5rem;
    }

    .faq-group-hd {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 1rem 1.4rem;
        border-bottom: 1px solid var(--color-border);
        background: rgba(255,255,255,0.5);
    }

    .faq-badge {
        font-size: 0.55rem;
        font-weight: 800;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        padding: 0.3em 0.8em;
        border-radius: var(--radius-pill);
        white-space: nowrap;
    }
    .faq-badge--co   { background: var(--color-purple-bg); color: var(--color-purple-d); border: 1px solid var(--color-purple-l); }
    .faq-badge--cand { background: var(--color-green-bg); color: var(--color-green-d); border: 1px solid var(--color-green-l); }

    .faq-group-title {
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--color-text);
    }

    /* ── Accordion ── */
    details {
        border-bottom: 1px solid var(--color-border);
    }

    details:last-child { border-bottom: none; }

    summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 1.4rem;
        font-size: 0.84rem;
        font-weight: 600;
        color: var(--color-text);
        cursor: pointer;
        list-style: none;
        gap: 0.75rem;
        transition: background 0.1s;
    }
    summary:hover { background: rgba(255,255,255,0.5); }
    summary::-webkit-details-marker { display: none; }

    .faq-sum-icon {
        flex-shrink: 0;
        font-size: 1.1rem;
        color: var(--color-lbl);
        font-weight: 400;
        transition: transform 0.2s;
    }

    details[open] .faq-sum-icon {
        transform: rotate(45deg);
    }

    .faq-answer {
        padding: 0.25rem 1.4rem 1.2rem;
        font-size: 0.84rem;
        color: var(--color-sub);
        line-height: 1.7;
    }

    /* ── Callout within answer ── */
    .faq-callout {
        margin-top: 1rem;
        padding: 0.75rem 1rem;
        border-radius: 10px;
        font-size: 0.78rem;
        font-weight: 600;
        line-height: 1.5;
    }
    .faq-callout--blue   { background: var(--color-blue-bg); color: var(--color-blue-d); border-left: 3px solid var(--color-blue); }
    .faq-callout--green  { background: var(--color-green-bg); color: var(--color-green-d); border-left: 3px solid var(--color-green); }
    .faq-callout--purple { background: var(--color-purple-bg); color: var(--color-purple-d); border-left: 3px solid var(--color-purple); }

    /* ── Bottom CTA pair ── */
    .faq-cta-pair {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.2rem;
        margin-top: 0.5rem;
    }

    .faq-cta-card {
        padding: 2rem 1.8rem;
        border: 1.5px solid transparent;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .faq-cta-card--green {
        background: linear-gradient(145deg, var(--color-green-bg) 0%, #d4f5e2 100%);
        border-color: var(--color-green-l);
        border-radius: 22px 18px 22px 18px / 18px 22px 18px 22px;
        box-shadow: 0 6px 0 rgba(62,203,116,0.3), 0 2px 16px rgba(40,160,80,0.08);
    }

    .faq-cta-card--purple {
        background: linear-gradient(145deg, var(--color-purple-bg) 0%, #ede8ff 100%);
        border-color: var(--color-purple-l);
        border-radius: 18px 22px 18px 22px / 22px 18px 22px 18px;
        box-shadow: 0 6px 0 rgba(152,120,232,0.3), 0 2px 16px rgba(80,48,168,0.08);
    }

    .faq-cta-eyebrow {
        font-size: 0.58rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }
    .faq-cta-eyebrow--green  { color: var(--color-green-d); }
    .faq-cta-eyebrow--purple { color: var(--color-purple-d); }

    .faq-cta-title {
        font-size: 1.3rem;
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1.2;
        color: var(--color-text);
    }

    .faq-cta-body {
        font-size: 0.8rem;
        color: var(--color-sub);
        line-height: 1.6;
    }

    .faq-cta-btn {
        display: inline-block;
        padding: 0.6em 1.4em;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        color: #fff;
        text-decoration: none;
        border-radius: var(--radius-pill);
        align-self: flex-start;
        transition: transform 0.1s, box-shadow 0.1s;
    }
    .faq-cta-btn--green {
        background: linear-gradient(160deg, #50d890, var(--color-green));
        box-shadow: 0 4px 0 var(--color-green-d), 0 6px 16px rgba(40,160,80,0.3);
    }
    .faq-cta-btn--green:hover  { transform: translateY(-2px); box-shadow: 0 6px 0 var(--color-green-d), 0 8px 20px rgba(40,160,80,0.35); }
    .faq-cta-btn--green:active { transform: translateY(2px);  box-shadow: 0 2px 0 var(--color-green-d); }
    .faq-cta-btn--purple {
        background: linear-gradient(160deg, #b898f0, var(--color-purple));
        box-shadow: 0 4px 0 var(--color-purple-d), 0 6px 16px rgba(80,48,168,0.3);
    }
    .faq-cta-btn--purple:hover  { transform: translateY(-2px); box-shadow: 0 6px 0 var(--color-purple-d), 0 8px 20px rgba(80,48,168,0.35); }
    .faq-cta-btn--purple:active { transform: translateY(2px);  box-shadow: 0 2px 0 var(--color-purple-d); }

    .faq-cta-note {
        font-size: 0.62rem;
        color: var(--color-lbl);
    }

    /* ── Responsive ── */
    @media (max-width: 600px) {
        .faq-cta-pair { grid-template-columns: 1fr; }
    }

}