/* ============ 品牌总览 · page-about ============ */

.page-about {
  --about-tl-x: 6px;
  --about-rail: 123px;
  --about-panel: rgba(16, 48, 74, 0.5);
  --about-panel-soft: rgba(16, 48, 74, 0.32);
}

/* ---------- 首屏 ---------- */

.page-about .about-hero {
  padding-top: clamp(24px, 4.6vw, 52px);
}

.page-about .about-hero-frame {
  margin-top: clamp(14px, 2.2vw, 26px);
  border: 1px solid var(--grid);
  padding: var(--frame-pad);
  background:
    radial-gradient(115% 85% at 8% -12%, rgba(86, 224, 208, 0.11), transparent 58%),
    radial-gradient(95% 80% at 102% 112%, rgba(123, 92, 255, 0.14), transparent 62%),
    var(--slate);
}

.page-about .about-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 44px);
}

@media (min-width: 920px) {
  .page-about .about-hero-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
  }
}

.page-about .about-hero-lead {
  min-width: 0;
}

.page-about .about-hero-lead .display {
  margin: 14px 0 0;
  font-size: clamp(34px, 6.6vw, 74px);
  line-height: 1.02;
}

.page-about .about-hero-lead .lede {
  margin: clamp(16px, 2.4vw, 26px) 0 0;
  max-width: 52ch;
  color: var(--bone);
  font-size: 17px;
  line-height: 1.85;
}

.page-about .about-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(22px, 3.2vw, 34px);
}

.page-about .about-hero-side {
  min-width: 0;
  border: 1px solid var(--grid);
  border-top: 4px solid var(--coral);
  background: rgba(6, 26, 43, 0.6);
  padding: clamp(16px, 2.4vw, 22px);
}

.page-about .about-hero-side .card-eyebrow {
  margin: 0 0 10px;
  color: var(--clay);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
}

.page-about .about-facts {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-about .about-facts li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--grid);
}

.page-about .about-facts li:first-child {
  border-top: 0;
  padding-top: 4px;
}

.page-about .about-fact-num {
  flex: none;
  min-width: 74px;
  color: var(--cyan);
  font-size: 17px;
  letter-spacing: 0.02em;
}

.page-about .about-fact-text {
  color: var(--bone);
  font-size: 15px;
  line-height: 1.65;
}

/* ---------- 主体两栏 ---------- */

.page-about .about-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 5vw, 56px);
  padding-top: clamp(44px, 7vw, 88px);
  padding-bottom: clamp(48px, 7vw, 96px);
}

@media (min-width: 1080px) {
  .page-about .about-body {
    grid-template-columns: 172px minmax(0, 1fr);
    align-items: start;
  }
}

.page-about .about-flow {
  min-width: 0;
}

/* ---------- 章节索引 ---------- */

.page-about .about-index ol {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0 0 12px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.page-about .about-index ol::-webkit-scrollbar {
  display: none;
}

.page-about .about-index li {
  margin: 0;
}

.page-about .about-index a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--grid);
  color: var(--bone);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}

.page-about .about-idx-num {
  color: var(--clay);
  font-size: 11px;
}

.page-about .about-index a:hover,
.page-about .about-index a:focus-visible {
  border-color: var(--cyan);
  color: var(--cyan);
}

.page-about .about-index a[aria-current="true"] {
  border-color: var(--coral);
  color: var(--coral);
}

.page-about .about-index a[aria-current="true"] .about-idx-num {
  color: var(--coral);
}

@media (min-width: 1080px) {
  .page-about .about-index {
    position: sticky;
    top: calc(var(--header-h-slim) + 28px);
  }

  .page-about .about-index ol {
    display: block;
    overflow: visible;
    padding: 0;
    border-left: 1px solid var(--grid);
  }

  .page-about .about-index a {
    display: flex;
    align-items: baseline;
    border: 0;
    border-left: 2px solid transparent;
    margin-left: -1px;
    padding: 10px 10px;
    color: var(--ash);
    white-space: normal;
  }

  .page-about .about-index a:hover,
  .page-about .about-index a:focus-visible {
    border-left-color: var(--cyan);
    color: var(--bone);
  }

  .page-about .about-index a[aria-current="true"] {
    border-left-color: var(--coral);
    background: rgba(255, 107, 74, 0.07);
    color: var(--bone);
  }
}

/* ---------- 章节通用 ---------- */

.page-about .about-chapter {
  padding-bottom: clamp(48px, 7vw, 92px);
}

.page-about .about-chapter:last-child {
  padding-bottom: 0;
}

.page-about .about-chapter .section-head {
  margin-bottom: clamp(26px, 4vw, 44px);
}

.page-about .about-lede {
  max-width: 62ch;
  margin: 16px 0 0;
  color: var(--bone);
  font-size: 17px;
  line-height: 1.85;
}

/* ---------- 时间线 ---------- */

.page-about .about-timeline {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-about .about-timeline::before {
  content: "";
  position: absolute;
  left: var(--about-tl-x);
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, var(--clay) 0%, var(--clay) 42%, var(--cyan) 100%);
  opacity: 0.55;
}

.page-about .about-step {
  position: relative;
  padding-left: 36px;
  padding-bottom: clamp(30px, 5vw, 48px);
}

.page-about .about-step:last-child {
  padding-bottom: 0;
}

