/* ═══════════════════════════════════════════════════════════
   代理合作（B 端招商）—— 站外流，与叙事流完全独立。
   三条硬约束（研究 §2.9 + §1.2）：
     ① 全程不过年龄门 ⇒ 门前语法：有界图（≤72svh）、无满幅、无整屏 sticky、无硬切
     ② 只用 L0：四张图全部出自 _index/derived/ 的已渲染验证件
     ③ 色温分配里 moss 是给 B 端预留的隧道（叙事流内不用）
   读者是坐在办公室里的代理，不是访客——克制、商务、信息优先。
   ═══════════════════════════════════════════════════════════ */

.ph { color: var(--text-low); font-size: calc(12px * var(--ratio, 1)); letter-spacing: .04em; }
.ph::before { content: "〔待品牌方：" attr(data-ph) "〕"; }
/* i18n 接上后由 applyLang 写 data-ph-label（前缀跟语言走，占位项名保持中文——
   读者是品牌方）。没有 JS 时上面那条就是终态，两者中文写法刻意一致，不会闪一下 */
.ph[data-ph-label]::before { content: "〔" attr(data-ph-label) "〕"; }
/* 代理卡里的占位要提一档。--text-low 是配着页面暗底调的，代理卡自己带一层 moss 绿面
   （实测背景 rgb(30,54,44)），同一个字色压上去实测只有 3.91:1，低于 4.5 —— 2026-08-07
   全站对比度巡检 48 段里唯一一条不达标，就是欧美那格「该代理对外叫什么名字」。
   ⚠ 不许靠"占位反正是给品牌方看的"糊过去：占位是页面上最需要被看见的字。 */
.pt-agent .ph { color: var(--text-mid); }

/* ── 导航 ── */

/* 导航保底压暗（2026-07-30 全站 26 点对比度实测后加）：
   vendor 的 .vx-nav 默认全透明，滚动后也只加一层很淡的毛玻璃，链接色是 --text-mid。
   导航压在亮画面上时对比度实测掉到 1.08–1.13（玄关双门那扇天光窗、
   胶片横廊的白瓷浴缸、partner 的亮底幅）——那三个字在截图里根本认不出来。
   用渐变而非实底色：保留「悬浮在画面上」的观感，往下多铺 30px 淡出，不留硬边；
   底色取 --bg-base，跟着分区主题走（亮色模式下自然变成亮 scrim，方向仍然正确）。
   ::before 必须 position:absolute —— .vx-nav 是 flex 容器，
   静态定位的伪元素会变成 flex item，把品牌与链接挤开。 */
.vx-nav::before {
  content: "";
  position: absolute;
  /* 往下多铺 46px 而不是 30px：盒子越高，尾巴越长，亮画面上才不会看出一条硬边的黑带。
     链接行落在盒子 15%–41% 处（导航高约 71px），所以 44% 之前必须还是满强度。 */
  inset: 0 0 -46px 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--bg-base) 92%, transparent) 0%,
    color-mix(in oklab, var(--bg-base) 84%, transparent) 44%,
    color-mix(in oklab, var(--bg-base) 34%, transparent) 72%,
    transparent 100%);
}

.pt-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 40px);
}
.pt-nav .vx-nav__brand img { width: 34px; display: block; }
.pt-nav-right { display: flex; align-items: center; gap: clamp(14px, 2.6vw, 30px); }
.pt-back {
  font-size: calc(13px * var(--ratio, 1));
  letter-spacing: .16em;
  color: var(--text-mid);
  text-decoration: none;
  white-space: nowrap;
}
.pt-back:hover { color: var(--text-hi); }

/* 旧语言行样式已随页脚语言行一并退役（2026-07-30）：语言切换收进导航右上
   拣选器（navtools.css）。这里不得再按 [data-lang-row] 属性全局定样式——
   它会以同权重后位覆盖 navtools 的 .pick-menu button。 */

/* ── 版心 ── */

.pt-shell {
  max-width: var(--content-max, 1440px);
  margin: 0 auto;
  padding-inline: var(--page-gutter, clamp(20px, 4vw, 64px));
  /* 顶距跟着导航实测高度走：导航是 fixed，换长语种会换行变高，写死的顶距会被它压住。
     --nav-h 由 js/lang.js 量出来写在 :root；没有 JS 时退回原来的写死值 */
  padding-top: max(clamp(84px, 11svh, 118px), calc(var(--nav-h, 64px) + clamp(20px, 3svh, 34px)));
  padding-bottom: clamp(80px, 12svh, 140px);
}

