.page-faq {
  --faq-pad: clamp(52px, 8vw, 104px);
  --faq-line-soft: rgba(16, 24, 21, 0.12);
  background: var(--pg-ink);
  color: var(--pg-paper);
  overflow-x: hidden;
}

.page-faq .pg-container {
  max-width: var(--pg-max);
}

.page-faq .faq-hero__crumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  margin: 0 0 clamp(26px, 4vw, 44px);
  font-family: var(--pg-font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--pg-mist);
}

.page-faq .faq-hero__crumb a {
  color: var(--pg-mist);
  text-decoration: none;
}

.page-faq .faq-hero__crumb a:hover,
.page-faq .faq-hero__crumb a:focus-visible {
  color: var(--pg-cyan);
}

.page-faq .faq-hero__crumb li + li::before {
  content: "/";
  margin-right: 6px;
  color: var(--pg-amber);
  opacity: 0.7;
}

.page-faq .faq-hero {
  position: relative;
  padding-block: calc(var(--pg-header-h) + 34px) clamp(52px, 8vw, 92px);
  background:
    radial-gradient(120% 90% at 86% -14%, rgba(37, 214, 196, 0.16), transparent 62%),
    linear-gradient(158deg, var(--pg-ink) 0%, var(--pg-ink-2) 56%, var(--pg-ink) 100%);
  overflow: hidden;
}

.page-faq .faq-hero::after {
  content: "";
  position: absolute;
  right: -18%;
  bottom: -46%;
  width: 58vmax;
  height: 58vmax;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 34%, rgba(227, 167, 47, 0.12), transparent 64%);
  pointer-events: none;
}

.page-faq .faq-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(30px, 5vw, 58px);
  align-items: end;
}

.page-faq .faq-hero__eyebrow,
.page-faq .faq-crowd__eyebrow,
.page-faq .faq-qa__eyebrow,
.page-faq .faq-trace__eyebrow,
.page-faq .faq-paths__eyebrow,
.page-faq .faq-support__eyebrow {
  margin: 0 0 14px;
  font-family: var(--pg-font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.page-faq .faq-hero__eyebrow {
  color: var(--pg-cyan);
}

.page-faq .faq-hero__title {
  margin: 0 0 clamp(18px, 3vw, 28px);
  font-family: var(--pg-font-display);
  font-weight: 200;
  font-size: clamp(2.4rem, 8vw, 5.2rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--pg-warm);
}

.page-faq .faq-hero__lead {
  max-width: 46ch;
  margin: 0;
  font-family: var(--pg-font-body);
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  line-height: 1.85;
  color: rgba(244, 239, 223, 0.82);
}

.page-faq .faq-hero__figure {
  position: relative;
  margin: 0;
  border-radius: 30px 30px 30px 10px;
  overflow: hidden;
  border: 1px solid var(--pg-line);
  background: rgba(11, 43, 36, 0.5);
}

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

.page-faq .faq-hero__caption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 7px 14px;
  border-radius: var(--pg-radius-pill);
  background: rgba(11, 43, 36, 0.82);
  border: 1px solid rgba(227, 167, 47, 0.4);
  font-family: var(--pg-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--pg-paper);
}

.page-faq .faq-crowd {
  padding-block: clamp(44px, 6vw, 70px);
  background: var(--pg-ink);
  border-top: 1px solid rgba(227, 167, 47, 0.28);
}

.page-faq .faq-crowd__eyebrow {
  color: var(--pg-amber);
}

.page-faq .faq-crowd__title {
  margin: 0 0 14px;
  font-family: var(--pg-font-display);
  font-weight: 300;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  letter-spacing: -0.01em;
  color: var(--pg-warm);
}

.page-faq .faq-crowd__note {
  max-width: 62ch;
  margin: 0;
  font-family: var(--pg-font-body);
  font-size: 1rem;
  line-height: 1.8;
  color: rgba(244, 239, 223, 0.74);
}

.page-faq .faq-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: clamp(24px, 4vw, 34px) 0 0;
  padding: 0;
}

.page-faq .faq-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border-radius: var(--pg-radius-pill);
  border: 1px solid rgba(227, 167, 47, 0.45);
  background: var(--pg-warm);
  color: var(--pg-ink);
  font-family: var(--pg-font-display);
  font-size: 0.92rem;
  line-height: 1.2;
  text-decoration: none;
  transition: transform 0.25s var(--pg-ease), box-shadow 0.25s var(--pg-ease), border-color 0.25s var(--pg-ease);
}

.page-faq .faq-chip__no {
  font-family: var(--pg-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--pg-amber-deep);
}

.page-faq .faq-chip:hover,
.page-faq .faq-chip:focus-visible {
  transform: translateY(-2px);
  border-color: var(--pg-cyan);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.34);
}

.page-faq .faq-qa {
  padding-block: var(--faq-pad);
  background: var(--pg-paper);
  color: var(--pg-black);
}

.page-faq .faq-qa__head {
  display: grid;
  gap: clamp(24px, 4vw, 40px);
  align-items: end;
}

.page-faq .faq-qa__eyebrow {
  color: var(--pg-amber-deep);
}

.page-faq .faq-qa__title {
  margin: 0 0 16px;
  font-family: var(--pg-font-display);
  font-weight: 300;
  font-size: clamp(1.7rem, 4.4vw, 2.7rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--pg-ink);
}

.page-faq .faq-qa__note {
  max-width: 58ch;
  margin: 0;
  font-family: var(--pg-font-body);
  font-size: 1rem;
  line-height: 1.85;
  color: #33443d;
}

.page-faq .faq-qa__figure {
  margin: 0;
  border-radius: 26px 26px 10px 26px;
  overflow: hidden;
  border: 1px solid rgba(169, 107, 18, 0.28);
  background: var(--pg-paper-2);
}

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

.page-faq .faq-qa__groups {
  display: grid;
  gap: clamp(30px, 4vw, 46px);
  margin-top: clamp(38px, 6vw, 66px);
}

.page-faq .faq-group {
  scroll-margin-top: calc(var(--pg-header-h) + 24px);
  border-top: 1px solid rgba(169, 107, 18, 0.32);
  padding-top: clamp(18px, 3vw, 26px);
}

.page-faq .faq-group__title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
  font-family: var(--pg-font-display);
  font-weight: 700;
  font-size: clamp(1.02rem, 2.2vw, 1.22rem);
  letter-spacing: 0.01em;
  color: var(--pg-ink);
}

.page-faq .faq-group__no {
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--pg-radius-pill);
  background: var(--pg-ink);
  color: var(--pg-cyan);
  font-family: var(--pg-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.page-faq .pg-disclosure {
  border-bottom: 1px solid var(--faq-line-soft);
}

.page-faq .pg-disclosure__btn {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 17px 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--pg-font-body);
  font-size: clamp(0.98rem, 1.7vw, 1.08rem);
  line-height: 1.6;
  color: var(--pg-black);
}

