/* ==========================================================================
   inner-pages-reference.css — 全站内页统一视觉层（对齐首页风格）
   加载顺序：必须在 localized-site.css 与 surmount-premium-system.css 之后。
   色板基准：深蓝 #0d3554 · 蓝 #1677d2 · 亮蓝 #82c9ff · 天蓝 #92caff
             墨 #102b3d · 线 #d7e4eb · 浅底 #edf5fa
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Token 重映射：六套体系变量一次性对齐首页色板
   -------------------------------------------------------------------------- */
:root {
  /* sd- 通用服务页 */
  --sd-blue: #0d70ba;
  --sd-ink: #102b3d;
  --sd-text: #5a6d78;
  --sd-line: #d7e4eb;
  --sd-soft: #edf5fa;
  --sd-white: #ffffff;
  /* scp- 采购页 */
  --scp-blue: #0d70ba;
  --scp-ink: #102b3d;
  --scp-text: #5a6d78;
  --scp-line: #d7e4eb;
  --scp-soft: #edf5fa;
  --scp-white: #ffffff;
  /* oc- 公司页 */
  --oc-blue: #0d70ba;
  --oc-blue-dark: #0d3554;
  --oc-ink: #102b3d;
  --oc-text: #5a6d78;
  --oc-line: #d7e4eb;
  --oc-soft: #edf5fa;
  --oc-white: #ffffff;
  /* ap- 合作伙伴页 */
  --ap-blue: #0d70ba;
  --ap-ink: #102b3d;
  --ap-text: #5a6d78;
  --ap-line: #d7e4eb;
  --ap-soft: #edf5fa;
  --ap-white: #ffffff;
  /* pi- 付款页 */
  --pi-blue: #0d70ba;
  --pi-blue-dark: #0d3554;
  --pi-ink: #102b3d;
  --pi-text: #5a6d78;
  --pi-line: #d7e4eb;
  --pi-soft: #edf5fa;
  --pi-white: #ffffff;
  /* dsp- dropshipping 页 */
  --dsp-blue: #0d70ba;
  --dsp-ink: #102b3d;
  --dsp-text: #5a6d78;
  --dsp-line: #d7e4eb;
  --dsp-soft: #edf5fa;
  --dsp-white: #ffffff;
  /* sp- 基座 */
  --sp-blue: #0d70ba;
  --sp-blue-dark: #0d3554;
  --sp-ink: #102b3d;
  --sp-line: #d7e4eb;
  --sp-muted: #edf5fa;
  --sp-text: #5a6d78;
  --sp-white: #ffffff;
}

/* --------------------------------------------------------------------------
   2. 按钮方角化：压过 localized-site.css 与 surmount-premium-system.css
      的两处 border-radius:10px !important（本文件最后加载，同级 !important
      靠源顺序取胜）。
   -------------------------------------------------------------------------- */
.sd-page .sp-button,
.sd-page .sd-button,
.scp-page .sp-button,
.scp-page .scp-button,
.oc-page .sp-button,
.oc-page .oc-button,
.ap-page .sp-button,
.ap-page .ap-button,
.pi-page .sp-button,
.pi-page .pi-button,
.dsp-page .sp-button,
.dsp-page .dsp-button,
.request-page .sp-button,
.products-page .sp-button,
.blog-page .sp-button,
.article-page .sp-button,
.private-page .sp-button,
.development-page .sp-button,
.sm-whatsapp-button {
  border-radius: 0 !important;
}

/* Keep every action comfortably tappable, including controls whose page-level
   rules use a shorter visual height. */
.sd-page .sp-button,
.sd-page .sd-button,
.scp-page .sp-button,
.scp-page .scp-button,
.oc-page .sp-button,
.oc-page .oc-button,
.ap-page .sp-button,
.ap-page .ap-button,
.pi-page .sp-button,
.pi-page .pi-button,
.dsp-page .sp-button,
.dsp-page .dsp-button,
.request-page .sp-button,
.products-page .sp-button,
.blog-page .sp-button,
.article-page .sp-button,
.private-page .sp-button,
.development-page .sp-button,
.sp-menu-toggle,
.sp-mobile-close {
  min-width: 44px;
  min-height: 44px;
}
@media (max-width: 900px) {
  .sd-actions .sd-button.secondary,
  .scp-actions .scp-button.secondary {
    min-height: 44px !important;
  }
}

