/* 产品功能与业务关系：内容先于装饰，文字可选择、缩放且不依赖脚本。 */
.product-page,
.product-index,
.delivery-example {
  --visual-paper: #fffaf3;
  --visual-human-bg: #fff1e5;
  --visual-human-border: #dfb395;
  --visual-human-ink: #804027;
  --visual-grid: #e4e0f1;
}
.product-page .inner-hero {
  padding-block: clamp(40px, 5.5vw, 76px);
  background: var(--color-bg);
}

.product-page .inner-hero__layout {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}

.product-page .inner-hero h1 {
  font-size: clamp(2.3rem, 3.8vw, 3.6rem);
  line-height: 1.3;
}

.product-page .inner-hero__summary { line-height: 1.85; }
.product-illustration { margin: 0; }
.product-illustration img { display: block; width: 100%; height: auto; }
.product-illustration figcaption { margin-top: var(--space-3); text-align: center; }
.product-illustration figcaption > span { display: block; color: var(--color-text-soft); font-size: 0.95rem; }
.product-illustration figcaption > small { display: block; margin-top: var(--space-1); color: var(--color-muted); font-size: 0.75rem; }

.product-explainer { background: var(--color-surface); }
.product-explainer__heading { max-width: 48em; }
.product-explainer .section-heading h2,
.product-example .section-heading h2 { font-size: clamp(1.65rem, 2.5vw, 2.45rem); line-height: 1.45; }
.product-explainer .section-label,
.product-example .section-label { color: var(--color-accent-strong); font-size: 0.84rem; font-weight: 650; }

.work-architecture { margin: var(--space-6) 0 0; }
.work-architecture__legend { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; margin-bottom: var(--space-5); color: var(--color-muted); font-size: 0.8rem; }
.work-architecture__human-key::before { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border: 1px solid var(--visual-human-border); border-radius: 50%; background: var(--visual-human-bg); content: ""; }
.work-architecture__stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; margin: 0; padding: 0; list-style: none; }
/* 阶段边框和节点行线表达图示结构，不随正文说明区的去线规则移除。 */
.work-architecture__stage { position: relative; min-width: 0; margin: 0; padding: var(--space-5); border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-bg); }
.work-architecture--flow .work-architecture__stage:not(:last-child)::after { position: absolute; top: 46%; left: calc(100% + 10px); color: var(--color-accent-strong); content: "→"; font-size: 24px; line-height: 1; }
.work-architecture__label { margin: 0 0 var(--space-3); color: var(--color-muted); font-size: 0.8rem; }
.work-architecture__label > span { color: var(--color-accent-strong); }
.work-architecture__stage h3 { margin: 0 0 var(--space-4); font-size: 1.2rem; line-height: 1.5; letter-spacing: 0; }
.work-architecture__nodes { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.work-architecture__nodes > li { margin: 0; padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.work-architecture__nodes strong { display: block; font-size: 0.9rem; font-weight: 650; }
.work-architecture__nodes p { margin: var(--space-1) 0 0; color: var(--color-muted); font-size: 0.85rem; line-height: 1.6; }
.work-architecture__nodes > .work-architecture__human { padding: var(--space-3); border: 1px solid var(--visual-human-border); border-radius: 4px; background: var(--visual-human-bg); }
.work-architecture__human-tag { display: block; margin-bottom: var(--space-1); color: var(--visual-human-ink); font-size: 0.73rem; font-weight: 650; }
.work-architecture__foundation { position: relative; margin-top: var(--space-5); padding: var(--space-5); border-left: 3px solid var(--color-accent); border-radius: 4px; background: var(--color-accent-soft); }
.work-architecture__foundation > strong { display: block; font-size: 0.95rem; }
.work-architecture__foundation > p { margin: var(--space-2) 0 0; color: var(--color-text-soft); font-size: 0.9rem; line-height: 1.7; }
.work-architecture--shared .work-architecture__stage::after { position: absolute; left: 50%; top: 100%; height: 26px; border-left: 1px solid var(--color-accent); content: ""; }
.work-architecture--shared .work-architecture__foundation { border: 1px solid var(--color-accent); }
.work-architecture > figcaption { margin-top: var(--space-4); color: var(--color-muted); font-size: 0.8rem; line-height: 1.7; }

.product-example__layout { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 84px); align-items: start; }
.product-example .section-heading { margin-top: var(--space-5); }
.product-example .delivery-example { margin: 0; width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); box-shadow: none; }