.pt-kicker {
  margin: 0;
  font-size: calc(12px * var(--ratio, 1));
  letter-spacing: .5em;
  text-indent: .5em;
  color: var(--accent);
}
.pt-title {
  margin: clamp(14px, 2.4svh, 26px) 0 0;
  font-weight: 200;
  font-size: clamp(30px, 4.4vw, 58px);
  letter-spacing: .16em;
  text-indent: .16em;
  color: var(--text-hi);
}
.pt-lead { margin: clamp(16px, 2.6svh, 28px) 0 0; max-width: 56ch; line-height: 2; }

/* ── 首屏事实条（2026-08-08）──
   这一页原来从 kicker 到正文的字号跨度只有 11→16px，首屏之后**没有一个主角**，
   六个板块看起来一样重——那正是它读着像后台而不像品牌页的根因。
   这三个数是全页唯一允许的大字：数字 clamp 到 44–68px、标签压到 11px，
   跨度拉到 6 倍。高级感来自**比**，不来自装饰。
   ⚠ 数字在上、标签在下（dd 在前 dt 在后）是刻意的：读者先看到量级，再确认它是什么。 */
.pt-facts {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 5vw, 72px);
  margin: clamp(26px, 4.2svh, 46px) 0 0;
}
.pt-facts > div { display: flex; flex-direction: column; gap: 2px; }
.pt-facts dd {
  margin: 0;
  font-weight: 200;
  font-size: clamp(44px, 5.2vw, 68px);
  line-height: .96;
  letter-spacing: .02em;
  color: var(--text-hi);
  font-variant-numeric: tabular-nums;
}
/* 空白地区那个数是招商的理由本身（「还有 2 个地区没人」），给它主题色 */
.pt-facts dd[data-fact="open"] { color: color-mix(in oklab, var(--accent) 62%, var(--text-hi)); }
.pt-facts dt {
  font-size: calc(11px * var(--ratio, 1));
  letter-spacing: .24em;
  color: var(--text-mid, var(--text-low));
}

/* 首图：有界横幅，绝不满幅（门前语法） */
/* ⚑ 2026-08-08：撤掉那圈主题色描边，圆角收小，高度放大一档。
   全页改成细线体系之后，这圈 accent 描边成了唯一一处**带颜色的框**——
   它把首图裱成了一张缩略图。图不需要框，图自己就是框。
   46→58svh 仍远低于门前语法的 72svh 上限（见本文件抬头约束 ①）。 */
.pt-banner {
  margin: clamp(30px, 5svh, 60px) 0 0;
  position: relative;
  aspect-ratio: 2200 / 890;
  max-height: 58svh;
  overflow: clip;
  border-radius: var(--radius-200, 12px);
  background: var(--bg-inset, #111);
}
.pt-banner img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% var(--fy, 42%);
}

/* ── 合作要点 ── */

.pt-block { margin-top: clamp(52px, 9svh, 110px); }
.pt-h2 {
  margin: 0 0 clamp(20px, 3.4svh, 38px);
  font-weight: 300;
  font-size: calc(15px * var(--ratio, 1));
  letter-spacing: .34em;
  color: var(--text-hi);
}

.pt-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: clamp(18px, 2.6vw, 34px);
}
/* ⚑ 2026-08-08 撤掉填充卡。填充面是用来**承载内容**的；这三格现在装的是空占位，
   填上底色就是三个空盒子——那是全页最丑的一处。
   改成顶部一道细线 + 一个大号极细的编号：内容没到位时它读作「一张待填的清单」，
   内容到位后它读作「三条要点」，两种状态都成立。
   ⚠ 不许因为"反正是空的"就把这一节藏掉——藏占位是红线。让空态体面，不是让它消失。 */
.pt-point {
  padding: clamp(14px, 1.8vw, 20px) 0 0;
  border-top: 1px solid var(--line-base);
}
.pt-num {
  display: block;
  font-weight: 200;
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1;
  letter-spacing: .06em;
  color: color-mix(in oklab, var(--accent) 58%, var(--text-low));
  font-variant-numeric: tabular-nums;
}
.pt-point .ph { display: block; margin-top: clamp(12px, 1.6vw, 18px); line-height: 1.9; }

