/* page 01 · #faq · "The questionnaire" (lane f01, round 2)
   A due-diligence questionnaire, one page per question, landing on the flat paper desk (var(--paper-in), the ground
   #question ends on and #next flows on). The section heading is ONE element (.f-title) lying over the pile: the first
   page's title in its cover band, then the running head in every later page's band. js/p01-faq.js moves it. */
#faq {
  --f-form: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-ink: #0f1714; --f-rule: #18201d; --f-mut: #56615c; --f-band: #edf0ef; --f-line: #d9dfdb;
  --st: calc(5 * var(--sv)); --sw: clamp(760px, 68vw, 1020px); --sh: calc(calc(107 * var(--sv)) - var(--st));
  --px: clamp(40px, 4vw, 60px); --py: clamp(26px, calc(4.4 * var(--sv)), 46px); --nb: 46px;
  --qf: clamp(44px, 3.9vw, 60px); --af: clamp(20px, 1.45vw, 22px); --tf: clamp(40px, 3.3vw, 50px); --hf: 17px;
}
#faq .gnd .f-g { background: var(--paper-in); }
#faq .f-art, #faq .f-pile { position: absolute; inset: 0; }

/* the heading: title on page 1, running head after */
#faq .f-title {
  position: absolute; left: 0; top: 0; z-index: 10; margin: 0;
  font: 700 var(--tf)/1.05 var(--f-form); letter-spacing: -.025em; color: var(--f-ink);
  white-space: nowrap; transform-origin: 0 0;
}

/* a page: white paper, its shadow two layers whose opacity follows the lift */
#faq .f-sheet { position: absolute; top: var(--st); left: calc(50% - var(--sw) / 2); width: var(--sw); transform-origin: 50% 24%; }
#faq .f-sheet.is-off { visibility: hidden; }
#faq .f-sheet.is-under .f-in { visibility: hidden; }
#faq .f-sh { position: absolute; inset: 0; pointer-events: none; }
#faq .f-sh-n { box-shadow: 0 1px 1px rgba(7, 16, 14, .09), 0 3px 10px -2px rgba(7, 16, 14, .11); }
#faq .f-sh-f { box-shadow: 0 34px 70px -16px rgba(7, 16, 14, .30), 0 14px 28px -10px rgba(7, 16, 14, .14); opacity: 0; }
#faq .f-doc {
  position: relative; min-height: var(--sh); display: flex; flex-direction: column;
  background: #fff; font-family: var(--f-form); color: var(--f-ink);
}
#faq .f-in { flex: 1; display: flex; flex-direction: column; }

/* the form's header band */
#faq .f-band {
  display: flex; align-items: center; gap: 14px; box-sizing: border-box; height: 64px; padding: 0 var(--px);
  background: var(--f-band); border-bottom: 2px solid var(--f-rule);
}
#faq .f-band--cover { display: grid; grid-template-columns: auto 1fr; height: auto; padding: 20px var(--px) 26px; row-gap: clamp(22px, calc(3.4 * var(--sv)), 34px); }
#faq .f-band--cover .f-ref { justify-self: end; }
#faq .f-slot-t { grid-column: 1 / -1; height: calc(var(--tf) * 1.05); }
#faq .f-slot-h { flex: 1; height: calc(var(--hf) * 1.05); }
#faq .f-logo { width: 30px; height: 30px; background: #ccd3cf; flex: none; }
#faq .f-ref, #faq .f-lab, #faq .f-foot { font: 600 12.5px/1 var(--f-form); letter-spacing: .13em; text-transform: uppercase; color: var(--f-mut); }
#faq .f-ref { display: flex; gap: 24px; margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; color: #2a3430; }
#faq .f-ref b { font-weight: 600; color: #8b9590; }

/* the question */
#faq .f-body { flex: 1; display: flex; flex-direction: column; padding: var(--py) var(--px) 0; }
#faq .f-q { display: grid; grid-template-columns: var(--nb) 1fr; column-gap: clamp(16px, 1.6vw, 24px); align-items: start; }
#faq .f-n {
  box-sizing: border-box; width: var(--nb); height: var(--nb); display: grid; place-items: center;
  border: 2px solid var(--f-rule); font: 700 calc(var(--nb) * .38)/1 var(--f-mono); color: var(--f-ink);
  margin-top: max(0px, calc((var(--qf) * 1.08 - var(--nb)) / 2));
}
#faq .f-qt { margin: 0; font: 700 var(--qf)/1.08 var(--f-form); letter-spacing: -.022em; color: var(--f-ink); text-wrap: balance; }
#faq .f-qt strong { font-weight: inherit; }

