/* 對外頁（首頁、關鍵字落地頁）：沿用 app.css 的色彩、字級、間距 token，只補版面。
   一個重點：首頁那行安裝指令；其他保持安靜（無漸層、無卡片陰影、無圖示方塊） */
body.site { background: var(--panel); }
.site-main { max-width: 820px; padding-top: var(--s6); }
.top nav a[aria-current="page"] { color: var(--text); background: var(--sunken); font-weight: 500; }

.site-hero { margin-bottom: var(--s6); }
.site-hero h1 { font-size: 32px; line-height: 1.25; letter-spacing: -0.02em; margin-bottom: var(--s3); }
.site-hero.home { margin-bottom: 48px; }
.site-hero.home h1 { font-size: 44px; line-height: 1.15; letter-spacing: -0.025em; max-width: 720px; }
.lead { font-size: var(--fs-lg); color: var(--muted); max-width: 640px; margin-bottom: var(--s5); }
.cta { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; }
.site-main .cta-note { font-size: var(--fs-sm); color: var(--muted); margin: var(--s2) 0 0; }

.site-main section { margin: 0 0 var(--s6); }
.site-main h2 { font-size: var(--fs-xl); margin-bottom: var(--s3); }
.site-main p, .site-main li { font-size: var(--fs-lg); line-height: 1.7; }
.site-main ul { padding-left: 1.2em; margin: 0 0 var(--s3); }
.site-main li { margin-bottom: var(--s2); }
.site-main code { background: var(--code-bg); border-radius: 4px; padding: 1px 5px; font-size: 0.9em; overflow-wrap: anywhere; }

.one-line { border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--panel); padding: var(--s4) var(--s5); }
.one-line h2 { font-size: var(--fs-md); margin-bottom: var(--s2); }
.one-line pre { font-size: var(--fs-md); margin-bottom: var(--s2); white-space: pre-wrap; word-break: break-all; }
.one-line pre code { background: none; padding: 0; font-size: inherit; }
.one-line p { font-size: var(--fs-sm); margin: 0; }

.feature-list > section { margin: 0; padding: var(--s4) 0; border-top: 1px solid var(--line); }
.feature-list > section:last-child { border-bottom: 1px solid var(--line); }
.feature-list h3 { font-size: var(--fs-lg); margin: 0 0 var(--s1); }
.feature-list p { margin-bottom: var(--s1); }

/* 首頁一行安裝：跟終端機一樣的等寬字，細框分兩列，不加陰影 */
.install { max-width: 720px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--sunken); margin: 0 0 var(--s2); }
.install-row { display: grid; grid-template-columns: 148px 1fr auto; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); }
.install-row + .install-row { border-top: 1px solid var(--line); }
.install-os { font-size: var(--fs-sm); color: var(--muted); }
.site-main .install code { background: none; padding: 0; font-family: var(--mono); font-size: var(--fs-md); color: var(--text); overflow-wrap: anywhere; }
.install .copy { font-size: var(--fs-sm); padding: 2px var(--s2); }
.site-main .install-note { font-size: var(--fs-sm); color: var(--muted); margin: 0 0 var(--s5); max-width: 640px; }

/* 首頁表格：實測與比較。只用細線，數字等寬，結果欄用強調色 */
.site-main table.proof, .site-main table.vs { width: 100%; border-collapse: collapse; font-size: var(--fs-md); margin: var(--s3) 0 var(--s2); }
.site-main table.proof th, .site-main table.proof td, .site-main table.vs th, .site-main table.vs td { text-align: left; vertical-align: top; padding: var(--s3) var(--s3) var(--s3) 0; border-bottom: 1px solid var(--line); }
.site-main table.proof thead th, .site-main table.vs thead th { font-size: var(--fs-sm); font-weight: 500; color: var(--muted); border-bottom-color: var(--line-strong); }
.site-main table.proof tbody th, .site-main table.vs tbody th { font-weight: 600; }
.site-main table.proof td { font-variant-numeric: tabular-nums; color: var(--muted); }
.site-main table.proof td.num { color: var(--accent); font-weight: 600; }
.site-main table.vs td:last-child { color: var(--text); font-weight: 500; }
.site-main table.vs td { color: var(--muted); }

.faq dt { font-weight: 600; font-size: var(--fs-lg); margin-top: var(--s4); }
.faq dd { margin: var(--s1) 0 0; font-size: var(--fs-lg); line-height: 1.7; color: var(--text); }

.related ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.site-foot { max-width: 820px; border-top: 1px solid var(--line); padding-top: var(--s4); }
.foot-links { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); }

@media (max-width: 640px) {
  .site-main { padding-top: var(--s5); }
  .site-hero h1, .site-hero.home h1 { font-size: 28px; }
  .site-hero.home { margin-bottom: var(--s6); }
  .site-main p, .site-main li, .faq dt, .faq dd, .lead { font-size: var(--fs-md); }
  .one-line { padding: var(--s3); }
  .install-row { grid-template-columns: 1fr auto; gap: var(--s1) var(--s2); padding: var(--s3); }
  .install-row code { grid-column: 1 / -1; grid-row: 2; }
  .site-main table.proof, .site-main table.vs { font-size: var(--fs-sm); }
}

/* 首頁補：標題斷行平均（不留單字孤行）、表格字級一致、窄螢幕表格可換行不撐破 */
.site-hero h1 { text-wrap: balance; }
.site-main table.proof th, .site-main table.proof td, .site-main table.vs th, .site-main table.vs td { white-space: normal; font-size: inherit; }
@media (max-width: 640px) {
  .site-main table.proof, .site-main table.vs { table-layout: fixed; }
  .site-main table.vs th[scope="row"], .site-main table.vs td:first-child { width: 22%; }
}