.page-about {
  --about-paper-line: rgba(7, 20, 38, 0.2);
  --about-ink-soft: #33485c;
  --about-pad-left: clamp(30px, 5vw, 64px);
  background: var(--ink);
  color: var(--frost);
  font-family: var(--font-body);
  overflow-x: clip;
  padding-bottom: clamp(48px, 8vw, 96px);
}

.page-about .about-shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(20px, 4vw, 48px) var(--gutter) 0;
}

.page-about .about-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 clamp(28px, 5vw, 64px);
  color: var(--steel);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.page-about .about-breadcrumb a {
  color: var(--frost);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 180ms var(--ease), color 180ms var(--ease);
}

.page-about .about-breadcrumb a:hover {
  color: var(--aurora);
  border-bottom-color: var(--aurora);
}

.page-about .about-hero {
  display: grid;
  gap: clamp(28px, 4vw, 52px);
  padding-bottom: clamp(32px, 5vw, 64px);
  border-bottom: 1px solid var(--line-strong);
}

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

.page-about .about-kicker {
  margin: 0 0 18px;
  color: var(--aurora);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.page-about .about-hero h1 {
  max-width: 16ch;
  margin: 0;
  color: var(--frost);
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6.4vw, 6rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 0.98;
  text-wrap: balance;
}

.page-about .about-lead {
  max-width: 64ch;
  margin: clamp(22px, 3vw, 32px) 0 0;
  color: var(--steel);
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  line-height: 1.8;
}

.page-about .about-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(24px, 3vw, 34px);
}

.page-about .about-hero__aside {
  align-self: end;
  min-width: 0;
  padding-left: 18px;
  border-left: 2px solid var(--aurora);
}

.page-about .about-hero__label {
  margin: 0 0 16px;
  color: var(--steel);
  font-size: 12px;
  letter-spacing: 0.12em;
}

.page-about .about-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--line);
}

.page-about .about-hero__stats > div {
  min-width: 0;
  padding: 14px 12px;
  background: var(--ink);
}

.page-about .about-hero__stats dt {
  margin: 0 0 8px;
  color: var(--steel);
  font-size: 12px;
}

.page-about .about-hero__stats dd {
  margin: 0;
  color: var(--aurora);
  font-size: clamp(1.3rem, 2.2vw, 2rem);
  line-height: 1;
}

.page-about .about-hero__note {
  margin: 16px 0 0;
  color: var(--silver);
  font-size: 13px;
  line-height: 1.65;
}

.page-about .about-index {
  display: flex;
  gap: 0;
  margin: clamp(18px, 3vw, 28px) 0 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--line-strong);
  scrollbar-width: thin;
}

.page-about .about-index a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  color: var(--steel);
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  border-right: 1px solid var(--line);
  transition: color 180ms var(--ease), background 180ms var(--ease);
}

.page-about .about-index a:hover {
  color: var(--frost);
  background: var(--ink-panel);
}

.page-about .about-index .mono {
  color: var(--aurora);
  font-size: 12px;
}

.page-about .about-flow {
  margin-top: clamp(12px, 3vw, 28px);
}

.page-about .about-chapter {
  position: relative;
  padding: clamp(36px, 6vw, 76px) 0 clamp(36px, 6vw, 76px) var(--about-pad-left);
  border-top: 1px solid var(--line);
  scroll-margin-top: 24px;
}

.page-about .about-chapter:first-child {
  border-top: 0;
}

.page-about .about-chapter::before {
  content: "";
  position: absolute;
  top: clamp(36px, 6vw, 76px);
  bottom: clamp(36px, 6vw, 76px);
  left: 0;
  width: 1px;
  background: var(--line-strong);
}

.page-about .about-chapter::after {
  content: "";
  position: absolute;
  top: clamp(36px, 6vw, 76px);
  left: -4px;
  width: 9px;
  height: 9px;
  background: var(--aurora);
  transform: rotate(45deg);
}

.page-about .about-chapter--dark {
  background: linear-gradient(180deg, rgba(14, 35, 60, 0.28), transparent 72%);
}

.page-about .about-chapter--paper {
  padding-right: clamp(18px, 3vw, 40px);
  background: var(--paper);
  color: var(--graphite);
  border-top-color: var(--about-paper-line);
}

.page-about .about-chapter--paper::before {
  background: var(--about-paper-line);
}

.page-about .about-chapter--paper::after {
  background: var(--ice);
}

.page-about .about-chapter__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(14px, 3vw, 32px);
  align-items: start;
  margin-bottom: clamp(24px, 4vw, 44px);
}

.page-about .about-num {
  color: rgba(39, 224, 200, 0.13);
  font-family: var(--font-mono);
  font-size: clamp(2.2rem, 6vw, 4.6rem);
  font-weight: 500;
  letter-spacing: -0.08em;
  line-height: 0.85;
  -webkit-text-stroke: 1px var(--aurora);
}

.page-about .about-chapter--paper .about-num {
  color: rgba(47, 125, 246, 0.1);
  -webkit-text-stroke-color: var(--ice);
}

.page-about .about-chapter h2 {
  max-width: 20ch;
  margin: 6px 0 0;
  color: var(--frost);
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.08;
  text-wrap: balance;
}

.page-about .about-chapter--paper h2,
.page-about .about-chapter--paper h3,
.page-about .about-chapter--paper strong {
  color: var(--ink);
}

