/* ===== 体验中心 /experience/ ===== */

.page-products .exp-crumb {
  margin-bottom: clamp(20px, 3vw, 34px);
}

.page-products .exp-crumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
}

.page-products .exp-crumb a {
  color: var(--on-dark-dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}

.page-products .exp-crumb a:hover {
  color: var(--gold-light);
  border-bottom-color: var(--gold);
}

.page-products .exp-crumb li[aria-current] {
  color: var(--gold);
}

.page-products .exp-crumb li + li::before {
  content: "/";
  margin-right: 10px;
  color: var(--rule-on-dark);
}

/* 首屏框景 */
.page-products .exp-frame {
  position: relative;
  padding: clamp(26px, 4.5vw, 56px) clamp(18px, 4vw, 56px);
  background: linear-gradient(180deg, rgba(22, 38, 61, .92), rgba(14, 27, 46, .62));
  border: 1px solid var(--rule-on-dark);
}

.page-products .exp-frame::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid var(--rule-on-dark-soft);
  pointer-events: none;
}

.page-products .exp-frame::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 56px;
  height: 56px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  pointer-events: none;
}

.page-products .exp-title {
  margin: 14px 0 18px;
  max-width: 20ch;
}

.page-products .exp-lede {
  max-width: 62ch;
  color: var(--on-dark-dim);
}

.page-products .exp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(22px, 3vw, 32px);
}

.page-products .exp-hero .btn--ghost {
  border-color: var(--rule-on-dark);
  color: var(--on-dark);
}

.page-products .exp-hero .btn--ghost:hover {
  border-color: var(--gold);
  color: var(--gold-light);
}

.page-products .exp-hero__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(26px, 4vw, 44px);
  border: 1px solid var(--rule-on-dark-soft);
  background: var(--rule-on-dark-soft);
}

@media (min-width: 700px) {
  .page-products .exp-hero__meta {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.page-products .exp-hero__cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 15px 18px;
  background: var(--ink-blue);
}

.page-products .exp-hero__k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--on-dark-faint);
}

.page-products .exp-hero__v {
  font-size: clamp(17px, 2vw, 20px);
  color: var(--gold-light);
  letter-spacing: -.01em;
}

/* 窄幅定位条 */
.page-products .exp-meter-section {
  padding-top: clamp(28px, 4vw, 44px);
  padding-bottom: clamp(28px, 4vw, 44px);
}

.page-products .exp-meter {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--rule);
  background: var(--paper);
}

@media (min-width: 780px) {
  .page-products .exp-meter {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.page-products .exp-meter__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  padding: clamp(20px, 2.6vw, 28px);
  border-bottom: 1px solid rgba(169, 155, 122, .38);
}

.page-products .exp-meter__item:last-child {
  border-bottom: 0;
}

@media (min-width: 780px) {
  .page-products .exp-meter__item {
    border-bottom: 0;
  }

  .page-products .exp-meter__item + .exp-meter__item {
    border-left: 1px solid rgba(169, 155, 122, .38);
  }
}

.page-products .exp-meter__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--gold);
  padding-top: 3px;
}

.page-products .exp-meter__name {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text-ink);
}

.page-products .exp-meter__spec {
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--index-gray);
}

.page-products .exp-meter__fit {
  grid-column: 2;
  margin: 6px 0 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-ink);
}

/* 通用小标题组 */
.page-products .exp-head {
  max-width: 68ch;
  margin-bottom: clamp(22px, 3vw, 34px);
}

.page-products .exp-h2 {
  margin: 12px 0 14px;
  font-size: clamp(24px, 3.4vw, 40px);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--text-ink);
}

.page-products .exp-h2--on-dark {
  color: var(--on-dark);
}

.page-products .exp-p {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.78;
  color: var(--text-ink);
  max-width: 66ch;
}

.page-products .exp-p--tight {
  margin-top: 18px;
  font-size: 15px;
  color: var(--index-gray);
}

.page-products .exp-p--on-dark {
  color: var(--on-dark-dim);
}

.page-products .exp-p a {
  color: var(--text-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  transition: color 160ms ease;
}

.page-products .exp-p a:hover {
  color: var(--gold);
}

/* 三档对照 */
.page-products .exp-tiers__figure {
  margin: 0 0 clamp(26px, 3.5vw, 44px);
}

.page-products .tier-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--rule);
  background: var(--paper);
}

.page-products .tier-table-wrap:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.page-products .tier-table {
  width: 100%;
  min-width: 700px;
  border-collapse: collapse;
  font-size: 15px;
}

.page-products .tier-table thead th {
  padding: 16px 18px 14px;
  background: var(--ink-blue);
  color: var(--on-dark);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .05em;
  text-align: left;
  vertical-align: bottom;
}

.page-products .tier-table thead th.tier-table__corner {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--on-dark-faint);
  min-width: 108px;
}

.page-products .tier-col--basic {
  box-shadow: inset 0 3px 0 var(--rule);
}

.page-products .tier-col--plus {
  box-shadow: inset 0 3px 0 var(--gold);
  color: var(--gold-light);
}

.page-products .tier-col--pro {
  box-shadow: inset 0 3px 0 var(--gold-light);
  color: var(--gold-light);
}

.page-products .tier-table tbody th[scope="row"] {
  position: sticky;
  left: 0;
  z-index: 2;
  padding: 14px 18px;
  background: var(--mist);
  color: var(--text-ink);
  font-weight: 500;
  font-size: 14px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid rgba(169, 155, 122, .38);
  min-width: 108px;
}

.page-products .tier-table tbody td {
  padding: 14px 18px;
  color: var(--text-ink);
  line-height: 1.7;
  vertical-align: top;
  border-top: 1px solid rgba(169, 155, 122, .38);
}

.page-products .tier-table tbody tr:hover td {
  background: rgba(201, 162, 39, .06);
}

.page-products .tier-table thead th.tier-table__corner {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--ink-blue);
}

.page-products .exp-table-note {
  margin: 12px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--index-gray);
}

/* 费用额度 */
.page-products .exp-quota__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 4vw, 48px);
  align-items: start;
}

@media (min-width: 940px) {
  .page-products .exp-quota__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  }
}

.page-products .exp-quota__list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  border-top: 1px solid rgba(169, 155, 122, .5);
}

.page-products .exp-quota__list li {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(169, 155, 122, .35);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-ink);
}

