/**
 * FAQ.
 *
 * The page opens with the shared .hero from tokens.css — the same banner the
 * status page uses, gradient ground and slow diagonal sheen — and everything
 * below it is left-aligned and enters from the left, matching the landing
 * page's settlement section.
 *
 * Two things here are corrections rather than restyling:
 *
 *  - Each question is a <button> with real expanded state. The markup this
 *    replaces used <div class="faq-question" data-on-click="toggleFaq">: a div
 *    is not focusable, carries no role and exposes no aria-expanded, so the
 *    whole FAQ was unreachable by keyboard and a screen reader announced
 *    seventeen unlabelled headings with no sign that anything opened.
 *
 *  - The panel animates grid-template-rows 0fr -> 1fr, which resolves to the
 *    content's real height. The old rule animated max-height 0 -> 500px, so a
 *    short answer reached its height early and the rest of the motion ran
 *    against nothing (it stopped dead rather than easing out), and any answer
 *    taller than 500px was silently clipped.
 */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 56px 24px 88px;
}

@media (prefers-reduced-motion: no-preference) {
    .container [data-reveal] { transform: translateX(-26px); }
    .container [data-reveal].is-revealed { transform: none; }
}

/* ── Filter ───────────────────────────────────────────────────────────────
   Seventeen questions in four groups: without this you scroll past all of them
   to reach one. Sticky, so the categories stay reachable deep in the list.
   The background is opaque rather than inherited — a translucent sticky bar
   lets the questions show through as they pass under it. */
.faq-filter {
    position: sticky;
    /* The site header is sticky too, 66px tall on every width (navbar.js);
       pinned at 0 the bar slid under it and the search box vanished. The
       same 65px the docs and API Contents bars use - one pixel of overlap
       rather than a hairline of page showing between the two. */
    top: 65px;
    z-index: 5;
    padding: 18px 0 14px;
    margin-bottom: 4px;
    /* The page ground, not --surface: the bar has to be opaque so questions do
       not show through as they scroll under it, and it has to be the SAME
       opaque colour as the page or it reads as a panel sitting on top. */
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--line);
}

.faq-search {
    position: relative;
    max-width: 420px;
}

.faq-search svg {
    position: absolute;
    left: 13px;
    top: 50%;
    margin-top: -8px;
    width: 16px;
    height: 16px;
    color: var(--ink-3);
    pointer-events: none;
}

.faq-search input {
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    font-size: var(--text-base);
    padding: 11px 14px 11px 38px;
    border-radius: var(--radius);
    color: var(--ink);
    border: 1px solid var(--line);
    background: var(--surface);
    transition: border-color var(--dur) var(--ease-out);
}

.faq-search input:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: var(--focus-ring);
}

.faq-search input::placeholder { color: var(--ink-3); }

.faq-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 13px;
}

.faq-cats button {
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    color: var(--ink-2);
    border: 1px solid var(--line);
    background: var(--surface);
    transition: border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

.faq-cats button:hover { border-color: var(--line-strong); color: var(--ink); }
.faq-cats button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.faq-cats button[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); }

.faq-count {
    margin: 12px 0 0;
    font-size: var(--text-sm);
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

/* ── Groups ───────────────────────────────────────────────────────────────
   A hairline label, not a boxed category card. */
.qa-group { margin-top: 42px; }
.qa-group[hidden] { display: none; }

.qa-group__title {
    margin: 0 0 4px;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
}

/* ── The accordion ──────────────────────────────────────────────────────── */
.qa { border-top: 1px solid var(--line); }
.qa[hidden] { display: none; }

.qa__q {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    font: inherit;
    text-align: left;
    cursor: pointer;
    color: var(--ink);
    background: none;
    border: 0;
    padding: 19px 2px 19px 0;
}

.qa__q:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

.qa__q h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.45;
}

.qa__chev {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--ink-3);
    margin-top: 2px;
    transition: transform var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

.qa__q:hover .qa__chev { color: var(--ink); }
.qa__q[aria-expanded="true"] .qa__chev { transform: rotate(180deg); color: var(--ink); }

/* 0fr -> 1fr resolves to the content's own height, so every answer eases
   correctly and none can be cut off.

   The resting state is OPEN, and only a page that has scripting collapses it.
   Without faq.js the buttons cannot toggle anything, so a closed-by-default
   accordion would leave a visitor with seventeen headings and no answers; this
   way the page is simply long instead. The .js class is set by theme.js from
   inside <head>, so the collapse lands on the first paint rather than after a
   flash of everything open.

   :not([aria-expanded="true"]) rather than [aria-expanded="false"]: the
   attribute is stamped on by faq.js, so before it runs there is nothing to
   match, and an unscripted page never claims a collapsed state it does not
   have. */
.qa__a {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.34s var(--ease-out);
}

.js .qa__q:not([aria-expanded="true"]) + .qa__a { grid-template-rows: 0fr; }

.qa__inner { overflow: hidden; }

.qa__a p {
    margin: 0 0 15px;
    padding-right: 40px;
    color: var(--ink-2);
    font-size: var(--text-base);
    line-height: 1.7;
}

.qa__a strong { color: var(--ink); }

.qa__a ul {
    margin: 0 0 15px;
    padding-left: 20px;
    color: var(--ink-2);
    font-size: var(--text-base);
    line-height: 1.7;
}

.qa__a li { margin-bottom: 6px; }

.qa__note {
    border-left: 2px solid var(--ink);
    padding: 2px 0 2px 15px;
    margin: 0 0 17px;
}

.qa__note p { margin: 0; color: var(--ink); font-size: 13.5px; }

.faq-empty {
    padding: 46px 0;
    margin: 0;
    color: var(--ink-3);
    font-size: var(--text-base);
    border-top: 1px solid var(--line);
}

.faq-empty[hidden] { display: none; }
.faq-empty b { color: var(--ink); }

/* ── Still have questions ─────────────────────────────────────────────────
   The Help Center's block, same markup and same rules. */
.contact {
    margin-top: 72px;
    padding-top: 36px;
    border-top: 1px solid var(--line);
}

.contact h2 {
    margin: 0 0 8px;
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.contact > p {
    margin: 0;
    color: var(--ink-2);
    font-size: 14.5px;
    line-height: 1.65;
    max-width: 58ch;
}

.channels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin: 22px 0 0;
}

.channel {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--ink);
    font-weight: 600;
    font-size: var(--text-base);
    text-decoration: none;
    transition: border-color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
}

.channel:hover {
    border-color: var(--ink);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.channel svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--ink-2);
}

.channel:hover svg { color: var(--ink); }

@media (max-width: 560px) {
    .container { padding: 40px 16px 64px; }
    .qa__a p { padding-right: 0; }
    .qa__q h3 { font-size: 14px; }
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.footer {
    background: var(--surface-sunken);
    color: var(--ink);
    padding: 40px 24px;
    border-top: 1px solid var(--line);
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 32px;
}

.footer-section h4 {
    font-size: var(--text-base);
    font-weight: 600;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ink);
}

.footer-link {
    color: var(--ink-2);
    text-decoration: none;
    font-size: 13px;
    margin-bottom: 8px;
    display: block;
    transition: color var(--dur) var(--ease-out);
}

.footer-link:hover { color: var(--ink); }

.footer-bottom {
    border-top: 1px solid var(--line);
    padding-top: 24px;
    text-align: center;
    color: var(--ink-3);
    font-size: 13px;
}

@media (max-width: 768px) {
    .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

@media (max-width: 480px) {
    .footer-grid { grid-template-columns: 1fr; }
}