/* ═══════════════════════════════════════════════
   RackForge components.css — 模式组件类名契约卡
   类名白名单：worker 只许用 tokens/chrome/本文件列出的类名
   ═══════════════════════════════════════════════ */

/* ── P1d 轻 hero（信息页） ── */
.hero-light { padding: clamp(48px, 7vw, 84px) 0 clamp(28px, 4vw, 44px); border-bottom: 1px solid var(--line); }
.hero-light .crumbs { font-family: var(--font-mono); font-size: 14px; color: var(--mut); letter-spacing: .06em; margin-bottom: 18px; }
.hero-light .crumbs a { color: var(--mut); }
.hero-light .crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.hero-light h1 { max-width: 24ch; }
.hero-light .lead { max-width: 62ch; }

/* ── P1c band（大图铺底 + 遮罩，≤1/页） ── */
.band { position: relative; overflow: hidden; border-radius: var(--r-lg); }
.band img.band-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band .band-body { position: relative; padding: clamp(36px, 6vw, 72px); max-width: 560px; background: linear-gradient(90deg, rgba(16,18,20,.86) 0%, rgba(16,18,20,.55) 55%, rgba(16,18,20,.08) 100%); border-radius: var(--r-lg); color: var(--on-dark); }
.band .band-body h2 { color: var(--white); }
.band .band-body p { color: var(--on-dark); opacity: .88; }