.page-products .exp-quota__k {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  color: var(--index-gray);
  padding-top: 3px;
}

.page-products .quota-panel {
  padding: clamp(20px, 2.8vw, 30px);
  border: 1px solid var(--rule);
  background: var(--paper);
}

.page-products .quota-panel__title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-ink);
}

.page-products .quota-panel__hint {
  margin: 0 0 20px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--index-gray);
}

.page-products .quota-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}

.page-products .quota-row + .quota-row {
  border-top: 1px solid rgba(169, 155, 122, .32);
}

.page-products .quota-row__name {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--index-gray);
}

.page-products .quota-row__track {
  display: block;
  position: relative;
  height: 10px;
  background: var(--mist);
  border: 1px solid rgba(169, 155, 122, .45);
  overflow: hidden;
}

.page-products .quota-row__fill {
  display: block;
  height: 100%;
  width: var(--w, 20%);
  background: var(--rule);
  transition: width 240ms ease;
}

.page-products .quota-row--basic { --w: 8%; }
.page-products .quota-row--plus { --w: 32%; }
.page-products .quota-row--pro { --w: 100%; }

.page-products .quota-row--plus .quota-row__fill {
  background: var(--gold);
}

.page-products .quota-row--pro .quota-row__fill {
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
}

.page-products .quota-row__val {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-ink);
  white-space: nowrap;
}

.page-products .quota-panel__foot {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(169, 155, 122, .45);
  font-size: 13px;
  line-height: 1.7;
  color: var(--index-gray);
}

/* 索引与检索 */
.page-products .exp-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 4vw, 52px);
  align-items: start;
}

@media (min-width: 900px) {
  .page-products .exp-split {
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  }
}

.page-products .exp-search__figure {
  margin: 0;
}

.page-products .search-steps {
  list-style: none;
  margin: 22px 0 24px;
  padding: 0;
  counter-reset: none;
}

.page-products .search-steps li {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 13px 0;
  border-bottom: 1px solid rgba(169, 155, 122, .35);
}

.page-products .search-steps li:first-child {
  border-top: 1px solid rgba(169, 155, 122, .35);
}

.page-products .search-steps__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--gold);
  padding-top: 3px;
}

.page-products .search-steps__text {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-ink);
}

.page-products .exp-demo {
  border: 1px solid rgba(169, 155, 122, .55);
  background: var(--mist);
}

.page-products .exp-demo__summary {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 15px 18px;
  cursor: pointer;
  list-style: none;
}

.page-products .exp-demo__summary::-webkit-details-marker {
  display: none;
}

.page-products .exp-demo[open] .exp-demo__summary {
  border-bottom: 1px solid rgba(169, 155, 122, .5);
}

.page-products .exp-demo__num {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .08em;
  color: var(--gold);
}

.page-products .exp-demo__title {
  font-size: 15px;
  color: var(--text-ink);
}

.page-products .exp-demo__body {
  padding: 16px 18px 18px;
  background: var(--paper);
}

.page-products .entry-meta {
  margin: 0;
}

.page-products .entry-meta__row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dotted rgba(169, 155, 122, .6);
}

.page-products .entry-meta__row:last-child {
  border-bottom: 0;
}

.page-products .entry-meta dt {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  color: var(--index-gray);
  padding-top: 3px;
}

.page-products .entry-meta dd {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--text-ink);
}

.page-products .entry-meta dd a {
  color: var(--text-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  transition: color 160ms ease;
}

.page-products .entry-meta dd a:hover {
  color: var(--gold);
}

/* 记录中心 */
.page-products .exp-records__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 4vw, 48px);
  align-items: start;
}

@media (min-width: 900px) {
  .page-products .exp-records__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  }
}

.page-products .record-durations {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: rgba(169, 155, 122, .45);
  border: 1px solid rgba(169, 155, 122, .45);
  margin-bottom: clamp(22px, 3vw, 32px);
}

.page-products .record-duration {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 4px 6px;
  padding: 20px 18px;
  background: var(--paper);
}

.page-products .record-duration__num {
  font-family: var(--font-mono);
  font-size: clamp(30px, 4.4vw, 42px);
  line-height: 1;
  color: var(--gold);
}

.page-products .record-duration__unit {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--index-gray);
}

.page-products .record-duration__label {
  grid-column: 1 / -1;
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--text-ink);
}

.page-products .record-rings {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

@media (min-width: 620px) {
  .page-products .record-rings {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.page-products .ring {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 8px;
}

.page-products .ring__shape {
  display: block;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: conic-gradient(var(--gold) 0 25%, rgba(169, 155, 122, .28) 25% 100%);
  transition: background 200ms ease;
}

.page-products .ring--b .ring__shape {
  background: conic-gradient(from 90deg, var(--gold) 0 25%, rgba(169, 155, 122, .28) 25% 100%);
}

.page-products .ring--c .ring__shape {
  background: conic-gradient(from 180deg, var(--gold) 0 25%, rgba(169, 155, 122, .28) 25% 100%);
}

.page-products .ring--d .ring__shape {
  background: conic-gradient(from 270deg, var(--gold) 0 25%, rgba(169, 155, 122, .28) 25% 100%);
}

.page-products .ring:hover .ring__shape {
  background: conic-gradient(var(--gold-light) 0 25%, rgba(169, 155, 122, .35) 25% 100%);
}

.page-products .ring__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-ink);
}

.page-products .ring__desc {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--index-gray);
  max-width: 20ch;
}

.page-products .exp-records__figure {
  margin: 0;
}

/* 版本迭代 */
.page-products .exp-iter__figure {
  margin: 0 0 clamp(26px, 3.5vw, 44px);
}

.page-products .tag-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 760px) {
  .page-products .tag-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.page-products .exp-iter__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.page-products .exp-iter__title {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text-ink);
}

.page-products .exp-iter__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--text-ink);
}

.page-products .exp-iter__after {
  margin: clamp(22px, 3vw, 32px) 0 0;
  max-width: 66ch;
  font-size: 15px;
  line-height: 1.78;
  color: var(--index-gray);
}

.page-products .exp-iter__after a {
  color: var(--text-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  transition: color 160ms ease;
}

.page-products .exp-iter__after a:hover {
  color: var(--gold);
}

/* 角色路径 */
.page-products .role-grid {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--rule);
  background: var(--paper);
}

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

