.page-faq{
  --faq-measure:720px;
  --faq-side:216px;
  --faq-gap:clamp(32px,5vw,68px);
  padding-bottom:clamp(64px,10vw,120px);
}

/* ---------- 面包屑 ---------- */
.page-faq .breadcrumbs{
  padding-top:clamp(20px,3.5vw,36px);
  font-size:var(--step--1);
}
.page-faq .breadcrumbs ol{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin:0;
  padding:0;
  list-style:none;
  color:var(--text-slate-400);
}
.page-faq .breadcrumbs li{
  display:inline-flex;
  align-items:center;
}
.page-faq .breadcrumbs li + li::before{
  content:"/";
  margin:0 9px 0 3px;
  color:var(--ink-600);
}
.page-faq .breadcrumbs a{
  color:var(--text-slate-400);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .2s ease,border-color .2s ease;
}
.page-faq .breadcrumbs a:hover,
.page-faq .breadcrumbs a:focus-visible{
  color:var(--signal-cyan-400);
  border-bottom-color:var(--signal-cyan-400);
}

/* ---------- 首屏 ---------- */
.page-faq .faq-hero{
  position:relative;
  margin-top:clamp(22px,4vw,44px);
  padding:clamp(28px,5vw,56px) clamp(22px,4.5vw,56px);
  border-radius:var(--radius-xl);
  border:1px solid var(--ink-600);
  background:
    radial-gradient(120% 140% at 92% -20%,rgba(53,240,200,.18),transparent 58%),
    radial-gradient(90% 120% at -10% 115%,rgba(124,108,245,.16),transparent 62%),
    var(--deep-ink-850);
  overflow:hidden;
}
.page-faq .faq-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(to right,rgba(34,56,104,.65) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(34,56,104,.65) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(78% 105% at 88% 0%,#000,transparent 76%);
  mask-image:radial-gradient(78% 105% at 88% 0%,#000,transparent 76%);
  opacity:.75;
  pointer-events:none;
}
.page-faq .faq-hero__wrap{
  position:relative;
  z-index:1;
  max-width:64ch;
}
.page-faq .faq-hero__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 0 18px;
  padding:6px 14px;
  border-radius:999px;
  border:1px solid rgba(53,240,200,.35);
  background:rgba(53,240,200,.08);
  color:var(--signal-cyan-400);
  font-size:var(--step--1);
  letter-spacing:.05em;
}
.page-faq .faq-hero__title{
  margin:0 0 20px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(26px,5vw,var(--step-4));
  line-height:1.14;
  letter-spacing:-.02em;
  color:var(--text-slate-100);
}
.page-faq .faq-hero__lead{
  margin:0 0 28px;
  max-width:60ch;
  color:var(--text-slate-400);
  font-size:var(--step-1);
  line-height:1.78;
}
.page-faq .faq-hero__quick{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.page-faq .faq-quick{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 16px;
  border-radius:999px;
  border:1px solid var(--ink-600);
  background:var(--surface-glass);
  color:var(--text-slate-100);
  font-size:var(--step--1);
  text-decoration:none;
  transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.page-faq .faq-quick::after{
  content:"↓";
  font-size:11px;
  line-height:1;
  color:var(--signal-cyan-400);
}
.page-faq .faq-quick:hover,
.page-faq .faq-quick:focus-visible{
  border-color:var(--signal-cyan-400);
  background:rgba(53,240,200,.1);
  color:var(--signal-cyan-400);
}

/* ---------- 章节骨架 ---------- */
.page-faq .faq-block{
  margin-top:clamp(52px,8vw,96px);
}
.page-faq .section-head{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  gap:10px clamp(14px,2.5vw,22px);
  margin-bottom:clamp(22px,3.5vw,36px);
}
.page-faq .section-num{
  font-size:clamp(24px,4vw,38px);
  line-height:1;
  color:var(--signal-cyan-400);
  opacity:.6;
  letter-spacing:-.02em;
}
.page-faq .section-title{
  margin:0 0 8px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(21px,3.2vw,var(--step-3));
  line-height:1.26;
  letter-spacing:-.015em;
  color:var(--text-slate-100);
}
.page-faq .section-kicker{
  margin:0;
  font-family:var(--font-serif);
  font-size:var(--step-1);
  line-height:1.72;
  color:var(--text-slate-400);
}

/* ---------- 三步指引 ---------- */
.page-faq .faq-steps__grid{
  display:grid;
  gap:clamp(24px,4vw,40px);
}
@media (min-width:900px){
  .page-faq .faq-steps__grid{
    grid-template-columns:minmax(0,1fr) minmax(230px,370px);
    align-items:start;
  }
}
.page-faq .faq-steps__list{
  display:grid;
  gap:14px;
  margin:0;
  padding:0;
  list-style:none;
}
.page-faq .step{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:12px;
  padding:20px 22px;
  border-radius:var(--radius-lg);
  border:1px solid var(--ink-600);
  background:var(--ink-700);
  transition:border-color .25s ease;
}
@media (min-width:560px){
  .page-faq .step{
    grid-template-columns:auto minmax(0,1fr);
    gap:16px;
  }
}
.page-faq .step:hover{
  border-color:var(--signal-cyan-700);
}
.page-faq .step__num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(53,240,200,.4);
  background:rgba(53,240,200,.1);
  color:var(--signal-cyan-400);
  font-size:var(--step-0);
  letter-spacing:.04em;
}
.page-faq .step__title{
  margin:0 0 8px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:var(--step-2);
  line-height:1.4;
  letter-spacing:-.01em;
  color:var(--text-slate-100);
}
.page-faq .step__text{
  margin:0 0 12px;
  color:var(--text-slate-400);
  font-size:var(--step-0);
  line-height:1.75;
}
.page-faq .step__pitfall{
  margin:0 0 12px;
  padding:10px 14px;
  border-radius:var(--radius-sm);
  border-left:2px solid var(--archive-amber-400);
  background:rgba(255,176,46,.07);
  color:var(--text-slate-400);
  font-size:var(--step--1);
  line-height:1.68;
}
.page-faq .step__pitfall b{
  color:var(--archive-amber-400);
  font-weight:600;
}
.page-faq .step__link{
  font-size:var(--step--1);
  color:var(--signal-cyan-400);
  text-decoration:none;
  border-bottom:1px solid rgba(53,240,200,.35);
}
.page-faq .step__link:hover,
.page-faq .step__link:focus-visible{
  border-bottom-color:var(--signal-cyan-400);
}
.page-faq .faq-steps__figure{
  margin:0;
  border-radius:var(--radius-lg);
  border:1px solid var(--ink-600);
  background:var(--deep-ink-850);
  overflow:hidden;
}
.page-faq .faq-steps__figure img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}
.page-faq .faq-steps__figure .media-frame__caption{
  padding:12px 16px;
  font-size:var(--step--1);
  line-height:1.6;
  color:var(--text-slate-400);
}

/* ---------- 正文双栏骨架 ---------- */
.page-faq .faq-body{
  margin-top:clamp(52px,8vw,96px);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(26px,5vw,44px);
}
@media (min-width:1080px){
  .page-faq .faq-body{
    grid-template-columns:var(--faq-side) minmax(0,var(--faq-measure));
    justify-content:center;
    gap:var(--faq-gap);
  }
}
.page-faq .faq-stream > .faq-block:first-child{
  margin-top:0;
}

/* ---------- 左侧筛选栏 ---------- */
.page-faq .faq-side{
  display:flex;
  flex-direction:column;
  gap:12px;
}
@media (min-width:1080px){
  .page-faq .faq-side{
    position:sticky;
    top:104px;
    align-self:start;
  }
}
.page-faq .faq-side__label{
  margin:0;
  font-size:11px;
  letter-spacing:.16em;
  color:var(--text-slate-400);
}
.page-faq .filter-bar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
@media (max-width:1079px){
  .page-faq .filter-bar{
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:4px;
    scrollbar-width:none;
  }
  .page-faq .filter-bar::-webkit-scrollbar{
    display:none;
  }
}
.page-faq .filter-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 15px;
  border-radius:999px;
  border:1px solid var(--ink-600);
  background:transparent;
  color:var(--text-slate-400);
  font-family:var(--font-body);
  font-size:var(--step--1);
  line-height:1.2;
  white-space:nowrap;
  cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.page-faq .filter-btn:hover{
  border-color:var(--signal-cyan-700);
  color:var(--text-slate-100);
}
.page-faq .filter-btn[aria-pressed="true"]{
  background:var(--signal-cyan-700);
  border-color:var(--signal-cyan-700);
  color:var(--deep-ink-950);
  font-weight:600;
}
@media (min-width:1080px){
  .page-faq .filter-bar{
    flex-direction:column;
    align-items:stretch;
  }
  .page-faq .filter-btn{
    justify-content:flex-start;
  }
}
.page-faq .faq-expand{
  width:100%;
  justify-content:center;
}

/* ---------- 服务范围 ---------- */
.page-faq .faq-scope__grid{
  display:grid;
  gap:clamp(22px,3.5vw,34px);
}
@media (min-width:820px){
  .page-faq .faq-scope__grid{
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    align-items:start;
  }
}
.page-faq .faq-scope__text p{
  margin:0 0 1.15em;
  color:var(--text-slate-400);
  font-size:var(--step-0);
  line-height:1.82;
}
.page-faq .faq-scope__text p:last-child{
  margin-bottom:0;
}
.page-faq .faq-scope__text a{
  color:var(--signal-cyan-400);
  text-decoration:none;
  border-bottom:1px solid rgba(53,240,200,.35);
}
.page-faq .faq-scope__text a:hover,
.page-faq .faq-scope__text a:focus-visible{
  border-bottom-color:var(--signal-cyan-400);
}
.page-faq .faq-scope__list{
  display:grid;
  gap:12px;
  margin:0;
  padding:0;
  list-style:none;
}
.page-faq .faq-scope__list li{
  padding:16px 18px;
  border-radius:var(--radius-md);
  border:1px solid var(--ink-600);
  border-left:3px solid var(--signal-cyan-700);
  background:var(--deep-ink-850);
}
.page-faq .faq-scope__key{
  display:block;
  margin-bottom:6px;
  font-size:var(--step--1);
  letter-spacing:.08em;
  color:var(--signal-cyan-400);
}
.page-faq .faq-scope__list p{
  margin:0;
  color:var(--text-slate-400);
  font-size:var(--step--1);
  line-height:1.7;
}

/* ---------- 查询技巧：三张错位卡 ---------- */
.page-faq .faq-tips{
  display:grid;
  gap:14px;
}
@media (min-width:780px){
  .page-faq .faq-tips{
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:start;
    gap:18px;
  }
  .page-faq .faq-tip:nth-child(2){
    margin-top:24px;
  }
  .page-faq .faq-tip:nth-child(3){
    margin-top:48px;
  }
}
.page-faq .faq-tip{
  padding:22px 20px;
  border-radius:var(--radius-lg);
  border:1px solid var(--ink-600);
  background:var(--ink-700);
}
.page-faq .faq-tip--1{
  border-top:2px solid var(--signal-cyan-400);
}
.page-faq .faq-tip--2{
  border-top:2px solid var(--archive-amber-400);
}
.page-faq .faq-tip--3{
  border-top:2px solid var(--archive-violet-500);
}
.page-faq .faq-tip__tag{
  display:inline-block;
  margin:0 0 10px;
  padding:3px 10px;
  border-radius:999px;
  background:rgba(53,240,200,.1);
  color:var(--signal-cyan-400);
  font-size:11px;
  letter-spacing:.1em;
}
.page-faq .faq-tip--2 .faq-tip__tag{
  background:rgba(255,176,46,.12);
  color:var(--archive-amber-400);
}
.page-faq .faq-tip--3 .faq-tip__tag{
  background:rgba(124,108,245,.14);
  color:var(--archive-violet-500);
}
.page-faq .faq-tip__title{
  margin:0 0 10px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:var(--step-1);
  line-height:1.45;
  color:var(--text-slate-100);
}
.page-faq .faq-tip p{
  margin:0;
  color:var(--text-slate-400);
  font-size:var(--step--1);
  line-height:1.76;
}

/* ---------- 归档章节 ---------- */
.page-faq .faq-archive__text p{
  margin:0 0 1.15em;
  color:var(--text-slate-400);
  font-size:var(--step-0);
  line-height:1.82;
}
.page-faq .faq-archive__text a{
  color:var(--signal-cyan-400);
  text-decoration:none;
  border-bottom:1px solid rgba(53,240,200,.35);
}
.page-faq .faq-archive__text a:hover,
.page-faq .faq-archive__text a:focus-visible{
  border-bottom-color:var(--signal-cyan-400);
}
.page-faq .faq-archive__figure{
  margin:24px 0 0 auto;
  width:min(100%,560px);
  border-radius:var(--radius-lg);
  border:1px solid var(--ink-600);
  background:var(--deep-ink-850);
  overflow:hidden;
}
.page-faq .faq-archive__figure img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}
.page-faq .faq-archive__figure .media-frame__caption{
  padding:12px 16px;
  font-size:var(--step--1);
  line-height:1.6;
  color:var(--text-slate-400);
}

