/* ==========================================================================
   思麒康 · 官网设计系统
   思其所需，护其安康。
   基调：温暖象牙白底 / 柔和森林绿品牌色 / 陶土橙行动色
   原则：明亮、有呼吸感、尊重长辈；不医疗化、不过度科技化、不堆卡片
   ========================================================================== */

/* ---------- 1. 设计令牌 ---------- */
:root {
  /* 背景：象牙白，不用纯白，减少屏幕反光对长辈眼睛的压力 */
  --paper: #FDFAF4;
  --paper-2: #F7F1E6;   /* 交替区块 */
  --paper-3: #FBF6EC;   /* 卡片底 */
  --white: #FFFFFF;

  /* 品牌色：柔和森林绿 */
  --green-900: #16453B;
  --green-800: #1D5849;
  --green-700: #2E6E60;   /* 主品牌色 */
  --green-600: #3D8474;
  --green-400: #6BA595;
  --green-200: #A8CCC2;
  --green-100: #D9EAE4;
  --green-050: #ECF4F1;

  /* 行动色：陶土橙（白字 4.8:1，达 WCAG AA） */
  --clay-800: #7E3F22;
  --clay-700: #9C4F2C;
  --clay-600: #B05A32;
  /* 深底上的浅陶土：在 --green-900 上 5.1:1，满足小字 4.5:1 */
  --clay-400: #E0A47C;
  --clay-100: #F6E2D5;
  --clay-050: #FCF1E9;

  /* 文字 */
  --ink: #23302C;
  --ink-2: #3E4C47;
  --muted: #5E6B66;
  --muted-2: #626F6A;

  /* 描边：暖灰，不用冷灰 */
  --line: #E7E0D3;
  --line-2: #F0EAE0;

  /* 圆角：按钮/输入 10、卡片/图片 14、标签胶囊 */
  --r-btn: 10px;
  --r-card: 14px;
  --r-pill: 999px;

  /* 阴影：只有一档，轻 */
  --shadow: 0 1px 2px rgba(35, 48, 44, .04), 0 10px 28px rgba(35, 48, 44, .07);
  --shadow-sm: 0 1px 2px rgba(35, 48, 44, .05), 0 2px 8px rgba(35, 48, 44, .04);

  /* 版心：正文另有更窄的可读宽度 */
  --maxw: 1280px;
  --maxw-text: 46rem;
  --gutter: 24px;

  /* 字号：适老化，正文 17px 起，移动端不缩小 */
  --fs-body: 17px;
  --lh-body: 1.85;

  --nav-h: 72px;
}

/* ---------- 2. 基础 ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 20px);
}

body {
  margin: 0;
  font-family: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Source Han Sans SC",
               "Noto Sans CJK SC", "Hiragino Sans GB", system-ui, -apple-system, sans-serif;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.35; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 3px solid var(--clay-600); outline-offset: 3px; border-radius: 6px; }

.skip-link {
  position: absolute; left: 12px; top: -80px; z-index: 999;
  background: var(--green-700); color: #fff; padding: 12px 20px;
  border-radius: 0 0 10px 10px; transition: top .2s;
}
.skip-link:focus { top: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 3. 布局 ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: 880px; }

.section { padding: 104px 0; position: relative; }
.section--tight { padding: 68px 0; }
.section--soft { background: var(--paper-2); }
.section--white { background: var(--white); }
.section--dark { background: var(--green-800); color: rgba(255, 255, 255, .84); }
.section--dark .sec-title, .section--dark h2, .section--dark h3 { color: #fff; }
.section--dark .sec-sub { color: rgba(255, 255, 255, .78); }

.grid { display: grid; gap: 24px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split--rev > *:first-child { order: 2; }
/* 网格子项默认 min-width:auto，内部若有横向滚动条（如 .phone-rail）会把轨道撑破视口。
   置 0 让轨道可以收缩，横向滚动交还给滚动容器自己。 */
.split > *, .grid > * { min-width: 0; }
/* 正文段落限宽，避免长行横跨整屏 */
.measure { max-width: var(--maxw-text); }

/* ---------- 4. 标题层级 ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700; letter-spacing: .16em;
  color: var(--green-700); margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--clay-600); }
.eyebrow--accent { color: var(--clay-700); }
.section--dark .eyebrow { color: rgba(255, 255, 255, .78); }
.section--dark .eyebrow::before { background: var(--clay-400); }

.sec-head { max-width: 40rem; margin-bottom: 52px; }
.sec-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head--center .eyebrow { justify-content: center; }
.sec-title { font-size: clamp(27px, 3.1vw, 40px); letter-spacing: -.01em; }
.sec-title em { font-style: normal; color: var(--green-700); }
.sec-sub { margin-top: 18px; font-size: 18px; color: var(--muted); line-height: 1.82; }

/* ---------- 5. 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: var(--r-btn);
  font-size: 16.5px; font-weight: 700; border: 1.5px solid transparent;
  cursor: pointer; transition: background .18s ease, border-color .18s ease, color .18s ease;
  white-space: nowrap; text-align: center;
}
.btn .ic { width: 19px; height: 19px; }
.btn--primary { background: var(--clay-600); color: #fff; }
.btn--primary:hover { background: var(--clay-700); }
.btn--brand { background: var(--green-700); color: #fff; }
.btn--brand:hover { background: var(--green-800); }
.btn--ghost { background: transparent; color: var(--green-800); border-color: var(--line); }
.btn--ghost:hover { background: var(--green-050); border-color: var(--green-200); }
.btn--white { background: #fff; color: var(--green-800); }
.btn--white:hover { background: var(--paper-2); }
.btn--onbrand { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .45); }
.btn--onbrand:hover { background: rgba(255, 255, 255, .24); }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: 15px; }
.btn--lg { min-height: 58px; padding: 0 32px; font-size: 17.5px; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.textlink {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-weight: 700; color: var(--green-700);
}
.textlink .ic { width: 17px; height: 17px; transition: transform .18s; }
.textlink:hover { color: var(--clay-700); }
.textlink:hover .ic { transform: translateX(4px); }

/* ---------- 6. 图标 ---------- */
.ic {
  width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round; flex: none;
}
.icon-badge {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  margin-bottom: 18px; background: var(--green-050); color: var(--green-700);
}
.icon-badge .ic { width: 22px; height: 22px; }
.icon-badge--accent { background: var(--clay-050); color: var(--clay-700); }
.icon-badge--white { background: rgba(255, 255, 255, .14); color: #fff; }
.icon-badge--sm { width: 40px; height: 40px; border-radius: 10px; margin-bottom: 14px; }
.icon-badge--sm .ic { width: 19px; height: 19px; }

/* ---------- 7. 顶栏与导航 ---------- */
.topbar { background: var(--green-900); color: rgba(255, 255, 255, .8); font-size: 13.5px; }

.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; }
.topbar a { display: inline-flex; align-items: center; min-height: 44px; }

.topbar-left { display: flex; align-items: center; gap: 18px; }
.topbar-slogan {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; letter-spacing: .1em; color: var(--clay-400);
}
.topbar-slogan .ic { width: 15px; height: 15px; }
.topbar a:hover { color: #fff; }

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(253, 250, 244, .92); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line-2);
}
.site-header.is-stuck { box-shadow: 0 1px 16px rgba(35, 48, 44, .07); }
.nav { display: flex; align-items: center; gap: 24px; height: var(--nav-h); }

.brand { display: flex; align-items: center; gap: 11px; flex: none; min-height: 44px; }
/* 站标图片：品牌标识裁出的心形图案，透明底、无外框，所以不加圆角与底色 */
.brand-mark { width: 40px; height: 40px; flex: none; display: block; object-fit: contain; }
.brand-text { line-height: 1.2; }
.brand-name { display: block; font-size: 19px; font-weight: 800; letter-spacing: .04em; color: var(--green-900); }
.brand-tag { display: block; font-size: 11.5px; color: var(--muted-2); letter-spacing: .18em; }

.nav-menu { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-item { position: relative; }
/* 一级栏目 9 项平铺，内边距按容器余量收到 11px —— 再宽就会顶到 CTA 按钮 */
.nav-link {
  display: flex; align-items: center; gap: 5px; height: var(--nav-h); padding: 0 11px;
  font-size: 16px; font-weight: 600; color: var(--ink-2); position: relative; white-space: nowrap;
}
.nav-link:hover { color: var(--green-700); }
.nav-link[aria-current="page"], .nav-item.is-active > .nav-link { color: var(--green-800); }
.nav-link[aria-current="page"]::after, .nav-item.is-active > .nav-link::after {
  content: ""; position: absolute; left: 11px; right: 11px; bottom: 18px; height: 2px; background: var(--clay-600);
}
.nav-link .caret { width: 12px; height: 12px; stroke-width: 2.2; opacity: .5; }

/* 左对齐到触发项。原来是 right:0，中间栏目的下拉会整块甩到左边去 */
.nav-drop {
  position: absolute; left: 0; top: calc(var(--nav-h) - 8px);
  min-width: 250px; background: #fff; border-radius: var(--r-card);
  box-shadow: var(--shadow); border: 1px solid var(--line-2); padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: all .18s ease;
}
.nav-item:hover .nav-drop, .nav-item:focus-within .nav-drop { opacity: 1; visibility: visible; transform: none; }
.nav-drop a { display: block; padding: 11px 14px; border-radius: 9px; font-size: 15.5px; font-weight: 600; color: var(--ink-2); }
.nav-drop a:hover { background: var(--green-050); color: var(--green-800); }
.nav-drop .dd-note { display: block; font-size: 12.5px; font-weight: 400; color: var(--muted-2); margin-top: 2px; }
.nav-drop hr { border: 0; border-top: 1px solid var(--line-2); margin: 8px 6px; }

.nav-cta { display: flex; align-items: center; gap: 10px; flex: none; }
.nav-toggle {
  display: none; width: 46px; height: 46px; border: 1px solid var(--line);
  background: #fff; border-radius: 10px; cursor: pointer; margin-left: auto;
}
.nav-toggle .ic { margin: 0 auto; }

/* 移动端抽屉 */
.mnav {
  position: fixed; inset: 0; z-index: 200; background: var(--paper);
  transform: translateX(100%); transition: transform .26s ease; overflow-y: auto;
}
.mnav.is-open { transform: none; }
.mnav-head { display: flex; align-items: center; justify-content: space-between; padding: 14px var(--gutter); border-bottom: 1px solid var(--line-2); }
.mnav-close { width: 46px; height: 46px; border: 1px solid var(--line); background: #fff; border-radius: 10px; }
.mnav-body { padding: 8px var(--gutter) 0; }
.mnav-group { border-bottom: 1px solid var(--line-2); }
.mnav-group > a, .mnav-group > button {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  min-height: 56px; padding: 8px 4px; font-size: 17.5px; font-weight: 700;
  background: none; border: 0; text-align: left; cursor: pointer;
}
.mnav-sub { display: none; padding: 0 4px 12px; }
.mnav-group.is-open .mnav-sub { display: block; }
.mnav-group.is-open > button .ic { transform: rotate(180deg); }
.mnav-sub a { display: flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 9px; background: var(--green-050); margin-bottom: 8px; font-weight: 600; color: var(--green-800); }
.mnav-foot { padding: 22px var(--gutter) 40px; display: grid; gap: 12px; }

/* ---------- 8. 首屏视频 ---------- */
.hero-video {
  position: relative; min-height: 92svh; display: flex; align-items: center;
  padding: calc(var(--nav-h) + 40px) 0 64px; overflow: hidden;
  /* 视频未播放 / 加载失败 / 用户偏好减少动效时的兜底画面 */
  background: var(--green-900) url("../img/hero-poster.jpg") center / cover no-repeat;
}
.hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 64% center; z-index: 0;
}
/* 遮罩：左侧压暗保证文字可读，右侧几乎透明，让画面保持明亮通透 */
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(18, 46, 39, .82) 0%, rgba(18, 46, 39, .62) 32%,
                    rgba(18, 46, 39, .24) 58%, rgba(18, 46, 39, .04) 80%),
    linear-gradient(to top, rgba(18, 46, 39, .34) 0%, transparent 34%);
}
.hero-video .wrap { position: relative; z-index: 2; }
.hero-copy { max-width: 43rem; color: #fff; }
.hero-brand {
  display: flex; align-items: center; gap: 14px; margin-bottom: 26px;
  font-size: 14px; font-weight: 700; letter-spacing: .18em; color: rgba(255, 255, 255, .92);
}
.hero-brand::before { content: ""; width: 30px; height: 2px; background: var(--clay-400); }
.hero-brand .sep { opacity: .45; }
/* 字号上限 52px 是配着主标题「陪伴父母就医、办事与生活。」这行 13 个字算的：
   13 字 × 52px 落在 .hero-copy 的 43rem 之内，才能保住「一样，/ 陪伴…」这个两行断法。
   标题文案变长时要重算，否则末尾会掉出一个孤字。 */
.hero-title {
  font-size: clamp(28px, 4.4vw, 52px); line-height: 1.22; color: #fff;
  letter-spacing: -.015em; text-wrap: balance;
}
.hero-sub {
  margin-top: 22px; font-size: 18px; line-height: 1.85;
  color: rgba(255, 255, 255, .9); max-width: 34rem;
}
.hero-actions { margin-top: 36px; }
/* 弱化的第二个次入口（咨询客服）：.textlink 默认是深绿字，落在视频上读不出来，
   这里单独压成白字，并把字号权重降下去，确保它不跟两个按钮抢注意力。 */
.hero-alt { margin-top: 6px; }
.hero-alt .textlink {
  font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, .82);
}
.hero-alt .textlink:hover { color: #fff; }
.hero-note {
  margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .22);
  display: flex; flex-wrap: wrap; gap: 10px 28px;
}
.hero-note li { display: flex; align-items: center; gap: 9px; font-size: 15px; color: rgba(255, 255, 255, .88); }
.hero-note .ic { width: 18px; height: 18px; color: var(--clay-400); }

/* ---------- 9. 内页页头 ---------- */
/* 内页首屏：方案A横幅（商标+标语在左上角，源图桌面《思麒麟首屏布局对比》），
   零调色原色直出（用户 2026-08-13 定），浅底配深色文字。
   图内商标块约占画面左上 x 0–24%、y 0–22%——正文列用 vw 公式向右避让，
   保证任何屏宽下页面文字都不压商标；纵向定位 8% 让商标完整入画。 */
/* min-height 42.3vw + 纵向定位 25%：保证任何屏宽下都露出画面 y 6%–80% 区段
   （用户 2026-08-13 红框圈定：商标上沿到爱心曲线/牵手下方，勿再降低）。
   商标+标语改为独立图层 brand-lockup.png（用户提供的透明底高清版，1236×556）：
   不随照片 cover 缩放、不受 JPG 压缩，任何屏宽都锐利；落位与尺寸（左 4vw、宽 19.5vw）
   对应正文避让公式的 23.6vw 商标区。背景照片里原烤死的商标已在素材里糊掉，勿回退旧图。 */
.pagehead {
  background:
    url("../img/brand-lockup.png") left 4vw top 44px / 15vw auto no-repeat,
    linear-gradient(90deg, rgba(255, 255, 255, .58) 0%, rgba(255, 255, 255, .52) 42%,
      rgba(255, 255, 255, .34) 68%, rgba(255, 255, 255, 0) 86%),
    #EAF2F8 url("../img/pagehead.jpg") center 25% / cover no-repeat;
  color: var(--ink); padding: 96px 0 112px; min-height: 42.3vw;
  /* 页头高度由 min-height 撑开，文案短的页面（about / cities / news …）原来全部顶在
     上沿，下半屏空一大块。改成在剩余空间里纵向居中：文案长到把 min-height 撑满的页面
     （app-user 这类）没有剩余空间，位置与原来逐像素一致，只有留白多的页面往下落。
     左侧避让与文字对齐不变，只动纵向。 */
  display: flex; flex-direction: column; justify-content: center;
}
/* 正文向右避让商标层（商标右缘 = left 4vw + 宽 15vw = 19vw，再留 2vw 呼吸）。
   商标尺寸一改，这里的 21vw 要跟着改，否则中等屏正文被推得过右、压到人物。 */
.pagehead .wrap {
  padding-left: max(var(--gutter), calc(21vw + 28px - max((100vw - 1280px) / 2, 0px)));
}
.pagehead h1, .pagehead .lead, .pagehead .crumb, .pagehead .eyebrow {
  text-shadow: 0 0 2px rgba(255, 255, 255, .55), 0 1px 16px rgba(255, 255, 255, .5);
}
.pagehead .btn--onbrand {
  background: rgba(255, 255, 255, .74); color: var(--green-800);
  border-color: rgba(29, 88, 73, .3);
}
.pagehead .btn--onbrand:hover { background: #fff; }
/* 平板档（761–1120）：视口变窄后 cover 把人物放大、正文又被商标避让推向右，
   桌面那道横向纱罩到 68% 已降到 .34，正文尾字正好落在人物外套上。
   这一档不改照片调色，只做三件事：画面取景左移让出人物、纱罩延长加厚、避让收紧。 */
@media (min-width: 761px) and (max-width: 1240px) {
  .pagehead {
    background:
      url("../img/brand-lockup.png") left 3.5vw top 36px / 19vw auto no-repeat,
      linear-gradient(90deg, rgba(255, 255, 255, .84) 0%, rgba(255, 255, 255, .8) 52%,
        rgba(255, 255, 255, .62) 76%, rgba(255, 255, 255, .12) 100%),
      #EAF2F8 url("../img/pagehead.jpg") 26% 25% / cover no-repeat;
    padding: 72px 0 84px;
  }
  .pagehead .wrap { padding-left: max(var(--gutter), calc(23.5vw + 20px)); }
  .pagehead .lead, .pagehead .ticks { max-width: 34rem; }
}
.pagehead h1 { font-size: clamp(28px, 3.6vw, 42px); margin-top: 12px; letter-spacing: -.01em; }
.pagehead .lead { margin-top: 18px; font-size: 18px; color: var(--ink-2); max-width: 42rem; line-height: 1.82; }
.pagehead .btn-row { margin-top: 30px; }
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.crumb a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 6px; margin: 0 -6px; }
.crumb a:hover { color: var(--ink); text-decoration: underline; }
.crumb span { opacity: .55; }

/* ---------- 10. 图片 ---------- */
.photo { margin: 0; border-radius: var(--r-card); overflow: hidden; background: var(--green-050); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo--tall { aspect-ratio: 3 / 4; }
.photo--wide { aspect-ratio: 16 / 10; }
.photo--square { aspect-ratio: 1 / 1; }
.photo figcaption { padding: 12px 2px 0; font-size: 14px; color: var(--muted); }

/* ---------- 10b. 影像基调 ----------
   照片来源不一：外景、室内、不同相机与色温，直接铺上去会各说各话。
   一层轻滤镜把饱和度与明度拉齐，做在容器上，
   换成实拍照片时不需要重新修图，观感自动接上。

   注：曾试过在照片上叠一层印刷网点（仿 Benesse 的网屏），
   实际渲染出来是一层看得见的网格，不是纹理——已整体移除，不要再加回来。
   ------------------------------------------------------------------ */
:root {
  --film: saturate(.9) contrast(1.02) brightness(1.04);
}

.scene-art { position: relative; }

.photo img, .svc-art img, .video-slot img,
.core-art img, .scene-art img { filter: var(--film); }

/* ---------- 10c. 章节影像带 ----------
   一整段内容坐在一张照片上，照片固定不动，内容从它上面滚过去 ——
   照片因此是「舞台」而不是段落里的一张插图：它不抢正文，但整段的气氛由它定。

   两种变体，用途不同，不要混：
     .scene--soft  照片被虚化压成氛围底，深色文字直接排在上面。用于讲理念、讲主张。
     .scene--rich  照片保持清晰，单侧压深，白字压在安静的一侧。用于叙事、讲故事。
   ------------------------------------------------------------------ */
.scene { position: relative; isolation: isolate; overflow: hidden; padding: 132px 0; }

.scene-bg {
  position: absolute; inset: 0; z-index: -2;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  /* 内容滚过去，照片不动。注意：这一层**不能加 filter/transform**，
     两者都会让 background-attachment: fixed 退化成 scroll，视差就没了。
     调色统一交给下面 ::before 那层纱。 */
  background-attachment: fixed;
}

/* 遮罩层：一层有方向的纱。文字侧压到接近纸底，画面侧留通透 */
.scene::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(94deg,
      rgba(253, 250, 244, .97) 0%, rgba(253, 250, 244, .93) 34%,
      rgba(253, 250, 244, .66) 62%, rgba(253, 250, 244, .3) 100%);
}