.page-products .role-card {
  padding: clamp(22px, 3vw, 34px);
  border-bottom: 1px solid rgba(169, 155, 122, .45);
}

.page-products .role-card:last-child {
  border-bottom: 0;
}

@media (min-width: 880px) {
  .page-products .role-card {
    border-bottom: 0;
  }

  .page-products .role-card + .role-card {
    border-left: 1px solid rgba(169, 155, 122, .45);
  }
}

.page-products .role-card__tag {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  color: var(--gold);
}

.page-products .role-card__title {
  margin: 0 0 18px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text-ink);
}

.page-products .role-steps {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}

.page-products .role-steps li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 9px 0;
  border-bottom: 1px dotted rgba(169, 155, 122, .6);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-ink);
}

.page-products .role-steps li:last-child {
  border-bottom: 0;
}

.page-products .role-steps__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--index-gray);
}

.page-products .role-card__scene {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid rgba(169, 155, 122, .45);
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--index-gray);
}

/* 开通流程 */
.page-products .exp-flow__figure {
  margin: clamp(20px, 3vw, 32px) 0;
}

.page-products .flow-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 880px) {
  .page-products .flow-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
  }
}

.page-products .flow-step {
  border: 1px solid var(--rule-on-dark);
  background: rgba(22, 38, 61, .72);
  transition: border-color 160ms ease;
}

.page-products .flow-step:hover {
  border-color: var(--gold);
}

.page-products .flow-step__summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 18px;
  cursor: pointer;
  list-style: none;
  color: var(--on-dark);
}

.page-products .flow-step__summary::-webkit-details-marker {
  display: none;
}

.page-products .flow-step[open] .flow-step__summary {
  color: var(--gold-light);
}

.page-products .flow-step__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--gold);
}

.page-products .flow-step__name {
  font-size: 15.5px;
  letter-spacing: -.005em;
}

.page-products .flow-step__body {
  padding: 0 18px 18px;
  border-top: 1px solid var(--rule-on-dark-soft);
}

.page-products .flow-step__body p {
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.78;
  color: var(--on-dark-dim);
}

.page-products .exp-flow__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(24px, 3.5vw, 38px);
}

.page-products .exp-flow__ghost {
  border-color: var(--rule-on-dark);
  color: var(--on-dark);
}

.page-products .exp-flow__ghost:hover {
  border-color: var(--gold);
  color: var(--gold-light);
}

@media (prefers-reduced-motion: reduce) {
  .page-products .quota-row__fill,
  .page-products .ring__shape,
  .page-products .flow-step,
  .page-products .exp-crumb a {
    transition: none;
  }
}
<<<END>>>