/* ── P9 quote band（页尾 CTA，cta-bg 复用） ── */
.quote-band { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--ink); color: var(--on-dark); }
.quote-band .qb-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.quote-band .qb-inner { position: relative; padding: clamp(40px, 6vw, 72px); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.quote-band h2 { color: var(--white); max-width: 22ch; margin-bottom: 8px; }
.quote-band .q-tag { font-family: var(--font-display); font-style: italic; color: var(--on-dark-mut); font-size: 15px; margin-bottom: 14px; }
.quote-band .qb-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── X8 mono 数据条（hero 过渡带，无背景印刷条） ── */
.mono-strip { border-top: 1.5px solid var(--steel-b); border-bottom: 1px solid var(--line); padding: 26px 0; }
.mono-strip .ms-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.mono-strip .ms { padding: 0 clamp(16px, 3vw, 34px); }
.mono-strip .ms + .ms { border-left: 1px solid var(--line); }
.mono-strip .ms:first-child { padding-left: 0; }
.mono-strip .ms b { display: block; font-family: var(--font-mono); font-weight: 500; font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.01em; }
.mono-strip .ms b i { font-style: normal; font-size: .55em; color: var(--mut); margin-left: 2px; }
.mono-strip .ms > span { display: block; font-family: var(--font-mono); font-size: 14px; color: var(--mut); margin-top: 6px; letter-spacing: .04em; }
@media (max-width: 680px) { .mono-strip .ms-grid { grid-template-columns: 1fr; gap: 16px; } .mono-strip .ms { padding: 0; } .mono-strip .ms + .ms { border-left: 0; border-top: 1px solid var(--line); padding-top: 16px; } }

/* ── X7 深色巨型数字横幅 ── */
.stats-dark { background: var(--ink); color: var(--on-dark); border-radius: var(--r-lg); padding: clamp(36px, 5vw, 60px) clamp(20px, 4vw, 48px); display: grid; grid-template-columns: repeat(3, 1fr); }
.stats-dark--4 { grid-template-columns: repeat(4, 1fr); }
.stats-dark .stat { text-align: center; padding: 0 clamp(10px, 2vw, 26px); }
.stats-dark .stat + .stat { border-left: 1px solid var(--on-dark-line); }
.stats-dark .stat b { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(34px, 4.6vw, 52px); letter-spacing: -.03em; color: var(--white); }
.stats-dark .stat b i { font-style: normal; font-size: .5em; color: var(--steel-b); }
.stats-dark .stat > span { display: block; font-size: 14px; color: var(--on-dark-mut); margin-top: 10px; line-height: 1.55; }
@media (max-width: 860px) { .stats-dark, .stats-dark--4 { grid-template-columns: 1fr 1fr; gap: 26px 0; } .stats-dark .stat:nth-child(3) { border-left: 0; } }
@media (max-width: 520px) { .stats-dark, .stats-dark--4 { grid-template-columns: 1fr; } .stats-dark .stat + .stat { border-left: 0; border-top: 1px solid var(--on-dark-line); padding-top: 20px; } }

/* ── X4 观点对比表（Generic vs RackForge） ── */
.cmp-table { width: 100%; border-collapse: collapse; font-size: 14px; border: 1px solid var(--line-2); }
.cmp-table thead th { background: var(--paper-2); font-family: var(--font-mono); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); font-weight: 500; text-align: left; padding: 13px 16px; border-bottom: 1.5px solid var(--steel-b); }
.cmp-table thead th.rf { color: var(--ink); border-bottom-color: var(--ink); }
.cmp-table tbody td { padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.cmp-table tbody tr:last-child td { border-bottom: 0; }
.cmp-table td.feat { font-weight: 500; color: var(--ink); }
.cmp-table td.gen { color: var(--mut); }
.cmp-table td.rf-col { color: var(--ink); font-weight: 500; background: rgba(139,148,156,.07); }
.cmp-table td .no { color: #A44A3F; font-family: var(--font-mono); margin-right: 6px; }
.cmp-table td .yes { color: #1B7A46; font-family: var(--font-mono); margin-right: 6px; }

/* ── X6 勾选清单卡 ── */
.checklist { border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--white); padding: 8px 0; }
.checkrow { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; padding: 14px 20px; }
.checkrow + .checkrow { border-top: 1px solid var(--line); }
.checkrow .tick { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--steel-b); display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.checkrow .tick svg { width: 11px; height: 11px; stroke: var(--steel-c); }
.checkrow p { margin: 0; font-size: 14px; color: var(--ink-2); }
.checkrow p b { color: var(--ink); font-weight: 600; }
.checkrow .mono-note { margin-left: auto; flex-shrink: 0; font-family: var(--font-mono); font-size: 14px; color: var(--mut); padding-left: 12px; }

/* ── X2 行式列表（changelog 风） ── */
.rowlist { border-top: 1.5px solid var(--steel-b); }
.rowlist-row { display: grid; grid-template-columns: 88px 1fr auto; gap: 20px; align-items: center; padding: 18px 6px; border-bottom: 1px solid var(--line); transition: background var(--t-fast); }
.rowlist-row:hover { background: rgba(16,18,20,.025); }
.rowlist-row .rid { font-family: var(--font-mono); font-size: 14px; color: var(--mut); letter-spacing: .05em; }
.rowlist-row h3 { font-family: var(--font-body); font-size: 15.5px; font-weight: 600; margin: 0 0 3px; }
.rowlist-row p { font-size: 14px; color: var(--mut); margin: 0; }
.rowlist-row .row-tag { font-family: var(--font-mono); font-size: 14px; border: 1px solid var(--line-2); border-radius: 6px; padding: 4px 10px; color: var(--steel-c); white-space: nowrap; }
@media (max-width: 680px) { .rowlist-row { grid-template-columns: 1fr; gap: 6px; } .rowlist-row .row-tag { justify-self: start; } }

/* ── X9 认证胶囊墙 ── */
.pillrow { display: flex; flex-wrap: wrap; gap: 10px; }
.pillrow .pill { background: var(--paper-2); border-radius: var(--r-pill); padding: 13px 26px; font-size: 14px; font-weight: 500; color: var(--ink); }
.pillrow-note { font-family: var(--font-mono); font-size: 14px; color: var(--mut); margin-top: 12px; letter-spacing: .04em; }

/* ── X5 终端命令行窗 ── */
.term { background: var(--ink); border: 1px solid #2A2E32; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-win); }
.term-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid #2A2E32; }
.term-bar i { width: 9px; height: 9px; border-radius: 50%; background: #3A3F44; }
.term-bar span { font-family: var(--font-mono); font-size: 14px; color: #7E878C; margin-left: 8px; }
.term-body { padding: 18px 18px 20px; font-family: var(--font-mono); font-size: 14px; line-height: 1.9; color: #C9CFD3; white-space: pre-wrap; }
.term-body .tk { color: #9AA6AC; }
.term-body .pass { color: #4CC38A; font-weight: 600; }
.term-body .key { color: #C0C7CC; }
.term-body .dim { color: #6E777C; }

/* ── X3 手册章节卡 ── */
.chapgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.chap { background: var(--white); border: 1.5px solid var(--ink); border-radius: var(--r-md); padding: 26px 22px; position: relative; }
.chap .chap-no { position: absolute; top: 16px; right: 18px; font-family: var(--font-display); font-style: italic; font-size: 15px; color: var(--mut); }
.chap h3 { font-size: 17px; padding-right: 26px; }
.chap h3 em { color: var(--steel-c); }
.chap ul { list-style: none; margin: 0; padding: 0; }
.chap li { font-size: 14px; color: var(--ink-2); padding: 5px 0 5px 18px; position: relative; }
.chap li::before { content: ''; position: absolute; left: 0; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--steel-b); }
.chap li:nth-child(2)::before { background: var(--ink); }
@media (max-width: 860px) { .chapgrid { grid-template-columns: 1fr; } }

/* ── P6 步骤条（≤3 列，6 步用 3×2） ── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); counter-reset: step; }
.steps--4 { grid-template-columns: repeat(2, 1fr); }
.step { border-top: 1.5px solid var(--steel-b); padding-top: 18px; }
.step .s-no { font-family: var(--font-mono); font-size: 14px; color: var(--steel-c); letter-spacing: .1em; display: block; margin-bottom: 10px; }
.step h3 { font-size: 16.5px; }
.step p { font-size: 14px; color: var(--mut); margin: 0; }
@media (max-width: 860px) { .steps, .steps--4 { grid-template-columns: 1fr; } }

/* ── P10 时间轴 ── */
.timeline { border-left: 1.5px solid var(--steel-b); margin-left: 8px; padding-left: 28px; display: grid; gap: 26px; }
.tl-item { position: relative; }
.tl-item::before { content: ''; position: absolute; left: -34.5px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--paper); border: 2px solid var(--steel-c); }
.tl-item .tl-year { font-family: var(--font-mono); font-size: 14px; color: var(--steel-c); letter-spacing: .1em; display: block; margin-bottom: 6px; }
.tl-item h3 { font-size: 17px; margin-bottom: 6px; }
.tl-item p { font-size: 14px; color: var(--mut); margin: 0; max-width: 60ch; }

/* ── P13 结果带（客户类型+数字成果，禁虚构人名） ── */
.outcome { background: var(--paper-2); border-radius: var(--r-lg); padding: clamp(30px, 4.5vw, 52px); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.outcome .oc { border-left: 1.5px solid var(--steel-b); padding-left: 20px; }
.outcome .oc b { display: block; font-family: var(--font-display); font-size: clamp(26px, 3.4vw, 38px); font-weight: 600; letter-spacing: -.02em; }
.outcome .oc span { display: block; font-size: 14px; color: var(--mut); margin-top: 8px; line-height: 1.6; }
@media (max-width: 760px) { .outcome { grid-template-columns: 1fr; } }

/* ── 锚点导航（Supermicro 借鉴：长产品页页内跳转） ── */
.anchor-nav { border-bottom: 1px solid var(--line); background: var(--white); }
.anchor-nav .an-inner { display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.anchor-nav .an-inner::-webkit-scrollbar { display: none; }
.anchor-nav a { font-family: var(--font-mono); font-size: 14px; letter-spacing: .05em; color: var(--mut); padding: 13px 14px; white-space: nowrap; border-bottom: 1.5px solid transparent; }
.anchor-nav a:hover { color: var(--ink); border-bottom-color: var(--steel-b); }

/* ── X1 灰底大圆角卡墙变体 = .card--tint（tokens 已有）+ 卡内图 ── */
.card .card-media { border-radius: var(--r-sm); overflow: hidden; margin-bottom: 18px; }
.card .card-media img { width: 100%; height: 100%; object-fit: cover; }

/* ── P3 表单/联系区（contact 用，整页表单） ── */
.contact-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--sp-4); }
.contact-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-3); }
.contact-card h3 { font-size: 16.5px; }
.contact-card .cc-row { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 14px; }
.contact-card .cc-row:first-of-type { border-top: 0; }
.contact-card .cc-row .k { font-family: var(--font-mono); font-size: 14px; color: var(--mut); text-transform: uppercase; letter-spacing: .1em; width: 90px; flex-shrink: 0; padding-top: 2px; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

/* ── 博客文章排版 ── */
.article { max-width: 760px; }
.article h2 { font-size: 24px; margin-top: 40px; }
.article h3 { font-size: 18px; margin-top: 30px; }
.article p { color: var(--ink-2); }
.article ul, .article ol { color: var(--ink-2); padding-left: 22px; margin-bottom: 18px; }
.article li { margin-bottom: 6px; }
.article blockquote { margin: 24px 0; padding: 16px 22px; border-left: 3px solid var(--steel-b); background: var(--paper-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-family: var(--font-display); font-style: italic; color: var(--ink-2); }
.article .article-meta { font-family: var(--font-mono); font-size: 14px; color: var(--mut); letter-spacing: .06em; margin-bottom: 26px; }

/* ── X12 贴纸框（备用）+ figline 组合 ── */
.fig-block { margin: 0; }
.fig-block .figline { margin-top: 12px; }
.fig-block .figline b { font-family: var(--font-mono); font-style: normal; font-size: 14px; color: var(--steel-c); letter-spacing: .08em; }

/* ── 404 ── */
.nf { text-align: center; padding: clamp(70px, 12vw, 140px) 0; }
.nf .code { font-family: var(--font-display); font-size: clamp(80px, 14vw, 150px); font-weight: 600; letter-spacing: -.04em; background: var(--steel-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* pg-ms-4 — X8 mono-strip 4-cell variant (gpu-high-density) */
.mono-strip .ms-grid.pg-ms-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .mono-strip .ms-grid.pg-ms-4 { grid-template-columns: repeat(2, 1fr); gap: 16px 0; } .mono-strip .ms-grid.pg-ms-4 .ms:nth-child(3) { border-left: 0; } }
@media (max-width: 680px) { .mono-strip .ms-grid.pg-ms-4 { grid-template-columns: 1fr; } }

/* pg-band-h1 — h1 inside .band-body (factory band hero) */
.pg-band-h1 { font-size: clamp(26px, 3.2vw, 34px); color: var(--white); }

/* pg-* — welcome (Google Ads landing, W8) */
.pg-hero-win { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); align-items: center; }
.pg-win-frame { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-win); overflow: hidden; }
.pg-win-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.pg-win-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.pg-win-url { font-family: var(--font-mono); font-size: 14px; color: var(--mut); margin-left: 8px; letter-spacing: .04em; }
.pg-win-shot { aspect-ratio: 3 / 2; position: relative; overflow: hidden; }
.pg-win-shot img { width: 100%; height: 100%; object-fit: cover; }
.pg-btn-xl { padding: 18px 44px; font-size: 16px; min-height: 58px; }
.pg-cta-box { max-width: 720px; margin: 0 auto; text-align: center; }
@media (max-width: 980px) { .pg-hero-win { grid-template-columns: 1fr; } }

/* touch target: mono-tag links (Learn more) */
a.mono-tag { display: inline-flex; align-items: center; min-height: 44px; }

/* breadcrumb links: non-exempt standalone links need >=24px target */
.hero-light .crumbs a { display: inline-block; min-height: 24px; }
.contact-card .cc-row a { display: inline-block; min-height: 24px; }

/* split media: fill row height on desktop (aspect-ratio must not re-derive width);
   restore intrinsic ratio only when stacked on mobile */
.split .split-media { aspect-ratio: auto; min-width: 0; }
@media (max-width: 880px) {
  .split .split-media.ar-3-2 { aspect-ratio: 3 / 2; }
  .split .split-media.ar-2-3 { aspect-ratio: 2 / 3; }
}