.page-about {
  overflow-x: clip;
  padding-bottom: clamp(3rem, 8vw, 6rem);
  color: var(--paper);
  font-family: var(--font-body);
}

.page-about .breadcrumbs {
  padding-top: clamp(1.25rem, 4vw, 2.25rem);
  font-size: 0.8rem;
  color: var(--mist);
}

.page-about .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-about .breadcrumbs li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--line);
}

.page-about .breadcrumbs a {
  color: var(--link);
  text-decoration: none;
}

.page-about .breadcrumbs a:hover {
  color: var(--cyan);
}

/* ---------- Hero ---------- */
.page-about .about-hero {
  position: relative;
  padding-block: clamp(1.5rem, 4vw, 3rem) clamp(2rem, 5vw, 3.5rem);
}

.page-about .about-hero-grid {
  display: grid;
  gap: clamp(1.75rem, 5vw, 3rem);
  align-items: start;
}

.page-about .about-hero-copy h1 {
  margin: 0.75rem 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.1rem, 7.2vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.04em;
}

.page-about .about-lead {
  max-width: 34rem;
  margin: 1.25rem 0 0;
  color: var(--mist);
  font-size: clamp(0.95rem, 1.6vw, 1.0625rem);
  line-height: 1.85;
}

.page-about .about-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.page-about .about-hero-visual {
  position: relative;
  padding: 1rem 1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background:
    radial-gradient(120% 100% at 80% 0%, rgba(61, 232, 255, 0.14), transparent 60%),
    linear-gradient(160deg, var(--glass), var(--night) 70%);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}

.page-about .route-map {
  display: block;
  width: 100%;
  height: auto;
}

.page-about .rm-line path {
  stroke: rgba(61, 232, 255, 0.5);
  stroke-dasharray: 5 6;
}

.page-about .rm-node circle {
  fill: var(--night);
  stroke: var(--cyan);
  stroke-width: 1.8;
}

.page-about .rm-node circle:nth-child(2) {
  fill: var(--cyan);
}

.page-about .rm-node circle:nth-child(3) {
  stroke: var(--mint);
}

.page-about .rm-node circle:nth-child(4) {
  stroke: var(--orange);
}

.page-about .rm-text text {
  fill: var(--mist);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.page-about .vertical-note {
  display: none;
}

/* ---------- Facts ---------- */
.page-about .about-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: clamp(1.75rem, 4vw, 2.75rem) 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--line);
  overflow: hidden;
}

.page-about .about-facts > div {
  padding: 1rem 1.1rem;
  background: var(--night);
}

.page-about .about-facts dt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--mist);
}

.page-about .about-facts dd {
  margin: 0.45rem 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.25rem, 4vw, 1.75rem);
  letter-spacing: -0.02em;
  color: var(--cyan);
}

/* ---------- Chapter nav ---------- */
.page-about .chapter-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
}

.page-about .chapter-nav a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--mist);
  font-size: 0.85rem;
  text-decoration: none;
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease), transform var(--t) var(--ease);
}

.page-about .chapter-nav a span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--cyan);
}

.page-about .chapter-nav a:hover {
  border-color: var(--cyan);
  color: var(--paper);
  transform: translateY(-2px);
}

/* ---------- Chapters ---------- */
.page-about .about-chapter {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  padding-block: clamp(2.25rem, 6vw, 4.25rem);
  border-top: 1px solid var(--line);
}

.page-about .about-chapter::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: clamp(48px, 12vw, 96px);
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), transparent);
}

.page-about .chapter-num {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(2.6rem, 12vw, 5rem);
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: rgba(61, 232, 255, 0.16);
  -webkit-text-stroke: 1px rgba(61, 232, 255, 0.5);
}

.page-about .chapter-body h2 {
  margin: 0 0 0.9rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 4.4vw, 2.3rem);
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.page-about .chapter-body > p {
  max-width: 36rem;
  margin: 0 0 1.25rem;
  color: var(--mist);
  font-size: 0.975rem;
  line-height: 1.85;
}

.page-about .chapter-note {
  max-width: 36rem;
  margin-top: 1.5rem;
  padding-left: 0.95rem;
  border-left: 2px solid var(--cyan);
  color: var(--paper) !important;
  font-size: 0.95rem;
  line-height: 1.85;
}

/* ---------- Scene cards ---------- */
.page-about .scene-grid {
  display: grid;
  gap: 1rem;
  margin-top: 1.25rem;
}

.page-about .scene-card {
  padding: 1.15rem 1.15rem 1.25rem;
  border: 1px solid var(--line);
  border-top: 2px solid var(--cyan);
  border-radius: var(--radius-s);
  background: linear-gradient(170deg, rgba(20, 40, 68, 0.85), rgba(11, 23, 48, 0.7));
}

.page-about .scene-card:nth-child(2) {
  border-top-color: var(--orange);
}

.page-about .scene-card:nth-child(3) {
  border-top-color: var(--mint);
}

.page-about .scene-tag {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--cyan);
}

.page-about .scene-card:nth-child(2) .scene-tag {
  color: var(--orange);
}

.page-about .scene-card:nth-child(3) .scene-tag {
  color: var(--mint);
}

.page-about .scene-card h3 {
  margin: 0.55rem 0 0.5rem;
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--paper);
}

.page-about .scene-card p {
  margin: 0;
  color: var(--mist);
  font-size: 0.9rem;
  line-height: 1.8;
}

/* ---------- Tier list ---------- */
.page-about .tier-list {
  display: grid;
  gap: 0.75rem;
  margin: 1.25rem 0 1.75rem;
}

.page-about .tier {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.9rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: rgba(11, 23, 48, 0.72);
}

