/* ===========================================================================
   云梭下载器 — 区块层样式（sections.css）
   块归属：.hero / .feature / .interface / .telemetry / .install / .faq / .statement

   属性所有权（契约）：
     · .u-grid 容器（hero / telemetry）内的 grid-column 由 base.css 的 .u-span-* 独家拥有
       → 本文件在这两个区块内零声明；其 12 列轨道与 gap 也归 .u-grid，本文件只调 row-gap / align；
     · .u-grid > * 的 min-width 收敛由 base.css 负责；
     · .statement__inner / .interface__grid / .install__grid / .faq__list 不是 .u-grid，
       是自有网格容器 → 其网格与跨列由本文件自己拥有；
     · .texture__canvas 铺满由 motion.css 负责 → 本文件只定位 .hero__texture。

   约束：不使用重写权重、不使用 id 选择器、不引用外部资源；断点仅 1180 / 900 / 640。
   基调：科学人文主义 —— 留白充足、层级清晰、无卡片堆叠、无重阴影。
   =========================================================================== */

/* ===========================================================================
   1. HERO —— 大留白首屏（文字偏左的 8 列不对称由 HTML 的 .u-span-* 决定）
   =========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(520px, calc(100vh - var(--header-h)), 860px);
}

/* 纹理层：绝对铺满、层级低于内容；无 JS 时为纯 CSS 点阵静态降级
   （画布铺满由 motion.css 的 .texture__canvas 负责） */
.hero__texture {
  position: absolute;
  inset: 0;
  z-index: var(--z-texture);
  pointer-events: none;
  background-image:
    radial-gradient(circle at 1px 1px, var(--grey-200) 1px, transparent 1.6px),
    radial-gradient(58% 52% at 80% 10%, var(--brand-blue-050), transparent 72%);
  background-repeat: repeat, no-repeat;
  background-size: 22px 22px, 100% 100%;
}

/* 网格容器：12 列轨道来自 .u-grid；row-gap 归零，纵向节奏由各元素 margin 独控 */
.hero__inner {
  position: relative;
  z-index: var(--z-content);
  row-gap: 0;
}

.hero__eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-mono);
  color: var(--brand-blue);
}

.hero__title {
  margin: var(--sp-4) 0 0;
  font-family: var(--font-sans);
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--grey-900);
  text-wrap: balance;
  overflow-wrap: break-word;
}

.hero__lede {
  margin: var(--sp-6) 0 0;
  max-width: var(--max-w-text);
  font-size: var(--fs-h4);
  line-height: var(--lh-body);
  color: var(--grey-500);
  overflow-wrap: break-word;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}

/* 发布状态提示：不把「即将发布」塞进按钮文案，单列一行说明；
   等宽小字压到最低存在感，只有「从源码构建」这一句是可点的。 */
.hero__note {
  margin: var(--sp-4) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-mono);
  color: var(--grey-500);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-9) 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  color: var(--grey-500);
}

.hero__meta-item {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

/* 项之间用发丝级中性分隔，不用粗线、不加重心 */
.hero__meta-item + .hero__meta-item::before {
  content: "";
  display: inline-block;
  width: var(--hairline);
  height: 10px;
  margin-right: var(--sp-3);
  background: var(--grey-300);
}

/* ===========================================================================
   2. FEATURE —— 三栏；靠留白与发丝顶线分隔，不做卡片、不加阴影
   =========================================================================== */

.feature {
  position: relative;
}

.feature__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-9) var(--sp-7);
  margin-top: var(--sp-9);
}

.feature__item {
  min-width: 0;
  padding-top: var(--sp-6);
  border-top: var(--hairline) solid var(--grey-200);
}

.feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: var(--hairline) solid var(--grey-200);
  border-radius: var(--r-md);
  background: var(--grey-050);
  color: var(--brand-blue);
  transition: border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

.feature__item:hover .feature__icon {
  border-color: var(--brand-blue);
}

.feature__icon svg {
  display: block;
  width: 22px;
  height: 22px;
  stroke-width: 1.5;
}

.feature__title {
  margin: var(--sp-5) 0 0;
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--grey-900);
}