.page-about .about-step::before {
  content: "";
  position: absolute;
  left: calc(var(--about-tl-x) - 5px);
  top: 6px;
  width: 11px;
  height: 11px;
  box-sizing: border-box;
  background: var(--abyss);
  border: 1px solid var(--clay);
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.page-about .about-step[data-active]::before {
  background: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 0 5px rgba(86, 224, 208, 0.13);
}

.page-about .about-step-year {
  display: block;
  margin-bottom: 6px;
  color: var(--clay);
  font-size: 15px;
  letter-spacing: 0.08em;
}

.page-about .about-step-body {
  min-width: 0;
}

.page-about .about-step .card-title {
  margin: 0 0 10px;
  color: var(--bone);
  font-size: clamp(18px, 2.1vw, 21px);
  line-height: 1.4;
}

.page-about .about-step-body p {
  max-width: 62ch;
  margin: 0;
  color: var(--bone);
  font-size: 16px;
  line-height: 1.85;
}

.page-about .about-step-figure {
  margin-top: 20px;
}

@media (min-width: 900px) {
  .page-about .about-timeline {
    --about-tl-x: var(--about-rail);
  }

  .page-about .about-step {
    padding-left: 156px;
  }

  .page-about .about-step-year {
    position: absolute;
    left: 0;
    top: 1px;
    width: 96px;
    margin-bottom: 0;
    text-align: right;
    font-size: 20px;
  }

  .page-about .about-step::before {
    top: 8px;
  }
}

/* ---------- 图片框 ---------- */

.page-about .about-figure {
  margin: 0;
  border: 1px solid var(--grid);
  background: var(--abyss);
}

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

.page-about .about-figure figcaption {
  border-top: 1px solid var(--grid);
  padding: 10px 14px;
  color: var(--ash);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  line-height: 1.6;
}

/* ---------- 反色统计区 ---------- */

.page-about .about-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3.2vw, 34px);
  padding: clamp(24px, 3.8vw, 44px) clamp(20px, 3.2vw, 40px);
  background: var(--bone);
  color: var(--abyss);
}

@media (min-width: 760px) {
  .page-about .about-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.page-about .about-stat {
  border-top: 2px solid var(--clay);
  padding-top: 14px;
}

.page-about .about-stat-num {
  display: flex;
  align-items: baseline;
  gap: 3px;
  color: var(--abyss);
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1;
  letter-spacing: 0.01em;
}

.page-about .about-stat-unit {
  font-size: 0.44em;
  color: var(--clay);
  letter-spacing: 0.04em;
}

.page-about .about-stat-label {
  display: block;
  margin-top: 10px;
  color: #2b4054;
  font-size: 13px;
  line-height: 1.6;
}

.page-about .about-scale-copy {
  margin-top: clamp(26px, 3.6vw, 40px);
}

.page-about .about-scale-copy p {
  max-width: 62ch;
  margin: 0 0 16px;
  color: var(--bone);
  font-size: 16px;
  line-height: 1.85;
}

.page-about .about-scale-copy p:last-child {
  margin-bottom: 0;
}

/* ---------- 机型适配 ---------- */

.page-about .about-device-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 42px);
}

@media (min-width: 900px) {
  .page-about .about-device-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
  }
}

.page-about .about-device-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: dev;
}

.page-about .about-device-steps li {
  position: relative;
  padding: 18px 0 18px 46px;
  border-top: 1px solid var(--grid);
}

.page-about .about-device-steps li:last-child {
  border-bottom: 1px solid var(--grid);
}

.page-about .about-device-steps li::before {
  counter-increment: dev;
  content: "0" counter(dev);
  position: absolute;
  left: 0;
  top: 21px;
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
}

.page-about .about-device-steps h3 {
  margin: 0 0 8px;
  color: var(--bone);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
}

.page-about .about-device-steps p {
  margin: 0;
  color: var(--ash);
  font-size: 15px;
  line-height: 1.8;
}

.page-about .about-device-figure {
  align-self: start;
}

/* ---------- 版本通道 ---------- */

.page-about .about-channels {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

@media (min-width: 820px) {
  .page-about .about-channels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.page-about .about-channel {
  border: 1px solid var(--grid);
  border-top-width: 4px;
  border-top-style: solid;
  background: var(--about-panel);
  padding: clamp(20px, 3vw, 30px);
}

.page-about .about-channel--stable {
  border-top-color: var(--cyan);
}

.page-about .about-channel--major {
  border-top-color: var(--violet);
}

.page-about .about-channel-tag {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid currentColor;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
}

.page-about .about-channel--stable .about-channel-tag {
  color: var(--cyan);
}

.page-about .about-channel--major .about-channel-tag {
  color: var(--violet);
}

.page-about .about-channel-title {
  margin: 16px 0 0;
  color: var(--bone);
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 700;
  line-height: 1.45;
}

.page-about .about-channel-list {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.page-about .about-channel-list li {
  position: relative;
  padding: 11px 0 11px 18px;
  border-top: 1px solid var(--about-panel-soft);
  color: var(--bone);
  font-size: 15px;
  line-height: 1.75;
}

.page-about .about-channel-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 19px;
  width: 6px;
  height: 6px;
  box-sizing: border-box;
  border: 1px solid var(--clay);
}

.page-about .about-note {
  margin: clamp(22px, 3vw, 32px) 0 0;
  padding: clamp(18px, 2.6vw, 26px);
  border: 1px solid var(--grid);
  border-left: 3px solid var(--violet);
  background: rgba(123, 92, 255, 0.07);
  color: var(--bone);
  font-size: 15px;
  line-height: 1.85;
  max-width: 78ch;
}

/* ---------- 合作生态 ---------- */

.page-about .about-accordion {
  border-bottom: 1px solid var(--grid);
}

.page-about .about-acc-item {
  border-top: 1px solid var(--grid);
}

.page-about .about-accordion .accordion-trigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 4px;
  background: none;
  border: 0;
  color: var(--bone);
  font-family: inherit;
  font-size: clamp(16px, 2vw, 18px);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: color 0.18s ease;
}

.page-about .about-accordion .accordion-trigger:hover,
.page-about .about-accordion .accordion-trigger:focus-visible {
  color: var(--cyan);
}

.page-about .about-acc-mark {
  flex: none;
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 18px;
  line-height: 1;
}

.page-about .about-accordion .accordion-trigger[aria-expanded="true"] .about-acc-mark {
  color: var(--coral);
}

.page-about .about-accordion .accordion-panel p {
  max-width: 66ch;
  margin: 0;
  padding: 0 4px 22px;
  color: var(--ash);
  font-size: 15px;
  line-height: 1.85;
}

.page-about .about-partner-figure {
  margin-top: clamp(28px, 4vw, 44px);
  max-width: 720px;
}

/* ---------- 收尾 ---------- */

.page-about .about-cta {
  padding: 0 0 clamp(56px, 8vw, 104px);
}

.page-about .about-cta-inner {
  border: 1px solid var(--grid);
  border-top: 4px solid var(--coral);
  padding: clamp(26px, 4vw, 50px);
  background:
    radial-gradient(85% 130% at 102% 0%, rgba(255, 107, 74, 0.13), transparent 56%),
    radial-gradient(75% 110% at -5% 105%, rgba(86, 224, 208, 0.11), transparent 60%),
    var(--slate);
}

.page-about .about-cta-text {
  max-width: 62ch;
  margin: 18px 0 0;
  color: var(--bone);
  font-size: 16px;
  line-height: 1.85;
}

.page-about .about-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(22px, 3.2vw, 34px);
}