继续


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

  首屏
  <section class="section section--dark exp-hero">
    <div class="wrap">
      <nav class="breadcrumb exp-crumb" aria-label="页面位置">
        <ol>
          <li><a href="/">品牌首页</a></li>
          <li><a href="/overview/">品牌总览</a></li>
          <li aria-current="page">体验中心</li>
        </ol>
      </nav>

      <div class="exp-frame" data-reveal>
        <p class="section-label section-label--dark">体验中心 · 服务对照</p>
        <h1 class="display exp-title">三档服务摆在一张桌上，先看清再决定</h1>
        <p class="lede exp-lede">
          金宝博 BEAT 把每一档包含哪些模块、能挂几个席位、额度怎么走、记录能查多久，
          并排放在同一页面。您对着自己的使用规模读一遍，差异在哪里一目了然，不必来回问、来回比。
        </p>

        <div class="exp-hero__actions">
          <a class="btn btn--gold" href="#tier-table">查看对照表</a>
          <a class="btn btn--ghost" href="/feedback/">提交合作意向</a>
        </div>

        <div class="exp-hero__meta">
          <div class="exp-hero__cell">
            <span class="exp-hero__k">服务档位</span>
            <span class="exp-hero__v">3 档可选</span>
          </div>
          <div class="exp-hero__cell">
            <span class="exp-hero__k">账号规模</span>
            <span class="exp-hero__v">1 至 23 个</span>
          </div>
          <div class="exp-hero__cell">
            <span class="exp-hero__k">目录条目</span>
            <span class="exp-hero__v">1280 条</span>
          </div>
          <div class="exp-hero__cell">
            <span class="exp-hero__k">索引版本</span>
            <span class="exp-hero__v">V4.2</span>
          </div>
        </div>
      </div>
    </div>
  </section>

  窄幅定位条
  <section class="section section--mist exp-meter-section">
    <div class="wrap">
      <div class="exp-meter" data-reveal>
        <article class="exp-meter__item">
          <span class="exp-meter__num">01</span>
          <span class="exp-meter__name">基础版</span>
          <span class="exp-meter__spec">单一席位</span>
          <p class="exp-meter__fit">个人先把目录用熟：索引检索、帮助文档、记录查询一次给到。</p>
        </article>
        <article class="exp-meter__item">
          <span class="exp-meter__num">02</span>
          <span class="exp-meter__name">进阶版</span>
          <span class="exp-meter__spec">1 个管理席位 · 6 个子账号</span>
          <p class="exp-meter__fit">两三人小团队分工用：另含额度查看、记录导出与工单优先处理。</p>
        </article>
        <article class="exp-meter__item">
          <span class="exp-meter__num">03</span>
          <span class="exp-meter__name">旗舰版</span>
          <span class="exp-meter__spec">3 个管理席位 · 20 个子账号</span>
          <p class="exp-meter__fit">多人协作团队用：另含席位分层、批量子账号与季度深度回访。</p>
        </article>
      </div>
    </div>
  </section>

  三档对照
  <section class="section section--paper exp-tiers">
    <div class="wrap">
      <figure class="figure exp-tiers__figure">
        <img src="{zhanqunpic:h:600w:1400}" width="1400" height="600" alt="三块并列深墨蓝面板与暖金编号组成的服务档位结构示意图">
        <figcaption class="figure__caption">基础、进阶、旗舰三档并列铺开，席位与子账号随档位逐级放开。</figcaption>
      </figure>

      <div class="exp-head">
        <p class="section-label">服务能力对照</p>
        <h2 class="exp-h2">一列读下来，就是一档的完整画像</h2>
        <p class="exp-p">
          从适用对象到包含模块，从席位数量到支持通道，每一项都按同一组维度铺开。
          横向读一列，您就能判断这一档服务到什么程度、是否够用。
        </p>
      </div>

      <div class="tier-table-wrap" id="tier-table" tabindex="0" role="region" aria-label="三档服务能力对照表">
        <table class="tier-table">
          <thead>
            <tr>
              <th scope="col" class="tier-table__corner">对照项</th>
              <th scope="col" class="tier-col tier-col--basic">基础版</th>
              <th scope="col" class="tier-col tier-col--plus">进阶版</th>
              <th scope="col" class="tier-col tier-col--pro">旗舰版</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">适合对象</th>
              <td>个人用户，先熟悉索引目录与帮助文档</td>
              <td>两三人小团队，需要有人分担日常操作</td>
              <td>多人协作团队，需要按层级分配权限</td>
            </tr>
            <tr>
              <th scope="row">包含模块</th>
              <td>索引目录检索、帮助文档、记录查询</td>
              <td>基础模块，另含额度查看、记录导出、工单优先</td>
              <td>进阶模块，另含席位管理、批量子账号、季度深度回访</td>
            </tr>
            <tr>
              <th scope="row">管理席位</th>
              <td>1 个</td>
              <td>1 个</td>
              <td>3 个</td>
            </tr>
            <tr>
              <th scope="row">子账号</th>
              <td>单一席位，不开设子账号</td>
              <td>6 个</td>
              <td>20 个</td>
            </tr>
            <tr>
              <th scope="row">额度查看</th>
              <td>所在档位额度实时可见</td>
              <td>另含档位切换对照与变更提醒</td>
              <td>另含按席位拆分的额度视图</td>
            </tr>
            <tr>
              <th scope="row">支持通道</th>
              <td>帮助文档与站内工单</td>
              <td>工单优先处理，平均首次响应 3 分钟</td>
              <td>工单优先处理，另含季度深度回访</td>
            </tr>
          </tbody>
        </table>
      </div>
      <p class="exp-table-note">窄屏下可左右滑动，查看完整一列。</p>
    </div>
  </section>

  费用额度
  <section class="section section--mist exp-quota">
    <div class="wrap">
      <div class="exp-quota__grid">
        <div class="exp-quota__text">
          <p class="section-label">费用额度</p>
          <h2 class="exp-h2">额度跟着档位走，切换即刷新</h2>
          <p class="exp-p">
            通用品牌站服务费用额度按基础、进阶、旗舰分别设置。您在页面上切换档位，额度条会立刻跟着变化，
            不用跳转，也不用截图去比。
          </p>
          <p class="exp-p">
            额度覆盖席位与子账号的日常使用，也包含索引检索、记录查询与导出、帮助文档和工单支持。
            开通时顾问确认的档位与页面显示的一致，您在支持中心查到的也是同一组数字。
          </p>
          <ul class="exp-quota__list">
            <li><span class="exp-quota__k">计入项</span>席位与子账号使用、检索次数、记录导出、支持工单</li>
            <li><span class="exp-quota__k">查看入口</span>体验中心的档位面板与支持中心的额度说明</li>
            <li><span class="exp-quota__k">超额处理</span>按您所在周期累计后统一说明，顾问会在开通确认时讲清</li>
          </ul>
        </div>

        <div class="exp-quota__panel">
          <div class="quota-panel">
            <p class="quota-panel__title">账号容量对照</p>
            <p class="quota-panel__hint">席位与子账号合计，条长按同比例绘制。</p>

            <div class="quota-row quota-row--basic">
              <span class="quota-row__name">基础版</span>
              <span class="quota-row__track"><span class="quota-row__fill"></span></span>
              <span class="quota-row__val">1 个账号</span>
            </div>
            <div class="quota-row quota-row--plus">
              <span class="quota-row__name">进阶版</span>
              <span class="quota-row__track"><span class="quota-row__fill"></span></span>
              <span class="quota-row__val">7 个账号</span>
            </div>
            <div class="quota-row quota-row--pro">
              <span class="quota-row__name">旗舰版</span>
              <span class="quota-row__track"><span class="quota-row__fill"></span></span>
              <span class="quota-row__val">23 个账号</span>
            </div>

            <p class="quota-panel__foot">切换档位时，这里与页面上方的额度数字同步变化。</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  索引与检索
  <section class="section section--paper exp-search">
    <div class="wrap">
      <div class="exp-split">
        <div class="exp-split__visual">
          <figure class="figure exp-search__figure">
            <img src="{zhanqunpic:h:800w:800}" width="800" height="800" alt="等宽编号与细线网格构成的抽象检索界面示意，暖金高亮其中一条结果" loading="lazy" decoding="async">
          </figure>
        </div>

        <div class="exp-split__body">
          <p class="section-label">索引与检索</p>
          <h2 class="exp-h2">想找的那一条，三条路都能到</h2>
          <p class="exp-p">
            BEAT站内索引内容目录收录 1280 条条目标引，按九个栏目分栏排列。您可以用标题、编号或关键词任意一种方式进入，
            三种方式指向同一份目录。
          </p>

          <ol class="search-steps">
            <li>
              <span class="search-steps__num">01</span>
              <span class="search-steps__text">输入关键词「席位变更」，结果按所属栏目分组显示。</span>
            </li>
            <li>
              <span class="search-steps__num">02</span>
              <span class="search-steps__text">看到编号 04-217，记下它，下次直接按编号跳回该条。</span>
            </li>
            <li>
              <span class="search-steps__num">03</span>
              <span class="search-steps__text">展开条目，编号、所属栏目、更新说明与关联文档链接四项一起出现。</span>
            </li>
            <li>
              <span class="search-steps__num">04</span>
              <span class="search-steps__text">顺着关联文档进入帮助文档对应分栏，继续看操作细节。</span>
            </li>
          </ol>

          <details class="index-details exp-demo">
            <summary class="exp-demo__summary">
              <span class="exp-demo__num">04-217</span>
              <span class="exp-demo__title">席位变更记录的查看范围</span>
            </summary>
            <div class="index-details__body exp-demo__body">
              <dl class="entry-meta">
                <div class="entry-meta__row">
                  <dt>编号</dt>
                  <dd>04-217</dd>
                </div>
                <div class="entry-meta__row">
                  <dt>所属栏目</dt>
                  <dd>帮助文档 · 账号与席位</dd>
                </div>
                <div class="entry-meta__row">
                  <dt>更新说明</dt>
                  <dd>补充了子账号批量调整后的记录展示方式，方便管理员回溯一次操作影响到的账号范围。</dd>
                </div>
                <div class="entry-meta__row">
                  <dt>关联文档</dt>
                  <dd><a href="/support/">支持中心 · 席位与子账号调整</a></dd>
                </div>
              </dl>
            </div>
          </details>

          <p class="exp-p exp-p--tight">
            帮助文档本身提供 12 个分栏、480 余篇说明条目，同样带有快速检索入口，找条目与找文档是一套手感。
          </p>
        </div>
      </div>
    </div>
  </section>

  记录中心
  <section class="section section--mist exp-records">
    <div class="wrap">
      <div class="exp-head">
        <p class="section-label">记录中心</p>
        <h2 class="exp-h2">做过什么，翻得到</h2>
        <p class="exp-p">
          电脑端的使用记录保留 90 天，移动端保留 30 天。记录按登录、检索、额度查看、席位变更四类动作分别留痕。
          您可以在记录中心按时间段筛选，把结果导出成表格文件，文件保存在您的本地。
        </p>
      </div>

      <div class="exp-records__grid">
        <div class="exp-records__main">
          <div class="record-durations">
            <div class="record-duration">
              <span class="record-duration__num">90</span>
              <span class="record-duration__unit">天</span>
              <span class="record-duration__label">电脑端保留时长</span>
            </div>
            <div class="record-duration">
              <span class="record-duration__num">30</span>
              <span class="record-duration__unit">天</span>
              <span class="record-duration__label">移动端保留时长</span>
            </div>
          </div>

          <ul class="record-rings">
            <li class="ring">
              <span class="ring__shape" aria-hidden="true"></span>
              <span class="ring__name">登录</span>
              <span class="ring__desc">谁在什么时候进入了账号</span>
            </li>
            <li class="ring ring--b">
              <span class="ring__shape" aria-hidden="true"></span>
              <span class="ring__name">检索</span>
              <span class="ring__desc">查过哪些关键词与编号</span>
            </li>
            <li class="ring ring--c">
              <span class="ring__shape" aria-hidden="true"></span>
              <span class="ring__name">额度查看</span>
              <span class="ring__desc">在哪个档位停留过、比对过几次</span>
            </li>
            <li class="ring ring--d">
              <span class="ring__shape" aria-hidden="true"></span>
              <span class="ring__name">席位变更</span>
              <span class="ring__desc">增加或收回过哪些子账号</span>
            </li>
          </ul>

          <p class="exp-p exp-p--tight">
            导出文件保留在您本机，不占用站内存储。记录包含哪些信息、保存多久，可以在
            <a href="/data-privacy/">数据与隐私</a>中看到完整说明。
          </p>
        </div>

        <div class="exp-records__visual">
          <figure class="figure exp-records__figure">
            <img src="{zhanqunpic:h:700w:900}" width="900" height="700" alt="圆形刻度盘与纸白记录卡片层叠组合，浅金标记刻度位置" loading="lazy" decoding="async">
          </figure>
        </div>
      </div>
    </div>
  </section>

  版本迭代
  <section class="section section--paper exp-iter">
    <div class="wrap">
      <figure class="figure exp-iter__figure">
        <img src="{zhanqunpic:h:500w:1200}" width="1200" height="500" alt="由上至下逐层缩窄的几何线框层叠结构，最上一层被暖金点亮" loading="lazy" decoding="async">
      </figure>

      <div class="exp-head">
        <p class="section-label">版本迭代</p>
        <h2 class="exp-h2">索引系统走到 V4.2</h2>
        <p class="exp-p">
          每一次版本更新都围绕同一件事：让条目更容易被找到、更容易被读懂。V4.2 带来三处变化。
        </p>
      </div>

      <div class="tag-cards">
        <article class="tag-card exp-iter__card">
          <span class="tag-card__index">V4.2 · 01</span>
          <h3 class="exp-iter__title">刷新更快</h3>
          <p class="exp-iter__text">
            单次全量索引刷新耗时约 45 秒。目录结构有调整时，您不用等太久就能看到最新排序。
          </p>
        </article>
        <article class="tag-card exp-iter__card">
          <span class="tag-card__index">V4.2 · 02</span>
          <h3 class="exp-iter__title">关系看得见</h3>
          <p class="exp-iter__text">
            条目之间的关联关系以可视方式呈现。打开一条，就能顺着线找到同一条业务链上的其他条目。
          </p>
        </article>
        <article class="tag-card exp-iter__card">
          <span class="tag-card__index">V4.2 · 03</span>
          <h3 class="exp-iter__title">筛选更细</h3>
          <p class="exp-iter__text">
            检索结果支持按栏目二次筛选。关键词命中较多时，先圈定栏目再看条目，效率明显不同。
          </p>
        </article>
      </div>

      <p class="exp-iter__after">
        下一步的方向，是让跨栏目的条目关联走得更直接，并在检索结果页提供更细的筛选维度。
        相关进展会持续记录在<a href="/trends/">趋势观察</a>。
      </p>
    </div>
  </section>

  场景化使用路径
  <section class="section section--mist exp-roles">
    <div class="wrap">
      <div class="exp-head">
        <p class="section-label">使用路径</p>
        <h2 class="exp-h2">三种身份，三条从开通到日常的路线</h2>
      </div>

      <div class="role-grid">
        <article class="role-card">
          <p class="role-card__tag">个人长期用户</p>
          <h3 class="role-card__title">从基础版开始，把目录用熟</h3>
          <ol class="role-steps">
            <li><span class="role-steps__n">1</span>提交意向后收到基础版账号</li>
            <li><span class="role-steps__n">2</span>用关键词与编号两种方式建立检索习惯</li>
            <li><span class="role-steps__n">3</span>在记录中心回看自己的检索轨迹</li>
          </ol>
          <p class="role-card__scene">
            典型场景：连续使用两年以上，想确认某个功能是不是近期改过，直接按编号翻到该条看更新说明。
          </p>
        </article>

        <article class="role-card">
          <p class="role-card__tag">团队客户</p>
          <h3 class="role-card__title">按人数与分工，在进阶和旗舰之间选</h3>
          <ol class="role-steps">
            <li><span class="role-steps__n">1</span>确认需要几个管理席位、几个子账号</li>
            <li><span class="role-steps__n">2</span>开通后由管理员分配子账号与权限</li>
            <li><span class="role-steps__n">3</span>按周期核对额度使用与席位变更记录</li>
          </ol>
          <p class="role-card__scene">
            典型场景：季度末要出一份团队操作回溯，在记录中心按时间段导出表格文件，交给内部审阅。
          </p>
        </article>

        <article class="role-card">
          <p class="role-card__tag">合作机构</p>
          <h3 class="role-card__title">对照目录结构，评估接入方式</h3>
          <ol class="role-steps">
            <li><span class="role-steps__n">1</span>先看索引目录的分栏组织，判断与自身内容的衔接点</li>
            <li><span class="role-steps__n">2</span>对照三档服务的模块与支持通道</li>
            <li><span class="role-steps__n">3</span>通过意见反馈提交合作意向，由团队对接</li>
          </ol>
          <p class="role-card__scene">
            典型场景：内容或技术机构希望把自有条目接入索引体系，先了解编号规则与关联文档的组织方式。
          </p>
        </article>
      </div>
    </div>
  </section>

  开通流程
  <section class="section section--dark exp-flow">
    <div class="wrap wrap--narrow">
      <p class="section-label section-label--dark">开通与升级</p>
      <h2 class="exp-h2 exp-h2--on-dark">从提交意向上线，四步走完</h2>
      <p class="exp-p exp-p--on-dark">
        每一步该准备什么、大概花多久，都可以点开看。升级现有档位走的也是同一条流程，只是从第二步直接切入。
      </p>

      <figure class="figure exp-flow__figure">
        <img src="{zhanqunpic:h:400w:1000}" width="1000" height="400" alt="四个等距节点与连线组成的抽象流程图，连线为金灰色，节点为暖金色" loading="lazy" decoding="async">
      </figure>

      <ol class="flow-steps">
        <li>
          <details class="flow-step" open>
            <summary class="flow-step__summary">
              <span class="flow-step__num">01</span>
              <span class="flow-step__name">提交意向</span>
            </summary>
            <div class="flow-step__body">
              <p>在意见反馈页写清您的使用人数、大致分工和想用的模块。准备信息：团队人数与主要用途。一般当天即可收到回执。</p>
            </div>
          </details>
        </li>
        <li>
          <details class="flow-step">
            <summary class="flow-step__summary">
              <span class="flow-step__num">02</span>
              <span class="flow-step__name">确认档位</span>
            </summary>
            <div class="flow-step__body">
              <p>顾问与您逐项核对席位、子账号和额度，确认落在哪一档。准备信息：管理席位数量与子账号需求。通常一个工作日内完成。</p>
            </div>
          </details>
        </li>
        <li>
          <details class="flow-step">
            <summary class="flow-step__summary">
              <span class="flow-step__num">03</span>
              <span class="flow-step__name">配置账号</span>
            </summary>
            <div class="flow-step__body">
              <p>按确认结果开设管理席位与子账号，同步开通索引检索、记录中心与导出权限。准备信息：管理员账号与联系邮箱。</p>
            </div>
          </details>
        </li>
        <li>
          <details class="flow-step">
            <summary class="flow-step__summary">
              <span class="flow-step__num">04</span>
              <span class="flow-step__name">上线使用</span>
            </summary>
            <div class="flow-step__body">
              <p>账号可用后，从目录检索开始上手；管理员可先在记录中心熟悉筛选与导出。后续按回访周期与您保持联系。</p>
            </div>
          </details>
        </li>
      </ol>

      <div class="exp-flow__actions">
        <a class="btn btn--gold" href="/feedback/">提交合作意向</a>
        <a class="btn btn--ghost exp-flow__ghost" href="/support/">先去支持中心看看</a>
      </div>
    </div>
  </section>