.feature__desc {
  margin: var(--sp-3) 0 0;
  max-width: 38em;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--grey-500);
}

/* ===========================================================================
   3. TELEMETRY —— 深色（.section--dark 已反转灰阶变量）
   左 intro .u-span-5 / 右 body .u-span-6 的错位由 base.css 负责
   =========================================================================== */

.telemetry {
  position: relative;
  isolation: isolate;
}

/* 网格容器：12 列轨道与 gap 来自 .u-grid；此处只调行距与顶部对齐 */
.telemetry__inner {
  row-gap: var(--sp-9);
  align-items: start;
}

/* 栅格子项 min-width 收敛（与 base.css 的 .u-grid > * 同值，显式保留以防代码块撑破） */
.telemetry__intro {
  min-width: 0;
}

.telemetry__body {
  min-width: 0;
}

/* 自检清单：填住左栏标题下方的留白，视觉上与右侧代码块底部齐平 */
.telemetry__checks {
  margin: var(--sp-8) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--sp-3);
}

.telemetry__check {
  position: relative;
  padding-left: var(--sp-6);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--grey-500);
}

/* 勾选符号用极细 CSS 折线绘制，不引入图标字体或额外请求。
   深色区块里用中性亮灰而非品牌蓝：蓝色小勾在深底上会抢焦点且显得发虚。 */
.telemetry__check::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.5em;
  width: 8px;
  height: 4px;
  border-left: var(--hairline) solid var(--grey-400);
  border-bottom: var(--hairline) solid var(--grey-400);
  transform: rotate(-45deg);
  transform-origin: center;
}

.telemetry__code {
  margin: 0;
  min-width: 0;
  border: var(--hairline) solid var(--grey-200);
  border-radius: var(--r-md);
  background: var(--grey-050);
  overflow: hidden;
}

/* 标题行：左图注 + 右复制按钮。发丝下边线与代码区分隔 */
.telemetry__code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-5);
  border-bottom: var(--hairline) solid var(--grey-200);
}

.telemetry__code-cap {
  display: block;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-mono);
  color: var(--grey-500);
}

/* 复制按钮：深色区块里的次级控件，只在悬停/复制成功时提高对比 */
.telemetry__copy {
  flex: none;
  padding: var(--sp-1) var(--sp-3);
  border: var(--hairline) solid var(--grey-300);
  border-radius: var(--r-sm);
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-mono);
  line-height: 1.6;
  color: var(--grey-500);
  transition: color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.telemetry__copy:hover {
  border-color: var(--grey-400);
  color: var(--grey-900);
}

/* 复制成功：用浅蓝阶，品牌蓝在深底上对比不足 */
.telemetry__copy.is-copied {
  border-color: var(--brand-blue-100);
  color: var(--brand-blue-100);
}

.telemetry__pre {
  margin: 0;
  max-width: 100%;
  padding: var(--sp-5);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: 1.7;
  color: var(--grey-700);
  tab-size: 4;
}

/* 与上一行之间的间距由 .telemetry__inner 的 row-gap 统一提供，
   这里不再叠加 margin-top（否则两处相加会撑出近 200px 的空洞）。 */
.telemetry__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-7) var(--sp-6);
  margin: 0;
}

.telemetry__stat {
  min-width: 0;
  padding-top: var(--sp-4);
  border-top: var(--hairline) solid var(--grey-200);
}

.telemetry__stat-key {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-mono);
  color: var(--grey-400);
}

.telemetry__stat-val {
  margin: var(--sp-2) 0 0;
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
  color: var(--grey-900);
}

.telemetry__stat-note {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--grey-500);
}

/* ===========================================================================
   4. INTERFACE —— 真实截图：宽幅 / 双栏 / 宽幅的节奏，只用发丝边框托住画面
   =========================================================================== */

/* 各区块自持定位，避免内容被整页底纹（.texture，z-index 0）压住 */
.interface {
  position: relative;
}

.interface__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-7) var(--sp-6);
  margin-top: var(--sp-9);
}

.interface__item {
  min-width: 0;
  margin: 0;
}

.interface__item--wide {
  grid-column: 1 / -1;
}