/* 浅调：轻虚化的实景底。backdrop-filter 虚化的是它身后那层背景图，
   所以不必给 .scene-bg 加 filter，视差得以保留。 */
.scene--soft::before {
  /* 虚化只到「柔」为止 —— 海滨要认得出海和沙滩，文字侧靠纱罩渐变保证可读 */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background:
    linear-gradient(94deg,
      rgba(253, 250, 244, .93) 0%, rgba(253, 250, 244, .85) 40%,
      rgba(253, 250, 244, .48) 68%, rgba(253, 250, 244, .16) 100%);
}

/* 浓调：照片保持清晰，只在文字一侧压深，白字压上去 */
.scene--rich { color: rgba(255, 255, 255, .88); }
.scene--rich::before {
  background:
    linear-gradient(96deg,
      rgba(18, 46, 39, .9) 0%, rgba(18, 46, 39, .8) 32%,
      rgba(18, 46, 39, .46) 62%, rgba(18, 46, 39, .14) 100%),
    linear-gradient(to top, rgba(18, 46, 39, .32) 0%, transparent 30%);
}
.scene--rich .sec-title, .scene--rich h2, .scene--rich h3 { color: #fff; }
.scene--rich .sec-sub { color: rgba(255, 255, 255, .86); }
.scene--rich .eyebrow { color: rgba(255, 255, 255, .82); }
.scene--rich .eyebrow::before { background: var(--clay-400); }
.scene--rich .pullquote { color: #fff; }
.scene--rich .pullquote span { color: var(--clay-400); }
.scene--rich .textlink { color: #fff; }
.scene--rich .textlink:hover { color: var(--clay-400); }

.scene-copy { max-width: 42rem; }
.scene-copy .sec-title + .sec-sub { margin-top: 20px; }

/* 文字换到右半边。用在画面主体偏左的照片上 ——
   照片里的人往哪边站，文字就往另一边让，两者不要互相压。 */
.scene--right .scene-copy { margin-left: auto; }
.scene--right::before {
  background:
    linear-gradient(266deg,
      rgba(253, 250, 244, .97) 0%, rgba(253, 250, 244, .93) 34%,
      rgba(253, 250, 244, .66) 62%, rgba(253, 250, 244, .3) 100%);
}
.scene--rich.scene--right::before {
  background:
    linear-gradient(264deg,
      rgba(18, 46, 39, .9) 0%, rgba(18, 46, 39, .8) 32%,
      rgba(18, 46, 39, .46) 62%, rgba(18, 46, 39, .14) 100%),
    linear-gradient(to top, rgba(18, 46, 39, .32) 0%, transparent 30%);
}

/* 浮层对切卡：卡自己也是一张照片，图向文字区渐隐，两者之间没有硬边。
   卡是半透明的，背后那张章节照隐约透上来，层次才叠得起来。 */
.scene-panel {
  /* 字释带扩到三层后文字列要够宽，否则做法句每列折三行、断词难看 */
  display: grid; grid-template-columns: .68fr 1.32fr;
  margin-top: 48px; border-radius: var(--r-card); overflow: hidden;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(6px) saturate(1.1);
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: var(--shadow);
}
.scene-art { min-height: 300px; }
.scene-art img { width: 100%; height: 100%; object-fit: cover; }
/* 照片向右渐隐进文字面板 */
.scene-art::before {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to right, transparent 58%, rgba(255, 255, 255, .5) 84%, rgba(255, 255, 255, .9) 100%);
}
.scene-panel-copy { padding: 40px 40px 36px; color: var(--ink); }
.scene-panel-copy h3 { font-size: 21px; margin-bottom: 12px; }
.scene-panel-copy p { color: var(--muted); font-size: 16px; }

/* 浮层卡是浅底的，.scene--rich 那套白字规则不能漏进来，否则白底白字。
   写全选择器压过上面的 .scene--rich h3 / .textlink。 */
.scene--rich .scene-panel-copy { color: var(--ink); }
.scene--rich .scene-panel-copy h3, .scene--rich .scene-panel-copy h4 { color: var(--green-900); }
.scene--rich .scene-panel-copy p { color: var(--muted); }
.scene--rich .scene-panel-copy .eyebrow { color: var(--green-700); }
.scene--rich .scene-panel-copy .eyebrow::before { background: var(--clay-600); }
.scene--rich .scene-panel-copy .textlink { color: var(--green-700); }
.scene--rich .scene-panel-copy .textlink:hover { color: var(--clay-700); }

/* ---------- 10d. 字释带（品牌三字） ----------
   思 / 麒 / 康 是把品牌名拆开来讲，这三个字得当「字」看，不是当小标题看。
   所以：
     · 字放到有笔画可读的尺寸，它自己就是这一块的图形，不再另配图标；
     · 字下压一道陶土短线，给字一个落点，也把整块唯一的一点暖色放在这里；
     · 三列之间用一条竖细线串起来，读成一条带，而不是三块并排的灰字。
   分隔线用绝对定位吊在列间距正中，列宽因此保持严格等分，句子换行位置才不会一列一个样。
   ------------------------------------------------------------------ */
.glyphs { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 36px; margin-top: 26px; }
.glyph { position: relative; }
/* 卡是半透明的，线要比常规描边再深一点才浮得出来，用 --line-2 会消失 */
.glyph + .glyph::before {
  content: ""; position: absolute; left: -18px; top: 4px; bottom: 4px;
  width: 1px; background: var(--line);
}
.glyph-char {
  display: block; font-size: 40px; font-weight: 800; line-height: 1;
  color: var(--green-800); letter-spacing: .04em;
}
.glyph-char::after {
  content: ""; display: block; width: 22px; height: 2px; border-radius: 2px;
  margin: 14px 0 15px; background: var(--clay-600);
}
.glyph p { margin: 0; font-size: 15.5px; line-height: 1.78; color: var(--ink-2); }

/* 三层字释：关键词（陶土小字）→ 释义句（加重，品牌原文）→ 做法句（灰、小一号）。
   .glyph p 与 .scene--rich .scene-panel-copy p 都会压色，选择器写足层级盖回来。 */
.glyph .glyph-key { font-size: 13px; font-weight: 700; letter-spacing: .14em; color: var(--clay-700); margin-bottom: 7px; }
.glyph .glyph-lead { font-weight: 600; color: var(--ink); }
.glyph .glyph-how { margin-top: 9px; font-size: 14.5px; line-height: 1.7; color: var(--muted); }
.scene--rich .scene-panel-copy .glyph-key { color: var(--clay-700); }
.scene--rich .scene-panel-copy .glyph-lead { color: var(--ink); }
.scene--rich .scene-panel-copy .glyph-how { color: var(--muted); }

/* ---------- 11. 卡片 ---------- */
.card {
  background: var(--white); border: 1px solid var(--line-2); border-radius: var(--r-card);
  padding: 30px; height: 100%; display: flex; flex-direction: column;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.card:hover { border-color: var(--green-200); box-shadow: var(--shadow-sm); }
.card h3 { font-size: 19px; margin-bottom: 10px; }
.card p { color: var(--muted); font-size: 16px; line-height: 1.8; }
.card .card-foot { margin-top: auto; padding-top: 16px; }
.card--flat:hover { border-color: var(--line-2); box-shadow: none; }
.card--soft { background: var(--paper-3); border-color: transparent; }
.card--mint { background: var(--green-050); border-color: transparent; }
.card--accent { background: var(--clay-050); border-color: transparent; }
.section--soft .card { background: #fff; }
/* 深色卡写成 .card.card--dark，权重需高于 .section--soft .card，否则白底白字 */
.card.card--dark { background: var(--green-800); border-color: transparent; color: rgba(255, 255, 255, .8); }
.card.card--dark h3, .card.card--dark h4 { color: #fff; }
.card.card--dark p { color: rgba(255, 255, 255, .76); }
.card.card--dark .card-tag { background: rgba(255, 255, 255, .16); color: #fff; }
.card.card--dark:hover { border-color: transparent; }

.card-tag {
  display: inline-block; font-size: 12.5px; font-weight: 700; padding: 5px 12px;
  border-radius: var(--r-pill); background: var(--green-050); color: var(--green-700); margin-bottom: 14px;
}
.card-tag--accent { background: var(--clay-050); color: var(--clay-700); }
/* .card 是纵向 flex，行内块子项会被拉满整行——胶囊标签只收自己那一截 */
.card > .card-tag { align-self: flex-start; }

/* 保障卡「你可以核对」行：把每条保障落到一个家属真的能做的核对动作上（guarantee.html） */
.verify {
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line-2);
  font-size: 14.5px; color: var(--muted-2); line-height: 1.75;
}
.verify strong { color: var(--green-800); }
.verify .textlink { font-size: inherit; min-height: 0; }
/* 深色段落里的核对行与保险说明：灰字压不住深绿底，整体提亮，链接用浅陶土 */
.section--dark .verify { border-color: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .72); }
.section--dark .verify strong { color: rgba(255, 255, 255, .92); }
.section--dark .verify .textlink, .section--dark .notice .textlink { color: var(--clay-400); }
.section--dark .verify .textlink:hover, .section--dark .notice .textlink:hover { color: #fff; }

/* 服务卡（图 + 文） */
.svc-card { padding: 0; overflow: hidden; position: relative; transition: transform .24s ease, box-shadow .24s ease, border-color .2s ease; }
.svc-card .svc-art {
  aspect-ratio: 16 / 9; background: var(--green-050); overflow: hidden;
  /* flex 子项的 min-height:auto 会以图片固有高度作下限，把 aspect-ratio 顶掉：
     竖版图会被撑成两倍高，同一行卡片高度就不齐。置 0 交还给 aspect-ratio。 */
  min-height: 0;
  /* 图与文之间不留硬边：图片下缘渐隐进卡片底色 */
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, rgba(0, 0, 0, .5) 92%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 78%, rgba(0, 0, 0, .5) 92%, transparent 100%);
}
.svc-card .svc-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.svc-card .svc-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.svc-card .svc-body h4 { font-size: 18px; margin-bottom: 8px; }
.svc-card .svc-body p { font-size: 15.5px; line-height: 1.75; }
.svc-card .card-foot { padding-top: 12px; }

/* 整卡可点：让卡内那个链接铺满整张卡，既不产生嵌套链接，也保留键盘可达 */
.svc-card .card-foot a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.svc-card:hover { transform: scale(1.015); box-shadow: var(--shadow); border-color: var(--green-200); }
.svc-card:hover .svc-art img { transform: scale(1.05); }
.svc-card:active { transform: scale(1.005); }
.svc-card:focus-within { border-color: var(--green-400); }

/* ---------- 11b. 处境卡叠 ----------
   版式参照 Papa (papa.com) 的资源卡：三张场景卡叠成一沓放在文字右侧，
   点一下最上面那张飞出去、垫到底下，下一张顶上来。
   关键取舍：
     · 叠放只在 .js 下生效 —— 无 JS 时三张卡就是普通竖排，内容一张不少；
     · 三张卡叠进同一个 grid 单元格（grid-area:1/1），容器高度由最高的卡决定，
       不用绝对定位，也就不用手写容器高度；
     · DOM 顺序始终不动，谁在上面全靠 data-pos + z-index，读屏顺序因此是稳的。 */
.plight-list { display: none; }
.js .plight-list { display: grid; gap: 4px; margin-top: 28px; max-width: 24rem; }
.plight-list button {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 52px;
  padding: 6px 16px; border: 0; border-radius: var(--r-btn); background: none;
  text-align: left; cursor: pointer; font-size: 17px; font-weight: 700; color: var(--muted);
  transition: background .18s ease, color .18s ease;
}
.plight-list button:hover { background: var(--green-050); color: var(--green-800); }
.plight-list li.is-active button { background: var(--green-050); color: var(--green-900); }
.plight-num { font-size: 12.5px; letter-spacing: .08em; color: var(--clay-700); }

.plight-stack { display: grid; gap: 24px; }

.pcard {
  background: var(--white); border: 1px solid var(--line-2); border-radius: var(--r-card);
  overflow: hidden; box-shadow: var(--shadow-sm);
}
.pcard-art {
  aspect-ratio: 16 / 10; background: var(--green-050); overflow: hidden; min-height: 0;
  /* 与服务卡同一手法：图片下缘渐隐进卡底，图文之间不留硬边 */
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, rgba(0, 0, 0, .5) 92%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 78%, rgba(0, 0, 0, .5) 92%, transparent 100%);
}
.pcard-art img { width: 100%; height: 100%; object-fit: cover; filter: var(--film); }
.pcard-body { padding: 8px 26px 26px; }
.pcard-body .icon-badge--sm { margin-bottom: 12px; }
.pcard-body h3 { font-size: 19px; margin-bottom: 8px; }
.pcard-body p { margin: 0; font-size: 15.5px; color: var(--muted); line-height: 1.78; }

/* JS 可用：竖排转卡叠 */
.js .plight-stack {
  gap: 0; cursor: pointer; width: min(430px, 88%); margin: 0 auto;
  /* 旋转的卡角会探出容器，上下留缓冲，别顶到相邻内容 */
  padding: 28px 0 36px;
}
/* 背后垫两张品牌色的"纸"——Papa 那两张彩色衬卡的意思。
   伪元素同样占 1/1 单元格，默认拉伸成与卡同高。 */
.js .plight-stack::before, .js .plight-stack::after {
  content: ""; grid-area: 1 / 1; border-radius: var(--r-card);
}
.js .plight-stack::before { background: var(--green-100); transform: translate(8%, 4%) rotate(7deg) scale(.93); }
.js .plight-stack::after { background: var(--clay-100); transform: translate(-7%, -3%) rotate(-9deg) scale(.92); }

.js .pcard {
  grid-area: 1 / 1; z-index: 1;
  transition: transform .5s cubic-bezier(.2, .75, .25, 1.1), opacity .38s ease, box-shadow .3s ease;
  will-change: transform;
}
.js .pcard[data-pos="0"] { z-index: 5; transform: rotate(-1.5deg); box-shadow: var(--shadow); }
.js .pcard[data-pos="1"] { z-index: 4; transform: translate(6%, -3.5%) rotate(3.5deg) scale(.97); }
.js .pcard[data-pos="2"] { z-index: 3; transform: translate(-5%, 2.5%) rotate(-6deg) scale(.95); }
/* 飞出那一下：往右上抬、带点旋转、淡出；随后 JS 把它挪去队尾槽位，再淡回来。
   z-index 不参与过渡，挪去队尾的瞬间它已经在底层，是从牌堆背后滑回去的。 */
.js .pcard.is-out { z-index: 6; transform: translate(58%, -7%) rotate(12deg); opacity: 0; }

.plight-hint { display: none; }
.js .plight-hint { display: block; margin: 2px 0 0; text-align: center; font-size: 14px; color: var(--muted-2); }
.js .plight-hint [data-stack-num] { font-weight: 700; color: var(--green-700); }

/* 服务分组 */
.svc-group { margin-bottom: 56px; }
.svc-group:last-child { margin-bottom: 0; }
.svc-group-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.svc-group-head h3 { font-size: 22px; }
.svc-group-head p { margin: 0; font-size: 15.5px; color: var(--muted); }

/* ---------- 12. 列表 ---------- */
.ticks li { position: relative; padding-left: 30px; margin-bottom: 13px; color: var(--ink-2); line-height: 1.78; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--green-050) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E6E60' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}
.ticks--accent li::before {
  background-color: var(--clay-050);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239C4F2C' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.ticks--white li { color: rgba(255, 255, 255, .88); }
.ticks--white li::before { background-color: rgba(255, 255, 255, .2); }

.crosses li { position: relative; padding-left: 30px; margin-bottom: 12px; color: var(--muted); line-height: 1.78; }
.crosses li::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 18px; height: 18px; border-radius: 50%;
  background: #F6E7E4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8452F' stroke-width='3.2' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center/10px no-repeat;
}

/* ---------- 13. 数据 ---------- */
.stat-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat { padding: 26px 4px; }
.stat-num {
  font-size: clamp(36px, 4.4vw, 52px); font-weight: 800; line-height: 1;
  color: var(--green-700); letter-spacing: -.02em;
}
.stat-num .unit { font-size: .4em; margin-left: 4px; color: var(--clay-600); }
.stat-label { margin-top: 12px; font-size: 16px; font-weight: 700; color: var(--ink-2); }
.stat-note { margin-top: 6px; font-size: 14px; color: var(--muted-2); line-height: 1.62; }
.stat--onbrand .stat-num { color: var(--clay-400); }
.stat--onbrand .stat-label { color: #fff; }
.stat--onbrand .stat-note { color: rgba(255, 255, 255, .68); }
/* 深色区块里即使没写 .stat--onbrand，也不能让深色文字落在深底上 */
.section--dark .stat-num { color: var(--clay-400); }
.section--dark .stat-label { color: #fff; }
.section--dark .stat-note { color: rgba(255, 255, 255, .7); }

/* ---------- 13b. 图片块与核心带 ---------- */
.video-slot { border-radius: var(--r-card); overflow: hidden; background: var(--green-050); }
.video-slot img { width: 100%; height: 100%; object-fit: cover; }

.core-band {
  display: grid; grid-template-columns: 1.08fr .92fr;
  background: var(--green-800); color: rgba(255, 255, 255, .82);
  border-radius: var(--r-card); overflow: hidden;
}
.core-copy { padding: 48px; }
.core-copy h3 { font-size: clamp(24px, 2.6vw, 32px); color: #fff; margin: 6px 0 16px; }
.core-copy p { color: rgba(255, 255, 255, .82); font-size: 17px; line-height: 1.85; }
.core-copy p strong { color: #fff; }
.core-copy .card-tag { background: rgba(255, 255, 255, .16); color: #fff; }
.core-copy .ticks li { color: rgba(255, 255, 255, .86); }
.core-copy .ticks li::before { background-color: rgba(255, 255, 255, .2); }
.core-copy .ticks li strong { color: #fff; }
.core-art { min-height: 340px; }
.core-art img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 14. 步骤与时间线 ---------- */
.steps { counter-reset: step; display: grid; gap: 28px; }
.steps--row { grid-template-columns: repeat(4, 1fr); }
.step { position: relative; padding-top: 52px; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%;
  background: var(--green-700); color: #fff; display: grid; place-items: center;
  font-size: 16px; font-weight: 700;
}
.step h4 { font-size: 18px; margin-bottom: 9px; }
.step p { font-size: 15.5px; color: var(--muted); line-height: 1.74; margin: 0; }
.steps--row .step::after {
  content: ""; position: absolute; left: 52px; top: 20px; right: 12px; height: 1px; background: var(--line);
}
.steps--row .step:last-child::after { display: none; }
/* 列数变体：不要用内联 style 指定列数，会压过下方窄屏媒体查询 */
.steps--5 { grid-template-columns: repeat(5, 1fr); }
.steps--6 { grid-template-columns: repeat(3, 1fr); row-gap: 44px; }
.steps--6 .step:nth-child(3n)::after { display: none; }
.section--dark .step::before { background: var(--clay-600); }
.section--dark .step p { color: rgba(255, 255, 255, .76); }
.section--dark .steps--row .step::after { background: rgba(255, 255, 255, .2); }

/* ---------- 14b. 服务流程图（横向节点 + 箭头，窄屏转纵向） ---------- */
.flowchart { display: flex; align-items: stretch; margin-top: 8px; }
.flow-node {
  flex: 1; min-width: 0; background: #fff; border: 1px solid var(--line);
  border-radius: 14px; padding: 22px 14px 18px; text-align: center;
}
.flow-num {
  width: 34px; height: 34px; border-radius: 50%; background: var(--green-700); color: #fff;
  display: grid; place-items: center; font-size: 15px; font-weight: 700; margin: 0 auto 12px;
}
.flow-node h4 { font-size: 16.5px; margin: 0 0 7px; }
.flow-node p { font-size: 13.5px; color: var(--muted); line-height: 1.66; margin: 0; }
.flow-arrow { flex: 0 0 26px; display: grid; place-items: center; color: var(--green-600); }
.flow-arrow svg { width: 18px; height: 18px; }
@media (max-width: 1023px) {
  .flowchart { flex-direction: column; max-width: 420px; margin-left: auto; margin-right: auto; }
  .flow-arrow { flex-basis: 34px; }
  .flow-arrow svg { transform: rotate(90deg); }
}

.timeline { position: relative; padding-left: 36px; }
.timeline::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
.tl-item { position: relative; padding-bottom: 32px; }
.tl-item::before {
  content: ""; position: absolute; left: -30px; top: 8px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--paper); border: 3px solid var(--green-600);
}
.tl-item:last-child { padding-bottom: 0; }
.tl-time { font-size: 13.5px; font-weight: 700; color: var(--clay-700); letter-spacing: .04em; }
.tl-item h4 { font-size: 18px; margin: 6px 0 8px; }
.tl-item p { color: var(--muted); font-size: 15.5px; margin: 0; }

/* ---------- 14d. 里程碑轨（about 页发展历程，横向节点，窄屏转纵向） ----------
   与 .timeline 的分工：.timeline 是竖排流程/联系方式那种「一条读到底」的列表；
   .milestones 是时间轴，横着走，且用点与连线的虚实区分「已发生 / 进行中 / 未发生」。 */
.milestones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; margin: 0; }
.ms { position: relative; padding-top: 40px; }
/* 节点圆点：圆心固定在 top 7.5px，与下面的轨道线共用一条中线 */
.ms::before {
  content: ""; position: absolute; left: 0; top: 0; width: 15px; height: 15px;
  border-radius: 50%; background: var(--paper); border: 3px solid var(--green-600);
}
/* 通往下一个节点的轨道线（跨过 grid 间距，故 right 取负的 gap 值），最后一节不画 */
.ms::after {
  content: ""; position: absolute; left: 23px; right: -36px; top: 7px; height: 1px;
  background: var(--line);
}
.ms:last-child::after { display: none; }

/* 已发生：实心点 + 实线，走过的路是走实了的 */
.ms--done::before { background: var(--green-700); border-color: var(--green-700); }
.ms--done::after { background: var(--green-200); }
/* 进行中：陶土色环 + 一圈淡光晕，全轨唯一的暖色，视线自然落在这里 */
.ms--now::before { border-color: var(--clay-600); box-shadow: 0 0 0 5px var(--clay-050); }
/* 待公布：最浅的空心点（15px 上画虚线圆会碎成锯齿，虚实交给连线去表达） */
.ms--plan::before { border: 2px solid var(--green-200); }
.ms--now::after, .ms--plan::after {
  background: none; height: 0; border-top: 1px dashed var(--line);
}

.ms-time {
  display: inline-block; font-size: 12.5px; font-weight: 700; line-height: 1.9;
  letter-spacing: .04em; padding: 1px 11px; border-radius: var(--r-pill);
  background: var(--green-050); color: var(--green-800);
}
.ms--now .ms-time { background: var(--clay-050); color: var(--clay-700); }
.ms--plan .ms-time { background: var(--paper-2); color: var(--muted); }
.ms h3 { font-size: 18px; margin: 12px 0 8px; }
.ms p { font-size: 15.5px; color: var(--muted); line-height: 1.74; margin: 0; }
.ms .textlink { font-size: 15.5px; min-height: 0; margin-top: 10px; }

/* 平板：两列，横轨会跨错行，跟 .steps--row 一样直接撤掉连线，只留节点 */
@media (max-width: 1024px) {
  .milestones { grid-template-columns: repeat(2, 1fr); gap: 40px 36px; }
  .ms::after { display: none; }
}
/* 手机：转成竖轨，点在左、文在右 */
@media (max-width: 760px) {
  .milestones { grid-template-columns: 1fr; gap: 0; }
  .ms { padding: 0 0 30px 34px; }
  .ms:last-child { padding-bottom: 0; }
  .ms::before { top: 6px; }
  .ms::after {
    display: block; left: 7px; right: auto; top: 27px; bottom: 6px;
    width: 1px; height: auto; background: var(--line);
  }
  /* 竖排后虚线要改画在左边框上，横向那两条规则得逐条推翻 */
  .ms--now::after, .ms--plan::after {
    width: 0; height: auto; border-top: 0; border-left: 1px dashed var(--line);
  }
  .ms--done::after { background: var(--green-200); }
  .ms:last-child::after { display: none; }
}

/* ---------- 15. 手机界面示意 ---------- */
.phone {
  width: 248px; border-radius: 30px; background: #1E2A27; padding: 9px;
  box-shadow: var(--shadow); flex: none;
}
.phone-screen { border-radius: 23px; overflow: hidden; background: var(--green-050); aspect-ratio: 9 / 19.2; }
.phone-screen svg, .phone-screen img { width: 100%; height: 100%; object-fit: cover; }
.phone-cap { margin-top: 15px; text-align: center; font-size: 15px; font-weight: 700; color: var(--ink-2); }
.phone-cap small { display: block; font-weight: 400; font-size: 13.5px; color: var(--muted); margin-top: 4px; line-height: 1.6; }
.phone-rail { display: flex; gap: 24px; overflow-x: auto; padding: 6px 4px 22px; scroll-snap-type: x mandatory; }
.phone-rail > figure { scroll-snap-align: center; margin: 0; width: 248px; flex: none; }
/* 放得下时整体居中；溢出滚动时 auto 边距归零，不影响滚动 */
.phone-rail > figure:first-child { margin-left: auto; }
.phone-rail > figure:last-child { margin-right: auto; }
.phone-rail::-webkit-scrollbar { height: 6px; }
.phone-rail::-webkit-scrollbar-thumb { background: var(--green-200); border-radius: 6px; }
.phone-rail::-webkit-scrollbar-track { background: var(--line-2); border-radius: 6px; }

/* 界面示意图点击放大（site.js 第 11 节）；提示行只在 JS 可用时显示 */
.rail-hint { display: none; text-align: center; font-size: 14.5px; color: var(--muted); margin-top: 8px; }
.js .rail-hint { display: block; }
.phone-rail .phone { cursor: zoom-in; transition: transform .25s ease, box-shadow .25s ease; }
.phone-rail .phone:hover, .phone-rail .phone:focus-visible { transform: translateY(-4px); box-shadow: 0 4px 10px rgba(35, 48, 44, .08), 0 18px 44px rgba(35, 48, 44, .16); }
/* 深色遮罩直接画在容器上：容器 fixed 铺满视口，不依赖子元素拉伸 */
/* 灯箱（容器/遮罩/标题/关闭钮）的结构样式全部内联在 site.js 第 11 节——
   样式表里的大尺寸 fixed 层曾在无头 Edge 出现 computed 正确却不被绘制的合成问题，内联路径实测稳定。
   往灯箱里加元素请继续用内联样式；.plb-body 类名保留给下方 .shot 适配规则。 */
@media (prefers-reduced-motion: reduce) {
  .phone-rail .phone, .phone-rail .phone:hover { transition: none; transform: none; }
}

.loop-wrap { background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-card); padding: 36px; }
.loop-wrap svg { width: 100%; height: auto; }

/* ---------- 16. 折叠 / 选项卡 ---------- */
.acc { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 64px; padding: 18px 2px; background: none; border: 0; text-align: left; cursor: pointer;
  font-size: 17.5px; font-weight: 700; color: var(--ink);
}
.acc-btn:hover { color: var(--green-700); }
.acc-btn .ic { flex: none; color: var(--green-700); transition: transform .2s; }
.acc-item.is-open .acc-btn .ic { transform: rotate(45deg); }
.acc-panel { display: none; padding: 0 2px 24px; color: var(--muted); font-size: 16.5px; line-height: 1.85; max-width: var(--maxw-text); }
.acc-item.is-open .acc-panel { display: block; }

.tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.tab {
  min-height: 46px; padding: 0 20px; border-radius: var(--r-pill); border: 1px solid var(--line);
  background: #fff; font-size: 15.5px; font-weight: 700; color: var(--muted); cursor: pointer;
  display: inline-flex; align-items: center;
}
.tab:hover { border-color: var(--green-200); color: var(--green-700); }
.tab.is-active { background: var(--green-700); border-color: var(--green-700); color: #fff; }
.tabpanel { display: none; }
.tabpanel.is-active { display: block; }

/* ---------- 17. 表格 ---------- */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card); }
table.tbl { width: 100%; border-collapse: collapse; min-width: 620px; background: #fff; }
table.tbl th, table.tbl td { padding: 15px 20px; text-align: left; border-bottom: 1px solid var(--line-2); font-size: 15.5px; vertical-align: top; }
table.tbl thead th { background: var(--green-050); color: var(--green-800); font-weight: 700; white-space: nowrap; }
table.tbl tbody tr:last-child td { border-bottom: 0; }

/* ---------- 18. 表单 ---------- */
.form-card { background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-card); padding: 36px; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 15.5px; font-weight: 700; color: var(--ink-2); }
.field label .req { color: #A8452F; margin-left: 3px; }
.field input, .field select, .field textarea {
  min-height: 52px; padding: 13px 15px; border: 1.5px solid var(--line); border-radius: var(--r-btn);
  font-size: 16.5px; font-family: inherit; background: #fff; color: var(--ink); transition: border-color .18s;
}
.field textarea { min-height: 124px; resize: vertical; line-height: 1.7; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--green-600); outline: none; }
.field .hint { font-size: 13.5px; color: var(--muted); }
.field .err { font-size: 14px; color: #A8452F; font-weight: 600; display: none; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #A8452F; background: #FEF8F6; }
.field.has-error .err { display: block; }
.form-agree { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--muted); line-height: 1.7; }
.form-agree { min-height: 44px; padding: 4px 0; cursor: pointer; }
.form-agree input { min-height: 0; width: 24px; height: 24px; flex: none; margin-top: 2px; accent-color: var(--green-700); }

/* 表单状态提示：接入真实接口前只显示真实状态，不显示虚假成功 */
.form-status {
  display: none; margin-top: 20px; padding: 20px 22px; border-radius: var(--r-card);
  background: var(--clay-050); border: 1px solid var(--clay-100); color: var(--ink-2);
  font-size: 15.5px; line-height: 1.8;
}
.form-status.is-on { display: block; }
.form-status strong { color: var(--clay-800); }
.form-offline {
  display: flex; gap: 12px; align-items: flex-start; margin-bottom: 24px;
  padding: 16px 18px; border-radius: var(--r-btn); background: var(--paper-2);
  border: 1px solid var(--line); font-size: 15px; color: var(--ink-2); line-height: 1.75;
}
.form-offline .ic { flex: none; margin-top: 3px; color: var(--clay-700); }

/* ---------- 19. 引用 ---------- */
.quote { background: var(--paper-3); border-radius: var(--r-card); padding: 30px; border-left: 3px solid var(--clay-600); }
.quote p { font-size: 17px; line-height: 1.9; color: var(--ink-2); }
.quote figcaption { display: flex; align-items: center; gap: 12px; margin-top: 16px; font-size: 14.5px; color: var(--muted); }
.avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--green-100); display: grid; place-items: center; color: var(--green-800); font-weight: 700; flex: none; }

/* ---------- 20. 提示条 ---------- */
.notice {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--paper-3); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 18px 22px; font-size: 15.5px; color: var(--ink-2); line-height: 1.78;
}
.notice .ic { color: var(--clay-700); flex: none; margin-top: 3px; }
.notice strong { color: var(--clay-800); }
.notice--mint { background: var(--green-050); border-color: var(--green-100); }
.notice--mint .ic, .notice--mint strong { color: var(--green-700); }
.section--dark .notice { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .84); }
.section--dark .notice .ic, .section--dark .notice strong { color: var(--clay-400); }

/* ---------- 21. 品牌卡（关于页） ---------- */
.brand-card { background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-card); padding: 44px; }
.brand-card-head { display: flex; align-items: center; gap: 20px; }
.brand-card-name { font-size: 30px; font-weight: 800; letter-spacing: .06em; color: var(--green-900); }
.brand-card-slogan { font-size: 18px; font-weight: 700; letter-spacing: .1em; color: var(--clay-700); margin-top: 4px; }
.brand-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 38px; padding-top: 34px; border-top: 1px solid var(--line-2); }
.brand-key { display: flex; gap: 14px; align-items: flex-start; }
.brand-key .icon-badge { margin: 0; }
.brand-key strong { display: block; font-size: 20px; color: var(--green-800); margin-bottom: 4px; }
.brand-key span { font-size: 15px; color: var(--muted); line-height: 1.72; }