.page-about .about-chapter .eyebrow {
  margin: 0;
  color: var(--aurora);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.page-about .about-chapter--paper .eyebrow {
  color: var(--ice);
}

.page-about .about-copy p {
  max-width: 68ch;
  margin: 0 0 1em;
  color: var(--steel);
  font-size: clamp(0.98rem, 1.1vw, 1.06rem);
  line-height: 1.82;
}

.page-about .about-chapter--paper .about-copy p,
.page-about .about-chapter--paper .about-facts span,
.page-about .about-chapter--paper .about-note,
.page-about .about-chapter--paper .about-role p,
.page-about .about-chapter--paper .about-versions p,
.page-about .about-chapter--paper .about-milestones span:last-child,
.page-about .about-chapter--paper .scale-label {
  color: var(--about-ink-soft);
}

.page-about .about-grid {
  display: grid;
  gap: clamp(24px, 4vw, 52px);
  align-items: start;
}

.page-about .about-figure {
  min-width: 0;
  margin: 0;
}

.page-about .about-figure .media {
  overflow: hidden;
  background: var(--ink-panel);
  border: 1px solid var(--line-strong);
}

.page-about .about-chapter--paper .about-figure .media {
  border-color: var(--about-paper-line);
}

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

.page-about .about-figure .media--4x3 {
  aspect-ratio: 4 / 3;
}

.page-about .about-figure .media--16x9 {
  aspect-ratio: 16 / 9;
}

.page-about .about-figure .media__caption {
  margin-top: 10px;
  padding-top: 9px;
  color: var(--silver);
  font-size: 13px;
  line-height: 1.6;
  border-top: 1px solid var(--line);
}

.page-about .about-chapter--paper .about-figure .media__caption {
  color: var(--silver);
  border-top-color: var(--about-paper-line);
}

.page-about .about-facts {
  display: grid;
  gap: 0;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.page-about .about-facts li {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.6;
}

.page-about .about-facts .mono {
  color: var(--aurora);
  font-size: 13px;
}

.page-about .about-chapter--paper .about-facts {
  border-top-color: var(--about-paper-line);
}

.page-about .about-chapter--paper .about-facts li {
  border-bottom-color: var(--about-paper-line);
}

.page-about .about-chapter--paper .about-facts .mono {
  color: var(--ice);
}

.page-about .about-chain {
  display: grid;
  gap: 12px;
  margin: 24px 0;
}

.page-about .about-chain__step {
  min-width: 0;
  padding: 16px 14px 16px 0;
  border-top: 2px solid var(--ice);
}

.page-about .about-Chain__step,
.page-about .about-chain__step {
  background: rgba(47, 125, 246, 0.05);
}

.page-about .about-chain__step .mono {
  display: inline-block;
  margin-bottom: 10px;
  color: var(--signal);
  font-size: 12px;
}

.page-about .about-chain__step h3 {
  margin: 0 0 8px;
  color: var(--frost);
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.2;
}

.page-about .about-chain__step p {
  margin: 0;
  color: var(--steel);
  font-size: 14px;
  line-height: 1.65;
}

.page-about .about-chapter--paper .about-chain__step h3 {
  color: var(--ink);
}

.page-about .about-chapter--paper .about-chain__step p {
  color: var(--about-ink-soft);
}

.page-about .about-note {
  max-width: 72ch;
  margin: 24px 0;
  padding: 12px 0 12px 16px;
  color: var(--steel);
  font-size: 15px;
  line-height: 1.75;
  border-left: 3px solid var(--signal);
}

.page-about .about-chapter--paper .about-note {
  border-left-color: var(--signal);
}

.page-about .about-textlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding-bottom: 4px;
  color: var(--aurora);
  font-family: var(--font-mono);
  font-size: 14px;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.page-about .about-textlink:hover {
  color: var(--frost);
}

.page-about .about-chapter--paper .about-textlink {
  color: var(--ice);
}

.page-about .about-chapter--paper .about-textlink:hover {
  color: var(--ink);
}

.page-about .about-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 0;
}

.page-about .about-chip-row--terminal {
  margin-top: 10px;
}

.page-about .about-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 9px;
  color: var(--frost);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  background: rgba(14, 35, 60, 0.55);
  border: 1px solid var(--line-strong);
}

.page-about .about-chapter--paper .about-chip {
  color: var(--ink);
  background: rgba(47, 125, 246, 0.07);
  border-color: var(--about-paper-line);
}

.page-about .about-versions,
.page-about .about-milestones {
  display: grid;
  gap: 0;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--about-paper-line);
}

.page-about .about-versions li,
.page-about .about-milestones li {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 14px;
  padding: 17px 0;
  border-bottom: 1px solid var(--about-paper-line);
}

.page-about .about-versions .ver-year,
.page-about .about-milestones .mono {
  color: var(--signal);
  font-size: 13px;
}

.page-about .about-versions strong {
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
}

.page-about .about-versions p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
}

.page-about .about-team {
  display: grid;
  gap: 0;
  margin: 24px 0;
  border-top: 1px solid var(--line-strong);
}

.page-about .about-role {
  min-width: 0;
  padding: 18px 16px 20px 0;
  border-bottom: 1px solid var(--line);
}