.product-index .inner-hero { background: var(--color-bg); padding-block: var(--space-7); }
.product-index .inner-hero__layout { grid-template-columns: minmax(0, 1fr); }
.product-index .inner-hero__summary { max-width: 46em; }
.product-index .content-rail { gap: var(--space-7); border: 0; background: transparent; }
.product-index .content-rail > article { display: flex; flex-direction: column; gap: var(--space-5); padding: 0 0 var(--space-6); border: 0; border-bottom: 1px solid var(--color-border); background: transparent; }
.product-index .content-rail article h2 { margin: 0 0 var(--space-3); font-size: 1.55rem; line-height: 1.4; }
.product-catalog__copy > p { margin: 0 0 var(--space-3); }
.product-index .product-catalog--ai { display: block; }
.product-index .product-catalog--ai > .product-catalog__item { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(32px, 6vw, 80px); padding-block: var(--space-6); }
.product-index .product-catalog--ai > .product-catalog__item:first-child { padding-top: 0; }
.product-catalog--digital .product-visual { display: flex; flex-direction: column; flex: 1; }
.product-catalog--digital .product-visual__canvas { flex: 1; }

.product-visual { width: 100%; margin: 0; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-surface); color: var(--color-text); }
.product-visual__header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); font-size: 0.76rem; color: var(--color-muted); }
.product-visual__header > span:first-child { color: var(--color-accent-strong); font-weight: 650; }
.product-visual__canvas { padding: var(--space-5); }
.product-visual figcaption { display: grid; gap: var(--space-2); padding: 0 var(--space-5) var(--space-5); line-height: 1.65; }
.product-visual figcaption strong { font-size: 0.94rem; font-weight: 600; }
.product-visual figcaption > span { color: var(--color-muted); font-size: 0.75rem; }
.visual-icon { display: block; width: 40px; height: 40px; flex-shrink: 0; color: var(--color-accent-strong); }
.product-visual ul,
.product-visual ol { margin: 0; padding: 0; list-style: none; }
.product-visual li { margin: 0; }
.product-visual p { margin: 0; }
.product-visual .visual-human { background: var(--visual-human-bg); border-color: var(--visual-human-border); }
.visual-human .visual-icon { color: var(--visual-human-ink); }
.product-visual--compact .product-visual__canvas { min-height: 256px; display: grid; align-content: center; }

/* 一次问答：回答和依据同时出现，不添加假的输入框和发送按钮。 */
.knowledge-preview { display: grid; gap: var(--space-4); }
.product-visual .knowledge-preview__question { justify-self: end; max-width: 92%; padding: var(--space-3) var(--space-4); border-radius: 14px 14px 2px 14px; background: var(--color-accent-soft); font-size: 0.93rem; }
.knowledge-preview__answer { display: flex; align-items: start; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: 2px 14px 14px; background: var(--color-bg); font-size: 0.93rem; line-height: 1.8; }
.visual-mark { color: var(--color-accent); font-size: 1.5rem; line-height: 1.2; }
.knowledge-preview__source { display: flex; align-items: start; gap: var(--space-3); padding: var(--space-4); border-left: 3px solid var(--color-accent); background: var(--visual-paper); }
.knowledge-preview__source .visual-icon { width: 28px; height: 28px; }
.knowledge-preview__source strong { font-size: 0.82rem; }
.knowledge-preview__source p { margin-top: var(--space-2); color: var(--color-text-soft); font-size: 0.85rem; line-height: 1.7; }

