/* Windows 桌面版：首页窄带、/download/ 落地页、工作区提示条 */

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 12px 18px;
  border-radius: var(--radius);
  background: #131a2e;
  color: #fff;
  border: 1px solid #131a2e;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.store-badge:hover { color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.store-badge:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }
.store-badge svg { width: 22px; height: 22px; flex: none; }
.store-badge .sb-txt { display: grid; line-height: 1.15; text-align: left; }
.store-badge .sb-sm { font-size: var(--text-xs); opacity: .78; letter-spacing: .02em; }
.store-badge .sb-lg { font-size: var(--text-base); font-weight: 600; }

/* ---- 首页窄带 ---- */
.app-band { padding: 0 0 var(--sp-7); }
.app-band .container {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
  padding: var(--sp-5) var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
}
.app-band .ab-ico {
  width: 52px; height: 52px; flex: none;
  border-radius: 14px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--teal-400), var(--teal-600));
  box-shadow: var(--shadow-teal);
}
.app-band .ab-ico svg { width: 26px; height: 26px; color: #fff; }
.app-band .ab-copy { flex: 1 1 260px; min-width: 0; }
.app-band h2 { font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em; }
.app-band p { color: var(--muted); font-size: var(--text-sm); margin-top: 2px; }
.app-band .ab-cta { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.app-band .ab-note { font-size: var(--text-xs); color: var(--muted-2); font-family: var(--font-mono); }

/* ---- /download/ 落地页 ---- */
.page-app .app-hero { padding: calc(var(--nav-h) + var(--sp-8)) 0 var(--sp-8); position: relative; overflow: hidden; }
.page-app .app-hero .container { display: grid; grid-template-columns: 1fr 1.05fr; gap: var(--sp-8); align-items: center; position: relative; z-index: 1; }
.page-app .app-hero h1 { font-size: var(--text-hero); font-weight: 700; letter-spacing: -0.035em; margin: var(--sp-4) 0 var(--sp-5); }
.page-app .app-hero .lede { font-size: var(--text-lg); color: var(--muted); max-width: 46ch; }
.page-app .app-facts { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-6) 0; }
.page-app .app-ctas { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.page-app .app-cta-alt { font-size: var(--text-sm); color: var(--muted); }
.page-app .app-cta-alt a { font-weight: 600; }
.page-app .app-pub { margin-top: var(--sp-5); font-size: var(--text-xs); color: var(--muted-2); }
.app-shot { margin: 0; }
.app-shot img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-xl); }
.app-shot figcaption { margin-top: var(--sp-3); font-size: var(--text-xs); color: var(--muted-2); font-family: var(--font-mono); }

.app-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.app-trio .card { padding: var(--sp-6); }
.app-trio .at-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--teal-50); border: 1px solid var(--border); color: var(--teal-600); margin-bottom: var(--sp-4); }
.app-trio .at-ico svg { width: 22px; height: 22px; }
.app-trio h3 { font-size: var(--text-lg); margin-bottom: var(--sp-2); }
.app-trio p { color: var(--muted); font-size: var(--text-sm); }

.cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp-wrap:focus-visible { outline: 3px solid var(--ring); outline-offset: -3px; }
table.cmp { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; font-size: var(--text-sm); }
table.cmp caption { text-align: left; padding: var(--sp-4) var(--sp-5); font-size: var(--text-xs); color: var(--muted-2); font-family: var(--font-mono); caption-side: bottom; }
table.cmp th, table.cmp td { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
table.cmp thead th { font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--teal-50); }
table.cmp thead th.col-app { color: var(--teal-700); }
table.cmp tbody tr:last-child th, table.cmp tbody tr:last-child td { border-bottom: 0; }
table.cmp th[scope="row"] { font-weight: 500; color: var(--ink); }
table.cmp td { text-align: center; color: var(--muted); }
table.cmp td.col-app { background: rgba(240, 253, 250, .6); }
table.cmp .yes { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--teal-600); color: #fff; }
table.cmp .yes svg { width: 13px; height: 13px; }
table.cmp .no { color: var(--muted-2); }
table.cmp .val { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink); }

@media (max-width: 900px) {
  .page-app .app-hero .container { grid-template-columns: 1fr; gap: var(--sp-6); }
  .app-trio { grid-template-columns: 1fr; }
  .app-band .container { padding: var(--sp-5); }
  .app-band .ab-cta { width: 100%; }
}