.page-products {
  --pp-gap: clamp(1rem, 3vw, 2rem);
  --pp-pad: clamp(1rem, 2.4vw, 1.6rem);
  padding-bottom: clamp(2.5rem, 7vw, 5rem);
}

.page-products .p-hero {
  display: grid;
  gap: var(--pp-gap);
  padding-block: clamp(1.4rem, 4vw, 3rem);
  grid-template-areas:
    "copy"
    "figure"
    "legend";
}

.page-products .p-hero-copy {
  grid-area: copy;
  display: grid;
  gap: 0.9rem;
  align-content: start;
}

.page-products .p-hero-copy h1 {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(2rem, 6vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
}

.page-products .p-lead {
  margin: 0;
  max-width: 56ch;
  color: var(--text-dim);
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  line-height: 1.85;
}

.page-products .p-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.3rem;
}

.page-products .p-hero-figure {
  grid-area: figure;
}

.page-products .p-legend {
  grid-area: legend;
  border-top: 1px solid var(--ink-line);
  padding-top: 1rem;
}

.page-products .p-legend-title {
  margin: 0 0 0.8rem;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  color: var(--electric);
  text-transform: uppercase;
}

.page-products .p-legend-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
  grid-template-columns: 1fr;
}

.page-products .p-legend-item {
  --tone: var(--silver);
  border-top: 2px solid var(--tone);
  padding-top: 0.65rem;
  display: grid;
  gap: 0.28rem;
  align-content: start;
  transition: transform var(--dur) var(--ease);
}

.page-products .p-legend-item[data-tone="signal"] { --tone: var(--signal); }
.page-products .p-legend-item[data-tone="celadon"] { --tone: var(--celadon); }
.page-products .p-legend-item[data-tone="electric"] { --tone: var(--electric); }
.page-products .p-legend-item[data-tone="silver"] { --tone: var(--silver); }

.page-products .p-legend-num {
  margin: 0;
  font-size: 0.72rem;
  color: var(--tone);
  letter-spacing: 0.12em;
}

.page-products .p-legend-name {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
}

.page-products .p-legend-desc {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--text-dim);
}

.page-products .p-jump {
  border-block: 1px solid var(--ink-line);
}

.page-products .p-jump ul {
  list-style: none;
  margin: 0;
  padding: 0.55rem 0;
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.page-products .p-jump li {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.page-products .p-jump a {
  display: inline-block;
  white-space: nowrap;
  padding: 0.42rem 0.85rem;
  border: 1px solid var(--ink-line);
  color: var(--text-dim);
  font-size: 0.8rem;
  text-decoration: none;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.page-products .p-jump a:hover,
.page-products .p-jump a:focus-visible {
  color: var(--text);
  border-color: var(--electric);
  background: rgba(46, 217, 208, 0.08);
}

.page-products .p-section {
  --accent: var(--electric);
  padding-block: clamp(2rem, 5vw, 3.6rem);
  border-top: 1px solid var(--ink-line);
  scroll-margin-top: 5rem;
}

.page-products .p-section:first-of-type {
  border-top: 0;
}

.page-products .p-section[data-accent="signal"] { --accent: var(--signal); }
.page-products .p-section[data-accent="celadon"] { --accent: var(--celadon); }
.page-products .p-section[data-accent="electric"] { --accent: var(--electric); }
.page-products .p-section[data-accent="silver"] { --accent: var(--silver); }

.page-products .p-section-head {
  display: grid;
  gap: 0.6rem;
  max-width: 64ch;
  margin-bottom: clamp(1.2rem, 3vw, 2rem);
}

.page-products .p-section-head h2 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(1.5rem, 3.6vw, 2.3rem);
  line-height: 1.2;
  color: var(--text);
  border-left: 4px solid var(--accent);
  padding-left: 0.75rem;
}

.page-products .p-section-head p {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.95rem;
  line-height: 1.85;
}

.page-products .p-inline-note {
  margin: clamp(1.1rem, 2.5vw, 1.6rem) 0 0;
  font-size: 0.86rem;
  color: var(--text-dim);
  line-height: 1.8;
}

.page-products .p-inline-note a {
  color: var(--electric);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-products .p-ruler {
  height: 14px;
  margin-top: 1.1rem;
  background-image: linear-gradient(90deg, var(--ink-line) 1px, transparent 1px);
  background-size: calc(100% / 24) 100%;
  background-repeat: repeat-x;
  border-bottom: 1px solid var(--ink-line);
  opacity: 0.85;
}

.page-products .cycle-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 1.4rem;
}

.page-products .cycle-card {
  background: var(--ink-panel);
  border: 1px solid var(--ink-line);
  border-top: 3px solid var(--signal);
  padding: var(--pp-pad);
  display: grid;
  gap: 0.55rem;
  align-content: start;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.page-products .cycle-card:hover,
.page-products .cycle-card:focus-within {
  transform: translateY(-3px);
  border-color: var(--signal);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.36);
}

.page-products .cycle-days {
  margin: 0;
  font-size: clamp(2rem, 5vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--signal);
  letter-spacing: -0.02em;
}

.page-products .cycle-days span {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-dim);
  margin-left: 0.35rem;
  letter-spacing: 0;
}

.page-products .cycle-card h3 {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text);
}

.page-products .cycle-card p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.75;
  color: var(--text-dim);
}

.page-products .cycle-card ul {
  list-style: none;
  margin: 0.2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.page-products .cycle-card li {
  position: relative;
  padding-left: 0.95rem;
  font-size: 0.8rem;
  color: var(--text-dim);
}

.page-products .cycle-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.5rem;
  height: 1px;
  background: var(--signal);
}