/* ── L0 图带：三张有界图并排，各自留白，不做满幅 ── */

.pt-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.8vw, 24px);
}
.pt-strip figure {
  margin: 0;
  position: relative;
  /* 3:4 比 4:5 更高一档，配合撤掉的小标题，让这一段成为整页的呼吸位。
     56svh 仍远低于门前语法的 72svh 上限（见本文件抬头约束 ①）。 */
  aspect-ratio: 3 / 4;
  max-height: 56svh;
  overflow: clip;
  border-radius: var(--radius-200, 12px);
  /* 同上：细线体系里，给图加边框等于给它加一层不必要的相框 */
  background: var(--bg-inset, #111);
}
.pt-strip img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% var(--fy, 50%);
}

/* ── 分地区授权渠道（#regions）：导航「地区」拣选器的业务落点 ── */

/* 锚点跳转（菜单「查看代理 →」带 #regions）要给固定导航让位，不然标题埋在导航下面 */
#regions { scroll-margin-top: calc(var(--nav-h, 80px) + 18px); }
.pt-reg { scroll-margin-top: calc(var(--nav-h, 80px) + 18px); }

/* ── 顶部地区跳转条 ──
   由 js/lang.js 从 DOM 生成（家数也是数出来的）。没有 JS 时它保持 hidden，
   名单本身照常可读——渐进增强，与站内「正式名门后注入」同一套做法。
   它回答的是客人进这一页的第一个问题：**我这个地区有没有人、有几家。** */
.pt-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 clamp(22px, 3.2svh, 38px);
}
.pt-jump a {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--line-subtle);
  border-radius: 999px;
  font-size: calc(12.5px * var(--ratio, 1));
  letter-spacing: .04em;
  color: var(--text-mid, var(--text-low));
  text-decoration: none;
  transition: border-color .25s, color .25s;
}
.pt-jump a:hover,
.pt-jump a:focus-visible { color: var(--text-hi); border-color: var(--line-strong); }
/* 家数：0 的那两个压到最淡——「这里没人」也是一条要一眼看到的信息，
   但它不该和「这里有 4 家」抢注意力 */
.pt-jump em {
  font-style: normal;
  font-size: calc(11px * var(--ratio, 1));
  color: var(--text-low);
  font-variant-numeric: tabular-nums;
}
/* 「这里没人」只靠虚线边框表达，**不靠把字调淡**。
   第一版给 em 加了 opacity:.55，实测对比度 2.54:1（要 4.5）——
   「0」正是客人最需要看清的那个字符，把它调淡等于把结论藏起来。
   减淡终态是要判对比度的，不是免检项（见 contrast-site.py 文件头）。 */
.pt-jump a[data-n="0"] { border-style: dashed; border-color: var(--line-base); }
/* 拣选器选中的那个地区：跳转条上也要点亮，否则点亮只发生在滚下去之后 */
.pt-jump a.is-mine {
  color: color-mix(in oklab, var(--accent) 70%, var(--text-hi));
  border-color: color-mix(in oklab, var(--accent) 55%, transparent);
}

/* ── 地区 = 一条横向的带，不是一列 ──
   2026-08-08 从 auto-fit 五列改过来。理由写在 partner.html 的 #regions 注释里：
   地区数固定、代理数会长，把会长的那一维塞进列高，涨到 10 家就是一根长条配四列空白。
   现在代理在带内 auto-fill 换行，地区顺序恒定，涨多少都还是一屏能扫完的矩形。 */
.pt-regions {
  display: grid;
  gap: clamp(26px, 4svh, 46px);
}
.pt-reg-h {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-subtle);
  font-weight: 300;
  font-size: calc(16px * var(--ratio, 1));
  letter-spacing: .2em;
  color: var(--text-hi);
}
.pt-reg-n {
  font-weight: 400;
  font-size: calc(11.5px * var(--ratio, 1));
  letter-spacing: .08em;
  color: var(--text-low);
  font-variant-numeric: tabular-nums;
}
/* 拣选器选中的地区：旧版是整卡发光，现在地区是整整一条带，整条发光会盖过内容。
   改成标题左侧一道主题色的竖标 + 标题变色——同样一眼可辨，不吵。 */