/* ---------- 返回顶部 ---------- */

.page-about .to-top {
  display: none;
  position: fixed;
  right: clamp(14px, 3vw, 28px);
  bottom: clamp(14px, 3vw, 28px);
  z-index: 40;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--grid);
  background: rgba(6, 26, 43, 0.92);
  color: var(--bone);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-decoration: none;
  transition: border-color 0.18s ease, color 0.18s ease;
}

.page-about .to-top[data-visible] {
  display: inline-flex;
}

.page-about .to-top:hover,
.page-about .to-top:focus-visible {
  border-color: var(--cyan);
  color: var(--cyan);
}

.page-about .to-top-arrow {
  font-size: 14px;
  line-height: 1;
}

@media (max-width: 640px) {
  .page-about .about-idx-label {
    font-size: 11px;
  }

  .page-about .about-hero-actions .btn,
  .page-about .about-cta-actions .btn {
    flex: 1 1 auto;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .about-step::before,
  .page-about .about-index a,
  .page-about .about-accordion .accordion-trigger {
    transition: none;
  }
}
<<<END>>>

好了，都写完了。确认一下：`.about-step::before` 这个节点是靠 `[data-active]` 来点亮的，由 JS 负责加分。没有 JS 的时候，节点默认就是陶土棕的空心方块，内容照样全都能读，没问题。

再核对一下锚点：
- `#origin` ✓
- `#scale` ✓
- `#devices` ✓
- `#channels` ✓
- `#partners` ✓
- `#main-content` — 在 `<main id="main-content">` 上 ✓

所有 href 都在这些锚点或者合法路由之间，`/`、`/features/`、`/cooperation/`、`/troubleshooting/`，都干净。

“BYBSXF中国区稳定版”只出现了一次，在稳定版通道的标签里。
“电玩城找旧版本”也只在 about-note 里出现了一次。

图片三张，分别是 1600×1000、1200×800、1200×900，都带 lazy 和 async。

再看作用域，所有页面级选择器都挂在 `.page-about` 下面，没有碰到 `:root`、`html`、`body`、`.site-header`、`.site-footer`，全局类只做覆盖，不重新定义。

需要的变量全都来自 `site_kit` 那份清单——`--grid`、`--slate`、`--bone`、`--coral`、`--cyan`、`--violet`、`--clay`、`--ash`、`--abyss`、`--mono`、`--frame-pad`、`--header-h-slim`，都真有。

行，就这样。
<main id="main-content" class="page-about">

  <section class="about-hero">
    <div class="shell">
      <nav class="breadcrumb" aria-label="面包屑">
        <a href="/">首页</a>
        <span aria-current="page">品牌总览</span>
      </nav>

      <div class="frame frame-ticks about-hero-frame">
        <div class="about-hero-grid">
          <div class="about-hero-lead">
            <p class="eyebrow">2016 年至今 · 中国区运营</p>
            <h1 class="display title-glitch" data-glitch="十年机台，一块屏幕">十年机台，一块屏幕</h1>
            <p class="lede">捕鱼吧电玩从线下电玩城的机台边起步，今天在中国区运营移动端的捕鱼与棋牌电玩内容。换手机、换平板、翻出几年前常用的老机型，你都能接着原来的房间和进度继续玩，不用重新摸一遍规则。</p>
            <div class="about-hero-actions">
              <a class="btn btn--primary" href="/features/">看功能与选房</a>
              <a class="btn btn--ghost" href="/cooperation/">谈合作</a>
            </div>
          </div>

          <aside class="about-hero-side" aria-label="运营概要">
            <p class="card-eyebrow">一眼看过去</p>
            <ul class="about-facts">
              <li>
                <span class="num about-fact-num">2016</span>
                <span class="about-fact-text">从线下电玩城机台场景开始运营</span>
              </li>
              <li>
                <span class="num about-fact-num">1200+</span>
                <span class="about-fact-text">款设备的屏幕比例与性能参数入库</span>
              </li>
              <li>
                <span class="num about-fact-num">42</span>
                <span class="about-fact-text">个旧版本条目按机型归档留存</span>
              </li>
            </ul>
          </aside>
        </div>
      </div>
    </div>
  </section>

  <div class="shell about-body">

    <nav class="section-index about-index" data-section-index aria-label="本页章节索引">
      <ol>
        <li><a href="#origin"><span class="about-idx-num num">01</span><span class="about-idx-label">起步与迁移</span></a></li>
        <li><a href="#scale"><span class="about-idx-num num">02</span><span class="about-idx-label">覆盖与服务</span></a></li>
        <li><a href="#devices"><span class="about-idx-num num">03</span><span class="about-idx-label">机型适配</span></a></li>
        <li><a href="#channels"><span class="about-idx-num num">04</span><span class="about-idx-label">版本通道</span></a></li>
        <li><a href="#partners"><span class="about-idx-num num">05</span><span class="about-idx-label">合作生态</span></a></li>
      </ol>
    </nav>

    <div class="about-flow">

      <section class="about-chapter" id="origin">
        <header class="section-head">
          <p class="eyebrow">01 · 起步与迁移</p>
          <h2 class="section-title">从机台边走到一块屏幕</h2>
          <p class="about-lede">房间怎么分档、底分怎么走、结算怎么记，这些规矩最早是在电玩城的机台边一个班次一个班次磨出来的。后来它们被搬进手机和平板，形态变了，做事的方式没变。</p>
        </header>

        <ol class="timeline about-timeline">
          <li class="timeline-item about-step">
            <span class="about-step-year num">2016</span>
            <div class="about-step-body">
              <h3 class="card-title">从电玩城的机台开始</h3>
              <p>运营团队在天津组建，跟着线下电玩城做内容运营。房间按底分分成体验场、休闲场、进阶场、高手场与竞赛场五个档位，各档人数上限不同，这套结构就是那时候定下来的。</p>
              <figure class="about-figure about-step-figure">
                <img src="{zhanqunpic:h:1000w:1600}" width="1600" height="1000" alt="夜间电玩城里成排机台的暖色灯牌与深海蓝环境光" loading="lazy" decoding="async">
                <figcaption>2016 · 线下机台夜场</figcaption>
              </figure>
            </div>
          </li>

          <li class="timeline-item about-step">
            <span class="about-step-year num">2019</span>
            <div class="about-step-body">
              <h3 class="card-title">把房间搬进手机和平板</h3>
              <p>同一套房间结构上线移动端入口，账号可以在手机、平板与网页端之间切换。原先只能坐在机台前玩的玩法，改成随时能开始、随时能离开，选房页上直接标出这一局大概要花多久。</p>
            </div>
          </li>

          <li class="timeline-item about-step">
            <span class="about-step-year num">2021</span>
            <div class="about-step-body">
              <h3 class="card-title">机型适配库成形</h3>
              <p>设备之间的屏幕比例和性能差距，直接决定画面会不会被裁、一局要花多长时间。团队开始按机型归档参数，并给每个房间标注按机型预估的单局耗时区间。</p>
            </div>
          </li>

          <li class="timeline-item about-step">
            <span class="about-step-year num">2022</span>
            <div class="about-step-body">
              <h3 class="card-title">双通道发布节奏固定下来</h3>
              <p>稳定版通道和季度大版本通道并行发布：想尝新的走大版本，想安稳玩的留在稳定版。旧版本按安卓、iOS、平板与模拟器四类归档，换新机的人顺着入口就能回到熟悉的界面。</p>
            </div>
          </li>

          <li class="timeline-item about-step">
            <span class="about-step-year num">2023</span>
            <div class="about-step-body">
              <h3 class="card-title">规则开始按版本留档</h3>
              <p>上下分流程、结算说明、异常处理与申诉通道统一编号留存，从第 1 版到第 12 版的每次调整都能往回查。结算记录与房间数据跨端同步，换设备登录后能在同一账号的明细分页里看到完整条目。</p>
            </div>
          </li>

          <li class="timeline-item about-step">
            <span class="about-step-year num">2024</span>
            <div class="about-step-body">
              <h3 class="card-title">服务范围铺到更多地方</h3>
              <p>服务范围向更多省份铺开，机型适配库收录 1200 多款主流设备，与 30 余家线下电玩城保持内容与技术合作，共同维护机型兼容清单，新机上架前先跑一轮适配验证。</p>
            </div>
          </li>
        </ol>
      </section>

      <section class="about-chapter" id="scale">
        <header class="section-head">
          <p class="eyebrow">02 · 覆盖与服务</p>
          <h2 class="section-title">谁在用，什么时候最热闹</h2>
        </header>

        <div class="about-stats">
          <div class="about-stat">
            <span class="about-stat-num num">380<span class="about-stat-unit">万</span></span>
            <span class="about-stat-label">累计注册用户</span>
          </div>
          <div class="about-stat">
            <span class="about-stat-num num">26<span class="about-stat-unit">万</span></span>
            <span class="about-stat-label">日活跃用户</span>
          </div>
          <div class="about-stat">
            <span class="about-stat-num num">26<span class="about-stat-unit">个</span></span>
            <span class="about-stat-label">省级行政区在服务范围内</span>
          </div>
          <div class="about-stat">
            <span class="about-stat-num num">30<span class="about-stat-unit">余家</span></span>
            <span class="about-stat-label">线下电玩城合作方</span>
          </div>
        </div>

        <div class="about-scale-copy">
          <p>华东与华南地区用户占比最高，服务范围覆盖中国大陆 26 个省级行政区。每天 20:00 到 23:00 是房间开得最快的一段时间，同档位空位也最紧，想约高手场或竞赛场，早一点进比临时找要顺。</p>
          <p>客服每日 10:00 至 22:00 在线，节假日安排轮值。复杂问题的处理结论通常在 24 小时内给出；涉及机型兼容的请求会转交适配团队跟进，新机型从提交到给出适配结果，一般不需要你再催第二遍。</p>
        </div>
      </section>

      <section class="about-chapter" id="devices">
        <header class="section-head">
          <p class="eyebrow eyebrow--cyan">03 · 机型适配</p>
          <h2 class="section-title">机型适配库是怎么攒起来的</h2>
          <p class="about-lede">同一间房，在 12 英寸平板上看得见的水域边界，换到小屏手机上可能被裁掉一截；处理器差一档，一局下来能差出十几秒。适配库要解决的就是这两件事，做法是逐台设备实测、逐条参数入档。</p>
        </header>

        <div class="about-device-grid">
          <ol class="about-device-steps">
            <li>
              <h3>参数逐台归档</h3>
              <p>每款设备记录屏幕比例、分辨率、处理器与内存档位四组数据，不靠系统型号猜，靠实机跑一遍。目前库内已收录 1200 多款主流机型，新机上市后会补进同一张表里。</p>
            </li>
            <li>
              <h3>单局耗时按三种口径给出</h3>
              <p>选房页为每个房间标注按机型预估的耗时区间，分手机端、平板端与模拟器三种估算方式。平台实测下来，平板端平均比手机端长约 40 秒，选房时你会先看到这个差别。</p>
            </li>
            <li>
              <h3>画面适配跟着机型走</h3>
              <p>根据屏幕比例给出画面裁切与操作布局建议，避免关键水域被刘海或边角挡住。同一款机型的建议会长期保留，换系统版本后重新进选房页，看到的还是同一套参数。</p>
            </li>
            <li>
              <h3>和线下伙伴共同维护</h3>
              <p>与 30 余家线下电玩城共享机型兼容清单。新机在门店上架之前，双方先跑一轮适配验证，把兼容问题留在线下阶段解决，不带进线上房间。</p>
            </li>
          </ol>

          <figure class="about-figure about-device-figure">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="多款平板与手机平铺在网格台面上，屏幕显示适配参数" loading="lazy" decoding="async">
            <figcaption>适配记录 · 屏幕比例与性能参数入档</figcaption>
          </figure>
        </div>
      </section>

      <section class="about-chapter" id="channels">
        <header class="section-head">
          <p class="eyebrow">04 · 版本通道</p>
          <h2 class="section-title">稳定版通道与大版本通道并行</h2>
          <p class="about-lede">版本节奏定成每两周一次小版本、每季度一次大版本，两条通道同时发布。你不需要跟着最新版本走，选哪条通道取决于你想尝新还是想省心。</p>
        </header>

        <div class="about-channels">
          <article class="about-channel about-channel--stable">
            <span class="about-channel-tag">BYBSXF中国区稳定版</span>
            <h3 class="about-channel-title">功能变化小，兼容修得勤</h3>
            <ul class="about-channel-list">
              <li>双周一次小版本，主要做机型兼容修复与画面微调</li>
              <li>界面结构长期不变，老用户不用重新熟悉一遍</li>
              <li>房间档位、底分结构与结算流程与规则第 12 版保持一致</li>
            </ul>
          </article>

          <article class="about-channel about-channel--major">
            <span class="about-channel-tag">季度大版本通道</span>
            <h3 class="about-channel-title">新房间、新玩法先在这里出现</h3>
            <ul class="about-channel-list">
              <li>每季度一次大版本，带来新房间档位与画面调整</li>
              <li>竞赛场赛程与赛季阶段随大版本一起公布</li>
              <li>先在大版本通道验证稳定，再合入稳定版通道</li>
            </ul>
          </article>
        </div>

        <p class="about-note">电玩城找旧版本的需求，归档区接得住：按安卓、iOS、平板与模拟器四类分开整理，42 个条目都注明了适用的系统版本与屏幕比例范围。换新机之后先做一次机型确认与设备校验，完成后手机、平板与网页端可以续接同一账号进度。</p>
      </section>

      <section class="about-chapter" id="partners">
        <header class="section-head">
          <p class="eyebrow">05 · 合作生态</p>
          <h2 class="section-title">合作生态与线下伙伴</h2>
          <p class="about-lede">合作分三个方向，各自的分工写清楚了再谈，避免中途来回改范围。想谈哪一种，都可以从商务合作页进来。</p>
        </header>

        <div class="accordion about-accordion" data-accordion>
          <div class="about-acc-item">
            <button class="accordion-trigger" type="button" data-accordion-trigger aria-expanded="false">
              <span>线下电玩城合作</span>
              <span class="about-acc-mark" aria-hidden="true">+</span>
            </button>
            <div class="accordion-panel" data-accordion-panel>
              <p>电玩城提供门店机型的实际配置与用户反馈，平台负责把这些机型补进适配库、给出画面建议并做长期兼容维护。新机上架前双方联合跑一次验证，日常由平台维护兼容清单，门店按季度更新一次设备台账。</p>
            </div>
          </div>

          <div class="about-acc-item">
            <button class="accordion-trigger" type="button" data-accordion-trigger aria-expanded="false">
              <span>设备厂商与渠道方</span>
              <span class="about-acc-mark" aria-hidden="true">+</span>
            </button>
            <div class="accordion-panel" data-accordion-panel>
              <p>厂商提供未上市或刚上市的机型参数与工程样机，适配团队提前完成屏幕比例与性能档位测试，产品发布当日即可在选房页看到按该机型估算的单局耗时。渠道方可以拿到同一份兼容结论用于自己的上架判断。</p>
            </div>
          </div>

          <div class="about-acc-item">
            <button class="accordion-trigger" type="button" data-accordion-trigger aria-expanded="false">
              <span>内容与赛事团队</span>
              <span class="about-acc-mark" aria-hidden="true">+</span>
            </button>
            <div class="accordion-panel" data-accordion-panel>
              <p>竞赛场每周开设 6 场定时赛事，赛程与结果按赛季分阶段推进。内容团队负责赛事规则设计与阶段编排，平台负责房间资源调度、人数承载与结算条目核对，赛程公布渠道统一放在版本风向栏目。</p>
            </div>
          </div>

          <div class="about-acc-item">
            <button class="accordion-trigger" type="button" data-accordion-trigger aria-expanded="false">
              <span>技术支持与适配协作</span>
              <span class="about-acc-mark" aria-hidden="true">+</span>
            </button>
            <div class="accordion-panel" data-accordion-panel>
              <p>涉及屏幕渲染、输入延迟或多端同步的技术协作，可以走适配团队的对接通道。需要提供的材料包括机型清单、系统版本范围与期望的适配口径，通常一轮测试周期内给出结论。</p>
            </div>
          </div>
        </div>

        <figure class="about-figure about-partner-figure">
          <img src="{zhanqunpic:h:900w:1200}" width="1200" height="900" alt="机械鱼群线稿与机台轮廓交织的技术协作抽象图" loading="lazy" decoding="async">
          <figcaption>协作关系 · 机型、内容与赛事三条线并行</figcaption>
        </figure>
      </section>

    </div>
  </div>

  <section class="about-cta">
    <div class="shell">
      <div class="about-cta-inner">
        <p class="eyebrow eyebrow--cyan">下一步</p>
        <h2 class="section-title">一起把事情做下去</h2>
        <p class="about-cta-text">如果你是有合作意向的渠道方或线下电玩城，去商务合作页看洽谈流程与需要准备的材料；遇到账号、登录或版本入口的具体问题，问题排查页按类型给了处置步骤，多数情况自己就能处理完。</p>
        <div class="about-cta-actions">
          <a class="btn btn--primary" href="/cooperation/">查看合作方向</a>
          <a class="btn btn--ghost" href="/troubleshooting/">查问题排查</a>
          <a class="btn btn--quiet" href="/features/">看功能中心</a>
        </div>
      </div>
    </div>
  </section>

  <a class="to-top" data-to-top href="#main-content" aria-label="返回顶部">
    <span class="to-top-arrow" aria-hidden="true">↑</span>
    <span class="to-top-label">顶部</span>
  </a>

</main>


/* ============ 品牌总览 · page-about ============ */

.page-about {
  --about-tl-x: 6px;
  --about-rail: 123px;
  --about-panel: rgba(16, 48, 74, 0.5);
  --about-panel-soft: rgba(16, 48, 74, 0.32);
}

/* ---------- 首屏 ---------- */

.page-about .about-hero {
  padding-top: clamp(24px, 4.6vw, 52px);
}

.page-about .about-hero-frame {
  margin-top: clamp(14px, 2.2vw, 26px);
  border: 1px solid var(--grid);
  padding: var(--frame-pad);
  background:
    radial-gradient(115% 85% at 8% -12%, rgba(86, 224, 208, 0.11), transparent 58%),
    radial-gradient(95% 80% at 102% 112%, rgba(123, 92, 255, 0.14), transparent 62%),
    var(--slate);
}

.page-about .about-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 44px);
}

