/* 芒芒猴官网 · 设计 token 只在这里定义（CLAUDE.md §5） */
@font-face { font-family: "MMH Sans"; src: url("display-light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "MMH Sans"; src: url("display-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* 颜色：黑白灰单色，只有协议页链接用各 App 的主色 --app */
  --bg: #FFFFFF;
  --bg-2: #F6F6F6;
  --ink: #111111;
  --ink-2: #555555;          /* 白底 7.5:1 */
  --ink-3: #8A8A8A;          /* 白底 3.5:1，只用于 12px 以上的标签与 ≥ 20px 的描边数字 */
  --rule: #E8E8E8;
  --rule-2: #D6D6D6;
  --night: #161616;
  --on-night: #FFFFFF;
  --on-night-2: rgba(255, 255, 255, .6);
  --app: #315DFE;

  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  --display: "MMH Sans", "Source Han Sans SC", "Noto Sans SC", var(--sans);

  /* 字号阶梯（≈1.4 倍，全为偶数）与配对行高（全落在 8px 网格上） */
  --f12: 12px; --l12: 20px;
  --f14: 14px; --l14: 24px;
  --f16: 16px; --l16: 28px;
  --f20: 20px; --l20: 32px;
  --f28: 28px; --l28: 40px;
  --f40: 40px; --l40: 48px;
  --f56: 56px; --l56: 64px;
  --f80: 80px; --l80: 88px;

  /* 12 列网格 */
  --cols: 12;
  --gap: 24px;
  --gut: clamp(16px, 4vw, 48px);
  --max: 1200px;
  --s4: 4px; --s8: 8px; --s16: 16px; --s24: 24px; --s32: 32px; --s48: 48px; --s64: 64px; --s96: 96px; --s128: 128px;
  --radius: 8px;
  --radius-card: 16px;
  /* 一层贴边的近影给轮廓、一层大而淡的远影给浮起感，替代描边 */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px -4px rgba(0, 0, 0, .06);
  --shadow-card-hover: 0 1px 2px rgba(0, 0, 0, .04), 0 16px 40px -8px rgba(0, 0, 0, .10);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--s24); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--f16)/var(--l16) var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-weight: 500; margin: 0; letter-spacing: -.01em; text-wrap: balance; }
p { margin: 0; }
::selection { background: var(--ink); color: #fff; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.nw { white-space: nowrap; }
.display { font-family: var(--display); }

/* 宽屏就是 1200 内容宽、零 padding；屏不够宽时才收到「屏宽 − 两侧 --gut」 */
.wrap { width: min(var(--max), 100% - 2 * var(--gut)); margin: 0 auto; }
.grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gap); }
.label { font-size: var(--f12); line-height: var(--l12); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); display: flex; gap: var(--s8); align-items: center; }
.label b { font-weight: 500; color: var(--ink); }
.dark { background: var(--night); color: var(--on-night); }

