/* Topzir theme — semantic layout aligned to design tokens */
/* tz-list-card-1513 */

:root {
  --color-primary: #0dcfdb;
  --color-primary-hover: #30dbe6; /* D3 v1.0: 以已注册 V1.1 为基准（原 #30dae5 主题孤例；Pixso 原始 #30DBE5 备注 D3） */
  --color-text: #686868;
  --color-text-secondary: #8d8d8d; /* D3 v1.0: 原 #9a9a9a 主题孤例，Pixso/Bricks/V1.1 一致 #8D8D8D */
  --color-text-muted: #c5c5c5; /* D3 v1.0 新增: Pixco fill---color-text-muted 实测；占位/禁用态文字 */
  --color-text-dark: #2a2a2a;
  --color-divider: #ececec; /* D3 v1.0: 原 #d8d8d8 主题孤例；映射 Pixco border-subtle / Bricks --color-border-subtle */
  --color-cert-fda: #1c3d5b;
  --color-bg: #ffffff;
  --color-bg-muted: #f9f9f9; /* D3 v1.0: Pixco bg-canvas 源值优先（原 #f8f8f8）；跨路线注册候选已报批 */
  --color-border: rgba(0, 0, 0, 0.08);
  --overlay-image: linear-gradient(90deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)); /* D3 v1.0 新增: 详情页图片遮罩（与 teal 渐变语义无关） */
  --font: "Noto Sans SC", "Noto Sans SC-Regular", "Segoe UI", sans-serif;
  --font-medium: "Noto Sans SC", "Noto Sans SC-Medium", sans-serif;
  --font-bold: "Noto Sans SC", "Noto Sans SC-Bold", sans-serif;
  --font-thin: "Noto Sans SC", "Noto Sans SC-Thin", sans-serif;
  --font-light: "Noto Sans SC", "Noto Sans SC-Light", sans-serif;
  /* type scale (D3 v1.0 §2.1) — 新样式排版一律 fs/lh/ls+字体变量组合；weight 用字面量；存量样式随切片渐进迁移 */
  --fs-display-1: 64px;
  --fs-display-2: 48px;
  --fs-display-3: 42px;
  --fs-heading-1: 32px;
  --fs-heading-2: 24px;
  --fs-tab-label: 24px; /* 批2: DTC type-ui-button-2 实测值，待 D3 附录收编 */
  --fs-body: 16px;
  --fs-eyebrow: 14px;
  --fs-caption: 12px;
  --lh-display: 1.2;
  --lh-body: 1.3;
  --lh-ui: 1;
  --ls-display: -0.05em;
  --ls-body: -0.015em;
  /* batch-3：--gap-spec-label 删除——DTC 22px 判设计源误差（Denny 09-28 F-01 关账），间距权威改 8 倍数规范；
     间距裸值合法，依据 D3 §3「不建间距 token 体系，按槽位对齐」裁决。原 D3 报批登记同步撤销。 */
  --ls-caption: -0.01em;
  --container: min(1920px, 100%);
  --header-container: min(1440px, calc(100% - 48px));
  --header-h: 96px; /* N1 批1 D3 报批✅（Denny 10-04）：72→96=稿件条高/热区（token 绑定表 §1/§3③；@768 断点块 64px 不动=移动端批语境） */
  --radius: 4px;
  --home-col-left: 624fr;
  --home-col-right: 1272fr;
  --home-col-gap: 24px;
  --header-actions-gap: 32px;
  --nav-item-gap: 32px;
  --shadow-nav: 0 8px 32px rgba(0, 0, 0, 0.08); /* N1 批1 D3 报批✅：α 10%→8%（DSL effect 524:1734+DTC-main §4 实证；is-scrolled 唯一消费者=T2 目检观感） */
  --shadow-card: 0 12px 40px rgba(0, 0, 0, 0.08);
  --teal-gradient: linear-gradient(135deg, #33c4cd 0%, #1a9aa3 100%);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  font-family: var(--font);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body.nav-open {
  overflow: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

p {
  margin: 0;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.container {
  width: var(--container);
  margin-inline: auto;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.98);
  transition: box-shadow 0.2s ease;
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-nav);
}

/* =========================================================================
 * N1 批 1 · site-nav v2（数值/token 权威=token-binding-n1-nav.md §3；布局权威=
 * dev-layout-guide-v0.md §2.1 R-1；结构裁决=token 绑定表 §8 DOM 重排，Denny 10-04 拍板）
 * 旧声明族点名清算（v1.2 硬条款，绑定表 §3②）：
 *   - .site-header__inner（旧 :134 justify-content:space-between/gap:20px/min-height）
 *     → 并入 .site-nav__container（§8 裁决=容器唯一内容容器；gap=32 稿件 guide §2.1 平铺四元）
 *   - .site-header__actions（旧 :269）→ G-4 拆并=lang-trigger/CTA 直挂容器（guide 平铺结构，
 *     右组 gap32 由容器统一 gap 承接；--header-actions-gap 在役值 32 恰等 --nav-item-gap，token 保留在役）
 *   - .site-header__lang（旧 :276 28×20 内联 svg）→ .site-nav__lang-trigger（32×32 媒体 img，M1 nav-lang-trigger）
 *   - .site-header__cta（旧 :284 pad10/16/border 1px text-dark/12px）→ .site-nav__cta（pad[10,24]/stroke 2px secondary，§1 豁免注记）
 * 断点 ≤1100/768 块禁动（移动端批语境，stage0 §4）；:3949 选择器改名=§8 同批清算清单。
 * ========================================================================= */

.site-nav__container {
  /* guide §2.1：HORIZONTAL gap32 pad0 align center/center · 1440 × FILL(高=条 96) */
  width: var(--header-container);
  margin-inline: auto;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--nav-item-gap); /* 32 在役 token（guide 容器 gap32=list gap32 同值） */
}

.site-logo {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

.site-logo__link,
.site-logo a {
  display: inline-flex;
  align-items: center;
}

.site-logo img,
.site-logo .custom-logo {
  max-height: 49px;
  width: auto;
}

.site-nav {
/* N1 批 2 尾账（PM 挂账 10-04）：旧注释「左对齐起排」=绑定表 v1.0 转录失实残留；
   v1.0.1 勘误后 §3①=CENTER 居中分布（DSL 1010:281 复认，批 1 施工已归位 jc=center，见 :184 块注释）。
   留白语义=左右留白对称（居中分布几何推论）。*/
  flex: 1;
  display: flex;
  align-items: stretch;
  align-self: stretch; /* R-1 前提=nav 撑满容器 96，li 高==条高 */
  min-width: 0;
}

.site-nav__list {
  /* §3①/③：FILL 宽 · gap 32 · pad[0,16]；justify-content=**center**（T2 目检指认 1 改裁，2026-10-04 Denny 批复：
     权威=live DSL 1010:281 itemHoriAlign/align=CENTER + DTC 渲染件 computed 实测 jc:center；
     token-binding §3①「左对齐起排」行=派生件转录失实，勘误登记回 PM 重生成（R2 实测优先）。
     旧 :172 center=原值恰与 DSL 一致，批 1 曾按派生件改 flex-start，现归位。留白语义=两侧均留（非右侧全空） */
  flex: 1;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--nav-item-gap);
  align-items: stretch;
  justify-content: center;
  padding: 0 16px;
  height: 100%;
  min-height: var(--header-h);
}

.site-nav__list > li {
  /* R-1 热区：HUG 宽 × FILL 高（li 高=条高 96=结构即断言） */
  position: relative;
  display: flex;
  align-items: stretch;
}

.site-nav__list > li > a {
  /* §2 桥接：type-ui-button-3-400=16/400/-0.015em/lh100%（旧 14px 硬编码点名改 token）
     R-1 li 内 gap8=[label+chevron] */
  font-size: var(--fs-body);
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-body);
  color: var(--color-text);
  font-family: var(--font);
  font-weight: 400;
  transition: color 0.2s ease; /* DTC-main §6=④自定回报：对齐现族 .2s ease（旧 .15s） */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  position: relative;
  white-space: nowrap;
}

.site-nav__list > li > a:hover,
.site-nav__list > li:hover > a,
.site-nav__list > li:focus-within > a,
.site-nav__list > li.is-hover > a {
  /* 绑定表 §3②：字色不变=稿件无条上 hover 变色声明；现行为保留不清零（降级兼容，T2 裁决观感）。
     .is-hover=取证白名单 (a) 等价类（:hover 不可脚本稳定触发） */
  color: var(--color-primary-hover);
}

.site-nav__list .current-menu-item > a,
.site-nav__list .current_page_item > a,
.site-nav__list .current-menu-ancestor > a,
.site-nav__list .current-menu-parent > a,
.site-nav__list .current_page_parent > a,
.site-nav__list .current_page_ancestor > a {
  /* §3② current=字体高亮 --color-primary-hover + 700（旧值 --color-primary/400 点名改，D3 §4 全站 hover 标准色裁决覆盖导航；稿 700 实证） */
  color: var(--color-primary-hover);
  font-weight: 700;
}