.page-products .p-tier-layout {
  display: grid;
  gap: var(--pp-gap);
  grid-template-columns: 1fr;
}

.page-products .p-tier-figure {
  margin: 0;
}

.page-products .tier-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

.page-products .tier-card {
  background: var(--paper);
  color: var(--on-light);
  border: 1px solid var(--ink-line);
  border-left: 4px solid var(--celadon);
  padding: var(--pp-pad);
  display: grid;
  gap: 0.55rem;
  align-content: start;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.page-products .tier-card:hover,
.page-products .tier-card:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.28);
}

.page-products .tier-tag {
  justify-self: start;
}

.page-products .tier-card h3 {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.08rem;
  font-weight: 900;
  color: var(--on-light);
}

.page-products .tier-card > p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.75;
  color: #33444f;
}

.page-products .tier-facts {
  margin: 0.3rem 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3rem 0.7rem;
  font-size: 0.8rem;
  border-top: 1px solid rgba(8, 19, 31, 0.18);
  padding-top: 0.6rem;
}

.page-products .tier-facts dt {
  color: #5a6c78;
  font-weight: 600;
}

.page-products .tier-facts dd {
  margin: 0;
  color: var(--on-light);
}

.page-products .p-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--ink-line);
  background: var(--ink-panel);
  -webkit-overflow-scrolling: touch;
}

.page-products .p-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.page-products .p-table thead th {
  text-align: left;
  padding: 0.75rem 0.9rem;
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--text);
  background: rgba(36, 68, 92, 0.45);
  border-bottom: 1px solid var(--ink-line);
  white-space: nowrap;
}

.page-products .p-table tbody tr {
  border-bottom: 1px solid var(--ink-line);
  transition: background var(--dur) var(--ease);
}

.page-products .p-table tbody tr:last-child {
  border-bottom: 0;
}

.page-products .p-table tbody tr:hover,
.page-products .p-table tbody tr:focus-within {
  background: rgba(46, 217, 208, 0.09);
}

.page-products .p-table tbody tr[data-tone="signal"] { --row: var(--signal); }
.page-products .p-table tbody tr[data-tone="celadon"] { --row: var(--celadon); }
.page-products .p-table tbody tr[data-tone="electric"] { --row: var(--electric); }
.page-products .p-table tbody tr[data-tone="silver"] { --row: var(--silver); }

.page-products .p-table tbody th {
  text-align: left;
  padding: 0.85rem 0.9rem;
  font-weight: 700;
  color: var(--text);
  box-shadow: inset 3px 0 0 var(--row, var(--silver));
  white-space: nowrap;
}

.page-products .p-table tbody td {
  padding: 0.85rem 0.9rem;
  color: var(--text-dim);
  line-height: 1.7;
  vertical-align: top;
}

.page-products .p-table tbody td.mono {
  color: var(--text);
  font-size: 0.82rem;
  white-space: nowrap;
}

.page-products .p-table .legend-dot {
  margin-right: 0.45rem;
  vertical-align: middle;
}

.page-products .p-compare-foot {
  display: grid;
  gap: var(--pp-gap);
  grid-template-columns: 1fr;
  margin-top: clamp(1.2rem, 3vw, 1.8rem);
}

.page-products .p-legend-box {
  border: 1px solid var(--ink-line);
  background: var(--ink-panel);
  padding: var(--pp-pad);
}

.page-products .p-legend-box ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.page-products .p-legend-box .legend-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.84rem;
  color: var(--text-dim);
  line-height: 1.6;
}

.page-products .p-legend-note {
  margin: 0.9rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px solid var(--ink-line);
  font-size: 0.82rem;
  line-height: 1.75;
  color: var(--text-dim);
}

.page-products .p-legend-note a {
  color: var(--electric);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-products .p-compare-figure {
  margin: 0;
}

.page-products .p-export {
  display: grid;
  gap: var(--pp-gap);
  grid-template-columns: 1fr;
  align-items: start;
}

.page-products .p-export-copy {
  display: grid;
  gap: 0.7rem;
  align-content: start;
}

.page-products .p-export-copy h2 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(1.4rem, 3.4vw, 2.1rem);
  line-height: 1.2;
  color: var(--on-light);
}

.page-products .p-export-copy p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.8;
  color: #33444f;
}

.page-products .p-export .export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.4rem;
}

.page-products .p-export-alt {
  color: var(--on-light);
  border-color: rgba(8, 19, 31, 0.35);
}

.page-products .p-export-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(8, 19, 31, 0.2);
}

.page-products .p-export-list .export-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.15rem;
  padding: 0.72rem 0;
  border-bottom: 1px solid rgba(8, 19, 31, 0.2);
}

.page-products .p-export-list .export-key {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: #5a6c78;
}

.page-products .p-export-list .export-val {
  font-size: 0.88rem;
  color: var(--on-light);
  line-height: 1.6;
}

.page-products .p-choose-layout {
  display: grid;
  gap: var(--pp-gap);
  grid-template-columns: 1fr;
}

.page-products .p-path-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}

.page-products .p-path {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  padding: 0.95rem 1rem;
  border: 1px solid var(--ink-line);
  border-left: 3px solid var(--electric);
  background: var(--ink-panel);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-products .p-path:hover,
.page-products .p-path:focus-within {
  transform: translateX(3px);
  border-color: var(--electric);
}

.page-products .p-path-num {
  font-size: 0.78rem;
  color: var(--electric);
  letter-spacing: 0.1em;
  padding-top: 0.2rem;
}

.page-products .p-path h3 {
  margin: 0 0 0.25rem;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
}

.page-products .p-path p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.75;
  color: var(--text-dim);
}

