/* FAQ page only. Shared tokens and components live in base.css. Page head and CTA copy the Pricing/Home patterns. */

/* ---------- 1. Page head + search ---------- */
.page-head { padding-block: var(--s5) var(--section); }
.page-head__grid { display: grid; gap: var(--s4); }
.page-head__text h1 { margin-top: 0; max-width: 16ch; }
.page-head__body { display: grid; gap: var(--s4); }
.search { display: grid; gap: var(--s2); padding-top: var(--s4); border-top: 1px solid var(--line); }
.search__label { margin-bottom: 0; }
.search__field { position: relative; }
.search__input {
  width: 100%; height: var(--btn-h); padding: 0 52px 0 var(--s2);
  font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color 240ms var(--ease);
  -webkit-appearance: none; appearance: none;
}
.search__input::placeholder { color: var(--muted-light); }
.search__input:hover { border-color: rgba(28,27,26,0.35); }
.search__input:focus { border-color: var(--brass); outline: none; }
.search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.search__clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: var(--radius);
}
.search__clear::before, .search__clear::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: var(--brass); }
.search__clear::before { transform: translate(-50%, -50%) rotate(45deg); }
.search__clear::after { transform: translate(-50%, -50%) rotate(-45deg); }
.search__clear:hover { background: var(--brass-soft); }
.search__count { min-height: 1.6em; }
@media (min-width: 1024px) {
  .page-head { padding-block: var(--s7) var(--section); }
  .page-head__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: var(--s7); align-items: end; }
}

/* ---------- 2. Groups ---------- */
.group { display: grid; gap: var(--s4); }
.group + .group { margin-top: var(--section); }
.group__head { display: grid; }
.group__head .eyebrow { margin-bottom: var(--s2); }
.group[hidden] { display: none; }
.groups__empty { margin-top: var(--s4); }
.groups__empty .text-link { display: inline; }

.faq__list { display: grid; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item[hidden] { display: none; }
.faq__h { font: inherit; }
.faq__q {
  width: 100%; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: var(--s3);
  padding-block: var(--s3); text-align: left;
  font-family: var(--font-display); font-size: var(--h3); line-height: 1.2; font-weight: 500; letter-spacing: -0.01em;
  transition: color 240ms var(--ease);
}
.faq__q:hover { color: var(--brass); }
.faq__icon { width: 14px; height: 14px; position: relative; flex: none; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; background: var(--brass); left: 50%; top: 50%; transform: translate(-50%, -50%); transition: transform 300ms var(--ease); }
.faq__icon::before { width: 14px; height: 1.5px; }
.faq__icon::after { width: 1.5px; height: 14px; }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 420ms var(--ease); }
.faq__a > div { overflow: hidden; }
.faq__a p { padding-bottom: var(--s3); max-width: 62ch; color: var(--muted); }
.faq__a a { border-bottom: 1px solid var(--brass); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__q mark { background: var(--brass-soft); color: inherit; }

@media (min-width: 1024px) {
  .group { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s7); align-items: start; }
  .group__head { position: sticky; top: calc(var(--header-h) + var(--s3)); }
}

/* ---------- 3. Final CTA (same as Home) ---------- */
.cta__inner { display: grid; gap: var(--s4); justify-items: center; text-align: center; }
.cta__inner .eyebrow { margin-bottom: 0; }
.cta__inner .btn-row { width: 100%; }
.cta__title { max-width: 18ch; }
.cta__contact a { color: var(--ivory); border-bottom: 1px solid var(--brass-2); }