.site-nav__chevron {
  /* §3②/③ V-2 升级：default=挂载不可见+translateX(-16)；hover=渐显+归位+（有二级者）rotate 90°。
     R-1=li 内 flex 子（gap8），旧 absolute 挂位（:211 left calc(100%+4px)）点名废。
     资产=媒体库 chevron_right.png（M1；--tz-nav-chevron 由 topzir_nav_assets_css() 注入，
     缺失降级=主题 svg 兜底）；transform-origin=图标中心（DTC-main §6） */
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: var(--tz-nav-chevron, url("../image/icon_arrow_right_default.svg")) center / contain no-repeat;
  display: block;
  opacity: 0;
  transform: translateX(-16px);
  transform-origin: 50% 50%;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.site-nav__list > li:hover > a .site-nav__chevron,
.site-nav__list > li:focus-within > a .site-nav__chevron,
.site-nav__list > li.is-hover > a .site-nav__chevron {
  opacity: 1;
  transform: translateX(0);
}

.site-nav__list > li.menu-item-has-children:hover > a .site-nav__chevron,
.site-nav__list > li.menu-item-has-children:focus-within > a .site-nav__chevron,
.site-nav__list > li.menu-item-has-children.is-hover > a .site-nav__chevron {
  /* 有二级者=右向旋转 90° 成下向；无二级者（CERTIFICATS 等）=纯平移（§3②） */
  transform: translateX(0) rotate(90deg);
}

.site-nav__list > li.current-menu-item > a .site-nav__chevron,
.site-nav__list > li.current_page_item > a .site-nav__chevron,
.site-nav__list > li.current-menu-ancestor > a .site-nav__chevron,
.site-nav__list > li.current_page_parent > a .site-nav__chevron,
.site-nav__list > li.current_page_ancestor > a .site-nav__chevron {
  /* §3② current=无箭头（含 hover 态压制；后置=同权重后来者胜） */
  opacity: 0;
  visibility: hidden;
}

/* =========================================================================
 * N1 批 2 · .site-nav__submenu 面板族（数值唯一源=token-binding §5 lang/§6 normal+§3②桥接行；
 * 布局权威=guide §2.2 R-2/§2.3/§2.5；三态样式账本=guide §1 变体集 126:782 逐字）
 * 基类=normal/lang（批 3 product modifier 接续同骨架）；行族=§2.3 规律。
 * 桥接 R-2：面板 top==条 bottom==96=var(--header-h)，notch 带=面板首段 16px（pad-inline 16 按
 *   DSL langlist 外框实测），父项→面板直落零间隙=热区连续（断言=移动不坠桥，纯 CSS 无 JS 计时）。
 * 显隐=纯 CSS :hover/:focus-within（normal，含 .is-hover 取证等价类=白名单 (a)）；
 *   lang=trigger 与面板跨文件兄弟（header.php vs nav.php）→ :hover 直系不可达，CSS 可达方案=
 *   `.site-header:has(.site-nav__lang-trigger:hover)`（纯 CSS，无 JS 计时器）+ 面板 ::before 透明桥区
 *   （上伸 32px 接 trigger 底缘→trigger 移入面板全程连续命中）；JS 仅做合同授权的点击展开/收起
 *   （§5②「trigger 点击=展开/收起为展示态交互」=白名单 (b) 状态 toggle，main.js）。
 * 移动端护栏：本族几何/显隐圈定 @media(min-width:769px)=延续批 1「桌面优先+抽屉归 ≤768 块」既有
 *   分界（769–1100=批 1 🔴 已裁「移动端适配批」管辖带，本批不新增破绽：面板 hover 才显、行为同批 1）；
 *   ≤768 抽屉=normal 面板的 ul 由旧 :1568 static 块接管（.sub-menu 类名保留=兼容锚根因，walker
 *   包层 div/notch 空 span 在 ≤768 零样式惰性无害）；lang 面板=基线守卫 display:none（抽屉无语言
 *   面板需求；769+ 由后置媒体块同权重覆盖回 flex）。禁动断点块本体未触碰。
 * 批 1 暂留简易面板族（原 :287–325 min-width:160/13px 字/#f7fbfc 底）随本块点名清算退役。
 * ========================================================================= */
.site-nav__submenu--lang {
  display: none; /* ≤768 基线守卫（见上注；769+ 后置媒体块覆盖回 flex） */
}

.site-nav__submenu--product {
  display: none; /* 批 3 同法基线守卫：≤768 抽屉无 mega 需求（移动端批管辖，stage0 §4 禁动断点块=守卫写本块外），769+ 媒体块后置覆盖回 flex */
}

@media (min-width: 769px) {
  .site-nav__submenu {
    /* §5①/§6① 基类：VERTICAL gap0（notch↔列表零间隙=R-2）· HUG 宽（禁固定 138/204，§2.5/工单
       「宽 HUG 禁固定」）· top=96=条底（§3②「面板 top==条 bottom」）· bg=--color-bg（§2 桥接
       bg-elevated↔#FFFFFF）· shadow=--shadow-nav（α8% 批 1 已改值，同族消费） */
    position: absolute;
    top: var(--header-h);
    left: 0; /* normal=左缘跟随父项 li（li=position:relative 定位上下文；§6④/§2.5 裁决，禁照抄稿件 x=393）；--lang 覆盖 */
    width: max-content; /* HUG 合同语义的显式形态（§5①/§6①「宽 HUG 禁固定 138/204」：宽度=最宽行 max-content
                           反推，零固定值。嵌套链 ul width:100%→panel 内蕴=循环百分比→曾取窄行致 Brand Story
                           折行 48 高；显式 max-content + align-items:stretch 行 FILL=标准 HUG 形态） */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    /* T2 指认处置（Denny 目检 10-04）：白底**不挂 wrapper**——稿件=notch 带透明、白卡从列表层起
       （DSL 1010:317 fills=white+radius4+y16 实证；notch 容器 118:250 fills=None）。阴影留 wrapper
       =整体父级（Denny Pixso 定义复述：无 fill 的箭头区同吃父级阴影）。白箭头垫页面底才可见。 */
    background: transparent;
    box-shadow: var(--shadow-nav);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease; /* DTC-main §6=④自定回报：对齐现 .2s ease 族（批 1 同法） */
    z-index: 20;
  }

  .site-nav__submenu-notch {
    /* R-2 结构带：16px 高桥接/指示区（notch-h 16=§1 免报批裸值行）；icon=媒体库按名
       submenu_notch_icon.png/4683（M1 nav-notch-icon）经 topzir_nav_assets_css() 注入
       --tz-nav-notch；缺件=var(…, none) 零视觉=结构位保留、热区不受损（降级登记）。带自身透明。
       T2 第四轮（Denny 10-04 裁定）：基类=**normal 第二轮原态**（icon 左起 16px，DSL 118:250 摆位，
       你确认「原来的面板位置和箭头位置是正确的」）；第三轮把 w72/居右写进基类=跨 modifier
       污染根因 → 该组参数降级为 --lang 专属 override（下条），normal 另删除 left:32 回基类 left:0。 */
    height: 16px;
    flex-shrink: 0;
    background: var(--tz-nav-notch, none) 16px center / 16px 16px no-repeat; /* icon 左缘=面板左缘+16 → 中心=+24 */
  }

  .site-nav__submenu--lang .site-nav__submenu-notch {
    /* lang 专属（第三轮 Denny 指认2 方案+第四轮「现在很好不用改」确认）：本体容器 w=72+箭头居右
       +flex-end 收边+margin-right 40 → 容器右缘=面板右缘−40，箭头中心=面板右缘−48
       =trigger 中心（实测 Δ=0.0；面板 r=trig.r+32=1529.9）。width 显式=覆盖基类 stretch 语义必需。 */
    width: 72px;
    align-self: flex-end;
    margin-right: 40px;
    background: var(--tz-nav-notch, none) right center / 16px 16px no-repeat;
  }

  .site-nav__submenu .sub-menu,
  .site-nav__submenu-list {
    /* §2.3 行列表：VERTICAL gap8 pad[16,0]。行 FILL 宽=基类 align-items:stretch 承接（勿写
       width:100%——面板 width:max-content 时循环百分比致列宽塌到窄行、长行折行=批 2 实证坑） */
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 0;
    margin: 0;
  }

  .site-nav__submenu--normal .sub-menu {
    /* T2 指认1 处置（Denny 目检 10-04 第三轮）：行列表本体容器 fill=白卡（上轮「留透明」致
       行区穿透——brand story 默认行无自身底=透到页面底；Denny 裁=改父级 fill=white 变量）。
       白卡起于列表层、notch 带保持透明 ✓ 与 DSL 118:250 fills=None 不冲突（该节点=notch 区非列表区）。
       radius=④一致性并笔（lang 卡 DSL radius4 同族，normal 稿件列表盒无独立圆角声明=观感统一裁量，登记）。 */
    background: var(--color-bg);
    border-radius: var(--radius);
  }

  .site-nav__submenu--lang .site-nav__submenu-list {
    /* T2 指认 2 处置（第二轮）：lang 白卡=list 层（DSL 1010:317 fills=white(398:1477)+radius 4+y=16
       实证——白卡+圆角起于列表层、notch 带保持透明）。第三轮 Denny 裁=normal 列表层同加白卡
       （穿透修复，见上条），两条规则现同族=观感一致。 */
    background: var(--color-bg);
    border-radius: var(--radius);
  }

  /* ---------- --normal 行族（§6① 变体集三态账本逐字=guide §1） ---------- */
  .site-nav__submenu--normal .sub-menu > li > a {
    /* default=无底 + #686868(--color-text)/400；行 pad[8,16]；label=type-ui-button-3-400
       （§2 桥接：fs-body/lh-ui/ls-body/--font 四件套，禁 13px/硬编码旧值） */
    display: block;
    padding: 8px 16px;
    font-size: var(--fs-body);
    line-height: var(--lh-ui);
    letter-spacing: var(--ls-body);
    font-family: var(--font);
    font-weight: 400;
    color: var(--color-text);
    transition: background 0.2s ease, color 0.2s ease;
  }

  .site-nav__submenu--normal .sub-menu > li > a:hover,
  .site-nav__submenu--normal .sub-menu > li.is-hover > a {
    /* hover=#30DBE6 底 + #FFF 字/400（账本 hover 变体=DSL 126:781+langlist 演示行 1010:352 同 token 实证；
       白字复用 --color-bg 语义=§2 桥接「禁自造 #fff 裸值」行；字重 400=账本 button-3-400 族） */
    background: var(--color-primary-hover);
    color: var(--color-bg);
    font-weight: 400;
  }

  .site-nav__submenu--normal .sub-menu > .current-menu-item > a,
  .site-nav__submenu--normal .sub-menu > .current_page_item > a,
  .site-nav__submenu--normal .sub-menu > li.is-current > a {
    /* current=#F9F9F9(--color-bg-muted) 底 + primary-hover 字/700（账本 current=DSL 126:780；
       §6②=行底 bg-canvas+字 primary-hover；D3 §1 #30DBE6 基准归值（§2「current 变体字 700」行）；
       700=button-3-600→信值不信名（§2 桥接行）；is-hover 双态并置时 current 胜=后置声明同权重后来者胜 */
    background: var(--color-bg-muted);
    color: var(--color-primary-hover);
    font-weight: 700;
  }

  /* ---------- --lang 行族（§5③；hover=§5② 同族推导） ---------- */
  .site-nav {
    position: relative; /* lang 面板定位上下文（面板在 nav 内=与 list 平级；纯 CSS 可达见下） */
  }

  .site-nav__submenu--lang {
    /* §5① 裁决条款=「按 trigger 右缘对齐实现，禁照抄稿件绝对 x」（1461..1665/内收 15=改正宽度前
       摆位快照，guide §2.5 点名）。实现=纯 CSS 几何直算：定位上下文=nav（trigger 左缘=nav 右缘+
       容器 gap 32，trigger 右缘=nav 右缘+32+32，与 CTA HUG 宽无关——trigger 排在 CTA 前，其左缘
       只依赖 list 右缘）→ right=−(gap+trigger 宽)=面板右缘≡trigger 右缘。零 JS 位移。
       T2 第三轮（Denny 10-04）=面板当前位置再右移 32px（−64→−96）：与 --normal 同批偏移，
       配合 notch w72 箭头居右=「对准 trigger 中心」的摆位方案；Δ 实测入账待目检裁定。
       ⚠️ 与合同 §5①/B6 旧期望（右缘==trigger 右缘）差=+32 → 偏差表登记，PM T1.5 归案。 */
    left: auto;
    right: calc(-1 * (var(--nav-item-gap) + 64px));
  }

  .site-nav__submenu--lang::before {
    /* R-2 透明桥区：trigger 底缘(≈64)→面板顶(96)=32px header 空白带；面板上伸 32px 透明带使
       trigger→面板移动轨迹 hover 连续（:has 路径与自:hover 路径同命中=不坠桥、零 JS 计时器）。
       宽随面板（HUG≈204 覆盖 trigger x ✓ DSL trigger 1469..1501 ⊂ 1461..1665） */
    content: "";
    position: absolute;
    top: -32px;
    left: 0;
    right: 0;
    height: 32px;
  }

  .site-nav__lang-item > a {
    /* §2.3 行：HORIZONTAL gap8 pad[0,24]（lang-row-pad-inline 24=§1 免报批行）FILL 宽×HUG 高 32。
       T2 指认 3 处置：**主轴左排（不设 justify-content）**——DSL 1010:318=counterAlign:center
       （交叉轴=垂直居中）+ justify=None（主轴默认 MIN=左起排）+ 内容位实证（旗 x=24==pad-left、
       label x=64==24+32+gap8）。合同 §5①「center」=交叉轴语义，我前版误读成主轴居中（D-3 注记归案）。
       行参数只核父级=flex 规律（Denny 方法裁定 10-04）。
       ⚠️ A-1 改判（批 3 工单点名必做，Denny 10-05 重批；token-binding v1.1 §5③）：label 档
       =**12px caption 族**（--fs-caption+--ls-caption+--lh-ui+--font；复认=DSL 1010:317 子树 13 行
       TEXT 全引 382:1366/1363 caption-300/600、零节点引 button-3；原 v1.0「button-3-400(16px)」
       =转录失实作废）。面板宽/高账归 204/544（12px 反算 116px 恰等最宽行）。仅 --lang 行族=
       禁入基类纪律（A-4 对偶；normal 面板 16px 不动=B11 normal fs==16px 回归项）。 */
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 24px;
    min-height: 32px;
    font-size: var(--fs-caption);
    line-height: var(--lh-ui);
    letter-spacing: var(--ls-caption);
    font-family: var(--font);
    font-weight: 400;
    color: var(--color-text);
    transition: background 0.2s ease, color 0.2s ease;
  }

  .site-nav__lang-flag {
    /* 旗 32×32 FIXED（§5①/flag-size=§1 免报批裸值）；is-missing=媒体库缺件降级占位（img 不产） */
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: block;
    overflow: hidden;
  }

  .site-nav__lang-flag.is-missing {
    background: var(--color-border); /* 占位灰=边框 token 复用（非新色值，R4；ph 兜底视觉） */
  }

  .site-nav__lang-flag img {
    width: 32px;
    height: 32px;
    display: block;
  }

  .site-nav__lang-item > a:hover,
  .site-nav__lang-item.is-hover > a {
    /* ⚠️ 推导依据登记（§5②+DTC-main §6 强制条款）：lang 行 hover 态稿件未画 →
       按 normal 行 default↔hover 同族推导=primary-hover 底+--color-bg 字/400；
       DSL 佐证=langlist 内 hover 演示行 1010:352 fills=[style:398:1469]+label white(398:1477)
       与 normal 变体集 hover 126:781 同 token 组合（同族推导的交叉证据）。 */
    background: var(--color-primary-hover);
    color: var(--color-bg);
  }

  .site-nav__lang-item.current-lang > a {
    /* current=English 行（§5②「加粗族，style 382:1363 差异实证」=caption-600→700 信值不信名系）；
       底/字=normal current 同账本（DSL 1010:318 fills=bg-canvas(457:547)+label primary-hover(398:1469)
       ——三面板 current/hover 变体同 token 组合实证）。
       A-1（批 3 必做行）：382:1363=caption-600 实证 → 字体族=--font-bold（D3 §2 caption-600 行）；
       12px 基=上行 .site-nav__lang-item > a 族改判后自然继承。 */
    background: var(--color-bg-muted);
    color: var(--color-primary-hover);
    font-weight: 700;
    font-family: var(--font-bold);
  }

  /* ---------- --product 行族（批 3 · mega；§4① 层级链=panel>cols>col>group=[icon+column] ----------
   * A-5 双层语义（v1.1 §5① 批 3 直接引用行）=基类 wrapper 透明+阴影已在；白卡挂**内容层**
   *   =.site-nav__submenu-panel（DSL 1010:513 fills=None+effects 524:1734 实证；1010:473
   *   fills=460:574(bg-elevated→--color-bg §2 桥接)+radius4）。逐节点核 fills=纪律回灌第 2 条。
   * HUG 防坑配方（v1.1 §4①）=面板 width:max-content（基类已在）+全链子层**零 % 宽**+stretch 承接；
   *   行文本 white-space:nowrap → 列宽=内容 max-content（改名跟随=数据驱动，V-4 禁固定 794）。
   * 装饰线（R5 零 DOM=guide §3-4「border-left/伪元素」点名形态）：
   *   竖线 1×305 → `:col+:col` border-left+pad-left 16（账=gap16+线1+pad16=33 档 ≡ DSL
   *   [gap|线|gap]；列宽和+4gap+2线=762 复算=guide §2.4 宽账 x=368/619 逐档吻合）；
   *   横线 218×1 → materials 列 `:group+:group` border-top+pad-top 16（=184+16+1+16+88=305
   *   ≡ DSL 列高 305/线 y200/组2 y217 三值互证）。相邻伪类=空值降级时线随 DOM 缺席自动不现。
   * 线色=--color-border rgba(0,0,0,.08)（稿件 black-0.1=10% 无 D3 token；复用 border 语义=
   *   R4 禁自创色值+批 2 is-missing 同 token 先例；Δ2% 登记偏差表 D-3，T2 目检观感）。
   * 字号账本（实测优先，冲突全证据登记偏差表 D-2/D-3，④不自裁合同）：
   *   l2-header=--fs-heading-2 24px/700（DSL 1010:480/493/976/502 全引 386:1380=button-2-600，
   *   D3 §2=24px/-0.015em/lh100%；box h=24 行位账合；§4③「label-600 12px」与 24 行位账自相矛盾
   *   疑转录失实）；l3=--fs-body 16px（DSL l3 TEXT 17 引 386:1389=button-3-400（16/lh100%→行高
   *   恰 16=§4③「行高 16」账成立的唯一形态；「--lh-ui×fs12=16」算式 12×1=12≠16 失实）+
   *   D2C 渲染件实测 font-size:16px+guide §2.4「L3 行=TEXT 直挂」）。 */
  .site-nav__submenu--product .site-nav__submenu-panel {
    /* §4①：VERTICAL gap16 pad16（DSL 1010:473 autoLayout 逐字） */
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    background: var(--color-bg);
    border-radius: var(--radius);
  }

  .site-nav__submenu-cols {
    /* §4①：HORIZONTAL gap16（DSL 1010:474）；行高上限=align-items:stretch 默认（线随行高） */
    display: flex;
    flex-direction: row;
    gap: 16px;
    width: max-content; /* HUG 链显式形态（§4① 防坑配方同法，禁 % 宽） */
  }

  .site-nav__submenu-col {
    /* §4①：col VERTICAL gap16（guide §2.4；materials 列=双 group+横线瀑布） */
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .site-nav__submenu-col + .site-nav__submenu-col {
    /* 竖分隔线（R5=CSS 生成，DOM 计数==0 §7-3 断言） */
    border-left: 1px solid var(--color-border);
    padding-left: 16px;
  }

  .site-nav__submenu-group {
    /* §4①：group HORIZONTAL gap16 = [icon + column]；align-items:flex-start
       （Rule F 推断①=DSL boxes 实测 icon y=0/column y=0 顶对齐；autoLayout align 字段=
       主轴语义，交叉轴先例=批 2 lang 行 T2 指认 3 之辨；目检 s2 截图顶对齐一致） */
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
  }

  .site-nav__submenu-group + .site-nav__submenu-group {
    /* materials 列横线（218×1=列宽随行宽 stretch；账见上块注释） */
    border-top: 1px solid var(--color-border);
    padding-top: 16px;
  }

  .site-nav__submenu-col-icon {
    /* icon 32×32 FIXED（§4③ group icon 行；缺件期=ph-icon-32x32 按名占位，is-missing 兜底
       =批 2 lang 旗同族先例 :480） */
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: block;
    overflow: hidden;
  }

  .site-nav__submenu-col-icon.is-missing {
    background: var(--color-border);
  }

  .site-nav__submenu-col-icon img {
    width: 32px;
    height: 32px;
    display: block;
  }

  .site-nav__submenu-column {
    /* §4①：column VERTICAL gap16 = label(24 高) + l3×n(16 高)（DSL 1010:479） */
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .site-nav__submenu-column .label-l2-header {
    /* 账本见上块注释（D-1 登记：合同 §4③ label-600 12px vs DSL 实测 button-2-600 24px）；
       text-transform 不发明（稿件文本=后台 term name 直读大写与否=数据面）。
       字色=§2 桥接 text-primary 统一基线；⚠️ DSL 稿件特例=**仅 zirconia 列头** fills 青
       (398:1469)（materials/tools/stain-glaze 三列头=398:1478 灰实证；程序化复扫 4 节点
       1 青 3 灰）——青=「当前栏目」语义 or 列头强调设计意图无法从 DSL 判定→不自裁、
       不做逐列特例 CSS，登记偏差表 D-4 交 T2 目检裁决观感。 */
    font-size: var(--fs-heading-2);
    line-height: var(--lh-ui);
    letter-spacing: var(--ls-body);
    font-family: var(--font-bold);
    font-weight: 700;
    color: var(--color-text);
    white-space: nowrap;
  }

  .site-nav__submenu-l3-item {
    /* §4③ 行几何：行高 16（=16px×lh100% 衍生豁免）；无 pad；nowrap=HUG 列宽账 */
    font-size: var(--fs-body);
    line-height: var(--lh-ui);
    letter-spacing: var(--ls-body);
    font-family: var(--font);
    font-weight: 400;
    color: var(--color-text);
    white-space: nowrap;
    transition: color 0.2s ease; /* DTC-main §6=④自定回报同批 1/2 族 */
  }

  .site-nav__submenu-l3-item:hover,
  .site-nav__submenu-l3-item.is-hover {
    /* ⚠️ 推导依据登记（§4② 强制条款）：稿件 l3 无独立 hover 声明 → 按 text 族推导=
       仅字色 --color-primary-hover（DSL 佐证 1010:486 style:516:1702=--type-ui-link-hover）；
       normal 行**底色族不适用**（§4② 明文=guide §2.3 只言 normal）。
       T2 预检改判（Denny 10-05）：原 1010:482 青+700 行误读为 hover 演示，实际=
       「当前所在位置」直达行 current 演示样态 → 账本归下行 .is-current（482 引用随迁）。 */
    color: var(--color-primary-hover);
  }

  .site-nav__submenu-l3-item.is-current {
    /* 「当前所在位置」行态（T2 预检微调 10-05，Denny 指认）：详情页=singular 产品页时
       对应 l3 行高亮。账本=稿件演示行 1010:482（fills 398:1469 primary-hover + style
       386:1379=button-3-600→D3 §2 信值不信名 700）；**无底色**=稿件行盒 fills=None
       （逐节点核 fills=纪律回灌第 2 条；normal 面板 current 的 bg-canvas 底色族=行 pad
       形态专属，mega 行=无 pad 文本族不适用=§4② 同判）。后置声明=hover+current 并置时
       current 胜（同权重后来者胜，批 2/normal 先例）。判据=行 id==queried object id
       （数据驱动跟随改名/新增；topzir_render_product_mega() 注释同处）。 */
    color: var(--color-primary-hover);
    font-weight: 700;
    font-family: var(--font-bold);
  }

  .site-nav__submenu--product .site-nav__submenu-notch {
    /* notch 对准父项中心=§4① 合同明文（本批域；批 2 遗言 §2 前置③）。
       实现=JS 注入 --tz-mega-notch-x（main.js：li 宽/2−icon 宽/2；li 宽=HUG 动态值，
       纯 CSS 在面板坐标系不可得=④实现裁量留痕，零 hover 逻辑零计时器=R-2 不破）。
       兜底=基类左起 16px（JS 未执行/极老浏览器=降级合法，同 notch 缺件 var(none) 系）。
       禁入基类纪律（A-4）：本 override 仅 --product 作用域；lang w72/normal 原态不动=B19e
       隔离断言面。 */
    background: var(--tz-nav-notch, none) var(--tz-mega-notch-x, 16px) center / 16px 16px no-repeat;
  }

  /* ---------- 显隐（两态=hidden↔shown；取证=注水白名单 (a) 等价类） ---------- */
  .site-nav__list > li:hover > .site-nav__submenu,
  .site-nav__list > li:focus-within > .site-nav__submenu,
  .site-nav__list > li.is-hover > .site-nav__submenu,
  .site-header:has(.site-nav__lang-trigger:hover) .site-nav__submenu--lang,
  .site-header:has(.site-nav__lang-trigger:focus) .site-nav__submenu--lang,
  .site-nav__submenu--lang:hover,
  .site-nav__submenu--lang:focus-within,
  .site-nav__submenu--lang.is-open,
  .site-nav__submenu.is-hover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .site-nav__lang-trigger {
    position: relative; /* 触发器可聚焦态描点（focus 显面板的视觉锚） */
  }

  .site-nav__lang-trigger[aria-expanded="true"] {
    /* 点击展开态=展示态交互视觉反馈（零新色值：复用 divider token 描边语义） */
    outline: 2px solid var(--color-border);
    outline-offset: 2px;
  }
}

.site-nav__lang-trigger {
  /* §3③：32×32 媒体 img（flag_us_trigger.png/4680）；旧 .site-header__lang（28×20 内联 svg+border 1px divider）退役 */
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  line-height: 0;
  cursor: pointer;
  overflow: hidden;
}

.site-nav__lang-trigger img {
  width: 32px;
  height: 32px;
  display: block;
}

.site-nav__cta {
  /* §1 豁免注记行（Denny 10-04 定式=组件高度豁免：h32 邻近 lang-trigger 定高，8 倍数让位）
     §3③ 按稿改：pad[10,24] + stroke 2px --color-text-secondary + radius（旧 .site-header__cta pad[10,16]/border 1px text-dark 点名废） */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 32px;
  padding: 10px 24px;
  border: 2px solid var(--color-text-secondary);
  border-radius: var(--radius);
  color: var(--color-text);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}

.site-nav__cta .label-cta {
  /* type-ui-button-3-600 信值不信名 → 700（§2 桥接行）；12px=--fs-caption */
  font-size: var(--fs-caption);
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-body);
  font-family: var(--font-bold);
  font-weight: 700;
}

.site-nav__cta:hover {
  background: var(--color-primary-hover); /* 收尾批: hover 统一语义延续 */
  border-color: var(--color-primary-hover);
  color: var(--color-bg); /* §2 桥接行：hover 白字复用 bg 语义，禁 #fff 裸值（AR4） */
}

.site-nav__toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  padding: 8px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.site-nav__toggle span {
  display: block;
  height: 2px;
  background: var(--color-text-dark);
  width: 100%;
}

/* Hero */
.hero {
  position: relative;
  background: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%);
  overflow: hidden;
}

.hero__inner {
  width: var(--container);
  margin-inline: auto;
  position: relative;
  min-height: clamp(420px, 70vh, 640px);
  padding: 48px 0 64px;
}

.hero__slide {
  display: none;
  grid-template-columns: 1fr 1.1fr;
  gap: 40px;
  align-items: center;
}

.hero__slide.is-active {
  display: grid;
  animation: fadeIn 0.35s ease;
}

.hero__dots {
  position: absolute;
  left: 0;
  bottom: 24px;
}

.hero__card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(3px);
  padding: 32px 28px;
  max-width: 480px;
}