.page-about .about-role h3 {
  margin: 0 0 8px;
  color: var(--aurora);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.page-about .about-role p {
  margin: 0;
  color: var(--steel);
  font-size: 14px;
  line-height: 1.7;
}

.page-about .about-figure--wide {
  margin-top: clamp(28px, 5vw, 48px);
}

.page-about .about-scale {
  display: grid;
  gap: 12px;
  margin: 24px 0;
}

.page-about .scale-item {
  min-width: 0;
  padding-top: 12px;
  border-top: 2px solid var(--ice);
}

.page-about .scale-num {
  display: block;
  color: var(--ice);
  font-size: clamp(1.8rem, 3.4vw, 3rem);
  line-height: 1;
}

.page-about .scale-label {
  display: block;
  margin-top: 8px;
  color: var(--about-ink-soft);
  font-size: 13px;
  line-height: 1.5;
}

.page-about .about-next {
  display: grid;
  gap: 20px;
  margin-top: clamp(32px, 5vw, 52px);
  padding: clamp(24px, 4vw, 36px);
  color: var(--frost);
  background: var(--ink);
  border-left: 4px solid var(--signal);
}

.page-about .about-next h3 {
  margin: 10px 0 12px;
  color: var(--frost);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.15;
}

.page-about .about-next p {
  max-width: 60ch;
  margin: 0;
  color: var(--steel);
  font-size: 15px;
  line-height: 1.75;
}

.page-about .about-next .eyebrow {
  color: var(--signal);
}

.page-about .about-next__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.page-about .about-top {
  display: inline-block;
  margin-top: 24px;
  padding-bottom: 2px;
  color: var(--silver);
  font-family: var(--font-mono);
  font-size: 13px;
  text-decoration: none;
  border-bottom: 1px solid var(--about-paper-line);
}

.page-about .about-top:hover {
  color: var(--ice);
  border-bottom-color: var(--ice);
}

@media (min-width: 720px) {
  .page-about .about-chain {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
  }

  .page-about .about-chain__step {
    padding: 16px 14px 16px 16px;
    border-left: 1px solid var(--line);
  }

  .page-about .about-chain__step:first-child {
    border-left: 0;
  }

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

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

  .page-about .about-next {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
}

@media (min-width: 960px) {
  .page-about .about-hero {
    grid-template-columns: minmax(0, 1.36fr) minmax(300px, 0.64fr);
    align-items: end;
  }

  .page-about .about-grid--split {
    grid-template-columns: minmax(0, 1.12fr) minmax(280px, 0.88fr);
  }

  .page-about .about-grid--reverse {
    grid-template-columns: minmax(280px, 0.88fr) minmax(0, 1.12fr);
  }

  .page-about .about-grid--reverse .about-copy {
    order: 2;
  }

  .page-about .about-grid--reverse .about-figure {
    order: 1;
  }

  .page-about .about-role {
    border-right: 1px solid var(--line);
    padding-right: 18px;
  }

  .page-about .about-role:last-child {
    border-right: 0;
  }

  .page-about .about-team {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-about .about-scale {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-about .about-versions li,
  .page-about .about-milestones li {
    grid-template-columns: 100px minmax(0, 1fr);
  }
}

@media (max-width: 639px) {
  .page-about .about-hero__stats {
    grid-template-columns: 1fr;
  }

  .page-about .about-hero__stats > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }

  .page-about .about-hero__stats dt {
    margin: 0;
  }

  .page-about .about-chapter__head {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .page-about .about-num {
    font-size: 2.2rem;
  }

  .page-about .about-facts li,
  .page-about .about-versions li,
  .page-about .about-milestones li {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .page-about .about-chain__step {
    padding-left: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .about-breadcrumb a,
  .page-about .about-index a,
  .page-about .about-textlink,
  .page-about .about-top {
    transition: none;
  }
}
<<<END>>>
No further text. Need ensure cannot include END? The instructions said output markers only, no extra? We added <<<END>>> not specified. It says strictly output order with only two markers, each once. We added END marker, might violate. Need not include END. But final already? We need output. Must not include <<<END>>>. Remove. Also CSS has typo `.about-Chain__step` with capital C. It's extra but harmless? It defines selector, but not in HTML; still valid but weird. Should remove. Also `@media` etc. Need no END. Re-output final correct without END. Ensure markers exactly. Also check "about-Chain" class not in HTML, page CSS new class defined but not used; okay but can remove. Need final.

Need maybe issue "官方直营 · 费用分档同页呈现" visible, is that meta-ish? It describes fee tiers same page. It's business transparency. Fine, but "同页呈现" maybe site organization. It might be flagged as about website organization. Hmm "费用分档同页呈现" is in shared trust statement allowed, but writing rules say not to explain site organization. It's okay? It says "费用分档同页呈现" as trust statement. It's borderline. We can change to "官方直营 · 三档费用清晰可选 · 会员周期按赛季更新" to avoid "同页". Better. In hero note. Also chain "三档会员与月付价格同页对照" maybe meta-ish. Replace with "三档会员与月付价格放在一起看清". That's customer benefit, okay. We have "费用分档同页呈现" in hero note; change.

Also "第4版把首页、品牌档案、权益与订阅、赛场专栏、答疑中心、咨询通道六个主栏目排在一条浏览线上。" This explains site navigation; but content required version evolution and info architecture. For visitors, it can be benefit: "第4版把首页、品牌档案、权益与订阅、赛场专栏、答疑中心、咨询通道六个主栏目排在一条浏览线上" It is about website, but allowed fact. The writing rule says don't say "this page only" or how content is organized. However required section explicitly asks version evolution and directory. It's a site feature/service. It might be acceptable. But "排在一条浏览线上" is organizational. Could instead focus on user benefit: "第4版重新排了入口，让你从首页出发，能顺着品牌档案、权益与订阅、赛场专栏、答疑中心和咨询通道找到对应答案。" Still organizational. But that's the product. Hmm. We need mention第4版目录. Fine.

Could remove "六个主栏目" from body? Required theme. But allowed. Keep.

Need check exact "页面专属选择器全部限定在 .page-about 作用域内" Our @media selectors are .page-about ... yes. Good. No .page-about. We define .page-about variables. Fine.

Need ensure no `about-Chain` typo. Remove.

Need final answer only markers.

Let's output corrected.
<main id="main-content" class="page-about">
  <div class="about-shell">
    <nav class="breadcrumb about-breadcrumb" aria-label="页面位置">
      <a href="/">首页</a>
      <span class="breadcrumb__sep" aria-hidden="true">/</span>
      <span aria-current="page">品牌档案</span>
    </nav>

    <header class="about-hero" data-reveal>
      <div class="about-hero__main">
        <p class="eyebrow about-kicker">M6 // 品牌档案 · 第4版目录</p>
        <h1>米乐M6娱乐：把多联赛观赛服务做成一条清晰链路</h1>
        <p class="about-lead">
          从2019年服务第一批多联赛观赛用户开始，我们把开赛前的阵容确认、会员订阅、费用比较和大屏资源取用收进同一个官方直营入口。你选好常看的联赛和主要终端，就能把接下来的观赛准备一次做完。
        </p>
        <div class="about-hero__actions">
          <a class="btn btn--primary" href="/projects/">查看权益</a>
          <a class="btn btn--ghost" href="/inquiry/">联系咨询</a>
        </div>
      </div>
      <aside class="about-hero__aside" aria-label="品牌速览">
        <p class="mono about-hero__label">M6 // 北境赛场</p>
        <dl class="about-hero__stats">
          <div>
            <dt>起步</dt>
            <dd><span class="mono">2019</span></dd>
          </div>
          <div>
            <dt>联赛覆盖</dt>
            <dd><span class="mono">12</span></dd>
          </div>
          <div>
            <dt>终端适配</dt>
            <dd><span class="mono">6</span></dd>
          </div>
        </dl>
        <p class="about-hero__note">官方直营 · 三档费用清晰可选 · 会员周期按赛季更新</p>
      </aside>
    </header>

    <nav class="about-index" aria-label="品牌档案章节">
      <a href="#chapter-01"><span class="mono">01</span>起点与定位</a>
      <a href="#chapter-02"><span class="mono">02</span>服务链路</a>
      <a href="#chapter-03"><span class="mono">03</span>适配清单</a>
      <a href="#chapter-04"><span class="mono">04</span>目录演进</a>
      <a href="#chapter-05"><span class="mono">05</span>团队分工</a>
      <a href="#chapter-06"><span class="mono">06</span>规模与历程</a>
    </nav>

    <article class="about-flow">
      <section class="about-chapter about-chapter--dark" id="chapter-01" data-reveal>
        <div class="about-chapter__head">
          <span class="about-num" aria-hidden="true">01</span>
          <div>
            <p class="eyebrow">品牌起点 / 当前定位</p>
            <h2>先把开赛前最费时间的几件事收拢起来</h2>
          </div>
        </div>
        <div class="about-grid about-grid--split">
          <div class="about-copy">
            <p>
              2019年，米乐赛事开始为同时关注英超、西甲、意甲、德甲、法甲、欧冠、NBA、CBA、F1、网球大满贯等联赛的用户提供观赛服务。很多用户真正麻烦的地方不在找比赛，而在开赛前反复确认阵容、比较会员权益、把手机上的内容接到客厅大屏。
            </p>
            <p>
              我们把这几件事收拢到官方直营的会员服务里。现在，你可以在开赛前十分钟查看刷新的阵容卡，按家庭大屏或多屏切换的需要选择会员档位，也能从同一入口取用赛事资源包。对同时跟多个联赛的人来说，准备动作少了，观赛节奏就更顺。
            </p>
            <ul class="about-facts">
              <li><span class="mono">2019</span><span>启动多联赛观赛服务</span></li>
              <li><span class="mono">2025</span><span>发布第4版目录与三步阵容路径</span></li>
            </ul>
          </div>
          <figure class="about-figure about-figure--hero">
            <div class="media media--4x3">
              <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="冷蓝色灯光下的冰面赛道起点，画面中没有人物">
            </div>
            <figcaption class="media__caption">北境赛场的冷静与速度感，是我们做观赛服务的视觉起点。</figcaption>
          </figure>
        </div>
      </section>

      <section class="about-chapter about-chapter--paper" id="chapter-02" data-reveal>
        <div class="about-chapter__head">
          <span class="about-num" aria-hidden="true">02</span>
          <div>
            <p class="eyebrow">官方直营 / 服务链路</p>
            <h2>咨询、选档、开通与答疑，在一条服务路径里完成</h2>
          </div>
        </div>
        <div class="about-copy">
          <p>
            官方直营带来的直接好处，是你从了解服务到开通会员只面对一条路径。客服先问清你常看哪些联赛、主要在哪些屏幕上观赛、预算大概在哪一档，再给出适合的会员建议和当期费用。轻享档每赛季199元，进阶档每赛季399元，大屏家庭档每赛季699元；也支持月付29元、49元、79元。费用按赛季更新，跨赛季前会同步新的权益说明。
          </p>
        </div>
        <div class="about-chain" aria-label="官方直营服务流程">
          <div class="about-chain__step">
            <span class="mono">A</span>
            <h3>订阅咨询</h3>
            <p>先确认联赛、终端与预算，不必自己猜档位。</p>
          </div>
          <div class="about-chain__step">
            <span class="mono">B</span>
            <h3>费用说明</h3>
            <p>三档会员与月付价格放在一起看清，选档更有把握。</p>
          </div>
          <div class="about-chain__step">
            <span class="mono">C</span>
            <h3>权益开通</h3>
            <p>同一账号覆盖手机、平板、电视、投影、桌面与车机。</p>
          </div>
          <div class="about-chain__step">
            <span class="mono">D</span>
            <h3>终端适配</h3>
            <p>按客厅大屏、书房桌面或出行场景完成设置。</p>
          </div>
          <div class="about-chain__step">
            <span class="mono">E</span>
            <h3>客服答疑</h3>
            <p>订阅、切换和资源取用遇到问题，沿同一入口处理。</p>
          </div>
        </div>
        <p class="about-note">
          赛季内切换电视端、投影端和车机端使用同一账号权益，不额外收费。每赛季提供4次费用周期提醒，分别在赛季开始、赛季中段、季后赛前和赛季结束前，方便你提前安排续订或调整档位。
        </p>
        <a class="about-textlink" href="/projects/">查看三档会员与费用说明 →</a>
      </section>

      <section class="about-chapter about-chapter--dark" id="chapter-03" data-reveal>
        <div class="about-chapter__head">
          <span class="about-num" aria-hidden="true">03</span>
          <div>
            <p class="eyebrow">适配清单 / 筛选方法</p>
            <h2>十二个联赛、六类终端，先按你的场景筛一遍</h2>
          </div>
        </div>
        <div class="about-grid about-grid--split about-grid--reverse">
          <div class="about-copy">
            <p>
              适配清单把联赛、终端和预算放在一起看。你勾选常看的联赛，说明主要用哪个屏幕观赛，再给出预算区间，就能生成一份咨询清单，里面列出适合的会员档位、可用终端和需要提前确认的资源下载额度。
            </p>
            <p>
              对家庭多人观赛、社团集中观赛，或者经常在手机与大屏之间切换的用户，这份清单能减少来回比较的时间。轻享档每赛季120条资源下载额度，进阶档360条，大屏家庭档900条；如果你的观赛重心在客厅大屏和资源包取用，大屏家庭档会更贴合。
            </p>
            <div class="about-chip-row" aria-label="可按联赛筛选">
              <span class="about-chip">英超</span>
              <span class="about-chip">西甲</span>
              <span class="about-chip">意甲</span>
              <span class="about-chip">德甲</span>
              <span class="about-chip">法甲</span>
              <span class="about-chip">欧冠</span>
              <span class="about-chip">NBA</span>
              <span class="about-chip">CBA</span>
              <span class="about-chip">F1</span>
              <span class="about-chip">网球大满贯</span>
              <span class="about-chip">等12个联赛</span>
            </div>
            <div class="about-chip-row about-chip-row--terminal" aria-label="可按终端筛选">
              <span class="about-chip">手机</span>
              <span class="about-chip">平板</span>
              <span class="about-chip">电视</span>
              <span class="about-chip">投影</span>
              <span class="about-chip">桌面</span>
              <span class="about-chip">车机</span>
            </div>
          </div>
          <figure class="about-figure">
            <div class="media media--4x3">
              <img src="{zhanqunpic:h:900w:1200}" width="1200" height="900" loading="lazy" decoding="async" alt="手机、平板、电视与投影设备组成的终端测试台，没有人物出现">
            </div>
            <figcaption class="media__caption">终端适配测试覆盖手机、平板、电视、投影、桌面与车机六类屏幕。</figcaption>
          </figure>
        </div>
      </section>

      <section class="about-chapter about-chapter--paper" id="chapter-04" data-reveal>
        <div class="about-chapter__head">
          <span class="about-num" aria-hidden="true">04</span>
          <div>
            <p class="eyebrow">版本演进 / 第4版目录</p>
            <h2>目录走到第4版，用户找答案的路径越来越短</h2>
          </div>
        </div>
        <div class="about-copy">
          <p>
            多联赛用户的浏览习惯和单联赛用户不同：有人先看阵容，有人先比费用，也有人直接关心大屏能不能接。2021年上线适配清单，2023年完成第3版目录，2025年发布第4版目录与三步阵容路径，都是围绕这些实际动作调整信息顺序。
          </p>
          <p>
            第4版把首页、品牌档案、权益与订阅、赛场专栏、答疑中心、咨询通道六个主栏目排在一条浏览线上。开赛前十分钟确认阵容被压缩成选择联赛、查看阵容卡、加入观赛清单三步，手机和桌面都能操作，阵容状态会在开赛前自动刷新。赛场专栏每周二、周五更新，设阵容观察、版本目录、大屏指南、赛季费用、终端适配五个分类，方便你按关注点直接进入。
          </p>
        </div>
        <ol class="about-versions">
          <li>
            <span class="ver-year mono">2021</span>
            <div>
              <strong>适配清单上线</strong>
              <p>开始按联赛、终端和预算帮用户筛选会员权益，咨询时有了可对照的清单。</p>
            </div>
          </li>
          <li>
            <span class="ver-year mono">2023</span>
            <div>
              <strong>完成第3版目录</strong>
              <p>栏目按观赛前、订阅中、使用后重新归位，减少在多联赛信息之间来回跳转。</p>
            </div>
          </li>
          <li>
            <span class="ver-year mono">2025</span>
            <div>
              <strong>发布第4版目录与三步阵容路径</strong>
              <p>把阵容确认、费用比较和大屏取用的入口进一步收紧，适合多联赛用户快速扫读。</p>
            </div>
          </li>
        </ol>
        <a class="about-textlink" href="/column/">进入赛场专栏 →</a>
      </section>

      <section class="about-chapter about-chapter--dark" id="chapter-05" data-reveal>
        <div class="about-chapter__head">
          <span class="about-num" aria-hidden="true">05</span>
          <div>
            <p class="eyebrow">团队分工 / 协作节奏</p>
            <h2>38人团队，把编辑、数据、测试和答疑接在一起</h2>
          </div>
        </div>
        <div class="about-copy">
          <p>
            内容与终端团队共38人，岗位不同，但都围绕同一件事协作：让你在开赛前拿到准确的阵容信息，在订阅时看懂费用，在换屏幕时少折腾。团队按每周二、周五的专栏更新节奏排班，赛季期间同步加密阵容卡刷新和终端回归测试。
          </p>
        </div>
        <div class="about-team">
          <div class="about-role">
            <h3>赛事编辑</h3>
            <p>跟踪赛程与阵容变化，组织每周二、周五的专栏内容，把赛前观察写成短而清楚的条目。</p>
          </div>
          <div class="about-role">
            <h3>数据标注</h3>
            <p>把官方数据源里的赛程、阵容和状态整理成可读的阵容卡，减少用户自己对照的时间。</p>
          </div>
          <div class="about-role">
            <h3>终端适配测试</h3>
            <p>在手机、平板、电视、投影、桌面与车机之间反复验证切换体验，记录不同屏幕的显示问题。</p>
          </div>
          <div class="about-role">
            <h3>客服顾问</h3>
            <p>接住订阅、费用周期和资源取用问题，按留言顺序回复，并把高频问题反馈给内容和测试团队。</p>
          </div>
        </div>
        <figure class="about-figure about-figure--wide">
          <div class="media media--16x9">
            <img src="{zhanqunpic:h:787w:1400}" width="1400" height="787" loading="lazy" decoding="async" alt="冷色界面下的多屏监看控制台与赛事数据画面，不出现可识别人物">
          </div>
          <figcaption class="media__caption">编辑、数据标注与终端测试在同一套监看环境里协同，缩短阵容卡更新到上屏的时间。</figcaption>
        </figure>
        <ul class="about-facts">
          <li><span class="mono">1,280</span><span>2024赛季完成阵容卡更新场次</span></li>
          <li><span class="mono">460</span><span>累计发布观察与指南篇数，单篇平均阅读4分20秒</span></li>
        </ul>
      </section>

      <section class="about-chapter about-chapter--paper" id="chapter-06" data-reveal>
        <div class="about-chapter__head">
          <span class="about-num" aria-hidden="true">06</span>
          <div>
            <p class="eyebrow">服务规模 / 合作生态 / 里程碑</p>
            <h2>一场场观赛积累下来的服务规模</h2>
          </div>
        </div>
        <div class="about-copy">
          <p>
            米乐M6娱乐已接入12个联赛的官方数据源，与36家区域赛事内容机构保持合作。累计服务18.7万名会员，家庭大屏用户占比41%。这些数字背后，是家庭客厅、社团活动室和书房桌面里真实发生的观赛场景，也让适配清单和终端测试有了持续更新的依据。
          </p>
        </div>
        <div class="about-scale">
          <div class="scale-item">
            <span class="scale-num mono">18.7万</span>
            <span class="scale-label">累计服务会员</span>
          </div>
          <div class="scale-item">
            <span class="scale-num mono">41%</span>
            <span class="scale-label">家庭大屏用户占比</span>
          </div>
          <div class="scale-item">
            <span class="scale-num mono">36</span>
            <span class="scale-label">区域赛事内容合作机构</span>
          </div>
          <div class="scale-item">
            <span class="scale-num mono">12</span>
            <span class="scale-label">联赛官方数据源接入</span>
          </div>
        </div>
        <ol class="about-milestones">
          <li>
            <span class="mono">2019</span>
            <span>启动多联赛观赛服务，从阵容确认与会员订阅开始打磨流程。</span>
          </li>
          <li>
            <span class="mono">2021</span>
            <span>上线适配清单，按联赛、终端和预算帮助用户筛选权益。</span>
          </li>
          <li>
            <span class="mono">2023</span>
            <span>完成第3版目录，把多联赛浏览路径重新归位。</span>
          </li>
          <li>
            <span class="mono">2025</span>
            <span>发布第4版目录与三步阵容路径，继续缩短开赛前的准备动作。</span>
          </li>
        </ol>
        <div class="about-next">
          <div>
            <p class="eyebrow">下一步</p>
            <h3>把你的联赛、终端和预算告诉我们</h3>
            <p>咨询通道会按你的观赛场景给出会员建议；常见费用、周期与下载额度问题，也可以在答疑中心先查一遍。</p>
          </div>
          <div class="about-next__actions">
            <a class="btn btn--primary" href="/inquiry/">联系咨询</a>
            <a class="btn btn--ghost" href="/answers/">去答疑中心</a>
          </div>
        </div>
        <a class="about-top" href="#main-content">回到页首 ↑</a>
      </section>
    </article>
  </div>
</main>

.page-about {
  --about-paper-line: rgba(7, 20, 38, 0.2);
  --about-ink-soft: #33485c;
  --about-pad-left: clamp(30px, 5vw, 64px);
  background: var(--ink);
  color: var(--frost);
  font-family: var(--font-body);
  overflow-x: clip;
  padding-bottom: clamp(48px, 8vw, 96px);
}

.page-about .about-shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(20px, 4vw, 48px) var(--gutter) 0;
}

.page-about .about-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 clamp(28px, 5vw, 64px);
  color: var(--steel);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.page-about .about-breadcrumb a {
  color: var(--frost);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 180ms var(--ease), color 180ms var(--ease);
}

.page-about .about-breadcrumb a:hover {
  color: var(--aurora);
  border-bottom-color: var(--aurora);
}

.page-about .about-hero {
  display: grid;
  gap: clamp(28px, 4vw, 52px);
  padding-bottom: clamp(32px, 5vw, 64px);
  border-bottom: 1px solid var(--line-strong);
}

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

.page-about .about-kicker {
  margin: 0 0 18px;
  color: var(--aurora);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.page-about .about-hero h1 {
  max-width: 16ch;
  margin: 0;
  color: var(--frost);
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6.4vw, 6rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 0.98;
  text-wrap: balance;
}

.page-about .about-lead {
  max-width: 64ch;
  margin: clamp(22px, 3vw, 32px) 0 0;
  color: var(--steel);
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  line-height: 1.8;
}

.page-about .about-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(24px, 3vw, 34px);
}

.page-about .about-hero__aside {
  align-self: end;
  min-width: 0;
  padding-left: 18px;
  border-left: 2px solid var(--aurora);
}

.page-about .about-hero__label {
  margin: 0 0 16px;
  color: var(--steel);
  font-size: 12px;
  letter-spacing: 0.12em;
}

.page-about .about-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--line);
}

.page-about .about-hero__stats > div {
  min-width: 0;
  padding: 14px 12px;
  background: var(--ink);
}

.page-about .about-hero__stats dt {
  margin: 0 0 8px;
  color: var(--steel);
  font-size: 12px;
}

.page-about .about-hero__stats dd {
  margin: 0;
  color: var(--aurora);
  font-size: clamp(1.3rem, 2.2vw, 2rem);
  line-height: 1;
}

.page-about .about-hero__note {
  margin: 16px 0 0;
  color: var(--silver);
  font-size: 13px;
  line-height: 1.65;
}

.page-about .about-index {
  display: flex;
  gap: 0;
  margin: clamp(18px, 3vw, 28px) 0 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--line-strong);
  scrollbar-width: thin;
}

.page-about .about-index a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  color: var(--steel);
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  border-right: 1px solid var(--line);
  transition: color 180ms var(--ease), background 180ms var(--ease);
}

.page-about .about-index a:hover {
  color: var(--frost);
  background: var(--ink-panel);
}

.page-about .about-index .mono {
  color: var(--aurora);
  font-size: 12px;
}

.page-about .about-flow {
  margin-top: clamp(12px, 3vw, 28px);
}

.page-about .about-chapter {
  position: relative;
  padding: clamp(36px, 6vw, 76px) 0 clamp(36px, 6vw, 76px) var(--about-pad-left);
  border-top: 1px solid var(--line);
  scroll-margin-top: 24px;
}

.page-about .about-chapter:first-child {
  border-top: 0;
}

.page-about .about-chapter::before {
  content: "";
  position: absolute;
  top: clamp(36px, 6vw, 76px);
  bottom: clamp(36px, 6vw, 76px);
  left: 0;
  width: 1px;
  background: var(--line-strong);
}

.page-about .about-chapter::after {
  content: "";
  position: absolute;
  top: clamp(36px, 6vw, 76px);
  left: -4px;
  width: 9px;
  height: 9px;
  background: var(--aurora);
  transform: rotate(45deg);
}

.page-about .about-chapter--dark {
  background: linear-gradient(180deg, rgba(14, 35, 60, 0.28), transparent 72%);
}

.page-about .about-chapter--paper {
  padding-right: clamp(18px, 3vw, 40px);
  background: var(--paper);
  color: var(--graphite);
  border-top-color: var(--about-paper-line);
}

.page-about .about-chapter--paper::before {
  background: var(--about-paper-line);
}

.page-about .about-chapter--paper::after {
  background: var(--ice);
}

.page-about .about-chapter__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(14px, 3vw, 32px);
  align-items: start;
  margin-bottom: clamp(24px, 4vw, 44px);
}