/* 截图底色是浅色 UI，用一层极浅底 + 发丝边把它和纸面分开，不加投影 */
.interface__frame {
  border: var(--hairline) solid var(--grey-200);
  border-radius: var(--r-md);
  background: var(--grey-050);
  overflow: hidden;
}

.interface__shot {
  width: 100%;
  height: auto;
}

.interface__cap {
  margin-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-mono);
  color: var(--grey-500);
}

/* ===========================================================================
   5. INSTALL —— 发布状态面板 + 系统要求 / 三步并排
   =========================================================================== */

.install {
  position: relative;
}

/* 状态面板：区块内唯一的浅底容器，承担「现在能不能装」这个信息 */
.install__panel {
  margin-top: var(--sp-7);
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
  border: var(--hairline) solid var(--grey-200);
  border-radius: var(--r-md);
  background: var(--grey-050);
}

.install__badge {
  display: inline-block;
  padding: 2px var(--sp-2);
  border: var(--hairline) solid var(--brand-blue);
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-mono);
  line-height: 1.6;
  color: var(--brand-blue);
}

.install__panel-text {
  margin-top: var(--sp-3);
  max-width: var(--max-w-text);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--grey-700);
}

.install__build-cap {
  margin-top: var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-mono);
  color: var(--grey-500);
}

.install__pre {
  margin: var(--sp-2) 0 0;
  padding: var(--sp-4) var(--sp-5);
  border: var(--hairline) solid var(--grey-200);
  border-radius: var(--r-sm);
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: 1.7;
  color: var(--grey-700);
  tab-size: 4;
}

.install__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-8) var(--sp-7);
  margin-top: var(--sp-8);
}

.install__col {
  min-width: 0;
}

.install__subtitle {
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--grey-900);
}

.install__list {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

/* 两列键值行：键用等宽小字，值用正文色；靠字号与字体区分层级，不靠更浅的颜色 */
.install__row {
  display: grid;
  grid-template-columns: 4em minmax(0, 1fr);
  gap: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: var(--hairline) solid var(--grey-200);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

.install__key {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-mono);
  line-height: 1.9;
  color: var(--grey-500);
}

.install__val {
  color: var(--grey-700);
}

.install__steps {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}

.install__step {
  display: grid;
  grid-template-columns: 2.5em minmax(0, 1fr);
  gap: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: var(--hairline) solid var(--grey-200);
}

.install__step-no {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-mono);
  line-height: 1.6;
  color: var(--brand-blue);
}

.install__step-title {
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--grey-900);
}

.install__step-desc {
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--grey-500);
}

/* 正文里夹的路径 / 参数：等宽、略小、不断行内溢出 */
.install__mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: var(--ls-mono);
  color: var(--grey-700);
  overflow-wrap: anywhere;
}

/* ===========================================================================
   6. FAQ —— 原生 details/summary：无 JS 也能展开，键盘天然可达
   =========================================================================== */

.faq {
  position: relative;
}

.faq__list {
  margin-top: var(--sp-8);
  border-top: var(--hairline) solid var(--grey-200);
}

.faq__item {
  border-bottom: var(--hairline) solid var(--grey-200);
}

/* 去掉 UA 的三角标记，改用右侧 +/− 字形；flex 让问题与记号两端对齐 */
.faq__q {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-5);
  padding-block: var(--sp-4);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--grey-900);
  list-style: none;
  cursor: pointer;
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q::after {
  content: "+";
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-h4);
  font-weight: 400;
  color: var(--grey-500);
  transition: color var(--dur-fast) var(--ease-out);
}

.faq__item[open] .faq__q::after {
  content: "−";
  color: var(--brand-blue);
}

.faq__q:hover::after {
  color: var(--grey-900);
}

.faq__a {
  padding-bottom: var(--sp-5);
  max-width: var(--max-w-text);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--grey-500);
}

/* ===========================================================================
   7. STATEMENT —— 人文主张：衬线大字 + 超大留白；不用深色底、不加装饰
   =========================================================================== */

.statement {
  padding-block: var(--sp-11);
}

/* 本区块不是 .u-grid：网格与跨列由本文件自己拥有（不涉及 .u-span-* 的共享属性） */
.statement__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}