.hero__title {
  font-family: var(--font-thin);
  font-weight: 100;
  font-size: clamp(36px, 5vw, 48px);
  letter-spacing: -0.05em;
  line-height: 1.2;
  color: var(--color-text);
  margin-bottom: 12px;
}

.hero__subtitle {
  font-family: var(--font-medium);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.05em;
  line-height: 1.2;
  color: var(--color-text-dark);
  margin-bottom: 16px;
}

.hero__text {
  font-size: 16px;
  line-height: 1.3;
  margin-bottom: 24px;
}

.hero__media {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__media img {
  width: 100%;
  max-height: 480px;
  object-fit: contain;
}

.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-top: 20px;
  color: var(--color-primary);
  font-size: 14px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  font-family: var(--font-bold);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  padding: 10px 24px;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.btn:hover {
  opacity: 0.92;
}

.btn--primary {
  background: var(--color-primary);
  color: #fff;
}

.btn--primary:hover {
  background: var(--color-primary-hover); /* 收尾批: 主按钮 hover 色反馈（opacity 反馈保留于 .btn:hover） */
}

.btn--ghost {
  background: transparent;
  color: var(--color-primary);
  padding-inline: 0;
}

.btn--ghost:hover {
  color: var(--color-primary-hover); /* 收尾批: 幽灵按钮 hover 文字色统一 */
}

.btn--outline {
  background: #fff;
  color: var(--color-text);
  border: 1px solid var(--color-divider);
}

.carousel-dots {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  width: 60px;
  height: 8px;
  margin-top: 20px;
}

.carousel-dots button {
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: var(--radius);
  padding: 0;
  background: rgba(26, 26, 26, 0.5);
  cursor: pointer;
  flex: 0 0 auto;
}

.carousel-dots button.is-active {
  width: 24px;
  background: var(--color-primary-hover);
}

.carousel-slide {
  display: none;
}

.carousel-slide.is-active {
  display: block;
  animation: fadeIn 0.35s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Sections */
.section {
  padding: 72px 0;
}

.section--tight {
  padding: 48px 0;
}

.section--muted {
  background: var(--color-bg-muted);
}

.section__title {
  font-family: var(--font-thin);
  font-weight: 100;
  font-size: 32px;
  letter-spacing: -0.05em;
  line-height: 1.2;
  color: var(--color-text);
  max-width: 920px;
  margin: 0;
}

.section__lead {
  margin-top: 8px;
  font-size: 16px;
  font-family: var(--font);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--color-text);
  max-width: 820px;
}

.section-head {
  width: var(--container);
  margin-inline: auto;
  margin-bottom: 36px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.section-head__mark {
  width: 16px;
  height: 16px;
  background: url("../image/IconArrowDown16.svg") center / contain no-repeat;
  flex-shrink: 0;
  margin-top: 8px;
}

/* About cards */
.about-grid {
  width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.about-card {
  position: relative;
  min-height: 320px;
  overflow: hidden;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
  background: var(--teal-gradient);
}

.about-card--dark {
  background: var(--color-primary);
}

.about-card__label {
  font-size: 13px;
  opacity: 0.9;
  margin-bottom: 8px;
}

.about-card__title {
  font-family: var(--font-medium);
  font-size: 28px;
  letter-spacing: -0.04em;
  margin-bottom: 12px;
  color: #fff;
}

.about-card__text {
  font-size: 15px;
  line-height: 1.4;
  max-width: 36ch;
  margin-bottom: 20px;
  color: rgba(255, 255, 255, 0.92);
}

.about-card .btn {
  align-self: flex-start;
  background: #fff;
  color: var(--color-primary);
}

/* Products */
.products-block {
  width: var(--container);
  margin-inline: auto;
}

.product-tabs {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 64px;
  margin-bottom: 24px;
  padding: 48px 0 0;
  border-bottom: 1px solid var(--color-divider);
}

.product-tabs__btn {
  position: relative;
  border: 0;
  background: none;
  padding: 0 0 14px;
  font-size: 24px;
  font-family: var(--font);
  font-weight: 400;
  color: #8d8d8d;
  cursor: pointer;
  letter-spacing: -0.05em;
  line-height: 1.2;
}

.product-tabs__btn.is-active {
  color: var(--color-primary-hover);
  font-family: var(--font-bold);
  font-weight: 700;
}

.product-tabs__btn.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--color-primary-hover);
}

.product-panels [data-tab-panel] {
  display: none;
}

.product-panels [data-tab-panel].is-active {
  display: block;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.product-card {
  border: 1px solid var(--color-border);
  background: #fff;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  transition: box-shadow 0.2s ease;
}

.product-card:hover {
  box-shadow: var(--shadow-card);
}

.product-card__media {
  aspect-ratio: 4 / 3;
  background: linear-gradient(160deg, #33c4cd 0%, #1c8f97 100%);
  position: relative;
  overflow: hidden;
}

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-card__overlay {
  position: absolute;
  inset: 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
  background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, 0.35) 100%);
  pointer-events: none;
}

.product-card__overlay-title {
  font-family: var(--font-medium);
  font-weight: 500;
  font-size: 42px;
  letter-spacing: -0.05em;
  line-height: 1.2;
}

.product-card__tags {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.95;
}

.product-card__body {
  padding: 16px 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.product-card__title {
  font-size: 24px;
  font-family: var(--font-light);
  font-weight: 300;
  color: var(--color-text);
  letter-spacing: -0.05em;
  line-height: 1.2;
}

.product-card__excerpt {
  font-size: 16px;
  font-family: var(--font-medium);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.3;
  flex: 1;
}

.product-card__link {
  color: var(--color-primary);
  font-size: 14px;
  font-family: var(--font-medium);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 1;
}

.products-banner {
  margin-top: 24px;
  background: var(--color-primary);
  color: #fff;
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
}

.products-banner h3 {
  margin: 0 0 8px;
  font-family: var(--font-medium);
  font-size: 22px;
  letter-spacing: -0.03em;
  color: #fff;
}

.products-banner p {
  margin: 0;
  font-size: 15px;
  opacity: 0.95;
}

/* Blog cards */
.post-grid {
  width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.post-card {
  border: 1px solid var(--color-border);
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease;
  overflow: hidden;
}

.post-card:hover {
  box-shadow: var(--shadow-card);
}

.post-card__media {
  aspect-ratio: 16 / 10;
  background: var(--color-bg-muted);
  overflow: hidden;
}

.post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-card__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.post-card__title {
  font-size: 16px;
  font-family: var(--font-medium);
  color: var(--color-text-dark);
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.post-card__meta {
  font-size: 12px;
  color: var(--color-text-secondary);
}

.post-card__excerpt {
  font-size: 14px;
  line-height: 1.35;
  flex: 1;
}

/* Certificates */
.certs {
  width: var(--container);
  margin-inline: auto;
}

.certs__layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 32px;
  align-items: center;
}

.certs__badges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.cert-badge {
  background: var(--color-cert-fda);
  color: #fff;
  min-height: 160px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.cert-badge--light {
  background: #fff;
  color: var(--color-cert-fda);
  border: 1px solid var(--color-divider);
}

.cert-badge__label {
  font-size: 28px;
  font-family: var(--font-medium);
  letter-spacing: -0.04em;
}

.cert-badge__sub {
  font-size: 14px;
  margin-top: 8px;
  opacity: 0.9;
}

.certs__copy h3 {
  margin: 0 0 12px;
  font-size: 24px;
  font-family: var(--font-medium);
  color: var(--color-text);
}

.certs__copy p {
  font-size: 15px;
  line-height: 1.4;
  margin-bottom: 16px;
}

.certs__nav {
  display: flex;
  gap: 12px;
  align-items: center;
}

.certs__nav button {
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-divider);
  background: #fff url("../image/PreviousButtondarkdefault.svg") center / 20px no-repeat;
  cursor: pointer;
}

.certs__nav button[data-next] {
  background-image: url("../image/Nextbuttondarkdefault.svg");
}

/* Exhibition */
.exhibition {
  width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
}

.exhibition__feature {
  min-height: 320px;
  background: var(--color-bg-muted);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
  color: #fff;
}

.exhibition__feature img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.exhibition__feature::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.55));
}

