/* ===========================================================================
   226 A2-1：买家网站外壳（主题「4D Sourcing」）的样式
   ---------------------------------------------------------------------------
   · 色值照 docs/design/en-buyer/app.css（那份又照抄后台 base.html）；主色原来是 #1f3a5f（与买家页 buyer.css 同一个），
     226 全站青色（LK 10-19 批）起按钮、链接、图标、焦点框换成横幅的青（见下面「226 全站青色」那一组变量）。
     只有「次要文字」一色加深到 #5f6a74：原来的 #6b7680 在 #f6f7f9 底上对比度不到 4.5:1（WCAG AA 正文要求）。
   · 手机优先：390px 宽不出现横向滚动；触控目标不小于 44px；正文 16px（与 buyer.css 一致：iOS 对小于 16px 的
     输入框会放大整页）。
   · 只在本主题生效时加载（Sourcing_Site::enqueue）。选择器都以 .sd- 打头；短代码自己的版面（.sourcing-buyer）
     仍由 buyer.css 管，这里只把它和页面标题对齐。
   · 有深色模式。
   =========================================================================== */

.sd-body{
  /* 226 设计规格 §1（10-12）：一套 token，buyer.css 的 --sb-* 也引用这里（主题以外的站点用 buyer.css 自己的备用值）。
     标题（--sd-display，只给 h1 / h2 与首页大字）：226 4D（LK 10-19 04:48「headings: yes」）起全站换成新横幅那一种粗的系统无衬线，原来是衬线；
     全是系统自带字体，不加载网络字体。正文系统无衬线 16/1.6，照旧。 */
  /* 226 表单格的边（指挥 10-23 20:5x，A2 深色清单 B1）：表单格与勾选框单独一个边色 --sd-field-line —— 原来用 --sd-line-2，白底上 1.49:1、深色卡片上 1.55:1，WCAG 1.4.11 要 3:1；
     浅色 #858f9b（页面底 #f5f6f8 上 3.04:1、白底 3.28:1；起先定的 #8b95a1 在页面底上只有 2.81 —— Request access、报价单的格子就在页面底上，指挥 21:0x 换成它）、
     深色 #5f6b78（#161b21 上 3.18:1、#0f1317 上 3.43:1）。别的线照旧用 --sd-line／--sd-line-2；点进去的青边照旧 */
  --sd-bg:#f5f6f8; --sd-surface:#ffffff; --sd-line:#e3e6ea; --sd-line-2:#cfd4da; --sd-field-line:#858f9b;
  --sd-ink:#0e1620; --sd-ink-2:#46525e; --sd-mut:#5f6a74;
  --sd-accent:#0e7490; --sd-accent-ink:#ffffff; --sd-accent-soft:#e6f7fa; --sd-link:#0e7490;
  --sd-cand:#96620a; --sd-cand-bg:#fdf3e0; --sd-cand-line:#ecd0a1;
  --sd-font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", sans-serif;
  --sd-display:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", sans-serif;
  --sd-radius:10px; --sd-shadow:0 1px 2px rgba(16,24,40,.05); --sd-shadow-hover:0 4px 14px rgba(16,24,40,.08);
  /* 只在深浅两种外观里取值不同的几样（深色那一段另给）：按钮悬停、图标与步骤序号的颜色 */
  --sd-hover-filter:brightness(.9); --sd-mark:var(--sd-accent);

  margin:0; background:var(--sd-bg); color:var(--sd-ink);
  font:16px/1.6 var(--sd-font);
  /* 页脚贴底：短页面（例如「My account」只有一句话时）页脚下面不留一截空底色（A2-1 本机截图看到的） */
  min-height:100vh; display:flex; flex-direction:column;
  -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased;
  overflow-wrap:anywhere;
}
/* LK 10-14：顶栏的「外观」开关 —— 自动（跟系统）／浅／深，记在浏览器本机（localStorage 的 sd-theme），文档头里的小脚本在首帧前把选择
   写到 <html data-theme>，不闪（照后台 base.html 的做法）。深色变量两段逐字相同（站点测试核）：系统是深色且没选「浅」时一段，选了「深」时一段。 */
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) .sd-body{
    color-scheme:dark;
    --sd-bg:#0f1317; --sd-surface:#161b21; --sd-line:#262d35; --sd-line-2:#333c46; --sd-field-line:#5f6b78;
    --sd-ink:#e6eaef; --sd-ink-2:#aeb8c2; --sd-mut:#9aa4ae;
    --sd-accent:#22d3ee; --sd-accent-ink:#04202e; --sd-accent-soft:#0f2c34; --sd-link:#22d3ee;
    --sd-cand:#e0a944; --sd-cand-bg:#2a2113; --sd-cand-line:#4d3c1b;
    --sd-hover-filter:brightness(1.18); --sd-mark:var(--sd-link);
  }
}
html[data-theme="dark"] .sd-body{
    color-scheme:dark;
    --sd-bg:#0f1317; --sd-surface:#161b21; --sd-line:#262d35; --sd-line-2:#333c46; --sd-field-line:#5f6b78;
    --sd-ink:#e6eaef; --sd-ink-2:#aeb8c2; --sd-mut:#9aa4ae;
    --sd-accent:#22d3ee; --sd-accent-ink:#04202e; --sd-accent-soft:#0f2c34; --sd-link:#22d3ee;
    --sd-cand:#e0a944; --sd-cand-bg:#2a2113; --sd-cand-line:#4d3c1b;
    --sd-hover-filter:brightness(1.18); --sd-mark:var(--sd-link);
}
.sd-body *, .sd-body *::before, .sd-body *::after{box-sizing:border-box}
.sd-body a:focus-visible{outline:2px solid var(--sd-link); outline-offset:2px}

/* —— 跳到正文：平时藏起来，用键盘落到它时才出现 —— */
.sd-skip{position:absolute; left:-9999px; top:0}
.sd-skip:focus{left:8px; top:8px; z-index:100; padding:8px 12px; border-radius:6px;
  background:var(--sd-surface); color:var(--sd-ink)}

/* ------------------------------------------------------------ 顶栏
   226 顶栏与页脚重做（指挥 10-17 09:13，docs/supervision/226-redesign/design-header-footer.md；LK 定「照样稿做」）：色、字号、间距照
   lead-walk/run-21-header-footer/mock.html 的 CSS，有出入以样稿为准。
   · 宽屏（1080 起）一行 64px：标志、服务导航（当前页底边一道 3px 的线贴着下沿）、外观按钮（点开小菜单）、Sign in／Sign out、实心的主按钮。
   · 窄于 1080：56px 的细栏（标志、主按钮、菜单按钮）＋ 细栏下面整屏一张的菜单（见下面「手机」那一段）。
   · 两种宽都吸顶（样稿如此；原来手机上不吸顶，是因为旧的手机顶栏有四行高，吸顶就吃掉手机屏的一大块）。
   · 深色时顶栏是深色表面、下沿一道线（不再是主色那一条）。顶栏与页脚自己的几样颜色单列一组变量，深浅两段逐字相同（站点测试核）。 */
.sd-body{
  --sd-bar:#1f3a5f; --sd-bar-ink:#ffffff; --sd-bar-ink-2:rgba(255,255,255,.78); --sd-bar-line:transparent; --sd-bar-hover:rgba(255,255,255,.10);
  --sd-bar-now:#22d3ee; --sd-bar-word:#ffffff; --sd-cta-bg:#22d3ee; --sd-cta-ink:#04202e;
  --sd-solid-bg:#22d3ee; --sd-solid-ink:#04202e; --sd-foot-bg:#ffffff; --sd-foot-word:#0f2a47; --sd-foot-slogan:#1e9bc4;
  --sd-seg-track:#eef1f4; --sd-seg-on:#ffffff;
  --sd-hex-a:#0b1f3a; --sd-hex-b:#1a3d62; --sd-hex-line:transparent; --sd-hex-width:0;
}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) .sd-body{
    --sd-bar:#121820; --sd-bar-ink:#e6eaef; --sd-bar-ink-2:#aeb8c2; --sd-bar-line:#262d35; --sd-bar-hover:rgba(255,255,255,.06);
    --sd-bar-now:#22d3ee; --sd-bar-word:#ffffff; --sd-cta-bg:#22d3ee; --sd-cta-ink:#04202e;
    --sd-solid-bg:#22d3ee; --sd-solid-ink:#04202e; --sd-foot-bg:#121820; --sd-foot-word:#ffffff; --sd-foot-slogan:#2ec4e6;
    --sd-seg-track:#0f1317; --sd-seg-on:#262d35;
    --sd-hex-a:#1b3f66; --sd-hex-b:#1b3f66; --sd-hex-line:#2a5a85; --sd-hex-width:1.3;
  }
}
html[data-theme="dark"] .sd-body{
    --sd-bar:#121820; --sd-bar-ink:#e6eaef; --sd-bar-ink-2:#aeb8c2; --sd-bar-line:#262d35; --sd-bar-hover:rgba(255,255,255,.06);
    --sd-bar-now:#22d3ee; --sd-bar-word:#ffffff; --sd-cta-bg:#22d3ee; --sd-cta-ink:#04202e;
    --sd-solid-bg:#22d3ee; --sd-solid-ink:#04202e; --sd-foot-bg:#121820; --sd-foot-word:#ffffff; --sd-foot-slogan:#2ec4e6;
    --sd-seg-track:#0f1317; --sd-seg-on:#262d35;
    --sd-hex-a:#1b3f66; --sd-hex-b:#1b3f66; --sd-hex-line:#2a5a85; --sd-hex-width:1.3;
}
/* 226 全站青色（LK 10-19 批 docs/parallel/agent2-redesign-226/4d-hero/accent.html 的样子与 palette-2 那张表；指挥 11:06）：按钮与链接换成横幅的青。
   · 实心按钮（站上的 .sd-btn、手机菜单的主按钮、登录页的主按钮、表单的按钮、顶栏的主按钮）：青底 --sd-solid-bg、深藏青字 --sd-solid-ink；
     浅色底上另有一道深一档的青边 --sd-solid-line（青底对白底只有 1.81:1，边对页面 4.95:1，按钮的形状靠它）。悬停、按下各一档，不再用亮度滤镜。
   · 链接、图标、勾、焦点框：浅色是深青（--sd-link 对白底 5.36:1），深色是横幅的青；链接悬停、按下各一档。
   · 顶栏本身（浅色时的藏青底、白的标志）、横幅、空心的次按钮、证据档的标签不动；橙只在横幅的时间线。
   单独一组变量（顶栏与页脚那一组站点测试 26.3 逐字钉着）；深色两段逐字相同（8.3）；对比度由站点测试第 30 节从这几段现算。 */
.sd-body{
  --sd-solid-line:#0e7490; --sd-solid-hover:#06b6d4; --sd-solid-active:#0891b2; --sd-cta-hover:#8ff3ff;
  --sd-link-hover:#155e75; --sd-link-active:#164e63;
}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) .sd-body{
    --sd-solid-line:#22d3ee; --sd-solid-hover:#8ff3ff; --sd-solid-active:#06b6d4; --sd-cta-hover:#8ff3ff;
    --sd-link-hover:#8ff3ff; --sd-link-active:#06b6d4;
  }
}
html[data-theme="dark"] .sd-body{
    --sd-solid-line:#22d3ee; --sd-solid-hover:#8ff3ff; --sd-solid-active:#06b6d4; --sd-cta-hover:#8ff3ff;
    --sd-link-hover:#8ff3ff; --sd-link-active:#06b6d4;
}
/* 226 会员价格页的历史图（Sourcing_Price_Chart；LK 10-18 批的样稿 mock-c12）：三种线的颜色 —— dataviz 参考调色板前三格，浅深各一套（样稿 README 里
   对浅色与深色两种卡片底核过）。单独一组变量（顶栏与页脚那一组站点测试 26.3 逐字钉着）；深色两段逐字相同（8.3）。 */
.sd-body{
  --sd-chart-1:#2a78d6; --sd-chart-2:#eb6834; --sd-chart-3:#1baf7a;
}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) .sd-body{
    --sd-chart-1:#3987e5; --sd-chart-2:#d95926; --sd-chart-3:#199e70;
  }
}
html[data-theme="dark"] .sd-body{
    --sd-chart-1:#3987e5; --sd-chart-2:#d95926; --sd-chart-3:#199e70;
}
/* 226 平板宽的菜单（指挥 10-18 13:39 定甲）：浮出那一块的阴影与后面压暗的那一层，浅深各一套。单独一组变量（顶栏与页脚那一组 26.3 逐字钉着）；
   深色两段逐字相同（8.3）。 */
.sd-body{
  --sd-menu-dim:rgba(16,24,40,.38); --sd-menu-shadow:0 18px 48px rgba(16,24,40,.24);
}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) .sd-body{
    --sd-menu-dim:rgba(0,0,0,.55); --sd-menu-shadow:0 18px 48px rgba(0,0,0,.55);
  }
}
html[data-theme="dark"] .sd-body{
    --sd-menu-dim:rgba(0,0,0,.55); --sd-menu-shadow:0 18px 48px rgba(0,0,0,.55);
}
.sd-top{position:sticky; top:0; z-index:40; background:var(--sd-bar); color:var(--sd-bar-ink); border-bottom:1px solid var(--sd-bar-line)}
/* 顶栏里的字只在词与词之间换行（全站是 overflow-wrap:anywhere；226 pricing-nav 看到过「Pricin / g」） */
.sd-top-in{max-width:1080px; height:64px; margin:0 auto; padding:0 24px; display:flex; align-items:center; gap:28px; overflow-wrap:normal}
.sd-brand{flex:none; display:flex; align-items:center; gap:10px; min-height:44px; color:inherit; text-decoration:none; white-space:nowrap}
/* 226 新标志（LK 10-23 01:1x 批 Concept A：六边形 ＋「4D SOURCING」字标；指挥：26–34 px 用不带字的小图）：两样都是内联 SVG（不引外部资源、不加载字体）；
   字标跟 currentColor，顶栏两种外观都是白字（--sd-bar-word）。尺寸照批的样子：六边形 34、字标 15 高 */
.sd-mark{flex:none; display:block}
/* 六边形：浅色外观照指挥画的（藏青渐变、没有边）；深色外观换深底版 —— 浅一点的深蓝加一道细边（指挥 10-22 转述的样稿）。颜色只在上面那几组变量里分深浅
   （--sd-hex-*；浅色主题的藏青顶栏上照原样：深底版在那里与顶栏几乎同色） */
.sd-hex-a{stop-color:var(--sd-hex-a)}
.sd-hex-b{stop-color:var(--sd-hex-b)}
.sd-hex{stroke:var(--sd-hex-line); stroke-width:var(--sd-hex-width)}
.sd-wm{display:block; flex:none}
.sd-wm-svg{display:block; height:100%; width:auto}
.sd-top .sd-mark{width:34px; height:34px}
.sd-top .sd-wm{height:15px; color:var(--sd-bar-word)}
.sd-nav{display:flex; align-items:stretch; gap:26px; height:64px; margin-left:12px}
.sd-nav a{position:relative; display:flex; align-items:center; color:var(--sd-bar-ink-2); text-decoration:none; font-size:15px; font-weight:500; white-space:nowrap}
.sd-nav a:hover, .sd-nav a[aria-current="page"]{color:var(--sd-bar-ink)}
.sd-nav a[aria-current="page"]::after{content:""; position:absolute; left:0; right:0; bottom:0; height:3px; border-radius:3px 3px 0 0; background:var(--sd-bar-now)}
.sd-account{flex:none; display:flex; align-items:center; gap:8px; margin-left:auto}
.sd-signin{display:inline-flex; align-items:center; height:40px; padding:0 12px; border-radius:10px; color:var(--sd-bar-ink-2); text-decoration:none;
  font-size:15px; font-weight:500; white-space:nowrap}
