/* ── 购买流程 ──────────────────────────────────────────
   编号在这里是有意义的：购买确实是一条有先后的动线，
   序号本身就是「你现在走到哪一步」的信息，不是装饰。 */
.flow{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:var(--sp-3);
  counter-reset:flow;
}
.flow li{
  position:relative; counter-increment:flow;
  padding:var(--sp-4) var(--sp-4) var(--sp-4) 56px;
  border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--surface-1);
}
.flow li::before{
  content:counter(flow,decimal-leading-zero);
  position:absolute; left:var(--sp-4); top:var(--sp-4);
  font-family:var(--font-mono); font-size:var(--fs-sm); font-weight:var(--fw-black);
  color:var(--gold); letter-spacing:-.02em;
}
/* 一条细线把步骤串起来，读的时候能感觉到是流程而不是四个并列的卡片 */
.flow li:not(:last-child)::after{
  content:""; position:absolute; right:calc(var(--sp-3) * -1 - 1px); top:50%;
  width:var(--sp-3); height:1px; background:var(--line-strong);
}
@media(max-width:720px){ .flow li:not(:last-child)::after{display:none} }
.flow b{ display:block; font-size:var(--fs-base); font-weight:var(--fw-bold); margin-bottom:4px; }
.flow span.d{ display:block; color:var(--muted); font-size:var(--fs-sm); line-height:1.7; }

/* ── 交付与时效条 ─────────────────────────────────── */
.deliver-bar{
  display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4); align-items:center;
  padding:var(--sp-3) var(--sp-4); margin:var(--sp-4) 0;
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface-2);
}
.deliver-bar .k{ color:var(--muted); font-size:var(--fs-sm); }
.deliver-bar .v{ color:var(--soft); font-size:var(--fs-sm); font-weight:var(--fw-bold); }

/* ── 常见问题 ─────────────────────────────────────── */
.faq{ display:grid; gap:var(--sp-2); }
.faq details{
  border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--surface-1); overflow:hidden;
}
.faq summary{
  cursor:pointer; padding:var(--sp-4); font-weight:var(--fw-bold);
  font-size:var(--fs-base); list-style:none; display:flex; justify-content:space-between; gap:var(--sp-3);
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:"+"; color:var(--gold); font-weight:var(--fw-black); flex:none }
.faq details[open] summary::after{ content:"−" }
.faq summary:hover{ color:var(--gold2) }
.faq .a{ padding:0 var(--sp-4) var(--sp-4); color:var(--soft); font-size:var(--fs-sm); line-height:1.8; }
.faq .a b{ color:var(--text) }

/* ── 下单须知：账号条件 / 风险说明并排 ──────────────────
   合并前这两块是上下堆叠的两段警告，内容还互相重叠，
   客户在看到「怎么买」之前先撞见一堵墙。并排后各自更短，
   左边是「你要满足什么」，右边是「你要接受什么」。 */
.rules-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:var(--sp-4); align-items:start;
}
.rule-card{
  border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--surface-1); padding:var(--sp-5);
}
/* 两张卡片一视同仁：账号条件和风险说明都是「下单前要看的」，
   给其中一张加警示底色反而让另一张显得可以略过。 */
.rule-card h3{
  margin:0 0 var(--sp-3); font-size:var(--fs-lg); font-weight:var(--fw-black);
  display:flex; align-items:center; gap:var(--sp-2);
}

.rule-ico{
  width:26px; height:26px; flex:none; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:var(--fs-sm); font-weight:var(--fw-black);
  background:rgba(96,165,250,.14); color:var(--info);
}

.rule-card ul{ margin:0; padding-left:1.15em; display:grid; gap:var(--sp-2) }
.rule-card li{ color:var(--soft); font-size:var(--fs-sm); line-height:1.75 }

.rule-accept{
  margin:var(--sp-4) 0 0; padding-top:var(--sp-3);
  border-top:1px dashed var(--line-strong);
  color:var(--muted); font-size:var(--fs-sm); font-weight:var(--fw-normal);
}

/* ── 常见问题分组 ──────────────────────────────────
   交付类和排障类混在一串里，客户排障时要从头翻。分组后各找各的。 */
.faq-group-title{
  margin:var(--sp-5) 0 var(--sp-3); display:flex; align-items:center; gap:var(--sp-3);
  color:var(--muted); font-size:var(--fs-xs); font-weight:var(--fw-black);
  letter-spacing:.14em; text-transform:uppercase;
}
.faq-group-title::after{ content:""; flex:1; height:1px; background:var(--line) }
.faq-group-title:first-child{ margin-top:0 }

/* 常见问题分两组：交付与订单 / 使用与排障。
   九条全部竖着堆是全页最长的一块，并排后高度减半，也让两类问题一眼可分。 */
.faq-cols{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sp-5); align-items:start;
}
@media(max-width:820px){.faq-cols{grid-template-columns:1fr}}
.faq-col{ display:grid; gap:var(--sp-2); align-content:start; }
.faq-group-title{
  font-size:var(--fs-sm); font-weight:var(--fw-black); color:var(--gold2);
  letter-spacing:.06em; padding-bottom:var(--sp-2);
  border-bottom:1px solid var(--line);
}

/* ── 商品卡海报位 ──────────────────────────────────
   海报是 1:1 大图且自带标题与卖点，塞进 48px 图标位等于白放。
   这里给它整幅的位置：卡片顶部通栏，下面才是标题、价格和按钮。 */
.poster-wrap{
  margin:calc(var(--sp-4) * -1) calc(var(--sp-4) * -1) var(--sp-4);
  border-radius:var(--r-md) var(--r-md) 0 0;
  overflow:hidden; background:#0b0f18; line-height:0;
}
.poster-img{
  width:100%; aspect-ratio:1/1; object-fit:cover; display:block;
  transition:transform var(--dur) var(--ease);
}
.gpt:hover .poster-img,
.card:hover .poster-img{ transform:scale(1.03); }
/* 海报接手了视觉，标题区就不需要再留图标的横向间距 */
.gpt-top, .card-top{ display:block!important; }