.page-products .p-choose-figure {
  margin: 0;
}

.page-products .p-contact-strip {
  margin-top: clamp(1.4rem, 3.5vw, 2.2rem);
  border: 1px solid var(--ink-line);
  border-top: 3px solid var(--signal);
  background: var(--ink-panel);
  padding: var(--pp-pad);
  display: grid;
  gap: 0.9rem;
}

.page-products .p-contact-strip p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.8;
  color: var(--text-dim);
}

.page-products .p-contact-strip strong {
  color: var(--text);
}

.page-products .p-contact-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.page-products .p-back-home {
  color: var(--text-dim);
  font-size: 0.84rem;
}

.page-products .p-back-home:hover,
.page-products .p-back-home:focus-visible {
  color: var(--electric);
}

.page-products a:focus-visible,
.page-products button:focus-visible {
  outline: 2px solid var(--electric);
  outline-offset: 3px;
}

@media (min-width: 640px) {
  .page-products .p-legend-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .page-products .cycle-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .page-products .tier-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .page-products .tier-card:last-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 900px) {
  .page-products .p-hero {
    grid-template-columns: 1.06fr 0.94fr;
    grid-template-areas:
      "copy figure"
      "legend legend";
    align-items: start;
  }

  .page-products .p-legend-list {
    grid-template-columns: repeat(5, 1fr);
    gap: 1.1rem;
  }

  .page-products .cycle-grid {
    grid-template-columns: repeat(4, 1fr);
    align-items: start;
  }

  .page-products .cycle-card:nth-child(2) { margin-top: 1.6rem; }
  .page-products .cycle-card:nth-child(3) { margin-top: 0.5rem; }
  .page-products .cycle-card:nth-child(4) { margin-top: 2.2rem; }

  .page-products .p-tier-layout {
    grid-template-columns: 0.72fr 1.28fr;
    align-items: start;
  }

  .page-products .tier-grid {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
  }

  .page-products .tier-card:last-child {
    grid-column: auto;
  }

  .page-products .tier-card:nth-child(2) { margin-top: 1.8rem; }
  .page-products .tier-card:nth-child(3) { margin-top: 0.9rem; }

  .page-products .p-compare-foot {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: start;
  }

  .page-products .p-export {
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(1.4rem, 3vw, 2.4rem);
  }

  .page-products .p-choose-layout {
    grid-template-columns: 1.25fr 0.75fr;
    align-items: start;
  }

  .page-products .p-contact-strip {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .cycle-card,
  .page-products .tier-card,
  .page-products .p-path,
  .page-products .p-legend-item,
  .page-products .p-jump a {
    transition: none;
  }

  .page-products .cycle-card:hover,
  .page-products .cycle-card:focus-within,
  .page-products .tier-card:hover,
  .page-products .tier-card:focus-within,
  .page-products .p-path:hover,
  .page-products .p-path:focus-within {
    transform: none;
  }
}


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

  <nav class="breadcrumb shell" aria-label="面包屑">
    <ol class="breadcrumb-list">
      <li class="breadcrumb-item"><a class="breadcrumb-link" href="/">品牌首页</a></li>
      <li class="breadcrumb-item"><span aria-current="page">平台服务</span></li>
    </ol>
  </nav>

  <section class="p-hero shell" aria-labelledby="hero-title">
    <div class="p-hero-copy">
      <p class="section-label">服务路线 · 入口 → 版本 → 周期 → 档位</p>
      <h1 id="hero-title">亿万28主页平台服务：入口认证、版本说明与周期档位对照</h1>
      <p class="p-lead">无论您只做几天短期试用，还是要为团队安排一整年的使用，亿万28主页都让您先确认入口状态，再看清周期与档位之间的差别，然后按实际场景做决定。需要带走对照结果时，V4 说明可以导出成纯文本或打印版。</p>
      <div class="p-hero-actions">
        <a class="btn btn--signal" href="#cycles">查看周期与档位</a>
        <button class="btn btn--ghost" type="button" data-export-toggle aria-haspopup="dialog">导出 V4 说明</button>
      </div>
    </div>

    <figure class="figure-frame p-hero-figure">
      <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="抽象路线图，五类平台服务入口以信号橙、青瓷绿和电光蓝绿区分">
      <figcaption class="mono">五类服务入口 · 路线总览</figcaption>
    </figure>

    <div class="p-legend">
      <p class="p-legend-title mono">服务类别速览 / 01—05</p>
      <ul class="p-legend-list">
        <li class="p-legend-item" data-tone="silver">
          <p class="p-legend-num mono">01</p>
          <h2 class="p-legend-name">入口认证</h2>
          <p class="p-legend-desc">认证状态、版本号与更新批次一次看清，进站前先确认走对了门。</p>
        </li>
        <li class="p-legend-item" data-tone="silver">
          <p class="p-legend-num mono">02</p>
          <h2 class="p-legend-name">版本说明</h2>
          <p class="p-legend-desc">按批次对照 V4 版本差异，可导出纯文本与打印版离线查阅。</p>
        </li>
        <li class="p-legend-item" data-tone="signal">
          <p class="p-legend-num mono">03</p>
          <h2 class="p-legend-name">下载安装</h2>
          <p class="p-legend-desc">7 天、30 天、90 天、365 天四档周期，配安装指引与更新提醒。</p>
        </li>
        <li class="p-legend-item" data-tone="celadon">
          <p class="p-legend-num mono">04</p>
          <h2 class="p-legend-name">费用周期对照</h2>
          <p class="p-legend-desc">周期视图与档位视图并排比对，费用构成、服务范围一栏看全。</p>
        </li>
        <li class="p-legend-item" data-tone="electric">
          <p class="p-legend-num mono">05</p>
          <h2 class="p-legend-name">常用入口收藏</h2>
          <p class="p-legend-desc">把常去的页面存到浏览器本地，下次打开直接到，不用再找。</p>
        </li>
      </ul>
    </div>
  </section>

  <nav class="p-jump shell" aria-label="服务类别快捷定位">
    <ul>
      <li><a href="#cycles">下载安装周期</a></li>
      <li><a href="#tiers">网页版注册档位</a></li>
      <li><a href="#compare">费用对照表</a></li>
      <li><a href="#export">V4 说明导出</a></li>
      <li><a href="#choose">场景选择建议</a></li>
    </ul>
  </nav>

  <section id="cycles" class="p-section shell" data-accent="signal" aria-labelledby="cycles-title">
    <header class="p-section-head">
      <p class="section-label">下载安装 · 信号橙</p>
      <h2 id="cycles-title">按使用时长定周期：从一周到一整年</h2>
      <p>亿万28下载安装收费周期划分为 7 天、30 天、90 天、365 天四个档位，时长不同，适配的使用节奏也不同。您先想清楚这一段时间要跑完什么事，再决定选哪一档。</p>
    </header>

    <figure class="figure-frame figure-frame--wide">
      <img src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="深墨蓝背景上的等宽数字刻度尺与四档周期标签信息图" loading="lazy" decoding="async">
      <figcaption class="mono">周期刻度 07 / 30 / 90 / 365 天</figcaption>
    </figure>

    <div class="p-ruler" aria-hidden="true"></div>

    <div class="cycle-grid">
      <article class="cycle-card" data-reveal>
        <p class="cycle-days mono">07<span>天</span></p>
        <h3>短期试用</h3>
        <p>适合先跑通一遍流程，确认入口位置与操作步骤是否顺手。时间短，试完再决定是否续选更长档位。</p>
        <ul>
          <li>个人快速确认</li>
          <li>临时演示与验证</li>
        </ul>
      </article>

      <article class="cycle-card" data-reveal>
        <p class="cycle-days mono">30<span>天</span></p>
        <h3>月度使用</h3>
        <p>覆盖一个完整工作月，适合个人日常查询和阶段性资料整理，节奏刚好不多不少。</p>
        <ul>
          <li>个人日常查询</li>
          <li>按月安排的使用</li>
        </ul>
      </article>

      <article class="cycle-card" data-reveal>
        <p class="cycle-days mono">90<span>天</span></p>
        <h3>季度项目</h3>
        <p>项目周期在三个月上下时，这一档能陪您从启动走到收尾，中途不必反复处理续期。</p>
        <ul>
          <li>多人协作推进</li>
          <li>阶段性项目周期</li>
        </ul>
      </article>

      <article class="cycle-card" data-reveal>
        <p class="cycle-days mono">365<span>天</span></p>
        <h3>年度团队</h3>
        <p>团队整年使用，配合团队版档位把人员与权限一次安排到位，全年不用再为周期分神。</p>
        <ul>
          <li>团队长期使用</li>
          <li>年度预算安排</li>
        </ul>
      </article>
    </div>
  </section>

  <section id="tiers" class="p-section shell" data-accent="celadon" aria-labelledby="tiers-title">
    <header class="p-section-head">
      <p class="section-label">网页版注册 · 青瓷绿</p>
      <h2 id="tiers-title">三个档位，分别对应不同的协作深度</h2>
      <p>亿万28网页版注册费用按标准版、进阶版、团队版三档组织，差别主要落在可查询范围、协作席位与权限分配上。对照自己的人数和使用方式选，通常一眼就能定下来。</p>
    </header>

    <div class="p-tier-layout">
      <figure class="figure-frame figure-frame--tall p-tier-figure">
        <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="叠放的纸白费用对照卡与档位标签特写，配青瓷绿状态标记" loading="lazy" decoding="async">
        <figcaption class="mono">档位卡册 · 标准 / 进阶 / 团队</figcaption>
      </figure>

      <div class="tier-grid">
        <article class="tier-card" data-reveal>
          <p class="tier-tag tag mono">标准版</p>
          <h3>一个人查，够用就好</h3>
          <p>适合独自确认入口、查看版本说明、比对周期的个人用户。注册后即可使用完整的说明查询与常用入口收藏。</p>
          <dl class="tier-facts">
            <dt>适合</dt><dd>个人查询</dd>
            <dt>已含</dt><dd>版本说明查阅、常用入口收藏</dd>
          </dl>
        </article>

        <article class="tier-card" data-reveal>
          <p class="tier-tag tag mono">进阶版</p>
          <h3>两三个人一起对资料</h3>
          <p>标准版的全部内容之上增加协作席位，适合小组共同核对入口信息、同步版本差异，减少来回转述。</p>
          <dl class="tier-facts">
            <dt>适合</dt><dd>多人协作</dd>
            <dt>已含</dt><dd>标准版全部内容、协作席位</dd>
          </dl>
        </article>

        <article class="tier-card" data-reveal>
          <p class="tier-tag tag mono">团队版</p>
          <h3>统一安排成员与权限</h3>
          <p>面向需要集中管理的团队，在进阶版之上加入成员与权限安排，让谁看什么、谁对什么一目了然。</p>
          <dl class="tier-facts">
            <dt>适合</dt><dd>团队管理</dd>
            <dt>已含</dt><dd>进阶版全部内容、成员与权限分配</dd>
          </dl>
        </article>
      </div>
    </div>

    <p class="p-inline-note">档位之间的具体差额与适用条件，可通过下方对照表逐行查看，也可以直接<a href="/faq/">看疑问解答里的费用说明</a>。</p>
  </section>

  <section id="compare" class="p-section shell" data-accent="electric" aria-labelledby="compare-title">
    <header class="p-section-head">
      <p class="section-label">费用对照 · 三色标识</p>
      <h2 id="compare-title">把周期、档位和服务范围放到同一张表上看</h2>
      <p>下载安装用信号橙，网页版注册用青瓷绿，中国区入口用电光蓝绿，版本说明用金属银灰。您在表里看到哪个颜色，就知道自己正在比较哪一类服务。</p>
    </header>

    <div class="p-table-wrap">
      <table class="p-table">
        <caption class="visually-hidden">平台服务类别、适用对象、可选周期或档位与服务范围对照</caption>
        <thead>
          <tr>
            <th scope="col">入口类型</th>
            <th scope="col">适用对象</th>
            <th scope="col">可选周期 / 档位</th>
            <th scope="col">服务范围</th>
          </tr>
        </thead>
        <tbody>
          <tr data-tone="signal">
            <th scope="row"><span class="legend-dot" data-tone="signal"></span>下载安装</th>
            <td>短期试用与个人使用</td>
            <td class="mono">7 / 30 / 90 / 365 天</td>
            <td>安装指引、说明查阅、更新提醒</td>
          </tr>
          <tr data-tone="celadon">
            <th scope="row"><span class="legend-dot" data-tone="celadon"></span>网页版注册</th>
            <td>个人、协作小组、团队</td>
            <td class="mono">标准版 / 进阶版 / 团队版</td>
            <td>可查询范围、协作席位、成员与权限分配</td>
          </tr>
          <tr data-tone="electric">
            <th scope="row"><span class="legend-dot" data-tone="electric"></span>中国区入口</th>
            <td>区域用户与信息服务伙伴</td>
            <td class="mono">与上述档位对应</td>
            <td>入口位置确认、适用条件说明</td>
          </tr>
          <tr data-tone="silver">
            <th scope="row"><span class="legend-dot" data-tone="silver"></span>版本说明</th>
            <td>全部来访用户</td>
            <td class="mono">V1—V4 批次记录</td>
            <td>说明导出、打印版保存、按批次号对照</td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="p-compare-foot">
      <div class="route-legend p-legend-box">
        <p class="p-legend-title mono">色标说明</p>
        <ul>
          <li class="legend-item"><span class="legend-dot" data-tone="signal"></span>信号橙 · 下载安装与主要行动</li>
          <li class="legend-item"><span class="legend-dot" data-tone="celadon"></span>青瓷绿 · 网页版注册与已完成状态</li>
          <li class="legend-item"><span class="legend-dot" data-tone="electric"></span>电光蓝绿 · 中国区入口与路线高亮</li>
          <li class="legend-item"><span class="legend-dot" data-tone="silver"></span>金属银灰 · 版本说明与批次标签</li>
        </ul>
        <p class="p-legend-note">中国区入口的适用条件与档位关系，可到<a href="/mission/">品牌使命页</a>看完整说明。</p>
      </div>

      <figure class="figure-frame p-compare-figure">
        <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="三类入口色标与档位图例的抽象排版，含坐标索引和标签" loading="lazy" decoding="async">
        <figcaption class="mono">色标与档位图例</figcaption>
      </figure>
    </div>
  </section>

  <section id="export" class="p-section shell" data-accent="silver" aria-labelledby="export-title">
    <div class="panel panel--paper p-export">
      <div class="p-export-copy">
        <p class="section-label">V4 说明 · 可导出对照</p>
        <h2 id="export-title">把这份对照带走，慢慢看</h2>
        <p>选不定的地方，导出成一份说明存下来。纯文本方便贴进您的工作文档，打印版适合放进项目资料袋，两种格式都能离线查阅。</p>
        <div class="export-actions">
          <button class="btn btn--celadon" type="button" data-export-toggle aria-haspopup="dialog">导出 V4 说明</button>
          <a class="btn btn--ghost p-export-alt" href="#choose">先看场景建议</a>
        </div>
      </div>

      <ul class="p-export-list">
        <li class="export-item">
          <span class="export-key">入口认证</span>
          <span class="export-val">认证状态、版本号与更新批次</span>
        </li>
        <li class="export-item">
          <span class="export-key">下载安装</span>
          <span class="export-val">四档周期与各自的适用条件</span>
        </li>
        <li class="export-item">
          <span class="export-key">网页版注册</span>
          <span class="export-val">标准版、进阶版、团队版的差异项</span>
        </li>
        <li class="export-item">
          <span class="export-key">中国区入口</span>
          <span class="export-val">位置确认方式与档位对应关系</span>
        </li>
        <li class="export-item">
          <span class="export-key">版本批次</span>
          <span class="export-val">V1 到 V4 的演进节点与批次号</span>
        </li>
      </ul>
    </div>
  </section>

  <section id="choose" class="p-section shell" data-accent="electric" aria-labelledby="choose-title">
    <header class="p-section-head">
      <p class="section-label">场景路线 · 按需取用</p>
      <h2 id="choose-title">四种常见情形，各有对应的走法</h2>
      <p>与其在一堆档位里反复比较，不如先对照自己属于哪种情形。下面四条路线覆盖了大多数第一次做选择的场景。</p>
    </header>

    <div class="p-choose-layout">
      <ol class="p-path-list">
        <li class="p-path" data-reveal>
          <span class="p-path-num mono">01</span>
          <div>
            <h3>只想先看一眼</h3>
            <p>选 7 天周期配标准版，够您确认入口位置与操作步骤，不合适也不拖时间。</p>
          </div>
        </li>
        <li class="p-path" data-reveal>
          <span class="p-path-num mono">02</span>
          <div>
            <h3>一个人长期用</h3>
            <p>30 天周期起步，确认顺手后直接转 365 天，配标准版减少反复续期。</p>
          </div>
        </li>
        <li class="p-path" data-reveal>
          <span class="p-path-num mono">03</span>
          <div>
            <h3>几个人一起对资料</h3>
            <p>90 天周期配进阶版，协作席位让组员同步看到同一份说明，省掉转述。</p>
          </div>
        </li>
        <li class="p-path" data-reveal>
          <span class="p-path-num mono">04</span>
          <div>
            <h3>团队统一管理</h3>
            <p>365 天周期配团队版，成员与权限一次安排，全年使用不必再动配置。</p>
          </div>
        </li>
      </ol>

      <figure class="figure-frame figure-frame--tall p-choose-figure">
        <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="低饱和设备界面与路线标签的抽象剪影，用于表现不同使用场景" loading="lazy" decoding="async">
        <figcaption class="mono">使用场景 · 路线标签</figcaption>
      </figure>
    </div>

    <div class="p-contact-strip">
      <p><strong>还是拿不准？</strong>把您的人数、使用时长和想做的事说清楚，我们能直接给出建议。</p>
      <div class="p-contact-actions">
        <a class="btn btn--signal" href="/find-us/">联系咨询</a>
        <a class="btn btn--ghost" href="/faq/">看常见疑问</a>
        <a class="link-button p-back-home" href="/">回品牌首页看入口速览</a>
      </div>
    </div>

    <p class="p-inline-note">版本与档位如有调整，会先在<a href="/reports/">观察报告</a>里发布说明，您可以按批次号回头对照手上的旧版。</p>
  </section>

</main>

.page-products {
  --pp-gap: clamp(1rem, 3vw, 2rem);
  --pp-pad: clamp(1rem, 2.4vw, 1.6rem);
  padding-bottom: clamp(2.5rem, 7vw, 5rem);
}

.page-products .p-hero {
  display: grid;
  gap: var(--pp-gap);
  padding-block: clamp(1.4rem, 4vw, 3rem);
  grid-template-areas:
    "copy"
    "figure"
    "legend";
}

.page-products .p-hero-copy {
  grid-area: copy;
  display: grid;
  gap: 0.9rem;
  align-content: start;
}

.page-products .p-hero-copy h1 {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(2rem, 6vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
}

.page-products .p-lead {
  margin: 0;
  max-width: 56ch;
  color: var(--text-dim);
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  line-height: 1.85;
}

.page-products .p-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.3rem;
}

.page-products .p-hero-figure {
  grid-area: figure;
  margin: 0;
}

.page-products .p-legend {
  grid-area: legend;
  border-top: 1px solid var(--ink-line);
  padding-top: 1rem;
}

.page-products .p-legend-title {
  margin: 0 0 0.8rem;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  color: var(--electric);
  text-transform: uppercase;
}

.page-products .p-legend-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
  grid-template-columns: 1fr;
}

