.page-about {
  --about-gap: clamp(16px, 3vw, 32px);
  display: block;
}

.page-about h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.7rem, 4.2vw, 2.9rem);
  line-height: 1.16;
  letter-spacing: -.015em;
  color: var(--paper);
}

.page-about h3 {
  margin: 0;
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--paper);
}

.page-about p {
  margin: 0;
}

/* ---------- 面包屑 ---------- */
.page-about .crumbs {
  margin-bottom: clamp(18px, 3vw, 30px);
}

.page-about .crumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
}

.page-about .crumb-link {
  color: var(--ink-text-dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}

.page-about .crumb-link:hover,
.page-about .crumb-link:focus-visible {
  color: var(--mint);
  border-color: var(--mint);
}

.page-about .crumb-sep {
  color: var(--line-strong);
}

.page-about .crumb-current {
  color: var(--silver);
}

/* ---------- 首屏 ---------- */
.page-about .about-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 4vw, 40px) 0 clamp(42px, 7vw, 80px);
  border-bottom: 1px solid var(--line-strong);
  background:
    radial-gradient(130% 100% at 88% -12%, rgba(61, 242, 208, .14), transparent 60%),
    radial-gradient(90% 80% at 6% 110%, rgba(155, 140, 255, .10), transparent 62%),
    linear-gradient(180deg, rgba(18, 48, 42, .58), rgba(5, 26, 21, 0) 74%);
}

.page-about .about-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12px;
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px 22px);
  opacity: .5;
  pointer-events: none;
}

.page-about .about-hero__head {
  display: grid;
  gap: clamp(12px, 2vw, 20px);
  max-width: 56rem;
}

.page-about .about-hero .eyebrow {
  color: var(--mint);
}

.page-about .display-title {
  max-width: 20ch;
  margin: 0;
}

.page-about .display-title em {
  font-style: normal;
  color: var(--mint);
}

.page-about .about-hero .lede {
  max-width: 56ch;
  color: var(--ink-text);
}

.page-about .about-tape {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: clamp(28px, 4vw, 44px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-strong);
}

.page-about .about-tape__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 12px 12px;
  border-bottom: 1px solid var(--line);
}

.page-about .about-tape__item:first-child {
  padding-left: 0;
}

.page-about .about-tape__num {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -.03em;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}

.page-about .about-tape__unit {
  margin-left: 2px;
  font-size: .5em;
  letter-spacing: .02em;
  color: var(--mint);
}

.page-about .about-tape__label {
  font-size: .76rem;
  line-height: 1.5;
  color: var(--ink-text-dim);
}

/* ---------- 区块通用 ---------- */
.page-about .section {
  padding: clamp(44px, 7vw, 92px) 0;
}

.page-about .section + .section {
  border-top: 1px solid var(--line);
}

.page-about .section-head {
  display: grid;
  gap: 12px;
  max-width: 52rem;
  margin-bottom: clamp(24px, 4vw, 44px);
}

.page-about .section-note {
  font-size: .95rem;
  line-height: 1.75;
  color: var(--ink-text);
  max-width: 60ch;
}

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

.page-about .media-frame img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  filter: saturate(.9) contrast(1.05);
}

/* ---------- 起点 ---------- */
.page-about .origin {
  display: grid;
  gap: var(--about-gap);
}

.page-about .origin__media {
  margin: 0;
}

.page-about .origin__cap {
  margin-top: 10px;
  font-size: .7rem;
  letter-spacing: .1em;
  color: var(--ink-text-dim);
}

.page-about .origin__body {
  display: grid;
  gap: clamp(14px, 2vw, 18px);
  align-content: start;
}

.page-about .origin__lead {
  font-size: clamp(1rem, 2vw, 1.12rem);
  line-height: 1.8;
  color: var(--paper);
  padding-left: 14px;
  border-left: 2px solid var(--mint);
}

.page-about .origin__body p {
  font-size: .95rem;
  line-height: 1.8;
  color: var(--ink-text);
}

.page-about .origin__specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  margin: 6px 0 0;
  background: var(--line);
  border: 1px solid var(--line);
}

.page-about .origin__spec {
  padding: 12px 14px;
  background: rgba(11, 15, 14, .72);
}

.page-about .origin__spec dt {
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--mint);
}

.page-about .origin__spec dd {
  margin: 4px 0 0;
  font-size: .76rem;
  line-height: 1.5;
  color: var(--ink-text-dim);
}

/* ---------- 时间轴 ---------- */
.page-about .track {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-about .track::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, var(--mint), var(--line) 42%, var(--line));
}

.page-about .track__item {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: clamp(14px, 3vw, 28px);
  padding-bottom: clamp(22px, 3.5vw, 34px);
}

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

.page-about .track__index {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-strong);
  background: var(--ink-950);
  color: var(--mint);
  font-size: .74rem;
  letter-spacing: .08em;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}

.page-about .track__item:hover .track__index {
  background: var(--mint);
  border-color: var(--mint);
  color: var(--ink-950);
}

.page-about .track__body {
  padding-top: 6px;
}

.page-about .track__title {
  margin-bottom: 6px;
}

.page-about .track__text {
  max-width: 58ch;
  font-size: .93rem;
  line-height: 1.8;
  color: var(--ink-text);
}