.page-about .tier-no {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--night);
  background: var(--cyan);
  border-radius: 6px;
  padding: 0.2rem 0.45rem;
  height: fit-content;
}

.page-about .tier h3 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 800;
  color: var(--paper);
}

.page-about .tier p {
  margin: 0;
  color: var(--mist);
  font-size: 0.9rem;
  line-height: 1.8;
}

/* ---------- Chips ---------- */
.page-about .cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
}

.page-about .cat-chip {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--mist);
  background: rgba(20, 40, 68, 0.5);
}

.page-about .cat-chip--hot {
  border-color: var(--cyan);
  color: var(--cyan);
}

.page-about .cat-chip--warm {
  border-color: var(--orange);
  color: var(--orange);
}

.page-about .cat-chip--safe {
  border-color: var(--mint);
  color: var(--mint);
}

.page-about .cat-chip--rest {
  border-style: dashed;
}

/* ---------- Figures ---------- */
.page-about .about-figure {
  margin: 1.5rem 0 0;
}

.page-about .about-media {
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--night);
}

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

.page-about .about-media--band img {
  aspect-ratio: 5 / 3;
}

.page-about .about-figure figcaption {
  margin-top: 0.65rem;
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--mist);
}

.page-about .about-figure figcaption a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid rgba(140, 200, 255, 0.4);
}

/* ---------- Check list ---------- */
.page-about .check-list {
  margin-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.page-about .check-item {
  border-bottom: 1px solid var(--line);
}

.page-about .check-item summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.95rem 0;
  cursor: pointer;
  list-style: none;
}

.page-about .check-item summary::-webkit-details-marker {
  display: none;
}

.page-about .check-no {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--cyan);
}

.page-about .check-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--paper);
}

.page-about .check-toggle {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--orange);
  transition: transform var(--t) var(--ease);
}

.page-about .check-item[open] .check-toggle {
  transform: rotate(45deg);
}

.page-about .check-item p {
  max-width: 34rem;
  margin: 0 0 1rem;
  padding-left: 2.1rem;
  color: var(--mist);
  font-size: 0.9rem;
  line-height: 1.85;
}

/* ---------- Delta ---------- */
.page-about .about-chapter--change::before {
  background: linear-gradient(90deg, var(--orange), transparent);
}

.page-about .about-chapter--change .chapter-num {
  color: rgba(255, 138, 61, 0.14);
  -webkit-text-stroke: 1px rgba(255, 138, 61, 0.55);
}

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

.page-about .delta-table {
  margin-top: 1.5rem;
}

.page-about .delta-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  padding: 1rem 0;
  border-bottom: 1px dashed var(--line);
}

.page-about .delta-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--mist);
}

.page-about .delta-bars {
  display: grid;
  gap: 0.45rem;
}

.page-about .delta-bar {
  display: block;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-about .delta-bar--from {
  background: rgba(41, 64, 90, 0.85);
  color: var(--mist);
  border: 1px solid var(--line);
}

.page-about .delta-bar--to {
  background: linear-gradient(90deg, rgba(255, 138, 61, 0.9), rgba(255, 200, 87, 0.7));
  color: var(--mask);
  font-weight: 700;
}

.page-about .delta-row--cat .delta-bar--from {
  width: 58%;
}

.page-about .delta-row--cat .delta-bar--to {
  width: 100%;
}

.page-about .delta-row--depth .delta-bar--from {
  width: 100%;
}

.page-about .delta-row--depth .delta-bar--to {
  width: 66%;
}

.page-about .delta-result {
  display: grid;
  gap: 1rem;
  margin-top: 1.75rem;
}

.page-about .result-card {
  padding: 1.1rem 1.15rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(20, 40, 68, 0.6);
}

.page-about .result-card--mint {
  background: linear-gradient(165deg, rgba(111, 255, 194, 0.12), rgba(11, 23, 48, 0.85) 65%);
}

.page-about .result-num {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.1rem, 8vw, 3rem);
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--orange);
}

.page-about .result-card--mint .result-num {
  color: var(--mint);
}

.page-about .result-num i {
  font-style: normal;
  font-size: 0.45em;
  margin-left: 0.1em;
}

.page-about .result-label {
  margin: 0.5rem 0 0.45rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--paper);
}

.page-about .result-card p:last-child {
  margin: 0;
  color: var(--mist);
  font-size: 0.86rem;
  line-height: 1.75;
}

/* ---------- Scale ---------- */
.page-about .scale-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1.25rem 0 1.5rem;
}

.page-about .scale-item {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: rgba(11, 23, 48, 0.72);
}

.page-about .scale-num {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.6rem, 6vw, 2.2rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--cyan);
}

.page-about .scale-num span {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--mist);
  margin-left: 0.2rem;
}

.page-about .scale-label {
  margin: 0.55rem 0 0;
  color: var(--mist);
  font-size: 0.82rem;
  line-height: 1.7;
}

.page-about .cadence-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.page-about .cadence-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem;
  align-items: baseline;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--mist);
  font-size: 0.9rem;
  line-height: 1.75;
}

.page-about .cadence-key {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--mint);
  min-width: 2.6rem;
}

/* ---------- Who ---------- */
.page-about .who-grid {
  display: grid;
  gap: 1rem;
  margin-top: 1.25rem;
}

.page-about .who-card {
  display: flex;
  flex-direction: column;
  padding: 1.15rem;
  border: 1px solid var(--line);
  border-left: 2px solid var(--cyan);
  border-radius: var(--radius-s);
  background: rgba(11, 23, 48, 0.72);
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease);
}

.page-about .who-card:hover {
  transform: translateY(-2px);
  border-color: var(--cyan);
}

.page-about .who-card[hidden] {
  display: none;
}

.page-about .who-tag {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--cyan);
}