/* ---------- 顶栏：品牌 | 导航居中 | 联系 ---------- */
.head .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 80px; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-size: var(--f16); line-height: 1; font-weight: 600; letter-spacing: .02em; }
/* 线稿猴头：32px 时线宽约 1.6px，和旁边 16px 粗体字的笔画一样重 */
.brand svg { width: 32px; height: 32px; flex: none; color: var(--ink); }
.brand .crumb { font-size: var(--f14); font-weight: 400; color: var(--ink-3); letter-spacing: 0; transition: color .2s; }
.brand .crumb:hover { color: var(--ink); }
.brand .crumb::before { content: "/"; margin: 0 10px 0 4px; color: var(--rule-2); }
.nav { display: flex; gap: var(--s32); font-size: var(--f12); line-height: 1; letter-spacing: .16em; color: var(--ink-2); }
.nav a { padding: 8px 0; transition: color .2s; }
.nav a:hover { color: var(--ink); }
.head .contact { justify-self: end; display: inline-flex; align-items: center; height: 32px; padding: 0 16px; border-radius: 4px; background: var(--ink); color: #fff; font-size: var(--f12); letter-spacing: .08em; transition: background .2s; }
.head .contact:hover { background: #000; }

/* ---------- 首页 hero ---------- */
.hero { padding-bottom: var(--s96); }
.hero .grid { padding-top: clamp(48px, 8vw, 112px); align-items: end; row-gap: var(--s48); }
.hero .eyebrow { grid-column: 1 / -1; }
.hero h1 { grid-column: 1 / span 8; font-size: clamp(40px, 6vw, var(--f80)); line-height: 1.1; letter-spacing: -.02em; }
.hero h1 span { display: block; }
.hero h1 .l { font-weight: 300; }
.hero h1 .b { font-weight: 700; }
.hero .intro { grid-column: 1 / span 5; }
.hero .rule { width: 64px; height: 2px; background: var(--ink); }
.hero .lead { margin-top: var(--s24); font-size: var(--f14); line-height: var(--l14); color: var(--ink-2); max-width: 24em; text-wrap: pretty; }
.cta { margin-top: var(--s32); display: flex; flex-wrap: wrap; gap: var(--s16); }
.cta a { display: inline-flex; align-items: center; gap: var(--s16); font-size: var(--f14); line-height: var(--l14); font-weight: 500; }
.cta .sq { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 4px; background: var(--ink); color: #fff; transition: transform .25s var(--ease); }
.cta .sq svg { width: 18px; height: 18px; }
.cta a:hover .sq { transform: translateX(4px); }
/* 跨标题和导语两行、底边对齐导语：两行高的大字不把导语往下顶 */
.hero .sign { grid-column: 9 / -1; grid-row: 2 / span 2; justify-self: end; text-align: right; }
/* 公司名描边大字：是图形不是文字，「芒芒 / 猴」两行，落在 9–12 列内 */
.hero .sign .big { display: block; font-family: var(--display); font-weight: 300; font-size: clamp(80px, 10vw, 144px); line-height: 1; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px var(--rule-2); }
.hero .sign .label { justify-content: flex-end; margin-top: var(--s16); }

/* ---------- 区块 ---------- */
.section { padding: var(--s96) 0 var(--s128); }
.sec-head { text-align: center; margin-bottom: var(--s64); }
.sec-head h2 { font-size: var(--f28); line-height: var(--l28); font-weight: 700; }
.sec-head .label { justify-content: center; margin-top: var(--s8); }

/* ---------- 产品卡片：白底无描边、轻投影，一行 3 张（各占 4 列） ---------- */
.products { row-gap: var(--gap); }
.product { position: relative; isolation: isolate; overflow: hidden; grid-column: span 4; display: flex; flex-direction: column; padding: var(--s32); border-radius: var(--radius-card); background: var(--bg); box-shadow: var(--shadow-card); transition: box-shadow .25s; }
.product:hover { box-shadow: var(--shadow-card-hover); }
.product .meta { display: flex; justify-content: space-between; align-items: flex-start; }
.product .icon { width: 72px; height: 72px; border-radius: 16px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); }
/* 序号作卡片底纹：与首屏描边大数字同一做法，压在内容下面 */
.product .no { position: absolute; z-index: -1; top: var(--s16); right: var(--s24); font-weight: 300; font-size: 120px; line-height: 1; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px var(--rule-2); font-variant-numeric: tabular-nums; pointer-events: none; user-select: none; transition: color .25s; }
/* 悬停时描边填成同色实心：仍是底纹的浅灰，不和卡片内容抢 */
.product:hover .no { color: var(--rule-2); }
.product h3 { margin-top: var(--s32); font-size: var(--f20); line-height: var(--l20); font-weight: 600; }
.product .latin { margin-top: var(--s4); font-size: var(--f12); line-height: var(--l12); letter-spacing: .16em; color: var(--ink-3); }
.product .tag { margin-top: var(--s16); font-size: var(--f14); line-height: var(--l14); color: var(--ink-2); }
.facts { list-style: none; padding: 0; margin: var(--s24) 0 0; display: flex; flex-wrap: wrap; gap: var(--s8); }
.facts li { font-size: var(--f12); line-height: 1; padding: 6px 10px; border: 1px solid var(--rule); border-radius: 4px; color: var(--ink-2); }
/* 没有小标题：链接行 40px 高、字居中，上留 16 后第一行字到细线的视觉距离 ≈ 卡片上半的 24 */
.product .legal-block { margin-top: var(--s32); padding-top: var(--s16); border-top: 1px solid var(--rule); }
.doclinks { list-style: none; padding: 0; margin: 0; }
.doclinks a { display: flex; align-items: center; justify-content: space-between; gap: var(--s16); min-height: 40px; font-size: var(--f14); color: var(--ink); transition: color .2s; }
.doclinks a svg { width: 16px; height: 16px; color: var(--ink-3); transition: transform .25s var(--ease), color .2s; }
.doclinks a:hover { color: var(--ink); }
.doclinks a:hover svg { transform: translateX(4px); color: var(--ink); }

/* ---------- 法务文档页 ---------- */
.doc-hero { padding: clamp(32px, 6vw, 72px) 0 clamp(32px, 4vw, 48px); }
.doc-hero h1 { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.2; letter-spacing: -.03em; margin-top: var(--s16); }
.doc-meta { margin-top: var(--s16); display: flex; flex-wrap: wrap; gap: var(--s8) var(--s24); font-size: var(--f14); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.doc-tabs { margin: var(--s32) calc(-1 * var(--gut)) 0; padding: 0 var(--gut); display: flex; gap: var(--s8); overflow-x: auto; scrollbar-width: none; }
.doc-tabs::-webkit-scrollbar { display: none; }
.doc-tabs a { flex: none; font-size: 14px; padding: 9px 14px; border-radius: 999px; background: var(--bg-2); color: var(--ink-2); transition: background .2s, color .2s; }
.doc-tabs a:hover { background: var(--rule); color: var(--ink); }
.doc-tabs a[aria-current] { background: var(--ink); color: #fff; }
.doc-body { display: grid; grid-template-columns: 232px minmax(0, 720px); gap: clamp(32px, 6vw, 96px); padding-bottom: var(--s128); }
.toc { position: sticky; top: var(--s32); align-self: start; max-height: calc(100vh - 64px); overflow: auto; font-size: 14px; }
.toc .label { margin-bottom: var(--s16); }
.toc ol { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--rule); }
.toc a { display: block; padding: 7px 0 7px 16px; margin-left: -1px; border-left: 2px solid transparent; color: var(--ink-3); line-height: 1.45; transition: color .2s, border-color .2s; }
.toc a:hover { color: var(--ink); }
.toc a.on { color: var(--ink); border-color: var(--app); }
.toc-m { display: none; }
article.legal { font-size: 16px; line-height: 1.75; color: var(--ink-2); }
article.legal .intro { font-size: 14px; color: var(--ink-3); }
article.legal h2 { font-weight: 500; font-size: 20px; line-height: 1.4; color: var(--ink); margin: var(--s64) 0 var(--s16); scroll-margin-top: var(--s24); }
article.legal p + p { margin-top: 12px; }
article.legal ol, article.legal ul { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 12px; }
article.legal li { display: grid; grid-template-columns: 28px minmax(0, 1fr); }
article.legal li .m { color: var(--ink-3); font-variant-numeric: tabular-nums; }
article.legal ul li .m { color: var(--app); font-weight: 700; }
article.legal b { font-weight: 500; color: var(--ink); }
article.legal strong.hl { font-weight: 600; color: var(--ink); }
article.legal a { color: var(--app); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; word-break: break-all; }
article.legal .end { margin-top: var(--s64); padding-top: var(--s24); border-top: 1px solid var(--rule); font-size: var(--f14); color: var(--ink-3); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
article.legal .end a { color: var(--ink-2); text-decoration: none; }

/* ---------- 按钮 / 404 ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: 4px; background: var(--ink); color: #fff; font-size: 16px; font-weight: 500; }
.btn svg { width: 18px; height: 18px; }
.lost { min-height: 70vh; display: grid; align-content: center; gap: var(--s24); }
.lost .big { font-size: clamp(96px, 18vw, 220px); font-weight: 300; line-height: .9; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px var(--rule-2); }

/* ---------- 页脚（黑底白字） ---------- */
.foot { background: var(--night); color: var(--on-night-2); font-size: var(--f14); line-height: var(--l14); }
.foot .wrap { padding-top: var(--s64); padding-bottom: var(--s32); }
.foot .top { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s32); align-items: start; }
.foot .top > .brand { grid-column: 1 / span 4; color: var(--on-night); }
.foot .brand svg { color: var(--on-night); }
.foot .cols { grid-column: 7 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.foot .col { display: grid; gap: var(--s8); align-content: start; }
.foot .col .label { color: rgba(255, 255, 255, .4); margin-bottom: var(--s8); }
.foot .col a { transition: color .2s; overflow-wrap: anywhere; }
.foot .col a:hover, .foot .legal-line a:hover { color: var(--on-night); }
.foot .legal-line { margin-top: var(--s64); padding-top: var(--s24); border-top: 1px solid rgba(255, 255, 255, .12); text-align: center; display: grid; gap: var(--s8); justify-items: center; font-size: var(--f12); line-height: var(--l12); }

/* ---------- 进场动效 ---------- */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise .8s var(--ease) both; }
  .rise.d1 { animation-delay: .08s; } .rise.d2 { animation-delay: .16s; } .rise.d3 { animation-delay: .24s; }
  @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}

/* ---------- 窄屏：8 列 → 4 列 ---------- */
@media (max-width: 960px) {
  :root { --cols: 8; --gap: 16px; }
  .hero h1 { grid-column: 1 / -1; }
  .hero .intro { grid-column: 1 / span 5; }
  .hero .sign { grid-column: 6 / -1; grid-row: auto; }
  .product { grid-column: span 4; }
  .foot .top > .brand, .foot .cols { grid-column: 1 / -1; }
  .doc-body { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }
  .toc-m { display: block; margin-bottom: var(--s32); background: var(--bg-2); border-radius: var(--radius); }
  .toc-m summary { list-style: none; cursor: pointer; padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; font-size: 16px; font-weight: 600; color: var(--ink); }
  .toc-m summary::-webkit-details-marker { display: none; }
  .toc-m summary svg { width: 18px; height: 18px; transition: transform .25s; }
  .toc-m[open] summary svg { transform: rotate(90deg); }
  .toc-m ol { list-style: none; margin: 0; padding: 0 20px 12px; }
  .toc-m a { display: block; padding: 10px 0; font-size: 14px; color: var(--ink-2); border-top: 1px solid var(--rule); }
}
@media (max-width: 640px) {
  :root { --cols: 4; }
  .head .wrap { grid-template-columns: 1fr auto; height: 64px; }
  .head .nav { display: none; }
  .hero h1, .hero .intro, .hero .sign { grid-column: 1 / -1; }
  .hero .sign { justify-self: start; text-align: left; }
  .hero .sign .label { justify-content: flex-start; }
  .product { grid-column: 1 / -1; padding: var(--s24); }
  .foot .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}