/* 大字引言 */
.pullquote {
  font-size: clamp(21px, 2.5vw, 29px); line-height: 1.62; font-weight: 700;
  color: var(--green-900); max-width: 44rem; letter-spacing: -.005em;
}
.pullquote span { color: var(--clay-700); }

/* ---------- 22. CTA ---------- */
.cta-band { background: var(--green-800); color: #fff; border-radius: var(--r-card); padding: 52px; }
.cta-band h2 { font-size: clamp(25px, 2.8vw, 34px); color: #fff; }
.cta-band p { margin-top: 14px; font-size: 17.5px; color: rgba(255, 255, 255, .84); max-width: 38rem; }
.cta-band .btn-row { margin-top: 30px; }

/* ---------- 23. 悬浮咨询与底部固定条 ----------
   桌面（≥761px）走右侧悬浮咨询 .rail，手机（≤760px）换成底部固定条 .mobile-bar，
   两者互斥，切换写在第 26 节 760 断点里（同时给 body 留 74px 底部空间，别让固定条压住页脚）。
   .rail-top 由 site.js 控制显隐，它的 .is-on 是 display:grid，所以 .rail-btn 也用 grid 居中，别改成 flex。 */
.rail { position: fixed; right: 20px; bottom: 28px; z-index: 90; display: grid; gap: 10px; }
.rail-btn {
  position: relative; width: 52px; height: 52px; border-radius: 14px;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  display: grid; place-items: center; cursor: pointer; color: var(--green-700);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.rail-btn:hover { background: var(--green-700); color: #fff; border-color: var(--green-700); }
/* 主入口实色：一眼看出哪个是「约服务」 */
.rail-btn--go { background: var(--clay-600); border-color: var(--clay-600); color: #fff; }
.rail-btn--go:hover { background: var(--clay-700); border-color: var(--clay-700); }
/* 悬停/聚焦时向左滑出文字标签——光图标认不出是什么 */
.rail-btn::after {
  content: attr(data-label); position: absolute; right: calc(100% + 10px); top: 50%;
  transform: translate(8px, -50%); white-space: nowrap; pointer-events: none;
  background: var(--green-900); color: #fff; font-size: 14px; font-weight: 700;
  padding: 8px 13px; border-radius: 10px; box-shadow: var(--shadow-sm);
  opacity: 0; transition: opacity .18s ease, transform .18s ease;
}
.rail-btn:hover::after, .rail-btn:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
.rail-top { display: none; }
.rail-top.is-on { display: grid; }

.mobile-bar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(35, 48, 44, .07);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); gap: 10px;
}
.mobile-bar .btn { flex: 1; min-height: 52px; font-size: 16px; padding: 0 12px; }
.mobile-bar .btn .ic { width: 18px; height: 18px; }

/* ---------- 24. 页脚 ---------- */
.site-footer { background: var(--green-900); color: rgba(255, 255, 255, .72); padding-top: 64px; font-size: 15px; }
.foot-top { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 40px; padding-bottom: 44px; }
.foot-brand .brand-name { color: #fff; }
.foot-brand .brand-tag { color: rgba(255, 255, 255, .5); }
.foot-slogan { font-size: 16.5px; font-weight: 700; letter-spacing: .1em; color: var(--clay-400); margin: 18px 0 10px; }
.foot-brand p { line-height: 1.85; max-width: 30rem; font-size: 14.5px; }
.foot-col h4 { color: #fff; font-size: 15.5px; margin-bottom: 16px; }
.foot-col li { margin-bottom: 4px; }
.foot-col a { display: inline-flex; align-items: center; min-height: 44px; }
.foot-col a:hover { color: var(--clay-400); }
.foot-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12); padding: 22px 0 28px;
  display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; justify-content: space-between;
  font-size: 13.5px; color: rgba(255, 255, 255, .55);
}
.foot-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
.foot-bottom a:hover { color: #fff; }
.foot-legal { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.foot-copy { display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: center; }

/* ---------- 25. 进场动效（仅在 JS 可用时生效，保证无 JS 也能读） ---------- */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal[data-delay="1"] { transition-delay: .07s; }
.js .reveal[data-delay="2"] { transition-delay: .14s; }
.js .reveal[data-delay="3"] { transition-delay: .21s; }
.js .reveal[data-delay="4"] { transition-delay: .28s; }
.js .reveal[data-delay="5"] { transition-delay: .35s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .svc-card:hover, .svc-card:active { transform: none; }
  .svc-card:hover .svc-art img { transform: none; }
  html { scroll-behavior: auto; }
  /* 不隐藏 .hero-bg：隐藏会连 poster 一起消失。脚本会暂停它，暂停态显示封面 */
  /* 章节影像带取消视差，照片随页面一起走。画面本身保留，只是不再固定 */
  .scene-bg { background-attachment: scroll; }
}

/* 触屏设备上 background-attachment: fixed 在 iOS Safari 会错位甚至被忽略，
   一律退回 scroll —— 少一个视差，不能少一张背景图。 */
@media (hover: none) {
  .scene-bg { background-attachment: scroll; }
}

/* ---------- 26. 响应式 ---------- */
/* 容器已到上限、视口还在收窄的那一段，导航最挤 */
@media (max-width: 1280px) {
  .nav-link { padding: 0 8px; font-size: 15.5px; }
  .nav-link[aria-current="page"]::after, .nav-item.is-active > .nav-link::after { left: 8px; right: 8px; }
}

/* 9 项一级栏目再往下就排不开，直接交给汉堡菜单（原断点 1024 是 6 项时定的） */
@media (max-width: 1240px) {
  .topbar { display: none; }
  .nav-menu, .nav-cta { display: none; }
  .nav-toggle { display: block; }
  .split { gap: 44px; }
}

@media (max-width: 1024px) {
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split--rev > *:first-child { order: 0; }
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .stat-band { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .steps--row { grid-template-columns: repeat(2, 1fr); }
  .steps--row .step::after { display: none; }
  .foot-top { grid-template-columns: repeat(2, 1fr); }
  .brand-keys { grid-template-columns: 1fr; gap: 18px; }
  .scene { padding: 92px 0; }
  .scene-bg { background-attachment: scroll; }
  .scene-panel { grid-template-columns: 1fr; }
  .scene-art { min-height: 230px; }
  /* 单列后图在上文在下，渐隐方向要跟着转，否则收口留一条硬边 */
  .scene-art::before {
    background: linear-gradient(to bottom, transparent 52%, rgba(255, 255, 255, .6) 84%, rgba(255, 255, 255, .9) 100%);
  }
}

@media (max-width: 760px) {
  :root { --gutter: 18px; --nav-h: 62px; }
  .section { padding: 64px 0; }
  .section--tight { padding: 44px 0; }
  .g2, .g3, .g4, .form-grid { grid-template-columns: 1fr; }
  /* 宽屏的语义换行（如品牌释义三段句）窄屏交回自动折行 */
  .br-lg { display: none; }
  .steps--row { grid-template-columns: 1fr; }
  .stat-band { grid-template-columns: repeat(2, 1fr); }
  .hero-video { min-height: 88svh; padding: calc(var(--nav-h) + 28px) 0 40px; }
  .hero-scrim {
    background:
      linear-gradient(180deg, rgba(18, 46, 39, .5) 0%, rgba(18, 46, 39, .68) 45%, rgba(18, 46, 39, .86) 100%);
  }
  .hero-bg { object-position: 60% center; }

  /* 窄屏没有「文字一侧」可言：横向渐变会让半屏文字压在通透区上。
     一律改成整幅均匀的纱，可读性优先于通透。
     每条都要把 .scene--right 的组合选择器一起列上 —— 媒体查询不提升权重，
     漏了它，(0,2,1) 的横向渐变会把这里 (0,1,1) 的均匀纱压掉。 */
  .scene { padding: 64px 0; }
  .scene::before, .scene--right::before {
    background: linear-gradient(180deg, rgba(253, 250, 244, .95) 0%, rgba(253, 250, 244, .92) 100%);
  }
  .scene--soft::before, .scene--soft.scene--right::before {
    /* 窄屏文字在上：上密下疏，底部让海滨实景透出来 */
    background: linear-gradient(180deg, rgba(253, 250, 244, .92) 0%, rgba(253, 250, 244, .86) 55%, rgba(253, 250, 244, .5) 100%);
  }
  .scene--rich::before, .scene--rich.scene--right::before {
    background: linear-gradient(180deg, rgba(18, 46, 39, .62) 0%, rgba(18, 46, 39, .8) 100%);
  }
  .scene--right .scene-copy { margin-left: 0; }
  .scene-panel { margin-top: 30px; }
  .scene-panel-copy { padding: 24px; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }
  .card, .form-card, .cta-band, .loop-wrap, .brand-card { padding: 24px; }
  .sec-head { margin-bottom: 34px; }
  /* 窄屏放不下左上商标区：撤掉商标图层（页头已有站标），窗口对准画面中段，正文避让取消 */
  .pagehead {
    /* 见第 6 节末尾的 761–1120 中间档：平板宽下正文与人物会打架，那里单独兜住 */
    padding: 44px 0 54px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .74) 0%, rgba(255, 255, 255, .6) 55%, rgba(255, 255, 255, .3) 100%),
      #EAF2F8 url("../img/pagehead.jpg") 45% 30% / cover no-repeat;
  }
  .pagehead .wrap { padding-left: var(--gutter); }
  .rail { display: none; }
  .mobile-bar { display: flex; }
  body { padding-bottom: 74px; }
  .foot-top { grid-template-columns: 1fr; gap: 28px; }
  .brand-card-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .svc-group-head { flex-direction: column; gap: 6px; }
  .core-band { grid-template-columns: 1fr; }
  .core-copy { padding: 26px; }
  .core-art { min-height: 220px; order: -1; }
}

/* 字释带单独一个断点：640px 以上三列还排得开（每列约 9 字一行），
   跟着 760 那档一起转单列，只会在 640–760 之间白留一大片。 */
@media (max-width: 640px) {
  .glyphs { grid-template-columns: 1fr; column-gap: 0; margin-top: 20px; }
  .glyph { display: grid; grid-template-columns: 44px 1fr; gap: 0 16px; align-items: start; padding: 15px 0; }
  /* 字占满左列所有行，三段文字全部落在右列；行间距用文字自身 margin 控制 */
  .glyph-char { grid-row: span 3; }
  .glyph > p { grid-column: 2; }
  .glyph:first-child { padding-top: 2px; }
  .glyph:last-child { padding-bottom: 0; }
  /* 竖线转成横线：改成拉通两端的 1px，别忘了把 bottom 归位，否则上下同时定住会被拉满整行 */
  .glyph + .glyph::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px; background: var(--line); }
  .glyph-char { font-size: 34px; }
  .glyph-char::after { width: 18px; margin: 9px 0 0; }
}

@media (max-width: 400px) {
  :root { --gutter: 16px; }
  .hero-title { font-size: 26px; }
  .sec-title { font-size: 25px; }
  .phone, .phone-rail > figure { width: 214px; }
}

/* ---------- 27. 打印 ---------- */
@media print {
  .site-header, .topbar, .rail, .mobile-bar, .site-footer, .btn, .hero-bg, .hero-scrim { display: none !important; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  body { background: #fff; font-size: 12pt; }
  /* 背景照不参与打印：多数浏览器默认就不印背景，这里把文字颜色一并拉回深色，
     否则 .scene--rich 的白字会印成一片空白 */
  .scene { padding: 24pt 0; color: #000; }
  .scene-bg { display: none !important; }
  .scene::before { display: none !important; }
  .scene--rich, .scene--rich .sec-title, .scene--rich h2, .scene--rich h3,
  .scene--rich .sec-sub, .scene--rich .eyebrow, .scene--rich .pullquote { color: #000; }
  .scene-panel { box-shadow: none; border-color: #ccc; }
}

/* ---------- 28. 首页「专业团队」舞台 ----------
   好慷在家式：中间大图、两侧各两个要点。中列 1.5 倍宽让照片成为主角；
   图标徽章放大并以品牌绿 / 陶土色交替，破掉四个同色小方块的单调感。 */
.team-stage {
  display: grid; grid-template-columns: 1fr 1.9fr 1fr; gap: 30px; align-items: center;
  background: var(--white); border-radius: var(--r-card); padding: 48px 44px;
}
/* 中图纵向撑满整行（随两侧要点高度自适应），不再按固定比例留白 */
.team-stage > figure { align-self: stretch; min-height: 480px; }
.team-stage-col { text-align: center; }
.team-stage-col > div + div { border-top: 1px solid var(--line-2); margin-top: 28px; padding-top: 28px; }
.team-stage .icon-badge { width: 62px; height: 62px; border-radius: 18px; margin: 0 auto 14px; }
.team-stage .icon-badge .ic { width: 28px; height: 28px; }
.team-stage h3 { font-size: 17px; margin-bottom: 6px; }
.team-stage-col p { font-size: 15px; color: var(--muted); margin: 0; }

@media (max-width: 1024px) {
  .team-stage { gap: 32px; padding: 36px 32px; }
}
@media (max-width: 760px) {
  .team-stage { grid-template-columns: 1fr; gap: 26px; padding: 26px; }
  .team-stage > figure { order: -1; align-self: auto; min-height: 0; }
}

/* ---------- 29. 机构合作对象索引（partners.html） ----------
   需求书 8.7 的「合作对象｜官网应展示的能力｜行动入口」三栏表，抬成版式：
   六行对照共用同一列模板保证纵向对齐（表头行曾有，用户要求删掉）。
   行动入口按钮带 data-coop，点击后预选表单里的合作类型（页内脚本）。 */
.coop-index { --coop-cols: minmax(0, 1.02fr) minmax(0, 1.18fr) 252px; margin-top: 8px; border-top: 1px solid var(--line); }
.coop-row {
  display: grid; grid-template-columns: var(--coop-cols); gap: 44px;
  padding: 38px 0; border-bottom: 1px solid var(--line); align-items: center;
}
.coop-who-head { display: flex; align-items: center; gap: 16px; }
.coop-who-head .icon-badge { margin: 0; flex: none; }
.coop-num { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .18em; color: var(--clay-700); }
.coop-who h3 { font-size: 21px; margin-top: 2px; }
.coop-caps li { font-size: 15.5px; margin-bottom: 11px; }
.coop-caps li:last-child { margin-bottom: 0; }
.coop-act { display: flex; flex-direction: column; gap: 10px; }
.coop-act .btn { width: 100%; padding-left: 14px; padding-right: 14px; }
.coop-act-note { margin: 0; font-size: 13.5px; color: var(--muted-2); line-height: 1.7; text-align: center; }

@media (max-width: 1024px) {
  /* 三栏挤不下：能力清单换到整行，入口按钮靠右与标题同行 */
  .coop-row { grid-template-columns: minmax(0, 1fr) 240px; gap: 20px 32px; }
  .coop-who { grid-column: 1; grid-row: 1; }
  .coop-act { grid-column: 2; grid-row: 1; }
  .coop-caps { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- 30. 用户端 APP 页（app-user.html） ----------
   首屏纯文案直接回答「下载它能解决什么」（曾放两台真机截图，中窄屏溢出压字、又挡横幅人物，已撤）。
   截图墙：7 张真实截图统一 720 宽，高度按各自内容裁到底（不再补空白，原 720×1500 版本留在
   tmp/app-shots-uncropped/）。换图时同名替换 assets/img/app/，并把 _src/app-user.html 里
   该 img 的 width/height 改成新尺寸——高度写错会让卡片底边对不齐。 */
.pagehead .ticks { margin-top: 26px; max-width: 36rem; }
.pagehead .ticks li { font-size: 16px; }

.shot-rail { display: flex; gap: 24px; overflow-x: auto; padding: 6px 4px 22px; scroll-snap-type: x mandatory; }
/* 截图已按各自内容裁掉底部空白，高度不再一致：卡片底边对齐、说明文字排在同一水平线，
   参差留在顶部；.phone-cap 定高是为了让底边对齐不受说明行数影响 */
.shot-rail > figure {
  scroll-snap-align: center; margin: 0; width: 242px; flex: none;
  display: flex; flex-direction: column;
}
.shot-rail > figure .shot { margin-top: auto; }
/* 放得下时整体居中；溢出滚动时 auto 边距自动归零，不影响滚动（同 .phone-rail 的做法） */
.shot-rail > figure:first-child { margin-left: auto; }
.shot-rail > figure:last-child { margin-right: auto; }
.shot-rail .phone-cap { min-height: 74px; }
.shot-rail::-webkit-scrollbar { height: 6px; }
.shot-rail::-webkit-scrollbar-thumb { background: var(--green-200); border-radius: 6px; }
.shot-rail::-webkit-scrollbar-track { background: var(--line-2); border-radius: 6px; }
.shot {
  border-radius: 20px; overflow: hidden;
  border: 1px solid var(--line-2); background: #EDF1F5; box-shadow: var(--shadow-sm);
}
.shot img { width: 100%; height: auto; }
/* 点击放大：提示行 .rail-hint 与灯箱样式在第 15 节，此处只补真实截图的差异 */
.shot-rail .shot { cursor: zoom-in; transition: transform .25s ease, box-shadow .25s ease; }
.shot-rail .shot:hover, .shot-rail .shot:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(35, 48, 44, .08), 0 18px 44px rgba(35, 48, 44, .16);
}
/* 截图在灯箱里放大：显示完整长图，过高时框内可滚动看到底部 */
.plb-body .shot {
  width: min(332px, 82vw); height: auto; max-height: 76vh; overflow-y: auto;
  margin: 0 auto; cursor: default; box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
}
.plb-body .shot img { width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .shot-rail .shot, .shot-rail .shot:hover { transition: none; transform: none; }
}

/* 获取方式：左扫码/商店，右版本区分 */
.get-grid { display: grid; grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); gap: 56px; align-items: start; }
.qr-plate {
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-card);
  padding: 28px; display: flex; gap: 24px; align-items: center; box-shadow: var(--shadow-sm);
}
.qr-plate img { width: 150px; height: 150px; flex: none; border: 1px solid var(--line-2); border-radius: 10px; }
.qr-plate h3 { font-size: 18.5px; margin-bottom: 8px; }
.qr-plate p { margin: 0 0 6px; font-size: 15px; color: var(--muted); line-height: 1.75; }
.qr-url { font-size: 13.5px; color: var(--muted-2); letter-spacing: .02em; }
.store-plate { margin-top: 24px; background: var(--paper-3); border: 1px solid var(--line-2); border-radius: var(--r-card); padding: 28px; }
.store-plate h3 { font-size: 18.5px; margin-bottom: 14px; }
.store-plate p { font-size: 15px; color: var(--muted); margin: 16px 0 18px; }
.store-row { display: flex; gap: 12px; flex-wrap: wrap; }
.store-badge {
  display: inline-flex; align-items: center; gap: 11px; min-height: 54px; padding: 9px 18px;
  border: 1.5px dashed var(--line); border-radius: 12px; background: #fff;
  font-size: 15.5px; font-weight: 700; color: var(--ink-2);
}
.store-badge .ic { color: var(--green-700); }
.store-badge small { display: block; font-weight: 400; font-size: 12.5px; color: var(--muted-2); }
.dl-actions { display: flex; flex-direction: column; gap: 12px; }
.dl-tip { margin: 4px 0 0; font-size: 13.5px; color: var(--muted-2); text-align: center; }

.ver-title { font-size: 21px; margin-bottom: 6px; }
.ver-list { border-top: 1px solid var(--line); margin-top: 16px; }
.ver-row {
  display: grid; grid-template-columns: 122px minmax(0, 1fr) auto; gap: 20px;
  padding: 24px 0; border-bottom: 1px solid var(--line); align-items: center;
}
.ver-row h3 { font-size: 17.5px; }
.ver-row p { margin: 4px 0 0; font-size: 15px; color: var(--muted); line-height: 1.72; }
.st {
  display: inline-flex; align-items: center; gap: 7px; justify-self: start;
  padding: 5px 13px; border-radius: var(--r-pill); font-size: 13.5px; font-weight: 700; white-space: nowrap;
}
.st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.st--live { background: var(--green-050); color: var(--green-700); }
.st--beta { background: var(--clay-050); color: var(--clay-700); }
.st--soon { background: var(--line-2); color: var(--muted); }
.ver-note { margin: 18px 0 0; font-size: 14.5px; color: var(--muted-2); }

/* 桌面展示二维码与商店入口，手机端换成直达按钮 */
.only-mobile { display: none; }

@media (max-width: 1024px) {
  .get-grid { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width: 720px) {
  .only-desktop { display: none; }
  .only-mobile { display: flex; }
  .ver-row { grid-template-columns: 1fr; gap: 10px; padding: 22px 0; }
  .ver-row .btn { justify-self: start; }
}

@media (max-width: 760px) {
  .coop-row { grid-template-columns: 1fr; gap: 18px; padding: 30px 0; }
  .coop-who, .coop-act, .coop-caps { grid-column: 1; grid-row: auto; }
  .coop-act-note { text-align: left; }
}

/* ---------- 30. 职业装备一览（recruit）----------
   分组规整网格。卡片是固定 4/3 的白底画框，图片 object-fit:contain 居中缩放——
   长短不一的白底商品图能对齐到同一基线，且图片未加载时高度不塌陷。 */
.ukit-group {
  font-size: 17px; margin: 44px 0 18px; padding-left: 13px;
  border-left: 3px solid var(--green-600); line-height: 1.3;
}
.ukit-group:first-of-type { margin-top: 8px; }
.ukit { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.ukit--pair { grid-template-columns: repeat(2, 1fr); max-width: 840px; margin: 0 auto; }
.ukit-item { margin: 0; }
/* 画框高度写成 clamp 定值而不是 aspect-ratio：aspect-ratio 派生的高度不能给子元素的
   百分比 max-height 当基准，图片会退回自然尺寸撑出画框被裁。定值高度下 max-height 正常解析。 */
.ukit-shot {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  height: clamp(170px, 17vw, 240px); padding: 14px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.ukit-shot img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; }
.ukit--pair .ukit-shot { height: clamp(230px, 23vw, 320px); }
.ukit-item:hover .ukit-shot {
  border-color: var(--green-200); transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(23, 42, 38, .10);
}
.ukit-cap { text-align: center; font-size: 14px; color: var(--muted); margin-top: 11px; line-height: 1.5; }
.ukit-note { text-align: center; font-size: 13.5px; color: var(--muted); margin: 36px 0 0; }

@media (max-width: 900px) {
  .ukit { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .ukit-group { margin: 36px 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ukit-shot, .ukit-item:hover .ukit-shot { transition: none; transform: none; }
}

/* ---------- 31. 服务案例页：场景时间轴（cases.html） ----------
   六个典型服务场景用「选项卡切换 + 竖向时间轴（左右交错）」呈现：
   一次只看一个场景，七段固定结构挂在同一条时间线上，左右交错走完全程；
   三个阶段胶囊（服务之前 / 服务当天 / 服务之后）压在轴线上分段，节点按阶段变色。
   交错是靠块级流做的：节点宽 calc(50% - 34px)，右侧节点 margin-left:auto —— 不用 grid-row，加减段数不用改 CSS。
   .case-flag 是硬要求：本页是场景说明（非真实案例），每个面板都必须带这个角标。
   无 JS 时选项卡不工作，用 html:not(.js) 把全部面板展开，保证内容读得到。
   动效原则：**节点默认就是可见的**，所有进场动画一律 animation-fill-mode: backwards，
   动画只是「播一遍」，播完回到静态样式 —— 无 JS、动画被禁、脚本报错都不会让内容消失。 */
.tabs--center { justify-content: center; }

/* 场景区底纹：极淡的点阵 + 顶部一抹柔光，让白卡从背景里浮起来。
   不用大面积渐变，点阵透明度控制在 10% 以内，远看只是纸的质感。 */
.cases-stage { position: relative; overflow: hidden; }
.cases-stage::before,
.cases-stage::after { content: ""; position: absolute; pointer-events: none; }
.cases-stage::before {
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(46, 110, 96, .095) 1px, transparent 0);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(125% 78% at 50% 4%, #000 0%, rgba(0, 0, 0, .42) 52%, transparent 84%);
  mask-image: radial-gradient(125% 78% at 50% 4%, #000 0%, rgba(0, 0, 0, .42) 52%, transparent 84%);
}
.cases-stage::after {
  left: 50%; top: -190px; width: min(1180px, 122%); height: 460px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(168, 204, 194, .34), rgba(168, 204, 194, 0) 72%);
}
.cases-stage > .wrap { position: relative; z-index: 1; }

html:not(.js) .case-panel { display: block; }
html:not(.js) .case-panel + .case-panel { margin-top: 28px; }

.case-doc {
  position: relative; background: #fff; border: 1px solid var(--line-2);
  border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow);
}
/* 卡片顶边一条 3px 彩带：绿 → 陶土，与下面三段节点的配色同一套语言 */
.case-doc::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--green-700), var(--green-400) 46%, var(--clay-600));
}
.case-head {
  display: flex; gap: 26px; align-items: flex-start; justify-content: space-between;
  padding: 34px 44px 28px; border-bottom: 1px solid var(--line-2);
  background: linear-gradient(180deg, var(--paper-3), #fff 84%);
}
.case-head h3 { font-size: clamp(21px, 2.2vw, 27px); margin: 4px 0 8px; }
.case-lede { margin: 0; font-size: 15.5px; color: var(--muted); }
.case-flag {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--r-pill);
  background: var(--green-900); color: #fff; font-size: 12.5px; font-weight: 700; line-height: 1.2;
}
.case-flag .ic { width: 15px; height: 15px; }

/* 时间轴主体 */
.case-tl { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 38px 44px 42px; }
/* 轴线本身也按三程渐变：浅绿起步 → 深绿（服务当天）→ 陶土（服务之后） */
.case-tl::before {
  content: ""; position: absolute; left: 50%; top: 30px; bottom: 30px;
  width: 2px; margin-left: -1px;
  background: linear-gradient(180deg, var(--green-200), var(--green-600) 34%, var(--green-700) 58%, var(--clay-400) 88%, var(--clay-100));
}
/* 轴线上缓缓下行的一道流光：只在 .is-flow（进场播完、脚本可用）时出现，静态下完全不显示 */
.case-tl::after {
  content: ""; position: absolute; left: 50%; top: 30px; bottom: 30px;
  width: 14px; margin-left: -7px; opacity: 0; pointer-events: none;
  /* 一颗带光晕的光点，不是白色高光 —— 白卡上的白色高光只会让轴线看着断了一截 */
  background: radial-gradient(circle at 50% 50%,
    rgba(61, 132, 116, .92) 0 2px, rgba(107, 165, 149, .5) 4.5px, rgba(107, 165, 149, 0) 62%);
  background-size: 14px 52px; background-repeat: no-repeat;
}

/* 阶段胶囊：压在轴线上，把七段分成三程 */
.tl-phase {
  position: relative; z-index: 1; align-self: center;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px; margin: 10px 0 2px; border-radius: var(--r-pill);
  background: #fff; border: 1px solid var(--line);
  font-size: 13.5px; font-weight: 700; color: var(--green-800); letter-spacing: .02em;
}
.tl-phase:first-child { margin-top: 0; }
.tl-phase .ic { width: 17px; height: 17px; color: var(--clay-700); }

/* 节点：宽度留出中线两侧各 34px，右侧节点靠右 —— 交错由此形成 */
.tl-node {
  position: relative; width: calc(50% - 34px); border-radius: 16px; padding: 18px 22px 19px;
  transition: transform .28s ease, box-shadow .28s ease;
}
.tl-node:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.tl-node:hover::before { transform: scale(1.16); }
.tl-node--r { margin-left: auto; }
.tl-node h4 { display: flex; align-items: center; gap: 9px; font-size: 15.5px; color: var(--green-800); }
.tl-node h4 span {
  flex: none; width: 23px; height: 23px; border-radius: 50%;
  background: var(--green-100); color: var(--green-800);
  font-size: 12px; display: grid; place-items: center;
}
.tl-node p { margin: 8px 0 0; font-size: 15px; line-height: 1.76; color: var(--ink-2); }

/* 轴上的圆点 + 连到节点的短横线 */
.tl-node::before {
  content: ""; position: absolute; top: 24px; box-sizing: border-box;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--green-700); border: 4px solid #fff;
  transition: transform .28s ease;
}
.tl-node::after { content: ""; position: absolute; top: 32px; width: 26px; height: 1px; background: var(--line); }
.tl-node:not(.tl-node--r)::before { right: -43px; }
.tl-node:not(.tl-node--r)::after { right: -26px; }
.tl-node--r::before { left: -43px; }
.tl-node--r::after { left: -26px; }

/* 三个阶段的配色：事前浅底、事中深绿（服务真正发生的一段）、事后陶土 */
.tl-node--pre { background: var(--paper-3); }
.tl-node--live { background: var(--green-800); }
.tl-node--live h4 { color: #fff; }
.tl-node--live h4 span { background: rgba(255, 255, 255, .2); color: #fff; }
.tl-node--live p { color: rgba(255, 255, 255, .8); }
.tl-node--live::before { background: var(--green-900); }
.tl-node--post { background: var(--clay-050); }
.tl-node--post h4 span { background: var(--clay-100); color: var(--clay-800); }
.tl-node--post::before { background: var(--clay-600); }

.case-foot { padding: 4px 44px 30px; }
.case-foot .verify { margin: 0; }
.case-note { margin: 30px 0 0; font-size: 14.5px; color: var(--muted-2); line-height: 1.75; text-align: center; }

/* ---- 进场动效：面板拿到 .is-play 时整条时间轴播一遍（挂/摘这个类在 site.js 第 8b 节） ----
   顺序是：卡片浮起 → 轴线自上而下画出来 → 七段按 --d 逐条落位（圆点弹一下、短横线拉出来）→ 流光开始下行。
   逐条延时只写在 .case-tl 的直接子元素上，圆点/横线是伪元素、自动继承同一个 --d，加减段数不用改。
   **fill-mode 一律 backwards**：动画只管播放中的那一下，播完把样式交还给上面的静态规则，
   所以节点默认可见（无 JS 也读得到），hover 的抬升也不会被动画终帧冻住。
   脚本还会在 2.2s 后主动摘掉 .is-play（换成 .is-flow 让流光接着走），
   静止状态因此完全不依赖动画跑没跑起来 —— 动画一旦被卡住，backwards 会把整张卡按在 opacity:0，那是这一页最糟的故障。 */
.case-tl > :nth-child(1) { --d: 120ms; }
.case-tl > :nth-child(2) { --d: 190ms; }
.case-tl > :nth-child(3) { --d: 260ms; }
.case-tl > :nth-child(4) { --d: 330ms; }
.case-tl > :nth-child(5) { --d: 400ms; }
.case-tl > :nth-child(6) { --d: 470ms; }
.case-tl > :nth-child(7) { --d: 540ms; }
.case-tl > :nth-child(8) { --d: 610ms; }
.case-tl > :nth-child(9) { --d: 680ms; }
.case-tl > :nth-child(10) { --d: 750ms; }
.case-tl > :nth-child(n+11) { --d: 800ms; }

@keyframes caseDocIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes tlAxisDraw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes tlPhaseIn { from { opacity: 0; transform: translateY(8px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes tlNodeIn { from { opacity: 0; transform: translate3d(-16px, 12px, 0); } to { opacity: 1; transform: none; } }
@keyframes tlNodeInR { from { opacity: 0; transform: translate3d(16px, 12px, 0); } to { opacity: 1; transform: none; } }
@keyframes tlDotIn { 0% { opacity: 0; transform: scale(.1); } 62% { transform: scale(1.24); } 100% { opacity: 1; transform: none; } }
@keyframes tlBarIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes tlPing { from { box-shadow: 0 0 0 0 rgba(29, 88, 73, .34); } to { box-shadow: 0 0 0 15px rgba(29, 88, 73, 0); } }
/* 只在 0%↔100% 之间插值 background-position-y（配 no-repeat + 固定 background-size，
   等价于光点从轴线顶端走到底端）—— 别写成 calc(100% + 52px)，那种混合插值在部分内核里不动 */
@keyframes tlFlow {
  0% { background-position: 50% 0%; opacity: 0; }
  12% { opacity: .9; }
  86% { opacity: .9; }
  100% { background-position: 50% 100%; opacity: 0; }
}

.case-panel.is-play .case-doc { animation: caseDocIn .5s cubic-bezier(.2, .7, .3, 1) backwards; }
.case-panel.is-play .case-tl::before { transform-origin: 50% 0; animation: tlAxisDraw .85s cubic-bezier(.3, .7, .3, 1) .12s backwards; }
.case-panel.is-flow .case-tl::after { animation: tlFlow 5.2s linear infinite; }
.case-panel.is-play .tl-phase { animation: tlPhaseIn .5s ease-out var(--d, 0ms) backwards; }
.case-panel.is-play .tl-node { animation: tlNodeIn .6s cubic-bezier(.2, .7, .3, 1) var(--d, 0ms) backwards; }
.case-panel.is-play .tl-node--r { animation-name: tlNodeInR; }
.case-panel.is-play .tl-node::before { animation: tlDotIn .52s cubic-bezier(.25, 1.3, .45, 1) calc(var(--d, 0ms) + 140ms) backwards; }
/* 「服务当天」的两个节点：圆点落位后荡开一圈很淡的光晕，播两次就停，指出服务真正发生的那一段 */
.case-panel.is-play .tl-node--live::before {
  animation:
    tlDotIn .52s cubic-bezier(.25, 1.3, .45, 1) calc(var(--d, 0ms) + 140ms) backwards,
    tlPing 1.8s ease-out calc(var(--d, 0ms) + 420ms) 2;
}
.case-panel.is-play .tl-node::after { animation: tlBarIn .4s ease-out calc(var(--d, 0ms) + 180ms) backwards; }
.case-panel.is-play .tl-node:not(.tl-node--r)::after { transform-origin: 100% 50%; }
.case-panel.is-play .tl-node--r::after { transform-origin: 0 50%; }

/* 窄屏：轴线靠左，节点整宽排在轴线右侧，不再交错 */
@media (max-width: 1023px) {
  .case-tl { padding: 30px 24px 34px; gap: 14px; }
  .case-tl::before, .case-tl::after { left: 11px; margin-left: 0; }
  .tl-node, .tl-node--r { width: auto; margin-left: 44px; }
  .tl-node::before, .tl-node--r::before { left: -42px; right: auto; }
  .tl-node::after, .tl-node--r::after { left: -26px; right: auto; width: 26px; }
  .tl-phase { align-self: flex-start; margin-left: -4px; }
  .case-head { flex-direction: column; gap: 14px; padding: 28px 24px 22px; }
  .case-foot { padding: 2px 24px 26px; }
}
@media (max-width: 760px) {
  .tl-node { padding: 16px 18px 17px; }
  .case-note { text-align: left; }
  .cases-stage::before { background-size: 20px 20px; }
}
/* 降低动效偏好：流光与悬停位移全部停掉（进场动画由第 20 节的全局规则压成 0 时长） */
@media (prefers-reduced-motion: reduce) {
  .case-tl::after { display: none; }
  .tl-node, .tl-node:hover { transform: none; box-shadow: none; }
  .tl-node:hover::before { transform: none; }
}

/* ---------- 33. 页尾行动区（.cta-end） ----------
   取代原先贴在页脚上方的深绿盒子（.cta-band，见第 22 节）：
   与页面同底的「轻量收尾段」，只用一条 1px 细线与正文分隔，下方直接接深绿页脚。
   两条规则，改这一节时别破坏：
     ① 每页只保留 1 个实心按钮 —— 那是该页唯一的主行动；
     ② 其余入口一律降级为 .textlink 文字链接，不再用 .btn--onbrand / .btn--ghost 并排。
   位置固定：永远是 </main> 之前的最后一个区块，全站 18 个页面共用。
   .cta-band 现在只剩首页 FAQ 旁那张深色卡片在用，不要再拿它做页尾。 */
.cta-end { border-top: 1px solid var(--line); background: var(--paper); padding: 76px 0 84px; }
.cta-end-body { max-width: 40rem; }
.cta-end-body h2 { font-size: clamp(24px, 2.4vw, 31px); letter-spacing: -.01em; }
.cta-end-body p { margin-top: 16px; font-size: 17.5px; color: var(--muted); line-height: 1.82; }
.cta-end-act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 30px; margin-top: 30px; }

/* 首页 FAQ 旁的深色卡片里，次入口同样降级为文字链接（深底上要改成白字） */
.cta-band .textlink { color: #fff; }
.cta-band .textlink:hover { color: var(--clay-400); }

@media (max-width: 760px) {
  .cta-end { padding: 52px 0 58px; }
  .cta-end-act { gap: 4px 22px; margin-top: 26px; }
  .cta-end-act .btn { width: 100%; }
}

/* ---------- 34. 时序清单（app-user.html #inside） ----------
   左侧时序标签 + 右侧成组条目，按「约之前 / 服务中 / 结束后」分三段。
   刻意不用卡片：这一页前面已经有两处 g3 卡片区，第三处再堆卡片会腻；
   这里靠细线分组、条目用小圆点，视觉重量压到最低。
   条目数不固定，增减 li 不必改 CSS；圆点绿/陶土按奇偶交替。
   （编号跳过 32 —— 那一节原为新闻栏目样式，已被并行会话覆盖丢失，编号留空待重写。） */
.phase-band { border-top: 1px solid var(--line); margin-top: 10px; }
.phase-row {
  display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 24px 56px;
  padding: 42px 0; border-bottom: 1px solid var(--line); align-items: start;
}
.phase-step {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--green-700);
}
.phase-step::before { content: ""; width: 18px; height: 2px; background: var(--green-400); }
/* balance 让两行均分：208px 的窄栏里，标题原本会断在「人在做什么，你不／用追问」这种词中间 */
.phase-side h3 { font-size: clamp(20px, 2.2vw, 24px); margin: 12px 0 0; letter-spacing: -.01em; text-wrap: balance; }
.phase-side p { margin: 9px 0 0; font-size: 14.5px; color: var(--muted-2); line-height: 1.72; }

.phase-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.phase-items > li { position: relative; padding-left: 26px; max-width: 40rem; }
.phase-items > li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--green-600);
}
.phase-items > li:nth-child(even)::before { background: var(--clay-600); }
.phase-items h4 { font-size: 17.5px; margin: 0 0 7px; }
.phase-items p { margin: 0; font-size: 15.5px; color: var(--muted); line-height: 1.78; }

@media (max-width: 900px) {
  .phase-row { grid-template-columns: 1fr; gap: 20px; padding: 34px 0; }
  .phase-side h3 { margin-top: 9px; }
  .phase-items { gap: 24px; }
}

/* ---------- 34. 新闻与知识：栏目页 + 文章页 ----------
   （原第 32 节被并行会话整段覆盖丢失，2026-08-14 重写为第 34 节。
     往 site.css 追加内容前，先 grep 自己这一节还在不在。）

   栏目页版式规则（用户定的，别退回去）：
     ① 每个栏目的卡片只占一行 —— 满行 3 张 / 2 张靠左 / 只剩 1 张时改用通栏 .post--wide，
        不允许出现「3+1」的第二行孤卡；
     ② 「筹备中」的选题不占卡片，收进 .soon-line 一行清单，视觉重量压到最低；
     ③ 五个栏目分成两片区块（靠 section--soft 分段），不要五栏连续平铺同一底色；
     ④ .col-head 是两行：标题 + 紧跟的计数徽章 / 说明。计数用 flex-start 紧跟标题，
        不要 space-between —— 会把徽章甩到 1280px 版心另一头；
     ⑤ 页内说明框统一通栏，靠内部 max-width:52rem 控行宽，别给框本身设宽度。

   文章页版式（2026-08-20 改版，对标少数派文章页）：
     这里原先写的是「文章页不用 .pagehead 大图，改浅色 .art-head」——那条已作废，别照着改回去。
     现在封面大图（.art-cover）在标题之上先立住画面，标题在图下用更大的字号承接。
     ⚠️ 上一句原本是「仍然不用整幅出血的深色 hero」——2026-08-20 第二轮改版按用户要求作废：
     .art-head 已改为 --green-900 深绿幕布 + 白字标题，并加了「标题先大后小」的入场动效
     （对标少数派文章页）。幕布统一用品牌深绿，不逐篇从封面取色——取色会让十篇十个调子，
     而栏目差异已经由 .card-tag 承担。封面图故意跨在幕布与白底的交界上（--cover-hang），
     那是这套版式的识别点，别把它收回幕布里。正文宽度依旧统一收在 --maxw-text。
     文末「往期推荐」（.art-more / .rel-grid）故意挣脱 --maxw-text，占满正文列宽——
     卡片带缩略图，46rem 的行宽塞三张会挤成豆腐块。 */

/* ===== 栏目页：置顶头条（.post-lead 系列，2026-08-21 起**暂无使用者**）=====
   原本只有 news-all.html 的 #policy 用它做「本栏重点」大卡。那张卡已按用户决定移除——
   归档页的定位是「四个栏目的完整清单」，本来就不该有主次；而且 news.html 栏目页的
   政策补贴就是三张平等卡片、没有置顶头条，归档页单独搞一张反而两页逻辑不一致。
   卡片里那份「政策依据」dl（适用地区/依据文件/印发日期/核对时间）没有信息损失——
   同样的内容在 news-policy-ltci.html 的 .srcbox 政策依据卡里是完整的。
   样式先留着不删：以后若要恢复置顶头条，直接加回 HTML 即可。
   同一节里的 .post--wide 在此之前就已经没有使用者了。 */
.post-lead {
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 44px; align-items: start;
  background: var(--white); border: 1px solid var(--line-2); border-radius: var(--r-card);
  padding: 40px 44px; box-shadow: var(--shadow-sm);
}
.post-lead-copy > .card-tag { margin-bottom: 16px; }
.post-lead-copy h2 { font-size: clamp(23px, 2.3vw, 30px); line-height: 1.4; letter-spacing: -.01em; }
.post-lead-copy h2 a:hover { color: var(--green-700); }
.post-lead-copy > p { margin: 16px 0 24px; color: var(--muted); font-size: 16.5px; line-height: 1.8; }

.post-lead-side { background: var(--green-050); border-radius: 12px; padding: 22px 24px; }
.lead-k {
  display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .14em;
  color: var(--green-700); margin-bottom: 14px;
}
.post-lead-side dl { margin: 0; }
.post-lead-side dt { font-size: 13px; color: var(--muted); margin-top: 13px; }
.post-lead-side dt:first-of-type { margin-top: 0; }
.post-lead-side dd { margin: 2px 0 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.7; }

/* ===== 栏目页：栏目块与栏目头 ===== */
/* 栏目间距要容得下小麒探出横栏顶的那 60px（见第 38 节 .col-ico），所以是 104px 而不是
   原来的 58+54。原先那条 1px 上边框已删 —— 墨绿横栏本身就是分割，再加细线是分割做两遍。 */
.col-block + .col-block { margin-top: 104px; }
.col-head { margin-bottom: 26px; }
/* ④ 计数紧跟标题，不要 space-between。
   横栏版式（.col-bar）在第 38 节，这里只留计数徽章本体 —— 它在浅底和墨绿底上都要用。 */
.col-count {
  display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 700;
  padding: 4px 12px; border-radius: var(--r-pill);
  background: var(--green-050); color: var(--green-700);
}
.col-count--zero { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.col-head > p { margin: 12px 0 0; max-width: 52rem; font-size: 16px; color: var(--muted); line-height: 1.8; }
.col-head > p strong { color: var(--ink-2); }

/* ===== 栏目页：文章卡 ===== */
.post {
  background: var(--white); border: 1px solid var(--line-2); border-radius: var(--r-card);
  padding: 26px 28px 20px; height: 100%; display: flex; flex-direction: column;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.post:hover { border-color: var(--green-200); box-shadow: var(--shadow-sm); }
.post > .card-tag { align-self: flex-start; }
.post h3 { font-size: 19px; line-height: 1.55; margin-bottom: 12px; }
.post h3 a:hover { color: var(--green-700); }
.post > p { margin-bottom: 18px; font-size: 15.5px; color: var(--muted); line-height: 1.78; }
.post-meta {
  margin-top: auto; padding-top: 15px; border-top: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 14px; color: var(--muted);
}
.post-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--green-700); }
.post-more .ic { width: 16px; height: 16px; transition: transform .18s; }
.post:hover .post-more .ic { transform: translateX(4px); }

/* 整卡可点：标题链接用 ::after 铺满整张卡，点「阅读 →」/「查看 →」、日期、
   摘要任意位置都进文章 —— 上面那条 .post:hover 时箭头右移的动效，本来就是
   按「整卡是一个点击目标」设计的。
   做法是撑开标题这唯一的 <a>，不在卡里再加一个同址链接：那样读屏会念两遍、
   Tab 多一个停靠点，搜索引擎也多一条重复链接。
   ::after 是定位元素，会盖在卡内那些静态内容（.post-meta / time / .post-more）
   之上，所以它们不必额外处理；卡里也没有别的链接会被埋掉。 */
.post { position: relative; }
.post h3 a::after { content: ""; position: absolute; inset: 0; }

/* ① 一栏只剩 1 篇时用通栏宽卡，不留孤卡 */
.post--wide { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 36px; padding: 28px 32px; }
.post--wide .post-body { flex: 1; min-width: 0; }
.post--wide .post-body h3 { font-size: 21px; }
.post--wide .post-body p { margin: 0; font-size: 15.5px; color: var(--muted); line-height: 1.78; }
.post--wide .post-meta {
  flex: none; width: 172px; margin-top: 0; padding: 0 0 0 32px;
  border-top: 0; border-left: 1px solid var(--line-2);
  flex-direction: column; align-items: flex-start; gap: 8px;
}

/* ② 筹备中的选题：一行清单，信息一条不少，但视觉重量最低 */
.soon-line {
  display: flex; align-items: flex-start; gap: 14px;
  margin-top: 22px; padding: 16px 20px;
  border: 1px dashed var(--line); border-radius: var(--r-card);
  font-size: 15px; line-height: 1.75;
}
.soon-line > .ic { flex: none; width: 19px; height: 19px; margin-top: 4px; color: var(--muted); }
.soon-k { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; color: var(--muted); margin-bottom: 6px; }
.soon-line ul { display: grid; gap: 7px; }
.soon-line li { color: var(--ink-2); }
.soon-line li span { color: var(--muted); font-size: 14.5px; }

/* ===== 文章页：页头（浅色，不用 .pagehead 大图） ===== */
/* 封面图往幕布下方探出的高度。改这个值必须同步改下面 .art-head + .section 的 padding-top，
   两处用同一个变量算，别各写各的。 */
:root {
  --cover-hang: 130px;
  /* 正文列宽。**不要改 --maxw-text（46rem）** —— 那是全局 token，
     .measure / .acc-panel 在用，出现在 index / services / recruit / download 四个页面。
     首屏（.art-head__inner / .art-cover）继续用 46rem，正文用这里的 42rem，
     于是封面比正文宽 64px、向两侧各探出 32px —— 这正是少数派「图比正文宽」的关系。 */
  --maxw-article: 42rem;
}

.art-head {
  background: var(--green-900); border-bottom: 0;
  padding: 30px 0 0;
  /* 入场时标题会放大到 1.42 倍、只往右溢出；这里横向裁掉防出横向滚动条。
     必须用 clip 不能用 hidden —— hidden 会连纵向一起裁，把探出幕布的封面切掉。 */
  overflow-x: clip;
}
/* 首屏内容居中，与下方正文列共用一条中轴线。
   flow-root 挂在这一层：封面用负 margin 探出幕布，而 .art-head 下内边距为 0、又无边框，
   不建 BFC 的话这个负 margin 会直接合并穿出去，幕布高度纹丝不动、封面也不探出。 */
.art-head__inner { max-width: var(--maxw-text); margin: 0 auto; display: flow-root; }
/* 幕布下方那段空白要把探出的封面让出来，否则正文会压上去 */
.art-head + .section { padding-top: calc(68px + var(--cover-hang)); }
/* 但 news-all.html 也用 .art-head，而它没有封面 —— 不排除的话那 130px 就是一段死白。
   写成 :not(:has()) 而不是反过来给有封面的加，是为了让降级方向安全：
   万一 :has() 不被支持，选择器不匹配 → 保留留白（只是难看），
   而不是 → 没有留白 → 封面压住正文（真的坏掉）。 */
.art-head:not(:has(.art-cover)) + .section { padding-top: 68px; }

/* 深底上的文字层级：标题纯白，导语和元信息按透明度降一档，都过 AA */
.art-head .crumb { color: rgba(255, 255, 255, .58); }
.art-head .crumb a { color: rgba(255, 255, 255, .74); }
.art-head .crumb a:hover { color: #fff; text-decoration-color: rgba(255, 255, 255, .5); }
.art-head .crumb span { opacity: .4; }
.art-head .art-meta { color: rgba(255, 255, 255, .74); }
.art-head .art-meta .ic { color: var(--green-400); }
.art-head .card-tag { margin-bottom: 16px; }
.art-head h1 { font-size: clamp(29px, 3.6vw, 46px); line-height: 1.28; letter-spacing: -.015em; max-width: 46rem; color: var(--white); }
/* 深绿幕布上的导语：这条是 .art-head .lead 的唯一出处，别在上面另起一条同权重的改色，
   同权重后写的赢，会让导语在深底上变回深墨色。 */
.art-head .lead { margin: 18px 0 0; max-width: 46rem; font-size: 18px; color: rgba(255, 255, 255, .82); line-height: 1.82; }
.art-meta { display: flex; flex-wrap: wrap; gap: 6px 26px; margin-top: 24px; font-size: 14.5px; color: var(--muted); }
/* svg 在本站是 display:block，这里不写成 inline-flex，图标会顶到文字上面去 */
.art-meta span { display: inline-flex; align-items: center; gap: 7px; }
.art-meta .ic { width: 17px; height: 17px; color: var(--green-600); }

/* 封面大图：面包屑之后、栏目标签之前。图片是服务场景示意图而非新闻纪实照片，
   所以图注必须写明「示意图」——新闻知识栏目下，读者默认会把首图当成事发现场。
   aspect-ratio 16/9 + img 的 width/height 属性双保险，图未到位时不塌高度（CLS）。
   object-position 偏上 42%：站内这批配图的人物脸部普遍在画面上半部。 */
/* 封面现在排在元信息之后（少数派的顺序：日期 → 标题 → 作者 → 封面），
   并靠负 margin 探出幕布 --cover-hang。z-index 要给：.section 是 position:relative，
   DOM 在后，不抬 z-index 就会盖住探出的这一截。 */
.art-cover {
  position: relative; z-index: 2;
  max-width: var(--maxw-text);
  margin: 34px 0 calc(var(--cover-hang) * -1);
}
.art-cover img {
  /* height:auto 必须写 —— img 上的 height 属性是表现性提示，会当成 CSS height 生效；
     只覆盖 width 而不归零 height，aspect-ratio 会被那个 1086px 顶掉，封面被拉成竖图。 */
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  object-fit: cover; object-position: center 42%;
  border-radius: var(--r-card); background: var(--paper-3);
}
/* 图注落在探出幕布的那一截里，也就是象牙白底上 —— 所以用深色 --muted，
   不能跟着幕布里的其他文字走白色，否则白底白字。 */
.art-cover figcaption {
  margin-top: 10px; font-size: 13.5px; line-height: 1.7; color: var(--muted);
}

/* ===== 文章页：入场动效 v2（对标少数派实测参数） =====
   参数取自少数派生产 CSS（post.a4f65596.css），不是估算：
     逐字淡入 0.2s、每字错开 0.02s、缓动 cubic-bezier(.5,0,0,1)
     标题整块归位 0.6s，延迟 = 字数 × 0.02s + 0.3s
     封面 clip-path 由下往上揭开 0.6s，与标题归位同时
     其余元素在标题落位之后 0.3s 淡入
   时间轴（27 字标题为例）：
     0 ── 0.84s   逐字淡入，整块保持放大下沉 → 画面上只有标题
     0.84 ─ 1.44s 标题缩小归位 + 封面由下往上揭开
     1.44 ─ 1.74s 面包屑 / 标签 / 导语 / 元信息淡入
   幕布高度全程不变（隐藏元素用 opacity 占位，不用 display:none），
   只跑 transform / opacity / clip-path，不触发重排，CLS 为 0。
   逐字拆分由 site.js 第 14 节在运行时完成；没有 JS 时标题是整段文本、不播动画。 */
:root {
  --art-ease: cubic-bezier(.5, 0, 0, 1);
  --title-char-dur: .2s;
  --title-block-dur: .6s;
  --art-fade-dur: .3s;
  /* 窄屏不放大：标题占满行宽，放大后会被 overflow-x:clip 从中间裁断（截到半句话） */
  --title-enter-y: 96px;
  --title-enter-scale: 1;
}
/* 放大档位的断点是算出来的，不是照抄少数派的 768 / 1280。
   我们首屏是居中的（少数派同样居中，但视口宽得多），标题块左边缘在 (W-736)/2，
   origin 又是左上角，所以放大后右边缘 = (W-736)/2 + 736×scale，要 ≤ W 才不被裁：
     scale 1.2  → W ≥ 1030，取 1080
     scale 1.45 → W ≥ 1398，取 1440
   照抄 768 / 1280 的话，标题在这两个宽度上都会被裁掉一截。 */
@media (min-width: 1080px) { :root { --title-enter-y: 132px; --title-enter-scale: 1.2; } }
@media (min-width: 1440px) { :root { --title-enter-y: 156px; --title-enter-scale: 1.45; } }

@keyframes artTitleBlock {
  from { transform: translateY(var(--title-enter-y)) scale(var(--title-enter-scale)); }
  to   { transform: none; }
}
@keyframes artTitleChar { from { opacity: 0; } to { opacity: 1; } }
@keyframes artCoverReveal { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes artFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* 逐字 span 由 JS 生成。min-width 是给空格用的，不给它宽度空格会塌掉。 */
.art-title__char { display: inline-block; min-width: .25em; }

/* 动画只在 JS 拆完字、给 .art-head 挂上 .is-animated 之后才跑 —— 没有 JS 时
   标题是普通文本、立即可读，不会因为 opacity:0 的填充态而永远看不见。 */
.art-head h1 { transform-origin: 0 0; }
.art-head.is-animated h1 {
  animation: artTitleBlock var(--title-block-dur) var(--art-ease) var(--title-enter-delay, .3s) both;
}
.art-head.is-animated .art-title__char {
  animation: artTitleChar var(--title-char-dur) var(--art-ease) both;
}
/* 封面是揭开不是淡入：clip-path 从下沿往上收，与标题归位同时发生 */
.art-head.is-animated .art-cover img {
  animation: artCoverReveal var(--title-block-dur) var(--art-ease) var(--title-enter-delay, .3s) both;
}
/* 其余元素统一等到标题落位之后才出。
   这一条是整个节奏的关键：早于此，「画面上只有标题」那一帧就立不住。 */
.art-head.is-animated .crumb,
.art-head.is-animated .card-tag,
.art-head.is-animated .lead,
.art-head.is-animated .art-meta,
.art-head.is-animated .art-cover figcaption {
  animation: artFadeIn var(--art-fade-dur) var(--art-ease)
             calc(var(--title-enter-delay, .3s) + var(--title-block-dur)) both;
}

/* 长辈是这个栏目的主要读者，系统一旦声明「减少动态」就整套关掉，直接给落定状态。
   site.js 也会检测同一个媒体查询并跳过逐字拆分。
   注意是 animation:none 而不是缩短时长 —— both 填充模式下缩短时长仍会闪一下。 */
@media (prefers-reduced-motion: reduce) {
  .art-head.is-animated h1,
  .art-head.is-animated .art-title__char,
  .art-head.is-animated .art-cover img,
  .art-head.is-animated .crumb,
  .art-head.is-animated .card-tag,
  .art-head.is-animated .lead,
  .art-head.is-animated .art-meta,
  .art-head.is-animated .art-cover figcaption { animation: none; }
}

/* ===== 文章页：正文 + 右侧目录 ===== */
/* 默认（<1280px）：正文居中单栏，目录折叠成正文上方的一条横向清单。
   flex 列 + order:-1 是为了让 DOM 里在后面的 <aside> 显示在正文之前，
   同时又不破坏 ≥1280px 时把它绝对定位挪到右侧的做法。 */
.art-layout { display: flex; flex-direction: column; position: relative; }
.art-main { max-width: var(--maxw-article); margin: 0 auto; width: 100%; }
.art-side { order: -1; max-width: var(--maxw-article); margin: 0 auto 30px; width: 100%; }
.art-toc { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 14px 0; }
.art-toc ul { display: flex; flex-wrap: wrap; gap: 0 22px; }

/* ≥1280px：目录浮到正文右侧的空白里，不再占据版心、不挤压正文。
   门槛是算出来的：版心最宽 1232px（.wrap 1280 − 48 gutter），
   正文列 42rem=672 居中后单边余量 (1232−672)/2 = 280px，
   要放下 224px 的目录 + 44px 间距正好用掉 268px，还剩 12px。
   再窄一点就会压到正文，所以低于 1280 一律走上面的折叠形态 —— 是折叠不是隐藏，
   政策长文的目录有用，藏掉可惜。 */
@media (min-width: 1280px) {
  .art-layout { display: block; }
  .art-side {
    position: absolute; top: 0; bottom: 0;   /* 撑满高度，给内部 sticky 提供轨道 */
    left: calc(50% + var(--maxw-article) / 2 + 44px);
    width: 224px; max-width: none; margin: 0;
  }
  .art-toc {
    position: sticky; top: calc(var(--nav-h) + 24px);
    border: 0; border-left: 2px solid var(--line); padding: 0 0 0 18px;
  }
  .art-toc ul { display: block; }
}
.art-toc-k { font-size: 12.5px; font-weight: 700; letter-spacing: .14em; color: var(--muted); margin-bottom: 10px; }
.art-toc a {
  display: flex; align-items: center; min-height: 44px; padding: 4px 0;
  font-size: 15px; line-height: 1.6; color: var(--muted);
}
.art-toc a:hover { color: var(--green-700); }

/* 正文比全站基准（--fs-body 17px）再大 1px：长文连续阅读，且读者多是子女替父母查政策，
   常见动作是把手机递过去一起看。**不要降到 17.5px** —— 站点 token 写着
   「字号：适老化，正文 17px 起，移动端不缩小」。
   行高 1.8 是正文局部覆盖 --lh-body(1.85)：段间距提到 1.7em 之后行高可以略收，
   段落成块、块间留白大，比行行都松更好读。 */
.prose { max-width: var(--maxw-article); font-size: 18px; line-height: 1.8; }
.prose > p { margin: 0 0 1.7em; color: var(--ink-2); }

/* 标题层级：去装饰、拉留白。h2 不加色条 / 背景 / 分隔线，靠字号和上留白说话。 */
.prose h2 { font-size: clamp(26px, 2.6vw, 32px); font-weight: 700; letter-spacing: -.01em; margin: 72px 0 18px; }
.prose > h2:first-child { margin-top: 0; }
/* ⚠️ 无障碍取舍：这里原本有一条 h3::before 绿色竖条，注释写明是「为色觉障碍读者补的
   形状差异」。本次按少数派的去装饰方向删掉了竖条，改用四重差异替代形状差异：
     ① 字号差 —— h2 最小 26px vs h3 20px，差 6px 以上（原来是 28 vs 19.5）
     ② 上留白差 —— h2 72px vs h3 40px vs h4 28px，逐级递减，层级靠间距就能读出来
     ③ 字重差 —— h2/h3/h4 都是 700，但 h4 与正文同号，靠字重与正文分开
     ④ 色相差 —— h3 保留 --green-800，h2 是默认墨色
   即「不只依赖颜色」这条仍然成立。若日后觉得不够，优先加回形状差异而不是加深颜色。 */
.prose h3 { font-size: 20px; font-weight: 700; color: var(--green-800); margin: 40px 0 10px; }
/* h4 是第三级小标题：与正文同号，只靠字重和上留白区分 */
.prose h4 { font-size: 18px; font-weight: 700; color: var(--ink); margin: 28px 0 8px; }
/* 全站 ul/ol 被重置成无标记，正文里要还原回来 */
.prose ol, .prose ul { margin: 0 0 1.3em; padding-left: 1.5em; }
.prose ol { list-style: decimal; }
.prose ul { list-style: disc; }
.prose li { margin-bottom: .6em; color: var(--ink-2); line-height: 1.82; }
.prose li::marker { color: var(--green-600); font-weight: 700; }
.prose strong { color: var(--ink); }
/* 链接改克制：去掉 700 字重，下划线收细、颜色降一档。
   少数派是纯色无下划线，但只靠颜色区分链接不满足无障碍，所以这里只取「克制」不取「去下划线」。 */
.prose a {
  color: var(--green-700); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: var(--green-100);
}
.prose a:hover { color: var(--clay-700); text-decoration-color: var(--clay-100); }
.prose .table-scroll { margin: 0 0 1.4em; }

/* 正文插图与图注。现有 10 篇正文里还没有 figure，这套样式是给后续补图预留的，
   .art-cover figcaption 与它共用同一套视觉规格。
   ⚠️ 圆角保持 --r-card(14px)，**不要改成直角** —— 设计 token 写死「圆角：卡片/图片 14」，
   且封面就是 14px，正文图直角会让同一页出现两套观感。 */
.prose figure { margin: 40px 0; }
.prose figure img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-card); background: var(--paper-3);
}
.prose figcaption {
  margin-top: 10px; font-size: 14px; line-height: 1.7;
  color: var(--muted); text-align: center;
  overflow-wrap: anywhere;   /* 图注里可能出现长 URL / 文号，允许断行 */
}

/* 引用块：左侧竖条 + 暖底，不加大引号装饰——政策原文的引用要显得可核验，不是金句海报。
   与 .tip 的分工：.tip 是编辑写的提醒，blockquote 是原文照录。 */
.prose blockquote {
  margin: 26px 0 30px; padding: 18px 24px;
  background: var(--paper-3); border-left: 3px solid var(--green-200);
  border-radius: 0 var(--r-card) var(--r-card) 0;
  font-size: 17.5px; line-height: 1.85; color: var(--ink-2);
}
.prose blockquote p { margin: 0 0 .8em; }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose blockquote cite {
  display: block; margin-top: 10px; font-size: 14px; font-style: normal; color: var(--muted);
}

/* 正文里的要点框 */
.tip {
  background: var(--green-050); border-left: 3px solid var(--green-400);
  border-radius: 0 var(--r-card) var(--r-card) 0;
  padding: 20px 24px; margin: 26px 0 30px; font-size: 16px; line-height: 1.8;
}
.tip p { margin: 0 0 .8em; color: var(--ink-2); }
.tip p:last-child { margin-bottom: 0; }
.tip strong { color: var(--green-800); }

/* 政策 / 数据来源框：政策类文章的可核验凭据，放在正文之前 */
.srcbox {
  max-width: var(--maxw-article); margin-bottom: 40px; padding: 24px 28px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card);
}
.srcbox-k {
  display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; color: var(--green-800);
  padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--line-2);
}
.srcbox-k .ic { width: 19px; height: 19px; color: var(--green-600); }
.srcbox dl { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 11px 20px; margin: 0; font-size: 15px; }
.srcbox dt { color: var(--muted); }
.srcbox dd { margin: 0; color: var(--ink-2); line-height: 1.75; }
.srcbox-note {
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line-2);
  font-size: 14px; color: var(--muted); line-height: 1.72;
}

/* ===== 文章页：文末声明与相关阅读 ===== */
.art-foot { max-width: var(--maxw-article); margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); }
.art-disclaim {
  margin: 0; padding: 18px 22px; font-size: 14.5px; line-height: 1.78; color: var(--muted);
  background: var(--paper-3); border: 1px solid var(--line); border-radius: var(--r-card);
}
.art-disclaim strong { color: var(--ink-2); }
.art-foot h2 { font-size: 19px; margin: 38px 0 10px; }

/* 脚注。正文内用 <sup><a href="#fn-1" id="fnref-1">1</a></sup>，文末在这里逐条列出，
   每条末尾一个 ↩ 回到原位。
   ⚠️ 现状：10 篇正文里真正属于「出处」的括号只有 2 处，其余都是行文注解
   （「（居家护理）」「（放老人口袋）」这类），迁成脚注反而更难读；出处本来也都收在
   .srcbox 政策依据卡里。所以这套样式主要是给后续新文章预留的，不要拿它去批量改造老文章。 */
.art-notes {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 13.5px; line-height: 1.75; color: var(--muted);
}
.art-notes ol { margin: 0; padding-left: 1.6em; list-style: decimal; }
.art-notes li { margin-bottom: .6em; }
.art-notes li::marker { color: var(--muted); }
.art-notes a { color: var(--green-700); text-decoration: underline; text-underline-offset: 3px; }
.art-notes .fn-back { margin-left: 6px; text-decoration: none; }
.prose sup a {
  font-size: .72em; font-weight: 700; color: var(--green-700);
  text-decoration: none; padding: 0 1px;
}
.prose sup a:hover { text-decoration: underline; }

/* 文章标签。栏目级是 <a> 可点（news-all.html 有栏目锚点），
   细标签是 <span class="card-tag--plain"> 纯展示 —— news-all.html 没有标签级筛选，
   做成链接会是落不到位的死链。两者必须看得出可点与不可点的区别。 */
.art-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.art-tags .card-tag { margin-bottom: 0; }
.art-tags a.card-tag { text-decoration: none; transition: background-color .18s ease; }
.art-tags a.card-tag:hover { background: var(--green-100); }
.art-tags a.card-tag--accent:hover { background: var(--clay-100); }
.card-tag--plain { background: var(--paper-3); color: var(--muted); border: 1px solid var(--line-2); }

/* 责编署名。对标少数派文末的「本文责编」，但我们没有真实作者主体，
   所以只署内容组，不编造真人姓名——署一个查无此人的名字比不署更糟。 */
.art-byline {
  display: flex; align-items: center; gap: 12px;
  margin-top: 22px; padding: 15px 20px;
  background: var(--white); border: 1px solid var(--line-2); border-radius: var(--r-card);
  font-size: 14.5px; line-height: 1.7; color: var(--muted);
}
.art-byline .ic { flex: none; width: 20px; height: 20px; color: var(--green-600); }
.art-byline strong { color: var(--ink-2); }

/* 纯文字相关列表。这套**现在只服务 news-all.html 的归档列表**（.rel-list.arch-list，
   条目样式见第 37 节 .arch-list）——文章页文末已经全部改用带缩略图的 .rel-grid 卡片。
   所以它不是死代码，但也只有那一个使用者，改动前先去归档页看一眼。 */
.rel-list { display: grid; }
.rel-list a {
  display: flex; align-items: baseline; gap: 12px; padding: 15px 0;
  border-bottom: 1px solid var(--line-2); font-size: 16px; font-weight: 700; line-height: 1.6;
}
.rel-list a:last-child { border-bottom: 0; }
.rel-list a:hover { color: var(--green-700); }
.rel-cat {
  flex: none; font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--green-050); color: var(--green-700);
}

/* ===== 文章页：往期推荐（挣脱正文列宽，独立居中） =====
   它是 .art-layout 的直接子元素，不在 .art-main 里 —— 正文列只有 42rem，
   塞三张带缩略图的卡会挤成豆腐块，所以这里单独放宽到 56rem 再居中。 */
.art-more {
  max-width: 56rem; width: 100%; margin: 46px auto 0;
  padding-top: 34px; border-top: 1px solid var(--line);
}
.art-more h2 { font-size: 19px; margin: 0 0 18px; }
.rel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

/* 整卡可点的做法与栏目页 .post 一致：撑开标题里那唯一的 <a>，
   不在卡里再放第二个同址链接（读屏会念两遍、Tab 多一个停靠点）。 */
.rel-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--white); border: 1px solid var(--line-2); border-radius: var(--r-card);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.rel-card:hover { border-color: var(--green-200); box-shadow: var(--shadow-sm); }
.rel-card > img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 10;   /* height:auto 同 .art-cover img，别删 */
  object-fit: cover; object-position: center 42%; background: var(--paper-3);
}
.rel-card-body { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; }
.rel-card .card-tag { align-self: flex-start; margin-bottom: 10px; }
.rel-card h3 { font-size: 16.5px; line-height: 1.6; margin: 0; }
.rel-card h3 a::after { content: ""; position: absolute; inset: 0; }
.rel-card h3 a:hover { color: var(--green-700); }
.rel-card time {
  margin-top: auto; padding-top: 14px; font-size: 13.5px; color: var(--muted);
}

/* ===== 文章页：阅读进度条 + 目录当前项 ===== */
/* 进度条由 site.js 注入（纯装饰，无脚本时不该在 DOM 里留一条空槽）。
   固定在视口顶端、z-index 101 压过 .site-header 的 100，是一条 3px 细线。 */
.read-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: 101; pointer-events: none; background: transparent;
}
.read-progress i {
  display: block; height: 100%; width: 0; background: var(--green-700);
}
.art-toc a.is-current { color: var(--green-700); font-weight: 700; }