</main>

/* ===== 体验中心 /experience/ ===== */

.page-products .exp-crumb {
  margin-bottom: clamp(20px, 3vw, 34px);
}

.page-products .exp-crumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
}

.page-products .exp-crumb a {
  color: var(--on-dark-dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}

.page-products .exp-crumb a:hover {
  color: var(--gold-light);
  border-bottom-color: var(--gold);
}

.page-products .exp-crumb li[aria-current] {
  color: var(--gold);
}

.page-products .exp-crumb li + li::before {
  content: "/";
  margin-right: 10px;
  color: var(--rule-on-dark);
}

/* 首屏框景 */
.page-products .exp-frame {
  position: relative;
  padding: clamp(26px, 4.5vw, 56px) clamp(18px, 4vw, 56px);
  background: linear-gradient(180deg, rgba(22, 38, 61, .92), rgba(14, 27, 46, .62));
  border: 1px solid var(--rule-on-dark);
}

.page-products .exp-frame::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid var(--rule-on-dark-soft);
  pointer-events: none;
}

.page-products .exp-frame::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 56px;
  height: 56px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  pointer-events: none;
}

.page-products .exp-title {
  margin: 14px 0 18px;
  max-width: 20ch;
}

.page-products .exp-lede {
  max-width: 62ch;
  color: var(--on-dark-dim);
}

