.page-about {
  --about-gap: clamp(22px, 3vw, 40px);
  --about-cut: 18px;
  --about-axis: 2px;
  --about-node: 12px;
  background: var(--c-night);
  color: var(--c-body);
  padding-bottom: clamp(56px, 8vw, 110px);
}

/* ---------- Hero ---------- */
.page-about .about-hero {
  position: relative;
  padding: clamp(28px, 5vw, 56px) 0 clamp(40px, 6vw, 76px);
  border-bottom: 1px solid var(--c-line);
  background:
    radial-gradient(120% 90% at 88% 0%, rgba(108, 123, 255, 0.14), transparent 58%),
    radial-gradient(90% 70% at 0% 100%, rgba(255, 122, 51, 0.1), transparent 62%),
    var(--c-night);
}

.page-about .about-hero__grid {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  margin-top: clamp(22px, 3.4vw, 44px);
}

.page-about .about-hero__lead {
  max-width: 42rem;
}

.page-about .about-hero__lead .display-1 {
  margin: 14px 0 20px;
  color: var(--c-paper);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: 0.015em;
}

.page-about .about-hero__lead .lede {
  color: var(--c-body);
  max-width: 38rem;
}

.page-about .about-hero__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px;
  margin-top: clamp(26px, 3.4vw, 40px);
  background: var(--c-line);
  border: 1px solid var(--c-line);
}

.page-about .about-hero__stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  background: var(--c-night);
}

.page-about .about-hero__num {
  color: var(--c-orange);
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  line-height: 1.1;
}

.page-about .about-hero__label {
  color: var(--c-body);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
}

.page-about .about-hero__visual {
  position: relative;
  border: 1px solid var(--c-line);
  clip-path: polygon(0 0, calc(100% - var(--about-cut)) 0, 100% var(--about-cut), 100% 100%, 0 100%);
  background: var(--c-panel);
  overflow: hidden;
}

.page-about .about-hero__svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
}

/* ---------- Body shell ---------- */
.page-about .about-body {
  display: grid;
  gap: var(--about-gap);
  padding-top: clamp(40px, 6vw, 80px);
}

.page-about .about-index {
  display: none;
}

.page-about .about-index__title {
  margin: 0 0 14px;
  color: var(--c-cyan);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
}

.page-about .about-index .index-link {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  color: var(--c-body);
  font-size: 0.86rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.page-about .about-index .index-link .mono {
  color: var(--c-line);
  font-size: 0.7rem;
}

.page-about .about-index .index-link:hover,
.page-about .about-index .index-link:focus-visible {
  color: var(--c-paper);
  border-bottom-color: var(--c-orange);
}

.page-about .about-index .index-link.is-active {
  color: var(--c-orange);
  border-bottom-color: var(--c-orange);
}

.page-about .about-index .index-link.is-active .mono {
  color: var(--c-orange);
}

/* ---------- Sections ---------- */
.page-about .about-sec {
  padding-bottom: clamp(40px, 6vw, 76px);
  border-bottom: 1px solid var(--c-line);
}

.page-about .about-sec--last {
  border-bottom: 0;
  padding-bottom: 0;
}

.page-about .about-sec .section__head {
  margin-bottom: clamp(22px, 3vw, 36px);
}

.page-about .about-sec .section-title {
  color: var(--c-paper);
  font-weight: 500;
}

.page-about .about-sec .lede {
  margin-top: 12px;
  max-width: 46rem;
}

.page-about .about-sec__main p {
  margin: 0 0 1.05em;
}

.page-about .about-sec__main a {
  color: var(--c-violet);
  text-decoration: none;
  border-bottom: 1px solid rgba(108, 123, 255, 0.4);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.page-about .about-sec__main a:hover,
.page-about .about-sec__main a:focus-visible {
  color: var(--c-orange-soft);
  border-bottom-color: var(--c-orange-soft);
}

.page-about .about-sec__cols {
  display: grid;
  gap: clamp(24px, 3.4vw, 48px);
}

.page-about .about-notes {
  margin: 0;
  border-top: 1px solid var(--c-line);
}

.page-about .about-notes .data-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--c-line);
}

.page-about .about-notes .data-row__label {
  color: var(--c-body);
  font-size: 0.9rem;
}

.page-about .about-notes .data-row__value {
  margin: 0;
  color: var(--c-orange);
  font-size: 0.95rem;
  text-align: right;
}

/* ---------- Daily rhythm ---------- */
.page-about .about-daily {
  display: grid;
  gap: clamp(22px, 3vw, 40px);
}

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

.page-about .about-step {
  padding: 18px 20px;
  background: var(--c-night);
  transition: background 0.2s var(--ease);
}

.page-about .about-step:hover {
  background: var(--c-panel);
}

.page-about .about-step__no {
  display: block;
  color: var(--c-cyan);
  font-size: 0.84rem;
  letter-spacing: 0.06em;
}

.page-about .about-step__title {
  margin: 6px 0 6px;
  color: var(--c-paper);
  font-size: 1.05rem;
  font-weight: 600;
}

.page-about .about-step p {
  margin: 0;
  font-size: 0.95rem;
}

.page-about .about-checks {
  margin-top: clamp(28px, 4vw, 48px);
  padding: clamp(20px, 3vw, 32px);
  background: var(--c-panel);
  clip-path: polygon(0 0, calc(100% - var(--about-cut)) 0, 100% var(--about-cut), 100% 100%, 0 100%);
}

.page-about .about-checks__lead {
  margin: 0 0 16px;
  color: var(--c-paper);
  font-size: 1rem;
}

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

