/* ===================================================================
 * 首页 · 视觉升级（2026-09-28 按 Figma「CMH海外 / Home」+「首页 说明」整份重写）
 * 四语首页（/ · /zh/ · /es/ · /fr/）共用，在 cmh-brand.css 之后加载。
 * 数值全部取自设计稿的 design context（1440 画布、内容 1320、区块上下 72）；
 * 图标 / 插图全部是从稿子导出的原件（web/assets/img/icons/、journal-state-*.webp、dots-pricing.png）。
 * 交互在 /assets/js/v2-home.js：类目跑马灯、Journal 三态切换、搜索页签滑过切换。
 * =================================================================== */

/* ── 0. 区块节奏与区块头 ──────────────────────────────────────────
 * 稿：区块上下 72；小标 Poppins 18/24 大写橙色 + 20px 图标（间距 12）；小标→标题 16；标题 Poppins 40/48 */
section#categories, section#factories, section.how, section.trust, section.verify, section#journal { padding: 72px 0; }
section.trust { padding-bottom: 104px; }   /* 创始人语与下一区块之间 104（Sam 2026-09-28） */
section.verify { padding-top: 104px; }
.section-header {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 16px; margin: 0 auto 50px; padding: 0; border: 0; max-width: 1000px;
}
.section-num {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-size: 18px; line-height: 24px; font-weight: 500; letter-spacing: 0;
  text-transform: uppercase; color: var(--orange);
}
.section-num::before {
  content: ''; flex: none; width: 20px; height: 20px; border-radius: 0; opacity: 1;
  background: url('/assets/img/icons/eyebrow-categories.svg') center / 20px 20px no-repeat;
  -webkit-mask: none; mask: none;
}
#factories .section-num::before { background-image: url('/assets/img/icons/eyebrow-featured.svg'); }
.how .section-num::before { background-image: url('/assets/img/icons/eyebrow-process.svg'); }
.trust .section-num::before { background-image: url('/assets/img/icons/eyebrow-why.svg'); }
.verify .section-num::before { background-image: url('/assets/img/icons/eyebrow-verif.svg'); }
#journal .section-num::before { background-image: url('/assets/img/icons/eyebrow-journal.svg'); }
.section-num strong { display: none; }
.section-title {
  font-family: var(--font-display); font-size: 40px; line-height: 48px; font-weight: 500; letter-spacing: 0;
  color: var(--text); text-wrap: balance; margin: 0;
}
.section-title em { font-style: normal; color: inherit; }

/* 通用 32px 箭头图标位（按钮里的 <i class="ico">） */
.ico { display: inline-block; flex: none; width: 32px; height: 32px; background: center / 32px 32px no-repeat; }

/* ── 1. Hero ───────────────────────────────────────────────────────
 * 稿：背景图 + 渐变 rgba(0,13,37,.4)→rgba(19,52,120,.8)；左列 726：标题 64/70 → 12 → 说明 16/26 → 50 → 按钮行；
 * 右侧 2×2 统计瓷砖 216×118（圆角 12，内边距 16/24，右上 36px 图标）；下方统计条 4 列（28/36 + 12/18） */