.exhibition__feature > * {
  position: relative;
  z-index: 1;
}

.exhibition__feature h3 {
  margin: 0 0 8px;
  font-size: 28px;
  font-family: var(--font-medium);
  color: #fff;
}

.exhibition__side {
  display: grid;
  gap: 16px;
}

.exhibition-card {
  border: 1px solid var(--color-border);
  padding: 20px;
  background: #fff;
}

.exhibition-card h4 {
  margin: 0 0 8px;
  font-size: 18px;
  font-family: var(--font-medium);
  color: var(--color-text-dark);
}

.exhibition-card p {
  font-size: 14px;
  line-height: 1.35;
}

/* FAQ + CTA */
.faq-cta {
  width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 32px;
  align-items: start;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq-item {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--color-border);
}

.faq-item.is-open {
  background: #fff;
  box-shadow: var(--shadow-card);
}

.faq-item__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  padding: 16px 32px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-light);
  font-weight: 300;
  font-size: 32px;
  color: var(--color-text);
  letter-spacing: -0.05em;
  line-height: 1.2;
}

.faq-item.is-open .faq-item__toggle {
  color: var(--color-primary);
}

.faq-item__question {
  flex: 1;
  min-width: 0;
}

.faq-item__icon {
  width: 16px;
  height: 16px;
  background: url("../image/icon_arrow_down_default.svg") center / contain no-repeat;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.faq-item.is-open .faq-item__icon {
  transform: rotate(180deg);
  background-image: url("../image/icon_arrow_up_hover.svg");
}

.faq-item__panel {
  display: none;
  padding: 0 32px 16px 64px;
  font-size: 16px;
  font-family: var(--font);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.faq-item.is-open .faq-item__panel {
  display: block;
}

.lead-box {
  background: #fff;
  border: 1px solid var(--color-border);
  padding: 28px;
}

.lead-box h3 {
  margin: 0 0 12px;
  font-size: 32px;
  font-family: var(--font-light);
  font-weight: 300;
  color: var(--color-text-dark);
  letter-spacing: -0.05em;
  line-height: 1.2;
}

.lead-box p {
  font-size: 16px;
  font-family: var(--font);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin-bottom: 20px;
}

.lead-form {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 16px;
}

.lead-form input[type="email"],
.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid var(--color-divider);
  padding: 14px 16px;
  font: inherit;
  color: var(--color-text);
  background: #fff;
}

.lead-form input[type="email"] {
  flex: 1;
  min-height: 64px;
  font-size: 24px;
  font-family: var(--font-light);
  font-weight: 300;
  letter-spacing: -0.05em;
  padding: 16px 24px;
}

.lead-form .btn {
  width: auto;
  flex-shrink: 0;
  padding: 16px 48px;
}

.contact-form .btn {
  width: 100%;
}

.form-notice {
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 14px;
  border: 1px solid var(--color-divider);
}

.form-notice--ok {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.form-notice--err {
  border-color: #c44;
  color: #c44;
}

/* Footer */
.site-footer {
  background: #f9f9f9;
  padding: 56px 0 40px;
  margin-top: 40px;
}

.site-footer__inner {
  width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.1fr 1.35fr 1.7fr 1.1fr;
  gap: 36px;
  align-items: start;
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.site-footer__social {
  display: flex;
  gap: 10px;
}

.site-footer__social a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #5a5a5a;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.site-footer__social a:hover {
  background: var(--color-primary-hover); /* 收尾批: hover 统一 */
}

.site-footer__copy {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--color-text);
  line-height: 1.4;
}

.site-footer__heading {
  margin: 0 0 16px;
  font-size: 18px;
  font-family: var(--font-medium);
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.site-footer__heading--spaced {
  margin-top: 28px;
}

.site-footer__subheading {
  margin: 0 0 8px;
  font-size: 14px;
  font-family: var(--font-bold);
  color: var(--color-text);
}

.site-footer__col a,
.site-footer__col span {
  font-size: 13px;
  color: var(--color-text);
  line-height: 1.45;
}

.site-footer__col a {
  display: inline-block;
  margin-bottom: 8px;
}

.site-footer__col a:hover {
  color: var(--color-primary-hover); /* 收尾批: hover 统一 */
}

.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.site-footer__contact li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
}

.site-footer__contact img {
  margin-top: 2px;
}

.site-footer__contact a {
  margin-bottom: 0;
}

.site-footer__product-groups {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr;
  gap: 20px;
}

/* Inner pages */
.page-hero {
  padding: 48px 0 24px;
  background: linear-gradient(180deg, #fafafa, #fff);
}

.page-hero__inner {
  width: var(--container);
  margin-inline: auto;
}

.page-hero h1 {
  margin: 0;
  font-family: var(--font-thin);
  font-weight: 100;
  font-size: clamp(32px, 4vw, 44px);
  letter-spacing: -0.05em;
  color: var(--color-text);
}

.page-content,
.content-wrap {
  width: var(--container);
  margin: 0 auto 64px;
}

.entry-content {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
}

.entry-content h2,
.entry-content h3 {
  color: var(--color-text-dark);
  letter-spacing: -0.03em;
}

.entry-content img {
  margin: 16px 0;
}

.product-detail__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 32px;
}

.product-detail__gallery img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--color-border);
}

.product-detail__section {
  margin-bottom: 36px;
}

.product-detail__section h2 {
  margin: 0 0 12px;
  font-size: 22px;
  font-family: var(--font-medium);
}

.archive-grid {
  width: var(--container);
  margin: 0 auto 64px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.pagination {
  width: var(--container);
  margin: 0 auto 64px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--color-divider);
  font-size: 14px;
}

.pagination .current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.contact-form {
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  font-family: var(--font-medium);
}

.contact-form textarea {
  min-height: 140px;
  resize: vertical;
}

.empty-state {
  width: var(--container);
  margin: 40px auto;
  padding: 40px;
  border: 1px dashed var(--color-divider);
  text-align: center;
}

/* Responsive */
@media (max-width: 1100px) {
  .product-grid,
  .post-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .archive-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero__inner,
  .about-grid,
  .certs__layout,
  .exhibition,
  .faq-cta,
  .site-footer__inner {
    grid-template-columns: 1fr;
  }

  .hero__slide.is-active {
    grid-template-columns: 1fr;
  }

  .site-footer__product-groups {
    grid-template-columns: 1fr 1fr;
  }

  .site-footer__cols {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  :root {
    --page-gutter: 16px;
    --container: 100%;
    --header-container: 100%;
    --header-h: 64px;
  }

  .site-header__inner {
    flex-wrap: wrap;
  }

  .site-nav {
    order: 3;
    width: 100%;
    justify-content: flex-start;
  }

  .site-nav__toggle {
    display: flex;
  }

  .site-nav__list {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    background: #fff;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    height: auto;
    min-height: 0;
    padding: 24px;
    gap: 18px;
    box-shadow: var(--shadow-nav);
    transform: translateY(-120%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
    box-sizing: border-box;
  }

  .site-nav__list.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .site-nav__list > li {
    width: 100%;
  }

  .site-nav__list > li > a {
    height: auto;
    min-height: 40px;
  }

  .site-nav__list .menu-item-has-children > a .site-nav__chevron {
    position: static;
    margin-top: 0;
    margin-left: 4px;
    display: inline-block;
    opacity: 1;
  }

  .site-nav__list .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    box-shadow: none;
    padding: 8px 0 0 12px;
  }

  .site-header__actions {
    gap: 16px;
  }

  .site-header__cta {
    font-size: 11px;
    padding: 8px 10px;
  }

  .site-footer__product-groups,
  .site-footer__cols {
    grid-template-columns: 1fr;
  }

  .hero__inner {
    padding-top: 24px;
    min-height: 0;
  }

  .hero__slide.is-active {
    grid-template-columns: 1fr;
  }

  .product-grid,
  .post-grid,
  .archive-grid,
  .certs__badges,
  .site-footer__cols {
    grid-template-columns: 1fr;
  }

  .products-banner {
    grid-template-columns: 1fr;
  }

  .section {
    padding: 48px 0;
  }

  .pl-grid {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 48px;
  }

  .pd-main__inner {
    grid-template-columns: 1fr;
  }

  .pd-color__row {
    flex-direction: column;
  }

  .pd-main__media {
    width: 100%;
    min-height: 280px;
  }

  .pd-hero {
    height: auto;
    min-height: 280px;
    max-height: none;
  }

  .pd-procedure__steps {
    justify-content: flex-start;
  }

  .pd-procedure__steps li:not(:last-child)::after {
    display: none;
  }

  .pd-cases {
    grid-template-columns: 1fr;
  }
}

/* ========== Product list (prodoct) ========== */
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-family: var(--font-bold);
  letter-spacing: -0.015em;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
}