.page-faq .pg-disclosure__btn:hover,
.page-faq .pg-disclosure__btn:focus-visible {
  color: var(--pg-amber-deep);
}

.page-faq .pg-disclosure__inner {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}

.page-faq .faq-q__no {
  flex: 0 0 auto;
  font-family: var(--pg-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--pg-amber-deep);
}

.page-faq .pg-disclosure__sign {
  position: relative;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  border: 1px solid rgba(169, 107, 18, 0.55);
  transition: background 0.25s var(--pg-ease), border-color 0.25s var(--pg-ease);
}

.page-faq .pg-disclosure__sign::before,
.page-faq .pg-disclosure__sign::after {
  content: "";
  position: absolute;
  background: var(--pg-amber-deep);
  transition: transform 0.3s var(--pg-ease), background 0.25s var(--pg-ease);
}

.page-faq .pg-disclosure__sign::before {
  left: 5px;
  right: 5px;
  top: 50%;
  height: 1.5px;
  transform: translateY(-50%);
}

.page-faq .pg-disclosure__sign::after {
  top: 5px;
  bottom: 5px;
  left: 50%;
  width: 1.5px;
  transform: translateX(-50%);
}

.page-faq .pg-disclosure[data-open="true"] .pg-disclosure__sign {
  background: var(--pg-ink);
  border-color: var(--pg-ink);
}

.page-faq .pg-disclosure[data-open="true"] .pg-disclosure__sign::before,
.page-faq .pg-disclosure[data-open="true"] .pg-disclosure__sign::after {
  background: var(--pg-cyan);
}

.page-faq .pg-disclosure[data-open="true"] .pg-disclosure__sign::after {
  transform: translateX(-50%) scaleY(0);
}

.page-faq .pg-disclosure__panel {
  display: block;
}

.page-faq .pg-disclosure[data-open="false"] .pg-disclosure__panel {
  display: none;
}

.page-faq .pg-disclosure__body {
  margin: 0;
  padding: 0 0 20px 0;
  max-width: 64ch;
  font-family: var(--pg-font-body);
  font-size: 0.97rem;
  line-height: 1.9;
  color: #33443d;
}

.page-faq .faq-trace {
  padding-block: var(--faq-pad);
  background: var(--pg-ink-2);
  border-top: 1px solid rgba(227, 167, 47, 0.3);
}

.page-faq .faq-trace__grid {
  display: grid;
  gap: clamp(28px, 5vw, 52px);
  align-items: start;
}

.page-faq .faq-trace__eyebrow {
  color: var(--pg-amber);
}

.page-faq .faq-trace__title {
  margin: 0 0 18px;
  font-family: var(--pg-font-display);
  font-weight: 300;
  font-size: clamp(1.6rem, 4.2vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--pg-warm);
}

.page-faq .faq-trace__text {
  max-width: 56ch;
  margin: 0 0 clamp(24px, 4vw, 34px);
  font-family: var(--pg-font-body);
  font-size: 1rem;
  line-height: 1.85;
  color: rgba(244, 239, 223, 0.76);
}

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

.page-faq .faq-trace__steps li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-family: var(--pg-font-body);
  font-size: 0.96rem;
  line-height: 1.8;
  color: rgba(244, 239, 223, 0.82);
}

.page-faq .faq-trace__step-no {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: 3px;
  border-radius: 50%;
  border: 1px solid rgba(37, 214, 196, 0.5);
  color: var(--pg-cyan);
  font-family: var(--pg-font-mono);
  font-size: 11px;
}

.page-faq .faq-trace__card {
  padding: clamp(22px, 4vw, 30px);
  border-radius: 28px 28px 28px 10px;
  border: 1px solid rgba(227, 167, 47, 0.4);
  background:
    linear-gradient(150deg, rgba(37, 214, 196, 0.1), rgba(11, 43, 36, 0.2));
}

.page-faq .faq-trace__label {
  margin: 0 0 6px;
  font-family: var(--pg-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pg-mist);
}

.page-faq .faq-trace__code {
  margin: 0 0 20px;
  font-family: var(--pg-font-mono);
  font-size: clamp(1.15rem, 3.4vw, 1.55rem);
  letter-spacing: 0.05em;
  color: var(--pg-cyan);
  word-break: break-all;
}

.page-faq .faq-trace__meta {
  display: grid;
  gap: 12px;
  margin: 0 0 22px;
  padding: 0;
}

.page-faq .faq-trace__meta div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(227, 167, 47, 0.24);
}

.page-faq .faq-trace__meta dt {
  font-family: var(--pg-font-body);
  font-size: 0.86rem;
  color: rgba(244, 239, 223, 0.62);
}

