.page-faq {
  --pf-r: 28px;
  --pf-r-sm: 18px;
  --pf-ink-soft: rgba(22, 23, 27, 0.68);
  --pf-gold-line: rgba(201, 162, 39, 0.34);
  background-color: var(--sx-cream);
  color: var(--sx-ink);
  font-family: var(--sx-sans);
  overflow-x: clip;
}

.page-faq .pf-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------- 首屏 ---------- */
.page-faq .pf-hero {
  position: relative;
  overflow: hidden;
  padding: 40px 0 48px;
  background-color: var(--sx-cream);
}

.page-faq .pf-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(104deg,
    var(--sx-wine) 0 34%,
    var(--sx-red) 34% 70%,
    var(--sx-gold) 70% 100%);
}

.page-faq .pf-hero__slab {
  display: none;
}

.page-faq .pf-hero__inner {
  position: relative;
  z-index: 1;
}

.page-faq .pf-hero .sx-crumbs {
  margin-bottom: 22px;
}

.page-faq .pf-hero__title {
  margin: 14px 0 18px;
  font-family: var(--sx-serif);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.28;
  letter-spacing: 0.01em;
  color: var(--sx-ink);
}

.page-faq .pf-hero__lead {
  max-width: 640px;
  margin: 0;
  font-size: 16px;
  line-height: 1.78;
  color: var(--pf-ink-soft);
}

.page-faq .pf-hero__jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.page-faq .pf-jump {
  display: inline-block;
  padding: 8px 16px;
  border-radius: var(--sx-pill);
  border: 1px solid var(--sx-line-strong);
  background-color: transparent;
  color: var(--sx-ink);
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color 200ms ease-out, border-color 200ms ease-out, color 200ms ease-out;
}

.page-faq .pf-jump:hover,
.page-faq .pf-jump:focus-visible {
  background-color: var(--sx-red);
  border-color: var(--sx-red);
  color: var(--sx-cream);
}

.page-faq .pf-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 18px;
  margin: 32px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--sx-line);
}

.page-faq .pf-hero__stat {
  min-width: 0;
}

.page-faq .pf-hero__stat dt {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--sx-gray);
}

.page-faq .pf-hero__stat dd {
  margin: 0;
  font-family: var(--sx-serif);
  font-size: 24px;
  line-height: 1.2;
  color: var(--sx-ink);
}

.page-faq .pf-hero__stat dd .pf-num {
  font-size: 34px;
  font-weight: 700;
  color: var(--sx-red);
  margin-right: 2px;
}

/* ---------- 通用板块 ---------- */
.page-faq .pf-section {
  padding: 48px 0;
}

.page-faq .sx-section__head {
  max-width: 720px;
}

.page-faq .sx-section__title {
  font-family: var(--sx-serif);
}

/* ---------- 规则说明 ---------- */
.page-faq .pf-rules {
  margin-top: 30px;
  border-top: 1px solid var(--sx-line);
}

.page-faq .pf-rules .sx-accordion__item {
  border-bottom: 1px solid var(--sx-line);
}

.page-faq .pf-rules__head {
  margin: 0;
  font-size: inherit;
  font-weight: 400;
}

.page-faq .pf-rules__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--sx-ink);
  font-family: var(--sx-sans);
}

.page-faq .pf-rules__idx {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--sx-gold);
  color: var(--sx-red);
  font-family: var(--sx-serif);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.page-faq .pf-rules__label {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--sx-serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.55;
}

.page-faq .pf-rules__meta {
  flex: none;
  padding: 4px 12px;
  border-radius: var(--sx-pill);
  background-color: var(--sx-gold-soft);
  color: var(--sx-ink);
  font-size: 13px;
  letter-spacing: 0.04em;
}

.page-faq .pf-rules__panel {
  padding: 0 0 26px;
}

.page-faq .pf-rules__note {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--sx-gray);
}

.page-faq .pf-rules__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: pf-rule;
}

.page-faq .pf-rules__list li {
  position: relative;
  counter-increment: pf-rule;
  padding: 0 0 0 34px;
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--pf-ink-soft);
}

.page-faq .pf-rules__list li::before {
  content: counter(pf-rule, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--sx-gold);
  letter-spacing: 0.04em;
}

.page-faq .pf-rules__list li:last-child {
  margin-bottom: 0;
}

/* ---------- 三步上手 ---------- */
.page-faq .pf-section--steps {
  background-color: #F4EDE4;
}

.page-faq .pf-steps {
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

.page-faq .pf-steps__item {
  position: relative;
  padding-left: 60px;
  padding-bottom: 34px;
}

.page-faq .pf-steps__item:last-child {
  padding-bottom: 0;
}

.page-faq .pf-steps__item::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 46px;
  bottom: 8px;
  width: 1.5px;
  background: linear-gradient(to bottom, var(--sx-gold), rgba(201, 162, 39, 0.12));
}

.page-faq .pf-steps__item:last-child::before {
  display: none;
}

.page-faq .pf-steps__dot {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--sx-cream);
  border: 1.5px solid var(--sx-gold);
  color: var(--sx-red);
  font-family: var(--sx-serif);
  font-size: 20px;
  font-weight: 700;
}

.page-faq .pf-steps__title {
  margin: 6px 0 8px;
  font-family: var(--sx-serif);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--sx-ink);
}

.page-faq .pf-steps__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.78;
  color: var(--pf-ink-soft);
}

.page-faq .pf-steps__text a {
  color: var(--sx-red);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-faq .pf-figure {
  margin: 34px 0 0;
}

.page-faq .pf-figure .sx-figure__img {
  display: block;
  border-radius: var(--pf-r);
  overflow: hidden;
  background-color: var(--sx-celadon-soft);
}

.page-faq .pf-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.page-faq .pf-figure .sx-figure__cap {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--sx-gray);
}

/* ---------- 设备指引 ---------- */
.page-faq .pf-section--devices {
  background-color: var(--sx-celadon);
  color: var(--sx-cream);
  border-radius: var(--pf-r) var(--pf-r) 0 0;
}

.page-faq .pf-section--devices .sx-eyebrow {
  color: var(--sx-gold-soft);
}

.page-faq .pf-section--devices .sx-section__title {
  color: var(--sx-cream);
}

.page-faq .pf-section--devices .sx-section__lead {
  color: var(--sx-on-dark);
}

.page-faq .pf-figure--devices {
  margin: 30px 0 0;
}

.page-faq .pf-figure--devices .sx-figure__img {
  background-color: rgba(251, 247, 242, 0.08);
  border-radius: var(--pf-r);
}

.page-faq .pf-figure--devices .sx-figure__cap {
  color: var(--sx-on-dark-soft);
}

.page-faq .pf-devices {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 36px;
}

.page-faq .pf-device {
  padding: 28px 24px 30px;
  border-radius: var(--pf-r);
  background-color: rgba(251, 247, 242, 0.06);
  box-shadow: inset 0 0 0 1px rgba(235, 217, 163, 0.26);
  transition: background-color 240ms ease-out, box-shadow 240ms ease-out;
}

