/* 首頁 App 下載公告 — 2026-09-05（iOS 上架 / Android 送審中） */
.app-dl{background:linear-gradient(180deg,#eef4ff 0%,#f8fafc 100%);border-top:1px solid #dbe6fb;border-bottom:1px solid #e2e8f0;padding:1.75rem 1rem}
.app-dl__inner{max-width:1100px;margin:0 auto;background:#fff;border:1px solid #e2e8f0;border-radius:18px;box-shadow:0 6px 22px rgba(15,23,42,.06);padding:1.35rem 1.5rem;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:1.5rem;align-items:center}

/* 左：icon + 文案 */
.app-dl__lead-col{display:flex;gap:1rem;align-items:flex-start;min-width:0}
.app-dl__icon{width:76px;height:76px;border-radius:18px;flex:0 0 auto;box-shadow:0 4px 14px rgba(15,23,42,.14);background:#0f172a}
.app-dl__copy{min-width:0}
.app-dl__eyebrow{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.04em;color:#1d4ed8;background:#eff6ff;border:1px solid #bfdbfe;padding:.18rem .65rem;border-radius:999px;margin:0 0 .45rem}
.app-dl__title{font-size:clamp(1.15rem,2.2vw,1.45rem);font-weight:800;color:#0f172a;margin:0 0 .35rem;line-height:1.3}
.app-dl__desc{font-size:.9rem;color:#475569;line-height:1.6;margin:0 0 .6rem}
.app-dl__points{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem 1.1rem}
.app-dl__points li{font-size:.82rem;color:#334155;line-height:1.5;display:flex;align-items:center;gap:.4rem}
.app-dl__points i{color:#2563eb;font-size:.85rem;width:1rem;text-align:center;flex:0 0 auto}

/* 中：下載按鈕 */
.app-dl__action-col{display:flex;flex-direction:column;gap:.5rem;align-items:stretch;flex:0 0 auto}
.app-dl__btns{display:flex;flex-direction:column;gap:.5rem}
.app-dl__btn{display:inline-flex;align-items:center;gap:.65rem;padding:.6rem 1.1rem;border-radius:12px;text-decoration:none;min-width:200px;border:1px solid transparent;transition:transform .15s,box-shadow .15s,background-color .15s}
.app-dl__btn-logo{font-size:1.5rem;line-height:1;flex:0 0 auto}
.app-dl__btn-txt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
/* Button text colors are set explicitly with class-qualified selectors: the global typography.css
   rule `small{color:var(--color-text-secondary)}` would otherwise beat the inherited white/slate (contrast fix 2026-09-05) */
.app-dl__btn-txt small{font-size:.68rem;font-weight:500;letter-spacing:.01em}
.app-dl__btn-txt strong{font-size:1rem;font-weight:700;letter-spacing:.01em}
.app-dl__btn--ios{background:#0f172a;color:#fff;box-shadow:0 4px 14px rgba(15,23,42,.22)}
.app-dl__btn--ios .app-dl__btn-logo,.app-dl__btn--ios .app-dl__btn-txt strong{color:#fff}
.app-dl__btn--ios .app-dl__btn-txt small{color:#cbd5e1} /* slate-300 on #0f172a = 12:1 */
.app-dl__btn--ios:hover,.app-dl__btn--ios:focus{background:#1e293b;color:#fff;transform:translateY(-1px);text-decoration:none}
.app-dl__btn--ios:focus-visible{outline:2px solid #2563eb;outline-offset:2px}
.app-dl__btn--android{background:#fff;color:#0f172a;border-color:#cbd5e1;cursor:pointer;box-shadow:0 4px 14px rgba(15,23,42,.12)}
.app-dl__btn--android .app-dl__btn-logo{color:#01875f}
.app-dl__btn--android .app-dl__btn-txt strong{color:#0f172a}
.app-dl__btn--android .app-dl__btn-txt small{color:#475569}
.app-dl__btn--android:hover,.app-dl__btn--android:focus{background:#f8fafc;color:#0f172a;transform:translateY(-1px);text-decoration:none;box-shadow:0 6px 18px rgba(15,23,42,.16)}
.app-dl__btn--android:focus-visible{outline:2px solid #01875f;outline-offset:2px}
.app-dl__note{font-size:.72rem;color:#64748b;line-height:1.5;margin:0;max-width:220px}

/* 右：QR（桌機才顯示） */
.app-dl__qr{margin:0;flex:0 0 auto;text-align:center}
.app-dl__qr img{width:112px;height:112px;display:block;border:1px solid #e2e8f0;border-radius:10px;padding:6px;background:#fff}
.app-dl__qr figcaption{font-size:.7rem;color:#64748b;margin-top:.35rem;line-height:1.4}

@media (max-width:1023px){
  .app-dl__inner{grid-template-columns:minmax(0,1fr) auto}
  .app-dl__qr{display:none}
}
@media (max-width:767px){
  .app-dl{padding:1.25rem .85rem}
  .app-dl__inner{grid-template-columns:1fr;gap:1.1rem;padding:1.15rem 1.1rem;border-radius:16px}
  .app-dl__lead-col{gap:.85rem}
  .app-dl__icon{width:60px;height:60px;border-radius:14px}
  .app-dl__points{flex-direction:column;gap:.28rem}
  .app-dl__btn{min-width:0;width:100%;justify-content:center}
  .app-dl__note{max-width:none;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .app-dl__btn{transition:none}
  .app-dl__btn--ios:hover,.app-dl__btn--ios:focus,.app-dl__btn--android:hover,.app-dl__btn--android:focus{transform:none}
}