/* ---------- 团队 ---------- */
.page-about .crew {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line-strong);
}

.page-about .crew__card {
  position: relative;
  display: grid;
  gap: 6px;
  padding: clamp(18px, 3vw, 28px);
  background: rgba(11, 15, 14, .86);
  transition: background-color .3s var(--ease), transform .3s var(--ease);
}

.page-about .crew__card::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 2px;
  background: var(--orange);
  transition: width .35s var(--ease);
}

.page-about .crew__card:hover,
.page-about .crew__card:focus-within {
  background: rgba(18, 48, 42, .92);
}

.page-about .crew__card:hover::after,
.page-about .crew__card:focus-within::after {
  width: 100%;
}

.page-about .crew__code {
  font-size: .68rem;
  letter-spacing: .14em;
  color: var(--ink-text-dim);
}

.page-about .crew__meta {
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--mint);
}

.page-about .crew__desc {
  font-size: .9rem;
  line-height: 1.78;
  color: var(--ink-text);
}

.page-about .team-media {
  margin: clamp(24px, 4vw, 40px) 0 0;
}

.page-about .team-media__cap {
  margin-top: 10px;
  font-size: .7rem;
  letter-spacing: .1em;
  color: var(--ink-text-dim);
}

/* ---------- 流程 ---------- */
.page-about .flow {
  display: grid;
  gap: var(--about-gap);
}

.page-about .flow__media {
  margin: 0;
}

.page-about .flow__cap {
  margin-top: 10px;
  font-size: .7rem;
  letter-spacing: .1em;
  color: var(--ink-text-dim);
}

.page-about .flow__list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-about .flow__step {
  display: grid;
  gap: 6px;
  padding: 18px 0;
  border-top: 1px dashed var(--line-strong);
}

.page-about .flow__step:last-child {
  border-bottom: 1px dashed var(--line-strong);
}

.page-about .flow__no {
  font-size: .68rem;
  letter-spacing: .14em;
  color: var(--violet);
}

.page-about .flow__text {
  font-size: .92rem;
  line-height: 1.78;
  color: var(--ink-text);
  max-width: 52ch;
}

/* ---------- 认证 ---------- */
.page-about .cert {
  display: grid;
  gap: var(--about-gap);
  align-items: start;
}

.page-about .cert__badge {
  display: grid;
  justify-items: start;
  gap: 12px;
  padding: clamp(20px, 3vw, 30px);
  border: 3px solid var(--mint);
  background: rgba(61, 242, 208, .06);
  box-shadow: var(--shadow-brut);
  color: var(--mint);
}

.page-about .cert__badge-text {
  font-size: .72rem;
  letter-spacing: .16em;
  color: var(--paper);
}

.page-about .cert__list {
  margin: 0;
  display: grid;
  gap: 0;
}

.page-about .cert__item {
  display: grid;
  gap: 4px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.page-about .cert__item:last-child {
  border-bottom: 1px solid var(--line);
}

.page-about .cert__key {
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .1em;
  color: var(--mint);
}

.page-about .cert__val {
  margin: 0;
  font-size: .92rem;
  line-height: 1.78;
  color: var(--ink-text);
  max-width: 58ch;
}

/* ---------- 合作 ---------- */
.page-about .ally {
  display: grid;
  gap: var(--about-gap);
}

.page-about .ally__big {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: clamp(20px, 3vw, 30px);
  border-left: 3px solid var(--orange);
  background: linear-gradient(100deg, rgba(255, 107, 44, .10), transparent 72%);
}

.page-about .ally__num {
  font-family: var(--font-mono);
  font-size: clamp(3rem, 9vw, 5rem);
  line-height: .92;
  font-weight: 500;
  letter-spacing: -.05em;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}

.page-about .ally__plus {
  color: var(--orange);
}

.page-about .ally__cap {
  font-size: .88rem;
  line-height: 1.7;
  color: var(--ink-text);
  max-width: 34ch;
}

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

.page-about .ally__item {
  display: grid;
  gap: 6px;
  padding: clamp(16px, 2.6vw, 22px);
  background: rgba(11, 15, 14, .84);
}

.page-about .ally__item-title {
  font-size: .96rem;
  color: var(--paper);
}

.page-about .ally__item-text {
  font-size: .88rem;
  line-height: 1.75;
  color: var(--ink-text);
}

.page-about .ally__item--flag {
  background: rgba(155, 140, 255, .10);
}

.page-about .ally__item--flag .ally__item-title {
  color: var(--violet);
}

/* ---------- 更新节奏 ---------- */
.page-about .rhythm {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line-strong);
}

.page-about .rhythm__col {
  display: grid;
  gap: 6px;
  padding: clamp(18px, 3vw, 26px);
  background: rgba(11, 15, 14, .84);
}

.page-about .rhythm__k {
  font-size: .68rem;
  letter-spacing: .16em;
  color: var(--ink-text-dim);
}

.page-about .rhythm__v {
  font-family: var(--font-mono);
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  letter-spacing: -.01em;
  color: var(--mint);
  font-variant-numeric: tabular-nums;
}

.page-about .rhythm__title {
  font-size: .98rem;
}

.page-about .rhythm__text {
  font-size: .88rem;
  line-height: 1.75;
  color: var(--ink-text);
}