.page-products .exp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(22px, 3vw, 32px);
}

.page-products .exp-hero .btn--ghost {
  border-color: var(--rule-on-dark);
  color: var(--on-dark);
}

.page-products .exp-hero .btn--ghost:hover {
  border-color: var(--gold);
  color: var(--gold-light);
}

.page-products .exp-hero__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(26px, 4vw, 44px);
  border: 1px solid var(--rule-on-dark-soft);
  background: var(--rule-on-dark-soft);
}

@media (min-width: 700px) {
  .page-products .exp-hero__meta {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.page-products .exp-hero__cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 15px 18px;
  background: var(--ink-blue);
}

.page-products .exp-hero__k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--on-dark-faint);
}

.page-products .exp-hero__v {
  font-size: clamp(17px, 2vw, 20px);
  color: var(--gold-light);
  letter-spacing: -.01em;
}

/* 窄幅定位条 */
.page-products .exp-meter-section {
  padding-top: clamp(28px, 4vw, 44px);
  padding-bottom: clamp(28px, 4vw, 44px);
}

.page-products .exp-meter {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--rule);
  background: var(--paper);
}

@media (min-width: 780px) {
  .page-products .exp-meter {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.page-products .exp-meter__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  padding: clamp(20px, 2.6vw, 28px);
  border-bottom: 1px solid rgba(169, 155, 122, .38);
}

.page-products .exp-meter__item:last-child {
  border-bottom: 0;
}

@media (min-width: 780px) {
  .page-products .exp-meter__item {
    border-bottom: 0;
  }

  .page-products .exp-meter__item + .exp-meter__item {
    border-left: 1px solid rgba(169, 155, 122, .38);
  }
}

.page-products .exp-meter__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--gold);
  padding-top: 3px;
}