.pt-reg.is-mine > .pt-reg-h {
  border-bottom-color: color-mix(in oklab, var(--accent) 45%, transparent);
  color: color-mix(in oklab, var(--accent) 68%, var(--text-hi));
  padding-left: 12px;
  box-shadow: inset 3px 0 0 -1px color-mix(in oklab, var(--accent) 75%, transparent);
}

/* ── 代理卡 ──
   minmax 的下限决定**几列**，不决定卡宽（1fr 会把它们撑满整行）。290 是按
   「一张卡放得下最长的那个值」定的：现存最长 huayu12110904@gmail.com 实测需 181px，
   加内边距 40 + 类型栏与列距 ≈ 60 ⇒ 281。1440 下排 4 列（实测 310.5px/列）。
   ⚠ 以后收到更长的邮箱/账号，先量一次再调这个数，别拍脑袋——第一版就是拍出来的，
     结果值栏差 9px，邮箱断成两行（见下面类型栏那段注释）。 */
.pt-agents {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap: clamp(12px, 1.6vw, 18px);
  list-style: none;
  margin: 0;
  padding: 0;
}
/* ⚑ 2026-08-08 去填充。整页原本到处是填充绿卡（要点、代理），读起来像后台面板。
   高级的做法是**细线 + 留白**，填充只留给一处——这里留给 hover：
   鼠标停下时那张卡才亮起来，是"我正在看这一家"的反馈，不是恒常的装饰。
   ⚠ 底色一改，卡上文字的实测背景就变了（moss 绿面 → 页面暗底），
     对比度必须重测：改这条之后跑 python3 _build/e2e/contrast-site.py ptn。 */
.pt-agent {
  padding: clamp(15px, 1.8vw, 20px);
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-200, 12px);
  background: transparent;
  transition: border-color .3s, background-color .3s;
}
.pt-agent:hover {
  border-color: color-mix(in oklab, var(--accent) 42%, transparent);
  background: var(--surface-1, rgb(255 255 255 / .03));
}
.pt-agent-n {
  display: block;
  font-weight: 400;
  font-size: calc(14.5px * var(--ratio, 1));
  letter-spacing: .04em;
  color: var(--text-hi);
  margin-bottom: 11px;
}
/* 名字未定那家：占位当抬头用，字号跟着抬头走，别缩成一行小灰字——
   缺口就在明面上才有人去填 */
.pt-agent > .ph.pt-agent-n { font-size: calc(13px * var(--ratio, 1)); }

/* ── 渠道：类型一栏、值一栏，逐行对齐 ──
   旧版是 5 行长得一模一样的链接。客人的动作是「找我**用**的那个软件」，
   类型不显式列出来就得逐行认 URL。

   类型栏用 auto 而不是定宽：
   ① 定宽写不对。第一版写的是 4.8em，em 在这里挂在 .pt-ch > div 上，
      解析的是**容器**继承来的 ~18px 而不是 dt 自己的 12.4px ⇒ 实测吃掉 86px，
      值栏只剩 172px，而 huayu12110904@gmail.com 要 181px，正好断成两行。
      （断行不是难看的问题：客人要照着抄，抄错的邮箱发不出去。）
   ② auto 让每张卡按自己**最长的那个类型词**收紧——一张卡内部照样逐行对齐
      （同一个 grid），而 KakaoTalk / 웹사이트 这种长词也永远不会被截。
   min-width 挂在 dt 上，em 解析的才是 dt 自己的字号，短词也留得住呼吸。 */
.pt-ch { margin: 0; display: grid; row-gap: 6px; }
.pt-ch > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  align-items: baseline;
}
/* 层级靠**字号与字距**分，不靠把类型词调暗：
   代理卡自带一层 moss 绿面（实测 rgb(27,45,41)），--text-low 压上去只有 4.35:1，
   差 0.15 不达标（与 08-07 那处 .ph 同一类问题，同一个面）。
   ⇒ 类型提到 --text-mid，值提到 --text-hi。顺带把层级摆正了：
     客人来这一页就是为了取那个账号，**值**才该是卡上最清楚的东西。 */
