/* hk_eats — main.css
   手機優先，唔用任何 CSS 框架。
   顏色全部行 custom property，深色模式只覆寫變數。 */

:root {
  --bg: #fbfaf7;
  --bg-raised: #ffffff;
  --bg-sunken: #f1efe9;
  --fg: #23201b;
  --fg-muted: #5f594f;
  --fg-faint: #8a8377;
  --line: #ddd8cd;
  --line-strong: #c4bcac;
  --accent: #9a4a1f;
  --accent-fg: #ffffff;
  --warn-bg: #fff3d6;
  --warn-line: #a87a06;
  --warn-fg: #6b4a00;
  --ok-fg: #2f6b3a;
  --info-bg: #e8f0f7;
  --info-line: #3d7ea6;
  --info-fg: #17435c;
  --diagram-panel: #ffffff;
  --diagram-fill-2: #f1efe9;
  --diagram-ink: #23201b;
  --diagram-muted: #4f4941;
  --diagram-line: #8d8577;
  --diagram-accent: #8c4119;
  --diagram-warn: #7a4d00;
  --diagram-ok: #256034;
  --radius: 10px;
  --measure: 46rem;   /* = .wrap max-width，只作記錄 */
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 4px 14px rgba(0,0,0,.05);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16150f;
    --bg-raised: #201e17;
    --bg-sunken: #100f0a;
    --fg: #ece7dc;
    --fg-muted: #b0a898;
    --fg-faint: #837c6e;
    --line: #35322a;
    --line-strong: #4c4739;
    --accent: #e0975f;
    --accent-fg: #16150f;
    --warn-bg: #33270c;
    --warn-line: #b88a25;
    --warn-fg: #f0d79a;
    --ok-fg: #7fbf8c;
    --info-bg: #12293a;
    --info-line: #5aa7d0;
    --info-fg: #b8dcf2;
    --diagram-panel: #201e17;
    --diagram-fill-2: #100f0a;
    --diagram-ink: #ece7dc;
    --diagram-muted: #bcb4a3;
    --diagram-line: #7d766a;
    --diagram-accent: #e8a468;
    --diagram-warn: #f2d79c;
    --diagram-ok: #8fd09c;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.35);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Noto Sans TC", "PingFang HK", "Hiragino Sans CNS",
               "Microsoft JhengHei", system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.75;
  letter-spacing: .01em;
}

/* ---------- 版面 ---------- */

.wrap {
  width: 100%;
  max-width: 46rem;        /* 736px @16px root — 中文長文舒適閱讀寬度 */
  margin-left: auto;       /* 兩邊都寫明，唔靠 shorthand */
  margin-right: auto;
  padding: 0 1.25rem;
  box-sizing: border-box;
}

.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--bg-raised);
  position: sticky;
  top: 0;
  z-index: 10;
}

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1rem;
  padding-top: .7rem;
  padding-bottom: .7rem;
}

.brand {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--fg);
  text-decoration: none;
}
.brand span { color: var(--accent); }

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .9rem;
  margin-left: auto;
  font-size: .92rem;
}
.site-nav a {
  color: var(--fg-muted);
  text-decoration: none;
  padding: .15rem 0;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--fg);
  border-bottom-color: var(--accent);
}

main { display: block; padding: 1.6rem 0 3rem; }

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-sunken);
  color: var(--fg-muted);
  font-size: .87rem;
  padding: 1.5rem 0 2.5rem;
}
.site-footer p { margin: .35rem 0; }

/* ---------- 文字 ---------- */

h1, h2, h3, h4 {
  line-height: 1.35;
  letter-spacing: 0;
  margin: 2.2rem 0 .7rem;
  font-weight: 700;
}
h1 { font-size: 1.72rem; margin-top: .4rem; }
h2 {
  font-size: 1.3rem;
  padding-top: .9rem;
  border-top: 1px solid var(--line);
}
h3 { font-size: 1.08rem; }
h4 { font-size: .98rem; color: var(--fg-muted); }

/* 閱讀寬度由 .wrap 統一決定（46rem 減兩邊 padding）。
   以前呢度另外夾一個 38rem，令段落右邊剩低約 91px 死位，
   但標題、表格、圖解冇受限，兩者右邊界對唔齊 —— 就係「內容
   唔對稱」嘅來源。宜家全部元素共用同一條左右邊界。 */
p { margin: 0 0 1.05rem; }

ul, ol { padding-left: 1.3rem; margin: 0 0 1.05rem; }
li { margin: .3rem 0; }