/* 主按钮：白底深蓝字（hero 与 CTA 深色带内）/ 深蓝底白字（正文内） */
.sp-button.primary,
.sd-button.primary,
.scp-button.primary,
.oc-button.primary,
.ap-button.primary,
.pi-button.primary,
.dsp-button.primary {
  border-color: #0d3554 !important;
  background: #0d3554 !important;
  color: #ffffff !important;
}
.sd-hero .sp-button.primary,
.sd-hero .sd-button.primary,
.scp-hero .scp-button.primary,
.oc-hero .oc-button.primary,
.ap-hero .ap-button.primary,
.pi-hero .pi-button.primary,
.dsp-hero .dsp-button.primary {
  border-color: #ffffff !important;
  background: #ffffff !important;
  color: #0d3554 !important;
}

/* CTA 深色带（--xx-ink 底）与 hero 同理：通用规则的 #0d3554 深蓝
   会沉进带子底色里，这里同样换成白底深蓝字。 */
.sd-cta .sp-button.primary,
.sd-cta .sd-button.primary,
.blog-subscribe .sd-button.primary,
.scp-contact .scp-button.primary,
.oc-contact .oc-button.primary,
.ap-contact .ap-button.primary,
.pi-contact .pi-button.primary,
.dsp-close .dsp-button.primary {
  border-color: #ffffff !important;
  background: #ffffff !important;
  color: #0d3554 !important;
}

/* Lock deep-section CTA colors across link and interaction states. This also
   neutralizes the optional sliding ::before layer used by older deployments,
   which could otherwise create white-on-white or dark-on-dark buttons. */