.page-about .about-checks__list li {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.95rem;
  line-height: 1.7;
}

.page-about .about-checks__list .tag {
  flex: none;
  margin-top: 1px;
}

/* ---------- Timeline ---------- */
.page-about .about-timeline {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 30px;
}

.page-about .about-timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 10px;
  bottom: 10px;
  width: var(--about-axis);
  background: linear-gradient(180deg, var(--c-cyan) 0%, var(--c-orange) 62%, var(--c-line) 100%);
}

.page-about .about-node {
  position: relative;
  padding: 0 0 clamp(26px, 3.6vw, 44px);
  outline: none;
}

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

.page-about .about-node__dot {
  position: absolute;
  left: -30px;
  top: 6px;
  width: var(--about-node);
  height: var(--about-node);
  border-radius: 50%;
  background: var(--c-night);
  border: 2px solid var(--c-cyan);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.page-about .about-node:hover .about-node__dot,
.page-about .about-node:focus-visible .about-node__dot,
.page-about .about-node:focus .about-node__dot {
  background: var(--c-orange);
  border-color: var(--c-orange);
  box-shadow: 0 0 0 4px rgba(255, 122, 51, 0.18);
}

.page-about .about-node__year {
  margin: 0;
  color: var(--c-cyan);
  font-size: 0.9rem;
  letter-spacing: 0.14em;
}

.page-about .about-node__title {
  margin: 6px 0 8px;
  color: var(--c-paper);
  font-size: 1.2rem;
  font-weight: 600;
}

.page-about .about-node__text {
  margin: 0;
  max-width: 44rem;
  font-size: 0.98rem;
}

.page-about .about-node__detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s var(--ease);
}

.page-about .about-node__detail > div {
  overflow: hidden;
}

.page-about .about-node__detail p {
  margin: 12px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--c-orange);
  color: var(--c-body);
  font-size: 0.92rem;
}

.page-about .about-node:hover .about-node__detail,
.page-about .about-node:focus .about-node__detail,
.page-about .about-node:focus-within .about-node__detail {
  grid-template-rows: 1fr;
}

.page-about .about-road__media {
  margin: clamp(30px, 4vw, 52px) 0 0;
}

/* ---------- Team bands ---------- */
.page-about .about-teams {
  display: grid;
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
}

.page-about .about-team {
  --w: 100%;
  position: relative;
  padding: 22px 22px 26px;
  background: var(--c-night);
  outline: none;
  transition: background 0.2s var(--ease);
}

.page-about .about-team--edit { --w: 100%; }
.page-about .about-team--tech { --w: 61%; }
.page-about .about-team--service { --w: 35%; }

.page-about .about-team:hover,
.page-about .about-team:focus-visible,
.page-about .about-team:focus {
  background: var(--c-panel-up);
}

.page-about .about-team__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 8px;
}

.page-about .about-team__num {
  color: var(--c-orange);
  font-size: 2.1rem;
  line-height: 1;
}

.page-about .about-team__title {
  margin: 0;
  color: var(--c-paper);
  font-size: 1.08rem;
  font-weight: 600;
}

.page-about .about-team__text {
  margin: 0 0 18px;
  max-width: 40rem;
  font-size: 0.95rem;
}

.page-about .about-team__bar {
  height: 6px;
  width: 100%;
  background: var(--c-panel);
}

.page-about .about-team__bar span {
  display: block;
  height: 100%;
  width: var(--w);
  background: linear-gradient(90deg, var(--c-cyan), var(--c-orange));
  transition: width 0.5s var(--ease);
}

.page-about .about-teams__foot {
  margin: 22px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--c-orange);
  font-size: 0.95rem;
  color: var(--c-body);
}

/* ---------- Source ---------- */
.page-about .about-source {
  display: grid;
  gap: clamp(24px, 3.4vw, 46px);
}

.page-about .about-source__text p {
  margin: 0 0 1.05em;
}

.page-about .about-source__text a {
  color: var(--c-violet);
  text-decoration: none;
  border-bottom: 1px solid rgba(108, 123, 255, 0.4);
}

.page-about .about-source__text a:hover,
.page-about .about-source__text a:focus-visible {
  color: var(--c-orange-soft);
  border-bottom-color: var(--c-orange-soft);
}

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

/* ---------- Pledge ---------- */
.page-about .about-pledge {
  display: grid;
  gap: 1px;
  background: var(--c-line);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}

.page-about .about-pledge__item {
  padding: 22px 20px;
  background: var(--c-night);
  transition: background 0.2s var(--ease);
}

.page-about .about-pledge__item:hover {
  background: var(--c-panel);
}

.page-about .about-pledge__num {
  margin: 0 0 8px;
  color: var(--c-orange);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
}

.page-about .about-pledge__item h3 {
  margin: 0 0 8px;
  color: var(--c-paper);
  font-size: 1.02rem;
  font-weight: 600;
}

.page-about .about-pledge__item p:last-child {
  margin: 0;
  font-size: 0.93rem;
}

/* ---------- CTA ---------- */
.page-about .about-cta {
  margin-top: clamp(32px, 4.4vw, 60px);
  padding: clamp(24px, 3.4vw, 44px);
  background: var(--c-panel);
  display: grid;
  gap: 22px;
}

.page-about .about-cta__title {
  margin: 0 0 10px;
  color: var(--c-paper);
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  font-weight: 600;
}

.page-about .about-cta__text p {
  margin: 0;
  max-width: 44rem;
  font-size: 0.96rem;
}

.page-about .about-cta__text a {
  color: var(--c-orange-soft);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 179, 122, 0.45);
}