a { color: var(--accent); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }

strong { font-weight: 700; }
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88em;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: .05em .35em;
}

.lede {
  font-size: 1.06rem;
  color: var(--fg-muted);
  border-left: 3px solid var(--accent);
  padding-left: .9rem;
  margin-bottom: 1.6rem;
}

.meta-line {
  font-size: .85rem;
  color: var(--fg-faint);
  margin: -.2rem 0 1.4rem;
}

/* ---------- 卡片 / hub ---------- */

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .9rem;
  margin: 1.4rem 0 2rem;
  padding: 0;
  list-style: none;
}
@media (min-width: 34rem) {
  .card-grid { grid-template-columns: 1fr 1fr; }
}

.card {
  display: block;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem 1.1rem;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
}
.card:hover { border-color: var(--line-strong); }
.card h3 { margin: 0 0 .3rem; font-size: 1.05rem; color: var(--accent); }
.card p { margin: 0; font-size: .92rem; color: var(--fg-muted); max-width: none; }

.post-list { list-style: none; padding: 0; margin: 1.2rem 0 2rem; }
.post-list li {
  border-bottom: 1px solid var(--line);
  padding: .85rem 0;
  max-width: none;
}
.post-list li:first-child { border-top: 1px solid var(--line); }
.post-list a { font-weight: 600; text-decoration: none; font-size: 1.02rem; }
.post-list a:hover { text-decoration: underline; }
.post-list .kicker {
  display: block;
  font-size: .78rem;
  letter-spacing: .08em;
  color: var(--fg-faint);
  text-transform: uppercase;
  margin-bottom: .1rem;
}
.post-list p { margin: .25rem 0 0; font-size: .9rem; color: var(--fg-muted); max-width: none; }