.page-about .who-card h3 {
  margin: 0.5rem 0 0.55rem;
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--paper);
}

.page-about .who-card p {
  margin: 0 0 1rem;
  color: var(--mist);
  font-size: 0.88rem;
  line-height: 1.8;
}

.page-about .who-link {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--orange);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 138, 61, 0.45);
  align-self: flex-start;
  padding-bottom: 0.15rem;
}

.page-about .who-link:hover {
  color: var(--amber);
}

/* ---------- Next ---------- */
.page-about .about-next {
  display: grid;
  gap: 1.25rem;
  margin-top: clamp(2rem, 5vw, 3.5rem);
  padding: clamp(1.35rem, 4vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background:
    radial-gradient(90% 140% at 100% 0%, rgba(61, 232, 255, 0.16), transparent 62%),
    linear-gradient(150deg, var(--glass), var(--night));
  box-shadow: var(--shadow-float);
}

.page-about .next-copy h2 {
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.35rem, 4.4vw, 2rem);
  letter-spacing: -0.03em;
}

.page-about .next-copy p {
  margin: 0;
  max-width: 32rem;
  color: var(--mist);
  font-size: 0.92rem;
  line-height: 1.8;
}

.page-about .next-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

/* ---------- Breakpoints ---------- */
@media (min-width: 640px) {
  .page-about .scene-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

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

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

@media (min-width: 900px) {
  .page-about .about-hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }

  .page-about .about-hero-visual {
    padding: 1.25rem 2rem 1.5rem 1.25rem;
  }

  .page-about .vertical-note {
    display: block;
    position: absolute;
    top: 1.5rem;
    right: 0.65rem;
    writing-mode: vertical-rl;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    color: rgba(168, 182, 201, 0.7);
  }

  .page-about .about-chapter {
    grid-template-columns: minmax(84px, 140px) minmax(0, 1fr);
    column-gap: clamp(1.5rem, 4vw, 3.25rem);
    align-items: start;
  }

  .page-about .chapter-num {
    position: sticky;
    top: 6rem;
  }

  .page-about .about-chapter .vertical-note {
    top: 2.5rem;
    right: 0;
    color: rgba(61, 232, 255, 0.45);
  }

  .page-about .chapter-body {
    padding-right: 2.5rem;
  }

  .page-about .delta-row {
    grid-template-columns: 7rem minmax(0, 1fr);
    align-items: center;
  }

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

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

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

@media (prefers-reduced-motion: reduce) {
  .page-about .chapter-nav a,
  .page-about .who-card,
  .page-about .check-toggle {
    transition: none;
  }

  .page-about .who-card:hover,
  .page-about .chapter-nav a:hover {
    transform: none;
  }
}

<main id="main-content" class="page-about">
  <div class="shell">

    <nav class="breadcrumbs" aria-label="面包屑">
      <ol>
        <li><a href="/">入口总览</a></li>
        <li aria-current="page">通道原则</li>
      </ol>
    </nav>

    <section class="about-hero" aria-labelledby="about-title">
      <div class="about-hero-grid">
        <div class="about-hero-copy">
          <p class="eyebrow">通道原则 · 分类与路径方法</p>
          <h1 id="about-title">入口怎么分，决定你少走几步</h1>
          <p class="about-lead">
            酷游指南从 2021 年 4 月起整理国内品牌站的常用入口，把这些页面按“你为什么会点它”重新归位。
            换新手机、确认一项收费、找回上一次收藏的地址，都能从首页两级之内落到目标页，而不是在一堆板块里逐个试。
          </p>
          <div class="about-hero-actions">
            <a class="btn btn-primary" href="/products/">看入口目录</a>
            <a class="btn btn-ghost" href="/questions/">查帮助条目</a>
          </div>
        </div>

        <aside class="about-hero-visual" aria-label="入口路径示意">
          <svg class="route-map" viewBox="0 0 440 380" role="img" aria-label="从总览节点分出的安卓新版、设备迁移、费用说明与帮助条目四条路径">
            <g class="rm-line" fill="none" stroke-width="1.6">
              <path d="M70 320 C 130 262, 152 220, 205 182" />
              <path d="M205 182 C 262 152, 300 128, 358 98" />
              <path d="M205 182 C 244 220, 292 250, 352 272" />
              <path d="M205 182 C 182 132, 158 96, 112 62" />
            </g>
            <g class="rm-node">
              <circle cx="70" cy="320" r="8" />
              <circle cx="205" cy="182" r="10" />
              <circle cx="358" cy="98" r="6.5" />
              <circle cx="352" cy="272" r="6.5" />
              <circle cx="112" cy="62" r="6.5" />
            </g>
            <g class="rm-text">
              <text x="86" y="326">入口总览</text>
              <text x="220" y="188">场景归类</text>
              <text x="300" y="88">安卓新版</text>
              <text x="300" y="292">设备迁移</text>
              <text x="126" y="56">费用说明</text>
            </g>
          </svg>
          <p class="vertical-note">路径自左下向右上收束</p>
        </aside>
      </div>

      <dl class="about-facts">
        <div>
          <dt>索引分类</dt>
          <dd>12 类</dd>
        </div>
        <div>
          <dt>常用入口</dt>
          <dd>168 个</dd>
        </div>
        <div>
          <dt>服务品牌站</dt>
          <dd>260 余家</dd>
        </div>
        <div>
          <dt>入口巡检</dt>
          <dd>每周 2 次</dd>
        </div>
      </dl>

      <nav class="chapter-nav" aria-label="本页章节">
        <a href="#why"><span>01</span>为什么长期做</a>
        <a href="#index"><span>02</span>12 类怎么分</a>
        <a href="#check"><span>03</span>四道检查</a>
        <a href="#change"><span>04</span>路径调整</a>
        <a href="#scale"><span>05</span>规模与节奏</a>
        <a href="#who"><span>06</span>适合谁用</a>
      </nav>
    </section>

    <section class="about-chapter" id="why" aria-labelledby="why-title">
      <p class="chapter-num" aria-hidden="true">01</p>
      <div class="chapter-body">
        <h2 id="why-title">入口没变，找入口的成本一直在变</h2>
        <p>
          同一批页面，第一次来的人凭感觉点，老用户靠收藏翻。真正常见的麻烦并不是“没有入口”，
          而是入口和当时要办的事对不上号。
        </p>
        <div class="scene-grid">
          <article class="scene-card">
            <p class="scene-tag">换机之后</p>
            <h3>旧收藏打开是空白</h3>
            <p>换手机、清浏览器、换网络环境，收藏夹里的地址常常失效。设备迁移分类把重登路径和说明放在一起，常规 30 分钟内能走完，遇到安全复核最长 2 小时。</p>
          </article>
          <article class="scene-card">
            <p class="scene-tag">确认收费</p>
            <h3>答案分散在几个板块</h3>
            <p>安卓新版要不要单独付登录费、品牌站板块按年怎么算，本来写在不同的位置。费用说明与对应帮助条目相邻，看完一次不用再来回切页面。</p>
          </article>
          <article class="scene-card">
            <p class="scene-tag">隔了几个月</p>
            <h3>只能重新搜一遍</h3>
            <p>回访用户最怕点开一个已经停用的地址。失效入口在巡检中被替换，留下来的才是当前可用的那条路。</p>
          </article>
        </div>
        <p class="chapter-note">
          酷游指南站在这两者之间：把入口放到它真正被用到的场景里，再配一条能解答“要花多少、要等多久”的帮助条目。
        </p>
      </div>
      <p class="vertical-note" aria-hidden="true">换机 · 收费 · 回访</p>
    </section>

    <section class="about-chapter" id="index" aria-labelledby="index-title">
      <p class="chapter-num" aria-hidden="true">02</p>
      <div class="chapter-body">
        <h2 id="index-title">12 类索引怎么分：先按场景，再放链接</h2>
        <p>
          分类不是把链接堆成抽屉。每个入口都挂在一组关系上——它是什么、你在什么情况下会点它、点进去之后还有哪些问题要回答。
          理清这三层，找入口的顺序才顺。
        </p>

        <div class="tier-list">
          <div class="tier">
            <span class="tier-no">L1</span>
            <div>
              <h3>入口</h3>
              <p>具体页面与跳转目标，标注所属分类和路径层级，点之前就知道会落到哪一类页面。</p>
            </div>
          </div>
          <div class="tier">
            <span class="tier-no">L2</span>
            <div>
              <h3>场景</h3>
              <p>你是为了什么来：升级安卓新版、更换设备后重登、确认一项收费、确认安全路径，分类名直接写成你的目的。</p>
            </div>
          </div>
          <div class="tier">
            <span class="tier-no">L3</span>
            <div>
              <h3>帮助条目</h3>
              <p>费用、周期、额度这类问题集中回答，48 个条目中有 16 条围绕费用、登录与设备迁移。</p>
            </div>
          </div>
        </div>

        <div class="cat-chips" aria-label="主要入口分类">
          <span class="cat-chip">品牌总览</span>
          <span class="cat-chip">安卓新版</span>
          <span class="cat-chip cat-chip--hot">设备迁移</span>
          <span class="cat-chip cat-chip--warm">费用说明</span>
          <span class="cat-chip">帮助条目</span>
          <span class="cat-chip cat-chip--safe">安全路径</span>
          <span class="cat-chip">更新简报</span>
          <span class="cat-chip">联系支持</span>
          <span class="cat-chip cat-chip--rest">其余类别</span>
        </div>

        <figure class="about-figure">
          <div class="media-frame about-media">
            <img src="{zhanqunpic:h:900w:1200}" width="1200" height="900" loading="lazy" decoding="async" alt="电光青节点从中心向外分出多条分类分支，连线呈斜向通道结构，示意 12 类入口的归并关系">
          </div>
          <figcaption>一个入口只归一类，同一场景下的入口彼此相邻，跨类最多再点一次。</figcaption>
        </figure>
      </div>
      <p class="vertical-note" aria-hidden="true">入口 · 场景 · 条目</p>
    </section>

    <section class="about-chapter" id="check" aria-labelledby="check-title">
      <p class="chapter-num" aria-hidden="true">03</p>
      <div class="chapter-body">
        <h2 id="check-title">一条入口上线前，要走完四道检查</h2>
        <p>入口能不能用，不看它曾经好用，只看现在好不好走。每一条进入索引的路径都依次经过下面四步，任何一步走不通就退回上一环处理。</p>

        <div class="check-list">
          <details class="check-item" open>
            <summary>
              <span class="check-no">01</span>
              <span class="check-title">归位</span>
              <span class="check-toggle" aria-hidden="true">+</span>
            </summary>
            <p>先确认这条入口属于哪一类，同类入口不拆到两处；分类名以使用的场合命名，方便按目的找而不必记住板块名。</p>
          </details>
          <details class="check-item">
            <summary>
              <span class="check-no">02</span>
              <span class="check-title">走通</span>
              <span class="check-toggle" aria-hidden="true">+</span>
            </summary>
            <p>从首页实地走一遍，记录点击层级。超过两级的重新挂到更近的位置，常用入口保持两级以内可达。</p>
          </details>
          <details class="check-item">
            <summary>
              <span class="check-no">03</span>
              <span class="check-title">适配</span>
              <span class="check-toggle" aria-hidden="true">+</span>
            </summary>
            <p>手机、平板、电脑三端各测一次，4G 网络下首屏主要入口平均 1.2 秒完成渲染，小屏上按钮与文字不互相挤压。</p>
          </details>
          <details class="check-item">
            <summary>
              <span class="check-no">04</span>
              <span class="check-title">接上</span>
              <span class="check-toggle" aria-hidden="true">+</span>
            </summary>
            <p>入口相关的收费与周期问题在帮助条目里能接着查到，点完入口不用再回搜索引擎另找一遍答案。</p>
          </details>
        </div>

        <p class="chapter-note">
          通过检查的路径标记为安全路径，用薄荷绿显示；只有完成最近一次巡检与设备适配，才保留这个标记。
        </p>

        <figure class="about-figure">
          <div class="media-frame about-media">
            <img src="{zhanqunpic:h:700w:1200}" width="1200" height="700" loading="lazy" decoding="async" alt="四个编号节点沿斜线依次相连，分别用青色、橙色与绿色标记归位、走通、适配和接上四个检查环节">
          </div>
          <figcaption>四步顺序固定：前一步没过，后一步不做。</figcaption>
        </figure>
      </div>
      <p class="vertical-note" aria-hidden="true">归位 · 走通 · 适配 · 接上</p>
    </section>

    <section class="about-chapter about-chapter--change" id="change" aria-labelledby="change-title">
      <p class="chapter-num" aria-hidden="true">04</p>
      <div class="chapter-body">
        <h2 id="change-title">2024 年那次调整：分类变细，路径变短</h2>
        <p>
          2024 年 6 月，我们把品牌站导航从 7 类细化为 12 类，同时把常用入口的平均跳转层级从 3 层压到 2 层。
          分类变多不是为了好看，而是让每一类里的入口更接近同一件事。
        </p>

        <div class="delta-table">
          <div class="delta-row delta-row--cat">
            <span class="delta-label">索引分类</span>
            <div class="delta-bars">
              <span class="delta-bar delta-bar--from">调整前 7 类</span>
              <span class="delta-bar delta-bar--to">现在 12 类</span>
            </div>
          </div>
          <div class="delta-row delta-row--depth">
            <span class="delta-label">跳转层级</span>
            <div class="delta-bars">
              <span class="delta-bar delta-bar--from">调整前 3 层</span>
              <span class="delta-bar delta-bar--to">现在 2 层</span>
            </div>
          </div>
        </div>

        <div class="delta-result">
          <div class="result-card">
            <p class="result-num">27<i>%</i></p>
            <p class="result-label">移动端首屏入口点击率提升</p>
            <p>入口在手机首屏就能点到，不用先滚到页面中部。</p>
          </div>
          <div class="result-card result-card--mint">
            <p class="result-num">34<i>%</i></p>
            <p class="result-label">常用页面收藏量提升</p>
            <p>用户愿意把一条稳定的路径存下来，下次直接打开。</p>
          </div>
        </div>

        <p class="chapter-note">
          对访客来说，这次调整只体现为一件事：少点一次，少翻一屏。换机重登的人不用穿过三层目录，回访的人也不必重新搜索。
        </p>
      </div>
      <p class="vertical-note" aria-hidden="true">7 → 12 · 3 → 2</p>
    </section>

    <section class="about-chapter" id="scale" aria-labelledby="scale-title">
      <p class="chapter-num" aria-hidden="true">05</p>
      <div class="chapter-body">
        <h2 id="scale-title">服务规模与更新节奏</h2>
        <p>入口会失效、页面会改版、板块会拆分，所以索引必须跟着走。我们把这件事排进固定节奏，而不是等到用户反馈才动。</p>

        <div class="scale-grid">
          <div class="scale-item">
            <p class="scale-num">260<span>余家</span></p>
            <p class="scale-label">国内品牌站使用过入口分类与跳转路径整理服务</p>
          </div>
          <div class="scale-item">
            <p class="scale-num">168<span>个</span></p>
            <p class="scale-label">当前索引中的常用入口，分布在 12 类场景里</p>
          </div>
          <div class="scale-item">
            <p class="scale-num">6-8<span>条</span></p>
            <p class="scale-label">每月发布的通道简报，覆盖版本迭代与分类调整</p>
          </div>
          <div class="scale-item">
            <p class="scale-num">2<span>次/周</span></p>
            <p class="scale-label">每周一、周四各一次入口有效性巡检</p>
          </div>
        </div>

        <ul class="cadence-list">
          <li><span class="cadence-key">每周</span>两次入口有效性巡检，失效地址当场替换或下架。</li>
          <li><span class="cadence-key">每月</span>一次重点分类复核，更新最多的类别优先过一遍。</li>
          <li><span class="cadence-key">每季</span>一次全量复核，12 类逐条走，帮助条目同步衔接。</li>
          <li><span class="cadence-key">2024</span>累计更新 96 条入口记录，关闭或替换失效入口 31 个。</li>
        </ul>

        <figure class="about-figure">
          <div class="media-frame about-media about-media--band">
            <img src="{zhanqunpic:h:600w:1000}" width="1000" height="600" loading="lazy" decoding="async" alt="深色横向时间带上分布着每周巡检、每月重点复核与每季度全量复核的标记点">
          </div>
          <figcaption>持续更新按周推进，想了解最近改了什么，可以看<a href="/press/">通道简报</a>。</figcaption>
        </figure>
      </div>
      <p class="vertical-note" aria-hidden="true">周巡检 · 月复核 · 季全量</p>
    </section>

    <section class="about-chapter" id="who" aria-labelledby="who-title">
      <p class="chapter-num" aria-hidden="true">06</p>
      <div class="chapter-body">
        <h2 id="who-title">你属于哪一类，就从哪一条路开始</h2>
        <p>同一个站点，四种人用法完全不同。按自己的处境挑一条，通常三分钟内就能办完手上的事。</p>

        <div class="filter-bar" data-filter-group="who" role="group" aria-label="按使用场景筛选">
          <button class="filter-btn" type="button" data-filter="all" aria-pressed="true">全部</button>
          <button class="filter-btn" type="button" data-filter="first" aria-pressed="false">第一次来</button>
          <button class="filter-btn" type="button" data-filter="migrate" aria-pressed="false">换机重登</button>
          <button class="filter-btn" type="button" data-filter="ops" aria-pressed="false">品牌站运营</button>
          <button class="filter-btn" type="button" data-filter="return" aria-pressed="false">回访收藏</button>
        </div>

        <div class="who-grid" data-filter-panel="who">
          <article class="who-card" data-filter-item data-tags="first">
            <p class="who-tag">第一次来</p>
            <h3>先收藏，再查一次</h3>
            <p>把首页存进收藏夹，用页面顶部的临时查询位定位一次。单次会话可连续检索 20 条索引结果，不需要注册。</p>
            <a class="who-link" href="/#quick-check">去临时查询</a>
          </article>
          <article class="who-card" data-filter-item data-tags="migrate">
            <p class="who-tag">换机重登</p>
            <h3>从设备迁移进，别从头找</h3>
            <p>新设备上直接进设备迁移分类，重登路径与周期说明在同一处，常规 30 分钟内完成，遇到安全复核最长 2 小时。</p>
            <a class="who-link" href="/products/">打开入口目录</a>
          </article>
          <article class="who-card" data-filter-item data-tags="ops">
            <p class="who-tag">品牌站运营</p>
            <h3>把入口和收费一起理</h3>
            <p>年度索引服务分为三档，增补入口按分类整理，周期为 3 个工作日。具体档位与适用情形可在入口目录中逐条对照。</p>
            <a class="who-link" href="/products/">看服务与费用</a>
          </article>
          <article class="who-card" data-filter-item data-tags="return">
            <p class="who-tag">回访收藏</p>
            <h3>老地址还管不管用</h3>
            <p>收藏与临时查询记录保存在浏览器本地，不上传服务器；地址一旦在巡检中失效，会在索引里被替换成当前可用的一条。</p>
            <a class="who-link" href="/questions/">查帮助条目</a>
          </article>
        </div>
      </div>
      <p class="vertical-note" aria-hidden="true">四种人 · 四条路</p>
    </section>

    <section class="about-next" aria-labelledby="next-title">
      <div class="next-copy">
        <h2 id="next-title">下一步，挑一条最短的路</h2>
        <p>要按场景找入口，进目录；想先弄清费用和周期，看帮助条目；找不到具体地址，直接联系我们。</p>
      </div>
      <div class="next-actions">
        <a class="btn btn-primary" href="/products/">进入入口目录</a>
        <a class="btn btn-line" href="/questions/">翻帮助条目</a>
        <a class="btn btn-line" href="/contact/">联系与支持</a>
      </div>
    </section>

  </div>
</main>

.page-about {
  overflow-x: clip;
  padding-bottom: clamp(3rem, 8vw, 6rem);
  color: var(--paper);
  font-family: var(--font-body);
}

.page-about .breadcrumbs {
  padding-top: clamp(1.25rem, 4vw, 2.25rem);
  font-size: 0.8rem;
  color: var(--mist);
}

.page-about .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-about .breadcrumbs li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--line);
}