.page-faq .pf-device:hover {
  background-color: rgba(251, 247, 242, 0.1);
  box-shadow: inset 0 0 0 1px rgba(235, 217, 163, 0.5);
}

.page-faq .pf-device__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--pf-r-sm);
  background-color: rgba(201, 162, 39, 0.14);
  color: var(--sx-gold-soft);
}

.page-faq .pf-device__name {
  margin: 18px 0 6px;
  font-family: var(--sx-serif);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--sx-cream);
}

.page-faq .pf-device__meta {
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(235, 217, 163, 0.24);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--sx-gold-soft);
  font-variant-numeric: tabular-nums;
}

.page-faq .pf-device__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-faq .pf-device__list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--sx-on-dark);
}

.page-faq .pf-device__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--sx-gold);
}

.page-faq .pf-device__list li:last-child {
  margin-bottom: 0;
}

.page-faq .pf-devices__tail {
  margin: 32px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(235, 217, 163, 0.22);
  font-size: 15px;
  line-height: 1.8;
  color: var(--sx-on-dark);
}

.page-faq .pf-devices__tail a {
  color: var(--sx-gold-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 常见问题 ---------- */
.page-faq .pf-faq {
  margin-top: 30px;
  border-top: 1px solid var(--sx-line);
}

.page-faq .pf-faq__item {
  border-bottom: 1px solid var(--sx-line);
}

.page-faq .pf-faq__item summary {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--sx-serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--sx-ink);
}

.page-faq .pf-faq__item summary::-webkit-details-marker {
  display: none;
}

.page-faq .pf-faq__item summary::marker {
  content: "";
}

.page-faq .pf-faq__item summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin: 9px 4px 0 auto;
  border-right: 1.5px solid var(--sx-red);
  border-bottom: 1.5px solid var(--sx-red);
  transform: rotate(45deg);
  transition: transform 200ms ease-out;
}

.page-faq .pf-faq__item[open] summary::after {
  transform: rotate(-135deg);
}

.page-faq .pf-faq__item summary:hover {
  color: var(--sx-red);
}

.page-faq .pf-faq__item summary:focus-visible {
  outline: 2px solid var(--sx-gold);
  outline-offset: 4px;
  border-radius: 4px;
}

.page-faq .pf-faq__answer {
  padding: 0 26px 22px 0;
}

.page-faq .pf-faq__answer p {
  margin: 0;
  max-width: 680px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--pf-ink-soft);
}

.page-faq .pf-faq__answer a {
  color: var(--sx-red);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-faq .pf-faq__tail {
  margin: 26px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--sx-gray);
}

/* ---------- 术语对照 ---------- */
.page-faq .pf-section--glossary {
  background-color: var(--sx-celadon-soft);
  border-radius: 0 0 var(--pf-r) var(--pf-r);
}

.page-faq .pf-glossary__scroll {
  margin-top: 28px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--pf-r-sm);
}

.page-faq .pf-glossary {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  background-color: var(--sx-cream);
  font-size: 15px;
}

.page-faq .pf-glossary__caption {
  caption-side: top;
  padding: 0 0 12px;
  text-align: left;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--sx-gray);
}

.page-faq .pf-glossary th,
.page-faq .pf-glossary td {
  padding: 14px 18px;
  text-align: left;
  vertical-align: top;
  line-height: 1.7;
}

.page-faq .pf-glossary thead th {
  background-color: var(--sx-gold-soft);
  color: var(--sx-ink);
  font-family: var(--sx-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.page-faq .pf-glossary tbody th {
  width: 30%;
  font-family: var(--sx-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--sx-red);
  border-bottom: 1px solid var(--sx-line);
  white-space: nowrap;
}

.page-faq .pf-glossary tbody td {
  color: var(--pf-ink-soft);
  border-bottom: 1px solid var(--sx-line);
}

.page-faq .pf-glossary tbody tr:last-child th,
.page-faq .pf-glossary tbody tr:last-child td {
  border-bottom: 0;
}

.page-faq .pf-glossary__tail {
  margin: 22px 0 0;
  max-width: 720px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--sx-gray);
}

.page-faq .pf-glossary__tail a {
  color: var(--sx-red);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 收尾联系 ---------- */
.page-faq .pf-contact {
  position: relative;
  margin-top: 0;
  padding: 52px 0 56px;
  background-color: var(--sx-ink);
  color: var(--sx-cream);
  border-radius: 0 0 var(--pf-r) var(--pf-r);
}

.page-faq .pf-contact::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(104deg,
    var(--sx-gold) 0 30%,
    var(--sx-red) 30% 72%,
    var(--sx-wine) 72% 100%);
}

.page-faq .pf-contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
}

.page-faq .pf-contact__eyebrow {
  margin: 0 0 12px;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--sx-gold);
}

.page-faq .pf-contact__title {
  margin: 0 0 16px;
  font-family: var(--sx-serif);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.34;
  color: var(--sx-cream);
}

.page-faq .pf-contact__lead {
  margin: 0 0 26px;
  max-width: 620px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--sx-on-dark);
}

.page-faq .pf-contact__channels {
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}

.page-faq .pf-contact__channel {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(235, 217, 163, 0.2);
}

.page-faq .pf-contact__label {
  flex: none;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--sx-on-dark-soft);
}

.page-faq .pf-contact__value {
  font-family: var(--sx-serif);
  font-size: 18px;
  color: var(--sx-gold-soft);
  text-decoration: none;
  word-break: break-all;
}

.page-faq .pf-contact__value:hover,
.page-faq .pf-contact__value:focus-visible {
  color: var(--sx-gold);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.page-faq .pf-contact__btn {
  display: inline-block;
}

.page-faq .pf-contact__side {
  padding: 26px 24px 28px;
  border-radius: var(--pf-r);
  background-color: rgba(251, 247, 242, 0.05);
  box-shadow: inset 0 0 0 1px rgba(235, 217, 163, 0.2);
}

.page-faq .pf-contact__side-title {
  margin: 0 0 10px;
  font-family: var(--sx-serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--sx-gold-soft);
}

.page-faq .pf-contact__side-lead {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--sx-on-dark-soft);
}

.page-faq .pf-contact__checklist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-faq .pf-contact__checklist li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--sx-on-dark);
}

.page-faq .pf-contact__checklist li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 11px;
  height: 6px;
  border-left: 1.5px solid var(--sx-gold);
  border-bottom: 1.5px solid var(--sx-gold);
  transform: rotate(-45deg);
}

.page-faq .pf-contact__checklist li:last-child {
  margin-bottom: 0;
}