/* ---------- 反馈类别 ---------- */
.page-faq .faq-feedback__list{
  display:grid;
  gap:12px;
  margin:0 0 26px;
  padding:0;
  list-style:none;
}
.page-faq .faq-feedback__item{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:10px;
  padding:18px 20px;
  border-radius:var(--radius-md);
  border:1px solid var(--ink-600);
  background:var(--ink-700);
}
@media (min-width:640px){
  .page-faq .faq-feedback__item{
    grid-template-columns:104px minmax(0,1fr);
    align-items:start;
    gap:18px;
    padding:20px 22px;
  }
  .page-faq .faq-feedback__list > .faq-feedback__item:nth-child(2){
    margin-left:26px;
  }
  .page-faq .faq-feedback__list > .faq-feedback__item:nth-child(3){
    margin-left:52px;
  }
}
.page-faq .faq-feedback__item p{
  margin:0;
  color:var(--text-slate-400);
  font-size:var(--step-0);
  line-height:1.78;
}
.page-faq .faq-feedback__foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:20px 22px;
  border-radius:var(--radius-lg);
  border:1px solid var(--ink-600);
  background:
    radial-gradient(100% 160% at 100% 0%,rgba(53,240,200,.12),transparent 62%),
    var(--deep-ink-850);
}
.page-faq .faq-feedback__note{
  margin:0;
  max-width:52ch;
  color:var(--text-slate-400);
  font-size:var(--step--1);
  line-height:1.72;
}
.page-faq .faq-feedback__note .mono{
  color:var(--text-slate-100);
}