@media (min-width: 920px) {
  .page-about .about-hero-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
  }
}

.page-about .about-hero-lead {
  min-width: 0;
}

.page-about .about-hero-lead .display {
  margin: 14px 0 0;
  font-size: clamp(34px, 6.6vw, 74px);
  line-height: 1.02;
}

.page-about .about-hero-lead .lede {
  margin: clamp(16px, 2.4vw, 26px) 0 0;
  max-width: 52ch;
  color: var(--bone);
  font-size: 17px;
  line-height: 1.85;
}

.page-about .about-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(22px, 3.2vw, 34px);
}

.page-about .about-hero-side {
  min-width: 0;
  border: 1px solid var(--grid);
  border-top: 4px solid var(--coral);
  background: rgba(6, 26, 43, 0.6);
  padding: clamp(16px, 2.4vw, 22px);
}

.page-about .about-hero-side .card-eyebrow {
  margin: 0 0 10px;
  color: var(--clay);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
}

.page-about .about-facts {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-about .about-facts li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--grid);
}

.page-about .about-facts li:first-child {
  border-top: 0;
  padding-top: 4px;
}

.page-about .about-fact-num {
  flex: none;
  min-width: 74px;
  color: var(--cyan);
  font-size: 17px;
  letter-spacing: 0.02em;
}