.sd-signin:hover{background:var(--sd-bar-hover); color:var(--sd-bar-ink)}
.sd-cta{display:inline-flex; align-items:center; height:38px; padding:0 16px; border-radius:10px; background:var(--sd-cta-bg); color:var(--sd-cta-ink);
  text-decoration:none; font-size:15px; font-weight:650; white-space:nowrap; box-shadow:0 1px 2px rgba(0,0,0,.12)}
.sd-cta:hover{background:var(--sd-cta-hover)}
.sd-cta:active{background:var(--sd-solid-active)}
.sd-top a:focus-visible, .sd-top button:focus-visible, .sd-top summary:focus-visible{outline:2px solid var(--sd-bar-ink); outline-offset:-2px}
.sd-top .sd-cta:focus-visible{outline-offset:2px}
/* 外观按钮与小菜单（Sourcing_Site::LOOK_POP；LK 10-14 的自动／浅／深）：没有脚本时整个藏着（hidden） */
.sd-look-pop{position:relative}
.sd-look-pop[hidden], .sd-look-menu[hidden]{display:none}
.sd-theme{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; margin:0; padding:0; border:0; border-radius:10px;
  background:transparent; color:var(--sd-bar-ink-2); cursor:pointer}
.sd-theme:hover{background:var(--sd-bar-hover); color:var(--sd-bar-ink)}
.sd-theme-icon{flex:none; display:block}
.sd-look-menu{position:absolute; right:0; top:48px; z-index:50; width:184px; padding:6px; border:1px solid var(--sd-line); border-radius:12px;
  background:var(--sd-surface); color:var(--sd-ink); box-shadow:0 12px 32px rgba(16,24,40,.18)}
.sd-look-h{margin:4px 10px 6px; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--sd-mut)}
.sd-look-items button{display:flex; align-items:center; justify-content:space-between; width:100%; height:40px; margin:0; padding:0 10px; border:0; border-radius:8px;
  background:transparent; color:var(--sd-ink); font:500 15px var(--sd-font); cursor:pointer}
.sd-look-items button:hover{background:var(--sd-bg)}
.sd-look-items button[aria-pressed="true"]{background:var(--sd-accent-soft)}
/* 选中的那一项打 ✓（读屏不读这个记号：后一种写法给它空的替代文字；不认的浏览器用前一种） */
.sd-look-items button[aria-pressed="true"]::after{content:"\2713"; content:"\2713" / ""; color:var(--sd-link); font-weight:700}
.sd-look-menu button:focus-visible{outline:2px solid var(--sd-link); outline-offset:-2px}
/* 顶栏吸顶以后，跳到页内某处（Skip to content、注册页错误摘要里的链接）时那一处不被顶栏挡住 */
.sd-body [id]{scroll-margin-top:80px}
/* 窗 1080–1199：照样稿的间距，开放注册（主按钮是 Create an account）以后，窗 1080、经典滚动条（页面 1063）时那一行只剩 0.14px 的余量（A1-70 在本机 Chrome、
   macOS 的字上直接量：要 1014.86、有 1015）—— 别的字体没量过。这一段把几块之间的空收到 20（服务之间照旧 26），留出约 16px；1200 起照样稿 */
@media (min-width:1080px) and (max-width:1199.98px){ .sd-top-in{gap:20px} }
/* Pricing 公开以后宽屏那一行多一项（header_html 给 sd-top-in 加 sd-top-long）：照样稿的间距放不下，收紧间距。
   226 顶栏字宽（指挥 10-23 19:4x 定 x3；A2 在线上直接量，docs/parallel/agent2-redesign-226/nav-fonts/）：换了新标志以后，没登录时这一行要 1121px（macOS 的字），
   比 1080 的顶栏宽，窗 1080–1112 时 Create an account 伸出窗口被切掉；Windows（Selawik 代 Segoe UI）要 1081，安卓（Roboto）要 1090。
   服务五项与 Sign in 收到 14px、服务之间 18 → 14；标志后面照旧空 16（几块之间 8 ＋ 服务那一组左边 8），服务与右边那几样之间最少 8。
   改了以后要 1066（macOS）、1023（Windows）、1032（安卓），余 14、40（窗 1080、常显滚动条）、48。标志、外观按钮、Create an account 都不动 */
@media (min-width:1080px){
  .sd-top-long{gap:8px}
  .sd-top-long .sd-nav{gap:14px; margin-left:8px}
  .sd-top-long .sd-nav a, .sd-top-long .sd-signin{font-size:14px}
  .sd-top-long .sd-account{gap:4px}
  .sd-top-long .sd-signin{padding:0 8px}
}
/* —— 手机（窄于 1080）：细栏 ＋ 整屏的菜单 ——
   226 手机顶栏（指挥 10-16 03:5x，design-mobile-header.md）起是细栏 ＋ <details> 菜单（没有脚本也能开关）；起初是 960，指挥 10-16 16:40 改成 1080（顶栏的最大宽度）。
   226 顶栏与页脚重做照样稿换样子：细栏 56px；菜单是细栏下面整屏一张（表面色），里面自己滚；菜单开着时细栏上的主按钮藏起来（菜单里有）、整页不跟着滚 ——
   有脚本时 <html> 上有 sd-menu-open（THEME_SWITCH_JS），没有脚本时靠下面另写的 :has() 那两条。可点的都不小于 44px；不加动画。 */
.sd-mbar{display:none}
@media (max-width:1079.98px){
  .sd-top-in{height:56px; gap:12px; padding:0 16px}
  .sd-nav, .sd-account{display:none}
  /* 一行放不下字标时只留六边形（规格：窄的时候字藏起来，读屏照样读 aria-label）：字标整块掉到第二行、被 44px 的高藏起来（第一行有六边形与上下各 9 的边，
     正好 44 高；字标在这一行里居中）—— 不写死在哪个宽度藏，照样是「整块在或整块不在」，不折行、不横向滚。
     226 新标志（指挥 10-23 01:2x 定）：手机上缩一号 —— 六边形 26、字标 9 高；390 宽、细栏上是 Create an account 时也放得下（A2 量的 130 px） */
  .sd-brand{flex:0 1 auto; min-width:44px; height:44px; overflow:hidden; flex-wrap:wrap; align-content:flex-start; gap:0 10px}
  .sd-top .sd-mark{width:26px; height:26px; margin:9px 0}
  .sd-top .sd-wm{height:9px}
  .sd-mbar{display:flex; flex:none; align-items:center; gap:8px; margin-left:auto}
  /* 细栏上的主按钮：看得见的高 36，点按区上下各多 4（44） */
  .sd-mact{position:relative; height:36px; padding:0 14px; font-size:14.5px}
  .sd-mact::after{content:""; position:absolute; left:0; right:0; top:-4px; bottom:-4px}
  .sd-menu-open .sd-mact{display:none}
  .sd-menu-open{overflow:hidden}
  .sd-menu > summary{list-style:none; display:flex; align-items:center; justify-content:center; width:44px; height:44px; margin-right:-6px;
    border-radius:10px; color:var(--sd-bar-ink); cursor:pointer}
  .sd-menu > summary::-webkit-details-marker{display:none}
  .sd-menu > summary:hover{background:var(--sd-bar-hover)}
  .sd-menu-x, .sd-menu[open] .sd-menu-icon{display:none}
  .sd-menu[open] .sd-menu-x{display:block}
  /* 菜单从细栏（56 ＋ 下沿 1px 的线）下面开始：深色时那一道线照样稿露着；上边距少 1px，里面各项的位置与样稿一样 */
  .sd-menu-panel{position:fixed; left:0; right:0; top:57px; bottom:0; z-index:39; overflow:auto; overscroll-behavior:contain;
    padding:7px 16px 28px; background:var(--sd-surface); color:var(--sd-ink)}
  .sd-menu-h{margin:18px 4px 8px; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--sd-mut)}
  /* Services 每一行：40px 的图标方块、名字与一行说明、右箭头；当前页整行浅底、名字用链接色、图标方块换成表面色 */
  .sd-svc{display:grid; grid-template-columns:40px minmax(0,1fr) 16px; column-gap:14px; align-items:center; min-height:68px; padding:10px 8px;
    border-radius:12px; color:var(--sd-ink); text-decoration:none}
  .sd-svc + .sd-svc{margin-top:2px}
  .sd-svc-ic{display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; background:var(--sd-accent-soft); color:var(--sd-link)}
  .sd-svc-ic .sd-icon{width:22px; height:22px; color:inherit}
  .sd-svc-t{display:block; min-width:0}
  .sd-svc-n{display:block; font-size:16px; font-weight:650; line-height:1.3}
  .sd-svc-d{display:block; font-size:13.5px; line-height:1.4; color:var(--sd-mut)}
  .sd-chev{display:block; color:var(--sd-mut)}
  .sd-svc[aria-current="page"]{background:var(--sd-accent-soft)}
  .sd-svc[aria-current="page"] .sd-svc-n{color:var(--sd-link)}
  .sd-svc[aria-current="page"] .sd-svc-ic{background:var(--sd-surface)}
  /* 两个一样宽的按钮（描边 ＋ 实心）；只有一项时占整行；字放不下时在按钮里折行，不撑出去 */
  .sd-menu-acct{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:20px 4px 0}
  .sd-menu-acct > :only-child{grid-column:1 / -1}
  .sd-mbtn{display:flex; align-items:center; justify-content:center; min-height:46px; padding:4px 12px; border:1px solid var(--sd-line-2); border-radius:10px;
    color:var(--sd-ink); text-decoration:none; text-align:center; font-size:15.5px; font-weight:650; line-height:1.25}
  .sd-mbtn-main{border-color:var(--sd-solid-line); background:var(--sd-solid-bg); color:var(--sd-solid-ink)}
  .sd-mbtn-main:hover{background:var(--sd-solid-hover)}
  .sd-mbtn-main:active{background:var(--sd-solid-active)}
  /* 最下面一行：Appearance 与三格（高 36，点按区上下各多 4；选中的一格凸起） */
  .sd-menu-look{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:22px 4px 0; padding-top:18px; border-top:1px solid var(--sd-line)}
  .sd-menu-look[hidden]{display:none}
  .sd-menu-look-k{font-size:14.5px; font-weight:500; color:var(--sd-ink-2)}
  .sd-look{display:inline-flex; padding:3px; border:1px solid var(--sd-line); border-radius:10px; background:var(--sd-seg-track)}
  .sd-look button{position:relative; height:36px; min-width:64px; margin:0; padding:0 12px; border:0; border-radius:8px; background:transparent;
    color:var(--sd-ink-2); font:500 14px var(--sd-font); cursor:pointer}
  .sd-look button::after{content:""; position:absolute; left:0; right:0; top:-4px; bottom:-4px}
  .sd-look button[aria-pressed="true"]{background:var(--sd-seg-on); color:var(--sd-ink); box-shadow:0 1px 2px rgba(16,24,40,.12)}
  .sd-menu-panel a:focus-visible, .sd-menu-panel button:focus-visible{outline:2px solid var(--sd-link); outline-offset:2px}
}
/* 窄于 382：菜单里那两个按钮并排放不下（320 时 Request access、360 时 Create an account 都在按钮里折成两行，A1-70 截图）—— 上下叠着、各占整行（照旧一样宽） */
@media (max-width:381.98px){ .sd-menu-acct{grid-template-columns:1fr} }
/* 窄于 340：Appearance 那一行放不下三格各 64（320 时三格伸出那一行 14px，A1-70 直接量）—— 每格收到 56、左右 8 */
@media (max-width:339.98px){ .sd-look button{min-width:56px; padding:0 8px} }
/* 平板宽（窗至少 640 宽、至少 600 高、窄于 1080；指挥 10-18 13:39 定甲，样稿 docs/parallel/agent2-redesign-226/tablet-menu/）：菜单是细栏下面靠右浮出的
   一块 —— 宽 400、高照内容（最高到窗底留 12），圆角、细边、阴影，与宽屏的外观小菜单是一家；后面整页压暗，点压暗的地方关上、焦点回菜单按钮
   （THEME_SWITCH_JS）。没有脚本时压暗照出、点它不关，× 照样关。手机（窄于 640，或横着拿、高不到 600）照旧整屏一张：横着拿时两种都要在菜单里滚，
   整屏的看得到的更多。 */
@media (min-width:640px) and (min-height:600px) and (max-width:1079.98px){
  .sd-menu-panel{left:auto; right:12px; top:65px; bottom:auto; width:400px; max-height:calc(100vh - 77px); max-height:calc(100dvh - 77px);
    padding:4px 14px 18px; border:1px solid var(--sd-line); border-radius:14px; box-shadow:var(--sd-menu-shadow)}
  .sd-menu[open]::before{content:""; position:fixed; left:0; right:0; top:57px; bottom:0; z-index:38; background:var(--sd-menu-dim)}
}
/* 没有脚本时（<html> 上没有 sd-menu-open）：菜单开着照样藏细栏上的主按钮、整页不跟着滚。另写一段 —— 不认 :has() 的浏览器只丢这两条 */
@media (max-width:1079.98px){
  .sd-mbar:has(> .sd-menu[open]) > .sd-mact{display:none}
  html:has(.sd-menu[open]){overflow:hidden}
}

/* ------------------------------------------------------------ 正文 */
.sd-main{flex:1 0 auto; width:100%; max-width:1080px; margin:0 auto; padding:20px 16px 48px}
@media (min-width:860px){ .sd-main{padding:40px 24px 64px} }
/* 买家页的按钮（.sourcing-buyer-button）自己定颜色：A2-2 截图里被这条盖成深底蓝字、看不清 */
.sd-main a:not(.sd-btn):not(.sourcing-buyer-button){color:var(--sd-link)}
/* 226 全站青色：链接悬停、按下各一档。:where() 让这两条与上面那一条一样分量、排在后面 —— 只盖它，盖不过自己另有颜色、分量更重的那些链接 */
.sd-main a:not(.sd-btn):not(.sourcing-buyer-button):where(:hover){color:var(--sd-link-hover)}
.sd-main a:not(.sd-btn):not(.sourcing-buyer-button):where(:active){color:var(--sd-link-active)}
.sd-main h2{font-family:var(--sd-display); font-size:24px; line-height:1.2; font-weight:750; letter-spacing:-.01em; margin:40px 0 14px}
.sd-main h3{font-size:18px; line-height:1.3; font-weight:650}
.sd-main p{margin:0 0 12px}
.sd-mut{color:var(--sd-mut); font-size:14.5px}
@media (min-width:860px){ .sd-main h2{font-size:28px} }

/* —— 按钮（链接做成的）：触控 44px —— */
.sd-btn{
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
  min-height:44px; padding:0 18px; border-radius:8px; border:1px solid var(--sd-solid-line);
  background:var(--sd-solid-bg); color:var(--sd-solid-ink); text-decoration:none;   /* 226 全站青色（LK 10-19 批）：青底深藏青字，浅色时边深一档 */
  font-weight:600; font-size:15px; line-height:1.25;
}
.sd-btn:not(.sd-btn-secondary):hover{background:var(--sd-solid-hover)}
.sd-btn:not(.sd-btn-secondary):active{background:var(--sd-solid-active)}
.sd-btn-secondary{background:var(--sd-surface); color:var(--sd-ink); border-color:var(--sd-line-2)}
.sd-btn-secondary:hover{filter:none; background:var(--sd-bg)}
.sd-btn-small{min-height:36px; padding:0 12px; font-size:14px}

/* ============================================================ 首页（首页二改：docs/supervision/226-redesign/design-home2.md，指挥 10-14）
   只靠排版：不用背景图、不用渐变。节与节之间 72px（手机 48）；各节标题展示字 28/1.2；正文 17/1.6；卡片 1px 线、12px 圆角、极淡的阴影。 */