.page-products .exp-meter__name {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text-ink);
}

.page-products .exp-meter__spec {
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--index-gray);
}

.page-products .exp-meter__fit {
  grid-column: 2;
  margin: 6px 0 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-ink);
}

/* 章节标题组 */
.page-products .exp-head {
  max-width: 68ch;
  margin-bottom: clamp(22px, 3vw, 34px);
}

.page-products .exp-h2 {
  margin: 12px 0 14px;
  font-size: clamp(24px, 3.4vw, 40px);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--text-ink);
}

.page-products .exp-h2--on-dark {
  color: var(--on-dark);
}

.page-products .exp-p {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.78;
  color: var(--text-ink);
  max-width: 66ch;
}

.page-products .exp-p--tight {
  margin-top: 18px;
  font-size: 15px;
  color: var(--index-gray);
}

.page-products .exp-p--on-dark {
  color: var(--on-dark-dim);
}

.page-products .exp-p a,
.page-products .exp-p--tight a {
  color: var(--text-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  transition: color 160ms ease;
}

.page-products .exp-p a:hover,
.page-products .exp-p--tight a:hover {
  color: var(--gold);
}

/* 三档对照 */
.page-products .exp-tiers__figure {
  margin: 0 0 clamp(26px, 3.5vw, 44px);
}

.page-products .tier-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--rule);
  background: var(--paper);
}

.page-products .tier-table-wrap:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.page-products .tier-table {
  width: 100%;
  min-width: 700px;
  border-collapse: collapse;
  font-size: 15px;
}

.page-products .tier-table thead th {
  padding: 16px 18px 14px;
  background: var(--ink-blue);
  color: var(--on-dark);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .05em;
  text-align: left;
  vertical-align: bottom;
}

.page-products .tier-table thead th.tier-table__corner {
  position: sticky;
  left: 0;
  z-index: 3;
  min-width: 108px;
  background: var(--ink-blue);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--on-dark-faint);
}

.page-products .tier-col--basic {
  box-shadow: inset 0 3px 0 var(--rule);
}

.page-products .tier-col--plus {
  box-shadow: inset 0 3px 0 var(--gold);
  color: var(--gold-light);
}

.page-products .tier-col--pro {
  box-shadow: inset 0 3px 0 var(--gold-light);
  color: var(--gold-light);
}

.page-products .tier-table tbody th[scope="row"] {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 108px;
  padding: 14px 18px;
  background: var(--mist);
  color: var(--text-ink);
  font-weight: 500;
  font-size: 14px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid rgba(169, 155, 122, .38);
}

.page-products .tier-table tbody td {
  padding: 14px 18px;
  color: var(--text-ink);
  line-height: 1.7;
  vertical-align: top;
  border-top: 1px solid rgba(169, 155, 122, .38);
}

.page-products .tier-table tbody tr:hover td {
  background: rgba(201, 162, 39, .06);
}

.page-products .exp-table-note {
  margin: 12px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--index-gray);
}

/* 费用额度 */
.page-products .exp-quota__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 4vw, 48px);
  align-items: start;
}

@media (min-width: 940px) {
  .page-products .exp-quota__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  }
}

.page-products .exp-quota__list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  border-top: 1px solid rgba(169, 155, 122, .5);
}

.page-products .exp-quota__list li {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(169, 155, 122, .35);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-ink);
}

.page-products .exp-quota__k {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  color: var(--index-gray);
  padding-top: 3px;
}

.page-products .quota-panel {
  padding: clamp(20px, 2.8vw, 30px);
  border: 1px solid var(--rule);
  background: var(--paper);
}

.page-products .quota-panel__title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-ink);
}

.page-products .quota-panel__hint {
  margin: 0 0 20px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--index-gray);
}

.page-products .quota-row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}

.page-products .quota-row + .quota-row {
  border-top: 1px solid rgba(169, 155, 122, .32);
}

.page-products .quota-row__name {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--index-gray);
}

.page-products .quota-row__track {
  display: block;
  position: relative;
  height: 10px;
  background: var(--mist);
  border: 1px solid rgba(169, 155, 122, .45);
  overflow: hidden;
}

.page-products .quota-row__fill {
  display: block;
  height: 100%;
  width: var(--w, 20%);
  background: var(--rule);
  transition: width 240ms ease;
}

.page-products .quota-row--basic { --w: 8%; }
.page-products .quota-row--plus { --w: 32%; }
.page-products .quota-row--pro { --w: 100%; }

.page-products .quota-row--plus .quota-row__fill {
  background: var(--gold);
}

.page-products .quota-row--pro .quota-row__fill {
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
}

.page-products .quota-row__val {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-ink);
  white-space: nowrap;
}

.page-products .quota-panel__foot {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(169, 155, 122, .45);
  font-size: 13px;
  line-height: 1.7;
  color: var(--index-gray);
}

/* 索引与检索 */
.page-products .exp-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 4vw, 52px);
  align-items: start;
}

@media (min-width: 900px) {
  .page-products .exp-split {
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  }
}

.page-products .exp-search__figure {
  margin: 0;
}

.page-products .search-steps {
  list-style: none;
  margin: 22px 0 24px;
  padding: 0;
}

.page-products .search-steps li {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 13px 0;
  border-bottom: 1px solid rgba(169, 155, 122, .35);
}

.page-products .search-steps li:first-child {
  border-top: 1px solid rgba(169, 155, 122, .35);
}

.page-products .search-steps__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--gold);
  padding-top: 3px;
}

.page-products .search-steps__text {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-ink);
}

.page-products .exp-demo {
  border: 1px solid rgba(169, 155, 122, .55);
  background: var(--mist);
}

.page-products .exp-demo__summary {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 15px 18px;
  cursor: pointer;
  list-style: none;
}

.page-products .exp-demo__summary::-webkit-details-marker {
  display: none;
}

.page-products .exp-demo[open] .exp-demo__summary {
  border-bottom: 1px solid rgba(169, 155, 122, .5);
}

