/* #faq · questions (owner: S3; pass 7: SECTIONS). A typographic accordion on paper: numbers in mono (a CSS counter, so the build's FAQ structured
   data reads only the question), questions in IBM Plex Sans Hebrew 500, hairlines, answers in ink-2. Open / close is time-based
   (js/sections/faq.js: height + opacity, 300 ms open / 240 ms close on the house curve); without JS the native details element
   opens at once. Nothing scroll-linked: the headline pours in and the lead and the aside arrive (the page's one reveal). */

.faq {
  --s3-hair: rgba(20, 18, 16, .16);
  --s3-copper: var(--copper-t, #8A5129);   /* C's copper / ink-3 for small text (AA) */
  --s3-ink3: var(--ink-3t, #686056);
  position: relative; z-index: 2; padding: 14svh var(--gut) 14svh;
  display: grid; gap: 7svh;
}
.faq__head { display: grid; gap: 16px; align-content: start; min-width: 0; }
.faq__h {
  font-family: var(--display); font-weight: 900; font-stretch: 62.5%; font-synthesis: none;
  margin: 0; font-size: clamp(34px, 3px + 8.6vw, 40px); line-height: 1; color: var(--ink);
}
.faq__l { display: block; width: max-content; max-width: 100%; transform-origin: 50% 0; }
.faq__lead { font: 400 var(--fs-lead)/1.5 var(--text); color: var(--ink); max-width: 30ch; margin-top: 10px; --i: 2; }
.faq__aside { display: grid; gap: 16px; justify-items: start; margin-top: 18px; padding-top: 22px; border-top: 1px solid var(--s3-hair); max-width: 34rem; }
.faq__more { font: 400 var(--fs-body)/1.6 var(--text); color: var(--ink-2); max-width: 36ch; }
.faq__more .lnk { font-size: inherit; padding: 2px 0; position: relative; }
/* (QA-19) an inline link in running text: a 44 px tall hit area around it, nothing visible moves */
.faq__more .lnk::after { content: ""; position: absolute; inset: -11px -4px; }
.faq .lnk { color: var(--ink); }
/* the aside's button: the ink button's outline twin (a quieter second action) */
.faq .btn--line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
@media (hover: hover) and (pointer: fine) { .faq .btn--line:hover { background: var(--ink); color: var(--paper); } }
.faq .ph { white-space: normal; }
/* a review note for the client (a missing fact): hidden on the public page, boxed in review (?ph=1 → html.ph-review) */
.faq .ph-note { display: none; }
html.ph-review .faq .ph-note { display: inline; }

/* ---------- the list ---------- */
.faq__list { --qn: 42px; counter-reset: q; border-top: 1px solid var(--s3-hair); min-width: 0; }
.q { counter-increment: q; border-bottom: 1px solid var(--s3-hair); }
.q__s {
  list-style: none; cursor: pointer; position: relative;
  display: grid; grid-template-columns: var(--qn) minmax(0, 1fr) 22px; align-items: baseline; column-gap: 10px;
  min-height: 48px; padding: 17px 0 17px;
  font: 500 var(--fs-body)/1.45 var(--text); color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.q__s::-webkit-details-marker { display: none; }
.q__s::marker { content: ""; }
.q__s::before {
  content: counter(q, decimal-leading-zero); content: counter(q, decimal-leading-zero) / "";
  font: 400 var(--fs-xs)/1 var(--mono); letter-spacing: .02em; color: var(--s3-ink3);   /* (digits only) */
  transform: translateY(-1px); transition: color .3s var(--ease);
}
.q__t { min-width: 0; transition: color .3s var(--ease); }
.q__s:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }
/* the plus: two hairlines; the vertical one folds away when open */
.q__i { position: relative; align-self: center; justify-self: end; width: 14px; height: 14px; }
.q__i::before, .q__i::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: currentColor;
  transition: transform var(--t-ui) var(--ease-out), opacity var(--t-ui) var(--ease-out);
}
.q__i::after { transform: rotate(90deg); }
.q[open] .q__i::after { transform: rotate(90deg) scaleX(0); }
.q[open] .q__s::before { color: var(--s3-copper); }
@media (hover: hover) {
  .q__s:hover .q__t { color: var(--s3-copper); }
  .q__s:hover::before { color: var(--s3-copper); }
}

.q__a { overflow: hidden; }
.q__a p {
  padding-block: 0 24px; padding-inline: calc(var(--qn) + 10px) 32px;
  font: 400 var(--fs-body)/1.7 var(--text); color: var(--ink-2); max-width: 62ch;
}
.q__a b { color: var(--ink); font-weight: 600; }
.q__v { color: var(--ink); font-weight: 600; }   /* the verdict: the answer's first words */
/* (QA-19) a 44 px tall hit area: vertical padding on the inline link (it does not change the line), the underline kept on the
   text (content-box); a pseudo-element would be clipped by the answer's overflow in WebKit */
.q__a .lnk { font-size: inherit; padding: 11px 0; background-origin: content-box; background-clip: content-box; }
@media (max-width: 420px) {
  .faq__list { --qn: 34px; }
  .q__s { grid-template-columns: var(--qn) minmax(0, 1fr) 18px; }
  .q__a p { padding-inline-end: 6px; }
}


/* ---------- desktop: the head is a sticky column at the start (right), the list beside it ---------- */
@media (min-width: 900px) {
  .faq { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 6vw; align-items: start; padding-top: 18svh; }
  .faq__head { position: sticky; top: calc(var(--hdr) + 36px); }
  .faq__h { font-size: clamp(56px, 24px + 2.5vw, 72px); }
  .faq__list { --qn: 52px; }
  .q__s { padding: 22px 0; }
  .q__i { width: 16px; height: 16px; }
}

/* ---------- the headline (pass 7 · motion sweep plan 006): the page's drop (data-in="drop", css/c.css); the lead and the aside
   are the page's reveal (data-in). Reduced motion: the native toggle, nothing animates. ---------- */
html.rm .faq *, html.a11y-nomotion .faq * { animation: none !important; transition: none !important; }