.page-about .about-cta__text a:hover,
.page-about .about-cta__text a:focus-visible {
  color: var(--c-orange);
  border-bottom-color: var(--c-orange);
}

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

/* ---------- Media fixes ---------- */
.page-about .media-frame img {
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.page-about .about-daily__media .media-frame,
.page-about .about-road__media,
.page-about .about-source__media {
  border: 1px solid var(--c-line);
}

.page-about .media-frame__caption {
  display: block;
  padding: 10px 2px 0;
  color: var(--c-body);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

/* ---------- Focus ---------- */
.page-about .about-node:focus-visible,
.page-about .about-team:focus-visible,
.page-about a:focus-visible,
.page-about .btn:focus-visible {
  outline: 2px solid var(--c-orange);
  outline-offset: 3px;
}

/* ---------- Tablet ---------- */
@media (min-width: 720px) {
  .page-about .about-hero__grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: center;
  }

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

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

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

  .page-about .about-daily__steps {
    border-left: 0;
  }

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

  .page-about .about-checks__list li {
    flex-direction: column;
    gap: 10px;
  }

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

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

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

/* ---------- Desktop ---------- */
@media (min-width: 1024px) {
  .page-about .about-body {
    grid-template-columns: 156px minmax(0, 1fr);
    gap: clamp(36px, 4.6vw, 84px);
    align-items: start;
  }

  .page-about .about-index {
    display: block;
    position: sticky;
    top: 104px;
    padding-top: 6px;
  }

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

  .page-about .about-team {
    padding: 26px 30px 30px;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .page-about .about-node__detail,
  .page-about .about-team__bar span,
  .page-about .about-node__dot {
    transition: none;
  }

  .page-about .about-node__detail {
    grid-template-rows: 1fr;
  }
}
</style>
<<<END>>>

wait, I made an error - the last part should not have </style> and <<<END>>>. Let me redo it.

The output format requires just the two markers. Let me fix.
<main id="main-content" class="page-about">

  <section class="about-hero" data-reveal>
    <div class="wrap">
      <nav class="breadcrumb" aria-label="面包屑">
        <a href="/">今日首页</a><span class="breadcrumb__sep">/</span><span>品牌故事</span>
      </nav>

      <div class="about-hero__grid">
        <div class="about-hero__lead">
          <p class="eyebrow">365 编辑室 · 品牌故事</p>
          <h1 class="display-1">一间每天<br>不熄灯的内容编辑室</h1>
          <p class="lede">从 2014 年打开第一个页面开始，365登录主页每天只专注一件事：把值得读的内容挑出来、校好，按时送到你面前。46 人的编辑团队里，有 12 名值班编辑分三班轮换，春节和国庆照常更新。你清早翻到的那几条，是夜班刚排完的。</p>

          <div class="about-hero__stats">
            <div class="about-hero__stat">
              <span class="mono about-hero__num">2014</span>
              <span class="about-hero__label">上线运行</span>
            </div>
            <div class="about-hero__stat">
              <span class="mono about-hero__num">46</span>
              <span class="about-hero__label">编辑团队人数</span>
            </div>
            <div class="about-hero__stat">
              <span class="mono about-hero__num">48万+</span>
              <span class="about-hero__label">累计发布条目</span>
            </div>
          </div>
        </div>

        <aside class="about-hero__visual" aria-hidden="true">
          <svg class="about-hero__svg" viewBox="0 0 420 520" xmlns="http://www.w3.org/2000/svg" focusable="false">
            <defs>
              <pattern id="aboutGridP" width="28" height="28" patternUnits="userSpaceOnUse">
                <path d="M28 0H0V28" fill="none" stroke="#2C3E6B" stroke-width="0.7" opacity="0.75"/>
              </pattern>
              <linearGradient id="aboutFade" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="#0E1733" stop-opacity="0"/>
                <stop offset="100%" stop-color="#0E1733" stop-opacity="0.92"/>
              </linearGradient>
            </defs>

            <rect width="420" height="520" fill="url(#aboutGridP)"/>
            <rect width="420" height="520" fill="#0E1733" opacity="0.35"/>

            <line x1="94" y1="52" x2="94" y2="468" stroke="#2C3E6B" stroke-width="2"/>
            <line x1="94" y1="52" x2="94" y2="322" stroke="#FF7A33" stroke-width="2"/>

            <g stroke="#2C3E6B" stroke-width="1">
              <line x1="94" y1="104" x2="150" y2="104"/>
              <line x1="94" y1="166" x2="150" y2="166"/>
              <line x1="94" y1="228" x2="150" y2="228"/>
              <line x1="94" y1="290" x2="150" y2="290"/>
              <line x1="94" y1="352" x2="150" y2="352"/>
              <line x1="94" y1="414" x2="150" y2="414"/>
            </g>

            <g>
              <circle cx="94" cy="104" r="6.5" fill="#0E1733" stroke="#2FD6C4" stroke-width="2"/>
              <circle cx="94" cy="166" r="6.5" fill="#0E1733" stroke="#2FD6C4" stroke-width="2"/>
              <circle cx="94" cy="228" r="6.5" fill="#0E1733" stroke="#FF7A33" stroke-width="2"/>
              <circle cx="94" cy="290" r="6.5" fill="#0E1733" stroke="#FF7A33" stroke-width="2"/>
              <circle cx="94" cy="352" r="6.5" fill="#0E1733" stroke="#6C7BFF" stroke-width="2"/>
              <circle cx="94" cy="414" r="6.5" fill="#0E1733" stroke="#6C7BFF" stroke-width="2"/>
            </g>

            <g>
              <rect x="176" y="96" width="196" height="14" fill="#1B2A4F"/>
              <rect x="176" y="96" width="138" height="14" fill="#2FD6C4" opacity="0.85"/>
              <rect x="176" y="158" width="196" height="14" fill="#1B2A4F"/>
              <rect x="176" y="158" width="96" height="14" fill="#2FD6C4" opacity="0.55"/>
              <rect x="176" y="220" width="196" height="14" fill="#1B2A4F"/>
              <rect x="176" y="220" width="164" height="14" fill="#FF7A33"/>
              <rect x="176" y="282" width="196" height="14" fill="#1B2A4F"/>
              <rect x="176" y="282" width="112" height="14" fill="#FFB37A"/>
              <rect x="176" y="344" width="196" height="14" fill="#1B2A4F"/>
              <rect x="176" y="344" width="74" height="14" fill="#6C7BFF" opacity="0.8"/>
              <rect x="176" y="406" width="196" height="14" fill="#1B2A4F"/>
              <rect x="176" y="406" width="48" height="14" fill="#6C7BFF" opacity="0.5"/>
            </g>

            <rect y="330" width="420" height="190" fill="url(#aboutFade)"/>
          </svg>
        </aside>
      </div>
    </div>
  </section>

  <div class="wrap">
    <div class="about-body">

      <nav class="about-index" aria-label="章节导航">
        <p class="about-index__title mono">INDEX</p>
        <a class="index-link" href="#origin" data-spy-link><span class="mono">01</span> 起点</a>
        <a class="index-link" href="#daily" data-spy-link><span class="mono">02</span> 一天</a>
        <a class="index-link" href="#road" data-spy-link><span class="mono">03</span> 历程</a>
        <a class="index-link" href="#team" data-spy-link><span class="mono">04</span> 团队</a>
        <a class="index-link" href="#source" data-spy-link><span class="mono">05</span> 来源</a>
        <a class="index-link" href="#always" data-spy-link><span class="mono">06</span> 坚持</a>
      </nav>

      <div class="about-flow">

        <section class="about-sec" id="origin" data-spy-target data-reveal>
          <header class="section__head">
            <p class="eyebrow">01 — 起点</p>
            <h2 class="section-title">每天更新这件事，从 2014 年就没停过</h2>
          </header>

          <div class="about-sec__cols">
            <div class="about-sec__main">
              <p>2014 年，365登录主页以内容中心的形态上线。当时编辑部只有几个人、一台服务器，每天更新的条目刚够装满一屏。而我们从第一周就定下了一条规矩：不管节假日还是周末，当天必须有一批看过的内容。这条规矩一直执行到今天。</p>
              <p>如今的每日更新量稳定在 90 到 140 条之间，分布在 14 个分类里——会员与价格、资料库、客户端版本、运营公告、使用技巧、行业观察，各占一块。累计发布条目已经超过 48 万条，近三年的记录全部保留在可检索的归档中，你能顺着关键词一路翻到当时的原文。</p>
              <p>站点运营主体位于湖北，鄂ICP备10540687号是本站唯一的备案信息。所有访问链路走 HTTPS，登录与支付环节多加一道身份校验，这一步从上线那天起就没省过。</p>
            </div>

            <aside class="about-sec__aside">
              <dl class="about-notes">
                <div class="data-row">
                  <dt class="data-row__label">上线年份</dt>
                  <dd class="data-row__value mono">2014</dd>
                </div>
                <div class="data-row">
                  <dt class="data-row__label">日常更新量</dt>
                  <dd class="data-row__value mono">90–140 条 / 天</dd>
                </div>
                <div class="data-row">
                  <dt class="data-row__label">内容分类</dt>
                  <dd class="data-row__value mono">14 个</dd>
                </div>
                <div class="data-row">
                  <dt class="data-row__label">访问来源</dt>
                  <dd class="data-row__value mono">31 省级行政区 · 24 个国家和地区</dd>
                </div>
              </dl>
            </aside>
          </div>
        </section>

        <section class="about-sec" id="daily" data-spy-target data-reveal>
          <header class="section__head">
            <p class="eyebrow">02 — 值班</p>
            <h2 class="section-title">一间编辑室的一天</h2>
            <p class="lede">排班表把一天切成三段：早班处理隔夜积累，午班负责当天主体更新，夜班收尾并准备第二天的专题。任何时间打开站点，都有人在岗。</p>
          </header>

          <div class="about-daily">
            <div class="about-daily__media">
              <figure class="media-frame media-frame--wide media-frame--veil">
                <img src="{zhanqunpic:h:900w:1200}" width="1200" height="900" alt="俯拍的内容编辑工作台局部，散落的便签与纸稿压在键盘旁，屏幕上只露出排版界面的边缘">
                <figcaption class="media-frame__caption">早班的桌面：当天待发的条目清单和前一天的回看批注。</figcaption>
              </figure>
            </div>

            <ol class="about-daily__steps">
              <li class="about-step">
                <span class="about-step__no mono">06:30</span>
                <h3 class="about-step__title">早班接棒</h3>
                <p>夜班交班后，早班先过一遍隔夜留言与来源推送，把当天要上的条目列进待发队列。</p>
              </li>
              <li class="about-step">
                <span class="about-step__no mono">11:00</span>
                <h3 class="about-step__title">午班放量</h3>
                <p>一天里更新最密集的窗口。90 到 140 条的大部分在这个时段前后落地，分类标签同步归档。</p>
              </li>
              <li class="about-step">
                <span class="about-step__no mono">18:00</span>
                <h3 class="about-step__title">客服收口</h3>
                <p>客服团队 16 人在线到 18:00，关于条目、订阅和资料库的问题平均 12 分钟内给到第一次回复。</p>
              </li>
              <li class="about-step">
                <span class="about-step__no mono">23:00</span>
                <h3 class="about-step__title">夜班定稿</h3>
                <p>夜班整理第二天专题，回看当天阅读数据，把排在前面的几篇固定到次日首屏。</p>
              </li>
            </ol>
          </div>

          <div class="about-checks">
            <p class="about-checks__lead">每条内容发布前要走完三道环节，走完才进待发列表：</p>
            <ul class="about-checks__list">
              <li><span class="tag tag--cyan">来源核对</span>确认原始出处与时间线，能追到一线资料的不引用二手转述。</li>
              <li><span class="tag tag--accent">事实比对</span>涉及版本号、价格、名额等数字时，与站内既有记录逐项对照。</li>
              <li><span class="tag tag--violet">格式校验</span>标题、标签、摘要和归档路径统一走规范，避免同类内容各写各的。</li>
            </ul>
          </div>
        </section>

        <section class="about-sec" id="road" data-spy-target data-reveal>
          <header class="section__head">
            <p class="eyebrow">03 — 历程</p>
            <h2 class="section-title">从内容聚合，到四件事并行</h2>
            <p class="lede">把十多年拆开看，大概能分出四个阶段。每一段都对应着今天你在站点上看到的一块功能。</p>
          </header>

          <ol class="about-timeline">
            <li class="about-node" tabindex="0">
              <span class="about-node__dot" aria-hidden="true"></span>
              <p class="about-node__year mono">2014</p>
              <h3 class="about-node__title">内容中心上线</h3>
              <p class="about-node__text">每日更新机制正式跑起来，14 个内容分类划定，站点以官方品牌站的形态对外。当年最重要的决定是把更新做成日常，而不是热点驱动的临时补稿。</p>
              <div class="about-node__detail"><div>
                <p>从这一年起，节假日不断档成为固定安排，编辑室开始按班次排班。</p>
              </div></div>
            </li>

            <li class="about-node" tabindex="0">
              <span class="about-node__dot" aria-hidden="true"></span>
              <p class="about-node__year mono">2016</p>
              <h3 class="about-node__title">归档体系成形</h3>
              <p class="about-node__text">条目按季度归档，最早可回溯到 2016 年第一季度的记录。至今已形成 40 个归档周期，近三年的内容全部保留可检索入口。</p>
              <div class="about-node__detail"><div>
                <p>同期上线的还有标签检索，同一件事的后续进展能被串成一条线读完。</p>
              </div></div>
            </li>

            <li class="about-node" tabindex="0">
              <span class="about-node__dot" aria-hidden="true"></span>
              <p class="about-node__year mono">2019</p>
              <h3 class="about-node__title">客户端与会员、资料库打通</h3>
              <p class="about-node__text">客户端发布首个公开版本，桌面端与移动端同时可用。会员中心与资料库合并到同一入口，档位选择和下载计费在一处看完，不用来回跳页面。</p>
              <div class="about-node__detail"><div>
                <p>三档会员与三种下载计费方式在这一阶段定型，后续只做额度与权益的调整。</p>
              </div></div>
            </li>

            <li class="about-node" tabindex="0">
              <span class="about-node__dot" aria-hidden="true"></span>
              <p class="about-node__year mono">至今</p>
              <h3 class="about-node__title">5.x 主线与机构合作</h3>
              <p class="about-node__text">客户端已迭代到 5.x 主线，累计发布 62 个版本，新版通道固定每两周一次。资料库累计收录 62000 份文档，划分为 86 个子专题，并为 30 人以上团队开放按年签约与统一结算的机构方案。</p>
              <div class="about-node__detail"><div>
                <p>机构合作支持专属资料库空间，账单按团队归集，不需要成员各自开通。</p>
              </div></div>
            </li>
          </ol>

          <figure class="media-frame media-frame--wide media-frame--veil about-road__media">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="清晨与黄昏交替的城市光影，建筑轮廓被抽象为几何色块，靛蓝与暖橙对半分布" loading="lazy" decoding="async">
            <figcaption class="media-frame__caption">运营地在湖北。这里的生活节奏，也影响了内容上架的时间安排。</figcaption>
          </figure>
        </section>

        <section class="about-sec" id="team" data-spy-target data-reveal>
          <header class="section__head">
            <p class="eyebrow">04 — 分工</p>
            <h2 class="section-title">46 个人，三条工作台</h2>
            <p class="lede">你看到的一条条目、一次下载、一次客服回复，背后是三支队伍接力完成的。团队规模不大，但每块都有人在岗。</p>
          </header>

          <div class="about-teams">
            <div class="about-team about-team--edit" tabindex="0">
              <div class="about-team__head">
                <span class="mono about-team__num">46</span>
                <h3 class="about-team__title">编辑团队</h3>
              </div>
              <p class="about-team__text">负责每日条目、专题策划与归档整理。其中 12 名值班编辑分早、午、夜三班轮值，保证全天有人在岗处理内容。</p>
              <div class="about-team__bar" aria-hidden="true"><span></span></div>
            </div>

            <div class="about-team about-team--tech" tabindex="0">
              <div class="about-team__head">
                <span class="mono about-team__num">28</span>
                <h3 class="about-team__title">产品与技术团队</h3>
              </div>
              <p class="about-team__text">负责会员中心、资料库、客户端通道与登录链路的持续迭代。每两周一次的通道更新、间隔内的紧急补丁，都出自这支队伍。</p>
              <div class="about-team__bar" aria-hidden="true"><span></span></div>
            </div>

            <div class="about-team about-team--service" tabindex="0">
              <div class="about-team__head">
                <span class="mono about-team__num">16</span>
                <h3 class="about-team__title">客服团队</h3>
              </div>
              <p class="about-team__text">工作日 9:00 至 18:00 在线，处理账号、订阅、资料库下载与费用查询类问题。平均首次响应时间 12 分钟，跨时段的疑问会顺延到下一个工作日一早跟进。</p>
              <div class="about-team__bar" aria-hidden="true"><span></span></div>
            </div>
          </div>

          <p class="about-teams__foot">目前站点日均访问 18.6 万次，其中回访用户占 63%，老用户的平均回访间隔不到 2 天。这个数字对我们来说意味着：更新一旦迟了，第二天就会被发现。</p>
        </section>

        <section class="about-sec" id="source" data-spy-target data-reveal>
          <header class="section__head">
            <p class="eyebrow">05 — 来源</p>
            <h2 class="section-title">内容从哪来，怎么把关</h2>
          </header>

          <div class="about-source">
            <div class="about-source__text">
              <p>站点的内容来源有两类：一类是我们自己采写与整理的条目，另一类来自 260 个合作内容源，包括行业媒体、公开资料整理方与垂直领域作者。合作方全部纳入统一的内容规范，标题写法、摘要长度、标签口径都有约定，读者在不同分类里看到的条目，格式是一致的。</p>
              <p>每一篇进入发布流程的条目，都要走完来源核对、事实比对与格式校验三道环节。涉及版本号、价格、名额这类容易出错的数字时，会和站内既有记录逐项对照；一条内容如果暂时找不到可靠出处，就先不进队列。</p>
              <p>如果你在阅读中发现某条内容存在问题，可以通过<a href="/contact-us/">联系我们</a>页的订阅与反馈入口告诉我们。工作日内会有人跟进，确认为错的条目会立即更正并在原位置标注。</p>
            </div>

            <figure class="media-frame media-frame--square about-source__media">
              <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="由密集小方块组成的抽象内容墙，部分方块亮起暖橙色，其余保持靛蓝灰调，呈网格状排布" loading="lazy" decoding="async">
              <figcaption class="media-frame__caption">14 个分类、86 个子专题，每天有 90 到 140 个方块被点亮。</figcaption>
            </figure>
          </div>
        </section>

        <section class="about-sec about-sec--last" id="always" data-spy-target data-reveal>
          <header class="section__head">
            <p class="eyebrow">06 — 长期</p>
            <h2 class="section-title">一直没变过的几件事</h2>
          </header>

          <div class="about-pledge">
            <article class="about-pledge__item">
              <p class="about-pledge__num mono">不断档</p>
              <h3>更新保持连续</h3>
              <p>每天 90 到 140 条是常态，节假日照常发布。从 2014 年至今，没有出现过整天停更的情况。</p>
            </article>
            <article class="about-pledge__item">
              <p class="about-pledge__num mono">40 期</p>
              <h3>归档按季度留存</h3>
              <p>条目按季度归档，最早可回溯到 2016 年第一季度的记录。你可以按时间或关键词找到当年的原文。</p>
            </article>
            <article class="about-pledge__item">
              <p class="about-pledge__num mono">12 分钟</p>
              <h3>问题有人接住</h3>
              <p>客服团队工作日 9:00 至 18:00 在线，平均首次响应时间 12 分钟。费用查询与订阅变更都走这条线。</p>
            </article>
            <article class="about-pledge__item">
              <p class="about-pledge__num mono">每两周</p>
              <h3>版本节奏固定</h3>
              <p>客户端新版通道固定每两周一次，覆盖功能迭代、性能优化与安全修复；间隔内的紧急问题走独立补丁通道。</p>
            </article>
          </div>

          <div class="about-cta cut">
            <div class="about-cta__text">
              <h2 class="about-cta__title">想先看内容，还是先看价格和服务清单？</h2>
              <p>今日条目、本周专题都摆在<a href="/information/">资讯中心</a>；会员档位、资料库下载计费与客户端通道情况，集中在<a href="/projects/">会员中心与资料库</a>。要谈团队合作或直接找人，走<a href="/contact-us/">联系我们</a>。</p>
            </div>
            <div class="about-cta__actions">
              <a class="btn btn--accent" href="/information/">看今天的更新</a>
              <a class="btn btn--ghost" href="/projects/">查看会员与资料库</a>
            </div>
          </div>
        </section>

      </div>
    </div>
  </div>

</main>

.page-about {
  --about-gap: clamp(22px, 3vw, 40px);
  --about-cut: 18px;
  --about-axis: 2px;
  --about-node: 12px;
  background: var(--c-night);
  color: var(--c-body);
  padding-bottom: clamp(56px, 8vw, 110px);
}

.page-about .about-hero {
  position: relative;
  padding: clamp(28px, 5vw, 56px) 0 clamp(40px, 6vw, 76px);
  border-bottom: 1px solid var(--c-line);
  background:
    radial-gradient(120% 90% at 88% 0%, rgba(108, 123, 255, 0.14), transparent 58%),
    radial-gradient(90% 70% at 0% 100%, rgba(255, 122, 51, 0.1), transparent 62%),
    var(--c-night);
}

.page-about .about-hero__grid {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  margin-top: clamp(22px, 3.4vw, 44px);
}

.page-about .about-hero__lead {
  max-width: 42rem;
}

.page-about .about-hero__lead .display-1 {
  margin: 14px 0 20px;
  color: var(--c-paper);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: 0.015em;
}

.page-about .about-hero__lead .lede {
  color: var(--c-body);
  max-width: 38rem;
}

.page-about .about-hero__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px;
  margin-top: clamp(26px, 3.4vw, 40px);
  background: var(--c-line);
  border: 1px solid var(--c-line);
}

.page-about .about-hero__stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  background: var(--c-night);
}

.page-about .about-hero__num {
  color: var(--c-orange);
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  line-height: 1.1;
}

.page-about .about-hero__label {
  color: var(--c-body);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
}

.page-about .about-hero__visual {
  position: relative;
  border: 1px solid var(--c-line);
  clip-path: polygon(0 0, calc(100% - var(--about-cut)) 0, 100% var(--about-cut), 100% 100%, 0 100%);
  background: var(--c-panel);
  overflow: hidden;
}

.page-about .about-hero__svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
}

