/* ============================================================================
   Questions (public) — search, topic chips, and smooth accordions.
   ========================================================================== */
.f-hero { padding-top: clamp(120px, 14vw, 170px); padding-bottom: clamp(20px, 4vw, 40px); }
.f-hero .display { max-width: 12ch; }
.f-hero .lede { margin-top: 20px; }
.fsearch { position: relative; display: block; width: min(100%, 560px); margin-top: 26px; }
.fsearch svg { position: absolute; left: 18px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.fsearch input {
  width: 100%; height: 56px; border-radius: 999px; border: 1px solid var(--glass-edge); background: rgba(255,255,255,.06); color: var(--ink);
  font: inherit; font-size: 16px; padding: 0 20px 0 48px; outline: none; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  transition: border-color .3s, box-shadow .4s;
}
.fsearch input:focus { border-color: var(--accent-line); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); }
.fsearch input::placeholder { color: var(--ink-3); }
.topics { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.topics a { font-size: 13px; font-weight: 650; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--hair); color: var(--ink-2); text-decoration: none; transition: all .3s; }
.topics a:hover { color: var(--ink); border-color: var(--accent-line); }
.fgroup { display: grid; gap: 10px; scroll-margin-top: 110px; }
.fgroup + .fgroup { margin-top: clamp(36px, 5vw, 56px); }
.fgroup h2 { margin: 0 0 6px; font-family: var(--font-serif); font-weight: 500; font-size: var(--t-34); letter-spacing: -.015em; display: flex; gap: 12px; align-items: center; }
.fgroup h2 i { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--accent); background: var(--accent-soft); }
.fgroup h2 i svg { width: 19px; height: 19px; }
.qa { border-radius: 20px; border: 1px solid var(--hair); background: rgba(255,255,255,.03); transition: border-color .3s, background .3s; scroll-margin-top: 120px; }
.qa.is-open { border-color: var(--accent-line); background: rgba(255,255,255,.055); }
.qa summary { list-style: none; cursor: pointer; padding: 18px 22px; display: flex; justify-content: space-between; gap: 16px; align-items: center; font-weight: 650; font-size: 16px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary .pm { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; border: 1px solid var(--hair); transition: transform .5s var(--ease-spring), background .3s; }
.qa summary .pm svg { width: 14px; height: 14px; }
.qa.is-open summary .pm { transform: rotate(45deg); background: var(--accent-soft); }
.qa__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease-out); }
.qa__a > div { overflow: hidden; }
.qa__a p { margin: 0; padding: 0 22px 20px; color: var(--ink-2); max-width: 72ch; }
.qa__a p + p { margin-top: -8px; }
.qa__a a { color: var(--accent); }
.qa.is-open .qa__a { grid-template-rows: 1fr; }
.qa[hidden], .fgroup[hidden] { display: none; }
.fempty { color: var(--ink-3); padding: 20px 0; }
.still { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; padding: 26px; margin-top: 40px; }
.still p { margin: 0; color: var(--ink-2); }