.breadcrumb__item:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 2px;
  background: url("../image/breadcrumbsarrow.svg") center / contain no-repeat;
  opacity: 0.7;
}

.breadcrumb__item.is-current,
.breadcrumb__item.is-current span {
  color: #fff;
}

.pl-hero .breadcrumb__item {
  color: rgba(255, 255, 255, 0.55);
}

.pl-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  padding: 48px 0 56px;
  background: var(--color-bg-muted); /* media 修槽批 10-05：缺件/加载瞬间底板=D3 canvas 族 token（原硬编码 #143038 系视频标题时代遗留） */
}

/* batch1#1 — hero 纯图化：.pl-hero__video（视频面）退役，
   改 .pl-hero__image（单图 ph-img-1920x512）。定位/裁切语义与原视频一致。 */
.pl-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.pl-hero--image {
  /* batch1#1+#2（纯图态）：去上下留白=图即容器；breadcrumb 距 hero 顶 16px；
     下边距 24px（8x；原 56px 非 8x，STATE #12 尾账同批归零）。
     归档/旧模板 .pl-hero（非 --image）不受影响，保持原 48/56。 */
  padding: 0 0 24px;
  /* media 修槽批 10-05：槽合同 1920×256，图 absolute 不撑高容器 → 钉比例=图即容器 */
  aspect-ratio: 1920 / 256;
}

.pl-hero--image .breadcrumb {
  margin: 16px 0 0; /* 距 hero 顶 16px（需求原文）；breadcrumb 为 hero 唯一内容，下缘留白由 .pl-hero--image padding-bottom 承担。 */
}

.pl-hero--image .breadcrumb__list {
  margin-bottom: 0;
}

.pl-hero__inner {
  position: relative;
  z-index: 2;
  width: var(--container);
  margin-inline: auto;
}

/* batch1#2：水平适配 1440 列=与 .pl-list__inner 同宽制（置于通用规则后，
   同特异度后来者胜出；归档/旧模板非 --image 态仍走 --container）。 */
.pl-hero--image .pl-hero__inner {
  width: min(1440px, calc(100% - 48px));
}

.pl-list__inner {
  width: min(1440px, calc(100% - 48px));
  margin-inline: auto;
}

.pl-hero__title {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px; /* batch1#2: STATE #12 尾账清（原 6px 非 8x；内容对=8px，Denny 8 倍数规范）；本类现仅归档/旧模板消费（/products/ hero 已纯图化，batch1#1）。 */
  font-family: var(--font-thin);
  font-weight: 100;
  font-size: clamp(28px, 3.6vw, 40px);
  letter-spacing: -0.04em;
  line-height: 1.2;
  color: #fff;
}

.pl-list {
  padding: 64px 0; /* batch-3#6: hero→tab=64（原 32）；tab→卡片区由 .pl-filters margin-bottom 64 + padding-bottom 64 不变 */
  background: #fff;
}

.pl-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 32px; /* batch-3#6: tab 间距=32px（8 倍数规范，Denny 09-28；原 `10px 64px`=列 64/行 10 双废，行列统一 32） */
  justify-content: center;
  margin: 0 0 64px; /* batch-3#6: tab→卡片区=64px（原 36） */
}

.pl-filters__btn {
  font-family: var(--font-bold); /* batch-3#7: 全 tab（含未选中）=type-ui-button-2-600 等价 Noto Sans SC-Bold 700（Denny 09-28 规范，原未选中 var(--font)/400） */
  font-weight: 700;
  font-size: var(--fs-tab-label); /* 批2#1: DTC type-ui-button-2 实测 24px */
  line-height: var(--lh-ui); /* DTC line-height 100% */
  letter-spacing: var(--ls-body); /* 批2#1: DTC -0.015em（原 0.04em 为批次1自拟值） */
  text-transform: uppercase; /* 批2#5: DTC 字面大写；库内 term 保持 Title Case，呈现层处理（R5） */
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 8px 0; /* 批2#3: padding-bottom 8px = DTC 列 gap 0.5rem（line-height:1 下视觉间距=8px）；左右 padding 去除使下划线宽=文字宽（DTC .Pixso-frame-7_1255 width:100%） */
  border-bottom: 2px solid transparent; /* DTC height 0.125rem=2px，等效 */
  transition: color 0.2s ease, border-color 0.2s ease;
}

.pl-filters__btn:hover,
.pl-filters__btn.is-active {
  color: var(--color-primary-hover); /* 收尾批: DS 语义 hover/选中态=primary-hover #30DBE6（DTC 实测）；normal=primary。token 用途登记，D3 报批 */
  border-bottom-color: var(--color-primary-hover);
}

/* batch-3#8: 删除 `.pl-filters__btn.is-active { font-family/font-weight }` 覆盖块——
   全 tab 统一 700 后选中/hover 字体无差异，选中态=纯同 hover（仅 color+border-bottom-color，规范 Denny 09-28）。 */

.pl-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 80px;
  row-gap: 64px;
}

.pl-grid--related {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pl-card {
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 100%;
}

.pl-card__media {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  background: #fff;
  overflow: hidden;
  padding: 0;
}

.pl-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
}

.pl-card__body {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1;
}

.pl-card__titles {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pl-card__title {
  margin: 0;
  font-size: var(--fs-heading-1); /* batch-2 B4/D-03: DTC type-heading-1-500 32px */
  font-family: var(--font-medium);
  font-weight: 500; /* batch-2 B4/D-06: --font-medium 仅族名不含字重，Medium 意图必须显式 500 */
  letter-spacing: var(--ls-display); /* batch-2 B4/D-05: DTC -0.05em */
  color: var(--color-text);
  line-height: var(--lh-display); /* batch-2 B4/D-04: DTC 120% */
}

.pl-card__title a {
  color: inherit;
  text-decoration: none;
}

.pl-card__series {
  margin: 0;
  font-size: var(--fs-body); /* DTC 7_1277 副题名 type-body-300 16px/400 (S2 校准①) */
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body); /* batch-2 B5/R4 归位: 原裸数字 1.3 = --lh-body 同值 */
  color: var(--color-text);
}

.pl-card__specs {
  display: flex;
  flex-direction: column;
  margin-top: 0; /* batch-3#3: 标题块→首条分隔线=24px 由 .pl-card__body gap 承担，本处不再叠加 */
  border-top: 1px solid var(--color-text-muted); /* batch-2 B10 附注/R4 归位: 原硬编码 #c5c5c5 */
  flex: 1;
}

.pl-card__spec {
  display: flex;
  flex-direction: column;
  gap: 8px; /* batch-3#1: label↔value=8px（8 倍数规范覆盖 DTC 22px，Denny 09-28 F-01 关账；裸值合法=D3 §3 不建间距 token） */
  padding: 16px 0; /* batch-3#1: 块↔分隔线=16px（1px border 不动 → 线两侧各 16） */
  border-bottom: 1px solid var(--color-text-muted); /* batch-2 B10 附注/R4 归位: 原硬编码 #c5c5c5 */
}

.pl-card__spec:last-child {
  border-bottom: 0;
}

.pl-card__spec-label {
  font-size: var(--fs-body); /* DTC type-body-600 16px/500 (S2 校准②) */
  font-family: var(--font-medium);
  font-weight: 500; /* batch-2 B6/D-01: --font-medium 仅族名字符串不含字重，意图 Medium 必须显式 font-weight */
  letter-spacing: var(--ls-body); /* batch-2 B6/D-02: DTC -0.015em（校准②漏项） */
  line-height: var(--lh-body); /* batch-2 B6 归位: 机检 label lh 24px→DTC 130%（此行偏差表未编 D 号，见交付报告登记） */
  color: var(--color-text);
}

.pl-card__spec-value {
  font-size: var(--fs-body); /* batch-2 B7/D-07: DTC type-body-300 16px（与 label 同字号仅字重区分） */
  font-weight: 400; /* batch-2 B7: 显式 Regular，防继承 label 500 */
  letter-spacing: var(--ls-body); /* batch-2 B7/D-08: DTC -0.015em */
  color: var(--color-text);
  line-height: var(--lh-body); /* batch-2 B7/D-08: DTC 130%（原裸数字 1.35） */
}

.pl-card__spec-range {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  font-size: 14px;
  color: var(--color-text);
  min-height: 28px;
}

.pl-card__spec-side {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 64px;
}

.pl-card__spec-side--right {
  align-items: flex-end;
  text-align: right;
}

.pl-card__spec-range small {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text);
}

.pl-card__spec-arrow {
  flex: 1;
  height: 10px;
  margin: 0 4px 6px;
  position: relative;
  background: repeating-linear-gradient(90deg, var(--color-text-secondary) 0 3px, transparent 3px 7px); /* S0: 原硬编码 #9a9a9a=旧 token 值，归位 R4 */
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: center;
}

.pl-card__spec-arrow::before,
.pl-card__spec-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid var(--color-text-secondary);
  border-right: 1.5px solid var(--color-text-secondary);
}

.pl-card__spec-arrow::before {
  left: 0;
  transform: translateY(-50%) rotate(-135deg);
}

.pl-card__spec-arrow::after {
  right: 0;
  transform: translateY(-50%) rotate(45deg);
}

.pl-card__cta {
  width: auto;
  align-self: flex-start;
  margin-top: 0; /* batch-3#3: 末参数块→按钮=24px 由 .pl-card__body gap 承担（原 4px 叠加破坏规范） */
  min-width: 128px;
  line-height: var(--lh-ui); /* batch-2 B8/D-09: 卡内局部覆盖 DTC lh 100%（.btn 全局 1.2 不碰，全站统一归 S5 报批观察） */
}

/* batch-3#2: 删除 `.pl-card__specs--simple .pl-card__spec { gap: 6px }`（F-01 吸收：
   该覆盖使非 zirconia 三版式 label↔value 停在 6px，与 Zir 卡节奏不一致。8 倍数规范下三版式统一 8px，
   覆盖规则整体作废，勿恢复。） */

.pl-card__bullets {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pl-card__bullets li {
  position: relative;
  padding: 0 0 2px 12px;
  border: 0;
  font-size: 14px;
  line-height: 1.35;
  color: var(--color-text);
}

.pl-card__bullets li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
}

/* E-05 v1.2/§6b-3：横向 4 列（flex row gap 16），列=纵向子块（标签上 24/300 + 值下 16/400，列内 gap 16），
   列间=1px 纵分隔线（border-left 随列删除=无孤线）；旧纵向行+横线+gap8/pad16 作废。 */
.pd-list-specs {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap; /* T2 裁决(10-01 Denny)#2：四列恒保持一行，长内容列内折行（wrap 版式作废） */
  align-items: stretch;
  gap: 16px;
  margin: 16px 0 8px;
  padding: 0;
  list-style: none;
}

.pd-list-specs__item {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 240px; /* 列宽上限≈稿件列宽(216)+余量；超限内容折行不撑爆整行 */
  padding-left: 16px;
  border-left: 1px solid var(--color-divider); /* E-06：旧硬编码色归位 R4/§6b-3 */
}

.pd-list-specs__item:first-child {
  border-left: 0;
  padding-left: 0;
}

.pd-list-specs__label {
  /* §6b-3：heading-2-300 档=24/300 显式（旧 ui-label-600 12/700 作废） */
  font-size: var(--fs-heading-2);
  font-family: var(--font-light);
  font-weight: 300;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  color: var(--color-text-secondary);
  text-transform: uppercase;
}

.pd-list-specs__value {
  display: flex;
  flex-direction: column;
  gap: 8px; /* SIZE 两源分行=列内两行（行距内容对 8，§2.2） */
  font-size: var(--fs-body);
  font-family: var(--font);
  font-weight: 400; /* §6b-3：body-300 档=16/400（值行距 8） */
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  overflow-wrap: break-word; /* 列内自然折行（T2 裁决#2）；break-word 保 "30mm" 类整词不被 anywhere 切碎 */
}

/* ========== Product detail (product-4d) ========== */
body.is-product-detail {
  /* 1920 画布：1440 内容栏 = 与顶栏 header-container 同一左缘；Hero 底到主内容 64 */
  --pd-content-width: var(--header-container);
  --pd-hero-to-main: 64px;
  --pd-section-gap: 32px;
}

body.is-product-detail .site-main {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

body.is-product-detail .pd-hero,
body.is-product-detail .pd-main,
body.is-product-detail .pd-block,
body.is-product-detail .section {
  width: 100%;
  max-width: 1920px;
  margin-inline: auto;
  box-sizing: border-box;
}

/* 详情页各行区块与顶栏同宽 1440（8050_3443 / 3478 / 3493 left:240 @1920）
   批 2（v1.4 §6b-7）：s7 的 1440 容器=.faq-cta__inner（.faq-cta 改左列 624，见批 2 块）。 */
body.is-product-detail .pd-hero__inner,
body.is-product-detail .pd-main__inner,
body.is-product-detail .pd-block__inner,
body.is-product-detail .section-head,
body.is-product-detail .faq-cta__inner {
  width: var(--pd-content-width);
  max-width: 1440px;
  margin-inline: auto;
}

/* v1.4 §6b-7：帧 pad 上下 64（905=64+777+64 基线；section 高动态随内容，禁钉死）。 */
body.is-product-detail #contact.section {
  padding: 64px 0;
}