.page-about .about-body {
  display: grid;
  gap: var(--about-gap);
  padding-top: clamp(40px, 6vw, 80px);
}

.page-about .about-index {
  display: none;
}

.page-about .about-index__title {
  margin: 0 0 14px;
  color: var(--c-cyan);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
}

.page-about .about-index .index-link {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  color: var(--c-body);
  font-size: 0.86rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.page-about .about-index .index-link .mono {
  color: var(--c-line);
  font-size: 0.7rem;
}

.page-about .about-index .index-link:hover,
.page-about .about-index .index-link:focus-visible {
  color: var(--c-paper);
  border-bottom-color: var(--c-orange);
}

.page-about .about-index .index-link.is-active {
  color: var(--c-orange);
  border-bottom-color: var(--c-orange);
}

.page-about .about-index .index-link.is-active .mono {
  color: var(--c-orange);
}

.page-about .about-sec {
  padding-bottom: clamp(40px, 6vw, 76px);
  border-bottom: 1px solid var(--c-line);
}

.page-about .about-sec--last {
  border-bottom: 0;
  padding-bottom: 0;
}

.page-about .about-sec .section__head {
  margin-bottom: clamp(22px, 3vw, 36px);
}

.page-about .about-sec .section-title {
  color: var(--c-paper);
  font-weight: 500;
}

.page-about .about-sec .lede {
  margin-top: 12px;
  max-width: 46rem;
}

.page-about .about-sec__main p {
  margin: 0 0 1.05em;
}

.page-about .about-sec__main a,
.page-about .about-source__text a {
  color: var(--c-violet);
  text-decoration: none;
  border-bottom: 1px solid rgba(108, 123, 255, 0.4);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.page-about .about-sec__main a:hover,
.page-about .about-sec__main a:focus-visible,
.page-about .about-source__text a:hover,
.page-about .about-source__text a:focus-visible {
  color: var(--c-orange-soft);
  border-bottom-color: var(--c-orange-soft);
}

.page-about .about-sec__cols {
  display: grid;
  gap: clamp(24px, 3.4vw, 48px);
}

.page-about .about-notes {
  margin: 0;
  border-top: 1px solid var(--c-line);
}

.page-about .about-notes .data-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--c-line);
}