.page-products .exp-demo__num {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .08em;
  color: var(--gold);
}

.page-products .exp-demo__title {
  font-size: 15px;
  color: var(--text-ink);
}

.page-products .exp-demo__body {
  padding: 16px 18px 18px;
  background: var(--paper);
}

.page-products .entry-meta {
  margin: 0;
}

.page-products .entry-meta__row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dotted rgba(169, 155, 122, .6);
}

.page-products .entry-meta__row:last-child {
  border-bottom: 0;
}

.page-products .entry-meta dt {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  color: var(--index-gray);
  padding-top: 3px;
}

.page-products .entry-meta dd {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--text-ink);
}

.page-products .entry-meta dd a {
  color: var(--text-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  transition: color 160ms ease;
}

.page-products .entry-meta dd a:hover {
  color: var(--gold);
}

/* 记录中心 */
.page-products .exp-records__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 4vw, 48px);
  align-items: start;
}

@media (min-width: 900px) {
  .page-products .exp-records__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  }
}

.page-products .record-durations {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: clamp(22px, 3vw, 32px);
  background: rgba(169, 155, 122, .45);
  border: 1px solid rgba(169, 155, 122, .45);
}

.page-products .record-duration {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 4px 6px;
  padding: 20px 18px;
  background: var(--paper);
}

.page-products .record-duration__num {
  font-family: var(--font-mono);
  font-size: clamp(30px, 4.4vw, 42px);
  line-height: 1;
  color: var(--gold);
}

.page-products .record-duration__unit {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--index-gray);
}

.page-products .record-duration__label {
  grid-column: 1 / -1;
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--text-ink);
}

.page-products .record-rings {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

@media (min-width: 620px) {
  .page-products .record-rings {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.page-products .ring {
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
}

.page-products .ring__shape {
  display: block;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: conic-gradient(var(--gold) 0 25%, rgba(169, 155, 122, .28) 25% 100%);
  transition: background 200ms ease;
}

.page-products .ring--b .ring__shape {
  background: conic-gradient(from 90deg, var(--gold) 0 25%, rgba(169, 155, 122, .28) 25% 100%);
}

.page-products .ring--c .ring__shape {
  background: conic-gradient(from 180deg, var(--gold) 0 25%, rgba(169, 155, 122, .28) 25% 100%);
}

.page-products .ring--d .ring__shape {
  background: conic-gradient(from 270deg, var(--gold) 0 25%, rgba(169, 155, 122, .28) 25% 100%);
}

.page-products .ring:hover .ring__shape {
  background: conic-gradient(var(--gold-light) 0 25%, rgba(169, 155, 122, .35) 25% 100%);
}

.page-products .ring__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-ink);
}

.page-products .ring__desc {
  max-width: 20ch;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--index-gray);
}

.page-products .exp-records__figure {
  margin: 0;
}

/* 版本迭代 */
.page-products .exp-iter__figure {
  margin: 0 0 clamp(26px, 3.5vw, 44px);
}

.page-products .tag-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 760px) {
  .page-products .tag-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.page-products .exp-iter__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.page-products .exp-iter__title {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text-ink);
}

.page-products .exp-iter__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--text-ink);
}

.page-products .exp-iter__after {
  margin: clamp(22px, 3vw, 32px) 0 0;
  max-width: 66ch;
  font-size: 15px;
  line-height: 1.78;
  color: var(--index-gray);
}

.page-products .exp-iter__after a {
  color: var(--text-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  transition: color 160ms ease;
}

.page-products .exp-iter__after a:hover {
  color: var(--gold);
}

/* 角色路径 */
.page-products .role-grid {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--rule);
  background: var(--paper);
}

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

.page-products .role-card {
  padding: clamp(22px, 3vw, 34px);
  border-bottom: 1px solid rgba(169, 155, 122, .45);
}

.page-products .role-card:last-child {
  border-bottom: 0;
}

@media (min-width: 880px) {
  .page-products .role-card {
    border-bottom: 0;
  }

  .page-products .role-card + .role-card {
    border-left: 1px solid rgba(169, 155, 122, .45);
  }
}

.page-products .role-card__tag {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  color: var(--gold);
}

.page-products .role-card__title {
  margin: 0 0 18px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text-ink);
}

.page-products .role-steps {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}

.page-products .role-steps li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 9px 0;
  border-bottom: 1px dotted rgba(169, 155, 122, .6);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-ink);
}

.page-products .role-steps li:last-child {
  border-bottom: 0;
}

.page-products .role-steps__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--index-gray);
}

.page-products .role-card__scene {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid rgba(169, 155, 122, .45);
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--index-gray);
}

/* 开通流程 */
.page-products .exp-flow__figure {
  margin: clamp(20px, 3vw, 32px) 0;
}

.page-products .flow-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 880px) {
  .page-products .flow-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
  }
}

.page-products .flow-step {
  border: 1px solid var(--rule-on-dark);
  background: rgba(22, 38, 61, .72);
  transition: border-color 160ms ease;
}

.page-products .flow-step:hover {
  border-color: var(--gold);
}

.page-products .flow-step__summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 18px;
  cursor: pointer;
  list-style: none;
  color: var(--on-dark);
}

.page-products .flow-step__summary::-webkit-details-marker {
  display: none;
}

.page-products .flow-step[open] .flow-step__summary {
  color: var(--gold-light);
}

.page-products .flow-step__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--gold);
}

.page-products .flow-step__name {
  font-size: 15.5px;
  letter-spacing: -.005em;
}

.page-products .flow-step__body {
  padding: 0 18px 18px;
  border-top: 1px solid var(--rule-on-dark-soft);
}

.page-products .flow-step__body p {
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.78;
  color: var(--on-dark-dim);
}

.page-products .exp-flow__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(24px, 3.5vw, 38px);
}

.page-products .exp-flow__ghost {
  border-color: var(--rule-on-dark);
  color: var(--on-dark);
}

.page-products .exp-flow__ghost:hover {
  border-color: var(--gold);
  color: var(--gold-light);
}

@media (prefers-reduced-motion: reduce) {
  .page-products .quota-row__fill,
  .page-products .ring__shape,
  .page-products .flow-step,
  .page-products .exp-crumb a,
  .page-products .exp-p a,
  .page-products .exp-iter__after a,
  .page-products .entry-meta dd a {
    transition: none;
  }
}
<<<END>>>