.page-about .about-fact-text {
  color: var(--bone);
  font-size: 15px;
  line-height: 1.65;
}

/* ---------- 主体两栏 ---------- */

.page-about .about-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 5vw, 56px);
  padding-top: clamp(44px, 7vw, 88px);
  padding-bottom: clamp(48px, 7vw, 96px);
}

@media (min-width: 1080px) {
  .page-about .about-body {
    grid-template-columns: 172px minmax(0, 1fr);
    align-items: start;
  }
}

.page-about .about-flow {
  min-width: 0;
}

/* ---------- 章节索引 ---------- */

.page-about .about-index ol {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0 0 12px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.page-about .about-index ol::-webkit-scrollbar {
  display: none;
}

.page-about .about-index li {
  margin: 0;
}

.page-about .about-index a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--grid);
  color: var(--bone);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}

.page-about .about-idx-num {
  color: var(--clay);
  font-size: 11px;
}

.page-about .about-index a:hover,
.page-about .about-index a:focus-visible {
  border-color: var(--cyan);
  color: var(--cyan);
}

.page-about .about-index a[aria-current="true"] {
  border-color: var(--coral);
  color: var(--coral);
}

.page-about .about-index a[aria-current="true"] .about-idx-num {
  color: var(--coral);
}

@media (min-width: 1080px) {
  .page-about .about-index {
    position: sticky;
    top: calc(var(--header-h-slim) + 28px);
  }

  .page-about .about-index ol {
    display: block;
    overflow: visible;
    padding: 0;
    border-left: 1px solid var(--grid);
  }

  .page-about .about-index a {
    display: flex;
    align-items: baseline;
    border: 0;
    border-left: 2px solid transparent;
    margin-left: -1px;
    padding: 10px 10px;
    color: var(--ash);
    white-space: normal;
  }

  .page-about .about-index a:hover,
  .page-about .about-index a:focus-visible {
    border-left-color: var(--cyan);
    color: var(--bone);
  }

  .page-about .about-index a[aria-current="true"] {
    border-left-color: var(--coral);
    background: rgba(255, 107, 74, 0.07);
    color: var(--bone);
  }
}