.page-about .about-notes .data-row__label {
  color: var(--c-body);
  font-size: 0.9rem;
}

.page-about .about-notes .data-row__value {
  margin: 0;
  color: var(--c-orange);
  font-size: 0.95rem;
  text-align: right;
}

.page-about .about-daily {
  display: grid;
  gap: clamp(22px, 3vw, 40px);
}

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

.page-about .about-step {
  padding: 18px 20px;
  background: var(--c-night);
  transition: background 0.2s var(--ease);
}

.page-about .about-step:hover {
  background: var(--c-panel);
}

.page-about .about-step__no {
  display: block;
  color: var(--c-cyan);
  font-size: 0.84rem;
  letter-spacing: 0.06em;
}

.page-about .about-step__title {
  margin: 6px 0;
  color: var(--c-paper);
  font-size: 1.05rem;
  font-weight: 600;
}

.page-about .about-step p {
  margin: 0;
  font-size: 0.95rem;
}

.page-about .about-checks {
  margin-top: clamp(28px, 4vw, 48px);
  padding: clamp(20px, 3vw, 32px);
  background: var(--c-panel);
  clip-path: polygon(0 0, calc(100% - var(--about-cut)) 0, 100% var(--about-cut), 100% 100%, 0 100%);
}

.page-about .about-checks__lead {
  margin: 0 0 16px;
  color: var(--c-paper);
  font-size: 1rem;
}

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

