/* v2 页面骨架：全站白底，靠留白与字号层级分节，不用底色轮转也不用分割线。 */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--body);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-5); }
/* T2b：纵向节奏压缩。原先 --sp-10（128px）上下内边距正好把每屏钉成一个
   独立视口——这是幻灯片的定义。砍掉约四成（128 * 0.6 ≈ 77px），section
   之间不再是硬边界，读起来是连续的页面而不是一叠幻灯片。 */
.sec { padding: calc(var(--sp-10) * 0.6) 0; }

/* T-wave-C（排版批注）：max-width 从 24ch 放宽到 32ch——批注点名 #s02-encap、
   #s07-approval 的主张句要在 1440 档进一行，实测这两句的不折行宽度分别是
   733px、906px（44px/600 字重下量的），32ch≈929px 刚好把两句都装下，仍
   远低于 1072px 版心可读上限。放宽只会让本就能装进一行的主张句继续一行、
   原本要折的主张句折得更晚，不会让任何一屏折得更多——已按九屏 × 三档
   逐屏核对，行数只减未增。 */
.claim { font-size: var(--fs-h1); margin-bottom: var(--sp-3); max-width: 34ch; text-wrap: balance; }
/* 一节里的第二个主张块要跟上一块拉开距离。压缩纵向节奏时把这段间距一起压掉了，
   结果合并后的 s03 里「业务侧只需对接四个动作」紧贴在四件事那一行下面（只隔 36px），
   两个主张块糊成一片。首屏那个主标题不受影响，它是 .wrap 里的第一个块。 */
.wrap > * + .claim { margin-top: var(--sp-7); }
/* 首屏的 claim 间距不参与这轮压缩——首屏高度由视口比例调校过，不能动。 */
.claim--hero { font-size: var(--fs-hero); max-width: 20ch; margin-bottom: var(--sp-5); }
/* 主张句里不许被折行拆开的词组（比如「可插拔」）单独包一层——调整 .claim
   的 max-width 会牵动全部九屏的折行，这里只锁住这一个词组，不影响其它屏。 */
.claim__nb { white-space: nowrap; }
/* 同一轮批注：max-width 从 62ch 放宽到 72ch——#s07-approval 支撑句
   「出金地址须事先登记……」不折行宽度实测 720px，#s06-amount 支撑句
   「少付、多付……」实测 656px，72ch≈727px 两句都能一行放下，同样远低于
   1072px 版心上限。理由同上：只放宽不收紧，其它支撑句只会同样一行或折得
   更晚，不会新增折行。 */
.support { font-size: var(--fs-body); max-width: 72ch; margin: 0; }
.support + .support { margin-top: var(--sp-2); }
/* #s04-sweep 专用：支撑句改居中（标题仍左对齐），图仍在它下方通栏——
   批注原话「居中描述，下图」，只改这一句的对齐方式，不影响其它屏。 */
.support--center { margin-left: auto; margin-right: auto; text-align: center; }

/* 页面级小字（来源行、注脚、免责句、figcaption 等）用 --body，对比度够 AA；
   --weak 只留给示意图内部读作 UI chrome 的文本（见 console.css/diagrams.css）。
   显式给上下间距一个令牌值，不再依赖 <p> 的浏览器默认 1em——跟其它间距一样
   纳入这轮纵向节奏压缩。 */
.micro { font-size: var(--fs-micro); color: var(--body); line-height: 1.6; margin: var(--sp-2) 0; }

/* 主张句/支撑句到下面那张图之间原先是 --sp-9（96px）——比标题到支撑句的
   间距还大，读起来像「标题页」接「内容页」两张幻灯片。收紧到 --sp-4
   （16px），比标题到支撑句的间距还紧，图才读作文字块的延伸而不是另一张
   幻灯片。 */
.figure { margin: var(--sp-4) 0 0; }
/* .cs 底座换阴影后，overflow 会把卡外的阴影裁掉——四周留出阴影空间、
   再用等量负外边距抵消占位，版心几何不变。 */
.scroller { overflow-x: auto; -webkit-overflow-scrolling: touch;
  /* 阴影大层横向伸出约 22px、向下约 34px——之前两侧只留 6px，侧边阴影
     几乎全被裁掉，卡看起来是平的（产品方指出首屏图没有立体感，根因在此）。 */
  padding: 12px 24px 40px; margin: -12px -24px -40px; }