.page-about .breadcrumbs a {
  color: var(--link);
  text-decoration: none;
}

.page-about .breadcrumbs a:hover {
  color: var(--cyan);
}

/* ---------- Hero ---------- */
.page-about .about-hero {
  position: relative;
  padding-block: clamp(1.5rem, 4vw, 3rem) clamp(2rem, 5vw, 3.5rem);
}

.page-about .about-hero-grid {
  display: grid;
  gap: clamp(1.75rem, 5vw, 3rem);
  align-items: start;
}

.page-about .about-hero-copy h1 {
  margin: 0.75rem 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.1rem, 7.2vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.04em;
}

.page-about .about-lead {
  max-width: 34rem;
  margin: 1.25rem 0 0;
  color: var(--mist);
  font-size: clamp(0.95rem, 1.6vw, 1.0625rem);
  line-height: 1.85;
}

.page-about .about-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.page-about .about-hero-visual {
  position: relative;
  padding: 1rem 1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background:
    radial-gradient(120% 100% at 80% 0%, rgba(61, 232, 255, 0.14), transparent 60%),
    linear-gradient(160deg, var(--glass), var(--night) 70%);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}

.page-about .route-map {
  display: block;
  width: 100%;
  height: auto;
}

.page-about .rm-line path {
  stroke: rgba(61, 232, 255, 0.5);
  stroke-dasharray: 5 6;
}