/* ---------- 表格 ---------- */

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raised);
}
table {
  border-collapse: collapse;
  width: 100%;
  min-width: 30rem;
  font-size: .92rem;
}
th, td {
  text-align: left;
  vertical-align: top;
  padding: .55rem .7rem;
  border-bottom: 1px solid var(--line);
}
thead th {
  background: var(--bg-sunken);
  font-size: .85rem;
  letter-spacing: .03em;
  color: var(--fg-muted);
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- 易耗芯區塊（freshness.js 控制） ---------- */

.data-block {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.05rem .6rem;
  margin: 1.3rem 0 1.8rem;
}
.data-block > h3:first-child,
.data-block > h4:first-child { margin-top: 0; }
.data-block .table-scroll { border: 0; border-radius: 0; background: none; }
.data-block .table-scroll table { min-width: 26rem; }

[data-fresh-key]:empty::after {
  content: "…";
  color: var(--fg-faint);
}

.freshness {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .6rem;
  margin: .6rem 0 .5rem;
  font-size: .82rem;
  color: var(--fg-faint);
  border-top: 1px dashed var(--line);
  padding-top: .5rem;
}
.freshness .verified { white-space: nowrap; }

.data-block.is-error .freshness { color: var(--fg-muted); }

/* ---------- affiliate 連結（affiliates.js 注入 href） ---------- */

.affiliate-cta {
  font-size: .82rem;
  color: var(--fg-faint);
  border: 1px dashed var(--line-strong);
  border-radius: 6px;
  padding: .5rem .7rem;
  margin: 1.2rem 0;
}
a[data-aff] { font-weight: 600; }
a[data-aff]:not([href]) {
  color: var(--fg-faint);
  cursor: default;
  font-weight: 400;
}

/* ---------- 雜項 ---------- */

.callout {
  background: var(--bg-sunken);
  border-left: 3px solid var(--line-strong);
  border-radius: 0 6px 6px 0;
  padding: .8rem 1rem;
  margin: 1.3rem 0;
}
.callout p:last-child { margin-bottom: 0; }
.callout h4 { margin-top: 0; }

.faq h3 { border-top: 1px solid var(--line); padding-top: .9rem; }

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: .5rem;
  top: .5rem;
  z-index: 20;
  background: var(--accent);
  color: var(--accent-fg);
  padding: .5rem .8rem;
  border-radius: 6px;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ================================================================
   易耗芯提示：兩件唔同嘅事，兩套唔共用嘅 class
   .stale-warning   資料舊咗，可能已經唔啱（琥珀，警告）
   .volatile-banner 資料啱，但正在變動，隨時要重查（藍，通知）
   ================================================================ */

/* --- 過期警告（沿用琥珀色，掛喺 .freshness 註腳入面） --- */
.stale-warning {
  display: block;
  width: 100%;
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-left-width: 4px;
  border-radius: 6px;
  color: var(--warn-fg);
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.55;
  padding: .55rem .7rem;
  margin-top: .1rem;
}
.data-block.is-stale { border-color: var(--warn-line); }

/* --- 變動中橫幅（藍色，掛喺區塊最頂，形狀同過期警告刻意唔一樣） --- */
.volatile-banner {
  display: block;
  background: var(--info-bg);
  border: 1px solid var(--info-line);
  border-top-width: 4px;
  border-radius: 6px;
  color: var(--info-fg);
  padding: .6rem .8rem .5rem;
  margin: 0 0 1rem;
}
.volatile-banner-title {
  display: block;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: .25rem;
}
.volatile-banner-title::before {
  content: "◆ ";
  color: var(--info-line);
}
.volatile-banner-note {
  margin: .2rem 0 .25rem;
  font-size: .85rem;
  line-height: 1.6;
  max-width: none;
}
.data-block.is-volatile { border-color: var(--info-line); }

/* 同時中兩樣：頂藍、底琥珀，睇得出係兩件事 */
.data-block.is-volatile.is-stale {
  border-color: var(--info-line);
  border-bottom-color: var(--warn-line);
  border-bottom-width: 3px;
}

/* 個別 entry 嘅 volatility 標記，畀樣式表將來可以掛嘢 */
[data-volatility="high"] { text-decoration: underline dotted var(--info-line); text-underline-offset: .2em; }

/* ================================================================
   SVG 圖解
   全部顏色行 CSS 變數，深淺兩色模式各自一套；
   零外部圖片，SVG 由 build 由 assets/svg/ 注入。
   ================================================================ */

.diagram {
  margin: 1.6rem 0 1.8rem;
  padding: .9rem .9rem .4rem;
  background: var(--diagram-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.diagram > svg {
  display: block;
  width: 100%;
  min-width: 34rem;
  height: auto;
}
.diagram figcaption {
  margin: .5rem .1rem .4rem;
  font-size: .84rem;
  color: var(--fg-muted);
  line-height: 1.6;
  min-width: 0;
}

.diagram-svg { font-family: inherit; }
.diagram-svg text { fill: var(--diagram-ink); }

/* 共用語意 class */
.d-section, .d-title, .d-node-text, .d-root-text,
.d-leaf-title, .d-fallback-text, .d-hk-rail { fill: var(--diagram-ink); }

.d-label-side text, .d-sz, .d-hk, .d-note,
.d-aside-text, .d-leaf-text, .d-cond text { fill: var(--diagram-muted); }

.d-border, .d-arrow, .d-gap { stroke: var(--diagram-accent); fill: none; }
.d-border-text, .d-gap-text { fill: var(--diagram-accent); }

.d-edge { stroke: var(--diagram-ink); fill: none; }
.d-tick, .d-divider, .d-leaf-rule { stroke: var(--diagram-line); fill: none; }

.d-node, .d-leaf, .d-root, .d-fallback, .d-bean, .d-burr, .d-bearing {
  fill: var(--diagram-panel);
  stroke: var(--diagram-ink);
}
.d-burr-inner { fill: var(--diagram-fill-2); }
.d-cond rect, .d-aside, .d-body { fill: none; stroke: var(--diagram-line); }
.d-leaf { stroke: var(--diagram-line); }
.d-node-rail, .d-leaf-primary, .d-root { stroke: var(--diagram-accent); }

.d-warn, .d-leaf-warn { fill: var(--diagram-warn); }
.d-arrow-bad, .d-shaft-bad { stroke: var(--diagram-warn); }
.d-ok { fill: var(--diagram-ok); }
.d-shaft-good { stroke: var(--diagram-ok); }
.d-shaft { fill: none; stroke-linecap: round; }

/* ================================================================
   廣告位預留
   站內冇任何廣告網絡代碼、冇 publisher ID。
   下面淨係「留位」：min-height 同 ad-slots.json 嘅高度一一對應，
   scripts/build.mjs 會逐個 slot 核對，唔啱就 error。
   enabled:false / true 兩種狀態下容器高度必須一樣 —— 所以
   佔位框只用 outline（唔佔版面）同絕對定位嘅 ::after（唔撐高度）。
   唔做頁頂 leaderboard，唔做 sticky anchor。
   ================================================================ */

.ad-slot {
  position: relative;
  display: block;
  width: 100%;
  margin: 1.8rem auto;
  padding: 0;
  border: 0;
  overflow: hidden;
  contain: layout paint;
}

/* 手機（預設）—— 高度來自 ad-slots.json 嘅 mobile[1] */
.ad-slot[data-ad-slot="ad-article-1"]   { min-height: 250px; max-width: 300px; }
.ad-slot[data-ad-slot="ad-article-2"]   { min-height: 250px; }
.ad-slot[data-ad-slot="ad-article-end"] { min-height: 250px; max-width: 300px; }
.ad-slot[data-ad-slot="ad-hub-grid"]    { min-height: 600px; }

/* 桌面 —— 高度來自 ad-slots.json 嘅 desktop[1] */
@media (min-width: 48rem) {
  .ad-slot[data-ad-slot="ad-article-1"]   { min-height: 280px; max-width: 336px; }
  .ad-slot[data-ad-slot="ad-article-2"]   { min-height: 250px; }
  .ad-slot[data-ad-slot="ad-article-end"] { min-height: 280px; max-width: 336px; }
  .ad-slot[data-ad-slot="ad-hub-grid"]    { min-height: 600px; }
}

/* 本機開發時先睇得到嘅佔位框。
   outline 唔佔版面、::after 絕對定位，兩者都唔會改變容器高度。 */
.ad-slot.is-dev-placeholder {
  outline: 1px dashed var(--line-strong);
  outline-offset: -1px;
  border-radius: 6px;
}
.ad-slot.is-dev-placeholder::after {
  content: "廣告位 " attr(data-ad-slot) " · " attr(data-ad-format);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--fg-faint);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .ad-slot { transition: none; }
}

/* ================================================================
   麵包屑
   ================================================================ */

.breadcrumb {
  margin: 0 0 1.1rem;
  font-size: .85rem;
  color: var(--fg-faint);
  line-height: 1.6;
}
.breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 .1rem;
}
.breadcrumb li { margin: 0; max-width: none; }
.breadcrumb li + li::before {
  content: "›";
  margin: 0 .45rem;
  color: var(--line-strong);
}
.breadcrumb a { color: var(--fg-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--fg-faint); }

/* ================================================================
   未核實標記 —— 寧願留白，唔好作
   ================================================================ */

.needs-verify {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .82em;
  line-height: 1.5;
  background: repeating-linear-gradient(
    -45deg, var(--warn-bg), var(--warn-bg) 6px,
    transparent 6px, transparent 12px);
  border: 1px dashed var(--warn-line);
  border-radius: 4px;
  color: var(--warn-fg);
  padding: .05em .4em;
  margin: .1em 0;
  word-break: break-word;
}
.data-block.is-unverified { border-style: dashed; }
.freshness .unverified-note { color: var(--warn-fg); }

/* 二手來源標示。刻意用 muted 而唔係警告色 —— 佢答嘅係「呢啲數邊度嚟」，
   唔係「呢啲數有問題」。同 .stale-warning（琥珀）同 .volatile-banner（藍）
   分得開，三者答三條唔同嘅問題。 */
.freshness .source-note {
  display: block;
  color: var(--fg-muted);
  font-style: italic;
}

/* ================================================================
   Pillar 頁：cluster 連結清單
   ================================================================ */

.cluster-list {
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 2rem;
  border-top: 1px solid var(--line);
}
.cluster-list li {
  border-bottom: 1px solid var(--line);
  padding: .9rem 0;
  max-width: none;
}
.cluster-list a {
  font-weight: 700;
  font-size: 1.04rem;
  text-decoration: none;
  display: inline-block;
}
.cluster-list a:hover { text-decoration: underline; }
.cluster-list p {
  margin: .3rem 0 0;
  font-size: .91rem;
  color: var(--fg-muted);
  max-width: none;
}
.cluster-list .step {
  display: inline-block;
  min-width: 1.6em;
  font-variant-numeric: tabular-nums;
  color: var(--fg-faint);
  font-weight: 400;
}

/* 正文入面連去其他文章嘅內連，睇得出係內部導覽 */
.wrap a[href$=".html"]:not(.card):not(.brand) { text-underline-offset: .2em; }

/* ================================================================
   首頁副標題
   ================================================================ */

.site-subtitle {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--fg-muted);
  margin: -.3rem 0 .6rem;
  max-width: none;
}

