.page-faq{
  --faq-accent: var(--signal);
  padding-bottom: clamp(64px, 9vw, 110px);
}

.page-faq .faq-frame{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  align-items: start;
  padding-top: clamp(10px, 2vw, 18px);
}

/* —— 首屏 —— */
.page-faq .faq-hero{
  display: grid;
  gap: .7rem;
  padding: clamp(14px, 3vw, 26px) 0 clamp(10px, 2vw, 16px);
}
.page-faq .faq-hero__kicker{
  margin: 0;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--arc);
}
.page-faq .faq-hero__title{
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: condensed;
  font-size: clamp(32px, 7.4vw, 58px);
  line-height: 1.04;
  letter-spacing: -.02em;
  color: var(--text);
}
.page-faq .faq-hero__lede{
  margin: 0;
  max-width: 62ch;
  color: var(--text-dim);
  font-size: clamp(.94rem, 1.5vw, 1.04rem);
  line-height: 1.62;
}
.page-faq .faq-hero__acts{
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: .5rem;
}

/* —— 索引栏 —— */
.page-faq .faq-rail{ min-width: 0; }

/* —— 主舞台 —— */
.page-faq .faq-stage{
  display: grid;
  gap: clamp(14px, 2.6vw, 28px);
  min-width: 0;
}
.page-faq .faq-anchor{
  min-width: 0;
  scroll-margin-top: calc(var(--header-h) + 20px);
}
.page-faq .faq-anchor:target .faq-panel{
  outline: 1px solid var(--signal);
  outline-offset: 3px;
}

/* —— 分组面板 —— */
.page-faq .faq-panel{
  position: relative;
  overflow: hidden;
  min-width: 0;
}
.page-faq .faq-panel::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--faq-accent, var(--signal));
  opacity: .92;
}
.page-faq .faq-panel--index{ --faq-accent: var(--arc); }
.page-faq .faq-panel--archive{ --faq-accent: var(--signal); }
.page-faq .faq-panel--replay{ --faq-accent: var(--arc); }
.page-faq .faq-panel--version{ --faq-accent: var(--gold); }
.page-faq .faq-panel--devices{ --faq-accent: var(--ember); }
.page-faq .faq-panel--support{ --faq-accent: var(--text-dim); }

/* —— 索引图 + 跳转格 —— */
.page-faq .faq-figure{
  margin: 0 0 clamp(12px, 2vw, 18px);
}
.page-faq .faq-figure img{
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: var(--radius-md);
  object-fit: cover;
}
.page-faq .faq-figure--device{ margin: 0; }

.page-faq .faq-index{
  display: grid;
  grid-template-columns: 1fr;
  gap: .6rem;
}
.page-faq .faq-jump{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .8rem;
  min-height: 64px;
  padding: .8rem .95rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--ink-800);
  color: var(--text);
  text-decoration: none;
  transition: background 180ms var(--ease), border-color 180ms var(--ease), transform 180ms var(--ease);
}
.page-faq .faq-jump--archive{ --faq-accent: var(--signal); }
.page-faq .faq-jump--replay{ --faq-accent: var(--arc); }
.page-faq .faq-jump--version{ --faq-accent: var(--gold); }
.page-faq .faq-jump--devices{ --faq-accent: var(--ember); }
.page-faq .faq-jump--support{ --faq-accent: var(--text-dim); }
.page-faq .faq-jump:hover,
.page-faq .faq-jump:focus-visible{
  background: var(--ink-700);
  border-color: var(--faq-accent);
  transform: translateY(-2px);
}
.page-faq .faq-jump__num{
  font-family: var(--font-mono);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--faq-accent);
}
.page-faq .faq-jump__name{
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.35;
}
.page-faq .faq-jump__meta{
  display: block;
  margin-top: .18rem;
  font-weight: 400;
  font-size: .75rem;
  color: var(--text-dim);
}
.page-faq .faq-jump__go{
  font-family: var(--font-mono);
  font-size: .9rem;
  color: var(--text-dim);
}

