.page-faq{
  --faq-pad:clamp(44px,7vw,92px);
  --faq-line:1px solid var(--sm-line-dark);
  --faq-line-dark:1px solid var(--sm-line-light);
}

.page-faq .faq-band{position:relative;padding-block:var(--faq-pad)}
.page-faq .faq-band--snow{background:var(--sm-snow);color:var(--sm-ink)}
.page-faq .faq-band--night{background:var(--sm-night);color:var(--sm-snow)}
.page-faq .faq-band--pine{background:var(--sm-pine);color:var(--sm-snow)}
.page-faq .faq-band--indigo{background:var(--sm-indigo);color:var(--sm-snow)}

.page-faq .sm-eyebrow{
  display:block;
  margin:0 0 14px;
  font-family:var(--sm-mono-font);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--sm-rock);
}
.page-faq .faq-band--night .sm-eyebrow,
.page-faq .faq-band--pine .sm-eyebrow{color:var(--sm-yellow)}

/* 面包屑 */
.page-faq .faq-crumb{
  background:var(--sm-snow);
  border-bottom:var(--faq-line);
  padding-block:14px;
}
.page-faq .sm-breadcrumb{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  font-family:var(--sm-mono-font);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--sm-rock);
}
.page-faq .sm-breadcrumb a{
  color:var(--sm-ink);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color var(--sm-ease),color var(--sm-ease);
}
.page-faq .sm-breadcrumb a:hover,
.page-faq .sm-breadcrumb a:focus-visible{
  color:var(--sm-blue-deep);
  border-bottom-color:var(--sm-blue-deep);
}
.page-faq .sm-breadcrumb a[aria-current="page"]{color:var(--sm-wine);border-bottom-color:var(--sm-wine)}
.page-faq .sm-breadcrumb__sep{color:var(--sm-rock)}

/* 首屏 */
.page-faq .faq-hero{overflow:hidden}
.page-faq .faq-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(244,247,249,.07) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(244,247,249,.07) 1px,transparent 1px);
  background-size:72px 72px;
  opacity:.65;
}
.page-faq .faq-hero > *{position:relative;z-index:1}
.page-faq .faq-hero__inner{
  display:grid;
  gap:clamp(28px,4vw,56px);
  grid-template-columns:minmax(0,1fr);
  align-items:end;
}
.page-faq .faq-hero h1{
  margin:0 0 18px;
  font-family:var(--sm-font);
  font-weight:900;
  font-size:clamp(34px,7vw,64px);
  line-height:1.02;
  letter-spacing:-.02em;
  color:var(--sm-snow);
}
.page-faq .faq-hero__intro{
  margin:0;
  max-width:48ch;
  font-size:clamp(15px,1.6vw,17px);
  line-height:1.8;
  color:var(--sm-white-72);
}
.page-faq .faq-hero__tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:22px 0 26px;
}
.page-faq .faq-hero__tags .sm-tag{
  font-family:var(--sm-mono-font);
  font-size:12px;
  letter-spacing:.06em;
  padding:5px 10px;
  border:1px solid var(--sm-line-light);
  color:var(--sm-snow);
  background:transparent;
  border-radius:0;
}
.page-faq .faq-hero__tags .sm-tag--yellow{
  background:var(--sm-yellow);
  border-color:var(--sm-yellow);
  color:var(--sm-ink);
}
.page-faq .faq-hero__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:18px;
}
.page-faq .faq-hero__actions .sm-btn{
  display:inline-block;
  padding:13px 22px;
  background:var(--sm-blue);
  color:#fff;
  font-weight:700;
  font-size:15px;
  text-decoration:none;
  border:1px solid var(--sm-blue);
  border-radius:0;
  transition:background var(--sm-ease),border-color var(--sm-ease);
}
.page-faq .faq-hero__actions .sm-btn:hover,
.page-faq .faq-hero__actions .sm-btn:focus-visible{
  background:var(--sm-blue-deep);
  border-color:var(--sm-blue-deep);
}
.page-faq .sm-link{
  color:var(--sm-blue-deep);
  text-decoration:none;
  border-bottom:1px solid var(--sm-blue-deep);
  transition:border-bottom-width var(--sm-ease),color var(--sm-ease);
}
.page-faq .sm-link:hover,
.page-faq .sm-link:focus-visible{border-bottom-width:2px}
.page-faq .sm-link--snow{
  color:var(--sm-snow);
  border-bottom-color:var(--sm-yellow);
}
.page-faq .sm-link--snow:hover,
.page-faq .sm-link--snow:focus-visible{color:var(--sm-yellow)}