.page-faq .faq-trace__meta dd {
  margin: 0;
  font-family: var(--pg-font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  color: var(--pg-warm);
  text-align: right;
}

.page-faq .pg-copy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: var(--pg-radius-pill);
  border: 1px solid rgba(227, 167, 47, 0.6);
  background: transparent;
  color: var(--pg-amber);
  font-family: var(--pg-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: border-color 0.25s var(--pg-ease), color 0.25s var(--pg-ease), background 0.25s var(--pg-ease);
}

.page-faq .pg-copy:hover,
.page-faq .pg-copy:focus-visible {
  border-color: var(--pg-cyan);
  color: var(--pg-cyan);
}

.page-faq .pg-copy[data-copied="true"] {
  border-color: var(--pg-cyan);
  background: rgba(37, 214, 196, 0.12);
  color: var(--pg-cyan);
}

.page-faq .faq-trace__tip {
  margin: 14px 0 0;
  font-family: var(--pg-font-body);
  font-size: 0.84rem;
  line-height: 1.7;
  color: var(--pg-mist);
}

.page-faq .faq-paths {
  padding-block: var(--faq-pad);
  background: var(--pg-paper-2);
  color: var(--pg-ink);
}

.page-faq .faq-paths__eyebrow {
  color: var(--pg-amber-deep);
}

.page-faq .faq-paths__title {
  margin: 0;
  font-family: var(--pg-font-display);
  font-weight: 300;
  font-size: clamp(1.6rem, 4.2vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--pg-ink);
}

.page-faq .faq-paths__list {
  list-style: none;
  display: grid;
  gap: 16px;
  margin: clamp(28px, 5vw, 46px) 0 0;
  padding: 0;
}

.page-faq .faq-path {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: clamp(20px, 3vw, 26px);
  border-radius: 24px 24px 24px 8px;
  border: 1px solid rgba(169, 107, 18, 0.3);
  background: var(--pg-warm);
}

.page-faq .faq-path__who {
  margin: 0;
  font-family: var(--pg-font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
  color: var(--pg-ink);
}

.page-faq .faq-path__steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.page-faq .faq-path__step {
  padding: 7px 12px;
  border-radius: var(--pg-radius-pill);
  background: var(--pg-paper);
  border: 1px solid rgba(169, 107, 18, 0.22);
  font-family: var(--pg-font-body);
  font-size: 0.83rem;
  line-height: 1.4;
  color: #33443d;
}

.page-faq .faq-path__arrow {
  display: inline-flex;
  color: var(--pg-amber-deep);
}

.page-faq .faq-path__note {
  margin: 0;
  font-family: var(--pg-font-body);
  font-size: 0.86rem;
  line-height: 1.75;
  color: #4a5a53;
}

.page-faq .faq-paths__more {
  margin: clamp(24px, 4vw, 34px) 0 0;
  font-family: var(--pg-font-body);
  font-size: 0.95rem;
  line-height: 1.8;
  color: #33443d;
}

.page-faq .faq-paths__more a {
  color: var(--pg-amber-deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(169, 107, 18, 0.5);
}

.page-faq .faq-paths__more a:hover,
.page-faq .faq-paths__more a:focus-visible {
  color: var(--pg-ink);
  border-bottom-color: var(--pg-ink);
}

.page-faq .faq-support {
  padding-block: var(--faq-pad);
  background: var(--pg-ink);
  border-top: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--pg-cyan), var(--pg-amber)) 1;
}

.page-faq .faq-support__panel {
  display: grid;
  gap: clamp(26px, 5vw, 48px);
  align-items: start;
}

.page-faq .faq-support__eyebrow {
  color: var(--pg-cyan);
}

.page-faq .faq-support__title {
  margin: 0 0 16px;
  font-family: var(--pg-font-display);
  font-weight: 300;
  font-size: clamp(1.6rem, 4.2vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--pg-warm);
}

.page-faq .faq-support__text {
  max-width: 56ch;
  margin: 0 0 22px;
  font-family: var(--pg-font-body);
  font-size: 1rem;
  line-height: 1.85;
  color: rgba(244, 239, 223, 0.78);
}

.page-faq .faq-support__list {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 0 0 22px;
  padding: 0;
}

.page-faq .faq-support__list li {
  position: relative;
  padding-left: 20px;
  font-family: var(--pg-font-body);
  font-size: 0.94rem;
  line-height: 1.75;
  color: rgba(244, 239, 223, 0.82);
}

.page-faq .faq-support__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 8px;
  height: 1.5px;
  background: var(--pg-amber);
}

.page-faq .faq-support__link a {
  font-family: var(--pg-font-display);
  font-size: 0.92rem;
  color: var(--pg-cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(37, 214, 196, 0.45);
  padding-bottom: 2px;
}

.page-faq .faq-support__link a:hover,
.page-faq .faq-support__link a:focus-visible {
  color: var(--pg-warm);
  border-bottom-color: var(--pg-warm);
}

.page-faq .faq-support__card {
  padding: clamp(22px, 4vw, 30px);
  border-radius: 26px 26px 26px 8px;
  border: 1px solid rgba(227, 167, 47, 0.45);
  background: rgba(37, 214, 196, 0.05);
}

.page-faq .faq-support__label {
  margin: 0 0 4px;
  font-family: var(--pg-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pg-mist);
}

.page-faq .faq-support__label:not(:first-child) {
  margin-top: 18px;
}

.page-faq .faq-support__mail {
  margin: 0;
  font-family: var(--pg-font-mono);
  font-size: clamp(0.95rem, 2.6vw, 1.1rem);
  color: var(--pg-cyan);
  word-break: break-all;
}

.page-faq .faq-support__value {
  margin: 0;
  font-family: var(--pg-font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--pg-warm);
}

.page-faq .faq-support__value--mono {
  font-family: var(--pg-font-mono);
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  word-break: break-all;
}

@media (min-width: 760px) {
  .page-faq .faq-qa__head {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  }

  .page-faq .faq-paths__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .page-faq .faq-hero__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }

  .page-faq .faq-trace__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }

  .page-faq .faq-support__panel {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  }

  .page-faq .faq-qa__groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(30px, 4vw, 56px);
  }
}