/* ---------- 中屏 ---------- */
@media (min-width: 700px) {
  .page-faq .pf-hero {
    padding: 52px 0 64px;
  }

  .page-faq .pf-hero__title {
    font-size: 42px;
    max-width: 620px;
  }

  .page-faq .pf-hero__lead {
    font-size: 17px;
  }

  .page-faq .pf-section {
    padding: 66px 0;
  }

  .page-faq .pf-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
    margin-top: 44px;
  }

  .page-faq .pf-steps__item {
    padding-left: 0;
    padding-top: 62px;
    padding-bottom: 0;
  }

  .page-faq .pf-steps__item::before {
    left: 50px;
    right: -30px;
    top: 21px;
    bottom: auto;
    width: auto;
    height: 1.5px;
    background: linear-gradient(to right, var(--sx-gold), rgba(201, 162, 39, 0.16));
  }

  .page-faq .pf-steps__item:last-child::before {
    display: none;
  }

  .page-faq .pf-steps__dot {
    left: 0;
    top: 0;
  }

  .page-faq .pf-steps__title {
    margin-top: 0;
  }

  .page-faq .pf-devices {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }

  .page-faq .pf-contact {
    padding: 72px 0 76px;
  }

  .page-faq .pf-contact__title {
    font-size: 36px;
  }
}

/* ---------- 桌面 ---------- */
@media (min-width: 1000px) {
  .page-faq .pf-hero {
    padding: 76px 0 96px;
  }

  .page-faq .pf-hero__slab {
    display: block;
    position: absolute;
    top: -14%;
    right: -5%;
    width: 44%;
    height: 128%;
    background: linear-gradient(104deg,
      rgba(124, 21, 32, 0.96) 0%,
      rgba(193, 39, 45, 0.94) 64%,
      rgba(193, 39, 45, 0.9) 100%);
    transform: skewX(-13deg);
    transform-origin: 100% 0;
    border-radius: 0 0 0 56px;
  }

  .page-faq .pf-hero__title {
    font-size: 54px;
    max-width: 660px;
    line-height: 1.22;
  }

  .page-faq .pf-hero__lead {
    max-width: 560px;
  }

  .page-faq .pf-hero__jump,
  .page-faq .pf-hero__stats {
    max-width: 560px;
  }

  .page-faq .pf-hero__stat dd {
    font-size: 22px;
  }

  .page-faq .pf-hero__stat dd .pf-num {
    font-size: 38px;
  }

  .page-faq .pf-section {
    padding: 88px 0;
  }

  .page-faq .sx-section__title {
    font-size: 38px;
    line-height: 1.24;
  }

  .page-faq .pf-rules__trigger {
    padding: 24px 4px;
  }

  .page-faq .pf-rules__label {
    font-size: 19px;
  }

  .page-faq .pf-rules__panel {
    padding-left: 52px;
  }

  .page-faq .pf-rules__list li {
    font-size: 16px;
  }

  .page-faq .pf-figure--path {
    margin-top: 52px;
  }

  .page-faq .pf-devices {
    gap: 26px;
    margin-top: 42px;
  }

  .page-faq .pf-device {
    padding: 34px 30px 36px;
  }

  .page-faq .pf-faq__item summary {
    font-size: 19px;
    padding: 22px 0;
  }

  .page-faq .pf-faq__answer {
    padding: 0 60px 26px 0;
  }

  .page-faq .pf-contact__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 56px;
    align-items: start;
  }

  .page-faq .pf-contact__side {
    padding: 30px 28px 32px;
  }
}