.page-about .rhythm__col--week .rhythm__v {
  color: var(--orange);
}

.page-about .rhythm__col--month .rhythm__v {
  color: var(--violet);
}

.page-about .rhythm__foot {
  margin-top: clamp(20px, 3vw, 30px);
  padding-top: 16px;
  border-top: 1px dashed var(--line-strong);
  font-size: .9rem;
  line-height: 1.8;
  color: var(--ink-text-dim);
  max-width: 62ch;
}

/* ---------- 收尾 ---------- */
.page-about .about-cta__box {
  display: grid;
  gap: clamp(22px, 3.5vw, 36px);
  padding: clamp(24px, 4vw, 44px);
  border: 3px solid var(--line-strong);
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(255, 107, 44, .14), transparent 62%),
    rgba(11, 15, 14, .9);
  box-shadow: var(--shadow-brut-lg);
}

.page-about .about-cta__text {
  display: grid;
  gap: 12px;
}

.page-about .about-cta__lede {
  font-size: .95rem;
  line-height: 1.8;
  color: var(--ink-text);
  max-width: 56ch;
}

.page-about .about-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-about .about-cta__actions .btn {
  flex: 1 1 190px;
  text-align: center;
}

/* ---------- 桌面 ---------- */
@media (min-width: 700px) {
  .page-about .about-tape {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

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

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

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

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

  .page-about .origin {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    align-items: start;
  }

  .page-about .origin__media {
    position: sticky;
    top: calc(var(--header-h) + 28px);
  }

  .page-about .flow {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    align-items: start;
  }

  .page-about .cert {
    grid-template-columns: minmax(0, 3fr) minmax(0, 8fr);
  }

  .page-about .cert__badge {
    position: sticky;
    top: calc(var(--header-h) + 28px);
  }

  .page-about .ally {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    align-items: start;
  }

  .page-about .about-cta__box {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: end;
  }

  .page-about .about-cta__actions {
    justify-content: flex-end;
  }

  .page-about .track__item {
    grid-template-columns: 40px minmax(0, 1fr);
  }
}

@media (min-width: 1100px) {
  .page-about .track::before {
    left: 23px;
  }

  .page-about .track__index {
    width: 46px;
    height: 46px;
  }

  .page-about .track__item {
    grid-template-columns: 46px minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .crew__card,
  .page-about .crew__card::after,
  .page-about .track__index,
  .page-about .crumb-link {
    transition: none;
  }
}


<main id="main-content" class="page-about">
  <section class="about-hero" aria-labelledby="about-title">
    <div class="shell">
      <nav class="crumbs" aria-label="页面路径">
        <ol class="crumb-list">
          <li><a class="crumb-link" href="/">首页</a></li>
          <li class="crumb-sep" aria-hidden="true">/</li>
          <li><span class="crumb-current" aria-current="page">品牌文化</span></li>
        </ol>
      </nav>

      <div class="about-hero__head" data-reveal="1">
        <p class="eyebrow">品牌文化 · 运营与内容</p>
        <h1 id="about-title" class="display-title">一场比赛的<em>每一轮</em>，都有人先替你看清楚</h1>
        <p class="lede">中欧体育把中文用户的看球习惯放在最前面：赛事按轮次排好，指标按场次摊开，观赛记录按周末串起来。你打开目录就知道这一轮看什么，翻到面板就知道这场的数据该往哪儿读。</p>
      </div>

      <ul class="about-tape" data-reveal="2">
        <li class="about-tape__item">
          <span class="about-tape__num mono">72</span>
          <span class="about-tape__label">人团队，全职做内容与数据</span>
        </li>
        <li class="about-tape__item">
          <span class="about-tape__num mono">12</span>
          <span class="about-tape__label">个赛事大类，从足球到电竞</span>
        </li>
        <li class="about-tape__item">
          <span class="about-tape__num mono">86</span>
          <span class="about-tape__label">个联赛与杯赛收进目录</span>
        </li>
        <li class="about-tape__item">
          <span class="about-tape__num mono">180<span class="about-tape__unit">万</span></span>
          <span class="about-tape__label">中文用户在用网页与平板查看</span>
        </li>
        <li class="about-tape__item">
          <span class="about-tape__num mono">15<span class="about-tape__unit">分钟</span></span>
          <span class="about-tape__label">赛后比分与控球率完成同步</span>
        </li>
      </ul>
    </div>
  </section>

  <section class="section" id="origin" aria-labelledby="origin-title">
    <div class="shell">
      <header class="section-head">
        <p class="eyebrow">01 — 品牌起点与定位</p>
        <h2 id="origin-title">从查一个比分，到排出一整季的节奏</h2>
      </header>

      <div class="origin">
        <figure class="origin__media" data-reveal="1">
          <div class="media-frame media-frame--wide">
            <img src="{zhanqunpic:h:900w:1400}" width="1400" height="900" alt="夜间球场看台的灯光与阶梯线条层层向远处收拢">
          </div>
          <figcaption class="origin__cap">夜间看台 · 中文用户的观赛现场</figcaption>
        </figure>

        <div class="origin__body" data-reveal="2">
          <p class="origin__lead">最早大家查赛事，只想知道今晚几点开球。慢慢地，需求变具体了：这一轮哪几场值得连着看完，两场之间隔多久，平板横过来能不能一次看全整块面板。</p>
          <p>中欧体育顺着这条线往前做。先把赛事按大类、联赛、轮次、场次层层排布，再给每场比赛配齐控球率之外的那一组指标，最后把整季的观赛记录收进个人中心的第二栏。目录和面板长成同一套结构，看球时不用在几个页面之间来回找入口。</p>
          <p>取舍始终站在中文读者这一侧：标题用中文，指标叫中文名，轮次编号和比分用等宽字排好，让数字在屏幕上一眼就能对齐。</p>

          <dl class="origin__specs">
            <div class="origin__spec">
              <dt>v3.2</dt>
              <dd>赛事内容目录当前版本</dd>
            </div>
            <div class="origin__spec">
              <dt>v2.6</dt>
              <dd>平板控球率面板版本</dd>
            </div>
            <div class="origin__spec">
              <dt>v1.8</dt>
              <dd>周末连看记录版本</dd>
            </div>
          </dl>
        </div>
      </div>
    </div>
  </section>

  <section class="section" id="milestones" aria-labelledby="milestones-title">
    <div class="shell">
      <header class="section-head">
        <p class="eyebrow">02 — 一路走来的关键节点</p>
        <h2 id="milestones-title">每一次改版，都对应着一个真实的使用痛点</h2>
      </header>

      <ol class="track">
        <li class="track__item" data-reveal="1">
          <span class="track__index mono">01</span>
          <div class="track__body">
            <h3 class="track__title">先把赛事整理成中文能读的样子</h3>
            <p class="track__text">起步阶段只做一件事：把散落各处的中文赛程、比分和球队名对齐成统一叫法，让读者不必在几种译名之间猜。</p>
          </div>
        </li>
        <li class="track__item" data-reveal="2">
          <span class="track__index mono">02</span>
          <div class="track__body">
            <h3 class="track__title">四级目录定型：大类、联赛、轮次、场次</h3>
            <p class="track__text">赛事越收越多，平铺列表读不动了。结构改成四级折叠，单轮最多展示 48 场赛事摘要，翻目录像翻一张赛程表。</p>
          </div>
        </li>
        <li class="track__item" data-reveal="3">
          <span class="track__index mono">03</span>
          <div class="track__body">
            <h3 class="track__title">控球率面板上线，指标补齐到 18 项</h3>
            <p class="track__text">只看比分解释不了一场球的走势。射门、射正、角球、危险进攻、传球成功率陆续进入面板，赛后 15 分钟内完成同步。</p>
          </div>
        </li>
        <li class="track__item" data-reveal="4">
          <span class="track__index mono">04</span>
          <div class="track__body">
            <h3 class="track__title">平板与手机统一到同一套信息结构</h3>
            <p class="track__text">平板横屏看数据、手机竖屏看目录，两种姿势需要的排布不一样。内容顺序固定下来，只让布局跟着屏幕变化。</p>
          </div>
        </li>
        <li class="track__item" data-reveal="5">
          <span class="track__index mono">05</span>
          <div class="track__body">
            <h3 class="track__title">品牌认证专区建立，入口固定在顶部</h3>
            <p class="track__text">中文版页面有了明确的识别方式：认证标识、常驻入口、统一目录和面板结构一起出现，读者一进页面就能确认自己在哪儿。</p>
          </div>
        </li>
      </ol>
    </div>
  </section>

  <section class="section" id="team" aria-labelledby="team-title">
    <div class="shell">
      <header class="section-head">
        <p class="eyebrow">03 — 内容编辑与数据工程团队</p>
        <h2 id="team-title">72 个人，四条分工线，守着一份目录和一块面板</h2>
        <p class="section-note">团队分成专题编辑、数据标注与校对、视觉设计、用户支持四个小组。谁写、谁验、谁排版、谁回消息，职责都写在流程里。</p>
      </header>

      <div class="crew">
        <article class="crew__card">
          <p class="crew__code">组别 01</p>
          <h3 class="crew__name">专题编辑组</h3>
          <p class="crew__meta">18 人</p>
          <p class="crew__desc">负责轮次观察、控球率解读和周末连看指南。每天产出轮次快讯，把一场比赛的数据讲成一段能读下去的话。</p>
        </article>
        <article class="crew__card">
          <p class="crew__code">组别 02</p>
          <h3 class="crew__name">数据标注与校对组</h3>
          <p class="crew__meta">26 人</p>
          <p class="crew__desc">赛后面板逐项校验，异常数据回头复核。控球率、射门和传球成功率这类容易被读错的指标，是他们盯得最紧的部分。</p>
        </article>
        <article class="crew__card">
          <p class="crew__code">组别 03</p>
          <h3 class="crew__name">视觉设计组</h3>
          <p class="crew__meta">图表与版式</p>
          <p class="crew__desc">决定一个数字在屏幕上该多大、刻度线该多密。平板横屏和手机竖屏的阅读顺序，由他们排定。</p>
        </article>
        <article class="crew__card">
          <p class="crew__code">组别 04</p>
          <h3 class="crew__name">用户支持组</h3>
          <p class="crew__meta">工作日响应</p>
          <p class="crew__desc">处理入口找不到、面板对不上、连看记录缺失这类具体问题，也把高频反馈整理给前面三个组。</p>
        </article>
      </div>

      <figure class="team-media" data-reveal="2">
        <div class="media-frame media-frame--wide">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="平板设备上的赛事数据面板局部与叠放在旁的记录笔记" loading="lazy" decoding="async">
        </div>
        <figcaption class="team-media__cap">赛后校验现场 · 面板指标与记录笔记对照</figcaption>
      </figure>
    </div>
  </section>

  <section class="section" id="flow" aria-labelledby="flow-title">
    <div class="shell">
      <header class="section-head">
        <p class="eyebrow">04 — 轮次化内容生产流程</p>
        <h2 id="flow-title">一轮赛事从排目录到发解读，走四道工序</h2>
      </header>

      <div class="flow">
        <figure class="flow__media" data-reveal="1">
          <div class="media-frame media-frame--tall">
            <img src="{zhanqunpic:h:1200w:1000}" width="1000" height="1200" alt="球场边线与草皮纹理构成对角线的局部俯拍" loading="lazy" decoding="async">
          </div>
          <figcaption class="flow__cap">轮次节奏 · 从开球到复盘</figcaption>
        </figure>

        <ol class="flow__list" data-reveal="2">
          <li class="flow__step">
            <span class="flow__no">工序 01</span>
            <h3 class="flow__title">赛前把目录编排好</h3>
            <p class="flow__text">按赛事大类、联赛、轮次、场次四级落位，标注开球时段与连看衔接，单轮最多列出 48 场摘要供你挑选。</p>
          </li>
          <li class="flow__step">
            <span class="flow__no">工序 02</span>
            <h3 class="flow__title">赛后 15 分钟内同步面板</h3>
            <p class="flow__text">比分、控球率与其余 17 项指标同步刷新，数据标注与校对组随后逐项复核，发现异常当天修正。</p>
          </li>
          <li class="flow__step">
            <span class="flow__no">工序 03</span>
            <h3 class="flow__title">把数据翻译成能读的解读</h3>
            <p class="flow__text">专题编辑组从控球率曲线、射正次数和危险进攻里挑出看点，写成轮次观察与周末连看指南，赛季推进时不断档。</p>
          </li>
          <li class="flow__step">
            <span class="flow__no">工序 04</span>
            <h3 class="flow__title">每月发一次版本说明</h3>
            <p class="flow__text">目录、面板和连看记录改了什么、为什么改、对查看方式有什么影响，都写成一份说明放到专题中心。</p>
          </li>
        </ol>
      </div>
    </div>
  </section>

  <section class="section" id="certification" aria-labelledby="cert-title">
    <div class="shell">
      <header class="section-head">
        <p class="eyebrow">05 — 品牌认证专区标准</p>
        <h2 id="cert-title">怎么确认你打开的是中文版</h2>
        <p class="section-note">认证专区把几件事放在一起：标识、入口、目录和面板。四样同时对上，你就找对地方了。</p>
      </header>

      <div class="cert">
        <div class="cert__badge" aria-hidden="true">
          <svg viewBox="0 0 120 120" width="120" height="120" role="presentation" focusable="false">
            <circle cx="60" cy="60" r="54" fill="none" stroke="currentColor" stroke-width="1.5"/>
            <circle cx="60" cy="60" r="40" fill="none" stroke="currentColor" stroke-width="1" stroke-dasharray="3 5"/>
            <path d="M40 60.5 53 73l27-29" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="square"/>
            <path d="M60 6v10M60 104v10M6 60h10M104 60h10" stroke="currentColor" stroke-width="1.5"/>
          </svg>
          <p class="cert__badge-text">CN 认证专区</p>
        </div>

        <dl class="cert__list">
          <div class="cert__item">
            <dt class="cert__key">认证标识</dt>
            <dd class="cert__val">专区展示认证标识与说明，配合统一的中文命名，帮你在搜索结果里分辨官方版本。</dd>
          </div>
          <div class="cert__item">
            <dt class="cert__key">固定入口</dt>
            <dd class="cert__val">每页顶部右端常驻「赛事栏目最新」，点一下直达中文版赛事内容目录，不用逐级翻找。</dd>
          </div>
          <div class="cert__item">
            <dt class="cert__key">中文目录结构</dt>
            <dd class="cert__val">12 个赛事大类、86 个联赛与杯赛、四级折叠的统一排布，换任何终端都是同一套读法。</dd>
          </div>
          <div class="cert__item">
            <dt class="cert__key">面板结构</dt>
            <dd class="cert__val">控球率面板固定 18 项指标，个人中心第二栏固定放平板控球率视图与周末连看记录。</dd>
          </div>
          <div class="cert__item">
            <dt class="cert__key">版本索引</dt>
            <dd class="cert__val">目录 v3.2、面板 v2.6、连看记录 v1.8，版本号可在专题中心的版本说明里对照。</dd>
          </div>
        </dl>
      </div>
    </div>
  </section>

  <section class="section" id="partners" aria-labelledby="partners-title">
    <div class="shell">
      <header class="section-head">
        <p class="eyebrow">06 — 合作生态与行业认可</p>
        <h2 id="partners-title">数据、内容、设备，三条合作线并行</h2>
      </header>

      <div class="ally">
        <div class="ally__big" data-reveal="1">
          <p class="ally__num">30<span class="ally__plus">+</span></p>
          <p class="ally__cap">家赛事数据服务商、内容创作团队与终端设备评测机构与我们长期协作</p>
        </div>

        <ul class="ally__list" data-reveal="2">
          <li class="ally__item">
            <h3 class="ally__item-title">赛事数据服务商</h3>
            <p class="ally__item-text">接口协同与字段对齐，让轮次比分和面板指标在赛后按时到位，你读到的是同一套数。</p>
          </li>
          <li class="ally__item">
            <h3 class="ally__item-title">内容创作团队</h3>
            <p class="ally__item-text">联合产出轮次观察与周末连看指南，赛季密集阶段也能保持每天有内容更新。</p>
          </li>
          <li class="ally__item">
            <h3 class="ally__item-title">终端设备评测机构</h3>
            <p class="ally__item-text">在平板与手机上实测目录折叠、面板横竖屏切换和固定入口的触达，反馈直接进下一版。</p>
          </li>
          <li class="ally__item ally__item--flag">
            <h3 class="ally__item-title">行业认可</h3>
            <p class="ally__item-text">连续三年入选体育数据内容创新案例库，轮次化目录与面板解读被同行反复引用。</p>
          </li>
        </ul>
      </div>
    </div>
  </section>

  <section class="section" id="rhythm" aria-labelledby="rhythm-title">
    <div class="shell">
      <header class="section-head">
        <p class="eyebrow">07 — 服务覆盖与更新节奏</p>
        <h2 id="rhythm-title">每天、每周、每月，各有各的更新</h2>
      </header>

      <div class="rhythm">
        <article class="rhythm__col rhythm__col--day">
          <p class="rhythm__k">每日</p>
          <p class="rhythm__v">9:00 – 23:00</p>
          <h3 class="rhythm__title">轮次快讯滚动发布</h3>
          <p class="rhythm__text">开球前更新目录，赛后 15 分钟内补齐比分与面板，夜间比赛也不会断档。</p>
        </article>
        <article class="rhythm__col rhythm__col--week">
          <p class="rhythm__k">每周一</p>
          <p class="rhythm__v">周末连看榜</p>
          <h3 class="rhythm__title">最近 12 个周末的清单</h3>
          <p class="rhythm__text">把两场之间的衔接时段、值得回看的面板和连看记录整理成一页，周末开赛前就能排好。</p>
        </article>
        <article class="rhythm__col rhythm__col--month">
          <p class="rhythm__k">每月</p>
          <p class="rhythm__v">版本说明</p>
          <h3 class="rhythm__title">面板与目录的改动清单</h3>
          <p class="rhythm__text">改了什么、影响哪些查看方式，写清楚再上线，平板和手机用户同步适配。</p>
        </article>
      </div>

      <p class="rhythm__foot">网页、平板、手机三端保持同一套信息结构，横屏看面板、竖屏看目录，切换设备不用重新熟悉一遍。</p>
    </div>
  </section>

  <section class="section about-cta" id="start" aria-labelledby="cta-title">
    <div class="shell">
      <div class="about-cta__box">
        <div class="about-cta__text">
          <p class="eyebrow">开始使用</p>
          <h2 id="cta-title">今天这一轮，入口就在页面顶部</h2>
          <p class="about-cta__lede">想直接看赛事目录，从固定入口进；想先弄懂面板怎么读，翻教程；有具体问题，把截图和轮次编号一起发给我们。</p>
        </div>
        <div class="about-cta__actions">
          <a class="btn btn--primary" href="/catalog/">打开赛事内容目录</a>
          <a class="btn btn--ghost" href="/topics/">看专题解读</a>
          <a class="btn btn--quiet" href="/tutorial/">查操作教程</a>
          <a class="btn btn--quiet" href="/find-us/">联系客服</a>
        </div>
      </div>
    </div>
  </section>
</main>

.page-about {
  --about-gap: clamp(16px, 3vw, 32px);
  display: block;
}

.page-about h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.7rem, 4.2vw, 2.9rem);
  line-height: 1.16;
  letter-spacing: -.015em;
  color: var(--paper);
}