.page-about .about-num {
  color: rgba(39, 224, 200, 0.13);
  font-family: var(--font-mono);
  font-size: clamp(2.2rem, 6vw, 4.6rem);
  font-weight: 500;
  letter-spacing: -0.08em;
  line-height: 0.85;
  -webkit-text-stroke: 1px var(--aurora);
}

.page-about .about-chapter--paper .about-num {
  color: rgba(47, 125, 246, 0.1);
  -webkit-text-stroke-color: var(--ice);
}

.page-about .about-chapter h2 {
  max-width: 20ch;
  margin: 6px 0 0;
  color: var(--frost);
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.08;
  text-wrap: balance;
}

.page-about .about-chapter--paper h2,
.page-about .about-chapter--paper h3,
.page-about .about-chapter--paper strong {
  color: var(--ink);
}

.page-about .about-chapter .eyebrow {
  margin: 0;
  color: var(--aurora);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.page-about .about-chapter--paper .eyebrow {
  color: var(--ice);
}

.page-about .about-copy p {
  max-width: 68ch;
  margin: 0 0 1em;
  color: var(--steel);
  font-size: clamp(0.98rem, 1.1vw, 1.06rem);
  line-height: 1.82;
}

.page-about .about-chapter--paper .about-copy p,
.page-about .about-chapter--paper .about-facts span,
.page-about .about-chapter--paper .about-note,
.page-about .about-chapter--paper .about-role p,
.page-about .about-chapter--paper .about-versions p,
.page-about .about-chapter--paper .about-milestones span:last-child,
.page-about .about-chapter--paper .scale-label {
  color: var(--about-ink-soft);
}

.page-about .about-grid {
  display: grid;
  gap: clamp(24px, 4vw, 52px);
  align-items: start;
}

.page-about .about-figure {
  min-width: 0;
  margin: 0;
}

.page-about .about-figure .media {
  overflow: hidden;
  background: var(--ink-panel);
  border: 1px solid var(--line-strong);
}

.page-about .about-chapter--paper .about-figure .media {
  border-color: var(--about-paper-line);
}

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

.page-about .about-figure .media--4x3 {
  aspect-ratio: 4 / 3;
}

.page-about .about-figure .media--16x9 {
  aspect-ratio: 16 / 9;
}

.page-about .about-figure .media__caption {
  margin-top: 10px;
  padding-top: 9px;
  color: var(--silver);
  font-size: 13px;
  line-height: 1.6;
  border-top: 1px solid var(--line);
}

.page-about .about-chapter--paper .about-figure .media__caption {
  color: var(--silver);
  border-top-color: var(--about-paper-line);
}

.page-about .about-facts {
  display: grid;
  gap: 0;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.page-about .about-facts li {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.6;
}

.page-about .about-facts .mono {
  color: var(--aurora);
  font-size: 13px;
}

.page-about .about-chapter--paper .about-facts {
  border-top-color: var(--about-paper-line);
}

.page-about .about-chapter--paper .about-facts li {
  border-bottom-color: var(--about-paper-line);
}

.page-about .about-chapter--paper .about-facts .mono {
  color: var(--ice);
}

.page-about .about-chain {
  display: grid;
  gap: 12px;
  margin: 24px 0;
}

.page-about .about-chain__step {
  min-width: 0;
  padding: 16px 14px 16px 0;
  border-top: 2px solid var(--ice);
  background: rgba(47, 125, 246, 0.05);
}

.page-about .about-chain__step .mono {
  display: inline-block;
  margin-bottom: 10px;
  color: var(--signal);
  font-size: 12px;
}

.page-about .about-chain__step h3 {
  margin: 0 0 8px;
  color: var(--frost);
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.2;
}

.page-about .about-chain__step p {
  margin: 0;
  color: var(--steel);
  font-size: 14px;
  line-height: 1.65;
}

.page-about .about-chapter--paper .about-chain__step h3 {
  color: var(--ink);
}

.page-about .about-chapter--paper .about-chain__step p {
  color: var(--about-ink-soft);
}

.page-about .about-note {
  max-width: 72ch;
  margin: 24px 0;
  padding: 12px 0 12px 16px;
  color: var(--steel);
  font-size: 15px;
  line-height: 1.75;
  border-left: 3px solid var(--signal);
}

.page-about .about-chapter--paper .about-note {
  border-left-color: var(--signal);
}

.page-about .about-textlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding-bottom: 4px;
  color: var(--aurora);
  font-family: var(--font-mono);
  font-size: 14px;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.page-about .about-textlink:hover {
  color: var(--frost);
}

.page-about .about-chapter--paper .about-textlink {
  color: var(--ice);
}

.page-about .about-chapter--paper .about-textlink:hover {
  color: var(--ink);
}

.page-about .about-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 0;
}

.page-about .about-chip-row--terminal {
  margin-top: 10px;
}

.page-about .about-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 9px;
  color: var(--frost);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  background: rgba(14, 35, 60, 0.55);
  border: 1px solid var(--line-strong);
}