@media (min-width: 1060px) {
  .page-faq .faq-paths__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .page-faq .faq-chip {
    padding: 10px 15px;
    font-size: 0.86rem;
  }

  .page-faq .faq-path__steps {
    flex-direction: column;
    align-items: flex-start;
  }

  .page-faq .faq-path__arrow {
    transform: rotate(90deg);
    margin-left: 10px;
  }

  .page-faq .pg-disclosure__btn {
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-chip,
  .page-faq .pg-copy,
  .page-faq .pg-disclosure__sign,
  .page-faq .pg-disclosure__sign::before,
  .page-faq .pg-disclosure__sign::after {
    transition: none;
  }
}


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

  <section class="pg-section faq-hero" aria-labelledby="faq-hero-title">
    <div class="pg-container">
      <nav class="pg-breadcrumb faq-hero__crumb" aria-label="当前位置">
        <ol>
          <li><a href="/">规则控制室</a></li>
          <li aria-current="page">问答索引</li>
        </ol>
      </nav>
      <div class="faq-hero__grid">
        <div class="faq-hero__copy">
          <p class="pg-eyebrow faq-hero__eyebrow">问答索引 · 68 个高频问题</p>
          <h1 id="faq-hero-title" class="faq-hero__title">先认身份，<br>再找答案</h1>
          <p class="pg-lead faq-hero__lead">同一部规则，回访的人想翻旧版本，刚来的人想先认路，合作方更关心更新节律。PG娱乐馆把 68 个高频问题按 5 类身份排成索引，您先选自己站在哪一边，再挑具体问题，答案连同版本编号一起给出。</p>
        </div>
        <figure class="faq-hero__figure">
          <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="五枚胶囊人群标签与编号卡叠放特写，电光青标出其中被选中的一枚">
          <figcaption class="faq-hero__caption">5 类身份入口 · 68 个高频问题</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="pg-section faq-crowd" aria-labelledby="crowd-title">
    <div class="pg-container">
      <div class="faq-crowd__head">
        <p class="pg-eyebrow faq-crowd__eyebrow">人群入口</p>
        <h2 id="crowd-title" class="faq-crowd__title">五类身份，五个起点</h2>
        <p class="faq-crowd__note">按您来查什么划分，而不是按栏目划分。娱乐平台常用人群索引把视角先定下来，下面的问答才会落到您真正需要的条目上。</p>
      </div>
      <ul class="faq-chips">
        <li><a class="faq-chip" href="#crowd-returning"><span class="faq-chip__no">01</span>回访查旧规则</a></li>
        <li><a class="faq-chip" href="#crowd-newcomer"><span class="faq-chip__no">02</span>第一次来认路</a></li>
        <li><a class="faq-chip" href="#crowd-version"><span class="faq-chip__no">03</span>核对版本号</a></li>
        <li><a class="faq-chip" href="#crowd-editor"><span class="faq-chip__no">04</span>整理规则条目</a></li>
        <li><a class="faq-chip" href="#crowd-channel"><span class="faq-chip__no">05</span>渠道与合作</a></li>
      </ul>
    </div>
  </section>

  <section class="pg-section faq-qa" aria-labelledby="qa-title">
    <div class="pg-container">
      <div class="faq-qa__head">
        <div class="faq-qa__intro">
          <p class="pg-eyebrow faq-qa__eyebrow">高频问答 · 按身份归组</p>
          <h2 id="qa-title" class="faq-qa__title">您想问的，多半已经有人问过</h2>
          <p class="faq-qa__note">每组问题都对应上面的一个身份入口。展开看到的是短答案，需要更细的条目就顺着后面的链接往版本对照台或观察报告走。</p>
        </div>
        <figure class="faq-qa__figure">
          <img src="{zhanqunpic:h:600w:900}" width="900" height="600" alt="档案抽屉与问答索引卡俯拍，纸张纹理清晰，卡面标有序号" loading="lazy" decoding="async">
        </figure>
      </div>

      <div class="faq-qa__groups">

        <section class="faq-group" id="crowd-returning" aria-labelledby="group-1">
          <h3 id="group-1" class="faq-group__title"><span class="faq-group__no">01</span>回访查旧规则</h3>

          <div class="pg-disclosure" data-disclosure>
            <button type="button" class="pg-disclosure__btn" data-disclosure-btn aria-expanded="false" aria-controls="ans-1-1">
              <span class="pg-disclosure__inner"><span class="faq-q__no">Q-014</span>上一版规则现在还能翻到吗？</span>
              <span class="pg-disclosure__sign" aria-hidden="true"></span>
            </button>
            <div class="pg-disclosure__panel" id="ans-1-1" data-disclosure-panel>
              <p class="pg-disclosure__body">能。被替换的内容不会消失，会带着原来的版本编号留在回溯入口里，只是不再出现在当前页。您按编号找到旧版，再和现行条目上下对照，改动的地方一眼就能看出来。</p>
            </div>
          </div>

          <div class="pg-disclosure" data-disclosure>
            <button type="button" class="pg-disclosure__btn" data-disclosure-btn aria-expanded="false" aria-controls="ans-1-2">
              <span class="pg-disclosure__inner"><span class="faq-q__no">Q-022</span>周三更新后，我上周看到的条目去哪了？</span>
              <span class="pg-disclosure__sign" aria-hidden="true"></span>
            </button>
            <div class="pg-disclosure__panel" id="ans-1-2" data-disclosure-panel>
              <p class="pg-disclosure__body">每周三集中处理新增与修订，平均每个更新日约 24 条。凡是被改写的条目都会另存旧版本编号，您可以在旧规则回溯入口按号取回。查的时候把页面截图也带上，客服定位会更快。</p>
            </div>
          </div>
        </section>

        <section class="faq-group" id="crowd-newcomer" aria-labelledby="group-2">
          <h3 id="group-2" class="faq-group__title"><span class="faq-group__no">02</span>第一次来认路</h3>

          <div class="pg-disclosure" data-disclosure>
            <button type="button" class="pg-disclosure__btn" data-disclosure-btn aria-expanded="false" aria-controls="ans-2-1">
              <span class="pg-disclosure__inner"><span class="faq-q__no">Q-003</span>14 类分类，从哪一类看起？</span>
              <span class="pg-disclosure__sign" aria-hidden="true"></span>
            </button>
            <div class="pg-disclosure__panel" id="ans-2-1" data-disclosure-panel>
              <p class="pg-disclosure__body">先想清楚您要办的是哪件事，再对回分类名：查找活动条款归入活动规则，比对前后差异归入版本记录，找入口先看榜单入口，按身份筛则走人群索引。每类下面挂的都是具体条目，点进去就能读全文。</p>
            </div>
          </div>

          <div class="pg-disclosure" data-disclosure>
            <button type="button" class="pg-disclosure__btn" data-disclosure-btn aria-expanded="false" aria-controls="ans-2-2">
              <span class="pg-disclosure__inner"><span class="faq-q__no">Q-008</span>不注册账号，能直接查吗？</span>
              <span class="pg-disclosure__sign" aria-hidden="true"></span>
            </button>
            <div class="pg-disclosure__panel" id="ans-2-2" data-disclosure-panel>
              <p class="pg-disclosure__body">可以。查询编号生成、版本标签复制和分类定位链接都在前端完成，不需要账号，也不需要填写任何资料。查完想留个记录，复制编号存下来就行。</p>
            </div>
          </div>
        </section>

        <section class="faq-group" id="crowd-version" aria-labelledby="group-3">
          <h3 id="group-3" class="faq-group__title"><span class="faq-group__no">03</span>核对版本号</h3>

          <div class="pg-disclosure" data-disclosure>
            <button type="button" class="pg-disclosure__btn" data-disclosure-btn aria-expanded="false" aria-controls="ans-3-1">
              <span class="pg-disclosure__inner"><span class="faq-q__no">Q-031</span>怎么判断手上的版本号是不是最新？</span>
              <span class="pg-disclosure__sign" aria-hidden="true"></span>
            </button>
            <div class="pg-disclosure__panel" id="ans-3-1" data-disclosure-panel>
              <p class="pg-disclosure__body">当前主推 V3.1。版本库收录 9 个主版本系列与 42 个历史修订号，编号里主版本在前、修订号在后。把您手上的号拿去版本对照台比一次，是现行还是归档，立刻分明。</p>
            </div>
          </div>

          <div class="pg-disclosure" data-disclosure>
            <button type="button" class="pg-disclosure__btn" data-disclosure-btn aria-expanded="false" aria-controls="ans-3-2">
              <span class="pg-disclosure__inner"><span class="faq-q__no">Q-036</span>榜单入口为什么要和版本号并排看？</span>
              <span class="pg-disclosure__sign" aria-hidden="true"></span>
            </button>
            <div class="pg-disclosure__panel" id="ans-3-2" data-disclosure-panel>
              <p class="pg-disclosure__body">入口会随规则版本调整，所以两者放在同一栏位：您看到某个入口时，旁边那个版本号就是它此刻的依据。这样判断不用来回翻页，也不容易把新旧入口弄混。</p>
            </div>
          </div>
        </section>

        <section class="faq-group" id="crowd-editor" aria-labelledby="group-4">
          <h3 id="group-4" class="faq-group__title"><span class="faq-group__no">04</span>整理规则条目</h3>

          <div class="pg-disclosure" data-disclosure>
            <button type="button" class="pg-disclosure__btn" data-disclosure-btn aria-expanded="false" aria-controls="ans-4-1">
              <span class="pg-disclosure__inner"><span class="faq-q__no">Q-044</span>一次周更通常动多少条？</span>
              <span class="pg-disclosure__sign" aria-hidden="true"></span>
            </button>
            <div class="pg-disclosure__panel" id="ans-4-1" data-disclosure-panel>
              <p class="pg-disclosure__body">平均 24 条新增或修订，集中在周三完成。遇到集中调整的时段，修订号会连着往前推。条目字段固定为编号、生效范围、适用人群、版本号与更新记录五项，摘录时照这五项抄不会漏。</p>
            </div>
          </div>

          <div class="pg-disclosure" data-disclosure>
            <button type="button" class="pg-disclosure__btn" data-disclosure-btn aria-expanded="false" aria-controls="ans-4-2">
              <span class="pg-disclosure__inner"><span class="faq-q__no">Q-049</span>分类调整会不会影响我引用的编号？</span>
              <span class="pg-disclosure__sign" aria-hidden="true"></span>
            </button>
            <div class="pg-disclosure__panel" id="ans-4-2" data-disclosure-panel>
              <p class="pg-disclosure__body">调整时旧编号保留，新条目另起号，两个号可以同时存在。引用时把页面截图和编号一起存档，日后回溯顺着编号走，不必记得当时是在哪一屏看到的。</p>
            </div>
          </div>
        </section>

        <section class="faq-group" id="crowd-channel" aria-labelledby="group-5">
          <h3 id="group-5" class="faq-group__title"><span class="faq-group__no">05</span>渠道与合作</h3>

          <div class="pg-disclosure" data-disclosure>
            <button type="button" class="pg-disclosure__btn" data-disclosure-btn aria-expanded="false" aria-controls="ans-5-1">
              <span class="pg-disclosure__inner"><span class="faq-q__no">Q-057</span>想先摸清更新节律，看哪里合适？</span>
              <span class="pg-disclosure__sign" aria-hidden="true"></span>
            </button>
            <div class="pg-disclosure__panel" id="ans-5-1" data-disclosure-panel>
              <p class="pg-disclosure__body">观察报告栏目累计发布 148 篇报告，组成 12 个专题系列，按周更次序和版本系列编排。先挑一个贴近您业务的专题读完，再进具体条目，节奏和重点都比较容易把握。</p>
            </div>
          </div>

          <div class="pg-disclosure" data-disclosure>
            <button type="button" class="pg-disclosure__btn" data-disclosure-btn aria-expanded="false" aria-controls="ans-5-2">
              <span class="pg-disclosure__inner"><span class="faq-q__no">Q-062</span>合作前想确认你们的整理方式，从哪两步看？</span>
              <span class="pg-disclosure__sign" aria-hidden="true"></span>
            </button>
            <div class="pg-disclosure__panel" id="ans-5-2" data-disclosure-panel>
              <p class="pg-disclosure__body">先到版本对照台看版本与榜单怎么并排，再到品牌档案看分类体系从人工登记到模块化信息板走过的六次迭代。两处看完，基本能判断我们的工作方式合不合您的节奏。</p>
            </div>
          </div>
        </section>

      </div>
    </div>
  </section>

  <section class="pg-section faq-trace" aria-labelledby="trace-title">
    <div class="pg-container">
      <div class="faq-trace__grid">
        <div class="faq-trace__copy">
          <p class="pg-eyebrow faq-trace__eyebrow">旧规则回溯</p>
          <h2 id="trace-title" class="faq-trace__title">从现行条目，往前翻三个版本</h2>
          <p class="faq-trace__text">碰到“我记得以前不是这么写的”，别凭印象争。按编号回溯是最省事的做法：同一条目历次修订共用编号前缀，版本号跟在后面，一条线拉下来，改动点清清楚楚。</p>
          <ol class="faq-trace__steps">
            <li><span class="faq-trace__step-no">1</span>记下现行条目的完整编号，连同屏幕上的版本号一起截图。</li>
            <li><span class="faq-trace__step-no">2</span>在回溯入口用编号检索，会列出同一前缀下的历史修订号。</li>
            <li><span class="faq-trace__step-no">3</span>选定要看的旧版本，与现行内容上下对照，差异段落逐处核过。</li>
            <li><span class="faq-trace__step-no">4</span>需要留存时复制版本标签，连同截图一并归档，日后引用不必再翻。</li>
          </ol>
        </div>
        <aside class="faq-trace__card" aria-label="回溯实例">
          <p class="faq-trace__label">条目编号</p>
          <p class="faq-trace__code">PG-ACT-0217</p>
          <dl class="faq-trace__meta">
            <div>
              <dt>现行版本</dt>
              <dd>V3.1 · R04</dd>
            </div>
            <div>
              <dt>可回溯至</dt>
              <dd>V2.8 · R12</dd>
            </div>
            <div>
              <dt>最近修订</dt>
              <dd>周三周更批次</dd>
            </div>
          </dl>
          <button type="button" class="pg-copy faq-trace__copy" data-copy="PG-ACT-0217-V2.8-R12">
            <span data-copy-label>复制回溯编号</span>
          </button>
          <p class="faq-trace__tip">复制后可直接粘贴给客服，省去复述条目的时间。</p>
        </aside>
      </div>
    </div>
  </section>

  <section class="pg-section faq-paths" aria-labelledby="paths-title">
    <div class="pg-container">
      <p class="pg-eyebrow faq-paths__eyebrow">查询路径</p>
      <h2 id="paths-title" class="faq-paths__title">三张身份牌，三条短路线</h2>
      <ol class="faq-paths__list">

        <li class="faq-path">
          <p class="faq-path__who">第一次来</p>
          <div class="faq-path__steps">
            <span class="faq-path__step">首页看清 14 类方向</span>
            <span class="faq-path__arrow" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8h9M8.5 3.5 13 8l-4.5 4.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
            <span class="faq-path__step">挑一个身份入口</span>
            <span class="faq-path__arrow" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8h9M8.5 3.5 13 8l-4.5 4.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
            <span class="faq-path__step">落到具体条目</span>
          </div>
          <p class="faq-path__note">全程不需要账号，读完想带走就复制编号。</p>
        </li>

        <li class="faq-path">
          <p class="faq-path__who">带着旧截图回来</p>
          <div class="faq-path__steps">
            <span class="faq-path__step">读出截图上的版本号</span>
            <span class="faq-path__arrow" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8h9M8.5 3.5 13 8l-4.5 4.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
            <span class="faq-path__step">对照现行版本</span>
            <span class="faq-path__arrow" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8h9M8.5 3.5 13 8l-4.5 4.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
            <span class="faq-path__step">取回旧版全文</span>
          </div>
          <p class="faq-path__note">差异部分集中在条目内的更新记录里，从上往下读即可。</p>
        </li>

        <li class="faq-path">
          <p class="faq-path__who">研究与合作</p>
          <div class="faq-path__steps">
            <span class="faq-path__step">先读一个专题报告</span>
            <span class="faq-path__arrow" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8h9M8.5 3.5 13 8l-4.5 4.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
            <span class="faq-path__step">看分类体系的来路</span>
            <span class="faq-path__arrow" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8h9M8.5 3.5 13 8l-4.5 4.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
            <span class="faq-path__step">进版本对照台</span>
          </div>
          <p class="faq-path__note">需要更细的过程说明，可以直接约一次沟通。</p>
        </li>

      </ol>
      <p class="faq-paths__more">想看得更细，可以进 <a href="/reports/">观察报告</a> 按专题往下读，或到 <a href="/culture/">品牌档案</a> 看分类体系这六年是怎么长起来的。</p>
    </div>
  </section>

  <section class="pg-section faq-support" aria-labelledby="support-title">
    <div class="pg-container">
      <div class="faq-support__panel">
        <div class="faq-support__copy">
          <p class="pg-eyebrow faq-support__eyebrow">还没找到答案</p>
          <h2 id="support-title" class="faq-support__title">把编号和截图带上，回复会快很多</h2>
          <p class="faq-support__text">索引里的 68 个问题覆盖了大部分情形。要是您的疑问还差一层，直接写信过来，客服按您给的编号定位到具体条目，回复里会一并说明现行版本与旧版本的关系。</p>
          <ul class="faq-support__list">
            <li>页码截图：含标题与版本号的那一屏</li>
            <li>条目编号：例如 PG-ACT-0217</li>
            <li>您想确认的那句话，原样摘一句即可</li>
            <li>使用的是手机还是电脑，方便我们复现</li>
          </ul>
          <p class="faq-support__link"><a href="/find-us/">查看完整的联系与反馈方式</a></p>
        </div>
        <aside class="faq-support__card">
          <p class="faq-support__label">客服邮箱</p>
          <p class="faq-support__mail">info@v3-pg.com.cn</p>
          <p class="faq-support__label">回复时段</p>
          <p class="faq-support__value">工作日 09:00–18:00</p>
          <p class="faq-support__label">备案信息</p>
          <p class="faq-support__value faq-support__value--mono">云ICP备64400160号-4</p>
        </aside>
      </div>
    </div>
  </section>

</main>

.page-faq {
  --faq-pad: clamp(52px, 8vw, 104px);
  --faq-line-soft: rgba(16, 24, 21, 0.12);
  background: var(--pg-ink);
  color: var(--pg-paper);
  overflow-x: hidden;
}

.page-faq .pg-container {
  max-width: var(--pg-max);
}

.page-faq .faq-hero__crumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  margin: 0 0 clamp(26px, 4vw, 44px);
  font-family: var(--pg-font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--pg-mist);
}

