/* LWN Pro — FAQ page: sticky topic sidebar + categorized accordion */

.fq { background: #FFFFFF; container-type: inline-size; font-family: Inter, system-ui, sans-serif; color: #17181A; }

.fq__head { border-bottom: 1px solid #E4E6E8; }
.fq__headin { max-width: 1140px; margin: 0 auto; padding: 72px 40px 48px; }
.fq__kicker { display: flex; align-items: center; gap: 9px; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: #A62A6D; margin: 0 0 20px; }
.fq__h1 { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 50px; line-height: 1.05; letter-spacing: -0.032em; margin: 0 0 16px; text-wrap: balance; }
.fq__lead { font-size: 19px; line-height: 1.5; color: #53565B; margin: 0; max-width: 48ch; }

.fq__in { max-width: 1140px; margin: 0 auto; padding: 56px 40px 96px; display: grid; grid-template-columns: 264px 1fr; gap: 64px; align-items: start; }

.fq__side { position: sticky; top: 32px; }
.fq__sh { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: #8E9196; margin: 0 0 14px; }
.fq__nav { list-style: none; margin: 0 0 34px; padding: 0; display: flex; flex-direction: column; }
.fq__navl { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid #EFF0F1; font-size: 14.5px; color: #53565B; }
.fq__navl:hover { color: #A62A6D; }
.fq__navl--on { color: #A62A6D; font-weight: 500; }
.fq__count { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #A9ACB1; }

.fq__help { background: #FDF2F8; border: 1px solid #EED8E6; padding: 20px; }
.fq__helph { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 15.5px; margin: 0 0 6px; }
.fq__helpp { font-size: 13.5px; line-height: 1.55; color: #6E7176; margin: 0 0 14px; }
.fq__helpa { display: inline-flex; align-items: center; gap: 7px; font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 14px; color: #A62A6D; }

.fq__cat { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 24px; letter-spacing: -0.02em; margin: 40px 0 6px; }
.fq__cat:first-child { margin-top: 0; }
.fq__catn { font-size: 13.5px; color: #8E9196; margin: 0 0 8px; }

.fq__list { border-top: 1px solid #E4E6E8; }
.fq__item { border-bottom: 1px solid #E4E6E8; }
.fq__q { display: flex; align-items: flex-start; gap: 16px; padding: 22px 4px 22px 0; cursor: pointer; list-style: none; font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 17px; line-height: 1.4; letter-spacing: -0.012em; color: #17181A; }
.fq__q::-webkit-details-marker { display: none; }
.fq__q:hover { color: #A62A6D; }
.fq__sign { flex: none; width: 26px; height: 26px; margin-top: -1px; border-radius: 50%; border: 1px solid #EED8E6; background: #FDF2F8; color: #A62A6D; display: flex; align-items: center; justify-content: center; }
.fq__sign svg path:first-child { transition: opacity .18s ease; }
.fq__item[open] .fq__sign { background: #E0529E; border-color: #E0529E; color: #FFFFFF; }
.fq__item[open] .fq__sign svg path:first-child { opacity: 0; }
.fq__item[open] .fq__q { color: #A62A6D; padding-bottom: 12px; }
.fq__a { font-size: 15.5px; line-height: 1.68; color: #53565B; margin: 0; padding: 0 0 26px 42px; max-width: 68ch; text-wrap: pretty; }

@container (max-width: 900px) {
  .fq__headin { padding: 56px 30px 40px; }
  .fq__h1 { font-size: 38px; }
  .fq__lead { font-size: 17.5px; }
  .fq__in { grid-template-columns: 1fr; gap: 40px; padding: 40px 30px 72px; }
  .fq__side { position: static; }
}
@container (max-width: 560px) {
  .fq__headin { padding: 44px 20px 32px; }
  .fq__h1 { font-size: 31px; }
  .fq__in { padding: 32px 20px 56px; }
  .fq__q { font-size: 16px; gap: 12px; }
  .fq__a { padding-left: 0; font-size: 15px; }
}