.page-about h3 {
  margin: 0;
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--paper);
}

.page-about p {
  margin: 0;
}

/* 面包屑 */
.page-about .crumbs {
  margin-bottom: clamp(18px, 3vw, 30px);
}

.page-about .crumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
}

.page-about .crumb-link {
  color: var(--ink-text-dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}

.page-about .crumb-link:hover,
.page-about .crumb-link:focus-visible {
  color: var(--mint);
  border-color: var(--mint);
}

.page-about .crumb-sep {
  color: var(--line-strong);
}

.page-about .crumb-current {
  color: var(--silver);
}

/* 首屏 */
.page-about .about-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 4vw, 40px) 0 clamp(42px, 7vw, 80px);
  border-bottom: 1px solid var(--line-strong);
  background:
    radial-gradient(130% 100% at 88% -12%, rgba(61, 242, 208, .14), transparent 60%),
    radial-gradient(90% 80% at 6% 110%, rgba(155, 140, 255, .10), transparent 62%),
    linear-gradient(180deg, rgba(18, 48, 42, .58), rgba(5, 26, 21, 0) 74%);
}

.page-about .about-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12px;
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px 22px);
  opacity: .5;
  pointer-events: none;
}

.page-about .about-hero__head {
  display: grid;
  gap: clamp(12px, 2vw, 20px);
  max-width: 56rem;
}