@media (max-width: 1024px) {
  /* 文章版式的折叠形态已经是默认值（见上面 .art-layout），这里只剩栏目页的规则 */
  .post-lead { grid-template-columns: 1fr; gap: 26px; padding: 32px 30px; }
}

@media (max-width: 760px) {
  .post-lead { padding: 26px 24px; }
  .post--wide { flex-direction: column; align-items: stretch; gap: 18px; padding: 24px; }
  .post--wide .post-meta {
    width: auto; padding: 15px 0 0; border-left: 0; border-top: 1px solid var(--line-2);
    flex-direction: row; align-items: center; justify-content: space-between;
  }
  .art-head { padding: 24px 0 0; }
  .art-meta { gap: 4px 18px; }
  /* 窄屏探出幅度收窄，否则正文被推得太远。但不能收到只够图注那 60px——
     那样图片下沿会正好压在幕布边缘上，看着像没对齐的失误而不是有意的跨接。 */
  :root { --cover-hang: 92px; }
  .art-head + .section { padding-top: calc(44px + var(--cover-hang)); }
  .art-head:not(:has(.art-cover)) + .section { padding-top: 44px; }
  /* 手机上 16/9 太扁，人物只剩一条；放宽到 3/2 */
  .art-cover { margin-top: 26px; }
  .art-cover img { aspect-ratio: 3 / 2; }
  .art-more { margin-top: 38px; padding-top: 28px; }
  .rel-grid { grid-template-columns: 1fr; gap: 16px; }
  .art-notes { margin-top: 32px; }
  .art-byline { align-items: flex-start; }
  .rel-list a { flex-direction: column; gap: 7px; }
  .rel-cat { align-self: flex-start; }
  .srcbox { padding: 20px 22px; }
  .srcbox dl { grid-template-columns: 1fr; gap: 3px; }
  .srcbox dt { margin-top: 11px; }
  .srcbox dt:first-of-type { margin-top: 0; }
  .tip { padding: 18px 20px; }
  .soon-line { padding: 15px 17px; }
}