.btn {
  display: inline-block; padding: 7px var(--sp-5);
  border-radius: 999px; text-decoration: none;
  font-size: var(--fs-body); font-weight: 500;
}
.btn--primary { background: var(--accent); color: var(--white); }
.btn--primary:hover { background: var(--accent-deep); }

.site-head {
  position: sticky; top: 0; z-index: 10;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.site-head__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5);
  /* 减 1px 是给 .site-head 的 border-bottom 让位——行高 + 这条边框
     合起来正好等于 --header-h，页头视觉高度就是这一个令牌。 */
  min-height: calc(var(--header-h) - 1px);
}
.site-head__brand {
  font-size: var(--fs-body); font-weight: 600; color: var(--ink);
  white-space: nowrap;
}
/* 定位语靠页头右侧（产品方批注），与页脚统一为 dual-token 这句。窄屏藏。 */
.site-head__tag { margin-left: auto; font-size: var(--fs-micro);
  font-weight: 500; color: var(--body); white-space: nowrap; }
@media (max-width: 700px) { .site-head__tag { display: none; } }

/* 语言切换：三档静态页各占一个地址（/ 简体、/zh-Hant/、/en/），所以是三个
   真链接不是脚本切换——爬虫能各自收录，也没有首屏闪未翻译内容的问题。
   当前语言用 aria-current 标，样式挂在属性选择器上，生成器只需把这个属性
   搬一格，不必改 class。窄屏下定位语藏起来，但切换器留着：手机上换语言
   比看定位语重要。三个语言名各写各自的文字（简体/繁體/English），带
   translate="no" 让抽取器跳过它们，不进译文表。 */
.site-head__lang { display: flex; align-items: center; gap: var(--sp-3);
  margin-left: var(--sp-5); padding-left: var(--sp-5);
  border-left: 1px solid var(--line); }
.site-head__lang-link { font-size: var(--fs-micro); font-weight: 500;
  color: var(--weak); text-decoration: none; white-space: nowrap; }
.site-head__lang-link:hover { color: var(--body); }
.site-head__lang-link[aria-current] { color: var(--ink); font-weight: 600; }
@media (max-width: 700px) {
  .site-head__lang { margin-left: auto; padding-left: 0; border-left: 0; }
}

/* 锚点跳转后标题不被 sticky 页头盖住：页头高度之外再留 20px 呼吸间距。 */
.sec { scroll-margin-top: calc(var(--header-h) + 20px); }

@media (max-width: 900px) {
  /* 同一条「砍四成」规则用在窄屏自己的基准上：--sp-8（64px）* 0.6 ≈ 38px。
     .figure 的间距已经跟桌面共用同一个 --sp-4，不必再单独覆盖。 */
  .sec { padding: calc(var(--sp-8) * 0.6) 0; }
}


.hero__cta { margin: var(--sp-7) 0 0; }

/* 首屏：文字块顶部起排、上内边距随视口高度自适应，不再用 100vh 垂直
   居中——居中会在视口比文字块高时把空白摊在文字块上下两侧，摊出大片空洞。
   用 vh 驱动 .hero__figure 的 margin-top，随视口高度自适应露出量，守的是
   两条不变量（不是某个具体比例——原来「顶边落在视口高度的 70%-75%」那条
   比例判据已被撤掉，产品方删首屏三处元素后文字块变矮，比例天然跌出区间，
   但两条真正要守的不变量仍然成立）：
     1) 图必须被视口下沿切断、不能整张露出（tools/shoot.sh 的
        check_hero_cut_off，切口 >= 48px）；
     2) 图顶边不能压住 .hero__cta（同文件 check_hero_not_covered）。
   用 clamp() 同时封顶和保底：截图工具量整页高度时会开一个 20000px 高的
   画布，vh 在那种画布上会把这块撑到近 20000px——上限让正常视口下继续按
   vh 响应，画布异常高的极端场景下退回一个固定值，不会把整页高度带崩。
   下限同样重要：视口矮于 680px 时 100vh - 680px 会变负，图会被负
   margin 拉上去压住首屏文字（.cs 自带不透明背景）；下限保证图退到折线
   以下、跟文字块保持一条常规间距（--sp-7），永远不会反过来压住 CTA。 */