.page-about .about-hero .eyebrow {
  color: var(--mint);
}

.page-about .display-title {
  max-width: 20ch;
  margin: 0;
}

.page-about .display-title em {
  font-style: normal;
  color: var(--mint);
}

.page-about .about-hero .lede {
  max-width: 56ch;
  color: var(--ink-text);
}

.page-about .about-tape {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: clamp(28px, 4vw, 44px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-strong);
}

.page-about .about-tape__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 12px 12px;
  border-bottom: 1px solid var(--line);
}

.page-about .about-tape__item:first-child {
  padding-left: 0;
}

.page-about .about-tape__num {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -.03em;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}

.page-about .about-tape__unit {
  margin-left: 2px;
  font-size: .5em;
  letter-spacing: .02em;
  color: var(--mint);
}

.page-about .about-tape__label {
  font-size: .76rem;
  line-height: 1.5;
  color: var(--ink-text-dim);
}

/* 区块通用 */
.page-about .section {
  padding: clamp(44px, 7vw, 92px) 0;
}

.page-about .section + .section {
  border-top: 1px solid var(--line);
}

.page-about .section-head {
  display: grid;
  gap: 12px;
  max-width: 52rem;
  margin-bottom: clamp(24px, 4vw, 44px);
}

.page-about .section-note {
  max-width: 60ch;
  font-size: .95rem;
  line-height: 1.75;
  color: var(--ink-text);
}

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

