/* 公司简介页专用，复用 info-depth.css 的展示层与深色身份。 */

/* 简介页是阅读型长文：单栏居中起手，视觉重点全部留给下面那条四段链路。
   两栏 hero 需要一张承载信息的配图，这一页没有——硬塞一张风景照属于
   "不对应任何东西的装饰"，规范里禁止。 */
.about-hero{grid-template-columns:1fr;min-height:auto;padding-top:clamp(56px,7vw,104px);text-align:center}
.about-hero .depth-hero-copy{max-width:1100px;margin-inline:auto}
.about-hero h1{font-size:clamp(34px,4.2vw,62px)}
.about-hero .depth-lead{margin-inline:auto;max-width:820px}
.about-hero .depth-actions{justify-content:center}

/* 四段链路：卡片之间用一条连线表达"接成一条"，这是本页唯一的重点。
   连线画在卡片之间的空隙上，窄屏转竖排时隐藏（横线在竖排里没有意义）。 */
.chain-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;margin-top:44px;position:relative;text-align:left}
.chain-grid::before{content:"";position:absolute;top:74px;left:12%;right:12%;height:2px;
  background:linear-gradient(90deg,#1f4a7a,#4cacff 30%,#4cacff 70%,#1f4a7a);opacity:.55}
.chain-grid article{padding:28px 24px 30px;display:flex;flex-direction:column;gap:14px}
.chain-grid .chain-no{font-family:var(--mono,ui-monospace,monospace);font-variant-numeric:tabular-nums;
  font-size:14px;letter-spacing:.14em;color:#83c9ff}
.chain-grid h3{color:#fff}
.chain-grid p{color:var(--depth-muted);font-size:16px;line-height:1.8;margin:0}
.chain-grid .depth-icon{width:38px;height:38px}

/* 服务对象：两张卡，一头卖家一头收件人。 */
.serve-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;margin-top:40px;text-align:left}
.serve-grid article{padding:32px 30px 34px;display:flex;gap:22px;align-items:flex-start}
.serve-grid h3{color:#fff;margin-bottom:10px}
.serve-grid p{color:var(--depth-muted);font-size:16px;line-height:1.85;margin:0}

/* 产品归属那一段：正文限宽到一行 100 字以内，长行读不下去。 */
.about-prose{max-width:1100px;margin-inline:auto;color:#c8d4e2;font-size:18px;line-height:1.9;margin-top:18px}
.about-links{display:flex;gap:26px;flex-wrap:wrap;justify-content:center;margin-top:34px}

/* 公司信息：定义列表左对齐，字段名固定宽度，值等宽起排。 */
.company-card{max-width:760px;margin:40px auto 0;padding:34px 38px;text-align:left}
.company-card dl{display:grid;grid-template-columns:auto 1fr;gap:18px 32px;margin:0}
.company-card dt{color:#8fa5bd;font-size:16px;white-space:nowrap}
.company-card dd{margin:0;color:#eef3f9;font-size:17px;line-height:1.7}
.company-card dd a{color:var(--depth-blue);text-decoration:underline;text-underline-offset:4px}

@media (max-width:1100px){
  .chain-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chain-grid::before{display:none}
}
@media (max-width:720px){
  .chain-grid,.serve-grid{grid-template-columns:1fr}
  .serve-grid article{flex-direction:column;align-items:flex-start;gap:14px}
  .company-card{padding:26px 22px}
  .company-card dl{grid-template-columns:1fr;gap:6px 0}
  .company-card dt{margin-top:12px}
}