/* ============================================================================
   Apex Toolkit 落地页 v2 · 主样式
   Hallmark · genre: editorial · macrostructure: Workbench · theme: Grid
   signal ink: ultramarine · nav: N9 Edge-aligned minimal · footer: Ft4 Dense colophon
   enrichment: none（纯排版 + 真实截图）· H2 knobs: 7/5 · T4 knobs: 4-up
   pre-emit critique: P5 H4 E5 S4 R5 V5
   contrast: pass (40–41) · nav/footer/hero: pass (42–45) · honest: pass (46)
   chrome: pass (47) · tokens: pass (48) · responsive: pass (49)
   mobile: pass (34, 49, 50–57) · slop: 58/58
   note: gate 23 — 全页唯一一处满幅信号色，为 Grid 主题明文签名（plate），
   其余区域 accent 占比 < 3%。
   ---------------------------------------------------------------------------
   纪律速记：网格永不可藏；无双信号色；无卡片/圆角/投影；
   display 用单一 grotesk（中文由同栈承接）；动效只有 hover；零脚本。
   ========================================================================== */

/* ═══ 1 · 基础 ══════════════════════════════════════════════════════════ */

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

html {
  overflow-x: clip;
  scroll-behavior: smooth;
}

body {
  position: relative;
  margin: 0;
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink-2);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

::selection {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

/* 十二条列轨（发丝线网格）铺在排版区背后，贯穿全页 —— 主题的底 */
body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  max-width: var(--shell);
  margin-inline: auto;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to right,
    var(--color-rule) 0,
    var(--color-rule) 1px,
    transparent 1px,
    transparent calc(100% / 12)
  );
  background-size: calc(100% - 2 * var(--gutter)) 100%;
  background-position: var(--gutter) 0;
  background-repeat: no-repeat;
}

/* ═══ 2 · 通用元件 ══════════════════════════════════════════════════════ */

.shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.label {
  font-family: var(--font-label);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}

/* 眉标（eyebrow）：首屏与页头的小字标签 */
.eyebrow {
  margin: 0 0 var(--space-lg);
  font-family: var(--font-label);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}

/* 章节标题（索引 / 问答 / 等处的 h2） */
.sec-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--text-display-s);
  line-height: 1.08;
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

.skip-link {
  position: absolute;
  left: var(--space-md);
  top: var(--space-md);
  z-index: var(--z-tooltip);
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-ink);
  color: var(--color-paper);
  text-decoration: none;
  transform: translateY(-300%);
}
.skip-link:focus { transform: none; }

/* 描边按钮（C1 outlined chip）—— 无圆角、无阴影，hover 是唯一剧场 */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  min-height: 44px;
  padding: 0.7em 1.25em;
  border: 1px solid var(--color-ink);
  background: transparent;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out),
    color var(--dur-short) var(--ease-out);
}
.chip .arr {
  display: inline-block;
  transition: transform var(--dur-short) var(--ease-out);
}
.chip:hover .arr { transform: translateX(6px); }
.chip:active { transform: translateY(1px); }

.link-typo:active {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

.chip--solid {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-paper);
}
.chip--solid:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
}

.chip--onplate {
  border-color: var(--color-accent-ink);
  color: var(--color-accent-ink);
}
.chip--onplate:hover {
  background: var(--color-accent-ink);
  color: var(--color-accent);
}

/* 文字型链接（C3 typographic link） */
.link-typo {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.12em;
  text-decoration-color: var(--color-rule-strong);
  transition:
    color var(--dur-short) var(--ease-out),
    text-decoration-color var(--dur-short) var(--ease-out);
}
.link-typo:hover {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

.link-typo .arr {
  display: inline-block;
  transition: transform var(--dur-short) var(--ease-out);
}
.link-typo:hover .arr { transform: translateX(6px); }

/* 图版单元格：真截图 + 发丝线 + 下方 caps 标签（Grid 的 figure cell） */
.shot {
  margin: 0;
  border: 1px solid var(--color-rule);
  transition: border-color var(--dur-short) var(--ease-out);
}
.shot:hover { border-color: var(--color-accent); }
.shot img { width: 100%; }
.shot figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--color-rule);
}
.cap-note {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* ═══ 3 · 顶栏（N9 · 边缘对齐极简）══════════════════════════════════════ */

.topbar {
  border-bottom: 2px solid var(--color-ink);
}

.topbar__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  min-height: 68px;
  padding-block: var(--space-sm);
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6em;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark__ver {
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-muted);
}