.page-about .media-frame img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  filter: saturate(.9) contrast(1.05);
}

/* 起点 */
.page-about .origin {
  display: grid;
  gap: var(--about-gap);
}

.page-about .origin__media {
  margin: 0;
}

.page-about .origin__cap {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  color: var(--ink-text-dim);
}

.page-about .origin__body {
  display: grid;
  gap: clamp(14px, 2vw, 18px);
  align-content: start;
}

.page-about .origin__lead {
  padding-left: 14px;
  border-left: 2px solid var(--mint);
  font-size: clamp(1rem, 2vw, 1.12rem);
  line-height: 1.8;
  color: var(--paper);
}

.page-about .origin__body p {
  font-size: .95rem;
  line-height: 1.8;
  color: var(--ink-text);
}

.page-about .origin__specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  margin: 6px 0 0;
  background: var(--line);
  border: 1px solid var(--line);
}

.page-about .origin__spec {
  padding: 12px 14px;
  background: rgba(11, 15, 14, .72);
}

.page-about .origin__spec dt {
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--mint);
}

.page-about .origin__spec dd {
  margin: 4px 0 0;
  font-size: .76rem;
  line-height: 1.5;
  color: var(--ink-text-dim);
}

/* 时间轴 */
.page-about .track {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-about .track::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, var(--mint), var(--line) 42%, var(--line));
}