.page-about .rm-node circle {
  fill: var(--night);
  stroke: var(--cyan);
  stroke-width: 1.8;
}

.page-about .rm-node circle:nth-child(2) {
  fill: var(--cyan);
}

.page-about .rm-node circle:nth-child(3) {
  stroke: var(--mint);
}

.page-about .rm-node circle:nth-child(4) {
  stroke: var(--orange);
}

.page-about .rm-text text {
  fill: var(--mist);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.page-about .vertical-note {
  display: none;
}

/* ---------- Facts ---------- */
.page-about .about-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: clamp(1.75rem, 4vw, 2.75rem) 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--line);
  overflow: hidden;
}

.page-about .about-facts > div {
  padding: 1rem 1.1rem;
  background: var(--night);
}

.page-about .about-facts dt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--mist);
}

.page-about .about-facts dd {
  margin: 0.45rem 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.25rem, 4vw, 1.75rem);
  letter-spacing: -0.02em;
  color: var(--cyan);
}

/* ---------- Chapter nav ---------- */
.page-about .chapter-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
}

.page-about .chapter-nav a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--mist);
  font-size: 0.85rem;
  text-decoration: none;
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease), transform var(--t) var(--ease);
}

.page-about .chapter-nav a span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--cyan);
}

.page-about .chapter-nav a:hover {
  border-color: var(--cyan);
  color: var(--paper);
  transform: translateY(-2px);
}