.page-faq .sm-figure{
  margin:0;
  border:1px solid var(--sm-line-light);
  background:#08131f;
  overflow:hidden;
}
.page-faq .sm-figure__img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  object-fit:cover;
}
.page-faq .sm-figure__caption{
  display:block;
  padding:10px 14px;
  font-family:var(--sm-mono-font);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--sm-white-62);
  border-top:1px solid var(--sm-line-light);
}
.page-faq .faq-hero__figure{border-color:var(--sm-line-light)}

/* 两步路径 */
.page-faq .faq-head{max-width:62ch}
.page-faq .faq-head h2{
  margin:0 0 14px;
  font-size:clamp(26px,4vw,44px);
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.01em;
}
.page-faq .faq-head__note{
  margin:0;
  font-size:16px;
  line-height:1.75;
  color:#3a444f;
}
.page-faq .faq-steps{
  list-style:none;
  margin:clamp(28px,4vw,44px) 0 0;
  padding:0;
  display:grid;
  gap:clamp(16px,2.4vw,24px);
  grid-template-columns:minmax(0,1fr);
}
.page-faq .faq-step{
  border:var(--faq-line);
  background:#fff;
  padding:clamp(20px,3vw,30px);
  transition:border-color var(--sm-ease),box-shadow var(--sm-ease);
}
.page-faq .faq-step:hover,
.page-faq .faq-step:focus-within{
  border-color:var(--sm-blue);
  box-shadow:inset 0 0 0 1px var(--sm-blue);
}
.page-faq .faq-step__num{
  display:block;
  font-family:var(--sm-mono-font);
  font-variant-numeric:tabular-nums;
  font-size:clamp(38px,6vw,56px);
  font-weight:700;
  line-height:.9;
  color:var(--sm-blue-deep);
  margin-bottom:14px;
}
.page-faq .faq-step h3{
  margin:0 0 10px;
  font-size:clamp(18px,2.2vw,21px);
  font-weight:800;
  line-height:1.35;
}
.page-faq .faq-step p{
  margin:0;
  font-size:15px;
  line-height:1.75;
  color:#3a444f;
}
.page-faq .faq-shot{
  margin-top:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:14px;
  min-height:120px;
  border:1px dashed rgba(124,139,156,.75);
  background:
    repeating-linear-gradient(135deg,rgba(124,139,156,.10) 0 2px,transparent 2px 9px),
    var(--sm-snow);
  font-family:var(--sm-mono-font);
  font-size:12px;
  letter-spacing:.06em;
  line-height:1.6;
  color:#55616f;
}
.page-faq .faq-path__foot{
  margin:clamp(22px,3vw,32px) 0 0;
  max-width:66ch;
  font-size:15px;
  line-height:1.8;
  color:#3a444f;
}
.page-faq .faq-path__foot .sm-link{color:var(--sm-blue-deep)}

/* 分类索引 */
.page-faq .faq-cats{padding-block:clamp(26px,4vw,40px)}
.page-faq .faq-cats__lead{
  margin:0 0 16px;
  font-family:var(--sm-mono-font);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--sm-white-62);
}
.page-faq .faq-cats__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.page-faq .faq-chip{
  display:inline-flex;
  align-items:baseline;
  gap:10px;
  padding:10px 16px;
  border:1px solid var(--sm-line-light);
  color:var(--sm-snow);
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  transition:background var(--sm-ease),border-color var(--sm-ease),color var(--sm-ease);
}
.page-faq .faq-chip__num{
  font-family:var(--sm-mono-font);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--sm-yellow);
}
.page-faq .faq-chip:hover,
.page-faq .faq-chip:focus-visible{
  background:var(--sm-blue);
  border-color:var(--sm-blue);
  color:#fff;
}
.page-faq .faq-chip:hover .faq-chip__num,
.page-faq .faq-chip:focus-visible .faq-chip__num{color:#fff}

/* 问答分组 */
.page-faq .faq-group__inner{
  display:grid;
  gap:clamp(24px,4vw,48px);
  grid-template-columns:minmax(0,1fr);
}
.page-faq .faq-group__side h2{
  margin:10px 0 12px;
  font-size:clamp(24px,3.6vw,38px);
  font-weight:800;
  line-height:1.12;
  letter-spacing:-.01em;
}
.page-faq .faq-group__side p{
  margin:0 0 12px;
  max-width:34ch;
  font-size:15px;
  line-height:1.75;
  color:#3a444f;
}
.page-faq .faq-group__num{
  display:block;
  font-family:var(--sm-mono-font);
  font-variant-numeric:tabular-nums;
  font-size:clamp(46px,9vw,78px);
  font-weight:700;
  line-height:.85;
  color:transparent;
  -webkit-text-stroke:1px var(--sm-rock);
}
.page-faq .faq-band--night .faq-group__num,
.page-faq .faq-band--pine .faq-group__num{
  -webkit-text-stroke:1px rgba(244,247,249,.55);
  color:transparent;
}
.page-faq .faq-group__meta{
  font-family:var(--sm-mono-font);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--sm-rock);
  margin:0;
}
.page-faq .faq-band--night .faq-group__side p,
.page-faq .faq-band--pine .faq-group__side p{color:var(--sm-white-72)}
.page-faq .faq-band--night .faq-group__meta,
.page-faq .faq-band--pine .faq-group__meta{color:var(--sm-white-62)}