.page-about .track__item {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: clamp(14px, 3vw, 28px);
  padding-bottom: clamp(22px, 3.5vw, 34px);
}

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

.page-about .track__index {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-strong);
  background: var(--ink-950);
  color: var(--mint);
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .08em;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}

.page-about .track__item:hover .track__index {
  background: var(--mint);
  border-color: var(--mint);
  color: var(--ink-950);
}

.page-about .track__body {
  padding-top: 6px;
}

.page-about .track__title {
  margin-bottom: 6px;
}

.page-about .track__text {
  max-width: 58ch;
  font-size: .93rem;
  line-height: 1.8;
  color: var(--ink-text);
}

/* 团队 */
.page-about .crew {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line-strong);
}

.page-about .crew__card {
  position: relative;
  display: grid;
  gap: 6px;
  padding: clamp(18px, 3vw, 28px);
  background: rgba(11, 15, 14, .86);
  transition: background-color .3s var(--ease);
}

.page-about .crew__card::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 2px;
  background: var(--orange);
  transition: width .35s var(--ease);
}

.page-about .crew__card:hover,
.page-about .crew__card:focus-within {
  background: rgba(18, 48, 42, .92);
}

.page-about .crew__card:hover::after,
.page-about .crew__card:focus-within::after {
  width: 100%;
}

.page-about .crew__code {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  color: var(--ink-text-dim);
}

.page-about .crew__meta {
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--mint);
}

.page-about .crew__desc {
  font-size: .9rem;
  line-height: 1.78;
  color: var(--ink-text);
}

.page-about .team-media {
  margin: clamp(24px, 4vw, 40px) 0 0;
}

.page-about .team-media__cap {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  color: var(--ink-text-dim);
}

/* 流程 */
.page-about .flow {
  display: grid;
  gap: var(--about-gap);
}

.page-about .flow__media {
  margin: 0;
}

.page-about .flow__cap {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  color: var(--ink-text-dim);
}

.page-about .flow__list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-about .flow__step {
  display: grid;
  gap: 6px;
  padding: 18px 0;
  border-top: 1px dashed var(--line-strong);
}

.page-about .flow__step:last-child {
  border-bottom: 1px dashed var(--line-strong);
}

.page-about .flow__no {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  color: var(--violet);
}

.page-about .flow__text {
  max-width: 52ch;
  font-size: .92rem;
  line-height: 1.78;
  color: var(--ink-text);
}