/* 任务分流：三条并列出口；人工不是自动处理的最后一个步骤。 */
.agent-map { text-align: center; }
.agent-map__input { font-size: 0.9rem; }
.product-visual .agent-map__hub { position: relative; width: fit-content; margin: 32px auto; padding: var(--space-3) var(--space-5); border: 1px solid var(--color-accent); border-radius: 40px; background: var(--color-accent-soft); font-weight: 650; }
.agent-map__hub::before,
.agent-map__hub::after { position: absolute; left: 50%; height: 32px; border-left: 1px solid var(--color-accent); content: ""; }
.agent-map__hub::before { bottom: 100%; }
.agent-map__hub::after { top: 100%; }
.agent-map__routes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); position: relative; }
.agent-map__routes::before { content: ""; position: absolute; top: -16px; left: 16%; right: 16%; border-top: 1px solid var(--color-accent); }
.agent-map__routes > li { position: relative; display: grid; justify-items: center; align-content: start; gap: var(--space-2); padding: var(--space-4) var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); }
.agent-map__routes > li::before { content: ""; position: absolute; top: -17px; left: 50%; height: 16px; border-left: 1px solid var(--color-accent); }
.agent-map__routes strong { font-size: 0.95rem; }
.agent-map__routes span { font-size: 0.77rem; color: var(--color-text-soft); line-height: 1.5; }

/* 流程画布：主链与异常旁路分开，确认节点始终可见。 */
.product-visual--automation { background: var(--color-accent-soft); }
.automation-map { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; gap: 18px var(--space-5); }
.automation-map__flow { display: contents; }
.automation-map__flow > li { grid-column: 1; align-self: stretch; position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: var(--space-2); padding: 10px var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); }
.automation-map__flow > li:nth-child(1) { grid-row: 1; }
.automation-map__flow > li:nth-child(2) { grid-row: 2; }
.automation-map__flow > li:nth-child(3) { grid-row: 3; }
.automation-map__flow > li:nth-child(4) { grid-row: 4; }
.automation-map__flow > li:not(:last-child)::after { content: "↓"; position: absolute; left: 50%; top: 100%; color: var(--color-accent); line-height: 18px; font-size: 16px; }
.automation-map__flow .visual-icon { width: 26px; height: 26px; }
.automation-map__flow strong { font-size: 0.85rem; }
.automation-map__flow span { grid-column: 2; font-size: 0.75rem; color: var(--visual-human-ink); }
.automation-map__exception { grid-column: 2; grid-row: 2; align-self: center; position: relative; padding: var(--space-3); border: 1px dashed var(--visual-human-border); border-radius: var(--radius-sm); background: var(--visual-human-bg); }
.automation-map__exception::before { content: ""; position: absolute; top: 50%; right: 100%; width: 25px; border-top: 1px dashed var(--visual-human-ink); }
.automation-map__exception strong,
.automation-map__exception span { display: block; font-size: 0.77rem; }
.automation-map__exception span { margin-top: var(--space-2); color: var(--visual-human-ink); line-height: 1.6; }

/* OA 的纸面申请和审批轨迹，强调谁处理。 */
.product-visual--oa { background: var(--visual-paper); }
.approval-preview { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: var(--space-5); }
.approval-preview__paper { padding: var(--space-5) var(--space-4); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 2px 16px 2px 2px; box-shadow: 5px 5px 0 var(--color-accent-soft); }
.approval-preview__paper > strong { display: block; margin: var(--space-3) 0 var(--space-5); font-size: 0.95rem; }
.approval-preview__paper li { padding-top: var(--space-3); color: var(--color-muted); font-size: 0.74rem; }
.approval-preview__paper li > span { display: block; width: 90%; margin-top: var(--space-2); border-bottom: 1px solid var(--color-border); }
.approval-preview__trail { display: grid; gap: var(--space-5); }
.approval-preview__trail li { position: relative; padding-left: 24px; }
.approval-preview__trail li:not(:last-child)::before { content: ""; position: absolute; top: 9px; bottom: -32px; left: 5px; border-left: 1px solid var(--color-accent); }
.approval-preview__dot { position: absolute; top: 7px; left: 0; width: 11px; height: 11px; border: 2px solid var(--color-accent); border-radius: 50%; background: var(--color-bg); }
.approval-preview__trail strong,
.approval-preview__trail li > span:last-child { display: block; }
.approval-preview__trail strong { font-size: 0.89rem; }
.approval-preview__trail li > span:last-child { color: var(--color-muted); font-size: 0.76rem; margin-top: var(--space-1); }
.approval-preview__trail .visual-human { background: transparent; }
.approval-preview__trail .visual-human strong { color: var(--visual-human-ink); }
.approval-preview__trail .visual-human .approval-preview__dot { border-color: var(--visual-human-ink); background: var(--visual-human-bg); }