.page-products .p-legend-item {
  --tone: var(--silver);
  border-top: 2px solid var(--tone);
  padding-top: 0.65rem;
  display: grid;
  gap: 0.28rem;
  align-content: start;
  transition: transform var(--dur) var(--ease);
}

.page-products .p-legend-item[data-tone="signal"] { --tone: var(--signal); }
.page-products .p-legend-item[data-tone="celadon"] { --tone: var(--celadon); }
.page-products .p-legend-item[data-tone="electric"] { --tone: var(--electric); }
.page-products .p-legend-item[data-tone="silver"] { --tone: var(--silver); }

.page-products .p-legend-num {
  margin: 0;
  font-size: 0.72rem;
  color: var(--tone);
  letter-spacing: 0.12em;
}

.page-products .p-legend-name {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
}

.page-products .p-legend-desc {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--text-dim);
}

.page-products .p-jump {
  border-block: 1px solid var(--ink-line);
}

.page-products .p-jump ul {
  list-style: none;
  margin: 0;
  padding: 0.55rem 0;
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.page-products .p-jump li {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.page-products .p-jump a {
  display: inline-block;
  white-space: nowrap;
  padding: 0.42rem 0.85rem;
  border: 1px solid var(--ink-line);
  color: var(--text-dim);
  font-size: 0.8rem;
  text-decoration: none;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.page-products .p-jump a:hover,
.page-products .p-jump a:focus-visible {
  color: var(--text);
  border-color: var(--electric);
  background: rgba(46, 217, 208, 0.08);
}

.page-products .p-section {
  --accent: var(--electric);
  padding-block: clamp(2rem, 5vw, 3.6rem);
  border-top: 1px solid var(--ink-line);
  scroll-margin-top: 5rem;
}

.page-products .p-section[data-accent="signal"] { --accent: var(--signal); }
.page-products .p-section[data-accent="celadon"] { --accent: var(--celadon); }
.page-products .p-section[data-accent="electric"] { --accent: var(--electric); }
.page-products .p-section[data-accent="silver"] { --accent: var(--silver); }

.page-products .p-section-head {
  display: grid;
  gap: 0.6rem;
  max-width: 64ch;
  margin-bottom: clamp(1.2rem, 3vw, 2rem);
}

.page-products .p-section-head h2 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(1.5rem, 3.6vw, 2.3rem);
  line-height: 1.2;
  color: var(--text);
  border-left: 4px solid var(--accent);
  padding-left: 0.75rem;
}

.page-products .p-section-head p {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.95rem;
  line-height: 1.85;
}

.page-products .p-inline-note {
  margin: clamp(1.1rem, 2.5vw, 1.6rem) 0 0;
  font-size: 0.86rem;
  color: var(--text-dim);
  line-height: 1.8;
}

.page-products .p-inline-note a {
  color: var(--electric);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-products .p-ruler {
  height: 14px;
  margin-top: 1.1rem;
  background-image: linear-gradient(90deg, var(--ink-line) 1px, transparent 1px);
  background-size: calc(100% / 24) 100%;
  background-repeat: repeat-x;
  border-bottom: 1px solid var(--ink-line);
  opacity: 0.85;
}

.page-products .cycle-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 1.4rem;
}

.page-products .cycle-card {
  background: var(--ink-panel);
  border: 1px solid var(--ink-line);
  border-top: 3px solid var(--signal);
  padding: var(--pp-pad);
  display: grid;
  gap: 0.55rem;
  align-content: start;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.page-products .cycle-card:hover,
.page-products .cycle-card:focus-within {
  transform: translateY(-3px);
  border-color: var(--signal);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.36);
}

.page-products .cycle-days {
  margin: 0;
  font-size: clamp(2rem, 5vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--signal);
  letter-spacing: -0.02em;
}

.page-products .cycle-days span {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-dim);
  margin-left: 0.35rem;
  letter-spacing: 0;
}

.page-products .cycle-card h3 {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text);
}