:is(.sd-cta, .blog-subscribe, .scp-contact, .oc-contact, .ap-contact, .pi-contact, .dsp-close)
  :is(.sd-button, .scp-button, .oc-button, .ap-button, .pi-button, .dsp-button).primary:is(:link, :visited) {
  border-color: #ffffff !important;
  background: #ffffff !important;
  color: #0d3554 !important;
  -webkit-text-fill-color: #0d3554 !important;
}
:is(.sd-cta, .blog-subscribe, .scp-contact, .oc-contact, .ap-contact, .pi-contact, .dsp-close)
  :is(.sd-button, .scp-button, .oc-button, .ap-button, .pi-button, .dsp-button).primary:is(:hover, :focus-visible, :active) {
  border-color: #dcecf5 !important;
  background: #dcecf5 !important;
  color: #0d3554 !important;
  -webkit-text-fill-color: #0d3554 !important;
}
:is(.sd-cta, .blog-subscribe, .scp-contact, .oc-contact, .ap-contact, .pi-contact, .dsp-close)
  :is(.sd-button, .scp-button, .oc-button, .ap-button, .pi-button, .dsp-button).primary::before {
  background: #dcecf5 !important;
}
:is(.sd-cta, .blog-subscribe, .scp-contact, .oc-contact, .ap-contact, .pi-contact, .dsp-close)
  :is(.sd-button, .scp-button, .oc-button, .ap-button, .pi-button, .dsp-button).secondary:is(:link, :visited) {
  border-color: rgba(255, 255, 255, .6) !important;
  background: transparent !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
:is(.sd-cta, .blog-subscribe, .scp-contact, .oc-contact, .ap-contact, .pi-contact, .dsp-close)
  :is(.sd-button, .scp-button, .oc-button, .ap-button, .pi-button, .dsp-button).secondary:is(:hover, :focus-visible, :active) {
  border-color: #ffffff !important;
  background: #ffffff !important;
  color: #0d3554 !important;
  -webkit-text-fill-color: #0d3554 !important;
}
:is(.sd-cta, .blog-subscribe, .scp-contact, .oc-contact, .ap-contact, .pi-contact, .dsp-close)
  :is(.sd-button, .scp-button, .oc-button, .ap-button, .pi-button, .dsp-button).secondary::before {
  background: #ffffff !important;
}
.sp-button.secondary,
.sd-button.secondary,
.scp-button.secondary,
.oc-button.secondary,
.ap-button.secondary,
.pi-button.secondary,
.dsp-button.secondary {
  border-color: rgba(255, 255, 255, .6) !important;
  background: transparent !important;
  color: #ffffff !important;
}
/* 正文内次级按钮（浅底上） */
.sd-section .sp-button.secondary,
.sd-section .sd-button.secondary,
.request-plans + * .sp-button.secondary {
  border-color: #1677d2 !important;
  color: #1677d2 !important;
}

/* 2.3 白字按钮的浏览器原生高亮修正：
   移动端点按会闪系统浅色 tap-highlight、桌面拖蓝选中跟随系统主题色，
   两种情况都会在白字按钮上叠出白底。点按高亮透明化（按压缩放与
   阴影反馈仍由 localized-site.css 提供），选中色固定为品牌蓝底白字。 */
.sd-page .sp-button,
.sd-page .sd-button,
.scp-page .sp-button,
.scp-page .scp-button,
.oc-page .sp-button,
.oc-page .oc-button,
.ap-page .sp-button,
.ap-page .ap-button,
.pi-page .sp-button,
.pi-page .pi-button,
.dsp-page .sp-button,
.dsp-page .dsp-button,
.request-page .sp-button,
.products-page .sp-button,
.blog-page .sp-button,
.article-page .sp-button,
.private-page .sp-button,
.development-page .sp-button,
.sm-whatsapp-button {
  -webkit-tap-highlight-color: transparent;
}

::selection {
  background: #1677d2;
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   3. Hero 对齐首页：#0d3554 色调遮罩 + 左侧网格纹理 + 编辑感标题
   -------------------------------------------------------------------------- */

/* 3.1 遮罩统一为 #0d3554 色调（六个体系都用实体 *-hero-overlay div） */
.sd-hero-overlay,
.scp-hero-overlay,
.oc-hero-overlay,
.ap-hero-overlay,
.pi-hero-overlay,
.dsp-hero-overlay {
  background:
    linear-gradient(90deg, #0d3554 0%, rgba(13, 53, 84, .93) 30%, rgba(13, 53, 84, .55) 62%, rgba(13, 53, 84, .22) 100%),
    linear-gradient(180deg, rgba(13, 53, 84, .3), rgba(13, 53, 84, .12) 55%, rgba(13, 53, 84, .45)) !important;
}

/* 3.2 左侧网格纹理（52px，与首页一致），只覆盖 hero 左侧 60% */
.sd-hero::after,
.scp-hero::after,
.oc-hero::after,
.ap-hero::after,
.pi-hero::after,
.dsp-hero::after {
  position: absolute;
  inset: 0 auto 0 0;
  width: 60%;
  content: "";
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 66%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 66%, transparent 100%);
  opacity: .8;
}
/* 旧体系若已占用 ::after，改挂到 hero-content 前的伪元素上 */
.sd-hero .sd-shell::before,
.scp-hero-content::before,
.oc-hero-content::before { content: none; }

/* 3.3 编辑感标题：负字距（zh/ar 语言守卫降级） */
.sd-hero h1,
.scp-hero h1,
.oc-hero h1,
.ap-hero h1,
.pi-hero h1,
.dsp-hero h1 {
  letter-spacing: -.055em !important;
}
html[lang^="zh"] .sd-hero h1,
html[lang^="zh"] .scp-hero h1,
html[lang^="zh"] .oc-hero h1,
html[lang^="zh"] .ap-hero h1,
html[lang^="zh"] .pi-hero h1,
html[lang^="zh"] .dsp-hero h1,
html[lang^="ar"] .sd-hero h1,
html[lang^="ar"] .scp-hero h1,
html[lang^="ar"] .oc-hero h1,
html[lang^="ar"] .ap-hero h1,
html[lang^="ar"] .pi-hero h1,
html[lang^="ar"] .dsp-hero h1 {
  letter-spacing: -.02em !important;
}
/* 内页区块 h2 同步收紧 */
.sd-section h2,
.scp-intro h2, .scp-plan h2, .scp-process h2, .scp-faq h2, .scp-contact h2,
.oc-section h2,
.ap-section h2,
.pi-section h2,
.dsp-section h2 {
  letter-spacing: -.04em;
}
html[lang^="zh"] .sd-section h2,
html[lang^="ar"] .sd-section h2,
html[lang^="zh"] .oc-section h2,
html[lang^="ar"] .oc-section h2 {
  letter-spacing: -.015em;
}

/* 3.4 Kicker：#92caff + mono + 圆点前缀（与首页一致） */
.sd-hero .sd-kicker,
.scp-hero .scp-kicker,
.oc-hero .oc-kicker,
.ap-hero .ap-kicker,
.pi-hero .pi-kicker,
.dsp-hero .dsp-kicker {
  color: #92caff !important;
  font-family: "JetBrains Mono", "DM Mono", monospace;
  letter-spacing: .14em;
}
.sd-hero .sd-kicker::before,
.scp-hero .scp-kicker::before,
.oc-hero .oc-kicker::before,
.ap-hero .ap-kicker::before,
.pi-hero .pi-kicker::before,
.dsp-hero .dsp-kicker::before {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 10px;
  border-radius: 50%;
  background: #2db5ff;
  box-shadow: 0 0 0 4px rgba(45, 181, 255, .18);
  content: "";
  vertical-align: 1px;
}

/* 3.5 Hero facts 条：白底 + 深蓝数字 + 细描边 */
.sd-hero-facts,
.scp-facts,
.oc-hero-facts,
.ap-focus-strip,
.pi-method-strip {
  border: 1px solid #d7e4eb;
  border-right: 0;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 -18px 44px rgba(13, 53, 84, .16);
}
.sd-hero-facts strong,
.scp-facts strong,
.oc-hero-facts strong {
  color: #0d3554 !important;
}
.sd-hero-facts span,
.scp-facts span,
.oc-hero-facts span {
  color: #5a6d78;
}

/* --------------------------------------------------------------------------
   4. 硬编码色清理
   -------------------------------------------------------------------------- */
/* 旧亮蓝 kicker */
.sd-hero .sd-kicker, .sd-intro .sd-kicker { color: #92caff; }
/* 正文链接统一 */
.sd-section a:not(.sp-button):not(.sd-button),
.scp-intro a:not(.scp-button), .scp-plan a:not(.scp-button),
.oc-section a:not(.oc-button),
.pi-section a:not(.pi-button) { color: #1677d2; }
/* products 分类 hover */
.products-page .product-categories a:hover,
.products-page .product-categories a:focus-visible {
  box-shadow: inset 0 -3px 0 #1677d2, inset 0 0 0 1px rgba(22, 119, 210, .35);
  background: #edf5fa;
}
/* request 表单色 */
.request-page .request-form { background: #ffffff; }
.request-page .request-form legend,
.request-page .request-form label { color: #102b3d; }
/* blog article 体系 */
.article-page .article-hero { background: #0d3554; }
.article-page .article-meta { color: #92caff; }
.article-page .article-body a { color: #1677d2; }

/* --------------------------------------------------------------------------
   5. 表单现代化：圆角输入 + focus ring
   -------------------------------------------------------------------------- */
.request-field input,
.request-field select,
.request-field textarea {
  border-radius: 10px;
  border-color: #ccd8dd;
  background: #fbfdfe;
}
.request-field input:focus,
.request-field select:focus,
.request-field textarea:focus {
  border-color: #1677d2;
  box-shadow: 0 0 0 3px rgba(22, 119, 210, .14);
}
/* 资源订阅输入（首页/博客共用形态） */
.sm-resource-fields input {
  border-radius: 10px;
}

/* --------------------------------------------------------------------------
   6. 区块节奏统一：分隔线 + 浅底
   -------------------------------------------------------------------------- */
.sd-section, .scp-intro, .scp-plan, .oc-section, .ap-section, .pi-section, .dsp-section { border-color: #d7e4eb; }
.sd-section:nth-child(even), .sd-grid-alt { background: #edf5fa; }
/* 区块 kicker 统一蓝 + mono */
.sd-intro .sd-kicker, .sd-section .sd-kicker,
.scp-index, .oc-section-kicker, .ap-kicker, .pi-kicker, .dsp-kicker {
  color: #1677d2;
  font-family: "JetBrains Mono", "DM Mono", monospace;
  letter-spacing: .12em;
}

/* --------------------------------------------------------------------------
   7. 响应式镜像（对齐 mobile-optimizations.css 断点，防止被压回）
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .sd-hero::after, .scp-hero::after, .oc-hero::after,
  .ap-hero::after, .pi-hero::after, .dsp-hero::after {
    width: 100%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 55%);
    mask-image: linear-gradient(180deg, #000 0%, transparent 55%);
    opacity: .55;
  }
  .sd-hero-overlay, .scp-hero-overlay, .oc-hero-overlay,
  .ap-hero-overlay, .pi-hero-overlay, .dsp-hero-overlay {
    background: linear-gradient(90deg, rgba(13, 53, 84, .9), rgba(13, 53, 84, .62)) !important;
  }
  .sd-hero-facts, .scp-facts, .oc-hero-facts,
  .ap-focus-strip, .pi-method-strip {
    border-right: 1px solid #d7e4eb;
    border-top: 1px solid #d7e4eb;
  }
}
@media (max-width: 700px) {
  .sd-hero h1, .scp-hero h1, .oc-hero h1,
  .ap-hero h1, .pi-hero h1, .dsp-hero h1 {
    letter-spacing: -.035em !important;
  }
}
@media (max-width: 560px) {
  .sd-hero-facts, .scp-facts, .oc-hero-facts { box-shadow: none; }
}

/* --------------------------------------------------------------------------
   8. RTL（ar 镜像）：网格纹理与遮罩方向翻转
   -------------------------------------------------------------------------- */
html[dir="rtl"] .sd-hero::after,
html[dir="rtl"] .scp-hero::after,
html[dir="rtl"] .oc-hero::after,
html[dir="rtl"] .ap-hero::after,
html[dir="rtl"] .pi-hero::after,
html[dir="rtl"] .dsp-hero::after {
  inset: 0 0 0 auto;
  -webkit-mask-image: linear-gradient(270deg, #000 0%, #000 66%, transparent 100%);
  mask-image: linear-gradient(270deg, #000 0%, #000 66%, transparent 100%);
}
html[dir="rtl"] .sd-hero-overlay,
html[dir="rtl"] .scp-hero-overlay,
html[dir="rtl"] .oc-hero-overlay,
html[dir="rtl"] .ap-hero-overlay,
html[dir="rtl"] .pi-hero-overlay,
html[dir="rtl"] .dsp-hero-overlay {
  background:
    linear-gradient(270deg, #0d3554 0%, rgba(13, 53, 84, .93) 30%, rgba(13, 53, 84, .55) 62%, rgba(13, 53, 84, .22) 100%),
    linear-gradient(180deg, rgba(13, 53, 84, .3), rgba(13, 53, 84, .12) 55%, rgba(13, 53, 84, .45)) !important;
}

/* --------------------------------------------------------------------------
   9. 降级：reduced-motion 下纹理静止、无额外动画（覆盖层本身无新动画）
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sd-hero::after, .scp-hero::after, .oc-hero::after,
  .ap-hero::after, .pi-hero::after, .dsp-hero::after {
    opacity: .6;
  }
}

/* --------------------------------------------------------------------------
   10. 照片统一调色：与首页编辑感一致（hero 降饱和 + 微对比，静态滤镜）
   七个体系的 hero 图全覆盖；正文内容照片与 logo 不处理。
   -------------------------------------------------------------------------- */
.sd-hero-media,
.scp-hero-media,
.oc-hero-media,
.ap-hero-media,
.pi-hero-media,
.dsp-hero-media,
.article-hero-media {
  filter: saturate(.82) contrast(1.04);
}

/* ------------------------------------------------------------------
   Section 11: Desktop contact rail (same shortcut bar as the homepage):
   brief / WhatsApp / email / phone / back-to-top, fixed on the right edge.
   Hidden below 900px where the mobile action bar takes over.
   ------------------------------------------------------------------ */
/* Desktop contact rail: fixed vertical shortcut bar on the right edge.
   Collapsed to icon tiles; hover/focus expands a label flap to the left. */
.sm-contact-rail {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 44;
  display: flex;
  flex-direction: column;
  width: 52px;
  transform: translateY(-50%);
  border-radius: 8px 0 0 8px;
  background: #0d3554;
  box-shadow: 0 12px 30px rgba(13, 53, 84, .28);
}
.sm-contact-rail a,
.sm-contact-rail button {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  background: transparent;
  color: #fff;
  cursor: pointer;
  overflow: visible;
  transition: width .22s ease, margin-left .22s ease, background .18s ease;
}
.sm-contact-rail > a:first-child { border-radius: 8px 0 0 0; }
.sm-contact-rail > :last-child { border-bottom: 0; border-radius: 0 0 0 8px; }
.sm-contact-rail a:hover,
.sm-contact-rail a:focus-visible,
.sm-contact-rail button:hover,
.sm-contact-rail button:focus-visible {
  background: #1677d2;
}
.sm-contact-rail a:hover,
.sm-contact-rail a:focus-visible {
  z-index: 3;
  width: 264px;
  margin-left: -212px;
  border-radius: 8px 0 0 8px;
}
.sm-contact-rail a:focus-visible,
.sm-contact-rail button:focus-visible {
  outline: 2px solid #82c9ff;
  outline-offset: -3px;
}
.sm-contact-rail .sm-contact-rail-icon {
  position: absolute;
  top: 50%;
  right: 14px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
  color: #cde4f6;
  transition: color .18s ease;
}
.sm-contact-rail a:hover .sm-contact-rail-icon,
.sm-contact-rail a:focus-visible .sm-contact-rail-icon,
.sm-contact-rail button:hover .sm-contact-rail-icon,
.sm-contact-rail button:focus-visible .sm-contact-rail-icon { color: #fff; }
.sm-contact-rail svg { width: 22px; height: 22px; }
.sm-contact-rail .sm-contact-rail-label {
  position: absolute;
  top: 0;
  right: 52px;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  height: 52px;
  padding: 0 16px;
  color: #fff;
  font: 700 13px/1.2 Manrope, 'Segoe UI', sans-serif;
  letter-spacing: .01em;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: translateX(10px);
  transition: opacity .18s ease, transform .22s ease, visibility .18s;
}
.sm-contact-rail a:hover .sm-contact-rail-label,
.sm-contact-rail a:focus-visible .sm-contact-rail-label {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
/* Back-to-top stays visible at every scroll position. */
.sm-contact-rail button[data-rail-top] {
  transition: background .18s ease;
}
@media (prefers-reduced-motion: reduce) {
  .sm-contact-rail a,
  .sm-contact-rail button,
  .sm-contact-rail .sm-contact-rail-label,
  .sm-contact-rail button[data-rail-top] { transition: none; }
}
@media (max-width: 900px) {
  .sm-contact-rail { display: none; }
}

/* ============================================================
   12. PREMIUM RHYTHM PASS — section alternation, editorial
   numerals, media hover, blog listing, scp fee, category grid
   ============================================================ */

/* 12.1 Section background rhythm on long template pages */
main > section.sd-split:nth-of-type(even) { background: #f4f6f8; }
.products-more { background: #102b3d; }
.products-solutions { background: #fff; }

/* 12.2 Editorial mono numerals in hero fact strips */
.sd-hero-facts strong {
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -.02em;
}

/* 12.3 Payment page: bring h2 back into the display family */
.pi-page main h2 {
  font-size: clamp(38px, 4vw, 54px) !important;
  letter-spacing: -.02em;
}
.pi-page .pi-alert h2 { font-size: 30px !important; }

/* 12.4 Media panels: slow optical zoom on hover */
.sd-media img { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.sd-media:hover img { transform: scale(1.035); }
@media (prefers-reduced-motion: reduce) {
  .sd-media img { transition: none; transform: none; }
}

/* 12.5 Blog listing: drop fake comment counters, widen figures,
       uniform cards (no featured first article) */
.blog-list .comments { display: none !important; }
@media (min-width: 901px) {
  .blog-list .blog-article {
    grid-template-columns: 260px minmax(0, 1fr);
  }
  .blog-list .blog-article figure { height: 190px; }
}

/* 12.6 Sourcing plan cards: mono index labels + accent fee figure */
.scp-index {
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  letter-spacing: .14em;
}
.scp-fee span {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .62;
}
.scp-fee strong {
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 38px;
  color: #168cf0;
  letter-spacing: -.02em;
}

/* 12.7 Category grid: inline SVG icons breathe + lift on hover */
.product-category-icon svg { display: block; }
.product-categories a:hover .product-category-icon,
.product-categories a:focus-visible .product-category-icon {
  transform: scale(1.1);
}