.page-faq .faq-hero__crumb a {
  color: var(--pg-mist);
  text-decoration: none;
}

.page-faq .faq-hero__crumb a:hover,
.page-faq .faq-hero__crumb a:focus-visible {
  color: var(--pg-cyan);
}

.page-faq .faq-hero__crumb li + li::before {
  content: "/";
  margin-right: 6px;
  color: var(--pg-amber);
  opacity: 0.7;
}

.page-faq .faq-hero {
  position: relative;
  padding-block: calc(var(--pg-header-h) + 34px) clamp(52px, 8vw, 92px);
  background:
    radial-gradient(120% 90% at 86% -14%, rgba(37, 214, 196, 0.16), transparent 62%),
    linear-gradient(158deg, var(--pg-ink) 0%, var(--pg-ink-2) 56%, var(--pg-ink) 100%);
  overflow: hidden;
}

.page-faq .faq-hero::after {
  content: "";
  position: absolute;
  right: -18%;
  bottom: -46%;
  width: 58vmax;
  height: 58vmax;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 34%, rgba(227, 167, 47, 0.12), transparent 64%);
  pointer-events: none;
}

.page-faq .faq-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(30px, 5vw, 58px);
  align-items: end;
}

.page-faq .faq-hero__eyebrow,
.page-faq .faq-crowd__eyebrow,
.page-faq .faq-qa__eyebrow,
.page-faq .faq-trace__eyebrow,
.page-faq .faq-paths__eyebrow,
.page-faq .faq-support__eyebrow {
  margin: 0 0 14px;
  font-family: var(--pg-font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.page-faq .faq-hero__eyebrow {
  color: var(--pg-cyan);
}

.page-faq .faq-hero__title {
  margin: 0 0 clamp(18px, 3vw, 28px);
  font-family: var(--pg-font-display);
  font-weight: 200;
  font-size: clamp(2.4rem, 8vw, 5.2rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--pg-warm);
}

.page-faq .faq-hero__lead {
  max-width: 46ch;
  margin: 0;
  font-family: var(--pg-font-body);
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  line-height: 1.85;
  color: rgba(244, 239, 223, 0.82);
}

.page-faq .faq-hero__figure {
  position: relative;
  margin: 0;
  border-radius: 30px 30px 30px 10px;
  overflow: hidden;
  border: 1px solid var(--pg-line);
  background: rgba(11, 43, 36, 0.5);
}

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

.page-faq .faq-hero__caption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 7px 14px;
  border-radius: var(--pg-radius-pill);
  background: rgba(11, 43, 36, 0.82);
  border: 1px solid rgba(227, 167, 47, 0.4);
  font-family: var(--pg-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--pg-paper);
}

.page-faq .faq-crowd {
  padding-block: clamp(44px, 6vw, 70px);
  background: var(--pg-ink);
  border-top: 1px solid rgba(227, 167, 47, 0.28);
}

.page-faq .faq-crowd__eyebrow {
  color: var(--pg-amber);
}

.page-faq .faq-crowd__title {
  margin: 0 0 14px;
  font-family: var(--pg-font-display);
  font-weight: 300;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  letter-spacing: -0.01em;
  color: var(--pg-warm);
}

.page-faq .faq-crowd__note {
  max-width: 62ch;
  margin: 0;
  font-family: var(--pg-font-body);
  font-size: 1rem;
  line-height: 1.8;
  color: rgba(244, 239, 223, 0.74);
}

.page-faq .faq-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: clamp(24px, 4vw, 34px) 0 0;
  padding: 0;
}