/* ---------- Chapters ---------- */
.page-about .about-chapter {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  padding-block: clamp(2.25rem, 6vw, 4.25rem);
  border-top: 1px solid var(--line);
}

.page-about .about-chapter::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: clamp(48px, 12vw, 96px);
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), transparent);
}

.page-about .chapter-num {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(2.6rem, 12vw, 5rem);
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: rgba(61, 232, 255, 0.16);
  -webkit-text-stroke: 1px rgba(61, 232, 255, 0.5);
}

.page-about .chapter-body h2 {
  margin: 0 0 0.9rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 4.4vw, 2.3rem);
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.page-about .chapter-body > p {
  max-width: 36rem;
  margin: 0 0 1.25rem;
  color: var(--mist);
  font-size: 0.975rem;
  line-height: 1.85;
}

.page-about .chapter-note {
  max-width: 36rem;
  margin-top: 1.5rem;
  padding-left: 0.95rem;
  border-left: 2px solid var(--cyan);
  color: var(--paper) !important;
  font-size: 0.95rem;
  line-height: 1.85;
}

/* ---------- Scene cards ---------- */
.page-about .scene-grid {
  display: grid;
  gap: 1rem;
  margin-top: 1.25rem;
}

.page-about .scene-card {
  padding: 1.15rem 1.15rem 1.25rem;
  border: 1px solid var(--line);
  border-top: 2px solid var(--cyan);
  border-radius: var(--radius-s);
  background: linear-gradient(170deg, rgba(20, 40, 68, 0.85), rgba(11, 23, 48, 0.7));
}

