.page-products{
  --dl-card:#16233f;
  --dl-card-2:#101a2f;
  --dl-shadow:0 22px 36px -30px rgba(0,0,0,.95);
  --dl-glow:0 24px 42px -26px rgba(240,180,87,.34);
  --dl-page:clamp(4.5rem,16vw,13rem);
}

/* ---------- 首屏 ---------- */
.page-products .dl-hero{
  position:relative;
  overflow:hidden;
  padding-block:clamp(12px,2.4vw,28px) clamp(34px,5vw,62px);
}
.page-products .dl-hero::before{
  content:"";
  position:absolute;
  inset:auto 0 -46% 42%;
  height:420px;
  background:radial-gradient(58% 68% at 50% 50%, rgba(47,167,155,.20), transparent 72%);
  pointer-events:none;
}
.page-products .dl-hero__grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(26px,5vw,56px);
}
.page-products .dl-hero__title{
  margin:.4rem 0 1.1rem;
  line-height:1.06;
  letter-spacing:-.01em;
}
.page-products .dl-hero__accent{
  color:var(--amber);
  display:inline-block;
}
.page-products .dl-hero__lead{
  max-width:44ch;
  color:var(--mist);
}
.page-products .dl-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:26px 0 14px;
}
.page-products .dl-hero__note{
  margin:0;
  font-size:var(--fs-small);
  letter-spacing:.06em;
  color:var(--mist);
  border-left:2px solid var(--clay);
  padding-left:12px;
}

/* 首屏索引条 */
.page-products .dl-index{
  border-top:1px solid var(--line);
  padding-top:18px;
}
.page-products .dl-index__label{
  margin:0 0 14px;
  font-size:.78rem;
  letter-spacing:.22em;
  color:var(--mist);
}
.page-products .dl-index__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:2px;
}
.page-products .dl-index__link{
  display:flex;
  align-items:baseline;
  gap:14px;
  padding:9px 0;
  border-bottom:1px solid var(--line);
  color:var(--paper);
  text-decoration:none;
  font-size:.95rem;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.page-products .dl-index__link:hover,
.page-products .dl-index__link:focus-visible{
  color:var(--amber);
  border-bottom-color:rgba(240,180,87,.6);
}
.page-products .dl-index__no{
  font-family:var(--font-num);
  font-size:.78rem;
  letter-spacing:.1em;
  color:var(--clay);
}

/* ---------- 文档卡片带 ---------- */
.page-products .dl-docs{
  padding-top:clamp(30px,5vw,54px);
}
.page-products .dl-bandfig{
  margin:26px 0 0;
  border:1px solid var(--line);
}
.page-products .dl-chips{
  margin-top:22px;
}
.page-products .dl-band{
  margin-top:6px;
  max-width:100%;
}
.page-products .dl-band .band__track{
  gap:16px;
  padding:6px 2px 24px;
  scroll-snap-type:x mandatory;
}
.page-products .dl-doc{
  scroll-snap-align:start;
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:246px;
  padding:24px 22px 46px;
  background:linear-gradient(158deg,var(--dl-card),var(--dl-card-2) 74%);
  border:1px solid var(--line);
  border-radius:2px;
  box-shadow:var(--dl-shadow), inset 0 1px 0 rgba(245,240,230,.05);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.page-products .dl-doc::after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:26px;
  height:26px;
  background:linear-gradient(226deg, rgba(240,180,87,.24), rgba(240,180,87,0) 62%);
  border-left:1px solid var(--line);
  border-bottom:1px solid var(--line);
  pointer-events:none;
}
.page-products .dl-doc.band__item--wide{flex:0 0 clamp(268px,80vw,344px);}
.page-products .dl-doc.band__item--slim{flex:0 0 clamp(228px,68vw,272px);}
.page-products .dl-doc:hover,
.page-products .dl-doc:focus-within{
  border-color:rgba(240,180,87,.55);
  box-shadow:var(--dl-glow), inset 0 1px 0 rgba(245,240,230,.07);
  transform:translateY(-3px);
}
.page-products .dl-doc__no{
  font-family:var(--font-num);
  font-size:clamp(1.7rem,3.4vw,2.3rem);
  line-height:1;
  letter-spacing:.03em;
  color:var(--amber);
}
.page-products .dl-doc__title{
  margin:0;
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.14rem;
  line-height:1.35;
  color:var(--paper);
}
.page-products .dl-doc__desc{
  margin:0;
  font-size:.93rem;
  line-height:1.75;
  color:var(--mist);
}
.page-products .dl-doc__meta{
  list-style:none;
  margin:auto 0 0;
  padding:12px 0 0;
  border-top:1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  gap:6px 16px;
  font-size:.8rem;
  letter-spacing:.05em;
  color:var(--mist);
}
.page-products .dl-doc__meta li::before{
  content:"·";
  margin-right:6px;
  color:var(--river);
}
.page-products .dl-doc__file{
  position:absolute;
  left:22px;
  bottom:18px;
  font-family:var(--font-num);
  font-size:.7rem;
  letter-spacing:.06em;
  color:var(--amber);
  opacity:0;
  transition:opacity .25s var(--ease);
}
.page-products .dl-doc:hover .dl-doc__file,
.page-products .dl-doc:focus-within .dl-doc__file{
  opacity:.9;
}

/* ---------- 首发两份 ---------- */
.page-products .dl-first__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(26px,5vw,54px);
  align-items:start;
}
.page-products .dl-first__media{
  border:1px solid var(--line);
  max-width:460px;
}
.page-products .dl-first__body .prose{
  margin-bottom:22px;
}
.page-products .dl-first__list{
  list-style:none;
  margin:0 0 26px;
  padding:0;
  display:grid;
  gap:0;
  border-top:1px solid var(--line);
}
.page-products .dl-first__list li{
  padding:14px 0;
  border-bottom:1px solid var(--line);
  font-size:.95rem;
  line-height:1.75;
  color:var(--mist);
}
.page-products .dl-first__k{
  display:inline-block;
  min-width:7.2em;
  margin-right:10px;
  color:var(--paper);
  font-weight:600;
}
.page-products .dl-first__k::before{
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  margin-right:8px;
  background:var(--river);
  vertical-align:middle;
}
.page-products .dl-first__cta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:0;
}