.topbar .chip {
  min-height: 44px;
  padding: 0.5em 1em;
}

/* 站点导航（两页共用）；当前页用底线标注 */
.topnav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.topnav__link {
  padding-block: var(--space-2xs);
  border-bottom: 2px solid transparent;
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
  transition:
    color var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out);
}
.topnav__link:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.topnav__link[aria-current="page"] {
  border-color: var(--color-ink);
}

/* ═══ 4 · 首屏 ══════════════════════════════════════════════════════════ */

/* 首屏撑满视口（减去 topbar 68px + 底边 2px）；上组贴顶、下组贴底，
   下载按钮稳定落在第一屏内 */
.hero__in {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(32px, 6vh, 96px);
  min-height: calc(100vh - 70px);
  padding-block: clamp(44px, 6vh, 96px) clamp(36px, 5vh, 72px);
}
@supports (height: 100svh) {
  .hero__in { min-height: calc(100svh - 70px); }
}

.hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(44px, 8vw, 128px);
  line-height: 1.04;
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
  overflow-wrap: anywhere;
}
.hero__title .period {
  display: inline-block;
  width: 0.44em;
  height: 0.44em;
  margin-left: 0.14em;
  background: var(--color-accent);
}

.hero__lede {
  margin: var(--space-xl) 0 0;
  max-width: 30em;
  color: var(--color-ink-2);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md) var(--space-lg);
}
.hero__actions .chip { min-height: 48px; }

/* 首屏底部事实行 */
.hero__dateline {
  margin: var(--space-xl) 0 0;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-rule);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-label);
  color: var(--color-muted);
}

/* ═══ 4b · 功能介绍页头 ══════════════════════════════════════════════ */

.page-head {
  padding-block: clamp(56px, 6vw, 88px) var(--space-3xl);
}

.page-head__lede {
  margin: var(--space-lg) 0 0;
  max-width: 34em;
  color: var(--color-ink-2);
}

/* ═══ 5 · 数据带（T4 · 4 格）═══════════════════════════════════════════ */

.stats {
  border-top: 2px solid var(--color-ink);
}

.stats__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.stats__cell {
  padding-block: var(--space-xl);
  padding-inline: var(--space-lg);
  border-inline-start: 1px solid var(--color-rule);
}
.stats__cell:first-child {
  border-inline-start: 0;
  padding-inline-start: 0;
}
.stats__cell:last-child { padding-inline-end: 0; }

.stats__num {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-ink);
}
.stats__num small {
  margin-left: 0.18em;
  font-size: 0.42em;
  font-weight: 700;
  letter-spacing: 0;
}

.stats__label {
  margin: var(--space-xs) 0 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* ═══ 5b · 承诺三则（首页）═════════════════════════════════════════════ */

.pacts {
  border-top: 2px solid var(--color-ink);
  padding-block: var(--space-3xl);
}

.pacts__lede {
  margin: var(--space-lg) 0 0;
  max-width: 34em;
  color: var(--color-ink-2);
}

.pacts__list {
  max-width: 52rem;
  margin: var(--space-2xl) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-rule);
}

.pact {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  column-gap: var(--space-lg);
  padding-block: var(--space-xl);
  border-bottom: 1px solid var(--color-rule);
}

.pact__num {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-h3);
  color: var(--color-muted);
}

.pact__title {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--color-ink);
}

.pact__body {
  grid-column: 2;
  grid-row: 2;
  margin: var(--space-sm) 0 0;
  max-width: 40em;
  color: var(--color-ink-2);
}

/* ═══ 6 · 导览块 ═══════════════════════════════════════════════════════ */

.tour {
  border-top: 2px solid var(--color-ink);
  padding-block: var(--space-3xl);
}

.tour__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-2xl) var(--space-xl);
  align-items: start;
}

/* A：文左（1–4 列）· 图右（6–12 列） */
.tour--a .tour__copy { grid-column: 1 / span 4; }
.tour--a .tour__fig  { grid-column: 6 / span 7; }

/* B：图左（1–7 列）· 文右（9–12 列）—— 与 A 镜像 */
.tour--b .tour__copy { grid-column: 9 / span 4; grid-row: 1; }
.tour--b .tour__fig  { grid-column: 1 / span 7; }