/* E-19/S3 §2.7: faq-cta-bg=video 位（本包唯一视频槽；Hero 是图片槽勿混）。
   <video autoplay muted loop playsinline>+poster 降级；poster 档=ph-video-1920x1080（v1.4 改档，旧 920 作废）；
   素材缺失期 poster 查无 → video 节点整段不渲染=纯降级路径（section 白底+overlay 呈现，无报错）。 */
body.is-product-detail #contact.section {
  position: relative;
  overflow: hidden;
}

/* 批 3 · §6b-7① v1.5 层级链：bg=video 槽铺满整个第 1 层（1920 通栏），不是 inner 1440。
   DOM 实况=video 节点本就是 #contact.section 直属子（批 2 无此项缺陷，如实登记）；
   批 3 通栏强化=inset:0+width:100%（依赖 section 盒宽）→ left:calc(50%-50vw)+width:100vw
   （视口通栏=§6b-7④ rect.width==vw 断言在 >1920 视口亦成立；≤1920 两法等价）。
   层级序显式化=bg(z0) < ::after overlay(z1) < inner(z2)（批 2 inner z1/overlay z0 同序，语义不变）。 */
.faq-cta-bg {
  position: absolute;
  inset-block: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

body.is-product-detail #contact.section > .faq-cta__inner {
  position: relative;
  z-index: 2; /* 批 3：让位 ::after overlay(z=1)，三层序 bg<mask<content */
}

/* 遮罩=既有 --overlay-image token（D3 注册：详情页图片遮罩，非新值）。批 3 层级链：遮罩在 bg 之上、内容之下。 */
body.is-product-detail #contact.section::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay-image);
  z-index: 1;
  pointer-events: none;
}

/* ========== S3/TC 批 2 · s7 FAQ-CTA v1.4（§6b-7/§2.7 权威；E-18 纪律=只加详情作用域覆盖，禁全局重写 .faq-item） ========== */
/* 两列结构：inner 1440 横向 gap32；左列 .faq-cta=624 纵向 gap32（faq-list↔subscribe）；
   右列=稿件「占位」(109:2) 空容器——前台不建节点，背景视频自右带露出。 */
body.is-product-detail .faq-cta__inner {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 32px;
}

/* 批 3 · §6b-7① v1.5 点名清算：全局 .faq-cta（theme.css L993-998 grid 时代遗留）=
   width:var(--container) / margin-inline:auto / align-items:start。
   批 2 覆盖只改 display/direction/width/gap，漏了后两条——margin-inline:auto 吞内边距=左列居中事故；
   align-items:start 使列内子项 shrink-to-fit=展开 624/收起回缩 379.6 宽度漂移（CDP 复现实证）。
   v1.5 显式重置 margin-inline:0 + align-items:stretch，禁依赖层叠默认。 */
body.is-product-detail .faq-cta {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 624px;
  max-width: 100%;
  flex: 0 0 auto;
  margin-inline: 0;      /* 清算全局 L994：624 列贴 inner 左缘（col_x=240 @1920），非居中 */
  align-items: stretch; /* 清算全局 L998：列内子项满宽，两态横向几何恒定 624 */
}

/* FAQ 条目：稿件 gap16（全局公共件 8 不动）；item=radius4+收起半透明白（全局 border 非合同值，详情域去除）。
   width:100% 双保险（§6b-7① 点名清算配套：防 align-items 路径外的收缩回归）。 */
body.is-product-detail .faq-list {
  gap: 16px;
  width: 100%;
}

body.is-product-detail .faq-item {
  border: 0;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.8);
}

body.is-product-detail .faq-item.is-open {
  background: #fff;
  box-shadow: none; /* 合同两态=底色差（半透明白/纯白），无阴影条款；全局 shadow-card 属公共件旧观感 */
}

/* chevron=单资产+CSS 旋转（R5）：mask 复用主题既有 icon_arrow_down_default.svg（=切片 faqitem__icon3 同源形状，
   零新导入，禁五份 svg）；收起 0°=朝下 ∨，展开 180°=朝上 ∧（色随 token 不随资产）。
   批 3 §6b-7② v1.5 更正：撤批 2 的 ±90°（PM 几何推导错误——下箭头 ±90°=朝右/朝左，即 Denny T2 所见现象）；
   推导留痕：切片收起态矩阵 matrix(-4.37e-08,1,-1,-4.37e-08,13,6) 与主题 svg 逐字节同=顶点在下=∨；
   展开态 matrix(-4.37e-08,-1,-1,4.37e-08,13,10)=顶点在上=∧；∨→∧=垂直翻转=rotate(180deg)。
   全局公共件 L1053 本来就是 180°，批 2 属越权改写后失准，详情覆盖回归正确角度。 */
body.is-product-detail .faq-item__icon {
  background: var(--color-text);
  -webkit-mask: url("../image/icon_arrow_down_default.svg") center / contain no-repeat;
  mask: url("../image/icon_arrow_down_default.svg") center / contain no-repeat;
  transform: rotate(0deg); /* 收起=∨ 朝下（v1.5 终值） */
}

body.is-product-detail .faq-item.is-open .faq-item__icon {
  background: var(--color-primary);
  background-image: none; /* 覆盖全局双资产换图逻辑：详情域单资产，仅旋转+色变 */
  transform: rotate(180deg); /* 展开=∧ 朝上（v1.5 终值，撤批 2 +90°） */
}

/* panel=16/400（body-300 档）、pad-left 32、问题↔答案 gap 8、hug 高（禁 min-height，Hero 红线沿用）。 */
body.is-product-detail .faq-item__panel {
  padding: 8px 32px 16px;
  font-size: var(--fs-body);
  font-family: var(--font);
  font-weight: 400;
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body);
}

/* Subscribe（左列下）=纵向 gap24：copy 组 gap8（标题 32/300 白+正文 16/400 白）→ field → submit 行。
   width:100% 双保险（§6b-7① 点名清算配套，与 .faq-list 同批）。 */
body.is-product-detail .subscribe {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

body.is-product-detail .subscribe__copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.is-product-detail .subscribe__copy h3 {
  margin: 0;
  font-size: var(--fs-heading-1);
  font-family: var(--font-light);
  font-weight: 300;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  color: #fff;
}

body.is-product-detail .subscribe__copy p {
  font-size: var(--fs-body);
  font-family: var(--font);
  font-weight: 400;
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body);
  color: #fff;
}

body.is-product-detail .subscribe__form {
  display: flex;
  flex-direction: column;
  gap: 24px; /* 与 .subscribe 同档：copy↔field↔submit 三段皆 24（§6b-7 纵向 gap24） */
}

/* field=h64 radius4 白底 pad[8,32]，占位 24/300 secondary。 */
body.is-product-detail .subscribe__field {
  width: 100%;
  height: 64px;
  border: 0;
  border-radius: var(--radius);
  background: #fff;
  padding: 8px 32px;
  font-size: var(--fs-heading-2);
  font-family: var(--font-light);
  font-weight: 300;
  letter-spacing: var(--ls-display);
  color: var(--color-text);
}

/* 聚焦态（Denny T2 工单外顺路项 10-03）：黑框=Chromium UA 默认 focus ring（outline auto 1px #101010，
   画在边缘内=观感"小于框 2px"）。改显式 primary-hover 2px 内描边（offset:-2px=贴合框默认尺寸，不撑布局）。 */
body.is-product-detail .subscribe__field:focus {
  outline: 2px solid var(--color-primary-hover);
  outline-offset: -2px;
}

body.is-product-detail .subscribe__field::placeholder {
  font-size: var(--fs-heading-2);
  font-family: var(--font-light);
  font-weight: 300;
  letter-spacing: var(--ls-display);
  color: var(--color-text-secondary);
  opacity: 1;
}

/* submit 行 gap16；按钮=复用 .btn-primary 体系（禁令 #7：禁改全局 .btn），
   pad[16,32] 差异=详情作用域覆盖，登记 T1.5 偏差表裁决。 */
body.is-product-detail .subscribe__submit {
  display: flex;
  gap: 16px;
}

body.is-product-detail .subscribe__submit .btn {
  padding: 16px 32px; /* 合同 §6b-7 按钮 pad[16,32]；全局 .btn pad[10,24] 不动（禁令 #7）→ T1.5 登记 */
}

/* S3/TC v1.2 §6b-1：Hero=纯静态背景图（1920×512 FIXED 槽，O-1 主题固定图），无文字/KPI 叠加层。
   旧 __copy/__head/__title/__series/__rule/__kpis/.pd-kpi* 簇随 v1.2 勘误删除。面包屑保留（D-2）。 */
.pd-hero {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin-inline: auto;
  margin-bottom: 0;
  height: 512px;
  min-height: 512px;
  max-height: 512px;
  padding: 0;
  color: #fff;
  overflow: hidden;
  background: #fff;
}

.pd-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 0;
}

.pd-hero__inner {
  width: var(--pd-content-width);
  max-width: 1440px;
  height: 100%;
  margin-inline: auto;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px 0 0;
  box-sizing: border-box;
}

.pd-hero__inner .breadcrumb__list {
  margin-bottom: 0;
}

.pd-main__inner,
.pd-block__inner {
  width: var(--pd-content-width);
  max-width: 1440px;
  margin-inline: auto;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}

.pd-hero .breadcrumb__item a {
  color: rgba(255, 255, 255, 0.55);
}

.pd-hero .breadcrumb__item.is-current,
.pd-hero .breadcrumb__item.is-current span {
  color: #fff;
}

.pd-main {
  margin-top: 0;
  padding: var(--pd-hero-to-main, 64px) 0 0;
  background: #fff;
}

body.is-product-detail .pd-block {
  padding: var(--pd-section-gap, 32px) 0;
}

.pd-main__inner {
  display: grid;
  /* T2 裁决(10-01 Denny)：图↔内容 96→64；列宽=480 合同槽 + 内容列吃剩余（原 fr 比例在 gap 变化下
     会把视觉间距算成 64+余量，改 px 钉死 media 列，内容列 minmax(0,1fr) 允许收缩）。 */
  grid-template-columns: 480px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
  justify-content: start;
}

.pd-main__media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 480px;
  min-height: 480px;
  justify-self: start;
}

.pd-main__content {
  min-width: 0;
  justify-self: start;
}

/* E-16: FIXED 480×480 合同槽 + object-fit:cover（DTC §3 行2；旧 max-width:442/contain 作废）。 */
.pd-main__media img {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* E-03: headline 双档=title display-section-1-100（42/100 显式）、series -500（42/500 显式）。
   旧 40px=设计源误差（S2 D-03 同款病），--fs-display-3=42 权威。 */
.pd-headline {
  margin: 0 0 24px; /* 块↔块=24（F-01） */
}

/* v1.2 §6b-2/E-03：headline 档位=title 42/100（display-section-1-100）、series 24/500（heading-2-500）。
   稿件两档均无 text-transform（样例 "4D Ultra Fit"/"The Full Arch Master" 混排大小写）→ 旧 uppercase 随档位校准移除。 */
.pd-headline__title {
  margin: 0;
  font-family: var(--font-thin);
  font-weight: 100;
  font-size: var(--fs-display-3);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  color: var(--color-text);
}

.pd-headline__series {
  margin: 8px 0 0; /* 内容对=8 */
  font-family: var(--font-medium);
  font-weight: 500;
  font-size: var(--fs-heading-2);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  color: var(--color-text);
}

/* E-04: features=body 档；行=「标题: 说明」；lh 归 var(--lh-body)（1.35→1.3）。
   title 段 body-600 档=16/500 显式（S2 B6 教训：族名不含字重轴）。 */
.pd-features {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px; /* 内容对=8 */
}

.pd-features li {
  margin: 0;
  font-size: var(--fs-body);
  font-family: var(--font);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--color-text);
}

.pd-features__title {
  font-family: var(--font-medium);
  font-weight: 500;
}

.pd-procedure {
  margin-top: 8px;
}

/* E-07 v1.2/§6b-4：区块标题=display-section-1-100 档 42/100（旧 24/500 系 P0 档位误判作废）
   + 标题下 1px 横线（R5=CSS 生成，色归 --color-divider；旧 --color-border 同批归位）。 */
.pd-procedure__title {
  margin: 0 0 16px; /* 线↔内容=块↔线 16 */
  width: 100%;
  font-size: var(--fs-display-3);
  font-family: var(--font-thin);
  font-weight: 100;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  color: var(--color-text);
  padding-bottom: 8px; /* 标题↔线=内容对 8（§3 Sutitle cGap 10=设计源误差判废） */
  border-bottom: 1px solid var(--color-divider);
}

.pd-procedure__steps {
  /* v1.2 §6b-4/E-08：图标+箭头单 flex row（8 列节奏 icon,arrow×5,icon），块档 gap 24；
     箭头=列间 16×16（gap 24 内居中：4+16+4），资源=主题既有 icon_arrow_right_default.svg（未新增导入）。 */
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 64px; /* 6×88 + 5×64 = 848 = 稿件图标行实测宽（§6b-4），8x 合规 */
  margin: 0; /* 线↔内容节奏归 .pd-procedure__title margin */
  padding: 0;
  list-style: none;
}

.pd-procedure__steps li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px; /* E-08: 图标↔标签=内容对 8（旧 10=设计源误差） */
  width: 88px;
  text-align: center;
}

.pd-procedure__steps li:not(:last-child)::after {
  /* E-21 v1.2：箭头图素必须渲染（16×16 右向 chevron，图标行垂直居中 top=88/2-8=36；
     gap 64 中居中 = left calc(100% + (64-16)/2) = +24px）。 */
  content: "";
  position: absolute;
  top: 36px;
  left: calc(100% + 24px);
  width: 16px;
  height: 16px;
  background: url("../image/icon_arrow_right_default.svg") center / contain no-repeat;
}