@media (min-width: 1240px) {
  .page-faq .pf-hero__slab {
    right: -3%;
    width: 42%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .pf-jump,
  .page-faq .pf-device,
  .page-faq .pf-faq__item summary::after {
    transition: none;
  }
}
</main>

<main id="main-content" class="page-faq">

  <section class="pf-hero">
    <span class="pf-hero__slab" aria-hidden="true"></span>
    <div class="sx-container pf-hero__inner">
      <nav class="sx-crumbs" aria-label="当前位置">
        <a class="sx-crumbs__item" href="/">首页总览</a>
        <span class="sx-crumbs__item" aria-current="page">帮助中心</span>
      </nav>

      <p class="sx-eyebrow">帮助中心</p>
      <h1 class="pf-hero__title">规则先读懂，设备再对上，问题当场有答案</h1>
      <p class="pf-hero__lead">第一次进四喜娱乐中心，先把入门那几条规则读完再动手；手上是 iPhone、iPad 还是 Mac，就翻对应的操作指引。站内每一项功能都挂着一份说明记录，规则和设备两类内容放在同一条路径上，自己翻不到答案时，一封邮件就能转人工。</p>

      <ul class="pf-hero__jump">
        <li><a class="pf-jump" href="#rules">规则说明</a></li>
        <li><a class="pf-jump" href="#steps">三步上手</a></li>
        <li><a class="pf-jump" href="#devices">设备指引</a></li>
        <li><a class="pf-jump" href="#faq">常见问题</a></li>
        <li><a class="pf-jump" href="#glossary">术语对照</a></li>
      </ul>

      <dl class="pf-hero__stats">
        <div class="pf-hero__stat">
          <dt>规则条目</dt>
          <dd><span class="pf-num">36</span> 条</dd>
        </div>
        <div class="pf-hero__stat">
          <dt>设备操作指引</dt>
          <dd><span class="pf-num">42</span> 篇</dd>
        </div>
        <div class="pf-hero__stat">
          <dt>常见问题解答</dt>
          <dd><span class="pf-num">96</span> 个</dd>
        </div>
      </dl>
    </div>
  </section>

  <section class="pf-section" id="rules">
    <div class="sx-container">
      <div class="sx-section__head">
        <p class="sx-eyebrow">规则说明</p>
        <h2 class="sx-section__title">36 条规则条目，分入门、日常、进阶三级</h2>
        <p class="sx-section__lead">入门那 12 条建议第一次来就读完，大概五分钟，读完你就能判断哪些操作会留下记录、哪些页面适合收藏起来反复看。日常与进阶两组不急，用到的时候再回来查。</p>
      </div>

      <div class="sx-accordion pf-rules" data-reveal>
        <div class="sx-accordion__item">
          <h3 class="pf-rules__head">
            <button type="button" class="sx-accordion__trigger pf-rules__trigger" data-accordion-trigger aria-expanded="true" aria-controls="pf-rule-basic">
              <span class="pf-rules__idx">01</span>
              <span class="pf-rules__label">入门 · 第一次进站先读这一组</span>
              <span class="pf-rules__meta">12 条</span>
            </button>
          </h3>
          <div class="sx-accordion__panel pf-rules__panel" id="pf-rule-basic">
            <ol class="pf-rules__list">
              <li>打开网页即可阅读全部内容，注册并不是必需步骤。</li>
              <li>顶部栏目条固定六个入口，位置不随页面多少发生变化。</li>
              <li>每项功能都配一份说明记录，写清用途、适用设备与操作步骤。</li>
              <li>收藏按钮在页面标题右侧，点一下就会记住当前这一页。</li>
              <li>收藏记录存放在你自己的设备上，清空浏览器数据后会一并消失。</li>
              <li>栏目专区的搜索框只匹配栏目名与功能名，输入两个字就会出结果。</li>
              <li>页面上标注的时间是最近一次修订日期，不等于首次发布日。</li>
              <li>遇到不熟悉的功能说法，先去术语对照表确认含义再往下看。</li>
              <li>长文档按段落自动折行，窄屏阅读不需要左右拖动。</li>
              <li>深色分区里的正文字号与浅色区保持一致，不额外缩小。</li>
              <li>详情页底部的返回链接会带你回到所属分类，而不是回到首页。</li>
              <li>同一功能在 iPhone、iPad、Mac 上的操作可能不同，按设备分开看。</li>
            </ol>
          </div>
        </div>

        <div class="sx-accordion__item">
          <h3 class="pf-rules__head">
            <button type="button" class="sx-accordion__trigger pf-rules__trigger" data-accordion-trigger aria-expanded="false" aria-controls="pf-rule-daily">
              <span class="pf-rules__idx">02</span>
              <span class="pf-rules__label">日常 · 用起来之后常翻的几条</span>
              <span class="pf-rules__meta">13 条</span>
            </button>
          </h3>
          <div class="sx-accordion__panel pf-rules__panel" id="pf-rule-daily">
            <p class="pf-rules__note">这一组共 13 条，下面是使用频率最高的 8 条。</p>
            <ol class="pf-rules__list">
              <li>同一台设备上的收藏会跨栏目保留，换栏目也能在收藏入口找到。</li>
              <li>内容中心新增主题的节奏是每周 6 至 10 篇，收藏页不会堆积过期链接。</li>
              <li>版本更新后，相关功能的说明记录会在两周内同步修订。</li>
              <li>设备适配指引以系统大版本为界，小版本差异写在条目末尾的备注里。</li>
              <li>栏目专区支持按一级分类筛选，九个一级分类可交叉查看。</li>
              <li>常用页面收藏后再次访问，加载时间平均缩短约 40%。</li>
              <li>搜索关键词在浏览器本地匹配，输入的内容不会离开你的设备。</li>
              <li>页面内容出现偏差时，可以直接写信给客服邮箱，注明栏目与记录名称。</li>
            </ol>
          </div>
        </div>

        <div class="sx-accordion__item">
          <h3 class="pf-rules__head">
            <button type="button" class="sx-accordion__trigger pf-rules__trigger" data-accordion-trigger aria-expanded="false" aria-controls="pf-rule-advanced">
              <span class="pf-rules__idx">03</span>
              <span class="pf-rules__label">进阶 · 想弄清背后怎么运作再看</span>
              <span class="pf-rules__meta">11 条</span>
            </button>
          </h3>
          <div class="sx-accordion__panel pf-rules__panel" id="pf-rule-advanced">
            <p class="pf-rules__note">这一组共 11 条，下面是问得最多的 6 条。</p>
            <ol class="pf-rules__list">
              <li>功能说明记录统一由功能介绍、适用设备、操作步骤、常见问题四段组成。</li>
              <li>苹果设备帮助文档的常见问题按系统版本标注适配情况，跨版本差异单独列出。</li>
              <li>规则条目修订后，旧版本内容不再保留在页面上，避免两种说法并存。</li>
              <li>每月收集的用户反馈约 800 条，其中约三成会转化为文档修订。</li>
              <li>内容团队 14 人，编辑 6 人负责撰写，文档与测试 5 人负责逐条复现操作。</li>
              <li>术语对照表随新功能上线同步补充，遇到缺项可以提交给客服邮箱。</li>
            </ol>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="pf-section pf-section--steps" id="steps">
    <div class="sx-container">
      <div class="sx-section__head">
        <p class="sx-eyebrow">三步上手</p>
        <h2 class="sx-section__title">第一次来，照这三步走完就能自己找东西</h2>
        <p class="sx-section__lead">不用一上来就研究整个站点，先把下面三件事做完，之后每次回来都省一半时间。</p>
      </div>

      <ol class="pf-steps">
        <li class="pf-steps__item">
          <span class="pf-steps__dot" aria-hidden="true">1</span>
          <h3 class="pf-steps__title">把入门规则读一遍</h3>
          <p class="pf-steps__text">就在本页上方，12 条陈述句，读完你会知道哪些操作会留下记录、哪些页面值得反复来。</p>
        </li>
        <li class="pf-steps__item">
          <span class="pf-steps__dot" aria-hidden="true">2</span>
          <h3 class="pf-steps__title">选一条你最常用的栏目</h3>
          <p class="pf-steps__text">进<a href="/projects/">栏目专区</a>，按九个一级分类找到你要的那一项，功能说明记录就挂在它下面。</p>
        </li>
        <li class="pf-steps__item">
          <span class="pf-steps__dot" aria-hidden="true">3</span>
          <h3 class="pf-steps__title">把常用页收进收藏</h3>
          <p class="pf-steps__text">点标题右侧的收藏按钮即可，不必注册。下次打开直接从收藏入口进去，省掉一层层翻分类的时间。</p>
        </li>
      </ol>

      <figure class="sx-figure pf-figure pf-figure--path">
        <span class="sx-figure__img">
          <img src="{zhanqunpic:h:720w:1300}" width="1300" height="720" alt="从规则说明到栏目专区、再到收藏标记的三步路径示意图，用金色序号圆点与四喜红胶囊标签连成一条线">
        </span>
        <figcaption class="sx-figure__cap">读规则、选栏目、收收藏，三步走完你就有了自己的常用入口。</figcaption>
      </figure>
    </div>
  </section>

  <section class="pf-section pf-section--devices" id="devices">
    <div class="sx-container">
      <div class="sx-section__head">
        <p class="sx-eyebrow">按设备查指引</p>
        <h2 class="sx-section__title">42 篇操作指引，按你手上那台设备分组</h2>
        <p class="sx-section__lead">每篇开头都会写清适配的系统版本，系统大版本更新之后，我们会在两周内把差异补进条目末尾。点开你正在用的那一类，直接看这一组收录了什么。</p>
      </div>

      <figure class="sx-figure pf-figure pf-figure--devices">
        <span class="sx-figure__img">
          <img src="{zhanqunpic:h:820w:1280}" width="1280" height="820" loading="lazy" decoding="async" alt="iPhone、iPad 与 Mac 三类苹果设备轮廓并列，并连接到一份文档目录的示意图，画面以金色细线与浅青瓷色块为主">
        </span>
        <figcaption class="sx-figure__cap">三类设备共用同一份指引目录，按系统版本分别标注。</figcaption>
      </figure>

      <div class="pf-devices">
        <article class="pf-device">
          <span class="pf-device__glyph" aria-hidden="true">
            <svg viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
              <rect x="9" y="2.5" width="14" height="27" rx="3.5"/>
              <line x1="14" y1="6" x2="18" y2="6"/>
              <line x1="13.5" y1="26" x2="18.5" y2="26"/>
            </svg>
          </span>
          <h3 class="pf-device__name">iPhone</h3>
          <p class="pf-device__meta">18 篇 · 适配 iOS 16 及以上</p>
          <ul class="pf-device__list">
            <li>把栏目专区固定到主屏幕</li>
            <li>窄屏下长文档的折行与字号</li>
            <li>收藏入口在移动端的展开方式</li>
            <li>横屏阅读时的分栏变化</li>
            <li>浏览器返回手势与栏目跳转的关系</li>
          </ul>
        </article>

        <article class="pf-device">
          <span class="pf-device__glyph" aria-hidden="true">
            <svg viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
              <rect x="3" y="4.5" width="26" height="20" rx="3"/>
              <line x1="13" y1="28" x2="19" y2="28"/>
              <line x1="16" y1="24.5" x2="16" y2="28"/>
            </svg>
          </span>
          <h3 class="pf-device__name">iPad</h3>
          <p class="pf-device__meta">14 篇 · 适配 iPadOS 16 及以上</p>
          <ul class="pf-device__list">
            <li>分屏状态下同时看规则与栏目</li>
            <li>用触控笔在长文档上做标记</li>
            <li>横屏时索引网格的列数变化</li>
            <li>键盘快捷键跳转到搜索结果</li>
            <li>收藏列表在分栏视图里的位置</li>
          </ul>
        </article>

        <article class="pf-device">
          <span class="pf-device__glyph" aria-hidden="true">
            <svg viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
              <rect x="2.5" y="6" width="27" height="15" rx="2.5"/>
              <path d="M2.5 21 L8 27 L24 27 L29.5 21"/>
              <line x1="12" y1="27" x2="20" y2="27"/>
            </svg>
          </span>
          <h3 class="pf-device__name">Mac</h3>
          <p class="pf-device__meta">10 篇 · 适配 macOS 13 及以上</p>
          <ul class="pf-device__list">
            <li>宽屏下索引与正文的并排布局</li>
            <li>用浏览器书签同步常用栏目</li>
            <li>多窗口对照两条功能说明</li>
            <li>打印或导出单篇操作步骤</li>
            <li>键盘优先的搜索与筛选方式</li>
          </ul>
        </article>
      </div>

      <p class="pf-devices__tail">手上是更早的系统版本，或者用的是浏览器而不是 App？可以到<a href="/trends/">更新动态</a>看看最近的适配记录，也可以在常见问题里搜一搜关键词。</p>
    </div>
  </section>

  <section class="pf-section pf-section--faq" id="faq">
    <div class="sx-container">
      <div class="sx-section__head">
        <p class="sx-eyebrow">常见问题速查</p>
        <h2 class="sx-section__title">96 个问题按主题排好，点开就是答案</h2>
        <p class="sx-section__lead">下面是问得最多的 9 个，覆盖账号与设置、内容与收藏、设备适配三类场景。答案都控制在 120 字以内，需要分步操作的地方拆成有序步骤。</p>
      </div>

      <div class="pf-faq">
        <details class="pf-faq__item">
          <summary>不注册账号能用吗？</summary>
          <div class="pf-faq__answer">
            <p>可以。阅读规则说明、浏览栏目专区、查看功能说明记录和使用收藏功能，都不需要注册。收藏记录保存在你自己的设备上，不需要提交任何个人信息。</p>
          </div>
        </details>

        <details class="pf-faq__item">
          <summary>换了设备，之前收藏的页面还在吗？</summary>
          <div class="pf-faq__answer">
            <p>不在。收藏保存在原来那台设备的浏览器里，换设备或清空浏览器数据后会消失。如果你习惯多台设备换着用，可以记下页面的栏目名称，在新设备上按分类重新找到。</p>
          </div>
        </details>

        <details class="pf-faq__item">
          <summary>栏目专区的搜索是怎么匹配的？</summary>
          <div class="pf-faq__answer">
            <p>搜索框只匹配栏目名与功能名，不检索正文内容。输入两个字就会开始出结果，出现多条时按一级分类排列。搜索过程在你的浏览器里完成，输入的关键词不会被发送出去。</p>
          </div>
        </details>

        <details class="pf-faq__item">
          <summary>功能说明记录为什么分成四段？</summary>
          <div class="pf-faq__answer">
            <p>四段分别是功能介绍、适用设备、操作步骤与常见问题。先看功能解决什么，再确认自己的设备在不在适配范围内，然后照着步骤做，最后一段收着这一功能最常被问到的情况。</p>
          </div>
        </details>

        <details class="pf-faq__item">
          <summary>在 iPhone 上打开长文档，字太小怎么办？</summary>
          <div class="pf-faq__answer">
            <p>长文档在窄屏下会自动按段落折行，不需要左右拖动。如果仍觉得偏小，可以用浏览器的缩放功能调整，排版会跟着重新流动，不会出现内容被切掉的情况。</p>
          </div>
        </details>

        <details class="pf-faq__item">
          <summary>我的系统版本比较旧，指引还对得上吗？</summary>
          <div class="pf-faq__answer">
            <p>每篇指引开头都标注了适配的系统版本。如果你的版本较低，先看条目末尾的备注，那里会写清旧版本与新版本操作上的差别；备注里没提到的部分，操作方式通常是一致的。</p>
          </div>
        </details>

        <details class="pf-faq__item">
          <summary>在 iPad 上分屏同时看两类内容，版面会乱吗？</summary>
          <div class="pf-faq__answer">
            <p>不会。分屏时栏目索引与正文会自动改成上下排列，横屏恢复成左右并排。你可以一边开着规则说明，一边对照栏目专区里的功能记录。</p>
          </div>
        </details>

        <details class="pf-faq__item">
          <summary>看到说明记录里写错了，怎么反馈？</summary>
          <div class="pf-faq__answer">
            <p>写信到客服邮箱即可，注明栏目名称、记录标题和具体是哪一句有问题。我们会核对后修订，改好的内容会记进<a href="/trends/">更新动态</a>的文档修订一类里。每月收到的反馈中约有 30% 会转化成实际修订。</p>
          </div>
        </details>

        <details class="pf-faq__item">
          <summary>内容多久更新一次？</summary>
          <div class="pf-faq__answer">
            <p>内容中心每周新增 6 至 10 篇主题内容；功能相关的说明记录在版本更新后两周内同步修订；苹果设备帮助文档遇到系统大版本更新时，会先补差异说明，再逐篇复核步骤。</p>
          </div>
        </details>
      </div>

      <p class="pf-faq__tail">这 9 个只是开头。完整的 96 个问题按账号与设置、内容与收藏、设备适配、版本差异四类归好，顺着上面的设备区块或者直接用浏览器查找，都能很快定位。</p>
    </div>
  </section>

  <section class="pf-section pf-section--glossary" id="glossary">
    <div class="sx-container">
      <div class="sx-section__head">
        <p class="sx-eyebrow">术语对照</p>
        <h2 class="sx-section__title">先把几个高频说法对上号</h2>
        <p class="sx-section__lead">站内反复出现的说法，集中放在这里解释一遍。读说明记录的时候碰到不认识的词，回这一页查最快。</p>
      </div>

      <div class="pf-glossary__scroll">
        <table class="pf-glossary">
          <caption class="pf-glossary__caption">站内高频术语与含义对照</caption>
          <thead>
            <tr>
              <th scope="col">术语</th>
              <th scope="col">含义</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">栏目专区</th>
              <td>按分类汇总全站功能的入口页面，每一项都挂着对应的说明记录。</td>
            </tr>
            <tr>
              <th scope="row">说明记录</th>
              <td>某项功能的完整档案，由功能介绍、适用设备、操作步骤与常见问题四段组成。</td>
            </tr>
            <tr>
              <th scope="row">一级分类</th>
              <td>栏目里最上层的九个大类，用于把功能归到入门指引、规则说明、功能操作等分组下。</td>
            </tr>
            <tr>
              <th scope="row">收录</th>
              <td>表示这条内容已经整理进对应栏目，可以在站内直接查到，并且会随版本继续修订。</td>
            </tr>
            <tr>
              <th scope="row">设备适配</th>
              <td>说明某项功能在 iPhone、iPad 或 Mac 上能否正常使用，以及需要注意的系统版本差别。</td>
            </tr>
            <tr>
              <th scope="row">系统版本标注</th>
              <td>写在指引开头的一行说明，标出这条操作适用的系统版本区间。</td>
            </tr>
            <tr>
              <th scope="row">收藏</th>
              <td>把常用页面记在本地，下一次可以从收藏入口直接打开，不需要重新按分类查找。</td>
            </tr>
            <tr>
              <th scope="row">修订记录</th>
              <td>页面最后一次改动的日期，表示这条内容目前呈现的版本。</td>
            </tr>
          </tbody>
        </table>
      </div>

      <p class="pf-glossary__tail">还遇到别的说法对不上？带上下文发给客服邮箱，我们会把缺的术语补进这张表，也顺便看看是不是说明记录写得不够直白。更多内容来源与引用约定，可以看<a href="/statement/">内容声明</a>。</p>
    </div>
  </section>

  <section class="pf-contact" id="contact">
    <div class="sx-container">
      <div class="pf-contact__grid">
        <div class="pf-contact__main">
          <p class="pf-contact__eyebrow">还是没解决</p>
          <h2 class="pf-contact__title">把问题交给我们，比你自己翻更快</h2>
          <p class="pf-contact__lead">上面对不上的情况，直接找人工。客服团队 3 人轮值，服务时间是每日 9:00 至 18:00（法定节假日除外），工作时间内收到的邮件通常在当天回复。</p>

          <ul class="pf-contact__channels">
            <li class="pf-contact__channel">
              <span class="pf-contact__label">客服邮箱</span>
              <a class="pf-contact__value" href="/consult/">email@sixi-free-hub.com.cn</a>
            </li>
            <li class="pf-contact__channel">
              <span class="pf-contact__label">客服电话</span>
              <a class="pf-contact__value" href="/consult/">13758810761</a>
            </li>
          </ul>

          <a class="sx-btn sx-btn--gold pf-contact__btn" href="/consult/">去咨询服务页</a>
        </div>

        <div class="pf-contact__side">
          <h3 class="pf-contact__side-title">写信前，把这几项整理好</h3>
          <p class="pf-contact__side-lead">信息给全，我们一次就能核对完，省掉来回几封邮件。</p>
          <ul class="pf-contact__checklist">
            <li>你在用的设备类型与系统版本</li>
            <li>出问题的栏目名称，以及功能记录标题</li>
            <li>你看到的页面上，哪一句话和实际不符</li>
            <li>操作到第几步时卡住，前面几步是否顺利</li>
            <li>你希望改成什么，或者想补上哪一段说明</li>
          </ul>
        </div>
      </div>
    </div>
  </section>

</main>

.page-faq {
  --pf-r: 28px;
  --pf-r-sm: 18px;
  --pf-ink-soft: rgba(22, 23, 27, 0.68);
  background-color: var(--sx-cream);
  color: var(--sx-ink);
  font-family: var(--sx-sans);
  overflow-x: clip;
}

.page-faq .pf-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------- 首屏 ---------- */
.page-faq .pf-hero {
  position: relative;
  overflow: hidden;
  padding: 40px 0 48px;
  background-color: var(--sx-cream);
}

.page-faq .pf-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(104deg,
    var(--sx-wine) 0 34%,
    var(--sx-red) 34% 70%,
    var(--sx-gold) 70% 100%);
}