/* ---------- 章节通用 ---------- */

.page-about .about-chapter {
  padding-bottom: clamp(48px, 7vw, 92px);
}

.page-about .about-chapter:last-child {
  padding-bottom: 0;
}

.page-about .about-chapter .section-head {
  margin-bottom: clamp(26px, 4vw, 44px);
}

.page-about .about-lede {
  max-width: 62ch;
  margin: 16px 0 0;
  color: var(--bone);
  font-size: 17px;
  line-height: 1.85;
}

/* ---------- 时间线 ---------- */

.page-about .about-timeline {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-about .about-timeline::before {
  content: "";
  position: absolute;
  left: var(--about-tl-x);
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, var(--clay) 0%, var(--clay) 42%, var(--cyan) 100%);
  opacity: 0.55;
}

.page-about .about-step {
  position: relative;
  padding-left: 36px;
  padding-bottom: clamp(30px, 5vw, 48px);
}

.page-about .about-step:last-child {
  padding-bottom: 0;
}

.page-about .about-step::before {
  content: "";
  position: absolute;
  left: calc(var(--about-tl-x) - 5px);
  top: 6px;
  width: 11px;
  height: 11px;
  box-sizing: border-box;
  background: var(--abyss);
  border: 1px solid var(--clay);
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.page-about .about-step[data-active]::before {
  background: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 0 5px rgba(86, 224, 208, 0.13);
}

.page-about .about-step-year {
  display: block;
  margin-bottom: 6px;
  color: var(--clay);
  font-size: 15px;
  letter-spacing: 0.08em;
}

.page-about .about-step-body {
  min-width: 0;
}

.page-about .about-step .card-title {
  margin: 0 0 10px;
  color: var(--bone);
  font-size: clamp(18px, 2.1vw, 21px);
  line-height: 1.4;
}

.page-about .about-step-body p {
  max-width: 62ch;
  margin: 0;
  color: var(--bone);
  font-size: 16px;
  line-height: 1.85;
}

.page-about .about-step-figure {
  margin-top: 20px;
}

@media (min-width: 900px) {
  .page-about .about-timeline {
    --about-tl-x: var(--about-rail);
  }

  .page-about .about-step {
    padding-left: 156px;
  }

  .page-about .about-step-year {
    position: absolute;
    left: 0;
    top: 1px;
    width: 96px;
    margin-bottom: 0;
    text-align: right;
    font-size: 20px;
  }

  .page-about .about-step::before {
    top: 8px;
  }
}

/* ---------- 图片框 ---------- */

.page-about .about-figure {
  margin: 0;
  border: 1px solid var(--grid);
  background: var(--abyss);
}

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

.page-about .about-figure figcaption {
  border-top: 1px solid var(--grid);
  padding: 10px 14px;
  color: var(--ash);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  line-height: 1.6;
}

/* ---------- 反色统计区 ---------- */

.page-about .about-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3.2vw, 34px);
  padding: clamp(24px, 3.8vw, 44px) clamp(20px, 3.2vw, 40px);
  background: var(--bone);
  color: var(--abyss);
}

