/* 下载页专属样式：只补 styles.css 里没有的两样东西——带 gutter 的段落壳，
   与本页唯一的新组件「端卡」。其余一律复用首页令牌与子页组件，不另起色值或字号阶。 */

/* 段落壳：styles.css 没有带 gutter 的通用区块容器，invite/partner 用内联 style 顶着；
   本页段落多，收成一个 class 比抄五遍内联更耐改 */
.dl-section {
  padding: clamp(var(--sp-64), 7vw, var(--sp-80)) var(--gutter);
}

.dl-section__inner {
  max-width: var(--maxw);
  margin-inline: auto;
}

/* 与 invite 段落里同类组件的顶距同令牌，避免本页独有壳把纵向节奏拉开 */
.dl-section .platform-grid,
.dl-section .steps {
  margin-top: var(--sp-40);
}

.dl-section .faq { margin-top: var(--sp-32); }

.dl-section .notice { margin-top: var(--sp-40); }

.dl-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-12);
  margin-top: var(--sp-32);
}

/* ── 端卡：本页唯一新组件；铬层与 .step-card 同源，不另起阴影，也不用品牌红 ── */
/* auto-fit 而不是写死五列：五端与将来增减端都能自己排，窄屏自动折行不必逐档改栅格 */
.platform-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
  gap: var(--sp-16);
}

.platform-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  min-width: 0;
  padding: var(--sp-20);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-1);
}

.platform-card__name {
  font-size: 15px; /* 与 .step-card__title 同档，端卡与安装步骤才读成一套 */
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-1);
}

.platform-card__desc {
  font-size: 13px; /* 与 .step-card__desc 同档，端卡不单独漂出字号 */
  line-height: 1.7;
  color: var(--text-3);
  text-wrap: pretty;
}

/* 状态行推到卡片下沿：定位语长短不一，五张卡的状态才对齐成一行。
   状态是事实标注不是行动号召，故用发丝边药丸而非按钮 */
.platform-card__status {
  align-self: flex-start;
  margin-top: auto;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface-1);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-3);
}