/* the answer: its label row (tick boxes on a yes/no question) and its ruled box */
#faq .f-ans { flex: 1; display: flex; flex-direction: column; margin-top: clamp(22px, calc(3.6 * var(--sv)), 40px); }
#faq .f-ar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
#faq .f-yn { display: flex; gap: 26px; }
#faq .f-yn > span { display: inline-flex; align-items: center; gap: 9px; font: 500 15px/1 var(--f-form); color: #24302b; }
#faq .f-bx { position: relative; box-sizing: border-box; width: 20px; height: 20px; border: 1.5px solid var(--f-rule); flex: none; }
#faq .f-tick { position: absolute; left: -2px; top: -8px; width: 27px; height: 27px; opacity: 0; transform-origin: 30% 70%; overflow: visible; }
#faq .f-tick path { fill: none; stroke: var(--f-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
#faq .f-box {
  --lh: 1.7em; flex: 1; box-sizing: border-box; font-size: var(--af);
  border: 1.5px solid var(--f-rule); padding: .5em 1.05em;
  background-color: #fff;
  background-image: linear-gradient(to bottom, transparent calc(var(--lh) - 1px), var(--f-line) calc(var(--lh) - 1px));
  background-size: 100% var(--lh); background-position: 0 .3em;
}
#faq .f-a { margin: 0; font: 400 1em/var(--lh) var(--f-form); color: var(--f-ink); }
#faq .f-a > span { opacity: .22; }

/* the foot of the page */
#faq .f-foot {
  flex: none; display: flex; align-items: center; justify-content: space-between; height: 58px;
  margin: clamp(18px, calc(3 * var(--sv)), 30px) var(--px) 0; border-top: 1px solid var(--f-rule);
}

/* page 2: two columns, the question tall at left, the answer beside it */
#faq .p2 .f-body { display: grid; grid-template-columns: .94fr 1.06fr; column-gap: clamp(32px, 3.6vw, 60px); }
#faq .p2 .f-q { grid-template-columns: 1fr; row-gap: 22px; align-content: start; }
#faq .p2 .f-n { margin-top: 0; }
#faq .p2 .f-ans { margin-top: 0; padding-top: calc(var(--nb) + 22px); }

/* page 3: the question across the page, the answer box beside a column of its label and tick boxes */
#faq .p3 .f-ans { display: grid; grid-template-columns: clamp(150px, 14vw, 210px) 1fr; column-gap: clamp(20px, 2vw, 32px); }
#faq .p3 .f-ar { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 20px; margin: 0; padding-top: .45em; }
#faq .p3 .f-yn { flex-direction: column; gap: 14px; }

#faq .is-near .f-pile, #faq .is-near .f-sheet, #faq .is-near .f-title { will-change: transform, opacity; }

/* phone: one page per screen, full width, the sheet's own margins off-screen, the answer at 18 px */
@media (max-width: 899px) {
  #faq {
    --st: calc(2.4 * var(--sv)); --sw: calc(100vw + 20px); --sh: calc(calc(101 * var(--sv)) - var(--st)); --px: 26px; --py: 20px; --nb: 34px;
    --qf: clamp(24px, 7.2vw, 30px); --af: 18px; --tf: clamp(26px, 7.8vw, 31px); --hf: 15px;
  }
  #faq .f-band { height: 54px; gap: 12px; }
  #faq .f-band--cover { height: auto; padding: 14px var(--px) 16px; row-gap: 14px; }
  #faq .f-logo { width: 24px; height: 24px; }
  #faq .f-rd { display: none; }
  #faq .f-n { border-width: 1.5px; }
  #faq .f-ans { margin-top: 20px; }
  #faq .f-box { padding: .45em .8em; }
  #faq .f-foot { height: 50px; margin-top: 18px; }
  #faq .p2 .f-body { display: flex; }
  #faq .p2 .f-q { grid-template-columns: var(--nb) 1fr; row-gap: 0; }
  #faq .p2 .f-n { margin-top: max(0px, calc((var(--qf) * 1.08 - var(--nb)) / 2)); }
  #faq .p2 .f-ans { margin-top: 20px; padding-top: 0; }
  #faq .p3 .f-q { grid-template-columns: 1fr; row-gap: 12px; }
  #faq .p3 .f-n { margin-top: 0; }
  #faq .p3 .f-ans { grid-template-columns: 68px 1fr; column-gap: 12px; }
  #faq .p3 .f-ar { gap: 16px; }
  #faq .p3 .f-lab { letter-spacing: .08em; }
  #faq .p3 .f-yn { gap: 12px; }
}