/* 下載頁專用樣式（build 發成 /css/download.css，只在下載頁載入） */

/* ---------- Hero：左文案、右 App 卡 ---------- */
.dl-hero-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.dl-hero h1 { font-size: clamp(2rem, 1.1rem + 2.6vw, 3.15rem); margin-bottom: 20px; }
.dl-h1-line2 { display: block; }
html[lang="en"] .dl-hero h1 { letter-spacing: 0; }
.dl-hero .lead { max-width: 36em; }
.dl-facts { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; color: #cfccc3; font-size: .92rem; }
.dl-facts li { display: inline-flex; align-items: center; gap: 8px; }
.dl-facts .ico { width: 18px; height: 18px; color: var(--gold); flex: none; }

.dl-card { position: relative; justify-self: end; width: 100%; max-width: 420px; padding: clamp(22px, 3vw, 32px); border-radius: 24px; border: 1px solid var(--gold-a25); background: radial-gradient(ellipse at 100% 0%, rgba(212, 175, 106, .14), transparent 60%), linear-gradient(180deg, var(--panel-2), var(--panel)); box-shadow: var(--shadow), 0 0 40px rgba(212, 175, 106, .06); display: flex; flex-direction: column; align-items: center; gap: 22px; }
.dl-card-head { display: flex; align-items: center; gap: 16px; width: 100%; }
.dl-card-icon { width: 76px; height: 76px; flex: none; border-radius: 22%; box-shadow: 0 0 0 1px var(--gold-a45), 0 8px 22px rgba(0, 0, 0, .5); }
.dl-card-name { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dl-card-name strong { font-family: var(--font-head); font-size: 1.08rem; line-height: 1.35; }
.dl-card-name span { color: var(--muted); font-size: .86rem; line-height: 1.5; }
.dl-card-meta { width: 100%; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding: 14px 0; }
.dl-card-meta > div { text-align: center; padding: 0 6px; min-width: 0; }
.dl-card-meta > div + div { border-left: 1px solid var(--line-soft); }
.dl-card-meta dt { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.dl-card-meta dd { margin: 0; white-space: nowrap; font-family: var(--font-head); font-weight: 900; color: var(--gold); font-size: .98rem; line-height: 1.3; }
.dl-qr .qr-code { width: 196px; height: 196px; padding: 12px; }
.dl-qr figcaption { max-width: 18em; }

@media (max-width: 860px) {
  .dl-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .dl-card { justify-self: stretch; max-width: none; }
}
@media (max-width: 420px) {
  .dl-hero h1 { font-size: 1.86rem; }
  html[lang="en"] .dl-hero h1 { font-size: 2.05rem; }
  .dl-card-meta dd { font-size: .9rem; }
  .dl-card-icon { width: 64px; height: 64px; }
}

/* ---------- 系統需求 ---------- */
#requirements .lead { margin-bottom: 24px; }
.req-table th[scope="row"] { color: #dedad0; white-space: nowrap; }
.req-dev { display: inline-flex; align-items: center; gap: 10px; }
.req-dev .ico { width: 18px; height: 18px; color: var(--gold); }
#requirements .tablet { --w: 500px; }
@media (max-width: 640px) { #requirements .tablet { --w: 300px; margin-inline: auto; } }
@media (max-width: 420px) { .req-table th, .req-table td { padding: 12px 12px; font-size: .9rem; } }

/* ---------- 網頁版 ---------- */
.web-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; margin-bottom: 32px; }
.web-head .section-head { margin-bottom: 0; }
.web-qr { padding-bottom: 6px; }
@media (max-width: 760px) { .web-head { grid-template-columns: minmax(0, 1fr); } }
.web-guide { display: flex; flex-direction: column; }
.web-guide h3 { margin-bottom: 18px; }
.web-guide .steps { gap: 12px; }
.web-guide .steps > li { background: rgba(255, 255, 255, .02); }
.web-guide .steps > li::before { width: 30px; height: 30px; font-size: .92rem; }
@media (max-width: 640px) {
  .web-guide { padding: 20px 16px; }
  .web-guide .steps > li { padding: 16px 16px 16px 58px; }
  .web-guide .steps > li::before { left: 14px; top: 16px; }
}
.web-note { margin: 28px 0 0; color: var(--muted); font-size: .95rem; max-width: 60em; }

/* ---------- 語言與更新 ---------- */
.lang-card { display: flex; flex-direction: column; align-items: flex-start; }
.h3-size { font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem); margin: 14px 0 10px; }
.lang-chips { margin-top: 6px; gap: 8px; }
.lang-chips .chip { font-size: .86rem; }
.lang-card .mt-3 { margin-top: auto; padding-top: 18px; margin-bottom: 0; }

/* ---------- 收尾 CTA ---------- */
.cta-panel h2 { margin-bottom: 12px; }
.cta-qr .qr-code { width: 168px; height: 168px; }