.pd-procedure__icon,
.pd-procedure__placeholder {
  display: block;
  width: 88px;
  height: 88px;
  border-radius: 4px;
  overflow: hidden;
  background: #f3f3f3;
}

.pd-procedure__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pd-procedure__placeholder {
  background:
    radial-gradient(circle at 50% 42%, #e8e8e8 0 28%, transparent 29%),
    linear-gradient(180deg, #f7f7f7 0%, #ececec 100%);
}

/* E-09 v1.2/§6b-4：步骤标签=body-600 档 16/500 显式（旧 14/400 系 P0 误判作废；S2 B6 教训=fw 必写）。 */
.pd-procedure__label {
  font-size: var(--fs-body);
  font-family: var(--font-medium);
  font-weight: 500;
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body);
  color: var(--color-text);
}

/* 稿件区块标题=display-section-1-100 档（42/100 显式）；旧 40px=S2 D-03 同款设计源误差→--fs-display-3 权威。
   标题↔下划线 gap：绑定表 §3 Sutitle cGap=10 判设计源误差→校准 8（内容对档）；下划线↔内容=块↔线 16。 */
.pd-section-title {
  margin: 0 0 16px; /* 线↔内容=块↔线 16 */
  width: 100%;
  font-family: var(--font-thin);
  font-weight: 100;
  font-size: var(--fs-display-3);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  color: var(--color-text);
  padding-bottom: 8px; /* 标题↔线=8（§3，同上） */
  border-bottom: 1px solid var(--color-divider); /* §6b-4：线色=divider 权威（旧 --color-border 归位） */
}

.pd-block {
  padding: 48px 0;
  background: #fff;
}

.pd-block--muted {
  background: #f9f9f9;
}

/* ========== S3/TC s4 COLOR（组 B V1.3：色号组循环） v1.2 §6b-5 重写 ========== */
/* 外层=横向一行（flex row; gap 16；列宽自适应禁钉稿件 384/226/314）；组间=纯 gap 白隙无竖线。
   每列=column(图 h112 + chips 列)，图↔chips=内容对 8。旧纵向堆叠作废。 */
.pd-color__row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap; /* T2 裁决(10-01 Denny)#3：gap 16→24 后五列自然宽合计(1376+96)超 1440，
                        列收缩=~3% 等比微缩（图宽自动重算，高 112 保持）；窄屏归媒体查询 column */
  align-items: flex-start;
  gap: 24px;
  margin: 0; /* 线↔内容节奏归 .pd-section-title margin */
}

.pd-color__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
  min-width: 0;
}

/* 渲染高 112px 定、宽随图自然比例（C3-a）；禁 object-fit:cover（会裁图，违反"宽随图"合同）。 */
.pd-color__images {
  display: block;
  width: auto;
  height: 112px;
  max-width: 100%;
}

/* v1.3 终裁（Denny 10-01，§6b-5）：chips=横排 wrap 居中，组内 gap=16（批 2 落地，旧暂用 8 废弃）。 */
.pd-color__chips {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* E-11: chips=body-600 档=16/500 显式（旧 --font-bold+fw600=族名/轴双错）。 */
.pd-color__chips li {
  font-size: var(--fs-body);
  font-family: var(--font-medium);
  font-weight: 500;
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body);
  color: var(--color-text);
}

/* v1.2 §6b-5：chips=组内纵排一行一个，旧横排 "\" 分隔前缀随版式作废（列间无分隔符=纯 gap 白隙）。 */

/* ========== S3/TC s5 APPLICATION（O-4=全站固定图标库） ========== */
/* 图示 FIXED 128×128；渲染长度随 indications 实际值。
   T2 裁决(10-01 Denny)#3：取消 space-between（§6b-6 稿件值覆盖），=居左横排 flex-start + 间隔 24
   （与 COLOR/CASE STUDY 统一 24 节奏；8×128+7×24=1192<1440 单行不溢出）。 */
.pd-application__list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 24px;
  margin: 0; /* 线↔内容节奏归 .pd-section-title margin */
  padding: 0;
  list-style: none;
}

.pd-application__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 128px;
  text-align: center;
}

.pd-application__icon {
  display: block;
  width: 128px;
  height: 128px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-bg-muted);
}

.pd-application__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 标签=body-600 档 16/500 显式（同 E-11 病根修正）。 */
.pd-application__label {
  font-size: var(--fs-body);
  font-family: var(--font-medium);
  font-weight: 500;
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body);
  color: var(--color-text);
}

/* E-14: margin-top 10→0（标题 padding-bottom 16 已含 块↔线 节奏，避免叠加；出口=预期表 24/0 取 0）。 */
.pd-cases {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
  margin-top: 0;
}

.pd-case {
  background: #fff;
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.pd-case:hover {
  box-shadow: var(--shadow-card);
}

.pd-case__media {
  display: block;
  aspect-ratio: 16 / 11;
  background: #f3f3f3;
  overflow: hidden;
}

.pd-case__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pd-case__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  flex: 1;
}

.pd-case__date {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-secondary, #8a8a8a);
}

.pd-case__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-text);
}

.pd-case__link {
  margin-top: auto;
  font-size: 12px;
  font-family: var(--font-bold);
  letter-spacing: 0.04em;
  color: var(--color-primary);
  text-decoration: none;
}

.pd-case__link:hover {
  text-decoration: underline;
}

@media (max-width: 1100px) {
  .pl-grid,
  .pl-grid--related,
  .pd-cases {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 48px;
    row-gap: 48px;
  }

  .pd-main__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .pd-hero {
    height: auto;
    min-height: 320px;
    max-height: none;
  }


  .pd-procedure__steps li:not(:last-child)::after {
    display: none;
  }
}

/* ========== Homepage v2 ?? 7 sections ========== */
.section-head--center {
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  margin-bottom: 0;
  width: 100%;
}

.section-head--center .section__title {
  max-width: 1100px;
  text-align: center;
}

.section-head--center .section__lead {
  margin-top: 0;
  max-width: 920px;
  text-align: center;
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.section-head--center .section-head__mark {
  margin-top: 0;
}

.section-head--center .section-head__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.section__title--on-dark {
  color: #fff;
}

.section__title--light {
  font-family: var(--font-light);
  font-weight: 300;
}

/* 1. Hero Showcase */
.hs-hero {
  padding: 0;
  background: #fff;
}

.hs-hero__inner {
  width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, var(--home-col-left)) minmax(0, var(--home-col-right));
  gap: var(--home-col-gap);
  align-items: stretch;
  aspect-ratio: 1920 / 720;
}

.hs-hero__left {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: #f3f3f3 center / cover no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 0;
  height: 100%;
}

.hs-hero__left-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.12) 100%);
  pointer-events: none;
}

.hs-hero__left-body {
  position: relative;
  z-index: 1;
  margin: 0 24px 24px;
  padding: 16px 32px;
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(2.67px);
  -webkit-backdrop-filter: blur(2.67px);
  border-radius: var(--radius);
}

.hs-hero__left-title {
  margin: 0;
  font-size: 48px;
  font-family: var(--font-thin);
  font-weight: 100;
  color: var(--color-text);
  letter-spacing: -0.05em;
  line-height: 1.2;
}

.hs-hero__left-sub {
  margin: 10px 0 0;
  font-size: 24px;
  font-family: var(--font-medium);
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: -0.05em;
  line-height: 1.2;
}

.hs-hero__left-text {
  margin: 14px 0 0;
  font-size: 16px;
  font-family: var(--font);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--color-text);
}

.hs-hero__carousel {
  position: relative;
  border-radius: var(--radius);
  background: #f7f7f7;
  overflow: hidden;
  min-height: 0;
  height: 100%;
}

.hs-slide {
  display: none;
  position: absolute;
  inset: 0;
  background: #f7f7f7 center / cover no-repeat;
}

.hs-slide.is-active {
  display: block;
}

.hs-slide__btn {
  position: absolute;
  left: 58%;
  top: 64%;
  z-index: 2;
  padding: 16px 48px;
}

.hs-hero__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  z-index: 3;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 40px 40px;
}

.hs-hero__nav--prev {
  left: 24px;
  background-image: url("../image/PreviousButtonlightdefault0.svg");
}

.hs-hero__nav--next {
  right: 24px;
  background-image: url("../image/Nextbuttonlighthover.svg");
}

.hs-hero__nav:hover {
  filter: brightness(1.05);
}

.hs-hero__dots.carousel-dots,
.hs-hero__dots {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  width: 60px;
  height: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  z-index: 3;
  margin: 0;
}

.hs-hero__dots.carousel-dots button,
.hs-hero__dots button {
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: var(--radius);
  background: rgba(26, 26, 26, 0.5);
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
}

.hs-hero__dots.carousel-dots button.is-active,
.hs-hero__dots button.is-active {
  width: 24px;
  background: var(--color-primary-hover);
}

/* 2. Reliable Supplier */
.rs-section {
  padding: 0;
  width: var(--container);
  margin-inline: auto;
}

.rs-section .section-head--center {
  padding: 32px 0;
  min-height: 150px;
  gap: 16px;
  justify-content: center;
  box-sizing: border-box;
}

.rs-section .section-head__mark {
  background-image: url("../image/IconArrowDown163.svg");
}

.rs-section .section__title {
  font-family: var(--font-light);
  font-weight: 300;
}

.li-section .section-head__mark {
  background-image: url("../image/IconArrowDown162.svg");
}

.pc-section .section-head__mark {
  background-image: url("../image/IconArrowDown161.svg");
}

.em-section .section-head__mark {
  background-image: url("../image/IconArrowDown160.svg");
}

.fl-section .section-head__mark {
  background-image: url("../image/IconArrowDown16.svg");
}

.li-section .section-head--center,
.em-section .section-head--center {
  gap: 32px;
  padding: 20px 0;
}

.pc-section .section-head--center {
  gap: 16px;
  padding: 32px 0;
}

.rs-grid {
  display: grid;
  grid-template-columns: minmax(0, var(--home-col-left)) minmax(0, var(--home-col-right));
  gap: var(--home-col-gap);
  margin-top: 0;
  aspect-ratio: 1920 / 768;
}

.rs-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: #1a2c34 center / cover no-repeat;
  color: #fff;
  min-height: 0;
  height: 100%;
  display: flex;
}

.rs-card__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,207,219,.55) 0%, rgba(0,0,0,.35) 48%, rgba(0,0,0,.55) 100%);
}

.rs-card--lg .rs-card__shade {
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.45) 100%);
}

.rs-card__content {
  position: relative;
  z-index: 1;
  padding: 32px;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.rs-card__content--center {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  max-width: 640px;
  margin-inline: auto;
}

.rs-card__label {
  margin: 0;
  font-size: 24px;
  font-family: var(--font-medium);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 1.2;
}

.rs-card__title {
  margin: 8px 0 0;
  font-size: 42px;
  font-family: var(--font-thin);
  font-weight: 100;
  letter-spacing: -0.05em;
  line-height: 1.2;
}

.rs-card--lg .rs-card__title {
  font-size: 64px;
}

.rs-card__text {
  margin: 12px 0 0;
  font-size: 24px;
  font-family: var(--font-light);
  font-weight: 300;
  letter-spacing: -0.05em;
  line-height: 1.2;
}

.rs-card__text--muted {
  opacity: .95;
  font-size: 16px;
  font-family: var(--font-light);
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.rs-card__foot {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.rs-card__logo {
  max-width: 110px;
  height: auto;
}

/* 3. Product Tabs */
.pt-section {
  padding: 48px 0 0;
  width: var(--container);
  margin-inline: auto;
}

.pt-panel {
  display: none;
}

.pt-panel.is-active {
  display: block;
}

.pt-layout {
  display: grid;
  grid-template-columns: minmax(0, var(--home-col-right)) minmax(0, var(--home-col-left));
  gap: var(--home-col-gap);
  margin-top: 24px;
  align-items: stretch;
  min-height: 0;
}

.pt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--home-col-gap);
  min-height: 0;
}

.pt-side {
  position: relative;
  min-height: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  background: #2a2a2a center / cover no-repeat;
  color: #fff;
  display: flex;
  align-items: flex-end;
  text-decoration: none;
}

.pt-side__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.1) 20%, rgba(0,0,0,.72) 100%);
}

.pt-side__copy {
  position: relative;
  z-index: 1;
  padding: 28px 22px;
}

.pt-side__title {
  margin: 0;
  font-size: 32px;
  font-family: var(--font-light);
  font-weight: 300;
  letter-spacing: -0.05em;
  line-height: 1.2;
}

.pt-side__text {
  margin: 14px 0 0;
  font-size: 16px;
  font-family: var(--font);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.pt-side__range {
  margin: 8px 0 0;
  font-size: 14px;
  font-family: var(--font-bold);
}

/* 4. Lab Insights */
.li-section {
  padding: 0;
  width: var(--container);
  margin-inline: auto;
  background: transparent;
}

.li-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 0;
}

.li-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid #ececec;
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.li-card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

.li-card__media {
  display: block;
  height: 240px;
  aspect-ratio: auto;
  overflow: hidden;
  background: #1a1a1a;
  border-radius: 0;
}

.li-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.li-card__date {
  margin: 0;
  padding: 16px 32px 0;
  font-size: 14px;
  font-family: var(--font);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1;
  text-transform: capitalize;
  color: #8d8d8d;
}

.li-card__text {
  margin: 0;
  padding: 8px 32px 0;
  font-size: 16px;
  font-family: var(--font-medium);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--color-text);
  flex: 1;
}