/* ---------- 问答折叠 ---------- */
.page-faq .faq-list{
  display:grid;
  gap:12px;
}
.page-faq .faq-qa{
  position:relative;
  border-radius:var(--radius-md);
  border:1px solid var(--ink-600);
  background:var(--ink-700);
  overflow:hidden;
  transition:border-color .25s ease;
}
.page-faq .faq-qa:hover{
  border-color:var(--signal-cyan-700);
}
.page-faq .faq-qa::before{
  content:"";
  position:absolute;
  left:0;
  top:14px;
  bottom:14px;
  width:3px;
  border-radius:0 3px 3px 0;
  background:var(--signal-cyan-400);
  opacity:0;
  transform:scaleY(.3);
  transform-origin:top center;
  transition:opacity .25s ease,transform .3s ease;
  pointer-events:none;
}
.page-faq .faq-qa[data-open]::before{
  opacity:1;
  transform:scaleY(1);
}
.page-faq .faq-qa__heading{
  margin:0;
  font-size:inherit;
  font-weight:inherit;
}
.page-faq .faq-qa .disclosure__trigger{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:6px 16px;
  width:100%;
  padding:18px 20px;
  border:0;
  background:none;
  text-align:left;
  color:inherit;
  font-family:inherit;
  cursor:pointer;
}
.page-faq .faq-qa__meta{
  display:block;
  min-width:0;
}
.page-faq .faq-qa__label{
  display:block;
  margin-bottom:6px;
  font-size:11px;
  letter-spacing:.1em;
  color:var(--signal-cyan-400);
  opacity:.8;
}
.page-faq .faq-qa__q{
  display:block;
  font-size:var(--step-1);
  font-weight:500;
  line-height:1.6;
  color:var(--text-slate-100);
}
.page-faq .faq-qa .disclosure__icon{
  position:relative;
  width:26px;
  height:26px;
  border-radius:999px;
  border:1px solid var(--ink-600);
  transition:background .2s ease,border-color .2s ease;
}
.page-faq .faq-qa .disclosure__icon::before{
  content:"";
  position:absolute;
  top:50%;
  left:5px;
  right:5px;
  height:1.5px;
  background:var(--text-slate-400);
  transform:translateY(-50%);
}
.page-faq .faq-qa .disclosure__icon::after{
  content:"";
  position:absolute;
  left:50%;
  top:5px;
  bottom:5px;
  width:1.5px;
  background:var(--text-slate-400);
  transform:translateX(-50%);
  transition:opacity .25s ease;
}
.page-faq .faq-qa .disclosure__trigger:hover .disclosure__icon,
.page-faq .faq-qa[data-open] .disclosure__icon{
  border-color:var(--signal-cyan-400);
  background:rgba(53,240,200,.14);
}
.page-faq .faq-qa[data-open] .disclosure__icon::after{
  opacity:0;
}
.page-faq .faq-qa__a{
  margin:0 20px 20px 22px;
  padding-left:14px;
  border-left:2px solid transparent;
  color:var(--text-slate-400);
  font-size:var(--step-0);
  line-height:1.78;
  transition:border-color .3s ease;
}
.page-faq .faq-qa[data-open] .faq-qa__a{
  border-left-color:rgba(53,240,200,.45);
}
.page-faq .faq-qa__a p{
  margin:0;
  color:var(--text-slate-400);
  font-size:var(--step-0);
  line-height:1.78;
}

/* ---------- 收尾 ---------- */
@media (max-width:640px){
  .page-faq .faq-hero__title{
    font-size:26px;
  }
  .page-faq .faq-hero__quick{
    gap:8px;
  }
  .page-faq .faq-quick{
    padding:7px 13px;
  }
  .page-faq .section-head{
    grid-template-columns:minmax(0,1fr);
    gap:8px;
  }
  .page-faq .section-num{
    font-size:22px;
  }
  .page-faq .faq-qa .disclosure__trigger{
    padding:16px 16px;
    gap:6px 12px;
  }
  .page-faq .faq-qa__a{
    margin:0 16px 18px 18px;
  }
  .page-faq .faq-feedback__foot{
    padding:18px 16px;
  }
}

@media (prefers-reduced-motion:reduce){
  .page-faq .faq-qa::before,
  .page-faq .faq-qa__a,
  .page-faq .faq-qa .disclosure__icon,
  .page-faq .faq-qa .disclosure__icon::after,
  .page-faq .step,
  .page-faq .faq-quick,
  .page-faq .filter-btn{
    transition:none;
  }
}