.page-faq .faq-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border-radius: var(--pg-radius-pill);
  border: 1px solid rgba(227, 167, 47, 0.45);
  background: var(--pg-warm);
  color: var(--pg-ink);
  font-family: var(--pg-font-display);
  font-size: 0.92rem;
  line-height: 1.2;
  text-decoration: none;
  transition: transform 0.25s var(--pg-ease), box-shadow 0.25s var(--pg-ease), border-color 0.25s var(--pg-ease);
}

.page-faq .faq-chip__no {
  font-family: var(--pg-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--pg-amber-deep);
}

.page-faq .faq-chip:hover,
.page-faq .faq-chip:focus-visible {
  transform: translateY(-2px);
  border-color: var(--pg-cyan);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.34);
}

.page-faq .faq-qa {
  padding-block: var(--faq-pad);
  background: var(--pg-paper);
  color: var(--pg-black);
}

.page-faq .faq-qa__head {
  display: grid;
  gap: clamp(24px, 4vw, 40px);
  align-items: end;
}

.page-faq .faq-qa__eyebrow {
  color: var(--pg-amber-deep);
}

.page-faq .faq-qa__title {
  margin: 0 0 16px;
  font-family: var(--pg-font-display);
  font-weight: 300;
  font-size: clamp(1.7rem, 4.4vw, 2.7rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--pg-ink);
}