.page-about .about-chapter--paper .about-chip {
  color: var(--ink);
  background: rgba(47, 125, 246, 0.07);
  border-color: var(--about-paper-line);
}

.page-about .about-versions,
.page-about .about-milestones {
  display: grid;
  gap: 0;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--about-paper-line);
}

.page-about .about-versions li,
.page-about .about-milestones li {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 14px;
  padding: 17px 0;
  border-bottom: 1px solid var(--about-paper-line);
}

.page-about .about-versions .ver-year,
.page-about .about-milestones .mono {
  color: var(--signal);
  font-size: 13px;
}

.page-about .about-versions strong {
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
}

.page-about .about-versions p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
}

.page-about .about-team {
  display: grid;
  gap: 0;
  margin: 24px 0;
  border-top: 1px solid var(--line-strong);
}

.page-about .about-role {
  min-width: 0;
  padding: 18px 16px 20px 0;
  border-bottom: 1px solid var(--line);
}

.page-about .about-role h3 {
  margin: 0 0 8px;
  color: var(--aurora);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.page-about .about-role p {
  margin: 0;
  color: var(--steel);
  font-size: 14px;
  line-height: 1.7;
}

.page-about .about-figure--wide {
  margin-top: clamp(28px, 5vw, 48px);
}

.page-about .about-scale {
  display: grid;
  gap: 12px;
  margin: 24px 0;
}

.page-about .scale-item {
  min-width: 0;
  padding-top: 12px;
  border-top: 2px solid var(--ice);
}

.page-about .scale-num {
  display: block;
  color: var(--ice);
  font-size: clamp(1.8rem, 3.4vw, 3rem);
  line-height: 1;
}

.page-about .scale-label {
  display: block;
  margin-top: 8px;
  color: var(--about-ink-soft);
  font-size: 13px;
  line-height: 1.5;
}

.page-about .about-next {
  display: grid;
  gap: 20px;
  margin-top: clamp(32px, 5vw, 52px);
  padding: clamp(24px, 4vw, 36px);
  color: var(--frost);
  background: var(--ink);
  border-left: 4px solid var(--signal);
}

.page-about .about-next h3 {
  margin: 10px 0 12px;
  color: var(--frost);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.15;
}

.page-about .about-next p {
  max-width: 60ch;
  margin: 0;
  color: var(--steel);
  font-size: 15px;
  line-height: 1.75;
}

.page-about .about-next .eyebrow {
  color: var(--signal);
}

.page-about .about-next__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.page-about .about-top {
  display: inline-block;
  margin-top: 24px;
  padding-bottom: 2px;
  color: var(--silver);
  font-family: var(--font-mono);
  font-size: 13px;
  text-decoration: none;
  border-bottom: 1px solid var(--about-paper-line);
}

.page-about .about-top:hover {
  color: var(--ice);
  border-bottom-color: var(--ice);
}

@media (min-width: 720px) {
  .page-about .about-chain {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
  }

  .page-about .about-chain__step {
    padding: 16px 14px 16px 16px;
    border-left: 1px solid var(--line);
  }

  .page-about .about-chain__step:first-child {
    border-left: 0;
  }

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

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

  .page-about .about-next {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
}

@media (min-width: 960px) {
  .page-about .about-hero {
    grid-template-columns: minmax(0, 1.36fr) minmax(300px, 0.64fr);
    align-items: end;
  }

  .page-about .about-grid--split {
    grid-template-columns: minmax(0, 1.12fr) minmax(280px, 0.88fr);
  }

  .page-about .about-grid--reverse {
    grid-template-columns: minmax(280px, 0.88fr) minmax(0, 1.12fr);
  }

  .page-about .about-grid--reverse .about-copy {
    order: 2;
  }

  .page-about .about-grid--reverse .about-figure {
    order: 1;
  }

  .page-about .about-role {
    border-right: 1px solid var(--line);
    padding-right: 18px;
  }

  .page-about .about-role:last-child {
    border-right: 0;
  }

  .page-about .about-team {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-about .about-scale {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-about .about-versions li,
  .page-about .about-milestones li {
    grid-template-columns: 100px minmax(0, 1fr);
  }
}

@media (max-width: 639px) {
  .page-about .about-hero__stats {
    grid-template-columns: 1fr;
  }

  .page-about .about-hero__stats > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }

  .page-about .about-hero__stats dt {
    margin: 0;
  }

  .page-about .about-chapter__head {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .page-about .about-num {
    font-size: 2.2rem;
  }

  .page-about .about-facts li,
  .page-about .about-versions li,
  .page-about .about-milestones li {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .page-about .about-chain__step {
    padding-left: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .about-breadcrumb a,
  .page-about .about-index a,
  .page-about .about-textlink,
  .page-about .about-top {
    transition: none;
  }
}