.faq-page {
    min-height: 60vh;
    margin: 0;
    padding: clamp(3.5rem, 7vw, 6rem) 1rem clamp(4rem, 7vw, 6rem);
    background:
        radial-gradient(circle at 10% 5%, var(--color-primary-soft) 0, transparent 28rem),
        var(--color-bg);
}

/* Public pages use the tenant's configured brand rather than a fixed accent. */
.public-site .faq-page {
    --color-primary: var(--brand);
    --color-primary-hover: color-mix(in srgb, var(--brand) 84%, #000);
    --color-primary-soft: color-mix(in srgb, var(--brand) 11%, transparent);
    --color-primary-soft-2: color-mix(in srgb, var(--brand) 6%, var(--color-surface));
}

.public-site .public-main > .faq-page { background: radial-gradient(circle at 10% 5%, var(--color-primary-soft) 0, transparent 28rem), var(--color-bg); }
.faq-hero { max-width: 760px; margin: 0 auto clamp(2.25rem, 5vw, 3.5rem); text-align: center; }
.faq-kicker { display: inline-flex; align-items: center; margin-bottom: 0; padding: .5rem .9rem; border-radius: var(--radius-full); color: var(--color-primary); background: var(--color-primary-soft); font-size: .76rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.faq-hero h1 { margin: .9rem 0 0; color: var(--color-text); font-family: var(--font-display); font-size: clamp(2.3rem, 5.5vw, 4rem); line-height: 1.08; letter-spacing: -.025em; }
.faq-hero p { max-width: 620px; margin: 1rem auto 0; color: var(--color-text-muted); font-size: var(--text-base); line-height: 1.7; }

.faq-shell { width: min(100%, 960px); margin: auto; padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.faq-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 .25rem 1.25rem; border-bottom: 1px solid var(--color-divider); color: var(--color-primary); }
.faq-heading h2 { margin: .2rem 0 0; color: var(--color-text); font-family: var(--font-display); font-size: clamp(1.45rem, 3vw, 1.9rem); }
.faq-count { color: var(--color-text-muted); font-size: .82rem; font-weight: 600; }
.faq-list { display: grid; }
.faq-item { border-bottom: 1px solid var(--color-divider); }
.faq-item:last-child { border-bottom: 0; }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem .25rem; color: var(--color-text); font-weight: 600; cursor: pointer; list-style: none; transition: color var(--transition); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--color-primary); }
.faq-item summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; border-radius: var(--radius-sm); }
.faq-toggle { display: grid; flex: 0 0 34px; height: 34px; place-items: center; border-radius: 50%; color: var(--color-primary); background: var(--color-primary-soft); transition: transform var(--transition); }
.faq-item[open] .faq-toggle { transform: rotate(45deg); }
.faq-answer { padding: 0 3.5rem 1.25rem .25rem; }
.faq-answer p { margin: 0; color: var(--color-text-muted); line-height: 1.75; }

.faq-contact { display: flex; align-items: center; gap: 1rem; width: min(100%, 960px); margin: 1.25rem auto 0; padding: 1.1rem 1.3rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface)); }
.faq-contact-icon { display: grid; flex: 0 0 48px; height: 48px; place-items: center; border-radius: 50%; color: var(--color-primary); background: var(--color-primary-soft); }
.faq-contact h2 { margin: 0; color: var(--color-text); font-family: var(--font-display); font-size: 1.25rem; }
.faq-contact p { margin: .15rem 0 0; color: var(--color-text-muted); font-size: .9rem; }
.faq-contact a { display: inline-flex; align-items: center; gap: .4rem; margin-left: auto; padding: .7rem 1rem; border-radius: var(--radius-full); color: var(--color-text-inverse); background: var(--color-primary); font-size: .9rem; font-weight: 700; white-space: nowrap; }
.faq-contact a:hover { background: var(--color-primary-hover); transform: translateY(-1px); }

[data-theme="dark"] .faq-shell { box-shadow: var(--shadow-md); }
[data-theme="dark"] .faq-contact { background: var(--color-surface-2); }

@media (max-width: 640px) {
    .faq-page { padding: 2.75rem .75rem 3.5rem; }
    .faq-hero { margin-bottom: 1.75rem; }
    .faq-shell { border-radius: var(--radius-lg); }
    .faq-heading { align-items: flex-start; }
    .faq-item summary { align-items: flex-start; }
    .faq-answer { padding-right: .25rem; }
    .faq-contact { align-items: flex-start; flex-wrap: wrap; }
    .faq-contact a { width: 100%; justify-content: center; margin: .25rem 0 0; }
}