/* 16 Questions, on band-soft. Centred title like its neighbours (price, end); two balanced columns of eight on a
   laptop, one list on a phone. Each question carries one icon so the eye can scan; answers are short and indented
   under the text. The first answer ends with the hero's picture (js/16-faq.js copies it, css/01-hero.css styles it):
   here it sits straight on the band, white boxes, no panel. */
.fq .hd { max-width: 980px; }
.fq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s7); max-width: 1120px; margin: var(--s6) auto 0; align-items: start; }
.fq-col { border-top: 1px solid var(--line); }
.fq .faq summary { display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 14px 44px 14px 0; line-height: 1.3; text-wrap: balance; }
.fq .faq summary .ico { width: 22px; height: 22px; flex: none; color: var(--green-3); }
.fq .faq summary::after { right: 8px; }
.fq .faq details p { margin: -4px 0 22px; padding-left: 36px; padding-right: 20px; max-width: 34em; line-height: 1.5; }
.fq .faq details[open] summary { color: var(--green); }
.js .fq .faq details[open] p { animation: fq-in .4s var(--ease) both; }
.fq .faq .fq-apps p { margin-bottom: 18px; }
.fq .fq-fig { max-width: 560px; margin: 0 0 26px 36px; padding: 0; border-radius: 0; background: none; overflow: visible; }
/* Here someone opened the answer to read it: the picture builds in about a second, not the sheet's two */
.fq .fq-fig.go .h01x-row > :nth-child(2) { transition-delay: .12s; } .fq .fq-fig.go .h01x-row > :nth-child(3) { transition-delay: .2s; }
.fq .fq-fig.go .h01x-row > :nth-child(4) { transition-delay: .32s; } .fq .fq-fig.go .h01x-row > :nth-child(5) { transition-delay: .4s; }
.fq .fq-fig.go .h01x-tools li { transition-delay: .52s; }
.fq .fq-fig.go .h01x-tools li:nth-child(2) { transition-delay: .56s; } .fq .fq-fig.go .h01x-tools li:nth-child(3) { transition-delay: .6s; }
.fq .fq-fig.go .h01x-tools li:nth-child(4) { transition-delay: .64s; } .fq .fq-fig.go .h01x-tools li:nth-child(5) { transition-delay: .68s; }
.fq .fq-fig.go .h01x-tools li:nth-child(6) { transition-delay: .72s; }
@keyframes fq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (max-width: 899px) {
  .fq-grid { grid-template-columns: minmax(0, 1fr); max-width: 680px; }
  .fq-col + .fq-col { border-top: 0; }
}
@media (max-width: 719px) {
  .fq-grid { margin-top: var(--s5); }
  .fq .faq summary { min-height: 64px; gap: 12px; font-size: 18px; padding-right: 40px; }
  .fq .faq summary .ico { width: 20px; height: 20px; }
  .fq .faq details p { padding-left: 32px; padding-right: 0; font-size: 17px; }
  .fq .fq-fig { margin: 0 0 24px 32px; }
}
@media (prefers-reduced-motion: reduce) { .js .fq .faq details[open] p { animation: none; } }