/* svc-lead-r58.css — services 页顶部四项能力:由「小册子目录」改成站上既有的四卡横排
   2026-10-09 · UI/UX

   委托:「很奇怪,看怎么优化展示,融入这个网站页面,目前很像小册子的目录导航」
   原因:ul.rows 三列素行 + 浏览器默认蓝色下划线链接 + 等宽小字 = 书的目录页,
   站上其他任何地方都没有这套装束,而且「链接」是唯一的可点暗示。
   做法:不新造组件。用 markets.html #scale 同款 .cards.cards--4 + .card--link
   (整卡可点、标题仍是真链接、悬停上浮 4px 由 site.css 提供,深/浅两套主题已覆盖)。
   本文件只补三件 site.css 里没有的小事:① 三行共用行轨(标题/说明/底线各自对齐)
   ② 标题右侧的 ↓ 去向记号 ③ 底线一行(原 row__state)。无颜色字面量,全部取 token。
   回退 = 删 services.html 与 en/services.html head 里引用本文件的 <link>,
   并把 <ul class="cards cards--4 svc-lead"> 换回 _bak 里的 <ul class="rows">。 */

.page-services .svc-lead.cards--4 > .card {
  grid-row: span 3;
  align-content: start;
}

.page-services .svc-lead .card__title {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
}
.page-services .svc-lead .card__title::after {
  content: "↓" / "";
  flex: none;
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--c-text-3);
  transition: color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.page-services .svc-lead .card:hover .card__title::after,
.page-services .svc-lead .card:focus-within .card__title::after {
  color: var(--c-primary-600);
  transform: translateY(3px);
}

.page-services .svc-lead .card__body { margin: 0; }
/* 卡窄时不在词中间断行(「同一套风/险口径」):CJK 只在空格与间隔号处换行,实在放不下再硬断 */
.page-services .svc-lead .card__body,
.page-services .svc-lead__rule { word-break: keep-all; overflow-wrap: break-word; }

.page-services .svc-lead__rule {
  margin: 0;
  padding-block-start: var(--s-3);
  border-block-start: 1px solid var(--c-divider);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--c-text-2);
}
.page-services .svc-lead__rule::before {
  content: "";
  display: inline-block;
  inline-size: 2px;
  block-size: 1em;
  margin-inline-end: var(--s-2);
  vertical-align: -.12em;
  background: var(--c-primary-600);
}

@media (prefers-reduced-motion: reduce) {
  .page-services .svc-lead .card__title::after { transition: none; transform: none; }
}