/* ---------- 35. 招募页开篇：配图与四张卡片对齐（recruit.html #岗位价值） ----------
   .split 默认是「左整块 / 右整块 + align-items:center」，右侧配图只能相对整列居中，
   顶边和底边都对不上左侧那四张卡片。这里把左列拆成三个独立网格项（标题块 / 卡片组 /
   提示条），配图单独占第 2 列第 2 行——和卡片组同行，行高由两者中较高的一方撑开，
   图片 height:100% 跟着长满，于是上下边天然与四张卡片齐平。
   图注放在第 3 行第 2 列，与左侧提示条同起一条基线，紧贴图片下沿。
   行间距靠各项自己的 margin-top 控制（row-gap 归零），否则 .split 的 64px gap 会把行撑开。
   配图用绝对定位铺满第 2 行：它自身不参与行高计算，行高只由卡片组决定——否则图片
   固有比例一旦比卡片组高，行会被图片撑开，卡片顶对齐、底又错开，白对一半。 */
.rintro { align-items: stretch; row-gap: 0; }
.rintro__head { grid-column: 1; grid-row: 1; }
.rintro__cards { grid-column: 1; grid-row: 2; margin-top: 28px; }
.rintro__note { grid-column: 1; grid-row: 3; margin-top: 26px; }
.rintro__art { grid-column: 2; grid-row: 2; position: relative; }
.rintro__art .video-slot { position: absolute; inset: 28px 0 0 0; }
.rintro__cap {
  grid-column: 2; grid-row: 3; align-self: start; margin: 10px 0 0;
  font-size: 13.5px; color: var(--muted); line-height: 1.6;
}