.page-faq .faq-group--flush{padding-top:0}

/* 手风琴 */
.page-faq .faq-q{border-top:var(--faq-line)}
.page-faq .faq-q:last-of-type{border-bottom:var(--faq-line)}
.page-faq .faq-q summary{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:18px 0 18px 14px;
  cursor:pointer;
  list-style:none;
  font-size:clamp(16px,1.9vw,19px);
  font-weight:700;
  line-height:1.5;
  color:var(--sm-ink);
  box-shadow:inset 2px 0 0 transparent;
  transition:box-shadow var(--sm-ease),color var(--sm-ease);
}
.page-faq .faq-q summary::-webkit-details-marker{display:none}
.page-faq .faq-q summary::after{
  content:"+";
  margin-left:auto;
  font-family:var(--sm-mono-font);
  font-size:18px;
  line-height:1.2;
  color:var(--sm-blue-deep);
}
.page-faq .faq-q[open] summary::after{content:"–"}
.page-faq .faq-q summary:hover,
.page-faq .faq-q summary:focus-visible{
  color:var(--sm-blue-deep);
  box-shadow:inset 2px 0 0 var(--sm-wine);
  outline:none;
}
.page-faq .faq-q summary:focus-visible{outline:2px solid var(--sm-blue);outline-offset:-2px}
.page-faq .faq-a{
  padding:0 0 22px 14px;
  max-width:64ch;
  font-size:15px;
  line-height:1.8;
  color:#3a444f;
}
.page-faq .faq-a p{margin:0 0 10px}
.page-faq .faq-a p:last-of-type{margin-bottom:12px}
.page-faq .faq-permalink{
  display:inline-block;
  font-family:var(--sm-mono-font);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--sm-rock);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color var(--sm-ease),border-color var(--sm-ease);
}
.page-faq .faq-permalink:hover,
.page-faq .faq-permalink:focus-visible{
  color:var(--sm-blue-deep);
  border-bottom-color:var(--sm-blue-deep);
}

/* 深色分组内文字与线的反差 */
.page-faq .faq-band--night .faq-q,
.page-faq .faq-band--pine .faq-q{border-top:var(--faq-line-dark)}
.page-faq .faq-band--night .faq-q:last-of-type,
.page-faq .faq-band--pine .faq-q:last-of-type{border-bottom:var(--faq-line-dark)}
.page-faq .faq-band--night .faq-q summary,
.page-faq .faq-band--pine .faq-q summary{color:var(--sm-snow)}
.page-faq .faq-band--night .faq-q summary::after,
.page-faq .faq-band--pine .faq-q summary::after{color:var(--sm-yellow)}
.page-faq .faq-band--night .faq-q summary:hover,
.page-faq .faq-band--night .faq-q summary:focus-visible,
.page-faq .faq-band--pine .faq-q summary:hover,
.page-faq .faq-band--pine .faq-q summary:focus-visible{
  color:var(--sm-yellow);
  box-shadow:inset 2px 0 0 var(--sm-yellow);
}
.page-faq .faq-band--night .faq-a,
.page-faq .faq-band--pine .faq-a{color:var(--sm-white-72)}
.page-faq .faq-band--night .faq-permalink,
.page-faq .faq-band--pine .faq-permalink{color:var(--sm-white-62)}
.page-faq .faq-band--night .faq-permalink:hover,
.page-faq .faq-band--night .faq-permalink:focus-visible,
.page-faq .faq-band--pine .faq-permalink:hover,
.page-faq .faq-band--pine .faq-permalink:focus-visible{
  color:var(--sm-yellow);
  border-bottom-color:var(--sm-yellow);
}
.page-faq .faq-group__figure{margin-bottom:22px}