/* 认证 */
.page-about .cert {
  display: grid;
  gap: var(--about-gap);
  align-items: start;
}

.page-about .cert__badge {
  display: grid;
  justify-items: start;
  gap: 12px;
  padding: clamp(20px, 3vw, 30px);
  border: 3px solid var(--mint);
  background: rgba(61, 242, 208, .06);
  box-shadow: var(--shadow-brut);
  color: var(--mint);
}

.page-about .cert__badge-text {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .16em;
  color: var(--paper);
}

.page-about .cert__list {
  display: grid;
  gap: 0;
  margin: 0;
}

.page-about .cert__item {
  display: grid;
  gap: 4px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.page-about .cert__item:last-child {
  border-bottom: 1px solid var(--line);
}

.page-about .cert__key {
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .1em;
  color: var(--mint);
}

.page-about .cert__val {
  max-width: 58ch;
  margin: 0;
  font-size: .92rem;
  line-height: 1.78;
  color: var(--ink-text);
}

/* 合作 */
.page-about .ally {
  display: grid;
  gap: var(--about-gap);
}

.page-about .ally__big {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: clamp(20px, 3vw, 30px);
  border-left: 3px solid var(--orange);
  background: linear-gradient(100deg, rgba(255, 107, 44, .10), transparent 72%);
}

.page-about .ally__num {
  font-family: var(--font-mono);
  font-size: clamp(3rem, 9vw, 5rem);
  line-height: .92;
  font-weight: 500;
  letter-spacing: -.05em;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}

.page-about .ally__plus {
  color: var(--orange);
}

.page-about .ally__cap {
  max-width: 34ch;
  font-size: .88rem;
  line-height: 1.7;
  color: var(--ink-text);
}

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

.page-about .ally__item {
  display: grid;
  gap: 6px;
  padding: clamp(16px, 2.6vw, 22px);
  background: rgba(11, 15, 14, .84);
}

.page-about .ally__item-title {
  font-size: .96rem;
  color: var(--paper);
}

.page-about .ally__item-text {
  font-size: .88rem;
  line-height: 1.75;
  color: var(--ink-text);
}

.page-about .ally__item--flag {
  background: rgba(155, 140, 255, .10);
}

.page-about .ally__item--flag .ally__item-title {
  color: var(--violet);
}

/* 更新节奏 */
.page-about .rhythm {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line-strong);
}

.page-about .rhythm__col {
  display: grid;
  gap: 6px;
  padding: clamp(18px, 3vw, 26px);
  background: rgba(11, 15, 14, .84);
}

.page-about .rhythm__k {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .16em;
  color: var(--ink-text-dim);
}

.page-about .rhythm__v {
  font-family: var(--font-mono);
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  letter-spacing: -.01em;
  color: var(--mint);
  font-variant-numeric: tabular-nums;
}

.page-about .rhythm__title {
  font-size: .98rem;
}

.page-about .rhythm__text {
  font-size: .88rem;
  line-height: 1.75;
  color: var(--ink-text);
}

.page-about .rhythm__col--week .rhythm__v {
  color: var(--orange);
}

.page-about .rhythm__col--month .rhythm__v {
  color: var(--violet);
}

.page-about .rhythm__foot {
  max-width: 62ch;
  margin-top: clamp(20px, 3vw, 30px);
  padding-top: 16px;
  border-top: 1px dashed var(--line-strong);
  font-size: .9rem;
  line-height: 1.8;
  color: var(--ink-text-dim);
}

/* 收尾 */
.page-about .about-cta__box {
  display: grid;
  gap: clamp(22px, 3.5vw, 36px);
  padding: clamp(24px, 4vw, 44px);
  border: 3px solid var(--line-strong);
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(255, 107, 44, .14), transparent 62%),
    rgba(11, 15, 14, .9);
  box-shadow: var(--shadow-brut-lg);
}

.page-about .about-cta__text {
  display: grid;
  gap: 12px;
}

.page-about .about-cta__lede {
  max-width: 56ch;
  font-size: .95rem;
  line-height: 1.8;
  color: var(--ink-text);
}

.page-about .about-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-about .about-cta__actions .btn {
  flex: 1 1 190px;
  text-align: center;
}

/* 响应式 */
@media (min-width: 700px) {
  .page-about .about-tape {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

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

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

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

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

  .page-about .origin {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    align-items: start;
  }

  .page-about .origin__media {
    position: sticky;
    top: calc(var(--header-h) + 28px);
  }

  .page-about .flow {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    align-items: start;
  }

  .page-about .cert {
    grid-template-columns: minmax(0, 3fr) minmax(0, 8fr);
  }

  .page-about .cert__badge {
    position: sticky;
    top: calc(var(--header-h) + 28px);
  }

  .page-about .ally {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    align-items: start;
  }

  .page-about .about-cta__box {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: end;
  }

  .page-about .about-cta__actions {
    justify-content: flex-end;
  }
}

@media (min-width: 1100px) {
  .page-about .track::before {
    left: 23px;
  }

  .page-about .track__index {
    width: 46px;
    height: 46px;
  }

  .page-about .track__item {
    grid-template-columns: 46px minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .crew__card,
  .page-about .crew__card::after,
  .page-about .track__index,
  .page-about .crumb-link {
    transition: none;
  }
}