/* THE QUESTIONS PAGE (/faq; Steven 2026-10-13 night): templates/faq.html,
   drawn in the one card's classes (static/cards/card.css). The one card's
   width: 4px from each edge under 900px wide, from 900px the width the 9:16
   card has at the full height under the header (home-cards.css .hc-slide,
   verify.css .vc__slot), centred. Its height is the answers' own: the page
   scrolls, the card never clips them. The art is a band with the kicker and
   the title; the white panel holds the questions. Design tokens only;
   everything is scoped under .faq and .faq-page. */

.faq-page .main-area { background: var(--surface-secondary); min-height: 0; }
.faq-page .main-area__content { padding: 0; }
.faq-page .global-post-fab,
.faq-page .global-post-fab-surface { display: none !important; }

.faq {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    width: 100%;
    padding: var(--space-1) var(--space-1) var(--space-12);
    color: var(--text-primary);
}
.faq > .tb-card { box-sizing: border-box; width: 100%; }
@media (min-width: 900px) {
    .faq { padding: var(--space-3) var(--space-3) var(--space-16); }
    .faq > .tb-card { width: min(100%, calc((100vh - var(--size-16) - 2 * var(--space-3)) * 9 / 16)); }
}
@supports (height: 100svh) {
    @media (min-width: 900px) {
        .faq > .tb-card { width: min(100%, calc((100svh - var(--size-16) - 2 * var(--space-3)) * 9 / 16)); }
    }
}

/* the art: a band, the card's starfield as a square covering it, the
   edges faded into the card's night (verify.css .vc-card .tb-card__bg svg),
   the waves and their orbit raised into the room above the title so the
   orbit never crosses the words */
.faq-card .faq-card__art { min-height: calc(var(--size-32) + var(--size-16)); }
.faq-card .tb-card__bg svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    aspect-ratio: 1;
    transform: translate(-50%, -66%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, black 14%, black 86%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, black 14%, black 86%, transparent 100%);
}
.faq-card .tb-card__title { margin: 0; }

/* the white panel: one question after another, a hairline between */
.faq-card .faq-card__panel { gap: 0; padding: var(--space-1) var(--space-5) var(--space-5); }
.faq__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4) 0;
    border-top: 1px solid var(--border-default);
    scroll-margin-top: calc(var(--size-16) + var(--space-3));
}
.faq__item:first-child { border-top: 0; }
.faq__q {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
}
.faq__a { margin: 0; color: var(--text-secondary); font-size: var(--text-base); line-height: 1.55; }
.faq__rule,
.faq__more a {
    color: var(--highlight-purple);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* the support button: the card's quiet button (card.css .tb-card__cta--quiet)
   at its words' width, an envelope before them */
.faq-card .faq__action {
    align-self: flex-start;
    gap: var(--space-2);
    margin-top: var(--space-1);
    padding: 0 var(--space-6);
}
.faq__more {
    margin: 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-default);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.5;
    overflow-wrap: anywhere;
}