.page-products .cycle-card p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.75;
  color: var(--text-dim);
}

.page-products .cycle-card ul {
  list-style: none;
  margin: 0.2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.page-products .cycle-card li {
  position: relative;
  padding-left: 0.95rem;
  font-size: 0.8rem;
  color: var(--text-dim);
}

.page-products .cycle-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.5rem;
  height: 1px;
  background: var(--signal);
}

.page-products .p-tier-layout {
  display: grid;
  gap: var(--pp-gap);
  grid-template-columns: 1fr;
}

.page-products .p-tier-figure {
  margin: 0;
}

.page-products .tier-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

.page-products .tier-card {
  background: var(--paper);
  color: var(--on-light);
  border: 1px solid var(--ink-line);
  border-left: 4px solid var(--celadon);
  padding: var(--pp-pad);
  display: grid;
  gap: 0.55rem;
  align-content: start;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.page-products .tier-card:hover,
.page-products .tier-card:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.28);
}

.page-products .tier-tag {
  justify-self: start;
}

.page-products .tier-card h3 {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.08rem;
  font-weight: 900;
  color: var(--on-light);
}

.page-products .tier-card > p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.75;
  color: #33444f;
}

.page-products .tier-facts {
  margin: 0.3rem 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3rem 0.7rem;
  font-size: 0.8rem;
  border-top: 1px solid rgba(8, 19, 31, 0.18);
  padding-top: 0.6rem;
}