.page-faq .faq-qa__note {
  max-width: 58ch;
  margin: 0;
  font-family: var(--pg-font-body);
  font-size: 1rem;
  line-height: 1.85;
  color: #33443d;
}

.page-faq .faq-qa__figure {
  margin: 0;
  border-radius: 26px 26px 10px 26px;
  overflow: hidden;
  border: 1px solid rgba(169, 107, 18, 0.28);
  background: var(--pg-paper-2);
}

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

.page-faq .faq-qa__groups {
  display: grid;
  gap: clamp(30px, 4vw, 46px);
  margin-top: clamp(38px, 6vw, 66px);
}

.page-faq .faq-group {
  scroll-margin-top: calc(var(--pg-header-h) + 24px);
  border-top: 1px solid rgba(169, 107, 18, 0.32);
  padding-top: clamp(18px, 3vw, 26px);
}

.page-faq .faq-group__title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
  font-family: var(--pg-font-display);
  font-weight: 700;
  font-size: clamp(1.02rem, 2.2vw, 1.22rem);
  letter-spacing: 0.01em;
  color: var(--pg-ink);
}

.page-faq .faq-group__no {
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--pg-radius-pill);
  background: var(--pg-ink);
  color: var(--pg-cyan);
  font-family: var(--pg-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.page-faq .pg-disclosure {
  border-bottom: 1px solid var(--faq-line-soft);
}

.page-faq .pg-disclosure__btn {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 17px 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--pg-font-body);
  font-size: clamp(0.98rem, 1.7vw, 1.08rem);
  line-height: 1.6;
  color: var(--pg-black);
}

.page-faq .pg-disclosure__btn:hover,
.page-faq .pg-disclosure__btn:focus-visible {
  color: var(--pg-amber-deep);
}

.page-faq .pg-disclosure__inner {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}

.page-faq .faq-q__no {
  flex: 0 0 auto;
  font-family: var(--pg-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--pg-amber-deep);
}

.page-faq .pg-disclosure__sign {
  position: relative;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  border: 1px solid rgba(169, 107, 18, 0.55);
  transition: background 0.25s var(--pg-ease), border-color 0.25s var(--pg-ease);
}

.page-faq .pg-disclosure__sign::before,
.page-faq .pg-disclosure__sign::after {
  content: "";
  position: absolute;
  background: var(--pg-amber-deep);
  transition: transform 0.3s var(--pg-ease), background 0.25s var(--pg-ease);
}

.page-faq .pg-disclosure__sign::before {
  left: 5px;
  right: 5px;
  top: 50%;
  height: 1.5px;
  transform: translateY(-50%);
}

.page-faq .pg-disclosure__sign::after {
  top: 5px;
  bottom: 5px;
  left: 50%;
  width: 1.5px;
  transform: translateX(-50%);
}

.page-faq .pg-disclosure[data-open="true"] .pg-disclosure__sign {
  background: var(--pg-ink);
  border-color: var(--pg-ink);
}

.page-faq .pg-disclosure[data-open="true"] .pg-disclosure__sign::before,
.page-faq .pg-disclosure[data-open="true"] .pg-disclosure__sign::after {
  background: var(--pg-cyan);
}

.page-faq .pg-disclosure[data-open="true"] .pg-disclosure__sign::after {
  transform: translateX(-50%) scaleY(0);
}

.page-faq .pg-disclosure__panel {
  display: block;
}

.page-faq .pg-disclosure[data-open="false"] .pg-disclosure__panel {
  display: none;
}

.page-faq .pg-disclosure__body {
  margin: 0;
  padding: 0 0 20px 0;
  max-width: 64ch;
  font-family: var(--pg-font-body);
  font-size: 0.97rem;
  line-height: 1.9;
  color: #33443d;
}

.page-faq .faq-trace {
  padding-block: var(--faq-pad);
  background: var(--pg-ink-2);
  border-top: 1px solid rgba(227, 167, 47, 0.3);
}

.page-faq .faq-trace__grid {
  display: grid;
  gap: clamp(28px, 5vw, 52px);
  align-items: start;
}

.page-faq .faq-trace__eyebrow {
  color: var(--pg-amber);
}

.page-faq .faq-trace__title {
  margin: 0 0 18px;
  font-family: var(--pg-font-display);
  font-weight: 300;
  font-size: clamp(1.6rem, 4.2vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--pg-warm);
}

.page-faq .faq-trace__text {
  max-width: 56ch;
  margin: 0 0 clamp(24px, 4vw, 34px);
  font-family: var(--pg-font-body);
  font-size: 1rem;
  line-height: 1.85;
  color: rgba(244, 239, 223, 0.76);
}

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

.page-faq .faq-trace__steps li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-family: var(--pg-font-body);
  font-size: 0.96rem;
  line-height: 1.8;
  color: rgba(244, 239, 223, 0.82);
}

.page-faq .faq-trace__step-no {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: 3px;
  border-radius: 50%;
  border: 1px solid rgba(37, 214, 196, 0.5);
  color: var(--pg-cyan);
  font-family: var(--pg-font-mono);
  font-size: 11px;
}

.page-faq .faq-trace__card {
  padding: clamp(22px, 4vw, 30px);
  border-radius: 28px 28px 28px 10px;
  border: 1px solid rgba(227, 167, 47, 0.4);
  background: linear-gradient(150deg, rgba(37, 214, 196, 0.1), rgba(11, 43, 36, 0.2));
}

.page-faq .faq-trace__label {
  margin: 0 0 6px;
  font-family: var(--pg-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pg-mist);
}

.page-faq .faq-trace__code {
  margin: 0 0 20px;
  font-family: var(--pg-font-mono);
  font-size: clamp(1.15rem, 3.4vw, 1.55rem);
  letter-spacing: 0.05em;
  color: var(--pg-cyan);
  word-break: break-all;
}

.page-faq .faq-trace__meta {
  display: grid;
  gap: 12px;
  margin: 0 0 22px;
  padding: 0;
}

.page-faq .faq-trace__meta div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(227, 167, 47, 0.24);
}

.page-faq .faq-trace__meta dt {
  font-family: var(--pg-font-body);
  font-size: 0.86rem;
  color: rgba(244, 239, 223, 0.62);
}