/* —— 折叠问答 —— */
.page-faq .qa{
  border-top: 1px solid var(--line);
}
.page-faq .qa:first-child{ border-top: 0; }
.page-faq .qa__q{
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) 1.1rem;
  gap: .6rem;
  align-items: start;
  padding: .82rem .15rem;
  list-style: none;
  cursor: pointer;
  color: var(--text);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.5;
  transition: color 180ms var(--ease);
}
.page-faq .qa__q::-webkit-details-marker{ display: none; }
.page-faq .qa__q::marker{ content: ""; }
.page-faq .qa__q::after{
  content: "";
  width: .62rem;
  height: .62rem;
  margin-top: .3rem;
  justify-self: end;
  border-right: 2px solid var(--arc);
  border-bottom: 2px solid var(--arc);
  border-radius: 1px;
  transform: rotate(45deg);
  transition: transform 200ms var(--ease), border-color 200ms var(--ease);
}
.page-faq .qa__q:hover,
.page-faq .qa__q:focus-visible{ color: var(--arc); }
.page-faq .qa[open] .qa__q::after{
  transform: rotate(-135deg);
  border-color: var(--signal);
}
.page-faq .qa__num{
  font-family: var(--font-mono);
  font-size: .8rem;
  line-height: 1.6;
  color: var(--text-dim);
  padding-top: .1rem;
}
.page-faq .qa__text{ min-width: 0; }
.page-faq .qa__a{
  padding: 0 .6rem .95rem calc(2.2rem + .6rem);
  color: var(--text-dim);
  font-size: .9rem;
  line-height: 1.64;
}
.page-faq .qa__a p{ margin: 0; }
.page-faq .qa__a a{
  color: var(--arc);
  text-decoration: underline;
  text-underline-offset: .18em;
}
.page-faq .qa[open] .qa__a{
  animation: faq-open 200ms var(--ease);
}
@keyframes faq-open{
  from{ opacity: 0; transform: translateY(-5px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* —— 设备分组两栏 —— */
.page-faq .faq-device-cols{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(12px, 2vw, 20px);
}
.page-faq .faq-device-cols__main{ min-width: 0; }

/* —— 支持收尾 —— */
.page-faq .faq-support__cta{
  margin: clamp(14px, 2vw, 20px) 0 0;
}

/* —— 圆形浮标 —— */
.page-faq .faq-float{
  position: fixed;
  right: clamp(12px, 3vw, 28px);
  bottom: clamp(12px, 3vw, 28px);
  z-index: 40;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 1.15rem;
  border-radius: var(--radius-pill);
  background: var(--signal);
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(255, 77, 26, .34);
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.page-faq .faq-float:hover,
.page-faq .faq-float:focus-visible{
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(255, 77, 26, .46);
}

/* —— 响应式 —— */
@media (min-width: 600px){
  .page-faq .faq-index{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-faq .faq-jump__meta{ font-size: .78rem; }
}

@media (min-width: 1024px){
  .page-faq .faq-frame{
    grid-template-columns: var(--rail) minmax(0, 1fr);
    gap: clamp(20px, 3vw, 40px);
  }
  .page-faq .faq-rail{
    position: sticky;
    top: calc(var(--header-h) + 18px);
  }
  .page-faq .faq-index{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1180px){
  .page-faq .faq-device-cols{
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    align-items: start;
  }
  .page-faq .faq-figure--device{ margin-top: .4rem; }
}

@media (max-width: 479px){
  .page-faq .qa__q{
    grid-template-columns: 1.9rem minmax(0, 1fr) 1rem;
    font-size: .9rem;
  }
  .page-faq .qa__a{
    padding-left: .3rem;
    padding-right: .2rem;
  }
  .page-faq .faq-float{
    right: 12px;
    bottom: 12px;
    padding: 0 .95rem;
    font-size: .84rem;
  }
}

@media (prefers-reduced-motion: reduce){
  .page-faq .qa[open] .qa__a{ animation: none; }
  .page-faq .qa__q::after,
  .page-faq .qa__q,
  .page-faq .faq-jump,
  .page-faq .faq-float{ transition: none; }
  .page-faq .faq-jump:hover,
  .page-faq .faq-float:hover{ transform: none; }
}