.page-products .tier-facts dt {
  color: #5a6c78;
  font-weight: 600;
}

.page-products .tier-facts dd {
  margin: 0;
  color: var(--on-light);
}

.page-products .p-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--ink-line);
  background: var(--ink-panel);
  -webkit-overflow-scrolling: touch;
}

.page-products .p-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.page-products .p-table thead th {
  text-align: left;
  padding: 0.75rem 0.9rem;
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--text);
  background: rgba(36, 68, 92, 0.45);
  border-bottom: 1px solid var(--ink-line);
  white-space: nowrap;
}

.page-products .p-table tbody tr {
  border-bottom: 1px solid var(--ink-line);
  transition: background var(--dur) var(--ease);
}

.page-products .p-table tbody tr:last-child {
  border-bottom: 0;
}

.page-products .p-table tbody tr:hover,
.page-products .p-table tbody tr:focus-within {
  background: rgba(46, 217, 208, 0.09);
}

.page-products .p-table tbody tr[data-tone="signal"] { --row: var(--signal); }
.page-products .p-table tbody tr[data-tone="celadon"] { --row: var(--celadon); }
.page-products .p-table tbody tr[data-tone="electric"] { --row: var(--electric); }
.page-products .p-table tbody tr[data-tone="silver"] { --row: var(--silver); }