@media (min-width: 760px) {
  .page-about .about-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.page-about .about-stat {
  border-top: 2px solid var(--clay);
  padding-top: 14px;
}

.page-about .about-stat-num {
  display: flex;
  align-items: baseline;
  gap: 3px;
  color: var(--abyss);
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1;
  letter-spacing: 0.01em;
}

.page-about .about-stat-unit {
  font-size: 0.44em;
  color: var(--clay);
  letter-spacing: 0.04em;
}

.page-about .about-stat-label {
  display: block;
  margin-top: 10px;
  color: #2b4054;
  font-size: 13px;
  line-height: 1.6;
}

.page-about .about-scale-copy {
  margin-top: clamp(26px, 3.6vw, 40px);
}

.page-about .about-scale-copy p {
  max-width: 62ch;
  margin: 0 0 16px;
  color: var(--bone);
  font-size: 16px;
  line-height: 1.85;
}

.page-about .about-scale-copy p:last-child {
  margin-bottom: 0;
}

/* ---------- 机型适配 ---------- */

.page-about .about-device-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 42px);
}

@media (min-width: 900px) {
  .page-about .about-device-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
  }
}

.page-about .about-device-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: dev;
}

.page-about .about-device-steps li {
  position: relative;
  padding: 18px 0 18px 46px;
  border-top: 1px solid var(--grid);
}