.hero { min-height: 0; padding: 138px 0 0; }
.hero > .container { width: 100%; }   /* .hero 是 flex 容器，不写宽度 container 会缩到内容宽并居中 */
.hero-bg { object-position: center top; }
.hero-overlay { background: linear-gradient(180deg, rgba(0,13,37,.4) 0%, rgba(19,52,120,.8) 100%); mix-blend-mode: normal; }
.hero-eyebrow, .hero-trust-line { display: none; }
.hero-grid { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; }
.hero-grid > div:first-child { max-width: 726px; flex: 0 1 726px; }
.hero-title { font-family: var(--font-display); font-size: 64px; line-height: 70px; font-weight: 500; letter-spacing: 0; color: #fff; margin: 0; }
.hero-title em { font-style: normal; color: #fff; }
.hero-title .slash { display: none; }
.hero-desc { margin: 12px 0 0; font-size: 16px; line-height: 26px; color: #fff; max-width: none; }
.hero-actions { margin-top: 50px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hero-actions .btn-primary {
  display: inline-flex; align-items: center; gap: 10px; height: 48px; min-height: 48px; padding: 0 8px 0 24px; border-radius: 6px;
  background: #fff; color: var(--navy-deep); font: 600 14px/20px var(--font-body); letter-spacing: 0; text-transform: none;
  transform: none; box-shadow: none; transition: background .2s, color .2s;
}
.hero-actions .btn-primary .ico { background-image: url('/assets/img/icons/arrow-tile-orange.svg'); }
.hero-actions .btn-ghost {
  display: inline-flex; align-items: center; gap: 6px; height: 48px; padding: 10px 8px 11px 24px; border: 0; border-bottom: 1px solid #fff;
  color: #fff; font: 600 14px/20px var(--font-body); letter-spacing: 0; text-transform: none; transition: color .2s, border-color .2s;
}
.hero-actions .btn-ghost .ico { background-image: url('/assets/img/icons/arrow-plain-white.svg'); }
@media (hover: hover) {
  .hero-actions .btn-primary:hover { background: var(--orange); color: var(--navy-deep); transform: none; box-shadow: none; }
  .hero-actions .btn-primary:hover .ico { background-image: url('/assets/img/icons/arrow-tile-white.svg'); }
  .hero-actions .btn-ghost:hover { color: var(--orange); border-bottom-color: var(--orange); }
  .hero-actions .btn-ghost:hover .ico { background-image: url('/assets/img/icons/arrow-plain-orange.svg'); }
}

/* hero 搜索（稿子没有，Sam 定的加在按钮下面）：尺寸 560；圆角与 Browse Factories 一致（6px）；页签滑过切换 */
.cmh-hs { max-width: 560px; margin: 28px 0 0; }
.cmh-hs-tabs { display: flex; border: 0; border-radius: 0; overflow: visible; padding: 0; }
.cmh-hs-tabs label { position: relative; }
.cmh-hs-tabs span {
  position: relative; display: block; padding: 8px 16px 9px; border-radius: 6px 6px 0 0;
  font: 600 11px/16px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.85);
  transition: background .15s, color .15s;
}
.cmh-hs-tabs input:checked + span { background: #fff; color: var(--navy); }
/* 激活页签与搜索框相接处的两个外圆角：页签外侧各补一块 6×6 的白色反圆角 */
.cmh-hs-tabs input:checked + span::before, .cmh-hs-tabs input:checked + span::after {
  content: ''; position: absolute; bottom: 0; width: 6px; height: 6px; background: #fff; pointer-events: none;
}
.cmh-hs-tabs input:checked + span::before { left: -6px; -webkit-mask: radial-gradient(circle at 0 0, transparent 6px, #000 6.5px); mask: radial-gradient(circle at 0 0, transparent 6px, #000 6.5px); }
.cmh-hs-tabs input:checked + span::after { right: -6px; -webkit-mask: radial-gradient(circle at 100% 0, transparent 6px, #000 6.5px); mask: radial-gradient(circle at 100% 0, transparent 6px, #000 6.5px); }
.cmh-hs-tabs label:first-child input:checked + span::before { display: none; }
.cmh-hs-row { display: flex; align-items: center; padding: 6px; background: #fff; border-radius: 6px; box-shadow: 0 16px 40px -20px rgba(0,0,0,.5); }
.cmh-hs:has(.cmh-hs-tabs label:first-child input:checked) .cmh-hs-row { border-top-left-radius: 0; }
.cmh-hs-row .cmh-sf input { height: 44px; border: 0; border-radius: 6px; padding-left: 14px; font-size: 15px; }
.cmh-hs-row .cmh-sf input::placeholder { color: var(--silver); }
.cmh-hs-btn { height: 44px; padding: 0 18px; border-radius: 6px; font: 600 13px/20px var(--font-body); letter-spacing: 0; gap: 8px; }
.cmh-hs-btn svg { width: 16px; height: 16px; }
@media (hover: hover) { .cmh-hs-btn:hover { filter: none; background: var(--navy); } }
.cmh-hs-hint { margin-top: 10px; font-size: 12px; }

/* 2×2 统计瓷砖 */
.hero-meta {
  flex: none; align-self: flex-end; border: 0; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(2, 216px); gap: 8px;
  font: 400 12px/18px var(--font-body); text-transform: none; letter-spacing: 0; color: var(--text);
}
.hero-meta-row {
  position: relative; overflow: hidden; margin: 0; height: 118px; min-height: 118px; padding: 16px 24px; border: 0; border-radius: 12px;
  background: #fff; color: var(--text); display: flex; flex-direction: column; justify-content: space-between;
}
.hero-meta-row::after {
  content: ''; position: absolute; top: 6px; right: 10px; width: 36px; height: 36px; opacity: 1;
  background: url('/assets/img/icons/stat-factory.svg') center / 36px 36px no-repeat; -webkit-mask: none; mask: none;
}
.hero-meta-row:nth-of-type(1) { background: var(--orange); color: #fff; }
.hero-meta-row:nth-of-type(2)::after { background-image: url('/assets/img/icons/stat-box.svg'); }
.hero-meta-row:nth-of-type(3)::after { background-image: url('/assets/img/icons/stat-map.svg'); }
.hero-meta-row:nth-of-type(4) { background: var(--navy); color: #fff; }
.hero-meta-row:nth-of-type(4)::after { background-image: url('/assets/img/icons/stat-money.svg'); }
.hero-meta strong {
  display: block; margin: 0; padding: 0; color: inherit;
  font: 500 40px/48px var(--font-display); letter-spacing: 0;
}
.hero-meta strong .u { font-size: 28px; line-height: 36px; margin-left: 0; }

/* 统计条（在 hero 图内）：4 列等分、间距 24；数字 Poppins 28/36 白，说明 12/18 白 60% */
.hero .hero-stats { position: relative; z-index: 2; margin-top: 50px; padding: 0 0 32px !important; background: transparent; border: 0; }
.hero .hero-stats .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; border: 0; }
.hero .hero-stats .stat { padding: 16px 0; border: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.hero .hero-stats .stat-value { order: 1; margin: 0; font: 500 28px/36px var(--font-display); letter-spacing: 0; color: #fff; white-space: nowrap; }
.hero .hero-stats .stat-label { order: 2; margin: 0; font: 400 12px/18px var(--font-body); letter-spacing: 0; text-transform: none; color: rgba(255,255,255,.6); }
.hero .hero-stats .stat-note { display: none; }
.stat-value sup { font-size: inherit; vertical-align: baseline; color: inherit; }

/* ── 2. 价格条 ─────────────────────────────────────────────────────
 * 稿：136 高藏青；左标题 Poppins 28/36（宽 323），右侧 674 宽两行两列勾选（✓ 16/26 橙，文字 14/20 白）；
 * 底纹就是稿子里那层点阵（Intersect 图层原样导出，1309×136，贴 1440 画布左上） */
.pricing-strip { position: relative; overflow: hidden; background: var(--navy); border: 0; padding: 32px 0 !important; }
.pricing-strip::after {
  content: ''; position: absolute; top: 0; left: 50%; margin-left: -720px; width: 1309px; height: 136px; pointer-events: none;
  background: url('/assets/img/dots-pricing.png') 0 0 / 1309px 136px no-repeat;
}
.pricing-strip .container { position: relative; z-index: 1; }
.pricing-strip-grid { display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.pricing-strip-eyebrow { display: none; }
.pricing-strip-headline { margin: 0; max-width: 323px; font: 500 28px/36px var(--font-display); letter-spacing: 0; color: #fff; }
.pricing-strip-headline em { font-style: normal; color: #fff; }
.pricing-strip-bullets {
  flex: 0 1 674px; margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; font: 400 14px/20px var(--font-body); color: #fff;
}
.pricing-strip-bullets li { position: relative; display: flex; align-items: center; gap: 8px; padding: 0; min-height: 26px; white-space: nowrap; }
.pricing-strip-bullets li::before {
  content: '✓'; position: static; flex: none; width: auto; height: auto; background: none;
  font: 600 16px/26px var(--font-body); color: var(--orange);
}

/* ── 3. 类目 ───────────────────────────────────────────────────────
 * 稿：外框 1320×706、上下 100 白色渐隐；卡 429×230（圆角 12，内边距 40/32，间距 16）；
 * 编号 12/18 白 80%；名称 Poppins 20/28；底行 14/20 白 80% + 28px 圆形箭头（白 45% 描边）；
 * 叠层 rgba(0,0,0,.15)→.6。宽屏由 v2-home.js 换成三列跑马灯（.cat-marquee）。 */
.categories { background: #fff; border: 0; }
.cat, .cat.has-bg {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; gap: 16px;
  height: 230px; min-height: 230px; padding: 40px 32px; border: 0; border-radius: 12px; background: var(--navy-deep); color: #fff;
  transform: none; box-shadow: none;
}
.cat-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.cat-overlay { position: absolute; inset: 0; border-radius: 12px; background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.6) 100%); }
.cat:not(.has-bg) { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%); }
.cat-num, .cat-name, .cat-meta { position: relative; z-index: 2; }
.cat-num { margin: 0; font: 400 12px/18px var(--font-body); letter-spacing: 0; color: rgba(255,255,255,.8); }
.cat-name, .cat.has-bg .cat-name { margin: 0; font: 500 20px/28px var(--font-display); letter-spacing: 0; color: #fff; }
.cat-meta, .cat.has-bg .cat-meta {
  margin-top: 0; display: flex; align-items: center; justify-content: space-between;
  font: 400 14px/20px var(--font-body); letter-spacing: 0; text-transform: none; color: rgba(255,255,255,.8);
}
.cat-arrow, .cat.has-bg .cat-arrow {
  width: 28px; height: 28px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.45); border-radius: 14px; background: transparent; color: #fff; font-size: 12px; line-height: 18px;
  transition: background .2s, border-color .2s;
}
@media (hover: hover) {
  .cat:hover, .cat.has-bg:hover { transform: none; box-shadow: none; background: var(--navy-deep); }
  .cat:hover .cat-arrow { background: var(--orange); border-color: var(--orange); transform: none; }
}
/* 窄屏：普通网格 */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; border: 0; }
/* 宽屏：跑马灯 */
.cat-marquee { display: none; }
@media (min-width: 1024px) {
  .cat-grid.has-marquee { display: none; }
  .cat-marquee {
    position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
    height: 706px; overflow: hidden;
  }
  .cat-marquee::before, .cat-marquee::after { content: ''; position: absolute; left: 0; right: 0; height: 100px; z-index: 3; pointer-events: none; }
  .cat-marquee::before { top: 0; background: linear-gradient(0deg, rgba(255,255,255,0) 0%, #fff 100%); }
  .cat-marquee::after { bottom: 0; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 100%); }
  .cat-col { position: relative; overflow: hidden; }
  .cat-track { display: flex; flex-direction: column; gap: 8px; will-change: transform; }
  .cat-track > .cat { flex: none; }
  /* 没有 JS 时的宽屏兜底：照稿子的静态错位 */
  .cat-grid:not(.has-marquee) { height: 706px; overflow: hidden; gap: 8px 16px; }
}
/* 首页内联的进场动画会让超高区块在手机上永远透明 —— 类目区与窄屏一律不藏 */
#categories[data-reveal] { opacity: 1 !important; transform: none !important; }
@media (max-width: 768px) { [data-reveal] { opacity: 1 !important; transform: none !important; } }

/* ── 4. 精选工厂：1 宽 + 3 窄 手风琴卡（悬浮哪张哪张展开） ────────
 * 稿：高 360、间距 16、圆角 14、内边距 34/20；展开卡 = Verified 小签 → 名称一行（24/32，前半白、后半橙）→ 城市 14/20 白 60% → 标签，
 * 右下 32px 圆形箭头；收起卡 = 右上序号 Poppins 40/48、底部名称两行。卡下 40 是「View all」链接（藏青 14/20 + 下划线）。 */
.factories-list { display: flex; gap: 16px; height: 360px; counter-reset: fw; }
.factories-list > .fw-card, .factories-list > .factory {
  counter-increment: fw; position: relative; overflow: hidden; flex: 0 0 214px; height: 360px; padding: 34px 20px;
  display: flex; flex-direction: column; justify-content: flex-end; border: 0; border-radius: 14px; background: var(--navy-deep); color: #fff;
  transform: none; box-shadow: none; transition: flex-basis .5s cubic-bezier(.22,1,.36,1), flex-grow .5s cubic-bezier(.22,1,.36,1);
}
.factories-list > :first-child { flex: 1 1 630px; }
@media (hover: hover) {
  .factories-list:hover > :first-child { flex: 0 0 214px; }
  .factories-list > .fw-card:hover, .factories-list > .factory:hover { flex: 1 1 630px; transform: none; box-shadow: none; }
  .fw-card:hover .fw-card-bg img { transform: none; }
}
.fw-card-bg { position: absolute; inset: 0; }
.fw-card-bg img, .factory-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: none; }
.fw-card-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.15) 50%, rgba(0,0,0,.6) 75%, rgba(0,0,0,.92) 87.5%, #000 100%); }
/* 展开卡的压暗更早开始（稿：.15@37% → .6@65% → .92@85%）；收起卡用上面那条 */
.factories-list > .fw-card:first-child .fw-card-overlay { background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.15) 37.35%, rgba(0,0,0,.6) 65.2%, rgba(0,0,0,.92) 85.4%, #000 100%); }
@media (hover: hover) {
  .factories-list > .fw-card:hover .fw-card-overlay { background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.15) 37.35%, rgba(0,0,0,.6) 65.2%, rgba(0,0,0,.92) 85.4%, #000 100%); }
  .factories-list:hover > .fw-card:first-child:not(:hover) .fw-card-overlay { background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.15) 50%, rgba(0,0,0,.6) 75%, rgba(0,0,0,.92) 87.5%, #000 100%); }
}
.fw-card-content { position: relative; z-index: 2; padding: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.fw-card-info { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; }
.fw-card-badge {
  display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 3px 8px; border-radius: 4px; background: var(--orange); color: #fff;
  font: 400 12px/18px var(--font-body); letter-spacing: 0; text-transform: none;
}
.fw-card-badge::before { content: ''; width: 12px; height: 12px; background: url('/assets/img/icons/fw-verified-check.svg') center / 12px 12px no-repeat; }
.fw-card-name { margin: 0; font: 400 24px/32px var(--font-body); letter-spacing: 0; color: #fff; }
.fw-card-name em { font-style: normal; font-family: inherit; color: #E58820; }
.fw-card-loc { margin: 0; font: 400 14px/20px var(--font-body); letter-spacing: 0; text-transform: none; color: rgba(255,255,255,.6); }
.fw-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.fw-card-tag {
  padding: 3px 8px; border: 1px solid rgba(255,255,255,.25); border-radius: 4px; background: none;
  font: 400 12px/18px var(--font-body); letter-spacing: 0; text-transform: none; color: rgba(255,255,255,.6);
}
.fw-card-go { flex: none; width: 32px; height: 32px; background: url('/assets/img/icons/fw-go.svg') center / 32px 32px no-repeat; }
/* 展开态：名称一行（藏掉换行）；收起态：只留两行名称 + 右上序号 */
.fw-card-name br { display: none; }
.factories-list > .fw-card::before {
  content: counter(fw, decimal-leading-zero); position: absolute; top: 34px; right: 20px; z-index: 2;
  font: 500 40px/48px var(--font-display); color: #fff; opacity: 0; transition: opacity .3s;
}
.factories-list > .fw-card:not(:first-child)::before { opacity: 1; }
.factories-list > .fw-card:not(:first-child) .fw-card-name br { display: inline; }
.factories-list > .fw-card:not(:first-child) :is(.fw-card-badge, .fw-card-loc, .fw-card-tags, .fw-card-go) { display: none; }
@media (hover: hover) {
  .factories-list > .fw-card:hover::before { opacity: 0; }
  .factories-list > .fw-card:hover .fw-card-name br { display: none; }
  .factories-list > .fw-card:hover :is(.fw-card-badge, .fw-card-tags) { display: inline-flex; }
  .factories-list > .fw-card:hover .fw-card-tags { display: flex; }
  .factories-list > .fw-card:hover .fw-card-loc { display: block; }
  .factories-list > .fw-card:hover .fw-card-go { display: block; }
  .factories-list:hover > .fw-card:first-child:not(:hover)::before { opacity: 1; }
  .factories-list:hover > .fw-card:first-child:not(:hover) .fw-card-name br { display: inline; }
  .factories-list:hover > .fw-card:first-child:not(:hover) :is(.fw-card-badge, .fw-card-loc, .fw-card-tags, .fw-card-go) { display: none; }
}
/* 构建时的静态卡（脚本替换前的一瞬） */
.factory-num, .factory-desc, .factory-cta { display: none; }
.factory-name { font: 400 24px/32px var(--font-body); color: #fff; margin: 0; }
.factory-name span { display: block; margin-top: 14px; font-size: 14px; line-height: 20px; color: rgba(255,255,255,.6); }
.factory-body { position: relative; z-index: 2; padding: 0; }
.factory-tags { margin-top: 14px; }
.factory-tags .tag { padding: 3px 8px; border: 1px solid rgba(255,255,255,.25); border-radius: 4px; background: none; font-size: 12px; color: rgba(255,255,255,.6); }
/* View all 链接 */
.view-all { margin-top: 40px; display: flex; justify-content: center; }
.view-all .btn-ghost, .view-all a {
  display: inline-flex; align-items: center; height: 48px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--navy);
  font: 400 14px/20px var(--font-body); letter-spacing: 0; text-transform: none; color: var(--navy);
}
@media (hover: hover) { .view-all a:hover { color: var(--orange); border-bottom-color: var(--orange); } }

/* ── 5. 流程：中轴时间线 ───────────────────────────────────────────
 * 稿：宽 992 = 448 + 24 + 48 + 24 + 448；48px 橙色圆（Poppins 20/28 白）；圆与圆之间 2px 橙色竖线（离圆各 16）；
 * 三步行距 185；标题 Poppins 28/36 白 → 20 → 正文 14/20 白、两端对齐；左侧那步右对齐标题 */
.how { background: var(--navy); border: 0; }
.how::before { display: none; }
.how .section-title { color: #fff; }
.how-grid {
  position: relative; display: block; width: 992px; max-width: 100%; margin: 0 auto; padding: 70px 0 64px; counter-reset: step;
}
.how-step {
  counter-increment: step; position: relative; width: 448px; min-height: 185px; margin: 0 0 0 544px; padding: 0; border: 0; border-top: 0; border-bottom: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 20px; text-align: left;
}
.how-step:not(:first-child) { padding: 0; }   /* 基础样式给非首步留了 2rem 左内边距 */
.how-step:last-child { min-height: 0; }
.how-step:nth-child(even) { margin-left: 0; align-items: flex-end; }
.how-step h3 { margin: 0; font: 500 28px/36px var(--font-display); letter-spacing: 0; color: #fff; white-space: nowrap; }
.how-step p { margin: 0; max-width: none; font: 400 14px/20px var(--font-body); color: #fff; text-align: justify; }
.how-step-num {
  position: absolute; top: -6px; left: -72px; right: auto; width: 48px; height: 48px; margin: 0; border-radius: 999px; background: var(--orange);
  display: flex; align-items: center; justify-content: center; font-size: 0; line-height: 1; opacity: 1; color: #fff;
}
.how-step:nth-child(even) .how-step-num { left: auto; right: -72px; }
.how-step-num::before { content: counter(step, decimal-leading-zero); font: 500 20px/28px var(--font-display); color: #fff; }
/* 圆与圆之间的橙色连线：从本步圆底下 16 到下一步圆顶上 16（185 − 48 − 32 = 105） */
.how-step::after {
  content: ''; position: absolute; top: 58px; left: -49px; width: 2px; height: 105px; background: var(--orange);
}
.how-step:nth-child(even)::after { left: auto; right: -49px; }
.how-step:last-child::after { display: none; }

/* ── 6. Why CMH ───────────────────────────────────────────────────
 * 稿：四列、间距 16；每格内边距 24/32，40px 图标 → 14 → 标题 Poppins 20/28 → 20 → 正文 14/20 slate（Sam：不两端对齐，居中）。
 * 创始人语稿子里没有，保留在四列下面；它与四列、与下一区块各留 104（Sam 2026-09-28：原来太挤） */
.trust { background: #fff; }
.trust-grid { display: flex; flex-direction: column-reverse; align-items: stretch; gap: 104px; }
.trust-grid > div { width: 100%; }
.trust-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.trust-item { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 24px 32px; border: 0; border-radius: 14px; text-align: center; }
.trust-item:last-child { border: 0; }
.trust-item > div { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.trust-icon {
  width: 40px; height: 40px; margin: 0 0 14px; border: 0; border-radius: 0; font-size: 0; color: transparent;
  background: transparent url('/assets/img/icons/why-verified.svg') center / 40px 40px no-repeat;
}
.trust-item:nth-child(2) .trust-icon { background-image: url('/assets/img/icons/why-contact.svg'); }
.trust-item:nth-child(3) .trust-icon { background-image: url('/assets/img/icons/why-fee.svg'); }
.trust-item:nth-child(4) .trust-icon { background-image: url('/assets/img/icons/why-hk.svg'); }
.trust-item h4 { margin: 0; font: 500 20px/28px var(--font-display); letter-spacing: 0; color: var(--text); }
.trust-item p { margin: 0; font: 400 14px/20px var(--font-body); color: var(--slate); text-align: center; }
.trust-quote {
  margin: 0 auto; max-width: 46em; padding: 28px 32px; border: 0; border-left: 3px solid var(--orange); border-radius: 0 12px 12px 0;
  background: var(--paper-tone); font: 400 16px/26px var(--font-body); font-style: normal; color: var(--charcoal); text-align: center;
}
.trust-quote::before { display: none; }
.trust-attr { margin-top: 12px; padding: 0; border: 0; text-align: center; font: 400 12px/18px var(--font-body); letter-spacing: .08em; color: var(--slate); }
.trust-attr::before, .trust-attr::after { display: none; }

/* ── 7. On-site verification ──────────────────────────────────────
 * 稿：区块头 → 72 → 行间 88；首行左段 Poppins 400 18/28（宽 475）+ 右侧四格 184 宽（32px 图标 → 20 → 数字 20/28 + 单位 Inter 600 16/26 → 8 → 14/20 slate 78%）；
 * 问题卡 1004 宽四张（高 334、间距 12、圆角 12、描边 mist、内边距 20/24）+ 右侧 265 宽标题 28/36 与藏青下划线链接；
 * 对比表：藏青表头 52 高 Inter 600 16/26，行 52 高，第三列 cloud 底藏青字；
 * 底部 CTA 卡 1112 宽、圆角 24、内边距 40/64、108px 插画 → 52 → Poppins 20/28，右侧两颗 48 高按钮 */
.verify { background: #fff; }
.verify .section-header { margin-bottom: 72px; }
.vf-row { display: flex; align-items: stretch; justify-content: space-between; gap: 32px; margin: 0 0 88px; }
.vf-intro-row { align-items: center; }
.vf-intro { flex: 0 1 475px; margin: 0; font: 400 18px/28px var(--font-display); color: var(--text); }
.vf-stats { flex: 0 1 736px; display: grid; grid-template-columns: repeat(4, 184px); gap: 0; justify-content: end; }
.vf-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 20px 32px; border-radius: 12px; }
.vf-stat::before { content: ''; width: 32px; height: 32px; border: 0; border-radius: 0; background: transparent center / 32px 32px no-repeat; }
.vf-stat:nth-child(1)::before { background-image: url('/assets/img/icons/verif-1.svg'); }
.vf-stat:nth-child(2)::before { background-image: url('/assets/img/icons/verif-2.svg'); }
.vf-stat:nth-child(3)::before { background-image: url('/assets/img/icons/verif-3.svg'); }
.vf-stat:nth-child(4)::before { background-image: url('/assets/img/icons/verif-4.svg'); }
.vf-stat b { display: block; margin: 0 0 -12px; font: 500 20px/28px var(--font-display); color: var(--text); white-space: nowrap; }
.vf-stat b span { margin-left: .28em; font: 600 16px/26px var(--font-body); }
.vf-stat:nth-child(4) b span { margin-left: 0; }   /* 稿：100% in-house，百分号紧跟数字 */
.vf-stat p { margin: 0; font: 400 14px/20px var(--font-body); color: var(--slate); opacity: .78; }
.vf-q-row .vf-cards, .vf-rules-row .vf-cards { flex: 0 1 1004px; }
.vf-cards { display: grid; gap: 12px; }
.vf-cards-4 { grid-template-columns: repeat(4, 1fr); }
.vf-cards-3 { grid-template-columns: repeat(3, 1fr); }
.vf-card {
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 212px; padding: 20px 24px;
  border: 1px solid var(--mist); border-radius: 12px; background: #fff;
}
.vf-cards-4 .vf-card { min-height: 334px; }
.vf-card .vf-n { display: block; margin: 0 0 8px; font: 500 20px/28px var(--font-display); color: var(--orange); }
.vf-card h3 { margin: 0; font: 500 20px/28px var(--font-display); letter-spacing: 0; color: var(--text); }
.vf-card p { margin: 0; font: 400 14px/20px var(--font-body); color: var(--slate); opacity: .78; }
.vf-aside { flex: 0 0 265px; display: flex; flex-direction: column; justify-content: flex-end; gap: 64px; }
.vf-rules-row .vf-aside { justify-content: flex-start; }
.vf-aside h3 { margin: 0; font: 500 28px/36px var(--font-display); letter-spacing: 0; color: var(--text); }
.vf-aside a {
  align-self: flex-start; display: inline-flex; align-items: center; height: 48px; padding: 12px 0; border-bottom: 1px solid var(--navy);
  font: 400 14px/20px var(--font-body); color: var(--navy); text-decoration: none;
}
@media (hover: hover) { .vf-aside a:hover { color: var(--orange); border-bottom-color: var(--orange); } }
.vf-compare { margin: 0 0 88px; }
.vf-compare-h { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 0 32px; font: 500 28px/36px var(--font-display); letter-spacing: 0; color: var(--text); text-align: center; }
.vf-compare-h em { display: inline-block; font-style: normal; color: var(--orange); transform: skewX(-14deg) scaleY(.97); }
.vf-tw { overflow-x: auto; }
.vf-table { width: 100%; min-width: 640px; border-collapse: collapse; table-layout: fixed; }
.vf-table th, .vf-table td { height: 52px; padding: 0 24px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--mist); font: 400 14px/20px var(--font-body); color: var(--text); }
.vf-table thead th { background: var(--navy); border: 0; font: 600 16px/26px var(--font-body); color: #fff; }
.vf-table tbody th { font-weight: 600; }
.vf-table td.vf-us { background: var(--cloud); color: var(--navy); }
.vf-cta {
  max-width: 1112px; margin: 72px auto 0; padding: 40px 64px; border-radius: 24px; background: var(--paper-tone);
  display: flex; align-items: center; justify-content: space-between; gap: 52px;
}
.vf-cta-ico { flex: none; width: 108px; height: 108px; background: url('/assets/img/icons/verify-cta.svg') center / 108px 108px no-repeat; }
.vf-cta-ico svg { display: none; }
.vf-cta p { flex: 0 1 468px; margin: 0 auto 0 0; font: 500 20px/28px var(--font-display); color: var(--text); max-width: none; }
.vf-cta-btns { flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 16px; min-width: 219px; }
.vf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 10px 24px; border: 1px solid var(--orange); border-radius: 6px;
  background: var(--orange); color: #fff; font: 600 14px/20px var(--font-body); text-decoration: none; white-space: nowrap; transition: background .2s, color .2s, border-color .2s;
}
.vf-btn .ico { display: none; }
.vf-btn-o { background: transparent; color: var(--orange); padding: 11px 25px; }
@media (hover: hover) {
  .vf-btn:not(.vf-btn-o):hover { padding: 10px 8px 10px 24px; justify-content: space-between; }
  .vf-btn:not(.vf-btn-o):hover .arr { display: none; }
  .vf-btn:not(.vf-btn-o):hover .ico { display: inline-block; background-image: url('/assets/img/icons/arrow-tile-white.svg'); }
  .vf-btn-o:hover { background: #fff; border-color: #fff; color: var(--orange); padding: 7px 9px 7px 25px; justify-content: space-between; }
  .vf-btn-o:hover .ico { display: inline-block; background-image: url('/assets/img/icons/arrow-tile-orange.svg'); }
}

/* ── 8. Journal：左插图 + 右三条（悬浮切换） ─────────────────────
 * 稿：区块头 → 100；内容 1176 宽居中；左图 524×322 圆角 14 → 60 → 右列 592；
 * 激活条：橙 8% 底 + 左侧 2px 橙线 + 右侧圆角 14，内边距 20/24，26px 图标 → 16 → 标题 Inter 600 16/26 → 10 → 摘要 14/20 ink；
 * 其它条：只有标题，底部 1px mist 分隔 */
#journal { background: #fff; }
#journal .section-header { margin-bottom: 100px; }
.jr { display: flex; align-items: center; gap: 60px; max-width: 1176px; margin: 0 auto; }
.jr-visual { position: relative; flex: none; width: 524px; height: 322px; border-radius: 14px; overflow: hidden; display: block; background: var(--cloud); }
.jr-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; }
.jr-visual img.is-on { opacity: 1; }
.jr-list { flex: 1 1 592px; max-width: 592px; margin: 0; padding: 0; list-style: none; }
.jr-item { border-bottom: 1px solid var(--mist); border-left: 2px solid transparent; border-radius: 0; transition: background .2s, border-color .2s; }
.jr-item a { display: flex; flex-direction: column; gap: 0; padding: 20px 24px 20px 66px; position: relative; color: var(--text); text-decoration: none; }
.jr-item a::before {
  content: ''; position: absolute; left: 24px; top: 20px; width: 26px; height: 26px;
  background: url('/assets/img/icons/journal-1.svg') center / 26px 26px no-repeat;
}
.jr-item:nth-child(2) a::before { background-image: url('/assets/img/icons/journal-2.svg'); }
.jr-item:nth-child(3) a::before { background-image: url('/assets/img/icons/journal-3.svg'); }
.jr-title { margin: 0; font: 600 16px/26px var(--font-body); letter-spacing: 0; color: var(--text); }
.jr-excerpt {
  margin: 0; max-height: 0; overflow: hidden; opacity: 0; font: 400 14px/20px var(--font-body); color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  transition: max-height .3s ease, opacity .2s ease, margin-top .3s ease;
}
.jr-item.is-on { background: rgba(229,136,33,.08); border-left-color: var(--orange); border-bottom-color: transparent; border-radius: 0 14px 14px 0; }
.jr-item.is-on .jr-excerpt { max-height: 60px; opacity: 1; margin-top: 10px; }

/* ── 9. 尾部 CTA：橙色大块 ─────────────────────────────────────────
 * 稿：上下 80；24px 购物袋图标 + 小标 Poppins 18/24 大写白 → 16 → 标题 40/48 白 → 40 → 两颗 48 高按钮；
 * 左上 / 右下两道白色弧线（稿子里的 Subtract 原件，自带 0→10% / 12% 渐变） */
.cta-final { position: relative; overflow: hidden; padding: 80px 0 !important; background: var(--orange); color: #fff; text-align: center; }
.cta-final::before, .cta-final::after {
  content: ''; position: absolute; pointer-events: none; border-radius: 0; filter: none; opacity: 1; background-repeat: no-repeat; background-size: 100% 100%;
}
.cta-final::before { left: -24px; top: -46.8px; width: 435.865px; height: 126.981px; background-image: url('/assets/img/cta-swoosh-tl.svg'); transform: rotate(165deg); }
.cta-final::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); }
.cta-final .container { position: relative; z-index: 1; }
.cta-eyebrow {
  display: inline-flex; align-items: center; gap: 12px; margin: 0 0 16px;
  font: 500 18px/24px var(--font-display); letter-spacing: 0; text-transform: uppercase; color: #fff;
}
.cta-eyebrow::before { content: ''; width: 24px; height: 24px; background: url('/assets/img/icons/eyebrow-cta.svg') center / 24px 24px no-repeat; position: static; }
.cta-eyebrow::after { display: none; }
.cta-title { margin: 0 auto; max-width: none; font: 500 40px/48px var(--font-display); letter-spacing: 0; color: #fff; }
@media (min-width: 769px) { .cta-title { white-space: nowrap; } }   /* 稿：两行，不再折成三行 */
.cta-title em { font-style: normal; color: #fff; }
.cta-buttons { display: flex; justify-content: center; gap: 16px; margin-top: 40px; }
.cta-buttons .btn-light, .cta-buttons .btn-outline {
  display: inline-flex; align-items: center; justify-content: center; height: 48px; border-radius: 6px;
  font: 600 14px/20px var(--font-body); letter-spacing: 0; text-transform: none; transform: none; box-shadow: none; transition: background .2s, color .2s, border-color .2s;
}
.cta-buttons .btn-light { padding: 10px 24px; background: #fff; color: var(--text); border: 0; }
.cta-buttons .btn-light svg { display: none; }
.cta-buttons .btn-outline { padding: 11px 25px; background: transparent; color: #fff; border: 1px solid #fff; }
@media (hover: hover) {
  .cta-buttons .btn-light:hover { background: var(--navy); color: #fff; transform: none; box-shadow: none; }
  .cta-buttons .btn-outline:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
}

/* ── 10. 响应式（稿子只有 1440 桌面稿，窄屏按桌面稿推导） ───────── */
@media (max-width: 1279px) {
  .hero-title { font-size: 52px; line-height: 58px; }
  .vf-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vf-stat { padding: 20px 16px; }
}
@media (max-width: 1100px) {
  .hero-grid { flex-direction: column; align-items: flex-start; }
  .hero-meta { align-self: flex-start; }
  .jr { flex-direction: column; align-items: stretch; gap: 32px; }
  .jr-visual { width: 100%; height: auto; aspect-ratio: 524 / 322; }
  .jr-list { max-width: none; }
  .vf-row { flex-direction: column; }
  .vf-q-row .vf-cards, .vf-rules-row .vf-cards { flex: none; }
  .vf-aside { flex: none; gap: 16px; }
  .vf-rules-row .vf-aside { order: -1; }
  .vf-stats { flex: none; width: 100%; }
  .vf-cta { flex-direction: column; text-align: center; padding: 32px 24px; gap: 20px; }
  .vf-cta p { margin: 0 auto; }
}
@media (max-width: 1023px) {
  .how-grid { width: auto; padding: 24px 0 0 72px; }
  .how-step, .how-step:nth-child(even) { width: auto; min-height: 0; margin: 0 0 48px; align-items: flex-start; text-align: left; }
  .how-step:nth-child(even) .how-step-num { left: -72px; right: auto; }
  .how-step::after, .how-step:nth-child(even)::after { left: -49px; right: auto; top: 58px; height: calc(100% - 22px); }
  .how-step h3 { white-space: normal; }
  .factories-list { height: auto; flex-wrap: wrap; }
  .factories-list > .fw-card, .factories-list > .factory, .factories-list > :first-child { flex: 1 1 calc(50% - 8px); height: 300px; }
  .factories-list > .fw-card::before { opacity: 0 !important; }
  .factories-list > .fw-card :is(.fw-card-badge, .fw-card-tags) { display: flex !important; }
  .factories-list > .fw-card .fw-card-loc { display: block !important; }
  .factories-list > .fw-card .fw-card-name br { display: none !important; }
  .trust-list { grid-template-columns: repeat(2, 1fr); }
  .vf-cards-4 { grid-template-columns: repeat(2, 1fr); }
  .vf-cards-4 .vf-card { min-height: 0; }
}
@media (max-width: 768px) {
  section#categories, section#factories, section.how, section.trust, section.verify, section#journal { padding: 48px 0; }
  .section-title { font-size: 28px; line-height: 36px; }
  .hero { padding-top: 56px; }
  .hero-title { font-size: 40px; line-height: 46px; }
  .hero .hero-stats .stats-grid { grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .pricing-strip-grid { flex-direction: column; align-items: flex-start; gap: 20px; }
  .pricing-strip-bullets { grid-template-columns: 1fr; flex: none; width: 100%; }
  .cat-grid { grid-template-columns: 1fr 1fr; }
  .vf-stats { grid-template-columns: 1fr 1fr; }
  .cta-title { font-size: 28px; line-height: 36px; }
  .cta-buttons { flex-wrap: wrap; }
  #journal .section-header { margin-bottom: 40px; }
  .trust-grid { gap: 48px; }
}
@media (max-width: 560px) {
  .hero-meta { grid-template-columns: 1fr 1fr; width: 100%; }
  .hero-meta-row { height: auto; min-height: 96px; padding: 12px 14px; }
  .hero-meta strong { font-size: 28px; line-height: 34px; padding-right: 36px; }
  .cat-grid { grid-template-columns: 1fr; }
  .cat, .cat.has-bg { height: auto; min-height: 180px; padding: 24px; }
  .trust-list { grid-template-columns: 1fr; }
  .factories-list > .fw-card, .factories-list > .factory, .factories-list > :first-child { flex: 1 1 100%; height: 260px; }
  .vf-cards-4, .vf-cards-3, .vf-stats { grid-template-columns: 1fr; }
  .vf-card { min-height: 0; gap: 12px; }
  .vf-row, .vf-compare { margin-bottom: 40px; }
  .jr-item a { padding-left: 58px; }
}