/* CRM 以记录和交接组成看板，不填造假的客户、金额和转化率。 */
.crm-preview__board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.crm-preview__board > li > strong { display: block; padding-block: var(--space-3); border-top: 3px solid var(--color-accent); font-size: 0.8rem; }
.crm-preview__board > li:nth-child(2) > strong { border-color: var(--color-border-strong); }
.crm-preview__board > li:nth-child(3) > strong { border-color: var(--visual-human-border); }
.crm-preview__card { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-3); border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-bg); }
.crm-preview__card-line { display: block; width: 32px; height: 5px; border-radius: 4px; background: var(--color-accent-soft); margin-bottom: var(--space-2); }
.crm-preview__card > span { font-size: 0.83rem; }
.crm-preview__card small { color: var(--color-muted); font-size: 0.73rem; }
.crm-preview__record { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-5); padding: var(--space-4); border-radius: 6px; background: var(--color-accent-soft); }
.crm-preview__record strong,
.crm-preview__record span { display: block; font-size: 0.83rem; }
.crm-preview__record span { margin-top: var(--space-1); color: var(--color-text-soft); font-size: 0.75rem; }

/* SCM 横向读物流，下方对单据；移动端保留四个短节点。 */
.supply-map__route { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); text-align: center; }
.supply-map__route > li { position: relative; }
.supply-map__route > li:not(:last-child)::after { content: "→"; position: absolute; top: 26px; right: -15px; font-size: 19px; color: var(--color-accent); }
.supply-map__place { display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; margin: 0 auto var(--space-3); border-radius: 20px; background: var(--color-accent-soft); }
.supply-map__place .visual-icon { width: 46px; height: 46px; }
.supply-map__route strong,
.supply-map__route span { display: block; font-size: 0.9rem; }
.supply-map__route span { margin-top: var(--space-2); color: var(--color-muted); font-size: 0.72rem; }
.product-visual .supply-map__records { margin-top: var(--space-5); padding: var(--space-3); border-block: 1px solid var(--color-border); text-align: center; font-size: 0.8rem; color: var(--color-text-soft); }
.product-visual .supply-map__human { margin-top: var(--space-4); text-align: center; font-size: 0.78rem; color: var(--visual-human-ink); }

/* ERP 围绕共同数据构图，四个模块不是串行步骤。 */
.product-visual--erp { background: var(--color-accent-soft); }
.erp-map { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); }
.erp-map__modules { display: contents; }
.erp-map::before { content: ""; grid-column: 1 / -1; grid-row: 1 / 4; justify-self: center; width: 56%; margin-block: 30px; border: 1px solid var(--color-accent); border-radius: 24px; }
.erp-map::after { content: ""; grid-column: 1 / -1; grid-row: 2; justify-self: center; align-self: center; width: 56%; border-top: 1px solid var(--color-accent); }
.erp-map__modules li { z-index: 1; display: flex; align-items: center; gap: var(--space-3); min-height: 76px; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); }
.erp-map__modules li:nth-child(1) { grid-column: 1; grid-row: 1; }
.erp-map__modules li:nth-child(2) { grid-column: 2; grid-row: 1; }
.erp-map__modules li:nth-child(3) { grid-column: 1; grid-row: 3; }
.erp-map__modules li:nth-child(4) { grid-column: 2; grid-row: 3; }
.erp-map__modules strong,
.erp-map__modules span { display: block; font-size: 0.9rem; }
.erp-map__modules span { margin-top: var(--space-1); color: var(--color-muted); font-size: 0.74rem; }
.erp-map__modules .visual-icon { width: 30px; height: 30px; }
.erp-map__hub { z-index: 1; grid-column: 1 / -1; grid-row: 2; justify-self: center; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--space-2); align-items: center; width: min(100%, 216px); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-accent); border-radius: 12px; background: var(--color-bg); }
.erp-map__hub .visual-icon { width: 28px; height: 28px; grid-row: span 2; }
.erp-map__hub strong { font-size: 0.9rem; color: var(--color-accent-strong); }
.erp-map__hub span { font-size: 0.72rem; color: var(--color-text-soft); margin-top: var(--space-1); }
.product-visual .erp-map__foundation { grid-column: 1 / -1; grid-row: 4; text-align: center; font-size: 0.76rem; color: var(--color-text-soft); }