.tour__copy { padding-top: var(--space-xs); }

.tour__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--text-display-s);
  line-height: 1.08;
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

.tour__body {
  margin: var(--space-lg) 0 0;
  max-width: 38em;
  color: var(--color-ink-2);
}

.tour__specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-lg);
  margin: var(--space-lg) 0 0;
  padding: 0;
  list-style: none;
}
.tour__specs li {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ═══ 7 · 模块索引（全宽编号行，骑在 12 列上）══════════════════════════ */

.index {
  border-top: 2px solid var(--color-ink);
  padding-block: var(--space-3xl);
}

.index__head {
  position: relative;
  margin-bottom: var(--space-2xl);
  overflow: clip;
}

.index__numeral {
  position: absolute;
  top: -0.24em;
  right: 0;
  z-index: -1;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(120px, 17vw, 240px);
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: color-mix(in oklab, var(--color-ink) 7%, transparent);
  user-select: none;
  pointer-events: none;
}

.index__lede {
  margin: var(--space-lg) 0 0;
  max-width: 34em;
  color: var(--color-ink-2);
}

.index__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-ink);
}

.idx-row {
  display: grid;
  grid-template-columns: 3.5rem minmax(9rem, 14rem) minmax(0, 1fr) auto;
  gap: var(--space-2xs) var(--space-lg);
  align-items: baseline;
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--color-rule);
  transition: background-color var(--dur-short) var(--ease-out);
}
.idx-row:hover { background-color: var(--color-paper-2); }

.idx-row__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-h3);
  color: var(--color-muted);
  transition: color var(--dur-short) var(--ease-out);
}
.idx-row:hover .idx-row__num { color: var(--color-accent); }

.idx-row__name {
  display: inline-block;
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--color-ink);
  transition: transform var(--dur-short) var(--ease-out);
}
.idx-row:hover .idx-row__name { transform: translateX(8px); }

.idx-row__desc {
  color: var(--color-ink-2);
}

.idx-row__spec {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
  text-align: right;
  white-space: nowrap;
}

/* ═══ 8 · 边界问答 ═════════════════════════════════════════════════════ */

.qa {
  border-top: 2px solid var(--color-ink);
  padding-block: var(--space-3xl);
}

.qa__list {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  margin-top: var(--space-2xl);
}

.qa__item {
  display: grid;
  grid-column: 1 / span 8;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  column-gap: var(--space-md);
  padding-block: var(--space-xl);
  border-bottom: 1px solid var(--color-rule);
}
.qa__item:first-child { border-top: 1px solid var(--color-rule); }

.qa__mark {
  grid-column: 1;
  grid-row: 1;
  width: 0.6em;
  height: 0.6em;
  margin-top: 0.42em;
  background: var(--color-accent);
}

.qa__q {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-ink);
}

.qa__a {
  grid-column: 2;
  grid-row: 2;
  margin: var(--space-sm) 0 0;
  max-width: 40em;
  color: var(--color-ink-2);
}

/* ═══ 9 · 下载（唯一海报时刻：满幅群青）═══════════════════════════════ */

.download {
  border-top: 2px solid var(--color-ink);
}

.plate {
  position: relative;
  overflow: clip;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  padding-block: clamp(72px, 9vw, 128px);
}

/* 列轨跨过海报板：纸色 15% 透明（网格永不可藏）；
   与 body::before 同一套几何，保证全页网格一条线 */
.plate::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  max-width: var(--shell);
  margin-inline: auto;
  background-image: repeating-linear-gradient(
    to right,
    color-mix(in oklab, var(--color-accent-ink) 15%, transparent) 0,
    color-mix(in oklab, var(--color-accent-ink) 15%, transparent) 1px,
    transparent 1px,
    transparent calc(100% / 12)
  );
  background-size: calc(100% - 2 * var(--gutter)) 100%;
  background-position: var(--gutter) 0;
  background-repeat: no-repeat;
}

.plate .shell { position: relative; }

/* 海报板上的焦点环用纸色，保证在信号色底上可见 */
.plate :focus-visible { outline-color: var(--color-accent-ink); }

.plate__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--text-display);
  line-height: 1.04;
  letter-spacing: var(--tracking-display);
  overflow-wrap: anywhere;
}

.plate__meta {
  margin: var(--space-lg) 0 0;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  opacity: 0.92;
}