/* ================================================================
   錨點目錄
   ================================================================ */

.toc {
  margin: 1.4rem 0 1.8rem;
  padding: .85rem 1rem .9rem;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.toc-title {
  margin: 0 0 .5rem;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--fg-faint);
  text-transform: uppercase;
  max-width: none;
}
.toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
  display: grid;
  grid-template-columns: 1fr;
  gap: .05rem .9rem;
}
@media (min-width: 34rem) {
  .toc ol { grid-template-columns: 1fr 1fr; }
}
.toc li {
  margin: 0;
  max-width: none;
  counter-increment: toc;
  font-size: .89rem;
  line-height: 1.55;
  padding: .12rem 0;
}
.toc li::before {
  content: counter(toc, decimal-leading-zero);
  display: inline-block;
  min-width: 1.9em;
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
  font-size: .8em;
}
.toc a { color: var(--fg-muted); text-decoration: none; }
.toc a:hover { color: var(--accent); text-decoration: underline; }

/* 由目錄跳落去嘅時候，標題唔好貼住 sticky header */
h2[id] { scroll-margin-top: 4.5rem; }

/* ================================================================
   強調型 callout（例如「先講最容易中招嗰條」）
   ================================================================ */

.callout-alert {
  background: var(--warn-bg);
  border-left-color: var(--warn-line);
  border-left-width: 4px;
  color: var(--warn-fg);
}
.callout-alert h2 {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
  font-size: 1.15rem;
  color: var(--warn-fg);
}
.callout-alert .data-block {
  background: var(--bg-raised);
  color: var(--fg);
  margin: .9rem 0 .8rem;
}
.callout-alert strong { color: inherit; }