/* 诊断样例读起来像报告页，而不是另一张通用功能卡。 */
.diagnosis-page .inner-hero { padding-block: clamp(40px, 5.5vw, 76px); background: var(--color-bg); }
.diagnosis-page .inner-hero__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); }
.diagnosis-page .inner-hero h1 { font-size: clamp(2.3rem, 3.8vw, 3.6rem); line-height: 1.3; }
.diagnosis-page .delivery-example--report { width: 100%; }
.delivery-example--report { border: 1px solid var(--color-border); border-radius: 2px; background: var(--visual-paper); box-shadow: 6px 6px 0 var(--color-accent-soft); }
.report-sample__masthead { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); padding-bottom: var(--space-4); margin-bottom: var(--space-5); border-bottom: 1px solid var(--color-border); color: var(--color-muted); font-size: 0.73rem; }
.delivery-example--report .delivery-example__label { color: var(--color-accent-strong); }
.delivery-example--report .delivery-example__rows > div { padding-block: var(--space-4); }
.delivery-example--report .delivery-example__rows dt { display: flex; align-items: baseline; gap: var(--space-3); }
.report-sample__number { color: var(--color-accent-strong); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.delivery-example--report .delivery-example__rows dd { padding-left: 30px; }

@media (max-width: 960px) {
  .product-page .inner-hero__layout,
  .diagnosis-page .inner-hero__layout { grid-template-columns: minmax(0, 1fr); }
  .product-illustration { max-width: 520px; justify-self: center; }
  .work-architecture__stages { gap: 32px; }
  .work-architecture__stage { padding: var(--space-4); }
  .work-architecture--flow .work-architecture__stage:not(:last-child)::after { left: calc(100% + 4px); }
  .product-example__layout { grid-template-columns: minmax(0, 1fr); }
  .product-example .section-heading { margin-top: 0; margin-bottom: 0; }
}

@media (max-width: 680px) {
  .product-page .inner-hero { padding-block: 36px; }
  .product-illustration { max-width: 400px; }
  .work-architecture__stages { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .work-architecture__stage { padding: var(--space-5); }
  .work-architecture--flow .work-architecture__stage:not(:last-child)::after { top: calc(100% + 6px); left: calc(50% - 8px); content: "↓"; }
  .work-architecture--shared .work-architecture__stages { gap: 20px; padding-left: 18px; border-left: 1px solid var(--color-accent); }
  .work-architecture--shared .work-architecture__stage::after { left: -19px; top: 50%; width: 18px; height: 0; border: 0; border-top: 1px solid var(--color-accent); }
  .work-architecture--shared .work-architecture__foundation { margin-top: 0; }
  .work-architecture__legend { font-size: 0.75rem; }
  .product-index .content-rail { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .product-index .product-catalog--ai > .product-catalog__item { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .product-visual__header { padding: var(--space-3) var(--space-4); }
  .product-visual__canvas { padding: var(--space-5) var(--space-4); }
  .product-visual figcaption { padding-inline: var(--space-4); }
  .product-visual--compact .product-visual__canvas { min-height: 0; }
  .supply-map__route { gap: var(--space-2); }
  .supply-map__place { width: 48px; height: 52px; border-radius: 12px; }
  .supply-map__place .visual-icon { width: 34px; height: 34px; }
  .supply-map__route > li:not(:last-child)::after { top: 14px; right: -12px; font-size: 16px; }
  .supply-map__route strong { font-size: 0.8rem; }
  .supply-map__route span { font-size: 0.7rem; }
  .erp-map { column-gap: var(--space-3); }
  .erp-map__modules li { gap: var(--space-2); padding: var(--space-2); }
  .erp-map__modules .visual-icon { width: 24px; height: 24px; }
  .erp-map__modules span { font-size: 0.7rem; }
  .crm-preview__board { gap: var(--space-2); }
  .crm-preview__card { padding: var(--space-3) var(--space-2); }
}