.page-faq .faq-trace__meta dd {
  margin: 0;
  font-family: var(--pg-font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  color: var(--pg-warm);
  text-align: right;
}

.page-faq .pg-copy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: var(--pg-radius-pill);
  border: 1px solid rgba(227, 167, 47, 0.6);
  background: transparent;
  color: var(--pg-amber);
  font-family: var(--pg-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: border-color 0.25s var(--pg-ease), color 0.25s var(--pg-ease), background 0.25s var(--pg-ease);
}

.page-faq .pg-copy:hover,
.page-faq .pg-copy:focus-visible {
  border-color: var(--pg-cyan);
  color: var(--pg-cyan);
}

.page-faq .pg-copy[data-copied="true"] {
  border-color: var(--pg-cyan);
  background: rgba(37, 214, 196, 0.12);
  color: var(--pg-cyan);
}

.page-faq .faq-trace__tip {
  margin: 14px 0 0;
  font-family: var(--pg-font-body);
  font-size: 0.84rem;
  line-height: 1.7;
  color: var(--pg-mist);
}

.page-faq .faq-paths {
  padding-block: var(--faq-pad);
  background: var(--pg-paper-2);
  color: var(--pg-ink);
}

.page-faq .faq-paths__eyebrow {
  color: var(--pg-amber-deep);
}

.page-faq .faq-paths__title {
  margin: 0;
  font-family: var(--pg-font-display);
  font-weight: 300;
  font-size: clamp(1.6rem, 4.2vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--pg-ink);
}

.page-faq .faq-paths__list {
  list-style: none;
  display: grid;
  gap: 16px;
  margin: clamp(28px, 5vw, 46px) 0 0;
  padding: 0;
}

.page-faq .faq-path {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: clamp(20px, 3vw, 26px);
  border-radius: 24px 24px 24px 8px;
  border: 1px solid rgba(169, 107, 18, 0.3);
  background: var(--pg-warm);
}

.page-faq .faq-path__who {
  margin: 0;
  font-family: var(--pg-font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
  color: var(--pg-ink);
}

.page-faq .faq-path__steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.page-faq .faq-path__step {
  padding: 7px 12px;
  border-radius: var(--pg-radius-pill);
  background: var(--pg-paper);
  border: 1px solid rgba(169, 107, 18, 0.22);
  font-family: var(--pg-font-body);
  font-size: 0.83rem;
  line-height: 1.4;
  color: #33443d;
}

.page-faq .faq-path__arrow {
  display: inline-flex;
  color: var(--pg-amber-deep);
}

.page-faq .faq-path__note {
  margin: 0;
  font-family: var(--pg-font-body);
  font-size: 0.86rem;
  line-height: 1.75;
  color: #4a5a53;
}

.page-faq .faq-paths__more {
  margin: clamp(24px, 4vw, 34px) 0 0;
  font-family: var(--pg-font-body);
  font-size: 0.95rem;
  line-height: 1.8;
  color: #33443d;
}

.page-faq .faq-paths__more a {
  color: var(--pg-amber-deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(169, 107, 18, 0.5);
}

.page-faq .faq-paths__more a:hover,
.page-faq .faq-paths__more a:focus-visible {
  color: var(--pg-ink);
  border-bottom-color: var(--pg-ink);
}

.page-faq .faq-support {
  padding-block: var(--faq-pad);
  background: var(--pg-ink);
  border-top: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--pg-cyan), var(--pg-amber)) 1;
}

.page-faq .faq-support__panel {
  display: grid;
  gap: clamp(26px, 5vw, 48px);
  align-items: start;
}

.page-faq .faq-support__eyebrow {
  color: var(--pg-cyan);
}

.page-faq .faq-support__title {
  margin: 0 0 16px;
  font-family: var(--pg-font-display);
  font-weight: 300;
  font-size: clamp(1.6rem, 4.2vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--pg-warm);
}

.page-faq .faq-support__text {
  max-width: 56ch;
  margin: 0 0 22px;
  font-family: var(--pg-font-body);
  font-size: 1rem;
  line-height: 1.85;
  color: rgba(244, 239, 223, 0.78);
}

.page-faq .faq-support__list {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 0 0 22px;
  padding: 0;
}

.page-faq .faq-support__list li {
  position: relative;
  padding-left: 20px;
  font-family: var(--pg-font-body);
  font-size: 0.94rem;
  line-height: 1.75;
  color: rgba(244, 239, 223, 0.82);
}

.page-faq .faq-support__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 8px;
  height: 1.5px;
  background: var(--pg-amber);
}

.page-faq .faq-support__link a {
  font-family: var(--pg-font-display);
  font-size: 0.92rem;
  color: var(--pg-cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(37, 214, 196, 0.45);
  padding-bottom: 2px;
}

.page-faq .faq-support__link a:hover,
.page-faq .faq-support__link a:focus-visible {
  color: var(--pg-warm);
  border-bottom-color: var(--pg-warm);
}

.page-faq .faq-support__card {
  padding: clamp(22px, 4vw, 30px);
  border-radius: 26px 26px 26px 8px;
  border: 1px solid rgba(227, 167, 47, 0.45);
  background: rgba(37, 214, 196, 0.05);
}

.page-faq .faq-support__label {
  margin: 0 0 4px;
  font-family: var(--pg-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pg-mist);
}

.page-faq .faq-support__label:not(:first-child) {
  margin-top: 18px;
}

.page-faq .faq-support__mail {
  margin: 0;
  font-family: var(--pg-font-mono);
  font-size: clamp(0.95rem, 2.6vw, 1.1rem);
  color: var(--pg-cyan);
  word-break: break-all;
}

.page-faq .faq-support__value {
  margin: 0;
  font-family: var(--pg-font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--pg-warm);
}

.page-faq .faq-support__value--mono {
  font-family: var(--pg-font-mono);
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  word-break: break-all;
}

@media (min-width: 760px) {
  .page-faq .faq-qa__head {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  }

  .page-faq .faq-paths__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .page-faq .faq-hero__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }

  .page-faq .faq-trace__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }

  .page-faq .faq-support__panel {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  }

  .page-faq .faq-qa__groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(30px, 4vw, 56px);
  }
}

@media (min-width: 1060px) {
  .page-faq .faq-paths__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .page-faq .faq-chip {
    padding: 10px 15px;
    font-size: 0.86rem;
  }

  .page-faq .faq-path__steps {
    flex-direction: column;
    align-items: flex-start;
  }

  .page-faq .faq-path__arrow {
    transform: rotate(90deg);
    margin-left: 10px;
  }

  .page-faq .pg-disclosure__btn {
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-chip,
  .page-faq .pg-copy,
  .page-faq .pg-disclosure__sign,
  .page-faq .pg-disclosure__sign::before,
  .page-faq .pg-disclosure__sign::after {
    transition: none;
  }
}