.page-products .p-table tbody th {
  text-align: left;
  padding: 0.85rem 0.9rem;
  font-weight: 700;
  color: var(--text);
  box-shadow: inset 3px 0 0 var(--row, var(--silver));
  white-space: nowrap;
}

.page-products .p-table tbody td {
  padding: 0.85rem 0.9rem;
  color: var(--text-dim);
  line-height: 1.7;
  vertical-align: top;
}

.page-products .p-table tbody td.mono {
  color: var(--text);
  font-size: 0.82rem;
  white-space: nowrap;
}

.page-products .p-table .legend-dot {
  margin-right: 0.45rem;
  vertical-align: middle;
}

.page-products .p-compare-foot {
  display: grid;
  gap: var(--pp-gap);
  grid-template-columns: 1fr;
  margin-top: clamp(1.2rem, 3vw, 1.8rem);
}

.page-products .p-legend-box {
  border: 1px solid var(--ink-line);
  background: var(--ink-panel);
  padding: var(--pp-pad);
}

.page-products .p-legend-box ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.page-products .p-legend-box .legend-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.84rem;
  color: var(--text-dim);
  line-height: 1.6;
}

.page-products .p-legend-note {
  margin: 0.9rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px solid var(--ink-line);
  font-size: 0.82rem;
  line-height: 1.75;
  color: var(--text-dim);
}