.li-card .product-card__link {
  padding: 12px 32px 16px;
}

/* 5. Proof & Certificates */
.pc-section {
  padding: 0;
  width: var(--container);
  margin-inline: auto;
}

.pc-section__title-line {
  display: block;
}

.pc-layout {
  display: grid;
  grid-template-columns: minmax(0, var(--home-col-left)) minmax(0, var(--home-col-right));
  gap: var(--home-col-gap);
  margin-top: 0;
  aspect-ratio: 1920 / 720;
}

.pc-left,
.pc-right {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: #16324a center / cover no-repeat;
  min-height: 0;
  height: 100%;
}

.pc-left__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(28, 61, 91, 0.72);
  backdrop-filter: blur(3.33px);
  -webkit-backdrop-filter: blur(3.33px);
  color: #fff;
  padding: 16px 32px 32px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-end;
}

.pc-left__panel h3 {
  margin: 0 0 8px;
  font-size: 48px;
  font-family: var(--font-thin);
  font-weight: 100;
  letter-spacing: -0.05em;
  line-height: 1.2;
}

.pc-left__panel p {
  margin: 0;
  font-size: 16px;
  font-family: var(--font-medium);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.3;
  max-width: 420px;
}

.pc-left__logo {
  width: 167px;
  max-width: 28%;
  height: auto;
  flex-shrink: 0;
}

.pc-left__logo-text {
  font-size: 28px;
  font-family: var(--font-bold);
  letter-spacing: 0.04em;
}

.pc-right__shade {
  position: absolute;
  inset: 0;
  background: rgba(20, 40, 55, .35);
}

.pc-certs {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 48px 24px 160px;
  overflow: hidden;
  min-height: 0;
}

.pc-certs__track {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  width: max-content;
  transition: transform 0.35s ease;
  will-change: transform;
}

.pc-cert {
  flex: 0 0 199px;
  width: 199px;
  height: 271px;
  position: relative;
  background: transparent;
  border-radius: var(--radius);
  overflow: hidden;
  opacity: 0.55;
  transform: scale(0.96);
  transition: opacity 0.25s ease, transform 0.25s ease;
  box-shadow: none;
}

.pc-cert.is-active {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}

.pc-right .pc-cert.carousel-slide {
  display: block;
}

.pc-cert a {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
  position: relative;
}

.pc-cert img {
  position: absolute;
  left: 8px;
  top: 6px;
  width: 183px;
  height: 254px;
  object-fit: cover;
  border-radius: var(--radius);
  filter: drop-shadow(0px 2px 8px rgba(0, 20, 21, 0.05));
}

.pc-cert__label,
.pc-cert span.pc-cert__label {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 6px;
  width: auto;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--color-primary);
  color: #fff;
  font-size: 16px;
  font-family: var(--font-medium);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 1.25;
  text-transform: uppercase;
  text-align: left;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 2px 8px rgba(0, 20, 21, 0.05);
}

.pc-cert__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: url("../image/Vector8.svg") center / contain no-repeat;
  display: inline-block;
}

.pc-certs__dots.hs-hero__dots,
.pc-certs .hs-hero__dots {
  position: relative;
  left: auto;
  bottom: auto;
  transform: none;
  margin: 0 auto;
  width: auto;
  justify-content: center;
  gap: 4px;
}

.pc-certs .hs-hero__dots button {
  width: 8px;
  height: 8px;
  background: var(--color-divider);
}

.pc-certs .hs-hero__dots button.is-active {
  width: 24px;
  background: var(--color-primary);
}

.pc-right__copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  z-index: 2;
  color: #fff;
  text-align: center;
  max-width: none;
  padding: 0 24px 24px;
}

.pc-right__copy h3 {
  margin: 0;
  font-size: 48px;
  font-family: var(--font-thin);
  font-weight: 100;
  letter-spacing: -0.05em;
  line-height: 1.2;
}

.pc-right__copy p {
  margin: 8px 0 0;
  font-size: 32px;
  font-family: var(--font-light);
  font-weight: 300;
  letter-spacing: -0.05em;
  line-height: 1.2;
}

.pc-right .hs-hero__nav {
  background-color: transparent;
}

.pc-right .hs-hero__nav--prev {
  background-image: url("../image/PreviousButtondarkdefault.svg");
}

.pc-right .hs-hero__nav--next {
  background-image: url("../image/Nextbuttondarkdefault.svg");
}

/* 6. Exhibition Mosaic */
.em-section {
  padding: 0;
  width: var(--container);
  margin-inline: auto;
}

.em-mosaic {
  display: grid;
  grid-template-columns: minmax(0, var(--home-col-left)) minmax(0, var(--home-col-right));
  gap: var(--home-col-gap);
  margin-top: 0;
  aspect-ratio: 1920 / 920;
}

.em-left,
.em-top {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: #333 center / cover no-repeat;
  color: #fff;
  min-height: 0;
}

.em-left {
  height: 100%;
}

.em-left__shade,
.em-top__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.55) 100%);
}

.em-left__copy,
.em-top__copy {
  position: relative;
  z-index: 1;
  padding: 24px;
}

.em-left__year {
  margin: 0;
  font-size: 24px;
  font-family: var(--font-medium);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 1.2;
}

.em-left__copy h3 {
  margin: 6px 0 10px;
  font-size: 42px;
  font-family: var(--font-thin);
  font-weight: 100;
  letter-spacing: -0.05em;
  line-height: 1.2;
}

.em-left__copy p {
  margin: 0;
  font-size: 24px;
  font-family: var(--font-light);
  font-weight: 300;
  letter-spacing: -0.05em;
  line-height: 1.2;
}

.em-top {
  min-height: 0;
  display: flex;
  align-items: flex-end;
}

.em-top__title {
  margin: 0 0 6px;
  font-family: var(--font-light);
  font-weight: 300;
  font-size: 32px;
  letter-spacing: -0.05em;
  line-height: 1.2;
}

.em-top__copy p {
  margin: 0;
  font-size: 24px;
  font-family: var(--font-light);
  font-weight: 300;
  letter-spacing: -0.05em;
  line-height: 1.2;
}

.em-right {
  display: grid;
  grid-template-rows: minmax(0, 368fr) minmax(0, 526fr);
  gap: var(--home-col-gap);
  min-height: 0;
}

.em-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--home-col-gap);
  min-height: 0;
}

.em-card {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid #ececec;
  box-shadow: none;
  transition: box-shadow 0.2s ease;
  min-height: 0;
  height: 100%;
}

.em-card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

.em-card__media {
  flex: 1 1 66%;
  min-height: 0;
  aspect-ratio: auto;
  overflow: hidden;
  background: #ddd;
}

.em-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.em-card__body {
  padding: 12px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 7. FAQ Lead ? Pixso 8050_1842: 1920?920, padding 0 162px, panel 624px */
.fl-section {
  position: relative;
  padding: 0;
  color: var(--color-text);
  background: #fff;
  width: 100%;
  max-width: 1920px;
  margin-inline: auto;
}

.fl-section__head {
  width: 100%;
  padding: 0;
}

.fl-section .section-head--center {
  gap: 32px;
  padding: 20px 0;
}

.fl-section__body {
  position: relative;
  width: 100%;
  height: 920px;
  padding: 0;
  background: #2a2a2a center / cover no-repeat;
  color: #fff;
  overflow: hidden;
}

.fl-section__shade {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
}

.fl-section__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
  padding: 0 162px;
  gap: 510px;
}

.fl-panel {
  margin-top: 0;
  width: 624px;
  max-width: 624px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
}

.fl-section .faq-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fl-section .faq-item {
  width: 100%;
  background: rgba(255, 255, 255, 0.8);
  color: var(--color-text);
  border-radius: var(--radius);
  overflow: hidden;
  border: 0;
}

.fl-section .faq-item.is-open {
  background: #fff;
}

.lead-box--on-media {
  width: 100%;
  background: transparent;
  color: #fff;
  padding: 0;
  box-shadow: none;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

.lead-box--on-media h3 {
  margin: 0;
  color: #fff;
  font-size: 32px;
  font-family: var(--font-light);
  font-weight: 300;
  letter-spacing: -0.05em;
  line-height: 1.2;
}

.lead-box--on-media .lead-box__copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.lead-box--on-media .lead-box__copy p {
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-family: var(--font);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.lead-box--on-media .form-notice {
  margin: 0;
}

.lead-box--on-media .lead-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.lead-box--on-media .lead-form input[type="email"] {
  width: 100%;
  flex: none;
  min-height: 64px;
  height: 64px;
  border: 0;
  border-radius: var(--radius);
  background: #fff;
  color: var(--color-text);
  font-size: 24px;
  font-family: var(--font-light);
  font-weight: 300;
  letter-spacing: -0.05em;
  padding: 8px 32px;
  box-sizing: border-box;
}

.lead-box--on-media .lead-form input[type="email"]::placeholder {
  color: #8d8d8d;
}

.lead-box--on-media .lead-form .btn {
  width: auto;
  flex-shrink: 0;
  padding: 16px 48px;
  font-size: 12px;
  font-family: var(--font-bold);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1;
}

@media (max-width: 1100px) {
  .fl-section__inner {
    padding: 48px 48px;
    height: auto;
    gap: 0;
  }

  .fl-section__body {
    height: auto;
    min-height: 0;
  }

  .fl-panel {
    width: 100%;
    max-width: 624px;
  }
}

@media (max-width: 768px) {
  .fl-section__inner {
    padding: 40px 24px;
  }

  .fl-section .faq-item__toggle {
    font-size: 22px;
    padding: 14px 20px;
  }

  .fl-section .faq-item__panel {
    padding: 0 20px 14px 52px;
  }

  .lead-box--on-media h3 {
    font-size: 24px;
  }

  .lead-box--on-media .lead-form input[type="email"] {
    font-size: 18px;
    padding: 8px 20px;
  }

  .lead-box--on-media .lead-form .btn {
    width: 100%;
  }
}

@media (max-width: 1100px) {
  .li-row {
    grid-template-columns: 1fr 1fr;
  }

  .hs-slide {
    min-height: 360px;
  }
}

@media (max-width: 768px) {
  .hs-hero__inner,
  .rs-grid,
  .pt-layout,
  .pt-grid,
  .pc-layout,
  .em-mosaic,
  .em-bottom,
  .li-row {
    grid-template-columns: 1fr;
    aspect-ratio: auto;
  }

  .em-right {
    grid-template-rows: auto;
  }

  .pc-left,
  .pc-right,
  .hs-hero__left,
  .hs-hero__carousel,
  .rs-card,
  .em-left,
  .em-top,
  .hs-slide,
  .pt-side {
    min-height: 420px;
    height: auto;
    aspect-ratio: auto;
  }

	.hs-hero__left-title {
		font-size: 32px;
	}

	.hs-slide__btn {
		left: 24px;
		top: auto;
		bottom: 72px;
		padding: 12px 28px;
	}

	.rs-card__title {
		font-size: 32px;
	}

	.rs-card--lg .rs-card__title {
		font-size: 40px;
	}

	.pc-left__panel h3,
	.pc-right__copy h3 {
		font-size: 32px;
	}

	.pc-right__copy p {
		font-size: 22px;
	}

	.faq-item__toggle {
		font-size: 22px;
	}

	.lead-form {
		flex-direction: column;
	}

	.lead-form .btn {
		width: 100%;
	}

	.product-tabs {
		gap: 24px;
		overflow-x: auto;
	}

	.product-tabs__btn {
		font-size: 16px;
		white-space: nowrap;
	}

	.product-card__overlay-title {
		font-size: 24px;
	}

  .pt-side {
    min-height: 280px;
  }

  .hs-hero__left,
  .hs-hero__carousel {
    min-height: 420px;
  }
}

/* Mobile / tablet: centered column, identical left/right gutters */
@media (max-width: 1100px) {
  :root {
    --page-gutter: 16px;
    --container: 100%;
    --header-container: 100%;
  }

  html,
  body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }

  .site-header,
  .site-main,
  .site-footer,
  .hs-hero,
  .fl-section {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    padding-inline: 0;
  }

  .site-nav__container,
  .hs-hero__inner,
  .rs-section,
  .pt-section,
  .li-section,
  .pc-section,
  .em-section,
  .site-footer__inner,
  .container,
  .page-hero__inner,
  .page-content,
  .content-wrap,
  .archive-grid,
  .pagination,
  .pl-hero__inner,
  .pl-list__inner,
  .pd-hero__inner,
  .pd-main__inner,
  .pd-block__inner,
  .empty-state,
  .fl-section__inner {
    width: calc(100% - (var(--page-gutter) * 2));
    max-width: calc(100% - (var(--page-gutter) * 2));
    margin-inline: auto;
    padding-inline: 0;
    box-sizing: border-box;
  }

  .hs-hero__inner,
  .rs-grid,
  .pt-layout,
  .pc-layout,
  .em-mosaic,
  .em-bottom {
    grid-template-columns: 1fr;
    aspect-ratio: auto;
    height: auto;
  }

  .em-right {
    grid-template-rows: auto;
  }

  .fl-section__inner {
    flex-direction: column;
    align-items: stretch;
    padding-block: 40px;
    gap: 32px;
    height: auto;
  }

  .fl-panel {
    width: 100%;
    max-width: 100%;
  }

  .fl-section__body {
    height: auto;
    min-height: 0;
  }

  .pc-certs,
  .product-tabs {
    max-width: 100%;
  }

  .pc-certs__track {
    max-width: none;
  }
}