.page-about .about-checks__list li {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.95rem;
  line-height: 1.7;
}

.page-about .about-checks__list .tag {
  flex: none;
  margin-top: 1px;
}

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

.page-about .about-timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 10px;
  bottom: 10px;
  width: var(--about-axis);
  background: linear-gradient(180deg, var(--c-cyan) 0%, var(--c-orange) 62%, var(--c-line) 100%);
}

.page-about .about-node {
  position: relative;
  padding: 0 0 clamp(26px, 3.6vw, 44px);
  outline: none;
}

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

.page-about .about-node__dot {
  position: absolute;
  left: -30px;
  top: 6px;
  width: var(--about-node);
  height: var(--about-node);
  border-radius: 50%;
  background: var(--c-night);
  border: 2px solid var(--c-cyan);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.page-about .about-node:hover .about-node__dot,
.page-about .about-node:focus .about-node__dot,
.page-about .about-node:focus-visible .about-node__dot {
  background: var(--c-orange);
  border-color: var(--c-orange);
  box-shadow: 0 0 0 4px rgba(255, 122, 51, 0.18);
}

.page-about .about-node__year {
  margin: 0;
  color: var(--c-cyan);
  font-size: 0.9rem;
  letter-spacing: 0.14em;
}

.page-about .about-node__title {
  margin: 6px 0 8px;
  color: var(--c-paper);
  font-size: 1.2rem;
  font-weight: 600;
}

.page-about .about-node__text {
  margin: 0;
  max-width: 44rem;
  font-size: 0.98rem;
}

.page-about .about-node__detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s var(--ease);
}

