:root{
    --mint:#cfe7dc;
    --mint-deeper:#c6e1d5;
    --cream:#f7f5eb;
    --cream-strip:#efe9d6;
    --ink:#1f2d28;
    --text:#3a4a44;
    --sub:#6b7480;
    --gold:#c6a66a;
    --card:#fff;
    --shadow:0 0.625em 1.875em rgba(20,60,40,.08); /* 0 10px 30px */
    --radius:1em; /* 16px */
}

*{ box-sizing:border-box; }

body{
    margin:0;
    background:var(--cream);
    color:var(--text);
    font-family:Inter,system-ui,Arial,sans-serif;
    line-height:1.7;
}

a{ color:inherit; }

/* Slim sub-hero */
.faq-hero{
    padding:3em 1.5em 2.25em; /* 48 24 36 */
    background:linear-gradient(180deg,#fff,#fbfaf6);
    border-bottom:0.0625em solid rgba(20,60,40,.06);
    text-align:center;
}

.faq-hero h1{
    font-family:Cinzel,serif;
    color:var(--ink);
    margin:0 0 0.5em;
    font-size:clamp(1.875em,4vw,2.75em); /* 30–44 */
}

.faq-hero p{
    margin:0 auto;
    color:var(--sub);
    max-width:47.5em; /* 760px */
}

/* Controls */
.faq-controls{
    max-width:68.75em; /* 1100px */
    margin:1.125em auto 0; /* 18px */
    padding:0 1.5em;       /* 24px */
    display:grid;
    grid-template-columns:1fr;
    gap:0.75em;            /* 12px */
}

.search{
    display:flex;
    gap:0.625em;           /* 10px */
}

.search input{
    flex:1;
    padding:0.75em 0.875em;             /* 12 14px */
    border:0.0625em solid #e6e1ce;      /* 1px */
    border-radius:999em;
    background:#fff;
}

.chips{
    display:flex;
    flex-wrap:wrap;
    gap:0.625em;           /* 10px */
    justify-content:center;
    padding-top:0.375em;   /* 6px */
}

.chip{
    border:0.0625em solid var(--mint-deeper);
    background:#fff;
    color:var(--ink);
    padding:0.5em 0.75em;  /* 8 12px */
    border-radius:999em;
    font-size:0.875em;     /* 14px */
    cursor:pointer;
}

.chip.active{
    background:var(--mint);
    border-color:var(--mint);
}

/* FAQ groups */
.faq-wrap{
    max-width:68.75em;      /* 1100px */
    margin:1.625em auto 5em;/* 26px, 80px bottom */
    padding:0 1.5em;        /* 24px */
}

.group{
    margin:1.125em 0;       /* 18px */
}

.group h2{
    font-family:Cinzel,serif;
    color:var(--ink);
    font-size:1.375em;      /* 22px */
    margin:1em 0;           /* 16px */
}

details{
    background:var(--card);
    border:0.0625em solid rgba(20,60,40,.08);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:0.875em 1em;    /* 14 16px */
    margin:0.625em 0;       /* 10px */
    overflow:hidden;
}

summary{
    list-style:none;
    cursor:pointer;
    font-weight:700;
    color:var(--ink);
    display:flex;
    align-items:center;
    gap:0.625em;            /* 10px */
}

summary::-webkit-details-marker{ display:none; }

summary .tag{
    font-size:0.6875em;     /* 11px */
    font-weight:700;
    padding:0.25em 0.5em;   /* 4 8px */
    border-radius:999em;
    background:linear-gradient(180deg,var(--mint),var(--mint-deeper));
    color:var(--ink);
}

details[open]{ border-color:#dde7e1; }

details p,
details ul{
    margin:0.625em 0 0;     /* 10px */
}

.muted{ color:var(--sub); }

.note{
    font-size:0.8125em;     /* 13px */
    color:#5f6b66;
}

/* CTA */
.faq-cta{
    text-align:center;
    padding:3em 1.5em;      /* 48 24px */
    background:linear-gradient(180deg,#fbfaf6,#fff);
    border-top:0.0625em solid rgba(20,60,40,.06);
}

.btn{
    display:inline-block;
    margin-top:0.625em;     /* 10px */
    padding:0.75em 1.25em;  /* 12 20px */
    border-radius:999em;
    background:var(--ink);
    color:#fff;
    text-decoration:none;
    font-weight:700;
    box-shadow:0 0.375em 1.125em rgba(31,45,40,.18); /* 6 18px */
}

/* Slightly smaller group headings on narrow phones */
@media (max-width:45em){   /* 720px */
    .group h2{ font-size:1.25em; }      /* 20px */
}