/* FAQ · eight groups, built to scan (v7).
   Desktop: each group is a two-column spread. The numbered head and the group's photograph (an Ink navy
   duotone plate) hold their place in a sticky left column while the questions run down the right.
   Phones: head, a thin photo band, then the questions. Text and order untouched. */

body[data-page="faq"] {
  --hero: url("../img/photos/hero-faq.jpg"); --hero-pos: 40% 55%;
  --cta: url("../img/photos/hero-call.jpg"); --cta-pos: 50% 62%;
}

/* group photographs */
body[data-page="faq"] #how-it-works { --img: url("../img/photos/mac-topdown-dark-sm.jpg"); --img-pos: 40% 45% }
body[data-page="faq"] #eligibility { --img: url("../img/photos/aud-institutions-sm.jpg"); --img-pos: 50% 45% }
body[data-page="faq"] #fees-and-payment { --img: url("../img/photos/theme-gold-sm.jpg"); --img-pos: 45% 40% }
body[data-page="faq"] #measuring-performance { --img: url("../img/photos/aud-desks-sm.jpg"); --img-pos: 50% 58% }
body[data-page="faq"] #risk { --img: url("../img/photos/camp-risk-sm.jpg"); --img-pos: 50% 62% }
body[data-page="faq"] #security-and-control { --img: url("../img/photos/hero-security-sm.jpg"); --img-pos: 50% 50% }
body[data-page="faq"] #research-and-reporting { --img: url("../img/photos/hero-research-sm.jpg"); --img-pos: 50% 70% }
body[data-page="faq"] #getting-started-and-support { --img: url("../img/photos/morning-laptop-dawn-sm.jpg"); --img-pos: 50% 50% }

body[data-page="faq"] .machine { scroll-margin-top: 4.6rem; gap: 0; padding-block: clamp(2.4rem, 4.2vw, 3.8rem) }
body[data-page="faq"] .poster > section:nth-child(2) { padding-top: clamp(3.2rem, 6vw, 5.2rem) }
/* the last group keeps the standard section padding above the closing band */
body[data-page="faq"] .machine:has(+ section > .cta-band) { padding-bottom: clamp(3.2rem, 6vw, 5.5rem) }

/* the group head: Ink's numbered rule, then the plate */
body[data-page="faq"] .sh { margin-bottom: 0; row-gap: 0 }
body[data-page="faq"] .sh h2 { font-size: clamp(1.75rem, 2.7vw, 2.45rem); line-height: 1.02 }
body[data-page="faq"] .sh::after {
  content: ""; grid-column: 1 / -1; aspect-ratio: 5 / 2; margin-top: 1.2rem;
  border-radius: var(--radius);
  background-color: var(--navy);
  background-image: linear-gradient(rgba(20, 33, 58, .16), rgba(20, 33, 58, .16)), var(--img, none);
  background-repeat: no-repeat; background-size: cover; background-position: center, var(--img-pos, 50% 50%);
  background-blend-mode: normal, luminosity;
}

/* the questions */
body[data-page="faq"] .faq { max-width: none; margin-top: 1.2rem }
body[data-page="faq"] .faq-item summary { cursor: pointer; padding-block: 1.2rem; transition: color .15s ease }
body[data-page="faq"] .faq-item p { max-width: 44rem; padding-right: 1rem }

/* ── close: Home's band — the call stacked on the left, the footer straight after (v7.css closes the gaps) ── */
body[data-page="faq"] .cta-band {
  grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 2rem;
  min-height: clamp(440px, 60vh, 600px); align-content: center; margin-top: 0;
  background-image: linear-gradient(90deg, rgba(11, 19, 34, .94) 0%, rgba(11, 19, 34, .8) 40%, rgba(11, 19, 34, .3) 100%), var(--cta);
}
body[data-page="faq"] .cta-band h2 { font-size: clamp(2.5rem, 5.2vw, 4.4rem); margin-bottom: 1rem }
body[data-page="faq"] .cta-band p { font-size: 1.28rem; color: rgba(255, 255, 255, .86) }
@media (max-width: 640px) {
  body[data-page="faq"] .cta-band { min-height: 0; padding: 4.4rem 1rem; background-image: linear-gradient(90deg, rgba(11, 19, 34, .92), rgba(11, 19, 34, .74)), var(--cta) }
  body[data-page="faq"] .cta-band h2 { font-size: clamp(2rem, 9vw, 2.4rem); text-wrap: balance }   /* one line at 390 */
  body[data-page="faq"] .cta-band p { font-size: 1.12rem }
}

@media (min-width: 600px) and (max-width: 959px) {
  body[data-page="faq"] .sh::after { aspect-ratio: 3 / 1 }
}
@media (min-width: 960px) {
  body[data-page="faq"] .machine {
    grid-template-columns: minmax(0, 4.3fr) minmax(0, 7.7fr); column-gap: clamp(3rem, 6vw, 6.5rem); align-items: start;
  }
  body[data-page="faq"] .sh { position: sticky; top: 7.6rem }
  body[data-page="faq"] .sh::after { aspect-ratio: 4 / 3; margin-top: 1.6rem }
  body[data-page="faq"] .faq { margin-top: 0; border-top: 2px solid var(--fg) }
  body[data-page="faq"] .faq-item summary { padding-block: 1.3rem }
}
@media (min-width: 1101px) {
  body[data-page="faq"] .sh { top: 6.4rem }
}