.page-about .about-node__detail > div {
  overflow: hidden;
}

.page-about .about-node__detail p {
  margin: 12px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--c-orange);
  color: var(--c-body);
  font-size: 0.92rem;
}

.page-about .about-node:hover .about-node__detail,
.page-about .about-node:focus .about-node__detail,
.page-about .about-node:focus-within .about-node__detail {
  grid-template-rows: 1fr;
}

.page-about .about-road__media {
  margin: clamp(30px, 4vw, 52px) 0 0;
}

.page-about .about-teams {
  display: grid;
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
}

.page-about .about-team {
  --w: 100%;
  position: relative;
  padding: 22px 22px 26px;
  background: var(--c-night);
  outline: none;
  transition: background 0.2s var(--ease);
}

.page-about .about-team--edit { --w: 100%; }
.page-about .about-team--tech { --w: 61%; }
.page-about .about-team--service { --w: 35%; }

.page-about .about-team:hover,
.page-about .about-team:focus,
.page-about .about-team:focus-visible {
  background: var(--c-panel-up);
}

.page-about .about-team__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 8px;
}

.page-about .about-team__num {
  color: var(--c-orange);
  font-size: 2.1rem;
  line-height: 1;
}

.page-about .about-team__title {
  margin: 0;
  color: var(--c-paper);
  font-size: 1.08rem;
  font-weight: 600;
}