.page-faq .pf-hero__slab {
  display: none;
}

.page-faq .pf-hero__inner {
  position: relative;
  z-index: 1;
}

.page-faq .pf-hero .sx-crumbs {
  margin-bottom: 22px;
}

.page-faq .pf-hero__title {
  margin: 14px 0 18px;
  font-family: var(--sx-serif);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.28;
  letter-spacing: 0.01em;
  color: var(--sx-ink);
}

.page-faq .pf-hero__lead {
  max-width: 640px;
  margin: 0;
  font-size: 16px;
  line-height: 1.78;
  color: var(--pf-ink-soft);
}

.page-faq .pf-hero__jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.page-faq .pf-jump {
  display: inline-block;
  padding: 8px 16px;
  border-radius: var(--sx-pill);
  border: 1px solid var(--sx-line-strong);
  background-color: transparent;
  color: var(--sx-ink);
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color 200ms ease-out, border-color 200ms ease-out, color 200ms ease-out;
}

.page-faq .pf-jump:hover,
.page-faq .pf-jump:focus-visible {
  background-color: var(--sx-red);
  border-color: var(--sx-red);
  color: var(--sx-cream);
}

.page-faq .pf-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 18px;
  margin: 32px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--sx-line);
}

.page-faq .pf-hero__stat {
  min-width: 0;
}