.page-products .p-legend-note a {
  color: var(--electric);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-products .p-compare-figure {
  margin: 0;
}

.page-products .p-export {
  display: grid;
  gap: var(--pp-gap);
  grid-template-columns: 1fr;
  align-items: start;
}

.page-products .p-export-copy {
  display: grid;
  gap: 0.7rem;
  align-content: start;
}

.page-products .p-export-copy h2 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(1.4rem, 3.4vw, 2.1rem);
  line-height: 1.2;
  color: var(--on-light);
}

.page-products .p-export-copy p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.8;
  color: #33444f;
}

.page-products .p-export .export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.4rem;
}

.page-products .p-export-alt {
  color: var(--on-light);
  border-color: rgba(8, 19, 31, 0.35);
}

.page-products .p-export-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(8, 19, 31, 0.2);
}

.page-products .p-export-list .export-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.15rem;
  padding: 0.72rem 0;
  border-bottom: 1px solid rgba(8, 19, 31, 0.2);
}

.page-products .p-export-list .export-key {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: #5a6c78;
}

.page-products .p-export-list .export-val {
  font-size: 0.88rem;
  color: var(--on-light);
  line-height: 1.6;
}

.page-products .p-choose-layout {
  display: grid;
  gap: var(--pp-gap);
  grid-template-columns: 1fr;
}

.page-products .p-path-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}

.page-products .p-path {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  padding: 0.95rem 1rem;
  border: 1px solid var(--ink-line);
  border-left: 3px solid var(--electric);
  background: var(--ink-panel);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-products .p-path:hover,
.page-products .p-path:focus-within {
  transform: translateX(3px);
  border-color: var(--electric);
}

.page-products .p-path-num {
  font-size: 0.78rem;
  color: var(--electric);
  letter-spacing: 0.1em;
  padding-top: 0.2rem;
}

.page-products .p-path h3 {
  margin: 0 0 0.25rem;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
}

.page-products .p-path p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.75;
  color: var(--text-dim);
}

.page-products .p-choose-figure {
  margin: 0;
}

.page-products .p-contact-strip {
  margin-top: clamp(1.4rem, 3.5vw, 2.2rem);
  border: 1px solid var(--ink-line);
  border-top: 3px solid var(--signal);
  background: var(--ink-panel);
  padding: var(--pp-pad);
  display: grid;
  gap: 0.9rem;
}

.page-products .p-contact-strip p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.8;
  color: var(--text-dim);
}

.page-products .p-contact-strip strong {
  color: var(--text);
}

.page-products .p-contact-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.page-products .p-back-home {
  color: var(--text-dim);
  font-size: 0.84rem;
}

.page-products .p-back-home:hover,
.page-products .p-back-home:focus-visible {
  color: var(--electric);
}

.page-products a:focus-visible,
.page-products button:focus-visible {
  outline: 2px solid var(--electric);
  outline-offset: 3px;
}

@media (min-width: 640px) {
  .page-products .p-legend-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .page-products .cycle-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .page-products .tier-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .page-products .tier-card:last-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 900px) {
  .page-products .p-hero {
    grid-template-columns: 1.06fr 0.94fr;
    grid-template-areas:
      "copy figure"
      "legend legend";
    align-items: start;
  }

  .page-products .p-legend-list {
    grid-template-columns: repeat(5, 1fr);
    gap: 1.1rem;
  }

  .page-products .cycle-grid {
    grid-template-columns: repeat(4, 1fr);
    align-items: start;
  }

  .page-products .cycle-card:nth-child(2) { margin-top: 1.6rem; }
  .page-products .cycle-card:nth-child(3) { margin-top: 0.5rem; }
  .page-products .cycle-card:nth-child(4) { margin-top: 2.2rem; }

  .page-products .p-tier-layout {
    grid-template-columns: 0.72fr 1.28fr;
    align-items: start;
  }

  .page-products .tier-grid {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
  }

  .page-products .tier-card:last-child {
    grid-column: auto;
  }

  .page-products .tier-card:nth-child(2) { margin-top: 1.8rem; }
  .page-products .tier-card:nth-child(3) { margin-top: 0.9rem; }

  .page-products .p-compare-foot {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: start;
  }

  .page-products .p-export {
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(1.4rem, 3vw, 2.4rem);
  }

  .page-products .p-choose-layout {
    grid-template-columns: 1.25fr 0.75fr;
    align-items: start;
  }

  .page-products .p-contact-strip {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .cycle-card,
  .page-products .tier-card,
  .page-products .p-path,
  .page-products .p-legend-item,
  .page-products .p-jump a {
    transition: none;
  }

  .page-products .cycle-card:hover,
  .page-products .cycle-card:focus-within,
  .page-products .tier-card:hover,
  .page-products .tier-card:focus-within,
  .page-products .p-path:hover,
  .page-products .p-path:focus-within {
    transform: none;
  }
}