/* ---------- 场景分流 ---------- */
.page-products .dl-scenes{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:16px;
}
.page-products .dl-scene{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:26px 22px 22px;
  background:rgba(19,30,56,.55);
  border:1px solid var(--line);
  border-top:2px solid var(--line);
}
.page-products .dl-scene--up{border-top-color:var(--amber);}
.page-products .dl-scene--back{border-top-color:var(--river);}
.page-products .dl-scene--ver{border-top-color:var(--clay);}
.page-products .dl-scene__no{
  margin:0;
  font-family:var(--font-num);
  font-size:1.7rem;
  line-height:1;
  color:var(--clay);
  letter-spacing:.04em;
}
.page-products .dl-scene__title{
  margin:0;
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.16rem;
  line-height:1.4;
  color:var(--paper);
}
.page-products .dl-scene__text{
  margin:0;
  font-size:.95rem;
  line-height:1.78;
  color:var(--mist);
}
.page-products .dl-scene__pick{
  margin:auto 0 0;
  padding-top:12px;
  border-top:1px solid var(--line);
  font-family:var(--font-num);
  font-size:.82rem;
  letter-spacing:.06em;
  color:var(--amber);
}
.page-products .dl-scene__link{
  margin:0;
  font-size:.92rem;
}
.page-products .dl-scene__link a{
  color:var(--paper);
  text-decoration:none;
  border-bottom:1px solid rgba(240,180,87,.5);
  padding-bottom:2px;
}
.page-products .dl-scene__link a:hover,
.page-products .dl-scene__link a:focus-visible{
  color:var(--amber);
}

/* ---------- 版本对照 ---------- */
.page-products .dl-versions .prose{
  max-width:56ch;
}
.page-products .dl-versions__fig{
  margin:26px 0 30px;
  border:1px solid var(--line);
}
.page-products .dl-versions__table{
  border-top:1px solid var(--line);
}
.page-products .dl-versions__head{
  display:none;
}
.page-products .dl-ver{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:8px;
  padding:20px 0;
  border-bottom:1px solid var(--line);
}
.page-products .dl-ver__tag{
  font-family:var(--font-num);
  font-size:1.9rem;
  line-height:1;
  letter-spacing:.04em;
  color:var(--amber);
}
.page-products .dl-ver__era{
  font-size:.82rem;
  letter-spacing:.2em;
  color:var(--river);
}
.page-products .dl-ver__text{
  margin:0;
  font-size:.95rem;
  line-height:1.8;
  color:var(--mist);
}
.page-products .dl-versions__foot{
  margin:22px 0 0;
  font-size:.92rem;
  color:var(--mist);
}
.page-products .dl-versions__foot a{
  color:var(--paper);
  text-decoration:none;
  border-bottom:1px solid rgba(240,180,87,.5);
  padding-bottom:2px;
}
.page-products .dl-versions__foot a:hover,
.page-products .dl-versions__foot a:focus-visible{
  color:var(--amber);
}

/* ---------- 离线与打印 ---------- */
.page-products .dl-offline{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:34px;
}
.page-products .dl-offline__col{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.page-products .dl-offline__media{
  margin:0;
  border:1px solid var(--line);
}
.page-products .dl-offline__title{
  margin:0;
  font-family:var(--font-display);
  font-weight:800;
  font-size:var(--fs-h3);
  line-height:1.4;
  color:var(--paper);
}
.page-products .dl-offline__text{
  margin:0;
  font-size:.96rem;
  line-height:1.8;
  color:var(--mist);
}
.page-products .dl-offline__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:0;
  border-top:1px solid var(--line);
}
.page-products .dl-offline__list li{
  position:relative;
  padding:11px 0 11px 20px;
  border-bottom:1px solid var(--line);
  font-size:.9rem;
  color:var(--mist);
}
.page-products .dl-offline__list li::before{
  content:"";
  position:absolute;
  left:0;
  top:1.25em;
  width:8px;
  height:1px;
  background:var(--amber);
}