.sec--hero { padding: 0 0 var(--sp-7); }
/* padding-top 原来固定 --sp-9（96px），1080 视口下按钮到图之间会空出
   355px（占视口三分之一），而页头到眉标只有 108px——松量全堆在文字块
   下方。改成 clamp(var(--sp-9), 10vh, 140px) 把一部分松量挪到文字块
   上方：视口越高，顶部留白跟着按比例增大，不再是一个跟视口高度脱节的
   定值。矮视口（10vh < 96px）落回 96px 下限，不会比现在更紧。 */
.hero__intro {
  padding-top: clamp(var(--sp-9), 10vh, 140px);
  max-width: 880px; margin: 0 auto; text-align: center;
}
.hero__intro .claim { margin-left: auto; margin-right: auto; }
.hero__figure { margin-top: clamp(var(--sp-7), calc(100vh - 680px), 1200px); }
/* 上限从 450px 抬到 1200px：450px 在视口高度约 1130px 起就把 margin-top
   冻死，视口越高切口越薄，到 ~1240px 归零，更高则图整张露出——1920×1200
   这样的普通桌面显示器就落在这个区间里，真实存在、不是极端场景，必须让
   vh 在这个高度继续跟随。1200px 仍远小于 shoot.sh 量整页高度用的 20000px
   画布，不会把整页高度带崩（额外撑高约 750px）。 */
@media (max-width: 900px) {
  /* 窄屏下 .claim--hero 的 --fs-hero 随 vw 连续缩小（clamp 上限 68px 只在
     宽屏够宽时够到），文字块比桌面矮出一截，图相应上移，834×900 与
     768×1024 这类窄屏常见视口的切口跌破 48px 门槛。把这个断点单独收窄
     680→654，让窄屏下图整体多下沉 26px 补足切口；不改全局常数是因为
     680→654 在 1440 档会把切口从 64.8px 推到 90px，代价大于只在窄屏动。 */
  .hero__figure { margin-top: clamp(var(--sp-7), calc(100vh - 654px), 1200px); }
}
/* 首屏支撑句、规格带、来源行三处都删了，首屏只剩这一个 .micro（eyebrow
   标签）——它不参与本轮压缩，还原浏览器默认的 <p> 上下间距（1em，用
   .micro 自己的字号算正好是原来的 12px），首屏高度必须保持不变。 */
.sec--hero .micro { margin: 1em 0; }

/* 「业务侧不必自己解决的四件事」：原先两列两行，占一大片空白。s03 合并了
   两个主张块之后是全站最密的一屏，这里改成一行四个（桌面），窄屏依次回落
   成两列、一列——密不等于四件事各占一整行的松散堆叠。 */
.four { list-style: none; padding: 0; margin: var(--sp-3) 0 0;
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--sp-1) var(--sp-5); }
.four li { color: var(--ink); font-size: var(--fs-body); line-height: var(--lh-tight);
  padding-left: var(--sp-3); border-left: 2px solid var(--accent); }

/* 四动作指示器：原本是并排四格上面的静态标签行，横向轮播改版之后兼职
   当轮播的进度指示器——产品方原话「这一样就很像一个轮播进度条，可以居中，
   字号缩小」。每项改成指向对应面板的锚点链接（href="#act-1" 这类），不依赖
   脚本也能跳到对应格；字号从 --fs-h2（20px）降到 --fs-small（14px），整行
   justify-content:center 居中；当前格高亮靠 index.html 底部一小段渐进增强
   脚本切换 .acts__link--active，没有脚本时仍是可点的普通链接，只是不会
   自动高亮。 */
.acts { list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--sp-3); padding: 0; margin: var(--sp-4) 0 0; }
.acts li { display: flex; }
/* 产品方批注：当前格用蓝底胶囊，不用下划线。 */
.acts__link { display: flex; align-items: baseline; gap: var(--sp-2);
  font-size: var(--fs-small); color: var(--weak); font-weight: 600;
  text-decoration: none; padding: 3px var(--sp-3);
  border-radius: 999px; }
.acts__link span { font-size: var(--fs-micro); color: var(--accent); font-weight: 500; }
.acts__link:hover { color: var(--ink); }
.acts__link--active { background: var(--accent); color: var(--white); }
.acts__link--active span { color: var(--white); }

@media (max-width: 900px) {
  /* 桌面单行四列时行间距（--sp-1，4px）看不出来——只有一行，不存在“行”与
     “行”之间的间隔。两列起两行之后，4px 太窄，两行读起来像一条折行而不是
     两条并列，改成 --sp-3（12px）撑开成能读出两条的间距，列间距不变。 */
  .four { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-3) var(--sp-5); }
}