.pt-ch dt {
  min-width: 3.6em;
  font-size: calc(11px * var(--ratio, 1));
  letter-spacing: .06em;
  color: var(--text-mid, var(--text-low));
  white-space: nowrap;
}
.pt-ch dd {
  margin: 0;
  font-size: calc(12.5px * var(--ratio, 1));
  line-height: 1.7;
  color: var(--text-hi);
  /* 邮箱与网址在窄屏会顶破卡片，断在任意字符处也好过横向滚动 */
  overflow-wrap: anywhere;
}
.pt-ch a {
  color: var(--text-hi);
  text-decoration: none;
  border-bottom: 1px solid var(--line-subtle);
}
.pt-ch a:hover,
.pt-ch a:focus-visible { color: var(--accent); border-bottom-color: currentColor; }

/* ── 空白区（该地区确认没有代理）──
   2026-08-07。它与「还没填」长得必须不一样：占位是红的、意思是「我们缺这条信息」；
   空白区是灰的、意思是「这条信息就是没有，而这正好是你的机会」。
   两者混用会让品牌方以为日本那格还欠他们一条名单——实际上他们已经答了「没有」。
   2026-08-08：地区改成带之后，空白区不再是一张与别人等宽的卡，而是收成一条窄行——
   它只有一句话，占满整条带的宽度是把「没有」放大成了版面事件。 */
.pt-reg.is-blank > .pt-reg-h { color: var(--text-mid, var(--text-low)); border-bottom-style: dashed; }
.pt-blank {
  margin: 0;
  font-size: calc(12.5px * var(--ratio, 1));
  line-height: 1.85;
  color: var(--text-low);
  display: inline;
}
.pt-blank-cta {
  display: inline-block;
  margin-left: 12px;
  font-size: calc(12.5px * var(--ratio, 1));
  letter-spacing: .04em;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--accent) 45%, transparent);
}
.pt-blank-cta:hover,
.pt-blank-cta:focus-visible { border-bottom-color: currentColor; }

/* ── 联系 ── */

/* ⚑ 2026-08-08：节奏分级。原来每个 .pt-block 的顶距完全一样（9svh），
   六块等距 = 没有段落。图带前后放宽、收尾块再放宽一档，页面才有起伏。 */
.pt-block--plate { margin-top: clamp(64px, 11svh, 132px); }
.pt-block--plate + .pt-block { margin-top: clamp(64px, 11svh, 132px); }

.pt-contact {
  border-top: 1px solid var(--line-subtle);
  margin-top: clamp(72px, 13svh, 160px);
  padding-top: clamp(34px, 5.4svh, 64px);
}
/* 收尾标题放大一档：它是整页唯一的转化点，不该和中途的小标题同号 */
.pt-h2--lg {
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 200;
  letter-spacing: .2em;
  margin-bottom: clamp(16px, 2.4svh, 26px);
}
/* 微信那句是**要读者做的那个动作**，提到接近正文两倍 */
.pt-contact-main {
  margin: 0;
  font-size: clamp(16px, 1.5vw, 21px);
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--text-hi);
}
.pt-contact .ph { display: block; margin-top: 14px; line-height: 1.9; }
.pt-contact-line {
  margin: 14px 0 0;
  font-size: calc(13px * var(--ratio, 1));
  line-height: 1.9;
  color: var(--text-mid, var(--text-low));
  overflow-wrap: anywhere;
}

/* ── 页脚 ── */

.pt-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(14px, 2.4vw, 28px);
  max-width: var(--content-max, 1440px);
  margin: 0 auto;
  padding: clamp(24px, 4svh, 44px) var(--page-gutter, clamp(20px, 4vw, 64px));
  border-top: 1px solid var(--line-subtle);
}
.pt-foot-note {
  margin: 0;
  flex-basis: 100%;
  font-size: calc(11.5px * var(--ratio, 1));
  letter-spacing: .06em;
  color: var(--text-low);
}

@media (max-width: 760px) {
  .pt-strip { grid-template-columns: 1fr; }
  .pt-strip figure { aspect-ratio: 16 / 10; max-height: 30svh; }
  .pt-banner { aspect-ratio: 4 / 3; max-height: 38svh; }
  /* 旧版这里把 5 语按钮行藏进文档流（导航塞不下会换行压正文）。
     语言换成下拉拣选器后窄屏收成纯图标（navtools.css），导航放得下，
     文档流语言行连同规则一并退役（2026-07-30） */
}