/* 主视觉：单列文字、最宽 640px、左对齐，右边什么都不放；上下留白各约 96px（手机约 56，含正文区本来的上边距） */
.sd-hero{padding:36px 0 8px}
.sd-hero-text{max-width:640px}
.sd-eyebrow{margin:0 0 12px !important; font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--sd-mut)}
.sd-hero h1{font-family:var(--sd-display); font-size:34px; line-height:1.12; letter-spacing:-.018em; font-weight:800; margin:0 0 16px}
.sd-lede{font-size:17px; line-height:1.6; color:var(--sd-ink-2); margin:0 !important}
.sd-actions{display:flex; flex-wrap:wrap; gap:10px; margin:28px 0 0 !important}
/* 226 第四波 a：按钮下面那一行「Don't have an account? Request access / Create an account」 */
.sd-access{margin:16px 0 0 !important; font-size:15px; color:var(--sd-ink-2)}
.sd-access a{display:inline-block; padding:4px 0}
@media (min-width:860px){
  .sd-hero{padding:56px 0 24px}
  .sd-hero h1{font-size:46px}
  .sd-lede{font-size:19px}
}

/* 各节：间距、标题、正文 */
.sd-services, .sd-excerpt, .sd-how, .sd-files{margin-top:48px}
@media (min-width:860px){ .sd-services, .sd-excerpt, .sd-how, .sd-files{margin-top:72px} }
.sd-services > h2, .sd-excerpt-head > h2, .sd-how > h2, .sd-files-text > h2{margin:0 0 20px; font-size:28px; line-height:1.2}
.sd-card p, .sd-excerpt-sub, .sd-qa td p, .sd-steps li, .sd-files-text p{font-size:17px; line-height:1.6}

/* —— What we do：三张卡（手机一列，宽屏三列）：图标与标题、一句承诺、「You receive」一行、按钮贴底 —— */
.sd-cards{display:grid; grid-template-columns:1fr; gap:16px; align-items:stretch}
@media (min-width:860px){ .sd-cards{grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px} }
.sd-card{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; padding:22px;
  background:var(--sd-surface); border:1px solid var(--sd-line); border-radius:12px;
  box-shadow:var(--sd-shadow); transition:box-shadow .15s ease;
}
.sd-card::before{content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--sd-accent); opacity:0; transition:opacity .15s ease}
.sd-card:hover{box-shadow:var(--sd-shadow-hover)}
.sd-card:hover::before{opacity:1}
@media (min-width:860px){ .sd-card{padding:26px} }
.sd-card-head{display:flex; align-items:center; gap:10px; margin:0 0 12px}
.sd-icon{flex:none; color:var(--sd-mark)}
.sd-card h3{font-size:19px; line-height:1.3; margin:0}
.sd-card p{color:var(--sd-ink-2); margin:0 0 14px}
.sd-card p.sd-receive{margin:0 0 22px; padding-top:14px; border-top:1px solid var(--sd-line); font-size:15.5px; color:var(--sd-ink)}
.sd-receive b{font-weight:650}
.sd-card-action{margin:auto 0 0 !important}
.sd-soon{display:inline-flex; align-items:center; min-height:44px; padding:0 14px;
  border:1px dashed var(--sd-line-2); border-radius:8px; color:var(--sd-mut); font-size:15px}

/* —— A report, up close：示例工厂核验的三行问答（样式照成品的 Short answers 表：只留横线、问题一栏浅底；手机上一行一张卡）—— */
.sd-excerpt-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 8px}
.sd-excerpt-head > h2{margin:0}
.sd-excerpt-sub{color:var(--sd-ink-2); margin:0 0 20px !important; max-width:62ch}
.sd-qa-wrap{background:var(--sd-surface); border:1px solid var(--sd-line); border-radius:12px; overflow:hidden; box-shadow:var(--sd-shadow)}
.sd-qa{width:100%; border-collapse:collapse}
.sd-qa th, .sd-qa td{padding:18px 20px; text-align:left; vertical-align:top; border-bottom:1px solid var(--sd-line)}
.sd-qa tr:last-child th, .sd-qa tr:last-child td{border-bottom:0}
.sd-qa th{width:30%; font-size:16px; font-weight:650; line-height:1.45; color:var(--sd-ink); background:var(--sd-bg)}
.sd-qa td p{margin:0 0 10px; color:var(--sd-ink-2)}
.sd-excerpt-note{margin:12px 0 0 !important; font-size:14px; color:var(--sd-mut)}
@media (max-width:640px){
  .sd-qa, .sd-qa tbody, .sd-qa tr, .sd-qa th, .sd-qa td{display:block; width:auto}
  .sd-qa tr{border-bottom:1px solid var(--sd-line)}
  .sd-qa tr:last-child{border-bottom:0}
  .sd-qa th{padding:16px 18px 6px; background:none; border-bottom:0}
  .sd-qa td{padding:0 18px 16px; border-bottom:0}
}

/* —— How it works：三格（宽屏横排），左上大号序号（CSS 计数，不进看得见的字）；卡片高度由内容决定，不强行等高 —— */
.sd-steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:12px; counter-reset:sdstep; align-items:start}
.sd-steps li{counter-increment:sdstep; position:relative; margin:0; padding:18px 20px 18px 62px;
  background:var(--sd-surface); border:1px solid var(--sd-line); border-radius:12px; color:var(--sd-ink-2)}
.sd-steps li b{display:block; color:var(--sd-ink); font-weight:650; margin-bottom:4px}
.sd-steps li::before{content:counter(sdstep); position:absolute; left:22px; top:14px; font:750 28px/1 var(--sd-display); color:var(--sd-mark)}
@media (min-width:860px){
  .sd-steps{grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
  .sd-steps li{padding:58px 24px 24px}
  .sd-steps li::before{left:24px; top:20px}
}

/* —— Supplier files：浅底色带，左文右按钮 —— */
.sd-files{padding:24px 22px; background:var(--sd-accent-soft); border-radius:12px;
  display:flex; flex-direction:column; gap:6px}
.sd-files-text p:last-child{margin-bottom:0}
.sd-files-action{margin:8px 0 0 !important}
@media (min-width:860px){
  .sd-files{flex-direction:row; align-items:center; justify-content:space-between; gap:32px; padding:32px 36px}
  .sd-files-text{max-width:62ch}
  .sd-files-action{margin:0 !important; flex:none}
}

/* —— 统一的「Sample」徽标（226 §2.1） —— */
.sd-sample, .sd-role{display:inline-block; padding:0 8px; border-radius:999px; vertical-align:2px;
  font-size:12px; font-weight:650; letter-spacing:.02em; line-height:1.7;
  color:var(--sd-cand); background:var(--sd-cand-bg); border:1px solid var(--sd-cand-line)}

/* —— 一般页面（短代码页）与找不到的页面 —— */
.sd-page{max-width:50rem}
.sd-title{font-family:var(--sd-display); font-size:32px; line-height:1.15; letter-spacing:-.018em; font-weight:800; margin:0 0 16px}
@media (min-width:860px){ .sd-title{font-size:36px} }
/* 226 指挥 10:38：表单与价格信息页的大标题上面一行「← My account」，与大标题挨着 */
.sd-back{margin:0 0 6px}
.sd-content > :first-child{margin-top:0}
/* 买家页在本主题里放宽到 48rem：在线读报告的框在宽屏上不至于太窄（A2-2 截图里 40rem 只有页面的一半） */
.sd-content .sourcing-buyer{margin-left:0; margin-right:0; max-width:48rem}
/* —— 226 账户那一块（LK 10-20 批）：买家页的每一种视图（page_html 给 article 加 sd-wide）；每一处为什么这样写见 class-site.php 的 page_html 说明 */
.sd-page.sd-wide{max-width:none}
.sd-wide .sd-content .sourcing-buyer{max-width:none}
.sd-wide .sourcing-buyer-form:not(.spc-form){max-width:46rem}
.sd-wide .sourcing-buyer .sourcing-buyer-button:not(.sourcing-buyer-quiet):not(:is(.sgs, .srw) *){display:inline-flex; align-items:center; justify-content:center; width:auto; min-width:0;
  min-height:44px; padding:0 18px; font-size:15px; line-height:1.25; border:1px solid var(--sb-solid-line); box-shadow:none}
.sd-wide .sourcing-buyer .sourcing-buyer-button.sourcing-buyer-secondary:not(:is(.sgs, .srw) *){border-color:var(--sb-line-2)}
@media (max-width:639.98px){ .sd-wide .sourcing-buyer .sourcing-buyer-button:not(.sourcing-buyer-quiet):not(:is(.sgs, .srw) *){display:flex; width:100%} }
.sd-wide .sourcing-buyer .sourcing-buyer-reader-bar .sourcing-buyer-button{display:inline-flex; width:auto; min-height:36px; padding:0 12px; font-size:14px}
.sd-wide .sourcing-buyer :is(.sas-actions, .sbp-signin){display:flex; flex-wrap:wrap; gap:10px; margin:12px 0 0}
.sd-wide .sourcing-buyer :is(.sas-actions, .sbp-signin) .sourcing-buyer-button{margin:0}
.sd-wide .sourcing-buyer :is(.sourcing-buyer-checks, .sbp-cols) .sourcing-buyer-title{font-family:var(--sd-display, inherit); font-size:22px; line-height:1.3; font-weight:750;
  letter-spacing:-.01em; margin:36px 0 12px; color:var(--sb-ink)}
.sd-wide .sourcing-buyer > .sourcing-buyer-checks:first-child > .sourcing-buyer-title{margin-top:0}
.sd-wide .sbp-kinds{display:grid; grid-template-columns:minmax(0,1fr); gap:12px}
@media (min-width:760px){ .sd-wide .sbp-kinds{grid-template-columns:repeat(3,minmax(0,1fr))} }
/* 226 公司深度报告（A2；指挥 10-23 16:51 第 1 条）：四种次数时两张一行、两行（sbp-kinds-4，Sourcing_Buyer_Portal::checks_block 给） */
@media (min-width:760px){ .sd-wide .sbp-kinds-4{grid-template-columns:repeat(2,minmax(0,1fr))} }
.sd-wide .sbp-kinds .sourcing-buyer-kind{display:flex; flex-direction:column; justify-content:space-between; gap:10px; margin:0; padding:18px 20px;
  border:1px solid var(--sb-line); border-radius:10px; background:var(--sb-surface)}
.sd-wide .sbp-kinds .sourcing-buyer-kind p{margin:0}
.sd-wide .sbp-cols{display:grid; grid-template-columns:minmax(0,1fr); gap:0 28px; align-items:start}
@media (min-width:1080px){ .sd-wide .sbp-cols{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)} }
.sd-wide .sbp-cols .sourcing-buyer-list{margin-top:0}
@media (min-width:1080px){
  .sd-wide .sbp-col-side .sas-dl{grid-template-columns:minmax(0,1fr); row-gap:2px}
  .sd-wide .sbp-col-side .sas-dl dt{margin:10px 0 0; font-size:.85rem}
  .sd-wide .sbp-col-side .sas-dl dt:first-child{margin-top:0}
}
.sd-body .sourcing-buyer .sbp-cancel > summary:focus-visible{outline:2px solid var(--sd-link); outline-offset:2px}
/* —— 226 动效与质感（LK 10-20 批）：全站都要的那一截；放在「226 三页」前面（那一段起不许字面的颜色，site-theme-test 9.22）；每一处为什么这样写见 class-motion.php 的类说明 */
:root{--sd-ease-out:cubic-bezier(.23,1,.32,1); --sd-ease-io:cubic-bezier(.77,0,.175,1)}
.sd-body details{interpolate-size:allow-keywords}
.sd-body :is(h1, h2, h3, .sd-4d-title){text-wrap:balance}
.sd-body :is(p, li, dd){text-wrap:pretty}
.sd-title{line-height:1.08; letter-spacing:-.02em}
.sd-body :is(table, .pc, .pp-hist, .sh-board, .sourcing-buyer-credits){font-variant-numeric:tabular-nums}
:is(.sd-btn, .sd-4d-btn, .sd-cta, .sd-signin, .sd-mbtn, .pp-follow-btn, .sd-body .sourcing-buyer-button, .sd-body .srg-ex, body.login .button-primary){transition:transform 160ms var(--sd-ease-out)}
:is(.sd-btn, .sd-4d-btn, .sd-cta, .sd-signin, .sd-mbtn, .pp-follow-btn, .sd-body .sourcing-buyer-button, .sd-body .srg-ex, body.login .button-primary):active{transform:scale(.97)}
.sd-btn:not(.sd-btn-secondary), .sd-4d-btn:not(.sd-4d-btn-2), .sd-mbtn-main, html body.login.sd-body .button-primary,
.sd-wide .sourcing-buyer .sourcing-buyer-button:not(.sourcing-buyer-secondary):not(.sourcing-buyer-quiet):not(:is(.sgs, .srw) *){box-shadow:inset 0 1px 0 rgb(255 255 255/.14)}
.sd-cta{box-shadow:inset 0 1px 0 rgb(255 255 255/.14), 0 1px 2px rgba(0,0,0,.12)}
.sd-main :is(p, li, dd, td, small, figcaption, .sd-back) a:not([class]), .sd-foot-contact a, .sd-foot li a{text-decoration:none; -webkit-box-decoration-break:clone; box-decoration-break:clone;
  background:linear-gradient(currentColor, currentColor) 0 100%/0 1.5px no-repeat, linear-gradient(color-mix(in srgb, currentColor 38%, transparent), color-mix(in srgb, currentColor 38%, transparent)) 0 100%/100% 1px no-repeat}
.sd-foot li a{background-size:0 1.5px, 0 0; background-position:0 calc(100% - 5px)}
:is(.sd-main :is(p, li, dd, td, small, figcaption, .sd-back) a:not([class]), .sd-foot-contact a, .sd-foot li a):focus-visible{background-size:100% 1.5px, 100% 1px}
.sd-nav a:not([aria-current=page])::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px 2px 0 0; background:var(--sd-bar-now); opacity:.55;
  transform:scaleX(0); transform-origin:left}
.sd-nav a:not([aria-current=page]):focus-visible::after{transform:none}
.sd-card{position:relative}
.sd-card-action a::after{content:""; position:absolute; inset:0; border-radius:inherit}
.sd-card::before{display:none}
:is(.sd-card, a.pp-item, .sourcing-buyer-list > li:has(> .sourcing-buyer-item-title)){position:relative}
:is(.sd-card, a.pp-item, .sourcing-buyer-list > li:has(> .sourcing-buyer-item-title))::after{content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; opacity:0;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--sd-accent) 50%, transparent), 0 10px 28px -8px rgb(16 24 40/.2), 0 2px 6px rgb(16 24 40/.06)}
.sourcing-buyer-list > li > .sourcing-buyer-item-title::after{content:""; position:absolute; inset:0}
.sd-body details:not(.sd-menu)::details-content{block-size:0; overflow:clip; opacity:0; transition:opacity 150ms ease, block-size 0s 150ms, content-visibility 0s 150ms allow-discrete}
.sd-body details:not(.sd-menu)[open]::details-content{block-size:auto; opacity:1; transition:block-size 250ms var(--sd-ease-out), opacity 250ms var(--sd-ease-out), content-visibility 0s allow-discrete}
.sd-body details:not(.sd-menu)[open] > :not(summary){animation:sd-open 250ms var(--sd-ease-out) backwards}
@keyframes sd-open{from{opacity:0; transform:translateY(8px); filter:blur(2px)}}
:is(.pc-table, .spc, .sbp-cancel) > summary::after{content:""; display:inline-block; width:6px; height:6px; margin:0 4px 3px 10px; border:solid currentColor; border-width:0 1.8px 1.8px 0;
  transform:scaleY(1) rotate(45deg); transition:transform 250ms var(--sd-ease-out)}