.page-faq .pf-hero__stat dt {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--sx-gray);
}

.page-faq .pf-hero__stat dd {
  margin: 0;
  font-family: var(--sx-serif);
  font-size: 24px;
  line-height: 1.2;
  color: var(--sx-ink);
}

.page-faq .pf-hero__stat dd .pf-num {
  font-size: 34px;
  font-weight: 700;
  color: var(--sx-red);
  margin-right: 2px;
}

/* ---------- 通用板块 ---------- */
.page-faq .pf-section {
  padding: 48px 0;
}

.page-faq .sx-section__head {
  max-width: 720px;
}

.page-faq .sx-section__title {
  font-family: var(--sx-serif);
}

/* ---------- 规则说明 ---------- */
.page-faq .pf-rules {
  margin-top: 30px;
  border-top: 1px solid var(--sx-line);
}

.page-faq .pf-rules .sx-accordion__item {
  border-bottom: 1px solid var(--sx-line);
}

.page-faq .pf-rules__head {
  margin: 0;
  font-size: inherit;
  font-weight: 400;
}

.page-faq .pf-rules__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--sx-ink);
  font-family: var(--sx-sans);
}

.page-faq .pf-rules__idx {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--sx-gold);
  color: var(--sx-red);
  font-family: var(--sx-serif);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.page-faq .pf-rules__label {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--sx-serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.55;
}