.page-about .scene-card:nth-child(2) {
  border-top-color: var(--orange);
}

.page-about .scene-card:nth-child(3) {
  border-top-color: var(--mint);
}

.page-about .scene-tag {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--cyan);
}

.page-about .scene-card:nth-child(2) .scene-tag {
  color: var(--orange);
}

.page-about .scene-card:nth-child(3) .scene-tag {
  color: var(--mint);
}

.page-about .scene-card h3 {
  margin: 0.55rem 0 0.5rem;
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--paper);
}

.page-about .scene-card p {
  margin: 0;
  color: var(--mist);
  font-size: 0.9rem;
  line-height: 1.8;
}

/* ---------- Tier list ---------- */
.page-about .tier-list {
  display: grid;
  gap: 0.75rem;
  margin: 1.25rem 0 1.75rem;
}

.page-about .tier {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.9rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: rgba(11, 23, 48, 0.72);
}

.page-about .tier-no {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--night);
  background: var(--cyan);
  border-radius: 6px;
  padding: 0.2rem 0.45rem;
  height: fit-content;
}

.page-about .tier h3 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 800;
  color: var(--paper);
}

.page-about .tier p {
  margin: 0;
  color: var(--mist);
  font-size: 0.9rem;
  line-height: 1.8;
}

/* ---------- Chips ---------- */
.page-about .cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
}

.page-about .cat-chip {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--mist);
  background: rgba(20, 40, 68, 0.5);
}

.page-about .cat-chip--hot {
  border-color: var(--cyan);
  color: var(--cyan);
}

.page-about .cat-chip--warm {
  border-color: var(--orange);
  color: var(--orange);
}

.page-about .cat-chip--safe {
  border-color: var(--mint);
  color: var(--mint);
}

.page-about .cat-chip--rest {
  border-style: dashed;
}

/* ---------- Figures ---------- */
.page-about .about-figure {
  margin: 1.5rem 0 0;
}

.page-about .about-media {
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--night);
}

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

.page-about .about-media--band img {
  aspect-ratio: 5 / 3;
}

.page-about .about-figure figcaption {
  margin-top: 0.65rem;
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--mist);
}

.page-about .about-figure figcaption a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid rgba(140, 200, 255, 0.4);
}

/* ---------- Check list ---------- */
.page-about .check-list {
  margin-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.page-about .check-item {
  border-bottom: 1px solid var(--line);
}

.page-about .check-item summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.95rem 0;
  cursor: pointer;
  list-style: none;
}

.page-about .check-item summary::-webkit-details-marker {
  display: none;
}

.page-about .check-no {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--cyan);
}

.page-about .check-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--paper);
}

.page-about .check-toggle {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--orange);
  transition: transform var(--t) var(--ease);
}

.page-about .check-item[open] .check-toggle {
  transform: rotate(45deg);
}

.page-about .check-item p {
  max-width: 34rem;
  margin: 0 0 1rem;
  padding-left: 2.1rem;
  color: var(--mist);
  font-size: 0.9rem;
  line-height: 1.85;
}

/* ---------- Delta ---------- */
.page-about .about-chapter--change::before {
  background: linear-gradient(90deg, var(--orange), transparent);
}

.page-about .about-chapter--change .chapter-num {
  color: rgba(255, 138, 61, 0.14);
  -webkit-text-stroke: 1px rgba(255, 138, 61, 0.55);
}

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

.page-about .delta-table {
  margin-top: 1.5rem;
}

.page-about .delta-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  padding: 1rem 0;
  border-bottom: 1px dashed var(--line);
}

.page-about .delta-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--mist);
}

.page-about .delta-bars {
  display: grid;
  gap: 0.45rem;
}

