/* ============================================================
   faq-accordion — "Frequently asked questions"
   Figma: Windscreen desktop 1407:65642, tablet 1407:75103,
   mobile 1407:69208.

   A centred 1022 column: the heading, then navy question bars
   (<details>/<summary>) 20 apart. An open bar squares its bottom
   corners and the answer panel sits under it, overlapping by 2.
   The bars' 2px border is the same gradient as the fill, so it's
   invisible and isn't built. The template owns the vertical padding.
   ============================================================ */

.faq-accordion {
    padding-left: var(--space-gutter);
    padding-right: var(--space-gutter);
}
.faq-accordion__inner {
    max-width: 1022px;
    margin: 0 auto;
}

/* ── Heading (centred) ────────────────────────────────────── */
.faq-accordion__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 40px;
    text-align: center;
}
.faq-accordion__head .eyebrow { margin: 0; }
.faq-accordion__head--left {
    align-items: flex-start;
    text-align: left;
}
.faq-accordion__head,
.faq-accordion__items { scroll-margin-top: 24px; }   /* the jump tiles land clear of the viewport edge */

/* H2 is Title Case in the Figma ("TITLE" text case) */
.faq-accordion__heading {
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h2);
    line-height: var(--leading-h2);
    color: var(--color-text);
    text-transform: capitalize;
}

/* ── Items ────────────────────────────────────────────────── */
.faq-accordion__items {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.faq-accordion__question {
    position: relative;
    z-index: 1;               /* over the answer panel's 2px overlap */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 24px 40px;
    border-radius: 12px;
    background: var(--gradient-dark-reverse);   /* "gradient 1" */
    color: var(--color-text-inverse);
    cursor: pointer;
    list-style: none;
}
.faq-accordion__question::-webkit-details-marker { display: none; }
.faq-accordion__question:focus-visible {
    outline: none;
    box-shadow: var(--button-focus-ring);
}
.faq-accordion__item[open] > .faq-accordion__question { border-radius: 12px 12px 0 0; }

.faq-accordion__question-text {
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h3);
    line-height: var(--leading-h3);
}

/* The frame's arrow points down; open turns it up (not designed, flagged) */
.faq-accordion__arrow {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    transform: rotate(90deg);
    transition: transform var(--transition-base);
}
.faq-accordion__item[open] > .faq-accordion__question .faq-accordion__arrow { transform: rotate(-90deg); }
.faq-accordion__item.is-closing > .faq-accordion__question .faq-accordion__arrow { transform: rotate(90deg); }

.faq-accordion__answer {
    margin-top: -2px;
    padding: 24px 40px;
    border-radius: 0 0 12px 12px;
    background: var(--color-surface-answer);
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    color: var(--color-text);
}
.faq-accordion__answer > * { margin: 0; }
.faq-accordion__answer > * + * { margin-top: 12px; }
.faq-accordion__answer ul,
.faq-accordion__answer ol { padding-left: 24px; }
.faq-accordion__answer a {
    color: inherit;
    text-decoration: underline;
}

/* ── Tablet (1407:75103) and mobile (1407:69208) ──────────── */
@media (max-width: 1024px) {
    .faq-accordion__head .eyebrow {
        font-size: var(--text-mobile-overline);
        line-height: var(--leading-mobile-overline);
    }
    .faq-accordion__heading {
        font-size: var(--text-mobile-h2);
        line-height: var(--leading-mobile-h2);
    }
    .faq-accordion__question,
    .faq-accordion__answer { padding: 20px; }
    .faq-accordion__question-text {
        font-size: var(--text-mobile-h3);
        line-height: var(--leading-mobile-h3);
    }
    .faq-accordion__answer {   /* Mobile/Body, set in Futura */
        font-family: var(--font-heading);
        font-size: var(--text-mobile-body);
        line-height: var(--leading-mobile-body);
    }
}
@media (max-width: 767px) {
    .faq-accordion__question { gap: 8px; }   /* the mobile frame's question runs up to the arrow */
    .faq-accordion__answer {   /* 14px in the mobile frame, no text style (flagged) */
        font-size: 14px;
        line-height: 20px;
    }
}

/* ============================================================
   AncillaryHUB skin (class on the <section>): T7 1331:138156,
   mobile 1331:137676. Solid indigo bars (the 2px stroke is the
   same colour, so not built) and pale-indigo answers.
   ============================================================ */
.faq-accordion--hub .faq-accordion__question { background: var(--color-hub); }
.faq-accordion--hub .faq-accordion__answer { background: var(--color-surface-hub); }

/* ============================================================
   FAQs page topic groups: T15 desktop 1331:155550, mobile
   1331:155745. The heading is left (heading_align), 24 above the
   bars; the answer panel is 16 / 40. Group 2's bars are 20 / 40 in
   the frame and the others 24 / 40: built 24 / 40 throughout (flagged).
   ============================================================ */
.faq-accordion--topic .faq-accordion__head { margin-bottom: 24px; }
.faq-accordion--topic .faq-accordion__answer { padding: 16px 40px; }
@media (max-width: 1024px) {
    .faq-accordion--topic .faq-accordion__question { padding: 16px 20px; }
    .faq-accordion--topic .faq-accordion__answer { padding: 20px; }
    .faq-accordion--topic .faq-accordion__question-text {
        font-size: var(--text-mobile-h4);
        line-height: var(--leading-mobile-h4);
    }
    .faq-accordion--topic .faq-accordion__answer {   /* Body on both breakpoints */
        font-family: var(--font-body);
        font-size: var(--text-body);
        line-height: var(--leading-body);
    }
}
@media (max-width: 767px) {
    .faq-accordion--topic .faq-accordion__items { gap: 16px; }
    .faq-accordion--topic .faq-accordion__answer {
        font-size: var(--text-body);
        line-height: var(--leading-body);
    }
}

/* ============================================================
   Curved background: T8 desktop 1407:93933, mobile 1407:92554.
   A pale-teal arc behind the section (the Mask group): it meets the
   left edge 32 down, peaks 330 in and falls to 250 at the right.
   The colour is the nearest declared one, Surface Tint (flagged);
   the mobile arc is scaled, not measured.
   ============================================================ */
.faq-accordion--curved {
    position: relative;
    isolation: isolate;
}
.faq-accordion--curved::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 8px;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--color-surface-tint);
    /* One tall ellipse, its apex 24% across (348 of 1440): it meets the left edge 24 below the apex and the right
       edge 242 below it, and its sides and foot lie beyond the box, so only the arc shows */
    clip-path: ellipse(200% 3250px at 36% 3250px);
}

@media (max-width: 1024px) {
    .faq-accordion--curved::before { clip-path: ellipse(285% 3250px at 36% 3250px); }
}
@media (max-width: 767px) {
    .faq-accordion--curved::before { clip-path: ellipse(350% 1612px at 24.2% 1612px); top: 0px; }   /* half the drops */
}