.page-faq .pf-rules__meta {
  flex: none;
  padding: 4px 12px;
  border-radius: var(--sx-pill);
  background-color: var(--sx-gold-soft);
  color: var(--sx-ink);
  font-size: 13px;
  letter-spacing: 0.04em;
}

.page-faq .pf-rules__panel {
  padding: 0 0 26px;
}

.page-faq .pf-rules__note {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--sx-gray);
}

.page-faq .pf-rules__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: pf-rule;
}

.page-faq .pf-rules__list li {
  position: relative;
  counter-increment: pf-rule;
  padding: 0 0 0 34px;
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--pf-ink-soft);
}

.page-faq .pf-rules__list li::before {
  content: counter(pf-rule, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--sx-gold);
  letter-spacing: 0.04em;
}

.page-faq .pf-rules__list li:last-child {
  margin-bottom: 0;
}

/* ---------- 三步上手 ---------- */
.page-faq .pf-section--steps {
  background-color: #F4EDE4;
}

.page-faq .pf-steps {
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

.page-faq .pf-steps__item {
  position: relative;
  padding-left: 60px;
  padding-bottom: 34px;
}

.page-faq .pf-steps__item:last-child {
  padding-bottom: 0;
}

.page-faq .pf-steps__item::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 46px;
  bottom: 8px;
  width: 1.5px;
  background: linear-gradient(to bottom, var(--sx-gold), rgba(201, 162, 39, 0.12));
}

.page-faq .pf-steps__item:last-child::before {
  display: none;
}

.page-faq .pf-steps__dot {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--sx-cream);
  border: 1.5px solid var(--sx-gold);
  color: var(--sx-red);
  font-family: var(--sx-serif);
  font-size: 20px;
  font-weight: 700;
}

.page-faq .pf-steps__title {
  margin: 6px 0 8px;
  font-family: var(--sx-serif);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--sx-ink);
}

.page-faq .pf-steps__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.78;
  color: var(--pf-ink-soft);
}

.page-faq .pf-steps__text a {
  color: var(--sx-red);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-faq .pf-figure {
  margin: 34px 0 0;
}

.page-faq .pf-figure .sx-figure__img {
  display: block;
  border-radius: var(--pf-r);
  overflow: hidden;
  background-color: var(--sx-celadon-soft);
}

.page-faq .pf-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.page-faq .pf-figure .sx-figure__cap {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--sx-gray);
}

/* ---------- 设备指引 ---------- */
.page-faq .pf-section--devices {
  background-color: var(--sx-celadon);
  color: var(--sx-cream);
  border-radius: var(--pf-r) var(--pf-r) 0 0;
}

.page-faq .pf-section--devices .sx-eyebrow {
  color: var(--sx-gold-soft);
}

.page-faq .pf-section--devices .sx-section__title {
  color: var(--sx-cream);
}

.page-faq .pf-section--devices .sx-section__lead {
  color: var(--sx-on-dark);
}

.page-faq .pf-figure--devices {
  margin: 30px 0 0;
}

.page-faq .pf-figure--devices .sx-figure__img {
  background-color: rgba(251, 247, 242, 0.08);
  border-radius: var(--pf-r);
}

.page-faq .pf-figure--devices .sx-figure__cap {
  color: var(--sx-on-dark-soft);
}

.page-faq .pf-devices {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 36px;
}

.page-faq .pf-device {
  padding: 28px 24px 30px;
  border-radius: var(--pf-r);
  background-color: rgba(251, 247, 242, 0.06);
  box-shadow: inset 0 0 0 1px rgba(235, 217, 163, 0.26);
  transition: background-color 240ms ease-out, box-shadow 240ms ease-out;
}

.page-faq .pf-device:hover {
  background-color: rgba(251, 247, 242, 0.1);
  box-shadow: inset 0 0 0 1px rgba(235, 217, 163, 0.5);
}

.page-faq .pf-device__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--pf-r-sm);
  background-color: rgba(201, 162, 39, 0.14);
  color: var(--sx-gold-soft);
}

.page-faq .pf-device__name {
  margin: 18px 0 6px;
  font-family: var(--sx-serif);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--sx-cream);
}

.page-faq .pf-device__meta {
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(235, 217, 163, 0.24);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--sx-gold-soft);
  font-variant-numeric: tabular-nums;
}

.page-faq .pf-device__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-faq .pf-device__list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--sx-on-dark);
}

.page-faq .pf-device__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--sx-gold);
}

.page-faq .pf-device__list li:last-child {
  margin-bottom: 0;
}

.page-faq .pf-devices__tail {
  margin: 32px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(235, 217, 163, 0.22);
  font-size: 15px;
  line-height: 1.8;
  color: var(--sx-on-dark);
}

.page-faq .pf-devices__tail a {
  color: var(--sx-gold-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 常见问题 ---------- */
.page-faq .pf-faq {
  margin-top: 30px;
  border-top: 1px solid var(--sx-line);
}

.page-faq .pf-faq__item {
  border-bottom: 1px solid var(--sx-line);
}

.page-faq .pf-faq__item summary {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--sx-serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--sx-ink);
}

.page-faq .pf-faq__item summary::-webkit-details-marker {
  display: none;
}

.page-faq .pf-faq__item summary::marker {
  content: "";
}

.page-faq .pf-faq__item summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin: 9px 4px 0 auto;
  border-right: 1.5px solid var(--sx-red);
  border-bottom: 1.5px solid var(--sx-red);
  transform: rotate(45deg);
  transition: transform 200ms ease-out;
}

.page-faq .pf-faq__item[open] summary::after {
  transform: rotate(-135deg);
}

.page-faq .pf-faq__item summary:hover {
  color: var(--sx-red);
}

.page-faq .pf-faq__item summary:focus-visible {
  outline: 2px solid var(--sx-gold);
  outline-offset: 4px;
  border-radius: 4px;
}

.page-faq .pf-faq__answer {
  padding: 0 26px 22px 0;
}

.page-faq .pf-faq__answer p {
  margin: 0;
  max-width: 680px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--pf-ink-soft);
}

.page-faq .pf-faq__answer a {
  color: var(--sx-red);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-faq .pf-faq__tail {
  margin: 26px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--sx-gray);
}

/* ---------- 术语对照 ---------- */
.page-faq .pf-section--glossary {
  background-color: var(--sx-celadon-soft);
  border-radius: 0 0 var(--pf-r) var(--pf-r);
}

.page-faq .pf-glossary__scroll {
  margin-top: 28px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--pf-r-sm);
}

.page-faq .pf-glossary {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  background-color: var(--sx-cream);
  font-size: 15px;
}

.page-faq .pf-glossary__caption {
  caption-side: top;
  padding: 0 0 12px;
  text-align: left;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--sx-gray);
}

.page-faq .pf-glossary th,
.page-faq .pf-glossary td {
  padding: 14px 18px;
  text-align: left;
  vertical-align: top;
  line-height: 1.7;
}