/* 跨 7 列（1440 下约 643px，一行约 13 字）+ balance：折成接近等长的两行，杜绝孤行 */
.statement__quote {
  grid-column: 1 / span 7;
  margin: 0;
  font-family: var(--font-serif);
  font-size: 48px;
  font-weight: 400;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--grey-900);
  text-wrap: balance;
  overflow-wrap: break-word;
}

.statement__attribution {
  grid-column: 1 / span 7;
  margin: var(--sp-7) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-mono);
  color: var(--grey-500);
}

/* ===========================================================================
   8. 响应式：仅 1180 / 900 / 640
   （hero / telemetry 的跨列收敛由 base.css 在 900px 统一处理）
   =========================================================================== */

@media (max-width: 1180px) {
  .hero {
    min-height: clamp(480px, calc(100vh - var(--header-h)), 780px);
  }

  .hero__title {
    font-size: 64px;
  }

  /* 三栏 → 两栏 */
  .feature__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-8) var(--sp-6);
  }

  .interface__grid {
    gap: var(--sp-6) var(--sp-5);
  }

  .install__grid {
    gap: var(--sp-7) var(--sp-6);
  }

  .statement__quote {
    font-size: 44px;
  }

  .statement__quote,
  .statement__attribution {
    grid-column: 1 / span 9;
  }
}

@media (max-width: 900px) {
  .hero {
    min-height: clamp(420px, 76vh, 640px);
  }

  .hero__title {
    font-size: 52px;
  }

  .hero__meta {
    margin-top: var(--sp-7);
  }

  /* 两栏保持，仅收紧间距 */
  .feature__grid {
    gap: var(--sp-7) var(--sp-5);
    margin-top: var(--sp-8);
  }

  /* 截图的 UI 细节在 900px 以下双栏会小到看不清，直接单栏铺满 */
  .interface__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
    margin-top: var(--sp-8);
  }

  /* 系统要求与三步改为上下堆叠 */
  .install__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-7);
    margin-top: var(--sp-7);
  }

  /* telemetry 由左右并列改为上下堆叠（跨列已由 base.css 收敛为整行） */
  .telemetry__inner {
    row-gap: var(--sp-8);
  }

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

  .statement {
    padding-block: var(--sp-10);
  }

  .statement__quote {
    font-size: 40px;
  }

  .statement__quote,
  .statement__attribution {
    grid-column: 1 / span 12;
  }
}

@media (max-width: 640px) {
  .hero__title {
    font-size: 40px;
  }

  .hero__lede {
    font-size: var(--fs-body);
  }

  /* 窄屏列表折行：关掉竖线分隔（否则第二行以 | 开头），改用行距/列距分隔 */
  .hero__meta {
    gap: var(--sp-2) var(--sp-4);
  }

  .hero__meta-item + .hero__meta-item::before {
    display: none;
  }

  /* 两栏 → 一栏 */
  .feature__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-7);
  }

  .telemetry__stats {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
  }

  .telemetry__stat-val {
    font-size: 28px;
  }

  /* 窄屏把图注与复制按钮压到一行时，图注允许折行 */
  .telemetry__code-head {
    flex-wrap: wrap;
    padding-inline: var(--sp-4);
  }

  .install__panel {
    padding: var(--sp-4) var(--sp-4) var(--sp-5);
  }

  .install__pre {
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-xs);
  }

  /* 4em 的键列在 375px 下太宽，收到 3em 并允许值区换行 */
  .install__row {
    grid-template-columns: 3.2em minmax(0, 1fr);
    gap: var(--sp-3);
  }

  .install__step {
    grid-template-columns: 2em minmax(0, 1fr);
    gap: var(--sp-2);
  }

  .faq__q {
    font-size: var(--fs-body);
  }

  .statement {
    padding-block: var(--sp-9);
  }

  .statement__quote {
    font-size: 32px;
  }
}

/* 动效降级：本文件定义的过渡在减少动效偏好下全部关闭 */
@media (prefers-reduced-motion: reduce) {
  .feature__icon,
  .telemetry__copy,
  .faq__q::after {
    transition: none;
  }
}