/* ================================================================
   利益披露 callout
   用喺「本站作者係呢個 app 嘅開發者」呢類聲明。
   刻意同 .callout（灰）、.callout-alert（琥珀）都唔同：
   披露唔係警告，亦唔係補充說明，佢係一個身分聲明，
   所以要一眼睇得出係另一種東西，唔可以埋喺正文段落入面。
   ================================================================ */

.callout-disclosure {
  position: relative;
  background: var(--bg-raised);
  border: 2px solid var(--fg-muted);
  border-left-width: 6px;
  border-radius: var(--radius);
  padding: .95rem 1.1rem .85rem;
  margin: 1.8rem 0;
  box-shadow: var(--shadow);
}
.callout-disclosure > *:first-child { margin-top: 0; }
.callout-disclosure > *:last-child { margin-bottom: 0; }
.callout-disclosure p { max-width: none; }

.callout-disclosure .disclosure-label {
  display: inline-block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bg-raised);
  background: var(--fg-muted);
  border-radius: 3px;
  padding: .12rem .5rem .16rem;
  margin: 0 0 .55rem;
}
.callout-disclosure strong { color: var(--fg); }

/* ================================================================
   App 卡片
   刻意做得克制：三行，唔係產品頁。
   規則（同時寫喺 README）：唔列功能清單、唔寫版本號、唔寫評分、
   唔用宣傳語氣。佢嘅角色係「講到呢個環節順帶提」，
   所以視覺上要細過正文標題，唔可以搶戲。
   ================================================================ */

.app-card {
  margin: 1.2rem 0 1.6rem;
  padding: .85rem 1rem .9rem;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.app-card .app-name {
  margin: 0 0 .5rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  max-width: none;
}
.app-card dl {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .3rem .8rem;
  align-items: baseline;
}
.app-card dt {
  margin: 0;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--fg-faint);
  white-space: nowrap;
  padding-top: .12rem;
}
.app-card dd {
  margin: 0;
  font-size: .92rem;
  line-height: 1.65;
  color: var(--fg);
  max-width: none;
}
.app-card .freshness {
  margin: .6rem 0 0;
  padding-top: .45rem;
  font-size: .78rem;
}
@media (max-width: 26rem) {
  .app-card dl { grid-template-columns: 1fr; gap: .1rem; }
  .app-card dt { padding-top: .35rem; }
}

/* App 卡片嘅補充註腳（例如兩個平台上架名唔同）。
   刻意細過 dd，因為佢係澄清，唔係賣點。 */
.app-card .app-note {
  margin: .55rem 0 0;
  padding-top: .45rem;
  border-top: 1px dashed var(--line);
  font-size: .8rem;
  line-height: 1.6;
  color: var(--fg-muted);
  max-width: none;
}

/* 首頁副標題下面嘅「做法有咩唔同」段落。唔係口號，係三條規則嘅摘要，
   所以排版同正文一致，只係字重輕少少同上下留白清楚。 */
.site-difference {
  margin: 0.9rem 0 0;
  color: var(--fg);
  line-height: 1.75;
}