.page-about .delta-bar {
  display: block;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-about .delta-bar--from {
  background: rgba(41, 64, 90, 0.85);
  color: var(--mist);
  border: 1px solid var(--line);
}

.page-about .delta-bar--to {
  background: linear-gradient(90deg, rgba(255, 138, 61, 0.9), rgba(255, 200, 87, 0.7));
  color: var(--mask);
  font-weight: 700;
}

.page-about .delta-row--cat .delta-bar--from {
  width: 58%;
}

.page-about .delta-row--cat .delta-bar--to {
  width: 100%;
}

.page-about .delta-row--depth .delta-bar--from {
  width: 100%;
}

.page-about .delta-row--depth .delta-bar--to {
  width: 66%;
}

.page-about .delta-result {
  display: grid;
  gap: 1rem;
  margin-top: 1.75rem;
}

.page-about .result-card {
  padding: 1.1rem 1.15rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(20, 40, 68, 0.6);
}

.page-about .result-card--mint {
  background: linear-gradient(165deg, rgba(111, 255, 194, 0.12), rgba(11, 23, 48, 0.85) 65%);
}

.page-about .result-num {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.1rem, 8vw, 3rem);
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--orange);
}

.page-about .result-card--mint .result-num {
  color: var(--mint);
}

.page-about .result-num i {
  font-style: normal;
  font-size: 0.45em;
  margin-left: 0.1em;
}

.page-about .result-label {
  margin: 0.5rem 0 0.45rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--paper);
}

.page-about .result-card p:last-child {
  margin: 0;
  color: var(--mist);
  font-size: 0.86rem;
  line-height: 1.75;
}

/* ---------- Scale ---------- */
.page-about .scale-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1.25rem 0 1.5rem;
}

.page-about .scale-item {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: rgba(11, 23, 48, 0.72);
}

.page-about .scale-num {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.6rem, 6vw, 2.2rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--cyan);
}

.page-about .scale-num span {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--mist);
  margin-left: 0.2rem;
}

.page-about .scale-label {
  margin: 0.55rem 0 0;
  color: var(--mist);
  font-size: 0.82rem;
  line-height: 1.7;
}

.page-about .cadence-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.page-about .cadence-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem;
  align-items: baseline;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--mist);
  font-size: 0.9rem;
  line-height: 1.75;
}

.page-about .cadence-key {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--mint);
  min-width: 2.6rem;
}

/* ---------- Who ---------- */
.page-about .who-grid {
  display: grid;
  gap: 1rem;
  margin-top: 1.25rem;
}

.page-about .who-card {
  display: flex;
  flex-direction: column;
  padding: 1.15rem;
  border: 1px solid var(--line);
  border-left: 2px solid var(--cyan);
  border-radius: var(--radius-s);
  background: rgba(11, 23, 48, 0.72);
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease);
}

.page-about .who-card:hover {
  transform: translateY(-2px);
  border-color: var(--cyan);
}

.page-about .who-card[hidden] {
  display: none;
}

.page-about .who-tag {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--cyan);
}

.page-about .who-card h3 {
  margin: 0.5rem 0 0.55rem;
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--paper);
}

.page-about .who-card p {
  margin: 0 0 1rem;
  color: var(--mist);
  font-size: 0.88rem;
  line-height: 1.8;
}

.page-about .who-link {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--orange);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 138, 61, 0.45);
  align-self: flex-start;
  padding-bottom: 0.15rem;
}

.page-about .who-link:hover {
  color: var(--amber);
}

/* ---------- Next ---------- */
.page-about .about-next {
  display: grid;
  gap: 1.25rem;
  margin-top: clamp(2rem, 5vw, 3.5rem);
  padding: clamp(1.35rem, 4vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background:
    radial-gradient(90% 140% at 100% 0%, rgba(61, 232, 255, 0.16), transparent 62%),
    linear-gradient(150deg, var(--glass), var(--night));
  box-shadow: var(--shadow-float);
}

.page-about .next-copy h2 {
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.35rem, 4.4vw, 2rem);
  letter-spacing: -0.03em;
}

.page-about .next-copy p {
  margin: 0;
  max-width: 32rem;
  color: var(--mist);
  font-size: 0.92rem;
  line-height: 1.8;
}

.page-about .next-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

/* ---------- Breakpoints ---------- */
@media (min-width: 640px) {
  .page-about .scene-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

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

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

@media (min-width: 900px) {
  .page-about .about-hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }

  .page-about .about-hero-visual {
    padding: 1.25rem 2rem 1.5rem 1.25rem;
  }

  .page-about .vertical-note {
    display: block;
    position: absolute;
    top: 1.5rem;
    right: 0.65rem;
    writing-mode: vertical-rl;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    color: rgba(168, 182, 201, 0.7);
  }

  .page-about .about-chapter {
    grid-template-columns: minmax(84px, 140px) minmax(0, 1fr);
    column-gap: clamp(1.5rem, 4vw, 3.25rem);
    align-items: start;
  }

  .page-about .chapter-num {
    position: sticky;
    top: 6rem;
  }

  .page-about .about-chapter .vertical-note {
    top: 2.5rem;
    right: 0;
    color: rgba(61, 232, 255, 0.45);
  }

  .page-about .chapter-body {
    padding-right: 2.5rem;
  }

  .page-about .delta-row {
    grid-template-columns: 7rem minmax(0, 1fr);
    align-items: center;
  }

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

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

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

@media (prefers-reduced-motion: reduce) {
  .page-about .chapter-nav a,
  .page-about .who-card,
  .page-about .check-toggle {
    transition: none;
  }

  .page-about .who-card:hover,
  .page-about .chapter-nav a:hover {
    transform: none;
  }
}