:is(.pc-table, .spc, .sbp-cancel)[open] > summary::after{transform:scaleY(-1) rotate(45deg); margin-bottom:-3px}
.sd-menu::details-content{opacity:0; transition:opacity 150ms ease, content-visibility 150ms allow-discrete}
.sd-menu[open]::details-content{opacity:1; transition-duration:200ms}
@starting-style{.sd-menu[open]::details-content{opacity:0}}
.sd-menu[open] :is(.sd-svc, .sd-mbtn){animation:sd-up 250ms var(--sd-ease-out) backwards}
.sd-menu[open] .sd-svc:nth-of-type(2){animation-delay:40ms}.sd-menu[open] .sd-svc:nth-of-type(3){animation-delay:80ms}.sd-menu[open] .sd-svc:nth-of-type(4){animation-delay:120ms}
.sd-menu[open] .sd-mbtn{animation-delay:160ms}.sd-menu[open] .sd-mbtn + .sd-mbtn{animation-delay:200ms}
@keyframes sd-up{from{opacity:0; transform:translateY(12px)}}
.sd-look-menu{transform-origin:top right; transition:opacity 150ms ease, transform 150ms var(--sd-ease-out), display 150ms allow-discrete}
.sd-look-menu[hidden]{opacity:0; transform:scale(.97)}
.sd-look-menu:not([hidden]){transition-duration:200ms}
@starting-style{.sd-look-menu:not([hidden]){opacity:0; transform:scale(.97)}}
html.sd-js .sd-look-pop[hidden]{display:block; visibility:hidden}
.sd-switching, .sd-switching *, .sd-switching *::before, .sd-switching *::after{transition:none !important}
@media (hover:hover) and (pointer:fine){
  :is(.sd-btn, .sd-4d-btn, .sd-cta, .sd-signin, .sd-mbtn, .pp-follow-btn, .sd-body .sourcing-buyer-button, .sd-body .srg-ex, body.login .button-primary){transition:transform 160ms var(--sd-ease-out), background-color 150ms ease, border-color 150ms ease, color 150ms ease}
  :is(.sd-main :is(p, li, dd, td, small, figcaption, .sd-back) a:not([class]), .sd-foot-contact a, .sd-foot li a){transition:background-size 280ms var(--sd-ease-out)}
  :is(.sd-main :is(p, li, dd, td, small, figcaption, .sd-back) a:not([class]), .sd-foot-contact a, .sd-foot li a):hover{background-size:100% 1.5px, 100% 1px}
  .sd-nav a::after{transition:transform 280ms var(--sd-ease-out)}
  .sd-nav a:not([aria-current=page]):hover::after{transform:none}
  :is(.sd-card, a.pp-item, .sourcing-buyer-list > li:has(> .sourcing-buyer-item-title))::after{transition:opacity 150ms ease}
  :is(.sd-card, a.pp-item, .sourcing-buyer-list > li:has(> .sourcing-buyer-item-title)):hover::after{opacity:1}
  :is(.sd-card, a.pp-item):hover{box-shadow:var(--sd-shadow)}
}
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .sd-top{view-transition-name:sd-top}
  ::view-transition-group(sd-top), ::view-transition-old(sd-top), ::view-transition-new(sd-top){animation:none}
  ::view-transition-old(root){animation:150ms ease both sd-vt-out}
  ::view-transition-new(root){animation:250ms var(--sd-ease-out) both sd-vt-in}
}
@keyframes sd-vt-out{to{opacity:0}}
@keyframes sd-vt-in{from{opacity:0; transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){
  .sd-body *, .sd-body *::before, .sd-body *::after{animation-duration:1ms !important; animation-delay:0s !important}
  :is(.sd-btn, .sd-4d-btn, .sd-cta, .sd-signin, .sd-mbtn, .pp-follow-btn, .sd-body .sourcing-buyer-button, .sd-body .srg-ex, body.login .button-primary):active{transform:none}
  :is(.sd-main :is(p, li, dd, td, small, figcaption, .sd-back) a:not([class]), .sd-foot-contact a, .sd-foot li a, .sd-nav a::after){transition:none !important}
  .sd-body details:not(.sd-menu)::details-content{transition:none}
  .sd-look-menu, .sd-look-menu[hidden]{transform:none !important; transition-property:opacity !important; transition-duration:200ms !important}
  @starting-style{.sd-look-menu:not([hidden]){transform:none}}
}
@media (prefers-contrast:more){
  .sd-body{--sd-line:#8a949e; --sd-line-2:#6c7781; --sd-ink-2:var(--sd-ink); --sd-mut:#3b4652}
  :is(.sd-card, a.pp-item, .sourcing-buyer-list > li:has(> .sourcing-buyer-item-title))::after{box-shadow:0 0 0 2px var(--sd-accent)}
}
@media (prefers-contrast:more) and (prefers-color-scheme:dark){ html:not([data-theme="light"]) body.sd-body{--sd-line:#6b7682; --sd-line-2:#87929d; --sd-mut:#c5ced7} }
@media (prefers-contrast:more){ html[data-theme="dark"] body.sd-body{--sd-line:#6b7682; --sd-line-2:#87929d; --sd-mut:#c5ced7} }

/* —— 226 隐私说明与使用条款（指挥 10-15 09:53）：律师看过的原文照 Markdown 的几种写法排（Sourcing_Legal::render）。
   表格与 Find top factories 的表同一种样子；手机上表头收起、一行排成一块，每一格前面标上它那一列的名字（data-label） —— 四列的 cookie 表才读得下 */
.sd-legal{max-width:46rem; line-height:1.6}
.sd-legal-updated{margin:0 0 20px; color:var(--sd-mut)}
.sd-legal h2{font-family:var(--sd-display); font-size:22px; line-height:1.25; font-weight:750; margin:32px 0 10px}
.sd-legal ul{padding-left:1.25em}
.sd-legal li{margin:0 0 8px}
/* cookie 名不在词中间折开（截图 shoot-3 宽屏上第一列把 wordpress_test_cookie 折成两半）：宽屏上表会给这一列让出宽度；手机上一行一块，放得下 */
.sd-legal code{font-size:.92em; white-space:nowrap}
/* 句子里的邮箱链接手机上要点得到（≥ 24px）：与 Request access 的句中链接同一个做法（.sra-link）；截图 shoot-2 量出原来只有 18px */
.sd-legal a{display:inline-block; padding:4px 0}
.sd-legal-table{margin:0 0 16px; background:var(--sd-surface); border:1px solid var(--sd-line); border-radius:10px; overflow:hidden}
.sd-legal table{width:100%; border-collapse:collapse; font-size:15px; line-height:1.45}
.sd-legal th, .sd-legal td{padding:10px 14px; text-align:left; vertical-align:top; border-bottom:1px solid var(--sd-line); overflow-wrap:break-word}
.sd-legal thead th{font-size:13px; font-weight:650; color:var(--sd-mut); background:var(--sd-bg)}
.sd-legal td{color:var(--sd-ink-2)}
.sd-legal tbody tr:last-child > *{border-bottom:0}
@media (max-width:640px){
  .sd-legal thead{display:none}
  .sd-legal table, .sd-legal tbody, .sd-legal tr, .sd-legal td{display:block}
  .sd-legal tr{padding:10px 12px; border-bottom:1px solid var(--sd-line)}
  .sd-legal tbody tr:last-child{border-bottom:0}
  .sd-legal td{padding:2px 0; border-bottom:0}
  .sd-legal td::before{content:attr(data-label); display:block; font-size:13px; font-weight:650; color:var(--sd-mut)}
  .sd-legal td + td{margin-top:6px}
}

/* ------------------------------------------------------------ 页脚
   226 顶栏与页脚重做（design-header-footer.md 第三节，照样稿）：表面色底（深色 #121820）、上沿一道线。宽屏四栏（品牌一块 2.1fr，Services、Account、Legal 各 1fr）；
   小标题 12px 大写加字距；最下一行（上面一道线）是 © 年与运营的公司、所在地。窄于 1080：品牌一块占整宽，下面两栏（左 Services，右 Account 与 Legal 叠着），
   每个链接不小于 44px 高。 */
.sd-foot{background:var(--sd-foot-bg); border-top:1px solid var(--sd-line); color:var(--sd-ink-2)}
.sd-foot-in{max-width:1080px; margin:0 auto; padding:0 24px}
.sd-foot-grid{display:grid; grid-template-columns:minmax(0,2.1fr) repeat(3, minmax(0,1fr)); gap:32px; padding:56px 0 40px}
.sd-foot-name{display:inline-flex; align-items:center; gap:10px; min-height:44px; text-decoration:none; white-space:nowrap}
/* 226 新标志：页脚是整套 —— 六边形 34、字标 15 高（浅色 #0f2a47、深色白），下面一行口号（LK 10-23：口号只放页脚；8.5px、字距 .25em，浅色 #1e9bc4、深色 #2ec4e6） */
.sd-foot .sd-mark{width:34px; height:34px}
.sd-lockup{display:flex; flex-direction:column; justify-content:center; gap:5px; min-width:0}
.sd-foot .sd-wm{height:15px; color:var(--sd-foot-word)}
.sd-slogan{display:block; font:700 8.5px/1 var(--sd-font); letter-spacing:.25em; color:var(--sd-foot-slogan)}
.sd-foot-tag{margin:10px 0 0; max-width:300px; font-size:14.5px; line-height:1.55; color:var(--sd-mut)}
.sd-foot-contact{margin:4px 0 0; font-size:14.5px; line-height:1.55}   /* 226 联系邮箱：一句话下面，照页脚链接的高（宽屏 32、窄屏 44） */
.sd-foot-contact a{display:inline-flex; align-items:center; min-height:32px; color:var(--sd-ink-2); text-decoration:underline; text-underline-offset:3px}
.sd-foot-contact a:hover{color:var(--sd-link)}
.sd-foot h2{margin:6px 0 12px; font:600 12px/1.4 var(--sd-font); letter-spacing:.08em; text-transform:uppercase; color:var(--sd-mut)}
.sd-foot ul{list-style:none; margin:0; padding:0}
.sd-foot li{margin:0}
.sd-foot li a{display:inline-flex; align-items:center; min-height:32px; color:var(--sd-ink-2); text-decoration:none; font-size:15px}
.sd-foot li a:hover{color:var(--sd-link)}
.sd-foot-bot{margin:0; padding:20px 0 28px; border-top:1px solid var(--sd-line); font-size:13.5px; color:var(--sd-mut)}
@media (max-width:1079.98px){
  .sd-foot-in{padding:0 16px}
  .sd-foot-grid{grid-template-columns:1fr 1fr; gap:28px 20px; padding:40px 0 28px}
  .sd-foot-brand{grid-column:1 / -1}
  .sd-foot .sd-mark{width:30px; height:30px}
  .sd-foot .sd-wm{height:12px}
  .sd-slogan{font-size:7.5px}
  .sd-foot li a{min-height:44px}
  .sd-foot-contact a{min-height:44px}
  .sd-foot-svc{grid-column:1; grid-row:2 / span 2}
  .sd-foot-acct{grid-column:2; grid-row:2}
  .sd-foot-legal{grid-column:2; grid-row:3; margin-top:-8px}
  .sd-foot-bot{padding-bottom:32px}
}
/* 226 页脚口号（指挥 10-24 09:0x 照甲；A2 查出窄于 375 的手机上口号不换行、页面比屏幕宽）：窄屏在「·」处分两行、两行差不多一样长 ——
   口号里只有「·」后面是普通空格（短语里面与「·」前面都是不断开的空格，class-site.php 的 slogan_html），所以只在「·」后面折、短语不拆开；
   宽屏照旧一行（.sd-foot-name 的 nowrap 不动），字号、字距、颜色都不动 */
@media (max-width:374.98px){ .sd-foot .sd-slogan{white-space:normal; text-wrap:balance} }

/* ------------------------------------------------------------ 226 A2-4：Supplier files
   列表：筛选一排（手机上一项一行）、卡片一列（宽屏两列）；五种证据状态用 en-buyer 设计稿的五种颜色与形状（纯黑白下也分得开）。
   详情：引擎渲染的档案自带 .sf-root 下的样式，这里只给外面一圈的留白。 */
.sd-body{
  --sd-ok:#0f7a45; --sd-ok-bg:#e8f5ee; --sd-ok-line:#a9d9c0;
  --sd-self:#2d5aa8; --sd-self-bg:#eaf0fb; --sd-self-line:#bed1ee;
  --sd-none:#5f6a74; --sd-none-bg:#f0f2f4; --sd-none-line:#dce0e5;
  --sd-miss:#a8401f; --sd-miss-bg:#fbeee9; --sd-miss-line:#eec5b6;
}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) .sd-body{
    --sd-ok:#4cc38a; --sd-ok-bg:#12271d; --sd-ok-line:#1e4a34;
    --sd-self:#7aa7f0; --sd-self-bg:#141d2e; --sd-self-line:#26395c;
    --sd-none:#9aa4ae; --sd-none-bg:#1a1f25; --sd-none-line:#2c343d;
    --sd-miss:#e4835f; --sd-miss-bg:#2b1a14; --sd-miss-line:#4f2d21;
  }
}
html[data-theme="dark"] .sd-body{
    --sd-ok:#4cc38a; --sd-ok-bg:#12271d; --sd-ok-line:#1e4a34;
    --sd-self:#7aa7f0; --sd-self-bg:#141d2e; --sd-self-line:#26395c;
    --sd-none:#9aa4ae; --sd-none-bg:#1a1f25; --sd-none-line:#2c343d;
    --sd-miss:#e4835f; --sd-miss-bg:#2b1a14; --sd-miss-line:#4f2d21;
}
.sf-list .sf-intro{color:var(--sd-ink-2); max-width:62ch}
.sf-filters{display:grid; grid-template-columns:1fr; gap:10px; margin:18px 0 8px; padding:14px;
  background:var(--sd-surface); border:1px solid var(--sd-line); border-radius:10px}
@media (min-width:860px){ .sf-filters{grid-template-columns:repeat(4,minmax(0,1fr)) auto; align-items:end} }
.sf-filter{display:flex; flex-direction:column; gap:4px; font-size:14px; color:var(--sd-ink-2)}
.sf-filter select{font:inherit; font-size:16px; min-height:44px; padding:0 10px; border:1px solid var(--sd-field-line); border-radius:8px;
  background:var(--sd-surface); color:var(--sd-ink)}
.sf-filter-actions{display:flex; align-items:center; gap:12px; margin:0 !important}
.sf-count{color:var(--sd-mut); font-size:14.5px}
.sf-empty{padding:14px; border:1px dashed var(--sd-line-2); border-radius:10px; color:var(--sd-ink-2)}
.sf-cards{list-style:none; margin:12px 0 0; padding:0; display:grid; grid-template-columns:1fr; gap:12px}
@media (min-width:860px){ .sf-cards{grid-template-columns:repeat(2,minmax(0,1fr))} }
.sf-card{padding:16px; background:var(--sd-surface); border:1px solid var(--sd-line); border-radius:10px; box-shadow:0 1px 2px rgba(16,24,40,.05)}
.sf-card-name{font-size:18px; line-height:1.3; margin:0 0 4px}
/* 226 A2-4 补（Astra 20:00 停放件）：卡片标题链接在手机上点得到 —— 触控高度至少 44px，字的样子不变 */
.sf-card-name a{text-decoration:none; display:flex; align-items:center; min-height:44px}
.sf-card-zh, .sf-card-where, .sf-card-version{margin:2px 0 !important; color:var(--sd-ink-2); font-size:14.5px}
.sf-card-tags{margin:8px 0 !important}
.sf-tag{display:inline-block; margin:0 4px 4px 0; padding:1px 8px; border:1px solid var(--sd-line-2); border-radius:6px; font-size:13px; color:var(--sd-ink-2)}
.sf-evidence{list-style:none; margin:10px 0 6px; padding:0; display:flex; flex-wrap:wrap; gap:6px}
.sf-pill{display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:999px; font-size:13px; font-weight:600; border:1px solid}
.sf-pill::before{content:""; width:8px; height:8px; flex:none; background:currentColor}
.sf-pill-ok{color:var(--sd-ok); background:var(--sd-ok-bg); border-color:var(--sd-ok-line)}
.sf-pill-ok::before{border-radius:50%}
.sf-pill-cand{color:var(--sd-cand); background:var(--sd-cand-bg); border-color:var(--sd-cand-line)}
.sf-pill-cand::before{border-radius:1px; transform:rotate(45deg)}
.sf-pill-self{color:var(--sd-self); background:var(--sd-self-bg); border-color:var(--sd-self-line)}
.sf-pill-self::before{border-radius:1px}
.sf-pill-none{color:var(--sd-none); background:var(--sd-none-bg); border-color:var(--sd-none-line)}
.sf-pill-none::before{border-radius:50%; background:transparent; box-shadow:inset 0 0 0 1.6px currentColor}
.sf-pill-miss{color:var(--sd-miss); background:var(--sd-miss-bg); border-color:var(--sd-miss-line)}
.sf-pill-miss::before{border-radius:1px; background:transparent; box-shadow:inset 0 0 0 1.6px currentColor; transform:rotate(45deg)}
.sf-back{margin:0 0 12px !important}
.sf-sample-note{color:var(--sd-ink-2)}
/* 226 Chinese copy（A3，w4s）：详情页档案外面那一行 —— 与句子里的链接同一个点按高度（上下各加一点，不小于 24 像素） */
.sf-zh-copy{margin:0 0 12px}
.sf-zh-copy a{display:inline-block; padding:4px 0}
.sf-file{overflow-wrap:anywhere}
/* 引擎的档案自带样式：本主题的标题与段落间距不渗进去（A2-4 截图：小节标题顶上空了一截、多了一道线） */
.sf-file h1, .sf-file h2, .sf-file h3, .sf-file h4{margin:revert; padding:revert; border:revert; font-size:revert; line-height:revert}
.sf-file p, .sf-file ul, .sf-file ol{margin:revert}

/* 226 4D 横幅这一段放在「226 三页」那一段前面：那几段的站点测试（9.22、15.15、25.2）从各自的标记取到文件末尾、核「只用变量、没有写死的颜色」；
   横幅在浅色、深色外观下都是同一套深色（规格如此），所以颜色是写死的，不能落进那几段里。 */
/* ===========================================================================
   226 4D Framework 横幅（A2，2026-10-19；LK 04:48 批了样子、05:31 十张照片都批了；样稿与量过的数：docs/parallel/agent2-redesign-226/4d-hero/ mock-2、shots-4）
   规格 docs/supervision/226-redesign/design-4d-framework.md；LK 的原图 lead-walk/run-25-4d/lk-ref-1.jpg。
   · 首页最上面一块、服务页最上面一条：深色照片横幅。浅色、深色外观下都是这一套颜色（--sd-4d-*，不随外观变）；横幅以下的正文照旧随外观。
   · 只有背景照片是图片（<picture>：手机 4:5 竖裁，宽屏 16:9 三种宽；AVIF／WebP／JPEG）；字、卡片、箭头、时间线都是页面代码。
   · 字体只用系统自带的无衬线（--sd-font），不从外网载。插图是自己画的线条 SVG，笔触照站上图标（圆头、圆角、不填色）。
   · 排法：手机（窄于 640）卡片竖排，左边一条竖线串四个圆点，箭头朝下；640 起四张一行，下面一条曲线连到各卡片的圆点；1080 起放大。
   · 卡片的「玻璃」：半透明＋模糊背景＋细边；不支持模糊的浏览器退回实色半透明（@supports not）。
   =========================================================================== */
.sd-body{
  --sd-4d-navy:#0a1f36; --sd-4d-navy-rgb:10,31,54;
  --sd-4d-cyan:#22d3ee; --sd-4d-cyan-2:#8ff3ff; --sd-4d-orange:#ff9f43;
  --sd-4d-ink:#ffffff; --sd-4d-ink-2:#d5e3ef; --sd-4d-art:#5fe3f5;
}
/* 横幅要通栏（.sd-main 限宽 1080），所以 main 换成不限宽的一层，原来的正文照旧包在 .sd-main 里 */
.sd-main-4d{flex:1 0 auto; width:100%}

.sd-4d{position:relative; isolation:isolate; overflow:hidden; background:var(--sd-4d-navy); color:var(--sd-4d-ink); color-scheme:dark;
  --sd-4d-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E")}
/* 照片：手机上只铺上面一段、往下淡进底色（下面是竖排的卡片）；640 起铺满整条 */
.sd-4d-photo{position:absolute; z-index:-2; left:0; right:0; top:0; height:min(100%, 620px);
  -webkit-mask-image:linear-gradient(180deg, #000 55%, transparent 100%); mask-image:linear-gradient(180deg, #000 55%, transparent 100%)}
.sd-4d-photo img{display:block; width:100%; height:100%; object-fit:cover; object-position:var(--sd-4d-pos-m, 55% 50%)}
/* 压暗：字压在照片上，对比度要 ≥ 4.5:1（照最亮的地方量）；每张照片的压暗程度不同（--sd-4d-shade） */
.sd-4d-photo::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(var(--sd-4d-navy-rgb), var(--sd-4d-shade-m, .55)) 0%, rgba(var(--sd-4d-navy-rgb), calc(var(--sd-4d-shade-m, .55) + .2)) 100%)}
/* 底下的网格地面（原图的样子），只是点缀：很淡，透视压扁，往上淡掉 */
.sd-4d::after{content:""; position:absolute; z-index:-1; left:-30%; right:-30%; bottom:0; height:42%; pointer-events:none;
  background-image:linear-gradient(rgba(95,227,245,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(95,227,245,.10) 1px, transparent 1px);
  background-size:56px 56px; background-position:center bottom; transform:perspective(420px) rotateX(58deg); transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 60%); mask-image:linear-gradient(180deg, transparent 0%, #000 60%)}

.sd-4d-in{position:relative; max-width:1080px; margin:0 auto; padding:28px 16px 32px}
.sd-4d-title{margin:0; font:800 40px/1.05 var(--sd-font); letter-spacing:-.02em; color:var(--sd-4d-ink); text-wrap:balance}
.sd-4d-sub{margin:12px 0 0; max-width:34rem; font:500 18px/1.45 var(--sd-font); color:var(--sd-4d-ink-2)}
.sd-4d-actions{display:flex; flex-direction:column; gap:10px; margin:24px 0 0}
.sd-4d-btn{display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 22px; border-radius:10px;
  border:1.5px solid var(--sd-4d-cyan); background:var(--sd-4d-cyan); color:#04202e; font:650 16px/1.2 var(--sd-font); text-decoration:none}
.sd-4d-btn:hover{background:var(--sd-4d-cyan-2); border-color:var(--sd-4d-cyan-2)}
/* 空心按钮也是一块小玻璃：字下面不直接是照片的亮处（量过：只给 6% 白底时，手机上字对最亮处不到 4.5:1） */
.sd-4d-btn-2{background:rgba(14,38,66,.55); border-color:rgba(255,255,255,.6); color:var(--sd-4d-ink);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .sd-4d-btn-2{background:rgba(12,33,58,.9)} }
.sd-4d-btn-2:hover{background:rgba(24,56,92,.7); border-color:#fff}
.sd-4d a:focus-visible{outline:3px solid var(--sd-4d-cyan-2); outline-offset:3px}
@media (min-width:480px){ .sd-4d-actions{flex-direction:row; flex-wrap:wrap} }

/* —— 四张卡片 —— */
.sd-4d-steps{list-style:none; margin:32px 0 0; padding:0 0 0 34px; display:grid; gap:24px}
.sd-4d-step{position:relative; min-width:0}
.sd-4d-step:nth-child(1){--dot:#22d3ee; --dot-next:#5fe7f5}
.sd-4d-step:nth-child(2){--dot:#5fe7f5; --dot-next:#ff9f43}
.sd-4d-step:nth-child(3){--dot:#ff9f43; --dot-next:#ffb866}
.sd-4d-step:nth-child(4){--dot:#ffb866}
.sd-4d-card{position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"head art" "sub art"; align-items:center; column-gap:12px;
  height:100%; padding:16px; border-radius:16px; border:1px solid rgba(143,243,255,.28); color:var(--sd-4d-ink); text-decoration:none;
  background:rgba(14,38,66,.58); -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 10px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08); transition:border-color .2s, background-color .2s}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .sd-4d-card{background:rgba(12,33,58,.92)}
}
/* 指挥 04:12／04:16：悬停时边框亮一点。LK 10-19：四张卡都不链、动画留着 —— 悬停那一档四张都有（原来只写在链着的那三张上）；
   卡不能点、不进 Tab 次序，没有焦点框（主按钮那一圈 .sd-4d a:focus-visible 照旧） */
.sd-4d-card:hover{border-color:rgba(143,243,255,.65); background:rgba(18,48,82,.68)}
.sd-4d-cardhead{grid-area:head; display:flex; align-items:center; gap:10px; min-width:0}
.sd-4d-d{flex:none; font:800 44px/.9 var(--sd-font); color:var(--sd-4d-cyan); filter:drop-shadow(0 0 10px rgba(34,211,238,.35))}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .sd-4d-d{background:linear-gradient(180deg, var(--sd-4d-cyan-2) 0%, var(--sd-4d-cyan) 75%); -webkit-background-clip:text; background-clip:text;
    color:transparent; -webkit-text-fill-color:transparent}
}
.sd-4d-t{margin:0; font:750 19px/1.15 var(--sd-font); letter-spacing:-.01em; color:var(--sd-4d-ink)}
.sd-4d-art{grid-area:art; display:block; width:96px; height:auto; color:var(--sd-4d-art)}
.sd-4d-s{grid-area:sub; margin:8px 0 0; font:600 14px/1.4 var(--sd-font); color:#dcecf8}
/* 箭头：手机上朝下（卡片之间的空当正中），640 起朝右 */
.sd-4d-step:not(:last-child)::after{content:""; position:absolute; left:50%; bottom:-23px; width:22px; height:22px; pointer-events:none;
  background:var(--sd-4d-arrow) center/contain no-repeat; transform:translateX(-50%) rotate(90deg)}
/* 手机：左边竖线一段一段连到下一张的圆点（颜色青渐橙），圆点对着卡片的大字 D */
.sd-4d-pin{position:absolute; left:-30px; top:31px; width:14px; height:14px; border-radius:50%; background:var(--sd-4d-navy);
  border:2.5px solid var(--dot); box-shadow:0 0 0 4px rgba(255,255,255,.05), 0 0 12px var(--dot)}
.sd-4d-step:not(:last-child)::before{content:""; position:absolute; left:-24px; top:38px; width:2px; height:calc(100% + 24px); border-radius:2px;
  background:linear-gradient(180deg, var(--dot), var(--dot-next)); box-shadow:0 0 8px var(--dot)}
.sd-4d-line{display:none}
.sd-4d-foot{margin:26px 0 0; text-align:center; font:500 15px/1.5 var(--sd-font); color:#e3eef8; text-wrap:balance}

@media (min-width:640px){
  .sd-4d-in{padding:44px 24px 36px}
  .sd-4d-title{font-size:52px}
  .sd-4d-sub{font-size:20px}
  .sd-4d-photo{height:100%; -webkit-mask-image:none; mask-image:none}
  .sd-4d-photo img{object-position:var(--sd-4d-pos, 60% 60%)}
  /* 左边压成底色（标题在那儿），往右透出照片；上沿略压、下沿压成底色（曲线与最后一句在那儿） */
  .sd-4d-photo::after{background:
    linear-gradient(180deg, rgba(var(--sd-4d-navy-rgb), .25) 0%, rgba(var(--sd-4d-navy-rgb), 0) 22%, rgba(var(--sd-4d-navy-rgb), 0) 52%, rgba(var(--sd-4d-navy-rgb), .9) 90%, var(--sd-4d-navy) 100%),
    linear-gradient(90deg, var(--sd-4d-navy) 0%, rgba(var(--sd-4d-navy-rgb), .93) calc(50% - 260px), rgba(var(--sd-4d-navy-rgb), var(--sd-4d-shade, .45)) calc(50% + 180px), rgba(var(--sd-4d-navy-rgb), calc(var(--sd-4d-shade, .45) - .12)) 100%)}
  .sd-4d-steps{grid-template-columns:repeat(4, minmax(0,1fr)); column-gap:4%; padding:0; margin-top:40px}
  .sd-4d-card{display:flex; flex-direction:column; padding:14px 12px 16px}
  .sd-4d-cardhead{gap:8px; min-height:52px}
  .sd-4d-d{font-size:40px}
  .sd-4d-t{font-size:16px}
  .sd-4d-art{width:100%; max-width:128px; margin:10px auto 8px}
  .sd-4d-s{margin:auto 0 0; text-align:center; font-size:13px}
  .sd-4d-pin{display:none}
  .sd-4d-step:not(:last-child)::before{display:none}
  /* 列间距 4%（照容器宽算），卡片中心就固定在 11%、37%、63%、89%，下面曲线上的圆点才对得上；箭头在空当正中：
     空当是卡片宽的 4/22，一半是 9.09% */
  .sd-4d-step:not(:last-child)::after{left:auto; bottom:auto; top:50%; right:calc(-9.09% - 13px); width:26px; height:26px; transform:translateY(-50%)}
  .sd-4d-line{display:block; position:relative; height:88px}
  .sd-4d-curve{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
  .sd-4d-line .sd-4d-pin{display:block; left:var(--x); top:var(--y); margin:-7px 0 0 -7px}
  /* 卡片底边连下来的细线（到圆点为止） */
  .sd-4d-line .sd-4d-pin::before{content:""; position:absolute; left:50%; bottom:calc(100% + 2.5px); width:1.5px; height:calc(var(--y) - 9.5px); margin-left:-.75px;
    background:linear-gradient(180deg, rgba(255,255,255,0), var(--dot)); opacity:.85}
  .sd-4d-foot{margin-top:6px; font-size:16px}
}
@media (min-width:1080px){
  .sd-4d-in{padding:64px 24px 40px}
  .sd-4d-title{font-size:64px}
  .sd-4d-sub{font-size:22px; max-width:30rem}
  .sd-4d-steps{margin-top:52px}
  .sd-4d-card{padding:20px 18px}
  .sd-4d-cardhead{gap:12px; min-height:64px}
  .sd-4d-d{font-size:58px}
  .sd-4d-t{font-size:21px}
  .sd-4d-art{max-width:150px; margin:14px auto 12px}
  .sd-4d-s{font-size:15px}
  .sd-4d-foot{font-size:17px}
}

/* —— 服务页的那一条：页名、一句、一个主按钮；比首页矮，不要卡片与地面网格 —— */
.sd-4d-page::after{display:none}
.sd-4d-page .sd-4d-photo{height:100%; -webkit-mask-image:none; mask-image:none}
.sd-4d-page .sd-4d-title{font-size:34px}
.sd-4d-page .sd-4d-sub{font-size:17px; max-width:36rem}
.sd-4d-page .sd-4d-in{padding:28px 16px 30px}
.sd-4d-page .sd-4d-actions{flex-direction:row}
@media (min-width:640px){ .sd-4d-page .sd-4d-in{padding:40px 24px 44px} .sd-4d-page .sd-4d-title{font-size:44px} .sd-4d-page .sd-4d-sub{font-size:19px} }
@media (min-width:1080px){ .sd-4d-page .sd-4d-in{padding:56px 24px 60px} .sd-4d-page .sd-4d-title{font-size:52px} .sd-4d-page .sd-4d-sub{font-size:20px} }
/* 服务页的横幅矮，那一句压在照片上的地方多：压得比首页重（量过：照首页的压法，那一句对最亮处只有 2.1–3.9:1） */
.sd-4d-page .sd-4d-photo img{object-position:var(--sd-4d-pos-page, 60% 35%)}
.sd-4d-page .sd-4d-photo::after{background:rgba(var(--sd-4d-navy-rgb), var(--sd-4d-shade-page, .78))}
@media (min-width:640px){
  .sd-4d-page .sd-4d-photo::after{background:linear-gradient(90deg, var(--sd-4d-navy) 0%, rgba(var(--sd-4d-navy-rgb), .94) calc(50% - 120px),
    rgba(var(--sd-4d-navy-rgb), calc(var(--sd-4d-shade, .45) + .15)) calc(50% + 260px), rgba(var(--sd-4d-navy-rgb), var(--sd-4d-shade, .45)) 100%)}
}
/* 平板宽（640–1079）那一句几乎铺满一行：底色压到六成宽、往右才透出照片（量过：照宽屏的压法 768 宽只有 4.37:1） */
@media (min-width:640px) and (max-width:1079.98px){
  .sd-4d-page .sd-4d-photo::after{background:linear-gradient(90deg, var(--sd-4d-navy) 0%, rgba(var(--sd-4d-navy-rgb), .94) 62%,
    rgba(var(--sd-4d-navy-rgb), calc(var(--sd-4d-shade, .45) + .2)) 100%)}
}
/* 横幅下面的正文：原来的上边距（40px）加第一节标题的上边距，与横幅之间空得太多；收一点 */
.sd-4d + .sd-main{padding-top:8px}
@media (min-width:860px){ .sd-4d + .sd-main{padding-top:16px} }

/* —— 动态：只在没选「减少动态」时，曲线与圆点淡入一次；悬停的过渡也只在那时有 —— */
@media (prefers-reduced-motion:no-preference){
  .sd-4d-curve{animation:sd4d-fade .9s ease-out both}
  .sd-4d-line .sd-4d-pin{animation:sd4d-pop .5s ease-out both}
  .sd-4d-line .sd-4d-pin:nth-of-type(2){animation-delay:.12s}
  .sd-4d-line .sd-4d-pin:nth-of-type(3){animation-delay:.24s}
  .sd-4d-line .sd-4d-pin:nth-of-type(4){animation-delay:.36s}
}
@media (prefers-reduced-motion:reduce){
  .sd-4d-card{transition:none}
}
@keyframes sd4d-fade{from{opacity:0} to{opacity:1}}
@keyframes sd4d-pop{from{opacity:0; transform:scale(.4)} to{opacity:1; transform:scale(1)}}

@media (forced-colors:active){
  .sd-4d-card{border:1px solid CanvasText}
  .sd-4d-d{background:none; color:CanvasText; -webkit-text-fill-color:CanvasText}
}

/* —— 每张照片各自的焦点与压暗：不写在这里，由横幅上的变量带（--sd-4d-pos、-pos-m、-shade、-shade-m、-pos-page、-shade-page；
   Sourcing_Site::HERO_PHOTOS 一行一张，挑照片的脚本照挑中的那一行写上；没开脚本时服务器写第一行）。上面 var() 里的备用值只在变量都没有时用。 —— */
/* 平板宽（640–1079）首页：副题几乎铺满一行，伸到照片亮的那一块上（量过：照片 2、4 与黄昏那张在 768 宽只有 1.96–3.56:1）——
   上面标题、副题、按钮那一段再压一层深蓝，往下淡掉，卡片那一段照旧透出照片 */
@media (min-width:640px) and (max-width:1079.98px){
  .sd-4d:not(.sd-4d-page) .sd-4d-photo::after{background:
    linear-gradient(180deg, rgba(var(--sd-4d-navy-rgb), .8) 0%, rgba(var(--sd-4d-navy-rgb), .72) 34%, rgba(var(--sd-4d-navy-rgb), 0) 52%, rgba(var(--sd-4d-navy-rgb), 0) 60%, rgba(var(--sd-4d-navy-rgb), .9) 90%, var(--sd-4d-navy) 100%),
    linear-gradient(90deg, var(--sd-4d-navy) 0%, rgba(var(--sd-4d-navy-rgb), .93) calc(50% - 260px), rgba(var(--sd-4d-navy-rgb), var(--sd-4d-shade, .45)) calc(50% + 180px), rgba(var(--sd-4d-navy-rgb), calc(var(--sd-4d-shade, .45) - .12)) 100%)}
}
/* What we do 开头那一句（指挥 04:16 定的字；原来在首页最上面那段介绍里） */
.sd-main .sd-services-lede{margin:-4px 0 18px; max-width:44rem; color:var(--sd-ink-2); font-size:17px}

/* ============================================================ 226 三页：公开展示页（docs/supervision/226-redesign/design-three-pages.md，指挥 10-14 晚）
   Supplier files、Find top factories、Price information 的上半页 —— 一句页头、各节（.sh-sec）、标着 Sample 的样张卡（.sh-sample）、下半页的动作
   （.sh-sec-action）。颜色只用上面的变量（深浅两段照旧，这里不另加变量、不写色值）；手机 390 不横向滚：价格板在窄屏上一行排成一张小卡，
   矩阵缩小留白。这几页比一般页面宽（表格与两栏），:has() 不认的老浏览器照旧是一般页面的宽度。 */
.sd-page:has(.sh-page){max-width:none}
.sh-vh{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.sh-lede{font-size:17px; line-height:1.6; color:var(--sd-ink-2); max-width:62ch; margin:0 !important}
@media (min-width:860px){ .sh-lede{font-size:19px} }
.sh-sec{margin-top:40px}
@media (min-width:860px){ .sh-sec{margin-top:56px} }
.sd-main .sh-sec > h2{margin:0 0 16px}
.sh-sec h3{font-size:18px; line-height:1.3; margin:0 0 10px}
.sh-sec h4{font-size:16px; line-height:1.35; font-weight:650; color:var(--sd-ink); margin:28px 0 10px}
.sh-two > div > h4{margin-top:8px}
.sh-sec > p{max-width:62ch; color:var(--sd-ink-2)}
.sh-list{margin:0; padding:0 0 0 1.2em; color:var(--sd-ink-2)}
.sh-list li{margin:0 0 6px}
@media (min-width:640px){ .sh-cols{columns:2; column-gap:40px} .sh-cols li{break-inside:avoid} }
.sh-two{display:grid; grid-template-columns:minmax(0,1fr); gap:16px 32px}
@media (min-width:860px){ .sh-two{grid-template-columns:repeat(2,minmax(0,1fr))} }
.sh-note{margin:10px 0 0 !important; font-size:14px; color:var(--sd-mut)}
.sh-pending{margin:0 !important; padding:28px 20px; border:1px dashed var(--sd-line-2); border-radius:10px; color:var(--sd-ink-2); text-align:center}

/* —— 样张卡：右上 Sample 徽标，卡下一句说明 —— */
.sh-sample{padding:18px 16px; background:var(--sd-surface); border:1px solid var(--sd-line); border-radius:12px; box-shadow:var(--sd-shadow)}
@media (min-width:860px){ .sh-sample{padding:28px 32px} }
.sh-sample-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin:0 0 16px}
.sd-main .sh-sample-head h3{font:700 20px/1.25 var(--sd-display); margin:0}
@media (min-width:860px){ .sd-main .sh-sample-head h3{font-size:22px} }
.sh-sample-head .sd-sample{flex:none; margin-top:3px}
.sh-sample > .sh-note{margin-top:16px !important}

/* —— 0. Check a factory 重做（design-check-page.md，指挥 10-15 20:5x）：页头下那一行价钱（Pricing 页公开以后才有）、报告课题六组、证据四档 —— */
.sh-price-line{margin:12px 0 0 !important; font-weight:600; color:var(--sd-ink)}
/* 句中的链接手机上要点得到（≥ 24px，同 .sh-doc-files a 的做法） */
.sh-price-line a{display:inline-block; padding:3px 0}
.sh-sec-checks > h3{margin-top:28px}
.sh-groups{display:grid; grid-template-columns:minmax(0,1fr); gap:0 32px}
@media (min-width:640px){ .sh-groups{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:860px){ .sh-groups{grid-template-columns:repeat(3,minmax(0,1fr))} }
.sh-groups > div > h4{margin:14px 0 8px}
.sh-grades{display:grid; grid-template-columns:minmax(0,1fr); gap:12px; margin:0}
@media (min-width:860px){ .sh-grades{grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 24px} }
.sh-grades > div{padding:14px 16px; background:var(--sd-surface); border:1px solid var(--sd-line); border-radius:10px}
.sh-grades dd{margin:8px 0 0; color:var(--sd-ink-2)}

/* —— A. Supplier files：档案里有什么、样张（抬头几项、文件清单、表格、矩阵、核过与要核）、替你要文件那一段 —— */
.sh-sec-contains .sh-list{max-width:62ch}
.sh-facts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 24px; margin:0}
.sh-facts > div:last-child{grid-column:1 / -1}
@media (min-width:860px){ .sh-facts{grid-template-columns:repeat(3,auto) minmax(0,1fr)} .sh-facts > div:last-child{grid-column:auto} }
/* 226 走查 B3（walk-226/shots-1/files-m320）：320 宽时三格各不到 80px，「Production bases」断成「Productio / n bases」—— 窄屏改两格一行 */
@media (max-width:420px){ .sh-facts{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 16px} }
.sh-facts dt{font-size:13px; font-weight:600; color:var(--sd-mut)}
.sh-facts dd{margin:2px 0 0; color:var(--sd-ink)}
.sh-docs{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:10px}
@media (min-width:860px){ .sh-docs{grid-template-columns:repeat(2,minmax(0,1fr))} }
.sh-docs li{display:flex; align-items:flex-start; gap:14px; margin:0; padding:14px 16px; background:var(--sd-bg); border:1px solid var(--sd-line); border-radius:10px}
.sh-doc-icon{flex:none; color:var(--sd-mark)}
.sh-docs b{display:block; font-weight:650; line-height:1.35; color:var(--sd-ink)}
.sh-docs p{margin:4px 0 0 !important; font-size:15px; line-height:1.5; color:var(--sd-ink-2)}
/* 指挥 10-15 09:53 ②：原件第一页的缩略图（细框；图本身是白纸，不透明）与「View · Download · 大小」一行；
   链接手机上要点得到（≥ 24px，同 .sra-link 的做法）。KOF-K 那一份没有原件，最后一句说为什么 */
.sh-doc-thumb{flex:none; width:88px; height:auto; border:1px solid var(--sd-line); border-radius:4px}
/* 226 走查 B3：320 宽时缩略图占了一行的四成，标题挤成五行 —— 窄屏上缩略图小一点、四周也收一点 */
@media (max-width:420px){ .sh-docs li{gap:10px; padding:12px} .sh-doc-thumb{width:56px} }
.sh-docs .sh-doc-files{display:flex; flex-wrap:wrap; align-items:center; gap:0 14px; margin-top:6px !important}
.sh-doc-files a{display:inline-block; padding:4px 0; font-weight:600}
.sh-doc-links{display:inline-flex; gap:0 14px; white-space:nowrap}
.sh-doc-lang{font-weight:600; color:var(--sd-ink)}
/* 手机上语言自己一行（截图 shoot-2：「Chinese」比「English」宽，一个折行一个不折，两行的样子不一样） */
@media (max-width:640px){ .sh-doc-lang{flex-basis:100%} }
.sh-doc-size, .sh-docs .sh-doc-note{color:var(--sd-mut); font-size:14px}
.sh-table-wrap{overflow-x:auto; background:var(--sd-surface); border:1px solid var(--sd-line); border-radius:10px}
.sh-table{width:100%; border-collapse:collapse; font-size:15px; line-height:1.45}
/* 表格里长词只在放不下时才断（全站的 anywhere 会把列宽压到一个字母宽：名单那一列成了「Produ / cer」） */
.sh-table th, .sh-table td{padding:10px 14px; text-align:left; vertical-align:top; border-bottom:1px solid var(--sd-line); overflow-wrap:break-word}
.sh-table thead th{font-size:13px; font-weight:650; color:var(--sd-mut); background:var(--sd-bg)}
.sh-table tbody th{font-weight:600; color:var(--sd-ink)}
.sh-table td{color:var(--sd-ink-2)}
.sh-table tbody tr:last-child > *{border-bottom:0}
@media (max-width:640px){ .sh-table th, .sh-table td{padding:9px 10px} }
.sh-matrix thead th:not(:first-child), .sh-matrix td{text-align:center; white-space:nowrap}
.sh-matrix td{width:4.5em}
.sh-yes{color:var(--sd-ok); font-weight:700}
.sh-no{color:var(--sd-mut)}
.sh-tick-note{display:block; font-size:12px; font-weight:600}
.sh-matrix tr.sh-gap > *{background:var(--sd-miss-bg)}
.sh-matrix tr.sh-gap th{color:var(--sd-miss)}
@media (max-width:640px){
  .sh-matrix td, .sh-matrix thead th:not(:first-child){width:auto; padding-left:5px; padding-right:5px}
  .sh-matrix thead th{font-size:12px}
  .sh-matrix tbody th{font-size:14px}
}
/* 226 走查 B2（walk-226/shots-1/top-intro-m320、files-m320）：窄屏上名单、批次、文件对照三张表的右边一列被切掉一截（框里能横着拖、看不出来），
   名单三列各约 90px、一格十几行 —— 窄于 640px 时每一行排成一块，表头收起，每一格前面标上它那一列的名字（data-label，照法律两页的表）：
   名单是一家一块、两格各占一段；批次是一项一块、两格各一行；文件对照是一个产品一块、四种文件排成一行小标签（TDS ✓ COA — …） */
@media (max-width:640px){
  .sh-stack thead{display:none}
  .sh-stack, .sh-stack tbody, .sh-stack tr, .sh-stack tbody th, .sh-stack td{display:block}
  .sh-stack tr{padding:10px 12px; border-bottom:1px solid var(--sd-line)}
  .sh-stack tbody tr:last-child{border-bottom:0}
  .sh-stack tbody th, .sh-stack td{width:auto; padding:0; border-bottom:0; text-align:left; white-space:normal}
  .sh-stack td{margin-top:6px}
  .sh-stack td::before{content:attr(data-label); display:block; font-size:13px; font-weight:650; color:var(--sd-mut)}
  .sh-coa td{margin-top:2px}
  .sh-coa td::before, .sh-matrix.sh-stack td::before{display:inline; margin-right:6px}
  .sh-matrix.sh-stack td{display:inline-block; margin:6px 16px 0 0; white-space:nowrap}
  .sh-matrix.sh-stack .sh-tick-note{display:inline; margin-left:4px}
  .sh-matrix.sh-stack tr.sh-gap{background:var(--sd-miss-bg)}
}
.sh-alert{margin:12px 0 0 !important; padding:12px 14px; background:var(--sd-miss-bg); border:1px solid var(--sd-miss-line); border-left:3px solid var(--sd-miss);
  border-radius:8px; color:var(--sd-ink); font-weight:600}
/* 核过的打勾、要核的一个空心圈：都是画出来的（不是字），读屏与扫描只读条目本身 */
.sh-list-ok, .sh-list-todo{list-style:none; padding:0}
.sh-list-ok li, .sh-list-todo li{position:relative; padding-left:26px}
.sh-list-ok li::before{content:""; position:absolute; left:4px; top:.3em; width:6px; height:11px; border:solid var(--sd-ok); border-width:0 2px 2px 0; transform:rotate(45deg)}
.sh-list-todo li::before{content:""; position:absolute; left:2px; top:.45em; width:10px; height:10px; border:2px solid var(--sd-cand); border-radius:50%}
.sh-sec-request-files{padding:22px 20px; background:var(--sd-accent-soft); border-radius:12px}
@media (min-width:860px){ .sh-sec-request-files{padding:28px 32px} }
.sh-sec-request-files p{color:var(--sd-ink)}
.sd-main .sh-sec-request-files p.sh-paid{margin:0; font-weight:600}

/* —— B. Find top factories：从哪开始、四格、你拿到的、样张（摘要、两张图、名单）、怎么挑 —— */
.sh-paths{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:12px}
@media (min-width:860px){ .sh-paths{grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px} }
.sh-paths li{display:flex; flex-direction:column; margin:0; padding:20px 22px; background:var(--sd-surface); border:1px solid var(--sd-line); border-radius:12px;
  box-shadow:var(--sd-shadow)}
.sh-paths b{display:block; font:700 19px/1.3 var(--sd-display); color:var(--sd-ink); margin:0 0 6px}
.sh-paths p{color:var(--sd-ink-2)}
.sd-main .sh-paths p.sh-path-action{margin:auto 0 0; padding-top:6px}
.sh-tiles{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
@media (min-width:860px){ .sh-tiles{grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px} }
.sh-tiles li{margin:0; padding:14px; background:var(--sd-surface); border:1px solid var(--sd-line); border-radius:12px; box-shadow:var(--sd-shadow)}
@media (min-width:860px){ .sh-tiles li{padding:20px} }
.sh-tiles .sd-icon{display:block; margin:0 0 10px}
.sh-tiles b{display:block; font-weight:650; line-height:1.35; color:var(--sd-ink); margin:0 0 4px}
.sh-tiles p{margin:0 !important; font-size:15px; line-height:1.5; color:var(--sd-ink-2)}
.sh-sec-get .sh-two > div{padding:20px 22px; background:var(--sd-surface); border:1px solid var(--sd-line); border-radius:12px; box-shadow:var(--sd-shadow)}
@media (min-width:860px){ .sh-sec-get .sh-two{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)} }
.sh-sec-get .sh-two p{margin:0 !important; color:var(--sd-ink-2)}
.sd-main p.sh-asof{margin:0 0 6px; font-size:13px; font-weight:600; color:var(--sd-mut)}
.sh-summary{color:var(--sd-ink); max-width:75ch}
.sh-figures{margin-top:20px}
.sh-figure{min-width:0; padding:16px; background:var(--sd-bg); border:1px solid var(--sd-line); border-radius:10px}
.sd-main p.sh-fig-title{margin:0 0 12px; font-weight:650; color:var(--sd-ink)}
.sh-unit{font-weight:400; color:var(--sd-mut)}
.sh-bars{list-style:none; margin:0; padding:0}
.sh-bars li{display:grid; grid-template-columns:minmax(0,6.5em) minmax(0,1fr) auto; align-items:center; gap:10px; margin:0 0 8px; font-size:14px; color:var(--sd-ink-2)}
.sh-bar{display:block; height:12px; border-radius:999px; background:var(--sd-surface); border:1px solid var(--sd-line); overflow:hidden}
.sh-bar > span{display:block; height:100%; background:var(--sd-mark)}
.sh-bar-value{color:var(--sd-ink); font-variant-numeric:tabular-nums}
.sd-main p.sh-conclusion{margin:12px 0 0; color:var(--sd-ink)}
.sh-points{list-style:none; margin:12px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px 16px; font-size:14px; color:var(--sd-ink); font-variant-numeric:tabular-nums}
.sh-points li{margin:0}
.sh-points span{color:var(--sd-mut)}
.sh-chart .sh-trend-line{fill:none; stroke:currentColor; stroke-width:2; stroke-dasharray:6 5}

/* —— C. Price information：价格板（数一律打码）、大图、三档 —— */
.sh-board th, .sh-board td{vertical-align:middle}
.sh-board thead th{white-space:nowrap}
.sh-board tr.sh-board-pending td{padding:24px 14px; text-align:center; color:var(--sd-ink-2)}
.sh-lock{display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:999px; font-size:13px; font-weight:600; white-space:nowrap;
  color:var(--sd-mut); background:var(--sd-bg); border:1px solid var(--sd-line-2)}
.sh-dir{font-weight:600; color:var(--sd-ink)}
.sh-dir-new, .sh-dir-mixed, .sh-dir-no_comparable{font-weight:500; color:var(--sd-ink-2)}
.sh-spark{display:block; color:var(--sd-mark); overflow:visible}
.sh-spark line{stroke:currentColor; stroke-width:1.8; stroke-linecap:round}
.sh-spark circle{fill:currentColor}
.sh-spark line.sh-slot{stroke:var(--sd-line-2); stroke-width:1}
@media (max-width:640px){
  .sh-board thead{display:none}
  .sh-board, .sh-board tbody{display:block}
  /* 小锁与方向一排、折线另起一行：三样挤一排时方向那一格只剩五六十像素，「Unchanged」「Mixed across manufacturers」（226 w4w 起；原来是 producers）从字中间断开（截图 2、3） */
  .sh-board tr{display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:2px 10px; padding:12px 14px; border-bottom:1px solid var(--sd-line)}
  .sh-board tbody tr:last-child{border-bottom:0}
  .sh-board th, .sh-board td{display:block; padding:0; border:0}
  .sh-board th, .sh-board td.sh-cond, .sh-board tr.sh-board-pending td, .sh-board td.sh-trend{grid-column:1 / -1}
  .sh-board td.sh-cond{font-size:14px; color:var(--sd-mut)}
  .sh-board td.sh-blank{display:none}
  .sh-board td.sh-val, .sh-board td.sh-dir, .sh-board td.sh-trend{margin-top:6px}
}
.sd-main p.sh-chart-title{margin:0 0 10px; font-weight:600; color:var(--sd-ink)}
.sh-chart-box{max-width:760px}
.sh-chart{display:block; width:100%; height:auto; color:var(--sd-mark)}
/* 图按宽度缩放：线宽与点的大小不跟着缩（non-scaling-stroke），手机上照样看得清；点是零长的圆头线 */
.sh-chart line, .sh-chart polyline{vector-effect:non-scaling-stroke}
.sh-chart .sh-axis{stroke:var(--sd-line-2); stroke-width:1}
.sh-chart .sh-band{fill:currentColor; fill-opacity:.16}
.sh-chart .sh-range{stroke:currentColor; stroke-opacity:.45; stroke-width:6; stroke-linecap:round}
.sh-chart .sh-median{stroke:currentColor; stroke-width:2.5}
.sh-chart .sh-median-dot, .sh-chart .sh-trend-dot{stroke:currentColor; stroke-width:7; stroke-linecap:round}
@media (max-width:640px){ .sh-chart .sh-range{stroke-width:4} .sh-chart .sh-median-dot, .sh-chart .sh-trend-dot{stroke-width:6} }
/* 图下面的横轴：格子数等于月数（行内样式给），各月的点正好在格子正中；年份从它的第一个月起；不超过 12 个月时另有一排月份，手机上隔一个写一个 */
.sh-months, .sh-years{list-style:none; margin:6px 0 0; padding:0; display:grid; font-size:12px; color:var(--sd-mut)}
.sh-months li, .sh-years li{margin:0; white-space:nowrap}
.sh-months li{text-align:center}
.sh-years li{padding-left:4px; border-left:1px solid var(--sd-line-2)}
.sh-years li.sh-short span{visibility:hidden}
@media (max-width:640px){ .sh-months li:nth-child(even), .sh-years li.sh-short-m span{visibility:hidden} }
.sh-tiers{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:12px}
@media (min-width:860px){ .sh-tiers{grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px} }
.sh-tiers li{margin:0; padding:18px 20px; background:var(--sd-surface); border:1px solid var(--sd-line); border-radius:12px}
.sh-tiers li:last-child{border-top:3px solid var(--sd-mark)}
.sh-tiers b{display:block; font-weight:650; color:var(--sd-ink); margin:0 0 4px}
.sh-tiers p{margin:0 !important; color:var(--sd-ink-2)}

/* —— 下半页的动作：一张卡（顶上一道主色），没登录是 Sign in ／ Request access，登录了是进表单与价格页的按钮 —— */
.sh-sec-action{padding:22px 20px; background:var(--sd-surface); border:1px solid var(--sd-line); border-top:3px solid var(--sd-mark); border-radius:12px}
@media (min-width:860px){ .sh-sec-action{padding:30px 36px} }
.sh-sec-action p{color:var(--sd-ink-2); max-width:62ch}
.sh-actions, .sh-sec-action .sf-gate{display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 0 !important}

/* —— 226 P9 Pricing 页（A1，指挥 10-15 20:03）：价卡窄屏一列、宽屏三列；价钱大字、单位小字；免费核验那一节第一句加重；购买三步编号 —— */
.sp-cards{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:12px}
@media (min-width:860px){ .sp-cards{grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px} }
/* 226 公司深度报告（A2；指挥 10-23 16:51 第 2 条）：按次四张时宽屏四张一行；不够宽（1080 以下）两张一行，免得每张太窄、标题断成两行（sp-cards-4，Sourcing_Pricing::cards 给） */
@media (min-width:860px){ .sp-cards-4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1080px){ .sp-cards-4{grid-template-columns:repeat(4,minmax(0,1fr))} }
.sp-card{margin:0; padding:18px 16px; background:var(--sd-surface); border:1px solid var(--sd-line); border-radius:12px}
.sp-card h3{font-size:18px; line-height:1.3; margin:0 0 8px}
.sp-card p{margin:0 0 8px; color:var(--sd-ink-2)}
.sp-card p:last-child{margin-bottom:0}
/* 226 B 块 A1（LK 10-22 12:5x 批）：价卡底下的 Request a quote 对齐在卡底 —— 卡片竖排，那一条推到底（同一排的卡一样高，几条链接在一条线上） */
.sp-card{display:flex; flex-direction:column}
.sp-card > .sp-card-quote{margin-top:auto; padding-top:8px}
/* 226 点按区（指挥 10-23 20:2x 定，A2 清单 B2）：卡片下面那两种链接是 18px 高的字链 —— 样子不动，用看不见的外框（照细栏主按钮 .sd-mact::after）
   把点得到的高度放到 44（上下各伸 13）。Supplier files 那张上下两条只隔 15–16px，各伸 13 会叠：上面那条往上 19、往下 7，下面那条往上 8、往下 18，
   两条各 44、不相叠（A2 在线上用浏览器自己的 elementFromPoint 量过，390、768；docs/parallel/agent2-redesign-226/tap-fix/） */
.sp-card-link a{position:relative}
.sp-card-link a::after{content:""; position:absolute; left:0; right:0; top:-13px; bottom:-13px}
.sp-card > .sp-card-quote:not(:last-child) a::after{top:-19px; bottom:-7px}
.sp-card > .sp-card-quote ~ .sp-card-link a::after{top:-8px; bottom:-18px}
.sp-price b{font-size:28px; line-height:1.15; font-weight:700; color:var(--sd-ink)}
.sp-price span{font-size:15px; color:var(--sd-mut)}
.sh-sec > p.sp-lead{font-size:18px; font-weight:650; color:var(--sd-ink)}
.sp-sec-single > .sh-note, .sp-sec-bundles > .sh-note{margin-top:14px !important}
.sp-steps{margin:0; padding:0 0 0 1.4em; color:var(--sd-ink-2); max-width:62ch}
.sp-steps li{margin:0 0 6px}

/* 226 注册重做（指挥 10-17 07:3x）：步骤条（Sourcing_Site::steps_html；类名 sd-progress，首页的 sd-steps 是另一样）—— 一行「Step N of M · 这一步」，下面一条分段的细条；
   做完的与当前的那几段着色，宽屏段下写每一步的名字（做完的打勾），窄于 720px 只留上面那一行（名字照样给读屏）。只用站上的变量 */
.sd-progress{margin:0 0 20px}
.sd-progress-now{margin:0 0 8px; font-size:.875rem; font-weight:600; color:var(--sd-mut)}
.sd-progress-now .sd-progress-name{color:var(--sd-ink)}
.sd-progress-list{list-style:none; margin:0; padding:0; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:6px}
.sd-progress-list li{margin:0; padding:6px 0 0; list-style:none; border-top:4px solid var(--sd-line); font-size:.8125rem; line-height:1.35; color:var(--sd-mut)}
.sd-progress-list li.is-done, .sd-progress-list li.is-current{border-top-color:var(--sd-accent)}
.sd-progress-list li.is-current{color:var(--sd-ink); font-weight:600}
.sd-progress-list li.is-done span::before{content:"\2713\00a0"}
/* 1b（指挥 10-17 08:1x 第 3 条）：深色里主色那一段跟没做的那几段只差约 1.3:1 → 做完的与当前的改用站上链接的蓝（--sd-link，约 5.7:1）；浅色不动。
   照站上深色的规矩只在 .sd-body 上换变量（--sd-progress-on，浅色没设就是主色），两段逐字相同 */
.sd-progress-list li.is-done, .sd-progress-list li.is-current{border-top-color:var(--sd-progress-on, var(--sd-accent))}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) .sd-body{
    --sd-progress-on:var(--sd-link);
  }
}
html[data-theme="dark"] .sd-body{
    --sd-progress-on:var(--sd-link);
}
@media (max-width:719.98px){
  .sd-progress-list li{padding-top:0; border-top-width:5px}
  .sd-progress-list li span{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
}

/* ===========================================================================
   226 会员价格页的历史图（A2，2026-10-18；LK 10-18 批的样稿 mock-c12；Sourcing_Price_Chart）。下面是样稿 price-pages/mock-chart.css 原样搬来，一字不改：
   图只在本主题里出（Sourcing_Buyer_Portal::view_price：theme_heads_view），所以放在这里、用站上的 --sd-* 变量。只改了两处：三种线的颜色挪进文件前面那一组变量
   （--sd-chart-1／2／3，浅深各一套，深色两段逐字相同 —— 站点测试 8.3、9.22 要求颜色只在变量那几段），样稿里 .pc 自己的两段深色就不要了；第一段注释里的两个色值换成字。
   =========================================================================== */
/* 226 客户看的价格历史图（A2 样稿，2026-10-18；A3 W41）：一张图只放同一个单位的线；线 2px、点 8px 带一道底色的环；网格 1px 实线退到底色上一级；
   字都用站上的字色（不用线的颜色）；线的颜色照 dataviz 参考调色板前三格，浅深各一套，对站上浅色与深色两种卡片底核过（样稿 README）。
   深色两处照 site.css 的做法写两遍：系统深色且没选浅、选了深。 */
.pc{--pc-1:var(--sd-chart-1); --pc-2:var(--sd-chart-2); --pc-3:var(--sd-chart-3);
  margin:12px 0 0; padding:16px 16px 12px; background:var(--sd-surface); border:1px solid var(--sd-line); border-radius:12px}
.pc-cap{display:flex; flex-wrap:wrap; gap:2px 12px; align-items:baseline; margin:0 0 12px; font-size:14px; color:var(--sd-ink-2)}
.pc-unit{font-weight:650; color:var(--sd-ink)}
.pc-plot{position:relative; padding-left:52px; outline:none}
.pc-plot:focus-visible{outline:2px solid var(--sd-accent); outline-offset:6px; border-radius:4px}
.pc-area{position:relative; height:180px}
@media (min-width:860px){ .pc-area{height:240px} }
.pc-svg{display:block; width:100%; height:100%; overflow:visible}
/* 226 动效与质感：线与点那一层（Sourcing_Motion::CHART_CSS） */
.pc-svg.pc-lines{position:absolute; inset:0}
.pc-grid{stroke:var(--sd-line); stroke-width:1; vector-effect:non-scaling-stroke}
.pc-line{stroke-width:2; stroke-linecap:round; fill:none; vector-effect:non-scaling-stroke}
.pc-ring{stroke:var(--sd-surface); stroke-width:12; stroke-linecap:round; vector-effect:non-scaling-stroke}
.pc-dot{stroke-width:8; stroke-linecap:round; vector-effect:non-scaling-stroke}
.pc-line.pc-s1, .pc-dot.pc-s1{stroke:var(--pc-1)}
.pc-line.pc-s2, .pc-dot.pc-s2{stroke:var(--pc-2)}
.pc-line.pc-s3, .pc-dot.pc-s3{stroke:var(--pc-3)}
.pc-y{list-style:none; margin:0; padding:0; position:absolute; left:0; top:0; bottom:0; width:44px}
.pc-y li{position:absolute; right:0; margin:0; transform:translateY(-50%); font-size:12px; line-height:1; color:var(--sd-mut); font-variant-numeric:tabular-nums}
/* 线尾那一个价：在点的左上（不会出右边的界） */
.pc-end{position:absolute; transform:translate(-100%,-170%); padding:1px 5px; border-radius:4px; background:var(--sd-surface); font-size:12px; font-weight:650;
  color:var(--sd-ink); white-space:nowrap; font-variant-numeric:tabular-nums; pointer-events:none}
.pc-cross{position:absolute; top:0; bottom:0; width:0; border-left:1px solid var(--sd-line-2); pointer-events:none}
.pc-tip{position:absolute; top:4px; z-index:2; transform:translateX(12px); min-width:132px; max-width:240px; padding:8px 10px; background:var(--sd-surface);
  border:1px solid var(--sd-line-2); border-radius:8px; box-shadow:var(--sd-shadow); font-size:13px; pointer-events:none}
.pc-tip.pc-tip-left{transform:translateX(calc(-100% - 12px))}
.sd-main .pc-tip p{margin:0}
.pc-tip-m{margin-bottom:4px !important; color:var(--sd-mut)}
.pc-tip-r{display:flex; align-items:center; gap:6px; margin-top:2px !important}
.pc-tip-r b{color:var(--sd-ink); font-variant-numeric:tabular-nums}
.pc-tip-l{color:var(--sd-ink-2)}
.pc-key{display:inline-block; width:14px; height:2px; border-radius:1px; flex:none}
.pc-key.pc-s1{background:var(--pc-1)}
.pc-key.pc-s2{background:var(--pc-2)}
.pc-key.pc-s3{background:var(--pc-3)}
.pc-x{padding-left:52px; margin-top:6px}
.pc-legend{list-style:none; margin:10px 0 0; padding:0 0 0 52px; display:flex; flex-wrap:wrap; gap:6px 16px; font-size:14px; color:var(--sd-ink-2)}
.pc-legend li{display:flex; align-items:center; gap:8px; margin:0}
.pc-one{color:var(--sd-ink-2)}
.pc-table{margin-top:12px}
.pc-table > summary{display:flex; align-items:center; min-height:44px; cursor:pointer; font-weight:600; color:var(--sd-link)}
/* 不靠颜色也认得出（指挥 01:16）：每条线的点各一种形状 —— 第一条实心圆、第二条实心方、第三条空心圆；图例、提示框、线尾同一个记号 */
.pc-dot-2{stroke-linecap:square; stroke-width:7}
.pc-ring-2{stroke-linecap:square; stroke-width:11}
.pc-hole{stroke:var(--sd-surface); stroke-width:3.5; stroke-linecap:round; vector-effect:non-scaling-stroke}
.pc-key{position:relative; width:22px}
.pc-mk{position:absolute; left:50%; top:50%; width:8px; height:8px; transform:translate(-50%,-50%); border-radius:50%; background:var(--pc-1)}
.pc-mk-2{border-radius:1px; width:7px; height:7px; background:var(--pc-2)}
.pc-mk-3{background:var(--sd-surface); border:2px solid var(--pc-3); box-sizing:border-box}
.pc-end .pc-mk{position:relative; display:inline-block; left:auto; top:auto; transform:none; margin-right:4px; vertical-align:0}
/* 最低的那一条线的线尾标放在点的左下（与上面那几条不叠在一起） */
.pc-end-below{transform:translate(-100%,60%)}
/* 读数那一框（第二版）：挂在整张卡上（不在图里），宽屏跟着竖线浮；价不折行；手机上一整行放在横轴下面，不盖住线 */
.pc{position:relative}
.pc-tip-r b{flex:none; white-space:nowrap}
.pc-tip-r .pc-key{flex:none}
@media (max-width:599.98px){
  .pc-tip{position:static; transform:none !important; left:auto !important; top:auto !important; max-width:none; min-width:0; margin:10px 0 0; box-shadow:none}
  .pc-tip-r{align-items:flex-start}
  .pc-tip-r .pc-key{margin-top:9px}
}
/* 线尾的标（第三版）：手机上不出（会盖住线；靠图例与提示框里的形状认）；宽屏放在图右边留出的一条空里，与线尾同一个高度 */
@media (max-width:599.98px){ .pc-end{display:none} }
@media (min-width:600px){
  .pc-area{margin-right:168px}
  .pc-end-gutter{transform:translate(12px,-50%)}
  .pc-end-gutter.pc-end-below{transform:translate(12px,8%)}
}
/* 第四版：宽屏上横轴与图同宽（右边同样留出线尾那一条空），月份才对得上点；提示框按内容宽、至多约 420px（名字长，窄了会折成好几行） */
@media (min-width:600px){
  .pc-x{margin-right:168px}
  .pc-tip{width:max-content; max-width:420px}
}
/* 第五版：提示框的左右由脚本算（先放竖线右边，放不下放左边，再不行贴着卡的左边），不再用 transform 推，免得出卡的边 */
@media (min-width:600px){ .pc-tip, .pc-tip.pc-tip-left{transform:none} }
/* 第六版：那张表的表头不在词中间断；记号与名字一行 */
.pc-table th{overflow-wrap:normal; word-break:normal}
.pc-table thead .pc-mk{position:relative; display:inline-block; left:auto; top:auto; transform:none; margin-right:6px; vertical-align:1px}
/* 第七版：看数的表一条线一张（照现在客户那一页的写法）；手机上一张接一张，宽屏并排 */
.pc-tables{display:grid; grid-template-columns:minmax(0,1fr); gap:14px; margin-top:6px}
@media (min-width:600px){ .pc-tables{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))} }
.sd-main .pc-tline h4{display:flex; align-items:baseline; gap:8px; margin:0 0 6px; font-size:14px; font-weight:600; color:var(--sd-ink-2); line-height:1.4}
.pc-tline .pc-mk{position:relative; display:inline-block; left:auto; top:auto; transform:none; flex:none}
/* 第八版（指挥 10-18 01:29：宽屏读数框盖住了左边那几个点）：宽屏上读数框只写记号、价与报价方（整个名字在下面的图例里），框小了；放哪里由脚本在四处里挑盖得最少的。
   手机上照旧写整个名字（框在横轴下面，不盖线） */
.pc-tip-s{color:var(--sd-ink-2)}
@media (min-width:600px){ .pc-tip-l{display:none} .pc-tip{max-width:300px} }
@media (max-width:599.98px){ .pc-tip-s{display:none} }

/* 226 会员价格页（指挥 10-18 10:21 定甲）：大标题是产品名，下面一行是规格（Sourcing_Buyer_Portal::view_price：sourcing-buyer-spec），跟公开页一节的标题一样分量 */
.sd-main .sourcing-buyer-spec{margin:-6px 0 6px; font-size:18px; font-weight:650; line-height:1.4; color:var(--sd-ink)}

/* 226 产品价格公开页（A2，10-18；LK 10-18 批 review.html，样稿 price-pages/mock-new.css 里 pp-* 那几条原样搬来）：一页一个产品 —— 页头一句、CAS、
   本月那一条（月份、家数）；每个规格一张卡（规格名、本月方向、那一句、逐月一条）；页尾怎么算的、这个产品的三样服务、一个主按钮。
   Price information 页最上面「Products we track」。只用站上的 --sd-* 变量，深浅两种照 token 走；涨跌不用红绿（对买家涨跌不一定是坏事），一律墨色加箭头。 */
.pp-meta{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:10px 0 0 !important; color:var(--sd-ink-2)}
.pp-month{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; margin:20px 0 0; padding:14px 16px; border-radius:12px;
  background:var(--sd-accent-soft); color:var(--sd-ink)}
.pp-month-k{font-weight:650}
.pp-month-v{color:var(--sd-ink-2)}
.pp > .pp-none{margin:10px 0 0 !important; color:var(--sd-ink-2)}

.pp-sec{margin-top:16px; padding:18px 16px; background:var(--sd-surface); border:1px solid var(--sd-line); border-radius:12px; box-shadow:var(--sd-shadow)}
@media (min-width:860px){ .pp-sec{padding:22px 26px} }
.pp-sec-head{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px}
.sd-main .pp-sec h2{font:750 20px/1.25 var(--sd-display); margin:0}
.pp-dir{display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 14px; border-radius:999px; border:1px solid var(--sd-line-2);
  background:var(--sd-bg); font-weight:650; font-size:17px; color:var(--sd-ink)}
.pp-dir-new, .pp-dir-mixed, .pp-dir-no_comparable{font-weight:550; font-size:15px; color:var(--sd-ink-2)}
.pp-sum, .pp-sec .pp-none{margin:10px 0 0 !important; color:var(--sd-ink-2)}
.sd-main .pp-h{font-size:13px; font-weight:650; letter-spacing:.02em; color:var(--sd-mut); margin:18px 0 8px}
.pp-hist{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(136px,1fr)); gap:6px}
.pp-hist li{margin:0; padding:8px 10px; border-radius:8px; border:1px solid transparent; background:var(--sd-bg); display:flex; flex-direction:column; gap:2px;
  min-height:58px; overflow-wrap:normal; word-break:normal}
.pp-hist-m{font-size:13px; color:var(--sd-mut)}
.pp-hist-d{font-size:14px; font-weight:600; color:var(--sd-ink); line-height:1.3}
.pp-hist-new .pp-hist-d, .pp-hist-mixed .pp-hist-d, .pp-hist-no_comparable .pp-hist-d{font-weight:500; color:var(--sd-ink-2)}
/* 那个月没有方向（不够两家或没发表）：空的一格、虚线框，不画任何记号（「—」是 Unchanged 的箭头，不能借） */
.pp-hist li.pp-hist-empty{background:transparent; border:1px dashed var(--sd-line-2)}

.pp-svc{list-style:none; margin:0; padding:0; display:grid; gap:10px}
@media (min-width:860px){ .pp-svc{grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px} }
.pp-svc li{margin:0; padding:16px 18px; background:var(--sd-surface); border:1px solid var(--sd-line); border-radius:12px; display:flex; flex-direction:column; gap:4px}
.pp-svc-link{display:inline-flex; align-items:center; min-height:24px; font-weight:650; color:var(--sd-link); text-decoration:underline; text-underline-offset:3px}
.pp-svc-text{color:var(--sd-ink-2); font-size:15px}

/* 226 月度价格邮件（A2，10-19；LK 10-19 11:0x 批的样子，样稿 price-email/mock.css 那几条原样搬来，只用变量）：产品页本月那一条下面的 Follow ——
   没关注是描边的次按钮加铃铛；关注了换成浅青底、主色的边与勾，字照旧墨色（按下的状态写在 aria-pressed 上）。
   他自己关了邮件时旁边一句、一个字样的按钮（Turn them on，指挥 11:24 ③乙）；上一下没办成时整行一句 */
.pp-follow{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin:14px 0 0}
.pp-follow-btn{gap:8px; font:inherit; font-size:15px; font-weight:650; cursor:pointer}
.pp-follow-ic{flex:none}
.pp-follow-btn[aria-pressed="true"]{background:var(--sd-accent-soft); border-color:var(--sd-accent); color:var(--sd-ink)}
.pp-follow-btn[aria-pressed="true"] .pp-follow-ic{color:var(--sd-accent)}
.pp-follow-note{margin:0 !important; font-size:15px; color:var(--sd-ink-2)}
.pp-follow-on{display:inline-block; min-height:24px; margin:0; padding:0; border:0; background:none; font:inherit; color:var(--sd-link);
  text-decoration:underline; text-underline-offset:2px; cursor:pointer}
.pp-follow .spe-failed{flex-basis:100%; margin:0 !important; font-size:15px; font-weight:600; color:var(--sd-ink)}
@media (max-width:639.98px){ .pp-follow-btn{width:100%} }
/* 退订那几页：一句、一个按钮（<button> 也照 .sd-btn 的字）；退了那一页「Turn them back on」（一张表）与「Go to My account」并排 */
.sbe-page .sh-lede{margin:0 0 4px !important}
.sbe-page button.sd-btn{font:inherit; font-size:15px; font-weight:600; cursor:pointer}
.sbe-page .sbe-page-note{margin:18px 0 0 !important; color:var(--sd-ink-2)}
.sbe-page .sh-lede + p{margin-top:12px !important}
.sbe-page form.sbe-inline{margin:0}
/* 键盘焦点框：新加的几种 <button> 照站上链接那一种（--sd-link，2px，离开 2px） */
.pp-follow-btn:focus-visible, .pp-follow-on:focus-visible, .sbe-page button.sd-btn:focus-visible{outline:2px solid var(--sd-link); outline-offset:2px}

/* Price information 页最上面：Products we track（只列够过格的产品；本月够格的规格各一行方向，这个月一节都不够的写 No direction this month） */
.pp-index-head{display:flex; align-items:center; gap:12px}
.sd-main .pp-index-head h2{margin:0}
.pp-index-sub{margin:4px 0 12px !important; color:var(--sd-mut)}
.pp-items{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.pp-items li{margin:0}
.pp-item{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 12px; padding:14px 16px; background:var(--sd-surface); border:1px solid var(--sd-line);
  border-radius:12px; color:var(--sd-ink)}
/* 整张卡是一个链接：只给产品名划线（站上的链接样子会把卡里的字全划上） */
.sd-main a.pp-item, .sd-main a.pp-item *{text-decoration:none}
.sd-main a.pp-item .pp-item-name{text-decoration:underline; text-underline-offset:3px}
.pp-item:hover{box-shadow:var(--sd-shadow-hover)}
.pp-item-name{font-weight:650; color:var(--sd-link); text-decoration:underline; text-underline-offset:3px}
.pp-item-cas{color:var(--sd-mut); font-size:14px; justify-self:end}
.pp-item-dirs{grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:6px 16px}
.pp-item-spec{color:var(--sd-ink-2)}
.pp-mini{font-weight:600; color:var(--sd-ink)}
.pp-mini-quiet{font-weight:400; color:var(--sd-mut)}
.pp-item-count{grid-column:1 / -1; color:var(--sd-ink-2); font-size:14px}
@media (min-width:860px){
  .pp-item{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) auto; align-items:baseline; padding:16px 20px}
  .pp-item-cas{justify-self:start; grid-column:1; grid-row:2}
  .pp-item-dirs{grid-column:2; grid-row:1 / span 2}
  .pp-item-count{grid-column:3; grid-row:1}
}