/* 07 · faq: five calm answers. The toggle is the logo: open a question and the grid pops its pixel off. */
[data-part="faq"] .fq-side { grid-column: 1 / span 4; align-self: start; display: grid; gap: 22px; padding-top: 14px; }
[data-part="faq"] .fq-more { font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 20em; }
html[lang="en"] [data-part="faq"] .fq-more { line-height: 1.45; }
[data-part="faq"] .fq-more a { color: var(--ink); }
[data-part="faq"] .fq-list { grid-column: 6 / -1; border-bottom: 1px solid rgba(42, 30, 23, .16); }

[data-part="faq"] .fq { border-top: 1px solid rgba(42, 30, 23, .16); }
[data-part="faq"] summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0; cursor: pointer; list-style: none; border-radius: 4px; -webkit-tap-highlight-color: transparent; }
[data-part="faq"] summary::-webkit-details-marker { display: none; }
[data-part="faq"] summary:focus-visible { outline-offset: 2px; }
[data-part="faq"] .fq-q { font: 600 clamp(22px, 2.1vw, 31px)/1.45 var(--f-ar); }
html[lang="en"] [data-part="faq"] .fq-q { font: 600 clamp(22px, 2vw, 30px)/1.2 var(--f-en); letter-spacing: -.018em; }

/* the marker: the fused grid; its pixel is home (in ink) while the question sleeps, off (in teal) when it's open */
[data-part="faq"] .fq-mk { width: 32px; height: 32px; flex: none; overflow: visible; fill: var(--ink); }
[data-part="faq"] .mk-g { transform-box: view-box; transform-origin: 47px 53px; transition: transform .3s var(--ease); }
[data-part="faq"] .mk-p { transform-box: fill-box; transform-origin: 50% 50%; fill: var(--ink); }
[data-part="faq"] .fq[open] .mk-x { transform: translateX(6px); }
[data-part="faq"] .fq[open] .mk-y { transform: translateY(-6px); }
[data-part="faq"] .fq[open] .mk-p { fill: var(--wadi); }
/* the page's one pixel is in another part (PX.pixel): the open marker's pixel sleeps at home, in ink */
[data-part="faq"].fq-gone .fq[open] .mk-x, [data-part="faq"].fq-gone .fq[open] .mk-y { transform: none; }
[data-part="faq"].fq-gone .fq[open] .mk-p { fill: var(--ink); }
/* hovering a sleeping question: the grid draws a breath, ready to pop */
@media (hover: hover) { [data-part="faq"] .fq:not([open]) summary:hover .mk-g { transform: scale(1.05); } }

[data-part="faq"] .fq-a p { padding: 0 0 30px; font-size: clamp(19px, 1.5vw, 22px); line-height: 1.7; max-width: 30em; color: var(--ink-2); }
html[lang="en"] [data-part="faq"] .fq-a p { line-height: 1.5; }
[data-part="faq"] .fq-a a { color: var(--ink); }

@media (max-width: 899px) {
  [data-part="faq"] .fq-side, [data-part="faq"] .fq-list { grid-column: 1 / -1; }
  [data-part="faq"] .fq-side { gap: 14px; margin-bottom: 40px; }
  [data-part="faq"] summary { padding: 22px 0; gap: 18px; }
  [data-part="faq"] .fq-mk { width: 28px; height: 28px; }
  [data-part="faq"] .fq-a p { padding-bottom: 26px; }
}