.plate__actions { margin-top: var(--space-xl); }

/* 海报板之后：安装流程（左 5 列）+ 明细（右 6 列） */
.dl-info { padding-block: var(--space-3xl); }

.dl-info__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-2xl) var(--space-xl);
  align-items: start;
}

.dl-steps {
  grid-column: 1 / span 5;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.dl-steps li {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: var(--space-md);
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--color-rule);
}
.dl-steps li:last-child { border-bottom: 0; }
.dl-steps .n {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--color-muted);
}

.dl-spec {
  grid-column: 7 / span 6;
}
.dl-spec table {
  width: 100%;
  border-collapse: collapse;
}
.dl-spec tr { border-bottom: 1px solid var(--color-rule); }
.dl-spec tr:first-child { border-top: 1px solid var(--color-rule); }
.dl-spec th,
.dl-spec td {
  padding: var(--space-sm) 0;
  text-align: left;
  vertical-align: baseline;
}
.dl-spec th {
  width: 34%;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}
.dl-spec td { color: var(--color-ink); }

/* ═══ 10 · 页脚（Ft4 · 密集版本记录）═══════════════════════════════════ */

.foot {
  border-top: 2px solid var(--color-ink);
  background: var(--color-paper-2);
  padding-block: var(--space-2xl);
}

.foot__inner { max-width: 78ch; }

.foot p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.9;
  color: var(--color-muted);
  text-wrap: pretty;
}
.foot p + p { margin-top: var(--space-sm); }
.foot .foot__id {
  color: var(--color-ink);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ═══ 11 · 响应式 ══════════════════════════════════════════════════════ */

@media (max-width: 56rem) {
  /* 12 列网格在窄视口退化为单列；
     否则 11 个 40px 列间距（共 440px）会把内容撑出视口被裁切 */
  .tour__grid,
  .dl-info__grid,
  .qa__list { grid-template-columns: minmax(0, 1fr); column-gap: 0; }

  /* 导览块：单列，文案在前 */
  .tour--a .tour__copy,
  .tour--a .tour__fig,
  .tour--b .tour__copy,
  .tour--b .tour__fig { grid-column: auto; }
  .tour--b .tour__copy { grid-row: auto; }
  .tour__fig { margin-top: var(--space-xs); }

  /* 数据带：2×2 */
  .stats__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats__cell:nth-child(odd) {
    border-inline-start: 0;
    padding-inline-start: 0;
  }
  .stats__cell:nth-child(-n + 2) { padding-block-start: var(--space-xl); }
  .stats__cell:nth-child(n + 3) { border-top: 1px solid var(--color-rule); }

  /* 问答：满宽 */
  .qa__item { grid-column: auto; }

  /* 下载信息：单列堆叠 */
  .dl-steps,
  .dl-spec { grid-column: auto; }
}

@media (max-width: 40rem) {
  /* 索引行：名称与描述堆叠，规格移后 */
  .idx-row {
    grid-template-columns: 2.75rem minmax(0, 1fr);
    grid-template-areas:
      "num name"
      "desc desc"
      "spec spec";
    gap: var(--space-2xs);
    padding-block: var(--space-lg);
  }
  .idx-row__num { grid-area: num; }
  .idx-row__name { grid-area: name; }
  .idx-row__desc { grid-area: desc; margin-top: var(--space-2xs); }
  .idx-row__spec { grid-area: spec; text-align: left; }

  .hero__title .period { width: 0.4em; height: 0.4em; }
  .stats__num { font-size: clamp(26px, 7vw, 34px); }
  .pact { grid-template-columns: 2.75rem minmax(0, 1fr); }
}

@media (max-width: 30rem) {
  .stats__row { grid-template-columns: minmax(0, 1fr); }
  .stats__cell {
    padding-inline: 0;
    border-inline-start: 0;
    border-top: 1px solid var(--color-rule);
  }
  .stats__cell:first-child { border-top: 0; }
  .topbar .wordmark { font-size: 16px; }
  .topbar__in { gap: var(--space-md); }
  .topnav { gap: var(--space-md); }
  .wordmark__ver { display: none; }
  .topbar .chip {
    font-size: var(--text-sm);
    padding: 0.55em 0.9em;
  }
  .hero__title { font-size: clamp(34px, 10vw, 44px); }
}

/* ═══ 12 · 降低动效偏好 ═════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}