.page-faq .pf-glossary thead th {
  background-color: var(--sx-gold-soft);
  color: var(--sx-ink);
  font-family: var(--sx-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.page-faq .pf-glossary tbody th {
  width: 30%;
  font-family: var(--sx-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--sx-red);
  border-bottom: 1px solid var(--sx-line);
  white-space: nowrap;
}

.page-faq .pf-glossary tbody td {
  color: var(--pf-ink-soft);
  border-bottom: 1px solid var(--sx-line);
}

.page-faq .pf-glossary tbody tr:last-child th,
.page-faq .pf-glossary tbody tr:last-child td {
  border-bottom: 0;
}

.page-faq .pf-glossary__tail {
  margin: 22px 0 0;
  max-width: 720px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--sx-gray);
}

.page-faq .pf-glossary__tail a {
  color: var(--sx-red);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 收尾联系 ---------- */
.page-faq .pf-contact {
  position: relative;
  margin-top: 0;
  padding: 52px 0 56px;
  background-color: var(--sx-ink);
  color: var(--sx-cream);
  border-radius: 0 0 var(--pf-r) var(--pf-r);
}

.page-faq .pf-contact::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(104deg,
    var(--sx-gold) 0 30%,
    var(--sx-red) 30% 72%,
    var(--sx-wine) 72% 100%);
}

.page-faq .pf-contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
}

.page-faq .pf-contact__eyebrow {
  margin: 0 0 12px;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--sx-gold);
}

.page-faq .pf-contact__title {
  margin: 0 0 16px;
  font-family: var(--sx-serif);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.34;
  color: var(--sx-cream);
}

.page-faq .pf-contact__lead {
  margin: 0 0 26px;
  max-width: 620px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--sx-on-dark);
}

.page-faq .pf-contact__channels {
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}

.page-faq .pf-contact__channel {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(235, 217, 163, 0.2);
}

.page-faq .pf-contact__label {
  flex: none;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--sx-on-dark-soft);
}

.page-faq .pf-contact__value {
  font-family: var(--sx-serif);
  font-size: 18px;
  color: var(--sx-gold-soft);
  text-decoration: none;
  word-break: break-all;
}

.page-faq .pf-contact__value:hover,
.page-faq .pf-contact__value:focus-visible {
  color: var(--sx-gold);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.page-faq .pf-contact__btn {
  display: inline-block;
}

.page-faq .pf-contact__side {
  padding: 26px 24px 28px;
  border-radius: var(--pf-r);
  background-color: rgba(251, 247, 242, 0.05);
  box-shadow: inset 0 0 0 1px rgba(235, 217, 163, 0.2);
}

.page-faq .pf-contact__side-title {
  margin: 0 0 10px;
  font-family: var(--sx-serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--sx-gold-soft);
}

.page-faq .pf-contact__side-lead {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--sx-on-dark-soft);
}

.page-faq .pf-contact__checklist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-faq .pf-contact__checklist li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--sx-on-dark);
}

.page-faq .pf-contact__checklist li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 11px;
  height: 6px;
  border-left: 1.5px solid var(--sx-gold);
  border-bottom: 1.5px solid var(--sx-gold);
  transform: rotate(-45deg);
}

.page-faq .pf-contact__checklist li:last-child {
  margin-bottom: 0;
}

/* ---------- 中屏 ---------- */
@media (min-width: 700px) {
  .page-faq .pf-hero {
    padding: 52px 0 64px;
  }

  .page-faq .pf-hero__title {
    font-size: 42px;
    max-width: 620px;
  }

  .page-faq .pf-hero__lead {
    font-size: 17px;
  }

  .page-faq .pf-section {
    padding: 66px 0;
  }

  .page-faq .pf-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
    margin-top: 44px;
  }

  .page-faq .pf-steps__item {
    padding-left: 0;
    padding-top: 62px;
    padding-bottom: 0;
  }

  .page-faq .pf-steps__item::before {
    left: 50px;
    right: -30px;
    top: 21px;
    bottom: auto;
    width: auto;
    height: 1.5px;
    background: linear-gradient(to right, var(--sx-gold), rgba(201, 162, 39, 0.16));
  }

  .page-faq .pf-steps__item:last-child::before {
    display: none;
  }

  .page-faq .pf-steps__dot {
    left: 0;
    top: 0;
  }

  .page-faq .pf-steps__title {
    margin-top: 0;
  }

  .page-faq .pf-devices {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }

  .page-faq .pf-contact {
    padding: 72px 0 76px;
  }

  .page-faq .pf-contact__title {
    font-size: 36px;
  }
}

/* ---------- 桌面 ---------- */
@media (min-width: 1000px) {
  .page-faq .pf-hero {
    padding: 76px 0 96px;
  }

  .page-faq .pf-hero__slab {
    display: block;
    position: absolute;
    top: -14%;
    right: -5%;
    width: 44%;
    height: 128%;
    background: linear-gradient(104deg,
      rgba(124, 21, 32, 0.96) 0%,
      rgba(193, 39, 45, 0.94) 64%,
      rgba(193, 39, 45, 0.9) 100%);
    transform: skewX(-13deg);
    transform-origin: 100% 0;
    border-radius: 0 0 0 56px;
  }

  .page-faq .pf-hero__title {
    font-size: 54px;
    max-width: 660px;
    line-height: 1.22;
  }

  .page-faq .pf-hero__lead {
    max-width: 560px;
  }

  .page-faq .pf-hero__jump,
  .page-faq .pf-hero__stats {
    max-width: 560px;
  }

  .page-faq .pf-hero__stat dd {
    font-size: 22px;
  }

  .page-faq .pf-hero__stat dd .pf-num {
    font-size: 38px;
  }

  .page-faq .pf-section {
    padding: 88px 0;
  }

  .page-faq .sx-section__title {
    font-size: 38px;
    line-height: 1.24;
  }

  .page-faq .pf-rules__trigger {
    padding: 24px 4px;
  }

  .page-faq .pf-rules__label {
    font-size: 19px;
  }

  .page-faq .pf-rules__panel {
    padding-left: 52px;
  }

  .page-faq .pf-rules__list li {
    font-size: 16px;
  }

  .page-faq .pf-figure--path {
    margin-top: 52px;
  }

  .page-faq .pf-devices {
    gap: 26px;
    margin-top: 42px;
  }

  .page-faq .pf-device {
    padding: 34px 30px 36px;
  }

  .page-faq .pf-faq__item summary {
    font-size: 19px;
    padding: 22px 0;
  }

  .page-faq .pf-faq__answer {
    padding: 0 60px 26px 0;
  }

  .page-faq .pf-contact__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 56px;
    align-items: start;
  }

  .page-faq .pf-contact__side {
    padding: 30px 28px 32px;
  }
}

@media (min-width: 1240px) {
  .page-faq .pf-hero__slab {
    right: -3%;
    width: 42%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .pf-jump,
  .page-faq .pf-device,
  .page-faq .pf-faq__item summary::after {
    transition: none;
  }
}