/* ---------- 修订节奏 ---------- */
.page-products .dl-updates__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(26px,5vw,50px);
  align-items:start;
}
.page-products .dl-updates__stats{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:0;
  border-top:1px solid var(--line);
}
.page-products .dl-updates__stats li{
  padding:18px 0;
  border-bottom:1px solid var(--line);
  display:grid;
  gap:6px;
}
.page-products .dl-updates__num{
  font-family:var(--font-num);
  font-size:clamp(2rem,4.4vw,3rem);
  line-height:1;
  letter-spacing:.02em;
  color:var(--amber);
}
.page-products .dl-updates__k{
  font-size:.88rem;
  letter-spacing:.05em;
  color:var(--mist);
}

/* ---------- 常见疑问 ---------- */
.page-products .dl-qa{
  margin-top:22px;
  border-top:1px solid var(--line);
}
.page-products .dl-qa__item{
  border-bottom:1px solid var(--line);
}
.page-products .dl-qa__q{
  cursor:pointer;
  list-style:none;
  padding:18px 34px 18px 0;
  position:relative;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.02rem;
  line-height:1.5;
  color:var(--paper);
  transition:color .25s var(--ease);
}
.page-products .dl-qa__q::-webkit-details-marker{display:none;}
.page-products .dl-qa__q::after{
  content:"+";
  position:absolute;
  right:4px;
  top:50%;
  transform:translateY(-50%);
  font-family:var(--font-num);
  font-size:1.2rem;
  color:var(--amber);
  transition:transform .25s var(--ease);
}
.page-products .dl-qa__item[open] .dl-qa__q{color:var(--amber);}
.page-products .dl-qa__item[open] .dl-qa__q::after{transform:translateY(-50%) rotate(45deg);}
.page-products .dl-qa__q:hover{color:var(--amber);}
.page-products .dl-qa__a{
  padding:0 0 20px;
}
.page-products .dl-qa__a p{
  margin:0;
  max-width:52ch;
  font-size:.95rem;
  line-height:1.8;
  color:var(--mist);
}
.page-products .dl-faq__more{
  margin:22px 0 0;
  font-size:.94rem;
  color:var(--mist);
}
.page-products .dl-faq__more a{
  color:var(--paper);
  text-decoration:none;
  border-bottom:1px solid rgba(240,180,87,.5);
  padding-bottom:2px;
}
.page-products .dl-faq__more a:hover,
.page-products .dl-faq__more a:focus-visible{color:var(--amber);}

/* ---------- 收尾 ---------- */
.page-products .dl-tail__inner{
  border:1px solid var(--line);
  border-left:2px solid var(--clay);
  padding:clamp(24px,4vw,40px);
  background:rgba(19,30,56,.5);
}
.page-products .dl-tail__title{
  margin:0 0 12px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:var(--fs-h2);
  line-height:1.25;
  color:var(--paper);
}
.page-products .dl-tail__text{
  margin:0 0 22px;
  max-width:46ch;
  font-size:1rem;
  line-height:1.8;
  color:var(--mist);
}
.page-products .dl-tail__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:0;
}

/* ---------- 响应式 ---------- */
@media (min-width:720px){
  .page-products .dl-scenes{grid-template-columns:repeat(2,minmax(0,1fr));}
  .page-products .dl-ver{
    grid-template-columns:96px 110px minmax(0,1fr);
    gap:22px;
    align-items:baseline;
  }
  .page-products .dl-versions__head{
    display:grid;
    grid-template-columns:96px 110px minmax(0,1fr);
    gap:22px;
    padding:12px 0;
    border-bottom:1px solid var(--line);
    font-size:.76rem;
    letter-spacing:.2em;
    color:var(--mist);
  }
}

@media (min-width:900px){
  .page-products .dl-first__grid{
    grid-template-columns:minmax(240px,.82fr) minmax(0,1.35fr);
  }
  .page-products .dl-offline{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:44px;
  }
  .page-products .dl-updates__grid{
    grid-template-columns:minmax(0,1.3fr) minmax(240px,.7fr);
  }
}

@media (min-width:960px){
  .page-products .dl-hero__grid{
    grid-template-columns:minmax(0,1.5fr) minmax(230px,.5fr);
    align-items:end;
  }
  .page-products .dl-index{
    border-top:0;
    border-left:1px solid var(--line);
    padding:0 0 0 22px;
  }
  .page-products .dl-scenes{grid-template-columns:repeat(3,minmax(0,1fr));}
  .page-products .dl-index__list{gap:0;}
}

@media (prefers-reduced-motion:reduce){
  .page-products .dl-doc,
  .page-products .dl-doc__file,
  .page-products .dl-index__link,
  .page-products .dl-qa__q,
  .page-products .dl-qa__q::after{
    transition-duration:120ms;
  }
  .page-products .dl-doc:hover,
  .page-products .dl-doc:focus-within{transform:none;}
}
</main>