/* The homepage's FAQ (index.html .faq rules), last on the brands page, with its Brands questions only, so the
   Creators / Brands toggle is left out and the title takes its spacing. The homepage's tokens are set on the
   section, as in services.css; the reveal (services.js) and the accordion (faq.js) are the homepage's. */
.faq {
  --font-display: 'Archivo Black', 'Arial Black', 'Archivo', sans-serif;
  --w-display: 300;
  --w-text: 400;
  --fs-h2: clamp(24px, 4.667vw, 56px);
  --fs-body-lg: clamp(18px, 2vw, 24px);
  --fs-body: clamp(16px, 1.667vw, 20px);
  --lh-body-lg: 1.33;
  --lh-body: 1.45;
  --ls-h2: -.025em;
  --ls-body-lg: -.03em;
  --ls-body: -.02em;
  --ink: #24363f;
  --ink-64: color-mix(in srgb, var(--ink) 64%, transparent);
  --ink-24: color-mix(in srgb, var(--ink) 24%, transparent);
  --pad-x: max(16px, 2.7211vw);
  --pad-y: max(16px, 2.1769vw);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --in-y: 12px; --in-blur: 8px;
  --out-y: 12px; --out-blur: 8px;
  position: relative;
  z-index: 25;                               /* in the page flow over the fixed hero, like the other sections */
  background: #fff;
  color: var(--ink);
  font-family: 'Archivo', 'Switzer Fallback', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-weight: var(--w-display);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}
:where(.faq) .t-body { font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); font-weight: var(--w-display); text-wrap: pretty; }
:where(.faq) .is-demoted { color: var(--ink-64); }

/* the reveal contract, as on the services */
.faq [data-reveal] {
  opacity: calc(var(--in, 1) * (1 - var(--out, 0)));
  translate: 0 calc((1 - var(--in, 1)) * var(--in-y) - var(--out, 0) * var(--out-y));
}
.faq [data-reveal].is-anim { filter: blur(calc((1 - var(--in, 1)) * var(--in-blur) + var(--out, 0) * var(--out-blur))); }
.faq [data-reveal].is-hidden { visibility: hidden; }

/* ── faq: centred title, narrow rows (Osmo pattern, one step larger) ── */
.faq{ padding:calc(var(--pad-y) * 4) var(--pad-x) }
.faq__title{ margin:0 auto clamp(40px, 5vw, 72px); text-align:center; font-family:var(--font-display); font-weight:400; font-size:calc(var(--fs-h2) * 1.3); line-height:1.02; letter-spacing:var(--ls-h2); max-width:12ch }
.faq__wrap{ max-width:820px; margin:0 auto }
.faq__list{ list-style:none; margin:0; padding:0; display:none }
.faq__list.is-active{ display:block }
.faq__item{ border-top:1px solid var(--ink-24) }
.faq__item:last-child{ border-bottom:1px solid var(--ink-24) }
.faq__q{
  display:grid; grid-template-columns:minmax(0, 1fr) auto; column-gap:24px; align-items:center;
  width:100%; padding:24px 0; text-align:left;
  background:none; border:0; color:inherit; font:inherit; cursor:pointer; touch-action:manipulation;
}
.faq__text{ font-size:var(--fs-body-lg); line-height:var(--lh-body-lg); letter-spacing:var(--ls-body-lg); font-weight:var(--w-text) }
.faq__icon{ position:relative; width:18px; height:18px; display:block }
.faq__icon span{ position:absolute; inset:50% auto auto 0; width:100%; height:2px; background:currentColor; translate:0 -50%; transition:transform .3s var(--ease-expo) }
.faq__icon span:last-child{ transform:rotate(90deg) }
.faq__q[aria-expanded="true"] .faq__icon span:last-child{ transform:rotate(0deg) }
.faq__panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease-expo) }
.faq__panel.is-open{ grid-template-rows:1fr }
.faq__inner{ overflow:hidden; min-height:0 }
.faq__a{ margin:0; max-width:60ch; padding:0 48px 24px 0 }
.faq__a a{ text-decoration:underline; text-underline-offset:.15em }   /* this page's styles.css strips link underlines */
@media (hover: hover) and (pointer: fine){
  .faq__q:hover .faq__text{ color:var(--ink-64) }
}
@media (prefers-reduced-motion: reduce){
  .faq__panel, .faq__icon span{ transition:none }
  .faq [data-reveal]{ translate:none }
  .faq [data-reveal].is-anim{ filter:none }
}