@media (max-width: 1024px) {
  /* 单列后显式行列定位会让标题块和配图叠在同一格，全部退回文档流：
     标题 → 卡片 → 提示条 → 配图 → 图注 */
  .rintro { row-gap: 40px; }
  .rintro > * { grid-column: 1; grid-row: auto; margin-top: 0; }
  .rintro__cap { margin-top: -28px; }
  .rintro__art { position: static; }
  .rintro__art .video-slot { position: relative; inset: auto; aspect-ratio: 5 / 4; }
}

/* ---------- 35. 服务城市：起点辐射地图带（cities.html .citymap） ----------
   背景图 assets/img/cities-xiamen-radiation-bg-v2.png（AI 生成示意图，台账 26a）。
   两层同一张图叠着放：
     .citymap-photo            压淡的底层（低饱和、半透明），任何时候都在，无 JS 也是完整一幅图；
     .citymap-photo--lit       原色层，静态就是完全可见的（遮罩半径给到 4000px），
                               只有拿到 .is-play 时才从起点那点用径向遮罩（带 130px 羽化）向外扩开一遍。
   **起点坐标不写死**：图里的起点光晕在原图的 78.71% / 65.78%，但背景是 cover 裁切的，
   容器一换宽高比，这个点在容器里的位置就变了 —— 所以 --ox / --oy / --rmax 三个值
   由 site.js 第 12 节按 cover 几何实时算成 px 再写到 .citymap-stage 上（resize 重算）。
   没有脚本时：不挂 .is-ready，光晕圈根本不显示；原色层按静态规则整幅可见，图不会缺一块。
   动画一律 fill-mode: backwards，播完把样式交还给静态规则（同第 31 节那条教训）。
   ------------------------------------------------------------------ */
