/* page-family stylesheet: css/xgz-type-hub.css */
/* ==========================================================================
   Xinguangzheng · 产品 HUB 类型层 type-hub.css v1.0（皮肤·产品 HUB 页用，专题 HUB 借用；叠在组件层之后）
   原 hub/layout-hub.css
   规则：选择器 .xgz- 前缀；色值只走 --xgz-* 令牌（派生用 color-mix）；字号只走 --xgz-fs-*（允许 calc）；图片位与示意图不做动画
   由 csssplit.py 从 layout6.css / hub/layout-hub.css / blocks.css / home/layout-home.css 按"谁在用"拆出；拆分前后三页 × A/B/C × 4 宽度逐元素计算样式与截图全等
   ========================================================================== */
/* ---------- 首屏：左文右图（主图叠一张错开的图框） ---------- */
.xgz-hub-hero .xgz-hero-in { align-items: center; }
.xgz-hub-hero-media { position: relative; }
.xgz-hub-hero-media::before { content: ""; position: absolute; inset: 22px -18px -18px 22px; border: 1px solid var(--xgz-on-deep-line); background: color-mix(in srgb, var(--xgz-on-deep) 3%, transparent); pointer-events: none; }
.xgz-site .xgz-hub-hero-ph { position: relative; aspect-ratio: 4 / 3; border-radius: 0; box-shadow: 0 30px 60px color-mix(in srgb, var(--xgz-deep) 55%, transparent); }
.xgz-hub-tags { display: flex; flex-wrap: wrap; gap: var(--xgz-s2); margin: var(--xgz-s5) 0 0; }
.xgz-hub-tags li { display: inline-flex; align-items: center; gap: var(--xgz-s2); padding: 6px var(--xgz-s3); border: 1px solid var(--xgz-on-deep-line); font-size: var(--xgz-fs-sm); font-weight: var(--xgz-fw-bold); color: var(--xgz-on-deep); background: color-mix(in srgb, var(--xgz-on-deep) 5%, transparent); }
.xgz-hub-tags li::before { content: ""; width: 6px; height: 6px; background: var(--xgz-brand); flex: none; }
.xgz-site[data-dir="b"] .xgz-hub-tags li { border-radius: 999px; }
.xgz-site[data-dir="c"] .xgz-hub-tags li { border-color: var(--xgz-line); color: var(--xgz-ink); background: var(--xgz-surface); }
.xgz-site[data-dir="c"] .xgz-hub-hero-media::before { border-color: var(--xgz-line); background: transparent; }
.xgz-site[data-dir="b"] .xgz-hub-hero .xgz-hero-in { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
/* ---------- 01 流程条：6 个节点，角色分色（红 = 鑫光正，描边 = 买方，虚线 = 当地承包商） ---------- */
.xgz-flow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--xgz-s3); counter-reset: none; margin-bottom: clamp(var(--xgz-s8), 5vw, var(--xgz-s10)); }
.xgz-flow-step { position: relative; display: flex; flex-direction: column; gap: var(--xgz-s2); padding: var(--xgz-s4); min-height: 132px; background: var(--xgz-surface); border: 1px solid var(--xgz-line); }
.xgz-flow-step:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: calc(var(--xgz-s3) * -1); width: var(--xgz-s3); height: 2px; background: var(--xgz-ink-4); }
.xgz-flow-step:not(:last-child)::before { content: ""; position: absolute; z-index: 1; top: calc(50% - 4px); right: calc(var(--xgz-s3) * -1); border-left: 6px solid var(--xgz-ink-4); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.xgz-flow-step b { font-size: var(--xgz-fs-md); line-height: 1.35; color: var(--xgz-ink); }
.xgz-flow-r { margin-top: auto; align-self: flex-start; padding: 2px var(--xgz-s2); font-size: var(--xgz-fs-xs); font-weight: var(--xgz-fw-bold); border: 1px solid var(--xgz-ink-3); color: var(--xgz-ink-2); }
.xgz-flow-step--xgz { background: var(--xgz-deep-2); border-color: var(--xgz-deep-2); }
.xgz-flow-step--xgz b { color: var(--xgz-on-deep); }
.xgz-flow-step--xgz .xgz-flow-r { background: var(--xgz-brand-btn); border-color: var(--xgz-brand-btn); color: var(--xgz-on-deep); }
.xgz-flow-step--local { border-style: dashed; border-color: var(--xgz-ink-4); background: var(--xgz-surface-2); }
.xgz-flow-step--local .xgz-flow-r { border-style: dashed; }
.xgz-site[data-dir="a"] .xgz-flow-step--xgz { background-image: linear-gradient(var(--xgz-grid-fine) 1px, transparent 1px), linear-gradient(90deg, var(--xgz-grid-fine) 1px, transparent 1px); background-size: 16px 16px; }
.xgz-site[data-dir="b"] .xgz-flow-step { border-radius: var(--xgz-r-lg); }
.xgz-site[data-dir="b"] .xgz-flow-r { border-radius: 999px; }
/* ---------- 通用：两栏、散文、callout ---------- */
.xgz-hub-2col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(var(--xgz-s6), 4vw, 56px); align-items: start; }
.xgz-hub-2col--note { margin-top: clamp(var(--xgz-s7), 4vw, var(--xgz-s9)); align-items: center; }
.xgz-scope .xgz-hub-prose p, .xgz-scope .xgz-hub-cost-text p { margin: 0; font-size: var(--xgz-fs-md); line-height: 1.75; color: var(--xgz-ink-2); }
.xgz-scope .xgz-hub-cost-text p + p { margin-top: var(--xgz-s4); }
.xgz-scope .xgz-hub-callout { margin: 0; padding: var(--xgz-s2) 0 var(--xgz-s2) var(--xgz-s5); border-left: 3px solid var(--xgz-brand); font-size: var(--xgz-fs-lg); font-weight: var(--xgz-fw-bold); line-height: 1.55; color: var(--xgz-ink); }
/* ---------- 01 适配勾选卡 ---------- */
.xgz-fit { position: relative; padding: var(--xgz-s6); background: var(--xgz-surface); border: 1px solid var(--xgz-line); border-top: 3px solid var(--xgz-brand); }
.xgz-scope .xgz-fit-h { margin: 0 0 var(--xgz-s3); font-size: var(--xgz-fs-md); font-weight: var(--xgz-fw-bold); color: var(--xgz-ink); }
.xgz-fit-list li { position: relative; padding: var(--xgz-s2) 0 var(--xgz-s2) var(--xgz-s7); font-size: var(--xgz-fs-md); line-height: 1.55; color: var(--xgz-ink-2); border-bottom: 1px solid var(--xgz-line); }
.xgz-fit-list li::before { content: ""; position: absolute; left: 4px; top: calc(var(--xgz-s2) + 6px); width: 12px; height: 6px; border-left: 2px solid var(--xgz-accent-text); border-bottom: 2px solid var(--xgz-accent-text); transform: rotate(-45deg); }
.xgz-scope .xgz-fit-no { position: relative; margin: var(--xgz-s4) 0 0; padding-left: var(--xgz-s7); font-size: var(--xgz-fs-sm); line-height: 1.65; color: var(--xgz-ink-3); }
.xgz-fit-no::before, .xgz-fit-no::after { content: ""; position: absolute; left: 4px; top: 10px; width: 14px; height: 2px; background: var(--xgz-brand); transform: rotate(45deg); }
.xgz-fit-no::after { transform: rotate(-45deg); }
.xgz-site[data-dir="b"] .xgz-fit { border-radius: var(--xgz-r-lg); border-color: transparent; box-shadow: var(--xgz-shadow); }
/* ---------- 02 类型表（HUB 核心）：行号、链接、整行悬停 ---------- */
.xgz-hub-table { width: 100%; }
.xgz-hub-tnote { margin: var(--xgz-s4) 0 0; }
/* 02 供货国家：散文卡压在点阵地图左边 */
.xgz-hub-supplied { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; margin-top: clamp(var(--xgz-s8), 5vw, var(--xgz-s10)); }
.xgz-hub-supplied-card { position: relative; z-index: 1; margin-right: -64px; padding: var(--xgz-s6); background: var(--xgz-surface); border-top: 3px solid var(--xgz-brand); box-shadow: var(--ly-shadow, var(--xgz-shadow-2)); }
.xgz-scope .xgz-hub-supplied-card p { margin: 0; font-size: var(--xgz-fs-md); line-height: 1.75; color: var(--xgz-ink-2); }
.xgz-hub-map { padding: var(--xgz-s5) var(--xgz-s5) var(--xgz-s5) calc(var(--xgz-s5) + var(--xgz-s10)); }
.xgz-hub-pin { position: absolute; left: var(--x); top: var(--y); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--xgz-fig-accent); box-shadow: 0 0 0 2px var(--xgz-fig-bg); }
.xgz-hub-pin--home { width: 16px; height: 16px; margin: -8px 0 0 -8px; background: var(--xgz-fig-bg); border: 3px solid var(--xgz-fig-accent); }
/* ---------- 03 规格：callout + 散文 ---------- */
.xgz-hub-2col--note .xgz-hub-callout { font-size: var(--xgz-fs-xl); }
/* ---------- 04 成本 ---------- */
.xgz-hub-cost { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(var(--xgz-s6), 4vw, 56px); align-items: center; margin-bottom: clamp(var(--xgz-s7), 4vw, var(--xgz-s9)); }
.xgz-hub-num { position: relative; padding: var(--xgz-s7) var(--xgz-s6); background: var(--xgz-deep-2); color: var(--xgz-on-deep-2); }
.xgz-site[data-dir="a"] .xgz-hub-num { background-image: linear-gradient(var(--xgz-grid-fine) 1px, transparent 1px), linear-gradient(90deg, var(--xgz-grid-fine) 1px, transparent 1px); background-size: 16px 16px; box-shadow: var(--ly-off) var(--ly-off) 0 -1px var(--ly-bg), var(--ly-off) var(--ly-off) 0 0 var(--ly-frame); }
.xgz-scope .xgz-hub-num-v { margin: 0 0 var(--xgz-s3); font-size: calc(var(--xgz-fs-2xl) * 1.2); font-weight: var(--xgz-fw-black); line-height: 1.2; color: var(--xgz-on-deep); letter-spacing: var(--xgz-ls-tight); }
.xgz-scope .xgz-hub-num-t { margin: 0; padding-top: var(--xgz-s3); border-top: 1px solid var(--xgz-on-deep-line); font-size: var(--xgz-fs-sm); color: var(--xgz-on-deep-2); }
.xgz-site[data-dir="b"] .xgz-hub-num { border-radius: var(--xgz-r-lg); }
.xgz-hub-cost-text { display: grid; gap: var(--xgz-s4); }
/* 三栏范围表：列头带符号（✓ 包含｜+ 选项｜− 不含） */
.xgz-hub-scope { margin: 0; }
.xgz-scope .xgz-hub-table--scope th { width: 33.33%; }
.xgz-scope .xgz-hub-table--scope th::before { display: inline-block; width: 1.3em; font-weight: var(--xgz-fw-black); }
.xgz-scope .xgz-hub-table--scope th:nth-child(1)::before { content: "✓"; color: var(--xgz-accent); }
.xgz-scope .xgz-hub-table--scope th:nth-child(2)::before { content: "+"; color: var(--xgz-on-deep); }
.xgz-scope .xgz-hub-table--scope th:nth-child(3)::before { content: "−"; color: var(--xgz-brand); }
.xgz-scope .xgz-hub-table--scope td { vertical-align: top; font-size: var(--xgz-fs-base); }
.xgz-scope .xgz-hub-table--scope td:last-child { color: var(--xgz-ink-3); }
.xgz-site[data-dir="c"] .xgz-scope .xgz-hub-table--scope th:nth-child(2)::before, .xgz-site[data-dir="c"] .xgz-hub-table--scope th:nth-child(2)::before { color: var(--xgz-ink); }
.xgz-site[data-dir="b"] .xgz-hub-table--scope th:nth-child(2)::before { color: var(--xgz-ink); }
/* 价格驱动图 ‖ 中段 CTA */
.xgz-hub-cost-foot { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(var(--xgz-s6), 4vw, var(--xgz-s9)); align-items: stretch; margin-top: clamp(var(--xgz-s7), 4vw, var(--xgz-s9)); }
.xgz-hub-drivers { margin: 0; padding: var(--xgz-s5); background: var(--xgz-fig-bg); border-radius: var(--xgz-card-r); }
.xgz-hub-drivers svg { width: 100%; height: auto; }
.xgz-fig .f-txt--c { font-size: var(--xgz-fs-sm); fill: var(--xgz-fig-text); }
.xgz-site[data-dir="a"] .xgz-hub-drivers { background-image: linear-gradient(var(--xgz-grid-fine) 1px, transparent 1px), linear-gradient(90deg, var(--xgz-grid-fine) 1px, transparent 1px); background-size: 16px 16px; border-radius: 0; }
.xgz-site[data-dir="c"] .xgz-hub-drivers { border: 1px solid var(--xgz-line); }
.xgz-hub-midcta { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: var(--xgz-s5); padding: var(--xgz-s7) var(--xgz-s6); background: var(--xgz-deep-2); color: var(--xgz-on-deep-2); border-top: 3px solid var(--xgz-brand); }
.xgz-scope .xgz-hub-midcta p { position: relative; z-index: 2; margin: 0; font-size: var(--xgz-fs-lg); line-height: 1.6; color: var(--xgz-on-deep); }
.xgz-hub-midcta .xgz-btn { position: relative; z-index: 2; align-self: flex-start; }
.xgz-site[data-dir="a"] .xgz-hub-midcta { box-shadow: var(--ly-off) var(--ly-off) 0 -1px var(--ly-bg), var(--ly-off) var(--ly-off) 0 0 var(--ly-frame), var(--ly-shadow-s); }
.xgz-site[data-dir="b"] .xgz-hub-midcta { border-radius: var(--xgz-r-lg); border-top: 0; background-image: linear-gradient(120deg, var(--xgz-deep-2), var(--xgz-deep-3)); }
.xgz-site[data-dir="c"] .xgz-hub-midcta { background: var(--xgz-surface); color: var(--xgz-ink-2); border: 1px solid var(--xgz-ink); border-top: 3px solid var(--xgz-brand); }
.xgz-site[data-dir="c"] .xgz-scope .xgz-hub-midcta p, .xgz-site[data-dir="c"] .xgz-hub-midcta p { color: var(--xgz-ink); }
/* ---------- 05 单跨 vs 多跨 ---------- */
.xgz-hub-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--xgz-s5); }
.xgz-hub-pairc { display: flex; flex-direction: column; background: var(--xgz-surface); border: 1px solid var(--xgz-line); }
.xgz-hub-pairfig { margin: 0; padding: var(--xgz-s5) var(--xgz-s6); background: var(--xgz-fig-bg); }
.xgz-hub-pairfig svg { width: 100%; max-width: 420px; height: auto; margin: 0 auto; }
.xgz-hub-pairb { padding: var(--xgz-s5) var(--xgz-s6) var(--xgz-s6); }
.xgz-scope .xgz-hub-pairb h3 { margin: 0 0 var(--xgz-s2); font-size: var(--xgz-fs-xl); }
.xgz-scope .xgz-hub-pairb p { margin: 0; font-size: var(--xgz-fs-md); line-height: 1.7; color: var(--xgz-ink-2); }
.xgz-site[data-dir="a"] .xgz-hub-pairfig { background-image: linear-gradient(var(--xgz-grid-fine) 1px, transparent 1px), linear-gradient(90deg, var(--xgz-grid-fine) 1px, transparent 1px); background-size: 16px 16px; }
.xgz-site[data-dir="a"] .xgz-hub-pairc { box-shadow: 0 6px 18px color-mix(in srgb, var(--xgz-deep) 5%, transparent); }
.xgz-site[data-dir="b"] .xgz-hub-pairc { border-radius: var(--xgz-r-lg); border-color: transparent; box-shadow: var(--xgz-shadow); overflow: hidden; }
.xgz-scope .xgz-hub-judge { margin: clamp(var(--xgz-s7), 4vw, var(--xgz-s9)) 0 0; padding: var(--xgz-s6) var(--xgz-s7); background: var(--xgz-surface-2); border-left: 4px solid var(--xgz-brand); font-size: var(--xgz-fs-lg); line-height: 1.7; color: var(--xgz-ink); }
/* ---------- 06 / 07 照片 × 文字卡压边 ---------- */
.xgz-hub-media { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; margin-top: clamp(var(--xgz-s8), 5vw, var(--xgz-s10)); }
.xgz-hub-media > :first-child { grid-column: 1; grid-row: 1; }
.xgz-site .xgz-hub-media .xgz-ph { aspect-ratio: 16 / 10; border-radius: 0; }
.xgz-hub-media-card { grid-column: 2; grid-row: 1; position: relative; z-index: 1; margin-left: -72px; padding: var(--xgz-s6); background: var(--xgz-surface); border-top: 3px solid var(--xgz-brand); box-shadow: var(--ly-shadow, var(--xgz-shadow-2)); }
.xgz-scope .xgz-hub-media-card p { margin: 0; font-size: var(--xgz-fs-md); line-height: 1.75; color: var(--xgz-ink-2); }
.xgz-scope .xgz-hub-media-card p + p { margin-top: var(--xgz-s4); padding-top: var(--xgz-s4); border-top: 1px solid var(--xgz-line); }
.xgz-hub-media--rev { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.xgz-hub-media--rev > :first-child { grid-column: 2; }
.xgz-hub-media--rev .xgz-hub-media-card { grid-column: 1; margin: 0 -72px 0 0; }
.xgz-sec--dark .xgz-hub-media-card { background: var(--xgz-deep-2); border: 1px solid var(--xgz-on-deep-line); border-top: 3px solid var(--xgz-brand); box-shadow: 0 24px 50px color-mix(in srgb, var(--xgz-deep) 60%, transparent); }
.xgz-scope .xgz-sec--dark .xgz-hub-media-card p { color: var(--xgz-on-deep-2); }
.xgz-site[data-dir="c"] .xgz-sec--dark .xgz-hub-media-card { background: var(--xgz-surface); border-color: var(--xgz-line); }
.xgz-site[data-dir="c"] .xgz-scope .xgz-sec--dark .xgz-hub-media-card p, .xgz-site[data-dir="c"] .xgz-sec--dark .xgz-hub-media-card p { color: var(--xgz-ink-2); }
.xgz-site[data-dir="b"] .xgz-hub-media-card { border-radius: var(--xgz-r-lg); border-top: 0; }
.xgz-scope .xgz-hub-small { margin: var(--xgz-s7) 0 0; max-width: 90ch; font-size: var(--xgz-fs-sm); line-height: 1.7; color: var(--sec-mute, var(--xgz-ink-3)); }
.xgz-site[data-dir="a"] .xgz-sec--dark .xgz-hub-small, .xgz-site[data-dir="b"] .xgz-sec--dark .xgz-hub-small { color: var(--xgz-on-deep-2); }
.xgz-scope .xgz-sec--dark .xgz-hub-small a, .xgz-scope .xgz-sec--dark .xgz-hub-media-card a { color: var(--xgz-on-deep); }
.xgz-site[data-dir="c"] .xgz-scope .xgz-sec--dark .xgz-hub-small a, .xgz-site[data-dir="c"] .xgz-sec--dark .xgz-hub-small a { color: var(--xgz-ink); }
/* ---------- 07 报价输入 + 时间线 ---------- */
.xgz-inputs { position: relative; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--xgz-s6) clamp(var(--xgz-s6), 4vw, 56px); align-items: start; padding: var(--xgz-s6); background: var(--xgz-surface); border: 1px solid var(--xgz-line); border-top: 3px solid var(--xgz-brand); margin-bottom: clamp(var(--xgz-s9), 6vw, 72px); }
.xgz-scope .xgz-inputs > p { margin: 0; font-size: var(--xgz-fs-md); line-height: 1.75; color: var(--xgz-ink-2); }
.xgz-inputs-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--xgz-s3); }
.xgz-inputs-list li { display: flex; gap: var(--xgz-s3); align-items: flex-start; padding: var(--xgz-s3) var(--xgz-s4); background: var(--xgz-surface-2); font-size: var(--xgz-fs-base); font-weight: var(--xgz-fw-medium); line-height: 1.45; color: var(--xgz-ink); }
.xgz-inputs-n { flex: none; min-width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; background: var(--xgz-deep-2); color: var(--xgz-on-deep); font-size: var(--xgz-fs-xs); font-weight: var(--xgz-fw-black); }
.xgz-site[data-dir="a"] .xgz-inputs { box-shadow: var(--ly-off) var(--ly-off) 0 -1px var(--ly-bg), var(--ly-off) var(--ly-off) 0 0 var(--ly-frame), var(--ly-shadow-s); }
.xgz-site[data-dir="b"] .xgz-inputs { border-radius: var(--xgz-r-lg); border-color: transparent; border-top: 0; box-shadow: var(--xgz-shadow); }
.xgz-site[data-dir="b"] .xgz-inputs-list li, .xgz-site[data-dir="b"] .xgz-inputs-n { border-radius: var(--xgz-r-md); }
.xgz-site .xgz-hub-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* ---------- 09 尾部：左文字 + 按钮，右吊装实拍（错开图框） ---------- */
.xgz-hub-end-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(var(--xgz-s7), 5vw, 72px); align-items: center; }
.xgz-scope .xgz-hub-end p { font-size: var(--xgz-fs-lg); line-height: 1.7; color: var(--xgz-on-deep-2); margin: 0 0 var(--xgz-s6); }
.xgz-hub-end-media { position: relative; }
.xgz-hub-end-media::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; border: 1px solid var(--xgz-on-deep-line); pointer-events: none; }
.xgz-site .xgz-hub-end-media .xgz-ph { position: relative; aspect-ratio: 4 / 3; border-radius: 0; }
.xgz-site[data-dir="c"] .xgz-scope .xgz-hub-end p, .xgz-site[data-dir="c"] .xgz-hub-end p { color: var(--xgz-ink-2); }
.xgz-site[data-dir="c"] .xgz-hub-end-media::before { border-color: var(--xgz-line); }
@media (max-width: 1024px) { 
  /* ---------- 响应式 ---------- */
  .xgz-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .xgz-flow-step:nth-child(3n)::after, .xgz-flow-step:nth-child(3n)::before { display: none; }
  .xgz-inputs { grid-template-columns: minmax(0, 1fr); }
  .xgz-site .xgz-hub-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--xgz-s7); }
  .xgz-site[data-dir="a"] .xgz-hub-steps .xgz-step:nth-child(3n)::after { display: none; }
}
@media (max-width: 900px) { 
  .xgz-hub-2col, .xgz-hub-cost, .xgz-hub-cost-foot, .xgz-hub-pair, .xgz-hub-end-in { grid-template-columns: minmax(0, 1fr); }
  .xgz-hub-supplied { grid-template-columns: minmax(0, 1fr); }
  .xgz-hub-supplied-card { margin: 0 0 -24px; }
  .xgz-hub-map { padding: calc(var(--xgz-s5) + var(--xgz-s6)) var(--xgz-s4) var(--xgz-s4); }
  .xgz-hub-media, .xgz-hub-media--rev { grid-template-columns: minmax(0, 1fr); }
  .xgz-hub-media > :first-child, .xgz-hub-media--rev > :first-child { grid-column: 1; grid-row: 1; }
  .xgz-hub-media-card, .xgz-hub-media--rev .xgz-hub-media-card { grid-column: 1; grid-row: 2; margin: -40px var(--xgz-s4) 0; }
  .xgz-inputs-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) { 
  .xgz-flow { grid-template-columns: minmax(0, 1fr); gap: var(--xgz-s2); }
  .xgz-flow-step { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--xgz-s3); padding: var(--xgz-s3) var(--xgz-s4); }
  .xgz-flow-step:not(:last-child)::after { display: block; top: auto; bottom: calc(var(--xgz-s2) * -1); left: 30px; right: auto; width: 2px; height: var(--xgz-s2); }
  .xgz-flow-step:not(:last-child)::before { display: block; top: auto; bottom: calc(var(--xgz-s2) * -1); left: 26px; right: auto; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--xgz-ink-4); border-bottom: 0; }
  .xgz-flow-step b { font-size: var(--xgz-fs-base); }
  .xgz-flow-r { margin: 0; align-self: center; }
  .xgz-inputs { padding: var(--xgz-s5); }
  .xgz-inputs-list { grid-template-columns: minmax(0, 1fr); }
  .xgz-site .xgz-hub-steps { grid-template-columns: minmax(0, 1fr); }
  .xgz-hub-num, .xgz-hub-midcta, .xgz-fit { padding: var(--xgz-s5); }
  .xgz-scope .xgz-hub-num-v { font-size: var(--xgz-fs-2xl); }
  .xgz-scope .xgz-hub-judge { padding: var(--xgz-s5); font-size: var(--xgz-fs-md); }
  .xgz-hub-media-card, .xgz-hub-media--rev .xgz-hub-media-card { margin: -28px 10px 0; padding: var(--xgz-s5); }
  .xgz-hub-scope { overflow-x: auto; }
  .xgz-hub-table--scope { min-width: 520px; }
  .xgz-hub-end-media::before { inset: 10px -8px -8px 10px; }
}
/* 细调 1 */
.xgz-site .xgz-flow { margin-bottom: clamp(var(--xgz-s8), 5vw, var(--xgz-s10)); }
.xgz-scope .xgz-hub-hero h1, .xgz-site .xgz-hub-hero h1 { font-size: calc(var(--xgz-fs-2xl) * 1.75); line-height: 1.1; max-width: 18ch; }
@media (max-width: 600px) { 
  .xgz-scope .xgz-hub-hero h1, .xgz-site .xgz-hub-hero h1 { font-size: calc(var(--xgz-fs-2xl) * 1.3); }
}
.xgz-scope .xgz-hub-cost-text a, .xgz-scope .xgz-sec--alt .xgz-hub-prose a { color: var(--xgz-brand-text-h); }
/* 04：DOM 顺序 = 定稿（callout → 数据块 → 散文），视觉上数据块在左 */
.xgz-hub-cost { grid-template-areas: "num call" "num text"; row-gap: var(--xgz-s4); }
.xgz-hub-cost-call { grid-area: call; align-self: end; }
.xgz-hub-cost > .xgz-hub-num { grid-area: num; }
.xgz-hub-cost > .xgz-hub-cost-text { grid-area: text; align-self: start; }
@media (max-width: 900px) { 
  .xgz-hub-cost { grid-template-areas: "call" "num" "text"; }
}
/* 细调 2：手机上类型表卡片宽度复位；价格驱动图换竖版；范围表横滑 */
.xgz-site .xgz-hub-drv-t { display: none; }
@media (max-width: 600px) { 
  .xgz-site .xgz-hub-drv-w { display: none; }
  .xgz-site .xgz-hub-drv-t { display: block; max-width: 320px; }
  .xgz-hub-drivers .xgz-hub-drv-t .f-txt { font-size: var(--xgz-fs-xs); }
  .xgz-scope .xgz-hub-table--scope { min-width: 560px; }
}
/* ---------- 02 类型 post grid：定稿类型表排成 9 张卡（表格语义保留，表头视觉隐藏）；图不做动画，卡片悬停上浮 ---------- */
.xgz-site .xgz-tgrid, .xgz-site .xgz-tgrid tbody { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--xgz-s5); width: 100%; min-width: 0; margin: 0; }
.xgz-site .xgz-tgrid { display: block; counter-reset: tcard; }
.xgz-tgrid thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.xgz-scope .xgz-tgrid tr.xgz-tcard { counter-increment: tcard; position: relative; display: flex; flex-direction: column; background: var(--xgz-surface); border: 1px solid var(--xgz-line); transition: transform var(--xgz-t-base), box-shadow var(--xgz-t-base), border-color var(--xgz-t-fast); }
.xgz-scope .xgz-tgrid tr.xgz-tcard:hover, .xgz-scope .xgz-tgrid tr.xgz-tcard:focus-within { transform: translateY(-4px); border-color: var(--xgz-ink-4); box-shadow: 0 22px 48px color-mix(in srgb, var(--xgz-deep) 14%, transparent); }
.xgz-scope .xgz-tgrid td { display: block; padding: 0 var(--xgz-s5); border: 0; background: transparent; font-size: var(--xgz-fs-base); line-height: 1.55; white-space: normal; }
.xgz-scope .xgz-tgrid tbody tr td, .xgz-scope .xgz-tgrid tbody tr:nth-child(even) td { background: transparent; border: 0; }
.xgz-site .xgz-tcard-ph { aspect-ratio: 16 / 10; border-radius: 0; margin: 0 calc(var(--xgz-s5) * -1); }
.xgz-scope .xgz-tgrid td.xgz-tcard-h { padding-bottom: var(--xgz-s3); }
.xgz-scope .xgz-tgrid td.xgz-tcard-h::before { content: counter(tcard, decimal-leading-zero); position: absolute; left: 0; top: 0; z-index: 2; min-width: 34px; height: 30px; padding: 0 var(--xgz-s2); display: inline-flex; align-items: center; justify-content: center; background: var(--xgz-brand); color: var(--xgz-on-deep); font-size: var(--xgz-fs-xs); font-weight: var(--xgz-fw-black); font-variant-numeric: tabular-nums; }
.xgz-tcard-t { display: block; margin-top: var(--xgz-s4); padding-top: var(--xgz-s4); border-top: 2px solid var(--xgz-line); font-size: var(--xgz-fs-lg); font-weight: var(--xgz-fw-bold); line-height: 1.3; transition: border-color var(--xgz-t-fast); }
.xgz-scope .xgz-tcard-t a { color: var(--xgz-ink); text-decoration: none; }
.xgz-scope .xgz-tcard-t a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.xgz-scope .xgz-tgrid tr.xgz-tcard:hover .xgz-tcard-t { border-top-color: var(--xgz-brand); }
.xgz-scope .xgz-tgrid tr.xgz-tcard:hover .xgz-tcard-t a { color: var(--xgz-brand-text-h); }
.xgz-scope .xgz-tgrid td.xgz-tcard-k { padding-bottom: var(--xgz-s2); font-weight: var(--xgz-fw-bold); color: var(--xgz-ink); }
.xgz-scope .xgz-tgrid td.xgz-tcard-s { flex: 1; padding-bottom: var(--xgz-s5); padding-right: calc(var(--xgz-s5) + 44px); color: var(--xgz-ink-3); }
.xgz-scope .xgz-tgrid td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: var(--xgz-fs-xxs); font-weight: var(--xgz-fw-bold); letter-spacing: var(--xgz-ls-caps); text-transform: uppercase; color: var(--xgz-ink-3); }
.xgz-tcard-go { position: absolute; right: var(--xgz-s5); bottom: var(--xgz-s5); width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--xgz-line); color: var(--xgz-ink); transition: background var(--xgz-t-fast), border-color var(--xgz-t-fast), color var(--xgz-t-fast); }
.xgz-tcard-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.xgz-scope .xgz-tgrid tr.xgz-tcard:hover .xgz-tcard-go { background: var(--xgz-brand); border-color: var(--xgz-brand); color: var(--xgz-on-deep); }
.xgz-site[data-dir="a"] .xgz-tgrid tr.xgz-tcard { box-shadow: 0 6px 18px color-mix(in srgb, var(--xgz-deep) 5%, transparent); }
.xgz-site[data-dir="b"] .xgz-tgrid tr.xgz-tcard { border-radius: var(--xgz-r-lg); border-color: transparent; box-shadow: var(--xgz-shadow); overflow: hidden; }
.xgz-site[data-dir="b"] .xgz-tcard-go { border-radius: 50%; }
.xgz-site[data-dir="c"] .xgz-tgrid td.xgz-tcard-h::before { background: var(--xgz-ink); }
.xgz-tgrid-wrap { margin: 0; }
.xgz-scope .xgz-tgrid tr.xgz-tcard--inquiry { counter-increment: none; border-color: var(--xgz-brand); border-top: 3px solid var(--xgz-brand); background: var(--xgz-surface-2); }
.xgz-scope .xgz-tgrid tr.xgz-tcard--inquiry td.xgz-tcard-h::before { content: "↗"; }
.xgz-scope .xgz-tgrid tr.xgz-tcard--inquiry .xgz-tcard-t a { color: var(--xgz-brand-text-h); }
.xgz-scope .xgz-tgrid tr.xgz-tcard--inquiry .xgz-tcard-k { margin-top: var(--xgz-s4); }
@media (max-width: 1024px) { 
  .xgz-site .xgz-tgrid tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) { 
  .xgz-site .xgz-tgrid tbody { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; gap: var(--xgz-s3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; padding-bottom: var(--xgz-s2); }
  .xgz-site .xgz-tgrid tbody::-webkit-scrollbar { display: none; }
  .xgz-scope .xgz-tgrid tr.xgz-tcard { scroll-snap-align: start; }
  .xgz-tcard-t { font-size: var(--xgz-fs-md); }
  .xgz-scope .xgz-tgrid td { padding-left: var(--xgz-s4); padding-right: var(--xgz-s4); }
  .xgz-scope .xgz-tgrid td.xgz-tcard-s { padding-right: calc(var(--xgz-s4) + 44px); }
  .xgz-site .xgz-tcard-ph { margin: 0 calc(var(--xgz-s4) * -1); }
}

/* WordPress/import-safe mobile layout: keep every type card inside the page
   viewport so the production gate and keyboard users do not depend on a
   horizontally scrolling table body. */
@media (max-width: 600px) {
  .xgz-site .xgz-tgrid thead,
  .xgz-site .xgz-tablewrap--stack thead,
  .xgz-site .xgz-hub-table--scope thead { display: none; }
  .xgz-site .xgz-tgrid tbody {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row;
    grid-auto-columns: auto;
    overflow-x: visible;
    scroll-snap-type: none;
  }

  .xgz-hub-scope { overflow: visible; }
  .xgz-scope .xgz-hub-table--scope,
  .xgz-scope .xgz-hub-table--scope tbody,
  .xgz-scope .xgz-hub-table--scope tr,
  .xgz-scope .xgz-hub-table--scope td {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .xgz-scope .xgz-hub-table--scope thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .xgz-scope .xgz-hub-table--scope tr {
    margin-bottom: var(--xgz-s3);
    border: 1px solid var(--xgz-line);
    background: var(--xgz-surface);
  }
  .xgz-scope .xgz-hub-table--scope td { white-space: normal; }
  .xgz-scope .xgz-hub-table--scope td::before {
    display: block;
    margin-bottom: 2px;
    font-size: var(--xgz-fs-xxs);
    font-weight: var(--xgz-fw-bold);
    letter-spacing: var(--xgz-ls-caps);
    text-transform: uppercase;
    color: var(--xgz-ink-3);
  }
  .xgz-scope .xgz-hub-table--scope td:nth-child(1)::before { content: "Included in the quote"; }
  .xgz-scope .xgz-hub-table--scope td:nth-child(2)::before { content: "Available as options"; }
  .xgz-scope .xgz-hub-table--scope td:nth-child(3)::before { content: "Not included"; }
}

/* page-family stylesheet: css/department-layout.css */
@media (min-width: 1025px) {
  .xgz-department-hub .xgz-tgrid tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}