.page-about .about-team__text {
  margin: 0 0 18px;
  max-width: 40rem;
  font-size: 0.95rem;
}

.page-about .about-team__bar {
  height: 6px;
  width: 100%;
  background: var(--c-panel);
}

.page-about .about-team__bar span {
  display: block;
  height: 100%;
  width: var(--w);
  background: linear-gradient(90deg, var(--c-cyan), var(--c-orange));
}

.page-about .about-teams__foot {
  margin: 22px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--c-orange);
  font-size: 0.95rem;
  color: var(--c-body);
}

.page-about .about-source {
  display: grid;
  gap: clamp(24px, 3.4vw, 46px);
}

.page-about .about-source__text p {
  margin: 0 0 1.05em;
}

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

.page-about .about-pledge {
  display: grid;
  gap: 1px;
  background: var(--c-line);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}

.page-about .about-pledge__item {
  padding: 22px 20px;
  background: var(--c-night);
  transition: background 0.2s var(--ease);
}

.page-about .about-pledge__item:hover {
  background: var(--c-panel);
}

.page-about .about-pledge__num {
  margin: 0 0 8px;
  color: var(--c-orange);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
}

.page-about .about-pledge__item h3 {
  margin: 0 0 8px;
  color: var(--c-paper);
  font-size: 1.02rem;
  font-weight: 600;
}

.page-about .about-pledge__item p:last-child {
  margin: 0;
  font-size: 0.93rem;
}

.page-about .about-cta {
  margin-top: clamp(32px, 4.4vw, 60px);
  padding: clamp(24px, 3.4vw, 44px);
  background: var(--c-panel);
  display: grid;
  gap: 22px;
}

.page-about .about-cta__title {
  margin: 0 0 10px;
  color: var(--c-paper);
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  font-weight: 600;
}

.page-about .about-cta__text p {
  margin: 0;
  max-width: 44rem;
  font-size: 0.96rem;
}

.page-about .about-cta__text a {
  color: var(--c-orange-soft);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 179, 122, 0.45);
}

.page-about .about-cta__text a:hover,
.page-about .about-cta__text a:focus-visible {
  color: var(--c-orange);
  border-bottom-color: var(--c-orange);
}

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

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

.page-about .about-daily__media .media-frame,
.page-about .about-road__media,
.page-about .about-source__media {
  border: 1px solid var(--c-line);
}

.page-about .media-frame__caption {
  display: block;
  padding: 10px 2px 0;
  color: var(--c-body);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

.page-about .about-node:focus-visible,
.page-about .about-team:focus-visible,
.page-about a:focus-visible,
.page-about .btn:focus-visible {
  outline: 2px solid var(--c-orange);
  outline-offset: 3px;
}

@media (min-width: 720px) {
  .page-about .about-hero__grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: center;
  }

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

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

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

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

  .page-about .about-checks__list li {
    flex-direction: column;
    gap: 10px;
  }

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

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

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

@media (min-width: 1024px) {
  .page-about .about-body {
    grid-template-columns: 156px minmax(0, 1fr);
    gap: clamp(36px, 4.6vw, 84px);
    align-items: start;
  }

  .page-about .about-index {
    display: block;
    position: sticky;
    top: 104px;
    padding-top: 6px;
  }

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

  .page-about .about-team {
    padding: 26px 30px 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .about-node__detail,
  .page-about .about-node__dot,
  .page-about .about-index .index-link,
  .page-about .about-step,
  .page-about .about-team,
  .page-about .about-pledge__item {
    transition: none;
  }

  .page-about .about-node__detail {
    grid-template-rows: 1fr;
  }
}