/* 联系方式 */
.page-faq .faq-contact__inner{
  display:grid;
  gap:clamp(24px,4vw,56px);
  grid-template-columns:minmax(0,1fr);
  border-top:1px solid var(--sm-line-dark);
  padding-top:clamp(24px,4vw,40px);
}
.page-faq .faq-contact__intro h2{
  margin:0 0 12px;
  font-size:clamp(24px,3.4vw,36px);
  font-weight:800;
  line-height:1.15;
  letter-spacing:-.01em;
}
.page-faq .faq-contact__intro p{
  margin:0;
  max-width:44ch;
  font-size:15px;
  line-height:1.8;
  color:#3a444f;
}
.page-faq .faq-contact__list{margin:0;padding:0}
.page-faq .faq-contact__row{
  display:grid;
  gap:4px;
  padding:14px 0;
  border-bottom:var(--faq-line);
}
.page-faq .faq-contact__row:first-child{border-top:var(--faq-line)}
.page-faq .faq-contact__row dt{
  font-family:var(--sm-mono-font);
  font-size:12px;
  letter-spacing:.12em;
  color:var(--sm-rock);
}
.page-faq .faq-contact__row dd{
  margin:0;
  font-size:16px;
  font-weight:600;
  color:var(--sm-ink);
  overflow-wrap:anywhere;
}
.page-faq .faq-contact__hint{
  display:block;
  margin-top:4px;
  font-family:var(--sm-mono-font);
  font-size:12px;
  font-weight:400;
  letter-spacing:.04em;
  color:var(--sm-rock);
}

/* 下一步 */
.page-faq .faq-next{padding-top:0}
.page-faq .faq-next__title{
  margin:0 0 18px;
  font-family:var(--sm-mono-font);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:400;
  color:var(--sm-rock);
}
.page-faq .faq-next__list{
  list-style:none;
  margin:0;
  padding:0;
  border-top:var(--faq-line);
}
.page-faq .faq-next__list li{border-bottom:var(--faq-line)}
.page-faq .faq-next__list a{
  display:flex;
  align-items:baseline;
  gap:14px;
  padding:16px 8px 16px 14px;
  text-decoration:none;
  color:var(--sm-ink);
  font-size:clamp(15px,1.8vw,17px);
  font-weight:600;
  box-shadow:inset 2px 0 0 transparent;
  transition:box-shadow var(--sm-ease),color var(--sm-ease),background var(--sm-ease);
}
.page-faq .faq-next__list a:hover,
.page-faq .faq-next__list a:focus-visible{
  color:var(--sm-blue-deep);
  background:#eef3f8;
  box-shadow:inset 2px 0 0 var(--sm-wine);
}
.page-faq .faq-next__num{
  font-family:var(--sm-mono-font);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--sm-rock);
}
.page-faq .faq-next__label{flex:1 1 auto;min-width:0}
.page-faq .faq-next__arrow{
  font-family:var(--sm-mono-font);
  color:var(--sm-blue-deep);
}

@media (min-width:700px){
  .page-faq .faq-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-faq .faq-contact__row{
    grid-template-columns:150px minmax(0,1fr);
    align-items:baseline;
    gap:16px;
  }
}

@media (min-width:900px){
  .page-faq .faq-hero__inner{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .page-faq .faq-group__inner{grid-template-columns:minmax(0,4fr) minmax(0,8fr);align-items:start}
  .page-faq .faq-group__side{position:sticky;top:88px}
  .page-faq .faq-contact__inner{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .page-faq .faq-group--flush{padding-top:0}
}

@media (max-width:559px){
  .page-faq .faq-hero__actions{flex-direction:column;align-items:flex-start}
  .page-faq .faq-hero__actions .sm-btn{width:100%;text-align:center}
  .page-faq .faq-cats__list{gap:8px}
  .page-faq .faq-chip{padding:9px 12px;font-size:13px}
}

@media (prefers-reduced-motion:reduce){
  .page-faq *{transition:none !important}
}
<<<END>>>