.page-about .about-device-steps li:last-child {
  border-bottom: 1px solid var(--grid);
}

.page-about .about-device-steps li::before {
  counter-increment: dev;
  content: "0" counter(dev);
  position: absolute;
  left: 0;
  top: 21px;
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
}

.page-about .about-device-steps h3 {
  margin: 0 0 8px;
  color: var(--bone);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
}

.page-about .about-device-steps p {
  margin: 0;
  color: var(--ash);
  font-size: 15px;
  line-height: 1.8;
}

.page-about .about-device-figure {
  align-self: start;
}

/* ---------- 版本通道 ---------- */

.page-about .about-channels {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

@media (min-width: 820px) {
  .page-about .about-channels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.page-about .about-channel {
  border: 1px solid var(--grid);
  border-top-width: 4px;
  border-top-style: solid;
  background: var(--about-panel);
  padding: clamp(20px, 3vw, 30px);
}

.page-about .about-channel--stable {
  border-top-color: var(--cyan);
}

.page-about .about-channel--major {
  border-top-color: var(--violet);
}

.page-about .about-channel-tag {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid currentColor;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
}

.page-about .about-channel--stable .about-channel-tag {
  color: var(--cyan);
}

.page-about .about-channel--major .about-channel-tag {
  color: var(--violet);
}

.page-about .about-channel-title {
  margin: 16px 0 0;
  color: var(--bone);
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 700;
  line-height: 1.45;
}

.page-about .about-channel-list {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.page-about .about-channel-list li {
  position: relative;
  padding: 11px 0 11px 18px;
  border-top: 1px solid var(--about-panel-soft);
  color: var(--bone);
  font-size: 15px;
  line-height: 1.75;
}

.page-about .about-channel-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 19px;
  width: 6px;
  height: 6px;
  box-sizing: border-box;
  border: 1px solid var(--clay);
}

.page-about .about-note {
  margin: clamp(22px, 3vw, 32px) 0 0;
  padding: clamp(18px, 2.6vw, 26px);
  border: 1px solid var(--grid);
  border-left: 3px solid var(--violet);
  background: rgba(123, 92, 255, 0.07);
  color: var(--bone);
  font-size: 15px;
  line-height: 1.85;
  max-width: 78ch;
}

/* ---------- 合作生态 ---------- */

.page-about .about-accordion {
  border-bottom: 1px solid var(--grid);
}

.page-about .about-acc-item {
  border-top: 1px solid var(--grid);
}

.page-about .about-accordion .accordion-trigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 4px;
  background: none;
  border: 0;
  color: var(--bone);
  font-family: inherit;
  font-size: clamp(16px, 2vw, 18px);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: color 0.18s ease;
}

.page-about .about-accordion .accordion-trigger:hover,
.page-about .about-accordion .accordion-trigger:focus-visible {
  color: var(--cyan);
}

.page-about .about-acc-mark {
  flex: none;
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 18px;
  line-height: 1;
}

.page-about .about-accordion .accordion-trigger[aria-expanded="true"] .about-acc-mark {
  color: var(--coral);
}

.page-about .about-accordion .accordion-panel p {
  max-width: 66ch;
  margin: 0;
  padding: 0 4px 22px;
  color: var(--ash);
  font-size: 15px;
  line-height: 1.85;
}

.page-about .about-partner-figure {
  margin-top: clamp(28px, 4vw, 44px);
  max-width: 720px;
}

/* ---------- 收尾 ---------- */

.page-about .about-cta {
  padding: 0 0 clamp(56px, 8vw, 104px);
}

.page-about .about-cta-inner {
  border: 1px solid var(--grid);
  border-top: 4px solid var(--coral);
  padding: clamp(26px, 4vw, 50px);
  background:
    radial-gradient(85% 130% at 102% 0%, rgba(255, 107, 74, 0.13), transparent 56%),
    radial-gradient(75% 110% at -5% 105%, rgba(86, 224, 208, 0.11), transparent 60%),
    var(--slate);
}

.page-about .about-cta-text {
  max-width: 62ch;
  margin: 18px 0 0;
  color: var(--bone);
  font-size: 16px;
  line-height: 1.85;
}

.page-about .about-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(22px, 3.2vw, 34px);
}

/* ---------- 返回顶部 ---------- */

.page-about .to-top {
  display: none;
  position: fixed;
  right: clamp(14px, 3vw, 28px);
  bottom: clamp(14px, 3vw, 28px);
  z-index: 40;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--grid);
  background: rgba(6, 26, 43, 0.92);
  color: var(--bone);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-decoration: none;
  transition: border-color 0.18s ease, color 0.18s ease;
}

.page-about .to-top[data-visible] {
  display: inline-flex;
}

.page-about .to-top:hover,
.page-about .to-top:focus-visible {
  border-color: var(--cyan);
  color: var(--cyan);
}

.page-about .to-top-arrow {
  font-size: 14px;
  line-height: 1;
}

@media (max-width: 640px) {
  .page-about .about-idx-label {
    font-size: 11px;
  }

  .page-about .about-hero-actions .btn,
  .page-about .about-cta-actions .btn {
    flex: 1 1 auto;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .about-step::before,
  .page-about .about-index a,
  .page-about .about-accordion .accordion-trigger {
    transition: none;
  }
}
<<<END>>>