/* ===================================================================
 * How It Works · About · Journal 列表 · FAQ 列表 —— 2026-09-28 第三轮：按 Figma 四页（How It Works / About / Journal / FAQ）整份重写。
 * 在 cmh-brand.css 之后加载，只管样子；页里自带的 <style> 在它前面，同权重以这里为准。
 * 面包屑、橙色联系带的通用样式在 cmh-brand.css；FAQ 折叠的行为在 /assets/js/v2-pages.js。
 * =================================================================== */

/* ── 横幅（稿：面包屑下 48 起；整幅照片 + 左藏青→右透明渐变；文字从横幅顶 70 开始：
 *   标题 Poppins 64/70 白 → 24 → 说明 16/26 白、宽 582。高度各页不同：How It Works 460 · About 490 · Journal 316 · FAQ 382） ── */
.hiw-hero, .ab-hero, .page-header {
  position: relative; overflow: hidden; display: block; margin: 49px 0 0; padding: 70px 0; border: 0; background: var(--navy);
}
.hiw-hero { min-height: 460px; }
.ab-hero { min-height: 490px; }
main:has(.journal-section) .page-header { min-height: 316px; }
main:has(.faq-section) .page-header { min-height: 382px; }
.hiw-hero-grid, .ab-hero-grid { display: block; }
.hiw-hero-media, .ab-hero-media { position: absolute; inset: 0; z-index: 0; min-height: 0; margin: 0; border-radius: 0; box-shadow: none; }
.hiw-hero-media img, .ab-hero-media img, .page-header-bg {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; transform: none !important;
}
/* 照片取景照稿：How It Works 与 About 用的是同一张车间照片，稿子分别取在 33% / 49% 的高度；Journal 55%、FAQ 52% */
.hiw-hero-media img { object-position: 50% 33%; }
.ab-hero-media img { object-position: 50% 49%; }
main:has(.journal-section) .page-header-bg { object-position: 50% 55%; }
main:has(.faq-section) .page-header-bg { object-position: 50% 52%; }
.hiw-hero::after, .ab-hero::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #133478 0%, rgba(0, 0, 0, 0) 100%); }
.page-header-overlay { z-index: 1; background: linear-gradient(90deg, #133478 0%, rgba(0, 0, 0, 0) 100%); }
/* 照片层要以整个横幅为定位基准：How It Works / About 的照片在 .container 里面，所以 .container 不能是定位容器，文字层单独抬上来 */
.hiw-hero .container, .ab-hero .container { position: static; }
.hiw-hero-text, .ab-hero-text, .page-header > .container { position: relative; z-index: 2; }
.hiw-hero-text, .ab-hero-text, .page-header > .container { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; max-width: none; }
.hiw-eyebrow, .ab-eyebrow, .page-eyebrow { display: none; }
.hiw-title, .ab-title, .page-title {
  margin: 0; font: 500 64px/70px var(--font-display); letter-spacing: 0; font-variation-settings: normal; color: #fff;
}
.hiw-title em, .ab-title em, .page-title em { font-family: inherit; font-style: normal; font-weight: inherit; color: inherit; }
.hiw-subtitle, .ab-subtitle, .page-desc { max-width: 582px; margin: 0; font: 400 16px/26px var(--font-body); color: #fff; opacity: 1; }

/* ── How It Works 三步（稿：每步上下 72；左 402 =「Step 01」Poppins 40/48 橙 → 42 → 照片卡 402×464 圆角 24（藏青 20% 罩），
 *   卡内距底 40、宽 322 居中：步骤名 Poppins 28/36 白 → 19 → Inter 600 16/26 白 80%；
 *   右 774 = 小节（Poppins 20/28 → 12 → 14/20 slate，小节之间 32）+ 圆点清单 + 三格数据条（上下 mist 线、上下 36；图标 32 → 24 → 数值 Poppins 20/28 · 说明 12/18 slate）；
 *   第二步左右互换，「Step 02」靠右） ── */
.hiw-step, .hiw-step:nth-child(even) { padding: 72px 0; background: #fff !important; border: 0; }
.hiw-step-grid { display: grid; grid-template-columns: 402px 774px; justify-content: space-between; gap: 0; align-items: start; direction: ltr; }
.hiw-step-grid > * { direction: ltr; }
.hiw-step-grid > div:first-child { display: flex; flex-direction: column; gap: 42px; }
.hiw-step:nth-of-type(3) .hiw-step-grid { grid-template-columns: 774px 402px; }
.hiw-step:nth-of-type(3) .hiw-step-grid > div:first-child { order: 2; }
.hiw-step:nth-of-type(3) .hiw-step-label { text-align: right; }
.hiw-step-num { display: none; }
.hiw-step-label { margin: 0; font: 500 40px/48px var(--font-display); letter-spacing: 0; text-transform: none; color: var(--orange); }
.hiw-step-media {
  position: relative; width: 402px; max-width: 100%; height: 464px; margin: 0; overflow: hidden; border-radius: 24px; background: var(--navy-deep); box-shadow: none; aspect-ratio: auto;
}
.hiw-step-media img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; opacity: 1; transform: none !important; }
.hiw-step-media::after { content: ''; position: absolute; inset: 0; z-index: 1; background: rgba(19, 52, 120, .2); }
.hiw-step-caption {
  position: absolute; left: 50%; right: auto; top: auto; bottom: 40px; z-index: 2; width: 322px; max-width: calc(100% - 48px); transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 19px; padding: 0; background: none; color: #fff;
}
.hiw-step-caption h2 { margin: 0; font: 500 28px/36px var(--font-display); letter-spacing: 0; color: #fff; }
.hiw-step-caption p { margin: 0; overflow: visible; font: 600 16px/26px var(--font-body); color: rgba(255, 255, 255, .8); }
.hiw-step-content h2 { display: none; }
.hiw-step-content h3 { margin: 0 0 12px; font: 500 20px/28px var(--font-display); letter-spacing: 0; color: var(--text); }
.hiw-step-content * + h3 { margin-top: 32px; }
.hiw-step-content p { margin: 0; font: 400 14px/20px var(--font-body); color: var(--slate); }
.hiw-step-content p a { color: var(--navy); text-decoration: underline; }
.hiw-step-content ul { margin: 0; padding: 0; list-style: none; color: var(--slate); }
.hiw-step-content ul li { position: relative; margin: 0; padding: 0 0 0 15px; font: 400 14px/20px var(--font-body); color: var(--slate); }
.hiw-step-content ul li::before { content: '•'; position: absolute; left: 0; top: 0; font-size: 16px; line-height: 20px; }
.hiw-meta-strip { display: flex; gap: 0; margin: 32px 0 0; padding: 36px 0; border: 0; border-top: 1px solid var(--mist); border-bottom: 1px solid var(--mist); background: none; }
.hiw-meta-cell {
  position: static; flex: 1 1 0; display: grid; grid-template-columns: 32px auto; column-gap: 24px; row-gap: 2px; justify-content: center; align-items: center;
  padding: 0; border: 0; background: none;
}
.hiw-meta-cell::before { content: ''; position: static; grid-row: 1 / 3; width: 32px; height: 32px; border: 0; border-radius: 0; background: center / contain no-repeat; }
.hiw-meta-cell strong { grid-column: 2; margin: 0; font: 500 20px/28px var(--font-display); letter-spacing: 0; font-variation-settings: normal; color: var(--text); white-space: nowrap; }
.hiw-meta-cell span { grid-column: 2; font: 400 12px/18px var(--font-body); letter-spacing: 0; text-transform: none; color: var(--slate); white-space: nowrap; }
.hiw-step:nth-of-type(2) .hiw-meta-cell:nth-child(1)::before { background-image: url('/assets/img/icons/hiw-1-1.svg'); }
.hiw-step:nth-of-type(2) .hiw-meta-cell:nth-child(2)::before { background-image: url('/assets/img/icons/hiw-1-2.svg'); }
.hiw-step:nth-of-type(2) .hiw-meta-cell:nth-child(3)::before { background-image: url('/assets/img/icons/hiw-1-3.svg'); }
.hiw-step:nth-of-type(3) .hiw-meta-cell:nth-child(1)::before { background-image: url('/assets/img/icons/hiw-2-1.svg'); }
.hiw-step:nth-of-type(3) .hiw-meta-cell:nth-child(2)::before { background-image: url('/assets/img/icons/hiw-2-2.svg'); }
.hiw-step:nth-of-type(3) .hiw-meta-cell:nth-child(3)::before { background-image: url('/assets/img/icons/hiw-2-3.svg'); }
.hiw-step:nth-of-type(4) .hiw-meta-cell:nth-child(1)::before { background-image: url('/assets/img/icons/hiw-3-1.svg'); }
.hiw-step:nth-of-type(4) .hiw-meta-cell:nth-child(2)::before { background-image: url('/assets/img/icons/hiw-3-2.svg'); }
.hiw-step:nth-of-type(4) .hiw-meta-cell:nth-child(3)::before { background-image: url('/assets/img/icons/hiw-3-3.svg'); }

/* ── How It Works 常见问题（稿：上下 72；左 774 折叠列表，右 470 标题 Poppins 40/48 左对齐；
 *   问题 Poppins 18/28 + 24px 加减号，收起上下 20、展开问题→答案 12、底 24；答案 14/20 slate 右留 24；第一条不留上边距、默认展开） ── */
.hiw-faq { padding: 72px 0; background: #fff; border: 0; }
.hiw-faq .container { display: grid; grid-template-columns: 774px 470px; justify-content: space-between; align-items: start; }
.hiw-faq h2 { grid-column: 2; grid-row: 1; margin: 0; font: 500 40px/48px var(--font-display); letter-spacing: 0; font-variation-settings: normal; color: var(--text); }
.hiw-faq h2 em { font-family: inherit; font-style: normal; font-weight: inherit; color: inherit; }
.hiw-faq-list { grid-column: 1; grid-row: 1; display: block; margin: 0; padding: 0; border: 0; }
.hiw-faq-item { margin: 0; padding: 20px 0 24px; border: 0; border-bottom: 1px solid var(--mist); background: none; }
.hiw-faq-item:first-child { padding-top: 0; }
.hiw-faq-item h4 { margin: 0 0 12px; font: 500 18px/28px var(--font-display); letter-spacing: 0; color: var(--text); }
.hiw-faq-item p { max-width: none; margin: 0; padding: 0 24px 0 0; font: 400 14px/20px var(--font-body); color: var(--slate); }
/* 折叠（v2-pages.js 接管后：问题收进 button.acc-q，答案收进 .acc-a） */
.is-acc > .hiw-faq-item { padding: 0; }
.is-acc > .hiw-faq-item h4 { margin: 0; }
.acc-q {
  position: relative; display: block; width: 100%; margin: 0; padding: 20px 40px 20px 0; border: 0; border-radius: 0; background: none;
  font: inherit; letter-spacing: inherit; color: inherit; text-align: left; cursor: pointer; transition: padding-bottom .3s ease;
}
.acc-q::after { content: ''; position: absolute; right: 0; top: 22px; width: 24px; height: 24px; background: url('/assets/img/icons/faq-plus.svg') center / 24px 24px no-repeat; }
.acc-q:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.is-acc > :first-child .acc-q { padding-top: 0; }
.is-acc > :first-child .acc-q::after { top: 2px; }
.is-open .acc-q { padding-bottom: 12px; }
.is-open .acc-q::after { background-image: url('/assets/img/icons/faq-minus.svg'); }
.acc-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.acc-a > div { min-height: 0; overflow: hidden; }
.acc-a > div > :last-child { padding-bottom: 24px; }
.is-open > .acc-a { grid-template-rows: 1fr; }
@media (prefers-reduced-motion: reduce) { .acc-a, .acc-q { transition: none; } }

/* ── 橙色联系带（How It Works / About；与工厂页 .cta-band 同一套：橙底、上下 80；587 宽居中：标题 Poppins 40/48 → 16 → 说明 Poppins 500 18/24 → 40 → 按钮） ── */
.hiw-cta, .ab-cta { position: relative; overflow: hidden; margin: 0; padding: 80px 0; border: 0; background: var(--orange); color: #fff; text-align: center; }
.hiw-cta::before, .ab-cta::before, .hiw-cta::after, .ab-cta::after { content: ''; position: absolute; pointer-events: none; background-repeat: no-repeat; background-size: 100% 100%; }
.hiw-cta::before, .ab-cta::before { left: -24px; top: -70px; width: 435.865px; height: 126.981px; background-image: url('/assets/img/cta-swoosh-tl.svg'); transform: rotate(165deg); }
.hiw-cta::after, .ab-cta::after { right: -133.1px; bottom: -231.7px; width: 952.231px; height: 277.415px; background-image: url('/assets/img/cta-swoosh-br.svg'); transform: rotate(-30.56deg); }
.hiw-cta .container, .ab-cta .container { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; box-sizing: content-box; max-width: 587px; }
.hiw-cta h2, .ab-cta h2 { margin: 0; font: 500 40px/48px var(--font-display); letter-spacing: 0; font-variation-settings: normal; color: #fff; }
.hiw-cta h2 em, .ab-cta h2 em { font-family: inherit; font-style: normal; font-weight: inherit; color: inherit; }
.hiw-cta p, .ab-cta p { max-width: none; margin: 16px 0 0; font: 500 18px/24px var(--font-display); color: #fff; opacity: 1; }
.hiw-cta .container > div, .ab-cta .container > div { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 16px !important; margin: 40px 0 0; }
.hiw-cta .btn-primary, .ab-cta .btn-primary {
  display: inline-flex; align-items: center; justify-content: center; height: 48px; margin: 0; padding: 10px 24px !important; border: 0 !important; border-radius: 6px !important;
  background: #fff !important; color: var(--text) !important; font: 600 14px/20px var(--font-body) !important; letter-spacing: 0; text-transform: none; box-shadow: none; transform: none;
}
.hiw-cta .btn-primary + .btn-primary, .ab-cta .btn-primary + .btn-primary { padding: 11px 25px !important; border: 1px solid #fff !important; background: transparent !important; color: #fff !important; }
.hiw-cta .btn-primary svg, .ab-cta .btn-primary svg { display: none; }
@media (hover: hover) {
  .hiw-cta .btn-primary:hover, .ab-cta .btn-primary:hover { background: var(--navy) !important; color: #fff !important; }
  .hiw-cta .btn-primary + .btn-primary:hover, .ab-cta .btn-primary + .btn-primary:hover { background: var(--orange) !important; border-color: var(--orange) !important; }
}
@media (min-width: 769px) { .hiw-cta h2, .ab-cta h2 { white-space: nowrap; } }

/* ── About ─────────────────────────────────────────────────────── */
.ab-section, .ab-section.alt { padding: 0; border: 0; background: #fff; }
.ab-section h2 { margin: 0; font: 500 40px/48px var(--font-display); letter-spacing: 0; font-variation-settings: normal; color: var(--text); }
.ab-section p { max-width: none; }
.ab-section h2 em { font-family: inherit; font-style: normal; font-weight: inherit; color: inherit; }
/* ① 运营商（稿：上下 72；左 774：标题 → 24 → 正文 16/26 ink 两端对齐、段距 24，小标题 Poppins 20/28 前空 40；右 442×512 圆角 24 照片 + 藏青 20% 罩） */
.ab-section:not(.alt):has(.ab-section-media) { padding: 72px 0; }
.ab-section-grid { display: grid; grid-template-columns: 774px 442px; justify-content: space-between; align-items: start; gap: 0; }
.ab-section-text { display: flex; flex-direction: column; gap: 24px; }
.ab-section-text p { margin: 0; font: 400 16px/26px var(--font-body); color: var(--text); text-align: justify; }
.ab-section-text h3 { margin: 16px 0 0; font: 500 20px/28px var(--font-display); letter-spacing: 0; color: var(--text); }
.ab-section-media { position: relative; width: 442px; max-width: 100%; height: 512px; aspect-ratio: auto; overflow: hidden; border-radius: 24px; }
.ab-section-media img { width: 100%; height: 100%; object-fit: cover; }
.ab-section-media::after { content: ''; position: absolute; inset: 0; background: rgba(19, 52, 120, .2); }
/* ② 创始人语（稿：854 宽靠右；paper 底、圆角 24、内边距 40/80；橙色引号 40 → 32 → 引文 Poppins 28/36 → 40 → 署名靠右：Poppins 20/28 · 14/20 橙色大写，上方一条带折角的细线） */
.ab-quote { padding: 0; border: 0; background: #fff; }
.ab-quote .container {
  position: relative; box-sizing: border-box; width: min(854px, calc(100% - 2 * var(--gutter, 24px))); max-width: none;
  margin: 0 max(var(--gutter, 24px), calc(50% - 660px)) 0 auto; padding: 40px 80px; border-radius: 24px; background: var(--paper);
  display: flex; flex-direction: column; gap: 40px;
}
.ab-quote .container::before { content: ''; position: static; width: 40px; height: 40px; margin: 0 0 -8px; background: url('/assets/img/icons/about-quote.svg') center / 40px 40px no-repeat; font-size: 0; }
.ab-quote blockquote { margin: 0; padding: 0; border: 0; background: none; font: 500 28px/36px var(--font-display); letter-spacing: 0; color: var(--text); }
.ab-quote blockquote::before, .ab-quote blockquote::after { display: none; content: none; }
.ab-quote cite {
  position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; margin: 0; padding: 0; border: 0;
  font: 400 14px/20px var(--font-body); font-style: normal; letter-spacing: 0; text-transform: uppercase; text-align: right; color: var(--orange);
}
.ab-quote cite::before { content: ''; position: absolute; left: 0; right: 0; top: -17px; height: 73px; background: url('/assets/img/icons/about-quote-line.svg') right top / 694px 73px no-repeat; pointer-events: none; }
.ab-quote cite strong { position: relative; display: block; margin: 0; font: 500 20px/28px var(--font-display); letter-spacing: 0; text-transform: none; color: var(--text); }
/* ③ 四件事（稿：前空 150；标题 → 24 → 说明 16/26 ink 宽 880 → 72 → 两列、间距 56：图标 40 → 14 → 标题 Poppins 20/28 → 14 → 正文 14/20 slate） */
.ab-section.alt:has(.ab-diff-grid) { padding: 150px 0 0; }
.ab-section:has(.ab-diff-grid) .container > p { max-width: 880px; margin: 24px 0 0; font: 400 16px/26px var(--font-body); color: var(--text); }
.ab-diff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin: 72px 0 0; border: 0; }
.ab-diff-card { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0; border: 0; background: none; text-align: center; }
.ab-diff-icon { display: block; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 0; background: center / contain no-repeat; font-size: 0; color: transparent; }
.ab-diff-card:nth-child(1) .ab-diff-icon { background-image: url('/assets/img/icons/about-diff-1.svg'); }
.ab-diff-card:nth-child(2) .ab-diff-icon { background-image: url('/assets/img/icons/about-diff-2.svg'); }
.ab-diff-card:nth-child(3) .ab-diff-icon { background-image: url('/assets/img/icons/about-diff-3.svg'); }
.ab-diff-card:nth-child(4) .ab-diff-icon { background-image: url('/assets/img/icons/about-diff-4.svg'); background-size: 36px 36px; }
.ab-diff-card h4 { margin: 0; font: 500 20px/28px var(--font-display); letter-spacing: 0; color: var(--text); }
.ab-diff-card p { margin: 0; font: 400 14px/20px var(--font-body); color: var(--slate); text-align: center; }
/* ④ 运营事实（稿：前空 220；标题靠右 → 24 → 说明 16/26 宽 808 靠右放 → 72 → cloud 大面板、圆角 24、上下 40；四列两行，格间 mist 线；
 *   标签 14/20 藏青大写 → 16 → 数值 Poppins 20/28 → 4 → 注 14/20 slate） */
.ab-section:has(.ab-facts-grid) { padding: 220px 0 0; }
.ab-section:has(.ab-facts-grid) h2 { text-align: right; }
.ab-section:has(.ab-facts-grid) .container > p { max-width: 808px; margin: 24px 0 0 auto; font: 400 16px/26px var(--font-body); color: var(--text); }
.ab-facts-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 72px 0 0; padding: 40px 0; border: 0; border-radius: 24px; background: var(--cloud); overflow: hidden; }
.ab-fact-cell { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 0 32px 32px; border: 0; border-right: 1px solid var(--mist); border-bottom: 1px solid var(--mist); background: none; text-align: center; }
.ab-fact-cell:nth-child(4n) { border-right: 0; }
.ab-fact-cell:nth-child(n+5) { padding: 32px 32px 0; border-bottom: 0; }
.ab-fact-label { margin: 0; font: 400 14px/20px var(--font-body); letter-spacing: 0; text-transform: uppercase; color: var(--navy); }
.ab-fact-value { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; font: 500 20px/28px var(--font-display); letter-spacing: 0; color: var(--text); }
.ab-fact-value small { display: block; margin: 0; font: 400 14px/20px var(--font-body); color: var(--slate); }
/* ⑤ 为什么是大湾区（稿：前空 84；标题 → 24 → 正文 16/26 ink 通栏、段距 24；稿子这段没有配图） */
.ab-section.alt:has(.ab-section-media) { padding: 84px 0 0; }
.ab-section.alt .ab-section-grid { display: block; }
.ab-section.alt .ab-section-media { display: none; }
.ab-section.alt .ab-section-text p { text-align: left; }
/* ⑥ 谁在写 Journal（稿：前空 100、后空 130；左 594 标题垂直居中，右 594 cloud 卡、圆角 24、内边距 40/60：说明 16/26 → 40 → 头像 65（圆角 28）+ 名字 Inter 600 18/28 → 8 → 「职务 · View profile →」14/20 下划线） */
.ab-section:has(.author-card) { padding: 100px 0 130px; }
.ab-section:has(.author-card) .container { display: grid; grid-template-columns: 594px 594px; grid-template-rows: auto auto; justify-content: space-between; align-items: center; }
.ab-section:has(.author-card) .container::before { content: ''; grid-column: 2; grid-row: 1 / 3; align-self: stretch; border-radius: 24px; background: var(--cloud); }
.ab-section:has(.author-card) h2 { grid-column: 1; grid-row: 1 / 3; }
.ab-section:has(.author-card) .container > p { position: relative; z-index: 1; grid-column: 2; grid-row: 1; margin: 0; padding: 40px 60px 0; font: 400 16px/26px var(--font-body); color: var(--text); }
.author-card {
  position: relative; z-index: 1; grid-column: 2; grid-row: 2; display: flex !important; align-items: center; gap: 24px !important; margin: 0 !important; padding: 40px 60px !important;
  border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; text-decoration: none; color: var(--text);  /* 标记里带内联样式 */
}
.author-card img { flex: none; width: 65px !important; height: 65px !important; border-radius: 28px !important; object-fit: cover; }
.author-card > span { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.author-card strong { font: 600 18px/28px var(--font-body); color: var(--text); }
.author-card > span > span { padding: 4px 0; border-bottom: 1px solid var(--text); font: 400 14px/20px var(--font-body); color: var(--text); }
@media (hover: hover) { .author-card:hover > span > span { color: var(--orange); border-color: var(--orange); } }

/* ── Journal / FAQ 列表（稿：横幅下 80；三列、列距 24 行距 40；卡片顶部 2px 藏青线、内边距 24，悬浮 cloud 底；
 *   Journal：标题 Poppins 20/28（占满余高）→ 16 → 栏目 Inter 600 14/20 橙大写 · 右侧阅读时长 14/20 slate → 12 → 摘要 14/20 slate（三行）；
 *   FAQ：栏目 → 12 → 标题 → 12 → 摘要 → 24 → 「3 min read · 日期」14/20 slate；分页离卡片 32、离页脚 72） ── */
.journal-section, .faq-section { padding: 80px 0 72px; background: #fff; border: 0; }
.journal-section .journal-grid, .faq-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 24px; margin: 0; }
.journal-card, .faq-card {
  position: relative; display: flex; margin: 0; padding: 0; overflow: visible; border: 0; border-top: 2px solid var(--navy); border-radius: 0;
  background: #fff; box-shadow: none; transform: none; transition: background .2s;
}
.journal-card { min-height: 260px; }
.faq-card { min-height: 302px; }
.faq-section .empty-row { margin: 40px 0 0; padding: 0; border: 0; text-align: center; font: 400 14px/20px var(--font-body); color: var(--slate); }
.faq-section .empty-row a { color: var(--orange) !important; }
.journal-card > a, .faq-card > a { display: flex; flex-direction: column; width: 100%; padding: 24px; color: inherit; text-decoration: none; }
.journal-card > a { gap: 16px; }
.journal-card .journal-img { display: none; }
.journal-card .journal-title { order: 1; flex: 1 0 auto; margin: 0; font: 500 20px/28px var(--font-display); letter-spacing: 0; font-variation-settings: normal; color: var(--text); }
.journal-card .journal-meta { order: 2; display: flex; justify-content: space-between; gap: 12px; margin: 0; font: 600 14px/20px var(--font-body); letter-spacing: 0; text-transform: uppercase; color: var(--orange); }
.journal-card .journal-meta span::after { display: none; content: none; }
.journal-card .journal-meta span:last-child { font-weight: 400; text-transform: none; color: var(--slate); white-space: nowrap; }
.journal-card .journal-excerpt {
  order: 3; min-height: 79px; margin: -4px 0 0; font: 400 14px/20px var(--font-body); color: var(--slate);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.faq-card > a { gap: 12px; }
.faq-cluster { margin: 0; font: 600 14px/20px var(--font-body); letter-spacing: 0; text-transform: uppercase; color: var(--orange); }
.faq-q { margin: 0; font: 500 20px/28px var(--font-display); letter-spacing: 0; font-variation-settings: normal; color: var(--text); }
.faq-answer { margin: 0; font: 400 14px/20px var(--font-body); color: var(--slate); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.faq-read { margin: 12px 0 0; font: 400 14px/20px var(--font-body); letter-spacing: 0; text-transform: none; color: var(--slate); }
@media (hover: hover) {
  .journal-card:hover, .faq-card:hover { background: var(--cloud); transform: none; box-shadow: none; }
  .journal-card:hover .journal-title, .faq-card:hover .faq-q { color: var(--text); }
}
/* Journal 分页（稿：36 高、圆角 6、描边 silver 50%；当前页藏青；首 / 末页双箭头图标；« ← Previous  1 2 … 12  Next → »） */
#cmh-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin: 32px 0 0; padding: 0; border: 0; }
#cmh-pagination .pg-info { display: none; }
#cmh-pagination .pg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 36px; height: 36px; padding: 0 18px;
  border: 1px solid rgba(174, 182, 194, .5); border-radius: 6px; background: #fff; color: var(--text);
  font: 400 12px/18px var(--font-body); letter-spacing: 0; text-transform: none; cursor: pointer;
}
#cmh-pagination .pg-btn[data-pg] { width: 36px; padding: 0; }
#cmh-pagination .pg-btn.active { background: var(--navy); border-color: var(--navy); color: #fff; }
#cmh-pagination .pg-btn:disabled { opacity: .3; color: var(--slate); border-color: var(--silver); cursor: default; }
#cmh-pagination .pg-btn svg { width: 10px; height: 8px; }
#cmh-pagination .pg-ellipsis { display: inline-flex; align-items: center; justify-content: center; min-width: 8px; font: 400 12px/18px var(--font-body); color: var(--text); }
#cmh-pagination #pg-first, #cmh-pagination #pg-last { width: auto; padding: 0 18px; font-size: 0; }
#cmh-pagination #pg-first::before, #cmh-pagination #pg-last::before { content: ''; width: 24px; height: 24px; background: url('/assets/img/icons/page-first.svg') center / 24px 24px no-repeat; }
#cmh-pagination #pg-last::before { transform: scaleX(-1); }
@media (hover: hover) { #cmh-pagination .pg-btn:hover:not(:disabled):not(.active) { border-color: var(--navy); color: var(--navy); } }

/* ── 响应式 ─────────────────────────────────────────────────────── */
@media (max-width: 1279px) {
  .hiw-step-grid, .hiw-step:nth-of-type(3) .hiw-step-grid { grid-template-columns: 402px minmax(0, 1fr); gap: 48px; }
  .hiw-step:nth-of-type(3) .hiw-step-grid { grid-template-columns: minmax(0, 1fr) 402px; }
  .hiw-faq .container { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 48px; }
  .ab-section-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; }
  .ab-section:has(.author-card) .container { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 48px; }
}
@media (max-width: 1023px) {
  .hiw-step-grid, .hiw-step:nth-of-type(3) .hiw-step-grid { grid-template-columns: 1fr; gap: 32px; }
  .hiw-step:nth-of-type(3) .hiw-step-grid > div:first-child { order: 0; }
  .hiw-step:nth-of-type(3) .hiw-step-label { text-align: left; }
  .hiw-step-media { width: 100%; height: 420px; }
  .hiw-faq .container { grid-template-columns: 1fr; gap: 32px; }
  .hiw-faq h2 { grid-column: 1; grid-row: 1; }
  .hiw-faq-list { grid-row: 2; }
  .ab-section-grid { grid-template-columns: 1fr; gap: 32px; }
  .ab-section-media { width: 100%; height: 360px; }
  .ab-diff-grid { grid-template-columns: 1fr; gap: 40px; }
  .ab-facts-grid { grid-template-columns: repeat(2, 1fr); }
  .ab-fact-cell, .ab-fact-cell:nth-child(n+5) { padding: 24px; border-bottom: 1px solid var(--mist); }
  .ab-fact-cell:nth-child(2n) { border-right: 0; }
  .ab-fact-cell:nth-child(4n) { border-right: 0; }
  .ab-fact-cell:nth-last-child(-n+2) { border-bottom: 0; }
  .ab-section:has(.author-card) .container { grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 0; }
  .ab-section:has(.author-card) h2 { grid-row: 1; margin-bottom: 32px; }
  .ab-section:has(.author-card) .container::before { grid-column: 1; grid-row: 2 / 4; }
  .ab-section:has(.author-card) .container > p { grid-column: 1; grid-row: 2; }
  .author-card { grid-column: 1; grid-row: 3; }
  .journal-section .journal-grid, .faq-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .hiw-hero, .ab-hero, .page-header { margin-top: 24px; padding: 48px 0; }
  .hiw-hero, .ab-hero, main:has(.journal-section) .page-header, main:has(.faq-section) .page-header { min-height: 0; }
  .hiw-title, .ab-title, .page-title { font-size: 40px; line-height: 46px; }
  .hiw-title br, .ab-title br { display: none; }
  .hiw-step { padding: 48px 0; }
  .hiw-step-label { font-size: 32px; line-height: 40px; }
  .hiw-step-media { height: auto; min-height: 420px; }
  .hiw-step-caption { position: absolute; }
  .hiw-meta-strip { flex-direction: column; gap: 20px; padding: 24px 0; }
  .hiw-meta-cell { justify-content: start; }
  .hiw-faq { padding: 48px 0; }
  .hiw-faq h2, .ab-section h2, .hiw-cta h2, .ab-cta h2 { font-size: 28px; line-height: 36px; }
  .hiw-cta, .ab-cta { padding: 56px 0; }
  .ab-section:not(.alt):has(.ab-section-media) { padding: 48px 0; }
  .ab-quote .container { padding: 32px 24px; margin: 0 var(--gutter, 16px); width: auto; }
  .ab-quote blockquote { font-size: 20px; line-height: 28px; }
  .ab-quote cite::before { display: none; }
  .ab-section.alt:has(.ab-diff-grid), .ab-section:has(.ab-facts-grid) { padding-top: 72px; }
  .ab-section:has(.ab-facts-grid) h2 { text-align: left; }
  .ab-facts-grid { grid-template-columns: 1fr; padding: 16px 0; }
  .ab-fact-cell, .ab-fact-cell:nth-child(n+5) { border-right: 0; border-bottom: 1px solid var(--mist); }
  .ab-fact-cell:last-child { border-bottom: 0; }
  .ab-section.alt:has(.ab-section-media) { padding-top: 56px; }
  .ab-section:has(.author-card) { padding: 72px 0; }
  .ab-section:has(.author-card) .container > p { padding: 24px 24px 0; }
  .author-card { padding: 24px; }
  .journal-section, .faq-section { padding: 48px 0; }
  .journal-section .journal-grid, .faq-grid { grid-template-columns: 1fr; gap: 24px; }
  .journal-card, .faq-card { min-height: 0; }
}