.citymap {
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(400px, 41vw, 640px);
  overflow: hidden;
  background: var(--paper);
  /* 上下不画分隔线：这张图偏冷白、页面是暖象牙白，一条硬线会把色差变成一道明显的接缝。
     两条边一律靠 .citymap-stage::after 的纵向渐变化到纸色（见下），图是「洇」进页面的。 */
}
/* 舞台与正文叠在同一格：舞台拉满，正文浮在上面 */
.citymap > * { grid-area: 1 / 1; }
.citymap-stage { align-self: stretch; position: relative; overflow: hidden; }

.citymap-photo {
  position: absolute; inset: 0;
  background-image: url("../img/cities-xiamen-radiation-bg-v2.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* 底层：压成一张淡到几乎只剩轮廓的底图，好让原色层扩开时「亮起来」这件事看得出来。
   **一律写成 :not(--lit)**：直接写 .citymap-photo 会和 .citymap-photo--lit 同权重，
   后面媒体查询里再调一次底层就会把原色层一起压暗（改过一次，别退回去）。 */
.citymap-photo:not(.citymap-photo--lit) { filter: saturate(.3) brightness(1.03) opacity(.52); }
/* 原色层：静态即完全可见 —— 动画只是播一遍，不负责最终状态。
   扩散的边界**不用 clip-path**（那是一条硬边，扩开时能看见一道圆弧线），
   改成径向遮罩 + 130px 羽化带：亮区边缘是渐隐的，看着像光漫过去，不像一个圆在放大。
   半径 --cr 注册成 <length> 才能做动画（@property）；初值给到 4000px，
   万一浏览器不认 @property，var() 也拿得到自身声明的 4000px —— 静态永远是整幅可见。 */
@property --cr {
  syntax: "<length>";
  inherits: false;
  initial-value: 4000px;
}
.citymap-photo--lit {
  --cr: 4000px;
  -webkit-mask-image: radial-gradient(circle at var(--ox, 78.7%) var(--oy, 65.8%),
    #000 var(--cr, 4000px), rgba(0, 0, 0, 0) calc(var(--cr, 4000px) + 130px));
  mask-image: radial-gradient(circle at var(--ox, 78.7%) var(--oy, 65.8%),
    #000 var(--cr, 4000px), rgba(0, 0, 0, 0) calc(var(--cr, 4000px) + 130px));
}

/* 文字侧的纱罩 + 上下软边：正文压在图的空白半边上，且band 与页面之间不留硬缝。
   用纸底色不用绿色 —— 只提亮，不改这张图的色相。 */
.citymap-stage::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(96deg,
      rgba(253, 250, 244, .95) 0%, rgba(253, 250, 244, .88) 28%,
      rgba(253, 250, 244, .42) 54%, rgba(253, 250, 244, 0) 78%),
    linear-gradient(180deg,
      var(--paper) 0%, rgba(253, 250, 244, .74) 5%, rgba(253, 250, 244, 0) 24%,
      rgba(253, 250, 244, 0) 72%, rgba(253, 250, 244, .78) 94%, var(--paper) 100%);
}

/* 起点光晕：坐标由脚本算出来，没有脚本就不显示（免得落在错的位置上） */
.citymap-origin {
  position: absolute; z-index: 2; display: none; pointer-events: none;
  left: var(--ox, 78.7%); top: var(--oy, 65.8%);
  width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
}
.citymap.is-ready .citymap-origin { display: block; }
/* 常亮的一团柔光（缓慢呼吸） */
.citymap-origin::before {
  content: ""; position: absolute; inset: -30px; border-radius: 50%;
  background: radial-gradient(circle, rgba(226, 152, 78, .38), rgba(226, 152, 78, 0) 68%);
}
/* 一圈一圈荡开的细环 */
.citymap-origin::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(197, 121, 56, .55); opacity: 0;
}

@keyframes cityRadiate {
  from { --cr: 0px; opacity: .3; }
  to { --cr: var(--rmax, 1800px); opacity: 1; }
}
@keyframes cityBreath {
  0%, 100% { transform: scale(.86); opacity: .62; }
  50% { transform: scale(1.1); opacity: 1; }
}
@keyframes cityPing {
  0% { transform: scale(.5); opacity: 0; }
  16% { opacity: .8; }
  100% { transform: scale(5.2); opacity: 0; }
}

.citymap.is-play .citymap-photo--lit { animation: cityRadiate 1.9s cubic-bezier(.22, .65, .25, 1) .1s backwards; }
.citymap.is-play .citymap-origin::before { animation: cityBreath 1.9s ease-out backwards; }
.citymap.is-lit .citymap-origin::before { animation: cityBreath 5s ease-in-out infinite; }
.citymap.is-lit .citymap-origin::after { animation: cityPing 3.8s cubic-bezier(.2, .6, .3, 1) infinite; }

/* 正文：压在图左侧的空白半边上 */
.citymap .wrap { position: relative; z-index: 2; padding-top: 64px; padding-bottom: 64px; }
.citymap-copy { max-width: 27rem; }
.citymap-copy .sec-title { margin-bottom: 16px; }
.citymap-copy .sec-sub { margin-bottom: 14px; }
.citymap-note {
  margin: 0 0 18px; font-size: 14px; line-height: 1.7; color: var(--muted-2);
  padding-left: 13px; border-left: 2px solid var(--clay-100);
}
.citymap .textlink { font-size: 16px; }

@media (max-width: 1023px) {
  .citymap { min-height: clamp(360px, 46vw, 460px); }
  .citymap-copy { max-width: 24rem; }
  .citymap .wrap { padding-top: 48px; padding-bottom: 48px; }
  /* 平板档正文更靠近地图西缘，纱罩相应往右多铺一段（同第 6 节 pagehead 那道的思路） */
  .citymap-stage::after {
    background:
      linear-gradient(96deg,
        rgba(253, 250, 244, .96) 0%, rgba(253, 250, 244, .9) 34%,
        rgba(253, 250, 244, .5) 62%, rgba(253, 250, 244, 0) 84%),
      linear-gradient(180deg,
        var(--paper) 0%, rgba(253, 250, 244, .74) 5%, rgba(253, 250, 244, 0) 24%,
        rgba(253, 250, 244, 0) 72%, rgba(253, 250, 244, .78) 94%, var(--paper) 100%);
  }
}
/* 窄屏：正文不再压在图上，图整幅放在正文下方（列反向：DOM 里舞台在前，视觉上排在后） */
@media (max-width: 760px) {
  .citymap {
    display: flex; flex-direction: column-reverse;
    min-height: 0; padding-bottom: 30px;
  }
  .citymap-stage { width: 100%; aspect-ratio: 1672 / 941; }
  /* 图不再当文字底，纱罩只留很轻的一层暖调，别把图压白；上下两端照样化到纸色，不留硬边 */
  .citymap-stage::after {
    background: linear-gradient(180deg,
      var(--paper) 0%, rgba(253, 250, 244, .42) 8%, rgba(253, 250, 244, 0) 28%,
      rgba(253, 250, 244, 0) 74%, rgba(253, 250, 244, .66) 95%, var(--paper) 100%);
  }
  .citymap-photo:not(.citymap-photo--lit) { filter: saturate(.34) brightness(1.03) opacity(.55); }
  .citymap .wrap { padding-top: 52px; padding-bottom: 26px; }
  .citymap-copy { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .citymap-origin::before, .citymap-origin::after { animation: none !important; }
  .citymap-origin::after { display: none; }
}

/* ---------- 36. 新闻与知识改版：四大栏目 + 归档页 + 小麒首屏 ----------
   （2026-08-18。第 34 节是原有的栏目卡/文章页样式，本节只加改版新增的部分，
     追加前已 grep 确认第 34 节仍在。往 site.css 追加内容前先做这一步。）

   版式规则沿用第 34 节那五条（一栏只占一行、筹备中收进 .soon-line、分段、
   计数紧跟标题、说明框通栏靠 max-width 控行宽），本节新增的是：
     · 每栏底部一个「查看更多 XX 文章」入口，指向 news-all.html 对应锚点；
     · 栏目头 56px 小麒图标（AI 生成品牌形象图，台账第 31f 条）；
     · 温情故事卡片的「场景说明 · 非真实案例」角标 —— 站上没有真实案例，这是硬要求；
     · news.html 专用首屏 .pagehead--news。 */

/* ===== 首屏：本页专用的小麒横幅 =====
   .pagehead 本体是另外 16 个内页共用的商标横幅，商标避让公式（21vw）和
   761–1240 平板档都挂在上面，**不要动它**。这里整条覆写掉。
   本节位于样式表末尾，与 .pagehead 同为单类选择器，靠源码顺序取胜 ——
   包括那两个媒体查询里的 .pagehead 规则，也一并被这里压过。

   素材几何（换图必看）：news-hero.jpg 是 2500×941，小麒本体在 x 1616–2499、y 86–940，
   左侧约 65.9% 是纯色象牙白（#FCF5E8）留给文案。原图 1672×941 直接用 cover 会把
   鹿角裁掉，已按 min-height:34vw 反推把画布向左延展到 2500 —— 此时纵向可见
   34vw × 2500 ÷ 941 = 90.3%，上下各只裁 45px，鹿角（y86）与书堆（y880）都在画面内。
   **改 min-height 必须重算这个比例**，低于 88% 就会切到鹿角。 */
.pagehead--news {
  background: #FCF5E8 url("../img/news-hero.jpg") center center / cover no-repeat;
  min-height: 34vw;
  padding: 72px 0 84px;
}
/* 没有商标图层，正文不需要避让，回到常规版心 */
.pagehead--news .wrap { padding-left: var(--gutter); }
/* 文案压在左侧净空区内。最长一行（lead 21 字 ≈ 378px）在 768 宽时可用空间仍有 442px，
   不会压到小麒；这里的上限只是双保险。 */
.pagehead--news h1 { max-width: 30rem; }
.pagehead--news .lead { max-width: 30rem; }
/* 底图是干净的浅色插画，不需要第 6 节那套白色光晕来压照片 */
.pagehead--news h1, .pagehead--news .lead,
.pagehead--news .crumb, .pagehead--news .eyebrow { text-shadow: none; }

/* ===== 栏目头：墨绿横栏 + 挂角小麒（第 38 节详述） ===== */
/* 原来这里是 .col-ico 64px，跟标题并排浮在象牙白上。问题不在 px：栏目头是通栏
   1232px，只有最左约 250px 有内容，右边近千像素全空，图标没有参照物就显小。
   改法是给它一条通到右边界的墨绿横栏当底座，图标挂在栏的左端。 */

/* ===== 每栏底部的「查看更多」入口 ===== */
.col-more { margin-top: 26px; }

/* ===== 温情故事卡：服务名 + 非真实案例角标同一行 =====
   .case-flag 原本是 cases.html 面板头里的大胶囊，放进三列卡片要收一档。
   角标文案「场景说明 · 非真实案例」不要改短，也不要删（台账第 30 条口径）。 */
.post-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.post-top .card-tag { margin-bottom: 0; }
.post--story .case-flag { padding: 6px 11px; font-size: 11.5px; }
.post--story .case-flag .ic { width: 13px; height: 13px; }

/* ===== 归档页 news-all.html ===== */
/* 无 JS 时 .tabpanel{display:none} 会让四个面板全部消失，这里兜底展开。
   只作用于 .arch-panel，不碰 cases.html 的 .case-panel。 */
html:not(.js) .arch-panel { display: block; }
html:not(.js) .arch-panel + .arch-panel { margin-top: 44px; padding-top: 36px; border-top: 1px solid var(--line); }

.arch-head { margin-bottom: 24px; }
.arch-head h2 { font-size: clamp(21px, 2vw, 26px); letter-spacing: -.01em; }
.arch-head p { margin: 12px 0 0; max-width: 52rem; font-size: 16px; color: var(--muted); line-height: 1.8; }
.arch-head p strong { color: var(--ink-2); }

.arch-panel > .notice { margin-bottom: 26px; }

/* 归档用列表，不用卡片 —— 与栏目页的卡片墙区分开，也便于以后文章变多 */
/* 归档条目是三段式：标签 / （标题 + 摘要）/ （日期 · 阅读时长）。
   摘要来自 news.html 卡片的原句，时长来自各详情页 art-meta —— 都是既有数据，不是新写的。
   整行仍然只有一个 <a>（见第 34 节 .post 那条注释：行内再加同址链接会让读屏念两遍、
   Tab 多一个停靠点、搜索引擎多一条重复链接）。 */
/* 归档条目做成卡片，而不是靠分隔线分隔。
   为什么不是「把分隔线加深」：实测 --line-2(#F0EAE0) 对纸底 --paper(#FDFAF4) 只有 1.15:1，
   换成更深的 --line(#E7E0D3) 也才 1.26:1 —— 人眼要看出一条边界一般需要 1.5:1 以上，
   这条线不管怎么调都是「几乎不可见」。所以给每条自己的底色和边框，而不是加深那条线。
   视觉语言与详情页文末 .rel-card、栏目页 .post 一致，不是新发明的样式。

   ⚠️ :last-child 必须和主规则写在一起：上面第 34 节有一条
   `.rel-list a:last-child { border-bottom: 0 }`（那是分隔线形态下的规则），
   它的权重 (0,2,1) 高于 `.arch-list a` (0,1,1)，不一起写会把最后一张卡的下边框抹掉。 */
.arch-list { display: grid; gap: 14px; }
.arch-list a,
.arch-list a:last-child {
  align-items: flex-start; gap: 14px;
  padding: 20px 24px;
  background: var(--white);
  border: 1px solid var(--line-2); border-radius: var(--r-card);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.arch-list a:hover,
.arch-list a:last-child:hover { border-color: var(--green-200); box-shadow: var(--shadow-sm); }
.arch-list .rel-cat { margin-top: 1px; }
.arch-item { flex: 1; min-width: 0; }
.arch-title { display: block; }
.arch-sum {
  display: block; margin-top: 6px;
  font-size: 15px; font-weight: 400; line-height: 1.7; color: var(--muted);
}
.arch-meta {
  flex: none; margin-left: auto; white-space: nowrap;
  font-size: 14px; font-weight: 400; color: var(--muted);
}
/* 适用地区只在 ≠ 全国 时才出现（目前全站只有 news-pension-auth 是厦门）。
   「全国」写出来等于没写，所以九篇全国的一个都不标。
   样式刻意比 .rel-cat 弱一档：它是补充信息，不该跟栏目标签抢最左那个位置。 */
.arch-region {
  display: inline-block; vertical-align: 2px; margin-left: 8px; padding: 1px 8px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  font-size: 12px; font-weight: 400; color: var(--muted);
}
.rel-list a:hover .arch-sum,
.rel-list a:hover .arch-meta { color: var(--muted); }

.arch-lead { margin-top: 30px; }

.arch-alt { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.arch-alt p { margin: 0 0 16px; max-width: 52rem; color: var(--muted); line-height: 1.8; }
.arch-alt p strong { color: var(--ink-2); }

@media (max-width: 1024px) {
  .pagehead--news { padding: 60px 0 68px; }
}

@media (max-width: 760px) {
  /* 窄屏放不下「左文右图」：文案回到整宽，小麒收成页头下方一条 210px 的插图带。
     .pagehead 是纵向 flex，::after 直接作为第二个流式子项排在 .wrap 下面。
     图整幅按高度缩放（auto 210px，不裁切），左侧的象牙白与带底色同色，看不出边界。 */
  .pagehead--news {
    min-height: 0;
    padding: 36px 0 0;
    background: var(--paper);
  }
  .pagehead--news .wrap { padding-bottom: 24px; }
  .pagehead--news h1, .pagehead--news .lead { max-width: none; }
  .pagehead--news::after {
    content: ""; display: block; height: 210px;
    background: #FCF5E8 url("../img/news-hero.jpg") right center / auto 210px no-repeat;
  }
  /* .col-ico 的窄屏尺寸挪到第 38 节（挂角要连着 .col-bar 的左内距一起改，拆开会错位） */
  /* 卡片变整宽后，服务名与角标分列两端会拉得很开，改成靠左顺排 */
  .post-top { justify-content: flex-start; flex-wrap: wrap; }
  .arch-list { gap: 12px; }
  .arch-list a,
  .arch-list a:last-child { gap: 8px; padding: 18px 20px; }
  .arch-list time { margin-left: 0; }
  .arch-meta { margin-left: 0; white-space: normal; }
  .arch-sum { margin-top: 4px; }
}

/* ---------- 37. 新闻页首屏增强：装饰层 + 疑问气泡（news.html） ----------
   （2026-08-18。追加前已 grep 确认第 34、36 节都还在。）

   改版后的首屏只有「象牙白留白 + 小麒」两层，是一张封面，不是入口。这里补四样东西，
   全部用 DOM 图层做，不重出 news-hero.jpg：暖阳光晕、城镇底纹、一枚放大镜、两片落叶，
   外加三个可点击的疑问气泡。

   ★ 装饰层为什么能对得准底图：.hero-art 是内联 SVG，viewBox 与 news-hero.jpg 同为
     2500×941，preserveAspectRatio="xMidYMid slice" —— 这与 background-size:cover +
     center 的裁切规则逐像素一致。所以 SVG 里可以直接用底图的像素坐标落位，视口再怎么
     变、底图是裁上下还是裁左右，装饰都跟着底图一起裁，永远不会飘。**换底图必须同步
     改 viewBox**，否则全部错位。
     纵向留白按第 36 节算过的可见区间来：只有 y 46–895 一定在画面内，装饰别越界。

   ★ 气泡为什么分两态：小麒左缘在 x 1616（64.6%），h1/lead 又是 30rem 定宽。视口 1200px
     以下时，文案右缘（约 504px = 42%）和小麒左缘之间只剩 200 多像素，塞不下气泡。
     所以 ≥1201px 才把气泡浮到小麒左侧那条竖带（45%–63%），窄一点就退回文案下方走
     文档流。**不要把这个断点降下去** —— 降了就会在中等宽度撞上鹿角。 */

.pagehead--news { position: relative; overflow: hidden; }
.pagehead--news > .wrap { position: relative; z-index: 2; }
.hero-art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

/* 暖阳：只有光晕和一道极淡的轮廓，不画实心太阳 —— 实心的一上来就变成儿童插画 */
.nh-sun { transform-box: fill-box; transform-origin: center; animation: nh-breathe 9s ease-in-out infinite; }
@keyframes nh-breathe {
  0%, 100% { opacity: .82; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

/* 放大镜：极轻的浮动，幅度 6 个用户单位（约 0.24vw），是「悬着」不是「在动」 */
.nh-lens { transform-box: fill-box; transform-origin: center; animation: nh-hover 7s ease-in-out infinite; }
@keyframes nh-hover {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(-1.5deg); }
}

/* 落叶：两片各走各的路径与周期，错开才不像同一段动画播两遍 */
.nh-leaf { transform-box: fill-box; transform-origin: center; }
.nh-leaf--a { animation: nh-drift-a 17s ease-in-out infinite; }
.nh-leaf--b { animation: nh-drift-b 23s ease-in-out infinite; }
@keyframes nh-drift-a {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  35% { transform: translate(-18px, 14px) rotate(-13deg); }
  70% { transform: translate(9px, 26px) rotate(8deg); }
}
@keyframes nh-drift-b {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  40% { transform: translate(14px, -16px) rotate(11deg); }
  75% { transform: translate(-10px, -6px) rotate(-7deg); }
}

/* ===== 疑问气泡：云朵 ===== */
/* 窄屏（<1201）走文档流，横向排、放不下就换行；宽屏的绝对定位在本节末尾 */
.q-bubbles { display: flex; flex-wrap: wrap; gap: 15px 16px; margin-top: 30px; max-width: 34rem; }
/* 形状是三层拼的，别拆开看：
     本体   —— 纯白胶囊（999px 圆角），不描边；
     ::before —— 顶边的一排鼓包，用 closest-side 的椭圆渐变按 20% 一格平铺，
                 格子宽度跟着气泡宽度走，所以文案长短变了鼓包也不会被切一半；
     ::after  —— 右下角两枚一大一小的圆，云朵对话框的「尾巴」。
   投影不能用 box-shadow：那样只沿胶囊本体画，鼓包和尾巴会浮在阴影外面。改用
   drop-shadow 挂在本体上 —— filter 作用于「本体 + 两个伪元素」的合并轮廓，
   整朵云才有同一层影子。**加描边等于要给三层各描一遍，别加。** */
.q-bubble {
  position: relative; display: inline-flex; align-items: center;
  padding: 12px 21px 13px; border-radius: 999px;
  background: #fff;
  font-size: 15px; color: var(--ink-2); line-height: 1.5;
  filter: drop-shadow(0 1px 1px rgba(35, 48, 44, .05)) drop-shadow(0 8px 16px rgba(35, 48, 44, .1));
  transition: filter .2s ease, color .2s ease;
  /* 每朵云自己的歪斜与浮动幅度，靠变量喂给同一条 keyframes —— 三朵各飘各的才活 */
  --tilt: 0deg; --lift: -5px;
  animation: q-float 4.6s ease-in-out infinite;
}
/* 鼓包同时铺在上下两条边：上面一排大（20% 一格、24px 高），下面一排小（25% 一格、
   20px 高），云才是四面鼓的，不是「上面长毛的胶囊」。两排都用 repeat-x + 百分比
   格宽，跟着气泡宽度自适应。 */
.q-bubble::before {
  content: ""; position: absolute; left: 15px; right: 15px; top: -8px; bottom: -6px;
  background:
    radial-gradient(closest-side ellipse at 50% 62%, #fff 99%, rgba(255, 255, 255, 0) 100%) top left / 20% 24px repeat-x,
    radial-gradient(closest-side ellipse at 50% 38%, #fff 99%, rgba(255, 255, 255, 0) 100%) bottom left / 25% 20px repeat-x;
}
.q-bubble::after {
  content: ""; position: absolute; right: 24px; bottom: -8px;
  width: 14px; height: 14px; border-radius: 50%; background: #fff;
  box-shadow: 12px 10px 0 -4px #fff;
}
.q-bubble:hover {
  color: var(--green-700);
  filter: drop-shadow(0 1px 1px rgba(35, 48, 44, .05)) drop-shadow(0 12px 22px rgba(46, 110, 96, .18));
}
@keyframes q-float {
  0%, 100% { transform: translateY(0) rotate(var(--tilt)); }
  50% { transform: translateY(var(--lift)) rotate(var(--tilt)); }
}
.q-bubble:nth-child(1) { --tilt: -2.4deg; --lift: -5px; }
.q-bubble:nth-child(2) { --tilt: 1.8deg; --lift: -3px; animation-duration: 5.9s; animation-delay: .7s; }
.q-bubble:nth-child(3) { --tilt: -1.2deg; --lift: -6px; animation-duration: 5.2s; animation-delay: 1.3s; }

/* ≥1201px：三朵云浮到小麒左侧。
   容器是一条「安全带」，两个边界都是硬的：
     左 42% —— h1/lead 的 max-width 是 30rem，1201px 这一档正文右缘最多到 504px = 42%；
     右 34% —— 书本左缘在底图 x1681 = 67%，留 1% 余量。
   1201px 时这条带宽 288px，最宽的一朵（「陪爸妈看病要带什么？」约 194px）加上 26% 的
   错落缩进正好放得下。**错落量是百分比，跟着带宽走，别改成 px** —— 改成 px 在 1201
   那一档就会把云挤到换行。 */
@media (min-width: 1201px) {
  .q-bubbles {
    position: absolute; z-index: 2;
    left: 42%; right: 34%; top: 3%;
    margin-top: 0; max-width: none;
    flex-direction: column; align-items: flex-start; gap: 0;
  }
  .q-bubble { max-width: 100%; }
  .q-bubble:nth-child(2) { margin: 20px 0 0 26%; }
  .q-bubble:nth-child(3) { margin: 26px 0 0 9%; }
}

/* 减弱动效偏好：第 21 节那条全局 !important 已经把时长压到 0.001ms，
   这里再显式关一遍 —— 装饰动效是这一屏最该让位的东西，不留侥幸。 */
@media (prefers-reduced-motion: reduce) {
  .nh-sun, .nh-lens, .nh-leaf { animation: none !important; transform: none !important; }
  /* 云朵的歪斜不是动效，是形状的一部分，保留；只把浮动停掉 */
  .q-bubble { animation: none !important; transform: rotate(var(--tilt)) !important; }
}

@media (max-width: 760px) {
  /* 窄屏首屏改成「文案整宽 + 底部 210px 插图带」（第 36 节），底图的几何整个变了，
     装饰层再按 2500×941 落位就会横在文字上 —— 直接不出。 */
  .hero-art { display: none; }
  .q-bubbles { max-width: none; margin-top: 22px; }
}


/* ---------- 38. 新闻栏目头：墨绿横栏 + 挂角小麒（news.html） ----------
   （2026-08-18 合并版。此前样式表里一度同时存在两份「第 38 节」—— 两个会话各写了一份，
     后一份按源码顺序压掉前一份。本节是二者合并后的唯一版本。
     **要改先 grep 一下节标题，确认全文只有一处**，不要再追加第二份。）

   一、为什么做成横栏
   栏目头是通栏 1232px（.wrap 1280 − 左右 24），旧版只有最左约 250px 有内容 ——
   图标、四字标题、一枚小徽章 —— 右边近千像素全空。图标在这样的空行里没有参照物，
   放多大都显小。横栏通到右边界当底座，图标才从「贴纸」变成「立牌」。

   二、为什么是 --green-900 而不是 --green-800
   白字在 #16453B 上 10.8:1、在 #1D5849 上 9.0:1，两者都够；差别在陶土色：
   以后若往栏里加 --clay-400 的链接，green-900 上 5.0:1 达 AA，green-800 上只有
   3.8:1 不达标。**别改回 green-800。**

   三、四张图为什么必须逐张给尺寸（这一节的关键）
   素材已按 alpha 边界裁掉透明留白，但「画框」不等于「小麒本体」：brand 那张边界含旗子，
   story 那张含沙发与爱心。实测薄荷色本体占各自画布高度的比例：
     policy 242/292 = 83%    clinic 236/292 = 81%
     brand  232/292 = 79%    story  154/221 = 70%
   共用一个高度，story 的小麒就会比别人矮近两成。所以按本体反推逐张的渲染高度，
   目标四栏本体统一 88px（story 的整幅在 168px 以内能达到的最大值，见下）：
     policy 106 → 本体 88     clinic 109 → 本体 88
     brand  131 → 本体 103    story  127 → 本体 88
   前三栏统一在 104，story 是唯一给不满的：它是「小麒＋沙发」双主体横构图，本体每涨
   1px 整幅要宽 2.1px，做到 104 时整幅需 198px，会让温情故事那栏的图比政策补贴那栏
   宽一倍、视觉重量失衡，所以整幅封在 168px、本体落在 88。
   （曾试过反过来把前三栏压到 88 让四栏完全等大，实测四只都偏小，已回退。）
   **换图必须重测本体比例并回来改这四组数**，只换图不改数就会又高低不齐。

   四、为什么不用统一固定框（空隙问题）
   早先四栏共用 168px 宽的框、图标居中，窄的图两侧各空四十多像素，全变成了图标与标题
   之间的空白 —— policy 的空隙 64px，story 只有 21px，看着像没对齐。
   现在改成每张按自己的实际宽度给框（--ico-w），横栏左内距由 calc 从图宽推出来，
   于是**四栏的图标—标题间距恒等于 --ico-gap**。代价是四条横栏的标题起始位置不再对齐
   （最窄 clinic 113px，最宽 story 207px）；四条栏目在页面上相距约 600px，
   不并排出现，实测不读作错位，换来的是每条横栏各自紧凑。

   五、几何
   栏高 66，图标靠底对齐，最高的 brand 131 → 探出 65px。
   第 34 节 .col-block + .col-block 的 104px 间距就是给这个探出量留的，
   动这里的高度必须回去同步核那个数。
   窄屏不逐档重写四组尺寸，只改一个缩放系数 --ico-s。 */

.col-bar {
  --ico-s: 1;        /* 断点缩放系数，只在媒体查询里改这一个 */
  --ico-x: 20px;     /* 图标距横栏左边 */
  --ico-gap: 20px;   /* 图标与标题的间距 —— 四栏恒等 */
  --ico-w: 168px;    /* 缺省取最宽的 story，忘挂修饰类时不会压到标题 */
  /* 横栏那一条带里图的实际右缘。默认等于图宽；只有当图的上半部伸出东西（brand 的旗子）
     时才需要单独给 —— 内距读的是它，不是 --ico-w，否则标题会被栏外的东西推远。 */
  --ico-adv: var(--ico-w);
  --ico-h: 127px;

  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  min-height: 66px;
  padding: 10px 26px 10px calc(var(--ico-x) + var(--ico-adv) * var(--ico-s) + var(--ico-gap));
  background: var(--green-900);
  border-radius: var(--r-card);
}
/* 逐栏尺寸：宽高来自「本体 88px」反推（依据见上面第三段，换图必改这四行） */
.col-bar--policy { --ico-w: 96px;  --ico-h: 126px; }
.col-bar--clinic { --ico-w: 87px;  --ico-h: 129px; }
.col-bar--brand  { --ico-w: 131px; --ico-h: 131px; --ico-adv: 94px; }  /* 131 里有 37px 是旗子，在栏上方 */
.col-bar--story  { --ico-w: 168px; --ico-h: 127px; }

.col-bar h2 { font-size: clamp(21px, 2vw, 26px); letter-spacing: -.01em; color: #fff; }
/* 徽章本体在第 34 节（浅绿底深绿字），压到墨绿上会糊，这里换深底配色 */
.col-bar .col-count { background: rgba(255, 255, 255, .15); color: #fff; }
.col-bar .col-count--zero { background: transparent; border-color: rgba(255, 255, 255, .3); color: rgba(255, 255, 255, .82); }

/* 挂角小麒：绝对定位，靠底对齐栏沿，上半身探出栏顶。
   框宽高已按各图实际比例给，contain 只是兜底防止取整误差裁到边。 */
.col-ico {
  position: absolute; left: var(--ico-x); bottom: 0;
  width: calc(var(--ico-w) * var(--ico-s));
  height: calc(var(--ico-h) * var(--ico-s));
  object-fit: contain; object-position: bottom center;
  filter: drop-shadow(0 6px 12px rgba(22, 69, 59, .22));
  pointer-events: none;
}

/* 说明文字：横栏下方，回到版心左边缘（不跟着标题缩进） */
.col-head > p { margin-top: 16px; }

@media (max-width: 1024px) {
  .col-bar { --ico-s: .85; --ico-x: 16px; --ico-gap: 16px; }
  .col-block + .col-block { margin-top: 88px; }
}

@media (max-width: 760px) {
  /* 栏高 56，图标整体缩到 63%：最高的 story 79px，探出 23px。
     标题因 flex-wrap 换行把栏撑高时图标仍靠底，不会错位。 */
  .col-bar { --ico-s: .63; --ico-x: 12px; --ico-gap: 12px; min-height: 56px; padding-top: 9px; padding-bottom: 9px; padding-right: 18px; }
  .col-block + .col-block { margin-top: 62px; }
}