@media (max-width: 700px) {
  .four { grid-template-columns: 1fr; }
}

/* 页脚照 supermarkov.com 的形态：顶上一条发丝线、大留白，内容居中竖排
   品牌字标 → 一排线性联系图标（hover 变强调色）→ 一行小字版权。
   站上只有邮箱一个联系方式，图标行就一个 email——X/Telegram 没有账号
   信息，不编。正文里原来那行「合作邮箱」随之移入这里。 */
.foot { border-top: 1px solid var(--line); margin-top: var(--sp-8); padding: var(--sp-8) 0 var(--sp-7); }
.foot__in { display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); text-align: center; }
.foot__social a {
  display: inline-flex; width: 34px; height: 34px;
  align-items: center; justify-content: center; color: var(--body);
}
.foot__social a:hover { color: var(--accent); }
.foot__social svg { width: 22px; height: 22px; }
.foot__tag { margin: calc(var(--sp-3) * -1) 0 0; font-size: var(--fs-small); color: var(--body); }
.foot__meta { margin: 0; font-size: 13px; color: var(--body); }
/* 「本站控制台界面均为界面示意」是全站唯一一处说明六张控制台图是画的、
   不是真实产品截图的声明；它要负责的 #mk-hero 在页面最顶端、离这句话
   8000+px，且是访客第一眼看到的主视觉。原来跟 .foot（12px 灰字）混在
   页脚三行小字中间，字重与可见度配不上它要担的责任，改成与 .foot__brand
   同级的正文字号 + 加粗，并挪到页脚三行的第一行。措辞不变，只改样式与
   位置。 */
/* 与 .foot__brand 同一档视觉权重，合并声明避免两处重复的同值规则。 */
.foot__brand { color: var(--ink); font-weight: 600; font-size: 18px; text-decoration: none; }

/* 四种托管形态：四栏卡片 + 一条「谁能单方动钱」横带。
   四栏用中性卡片，不靠颜色区分形态——调色板没有第四种可用的强调色，
   语义三色按设计只许在控制台示意图内部作状态，不上页面级元素。 */
.forms { list-style: none; padding: 0; margin: var(--sp-6) 0 0;
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--sp-4); }
/* 产品方批注：四栏卡也用示意图那种立体效果——描边换柔和阴影。 */
.forms__item { border: 0; border-radius: var(--radius);
  box-shadow: var(--shadow-card); background: var(--white);
  padding: var(--sp-4); }
/* 产品方批注：小标题背后加个胶囊反衬。浅灰底胶囊，字色不变。 */
.forms__name { display: inline-block; margin: 0 0 var(--sp-2); color: var(--ink); font-weight: 600;
  background: var(--surface); border-radius: 999px; padding: var(--sp-1) var(--sp-4); }
.forms__lead { margin: 0 0 var(--sp-4); color: var(--body); font-size: var(--fs-small);
  line-height: var(--lh-body); }
.forms__meta { margin: 0; display: grid; grid-template-columns: auto 1fr;
  gap: var(--sp-2) var(--sp-3); font-size: var(--fs-micro); }
.forms__meta dt { color: var(--weak); white-space: nowrap; }
.forms__meta dd { margin: 0; color: var(--ink); }

/* 横带是这一屏真正的分界，单独给它上下发丝线，跟四栏区分开。 */
.band { margin-top: var(--sp-7); padding: var(--sp-5) 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band__title { margin: 0 0 var(--sp-4); color: var(--ink); font-weight: 600; }
.band__table { border-collapse: collapse; width: 100%; min-width: 560px;
  font-size: var(--fs-small); }
.band__table th, .band__table td { text-align: left; padding: var(--sp-2) var(--sp-4) var(--sp-2) 0;
  border-bottom: 1px solid var(--line); }
.band__table th { color: var(--weak); font-weight: 500; font-size: var(--fs-micro); }
.band__table td { color: var(--ink); }
.band__table tr:last-child td { border-bottom: 0; }

@media (max-width: 900px) { .forms { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 700px) { .forms { grid-template-columns: 1fr; } }

/* s02 的主张句与导语居中：产品方要求这一屏的标题与「平台已封装的四层能力」
   那行跟着一起居中，四格图仍是通栏。 */
.claim--center { margin-left: auto; margin-right: auto; text-align: center; }
.s02__lead { text-align: center; }