/* ─────────────────────────────────────────────────────────────
   官網首頁的版面。
   ─────────────────────────────────────────────────────────────

   🔴 尺寸、間距、圓角、字級一律抄自視覺 SSOT
   `reference/prototype/SIXTY_Landing.dc.html`，每一段都註明抄自哪一行。
   **不要憑印象調** —— 這個 repo 已經因為「只讀 markup 不跑畫面」做錯兩次。

   ⚠️ 設計稿只畫了淺色。深色是我們補的，色票不自己發明，
   一律走 base.css 的變數（來源是 app 的 v4 mature 深色分支）。
   補色的判斷寫在各段的 ⚠️ 註解裡，方便之後有人拿設計稿對照時知道差在哪。
   ───────────────────────────────────────────────────────────── */

/* ── 行高的陷阱 ────────────────────────────────────────────
   🔴 設計稿幾乎每一個小元素都用 `font:` 簡寫（例如 `font:500 13px 'Huninn'`）。
   CSS 的 font 簡寫**沒寫斜線就等於把 line-height 重設成 normal**，
   所以設計稿裡那些字的行高全部是 ~1.2，不是我們 body 的 1.75。

   照抄字級但忘了這件事，結果是每一顆按鈕、每一個標籤都高出好幾像素，
   一路累積到頁首比設計稿高 7px、hero 整段往下掉 24px —— 而每一條
   單獨看都「對」。所以這裡一次把它們拉回 normal。

   ⚠️ 內文（hero__sub 1.9、feature p 1.85、legal p 2 …）不在這張清單裡，
   那些設計稿有寫斜線，行高是刻意的。 */
.brand__word, .site-nav a, .seg button, .btn,
.hero__eyebrow, .hero__note,
.store-btn__top, .store-btn__name,
.feature h3, .section h2, .section-eyebrow,
.step__hint, .step__no, .step__title,
.plan__was, .plan__price, .plan__per, .plan__note,
.download h2, .download__note,
.site-footer__copy, .site-footer__links,
.legal h1, .legal h2, .legal__upd, .legal__back {
  line-height: normal;
}

/* 設計稿 L22：整頁 overflow:hidden，因為背景那兩球模糊光暈會溢出。
   ⚠️ 不要用在 body 上 —— 那會連垂直捲動一起關掉。只關水平。 */
.page {
  position: relative;
  /* hidden 是給舊瀏覽器的退路。clip 比較好 —— hidden 會製造一個捲動容器，
     連帶讓頁面裡的 position:sticky 失效；這一頁現在沒有 sticky，但之後會有。 */
  overflow-x: hidden;
  overflow-x: clip;
  min-height: 100vh;
}

/* 背景的兩球光暈。設計稿 L23–24 的絕對值：
   左上 520px #CE7D64 opacity .13 blur 90px、右上 560px #64A7CE opacity .11 blur 100px。
   ⚠️ 這兩個顏色是十二地支色票裡的「戌」與「亥」，不是隨手挑的裝飾色。 */
.glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.glow--warm {
  left: -160px; top: -120px;
  width: 520px; height: 520px;
  background: #CE7D64;
  opacity: .13;
  filter: blur(90px);
}

.glow--cool {
  right: -180px; top: 420px;
  width: 560px; height: 560px;
  background: #64A7CE;
  opacity: .11;
  filter: blur(100px);
}

/* ⚠️ 深色底下同樣的不透明度會糊成一片臟色 —— 深色的底本身已經有一層暖光
   （base.css 的 --bg-image），這兩球要收斂，只留一點方位感。 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .glow--warm { opacity: .10; }
  :root:not([data-theme='light']) .glow--cool { opacity: .08; }
}
:root[data-theme='dark'] .glow--warm { opacity: .10; }
:root[data-theme='dark'] .glow--cool { opacity: .08; }

.wrap { position: relative; z-index: 1; }

/* ── 頁首 ───────────────────────────────────────────────────
   設計稿 L28：padding:22px 0、flex-wrap、gap:14px。
   ⚠️ flex-wrap 不是保險絲，是設計稿的手機版做法 —— 實測 430px 寬時
   logo 留在第一行、導覽與按鈕掉到第二行。所以不要換成漢堡選單。 */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0;
  flex-wrap: wrap;
  gap: 14px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand svg { width: 34px; height: 34px; }

.brand__word {
  font-weight: 600;
  font-size: 19px;
  letter-spacing: .22em;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 26px);
  flex-wrap: wrap;
}

.site-nav__links,
.site-nav__ctrls {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 26px);
  flex-wrap: wrap;
}

.site-nav__ctrls { gap: 10px; }

.site-nav a {
  font-size: 13px;
  letter-spacing: .04em;
  text-decoration: none;
}

/* 手機：設計稿只有語言切換，一列裝得下；我們多了外觀切換，
   照原本的 flex-wrap 會被擠成三列，最後那顆 CTA 孤零零站一列。
   ⚠️ 不做漢堡選單 —— 這一頁只有三個錨點，藏起來比露出來難用。
   改成兩列：標誌與切換鈕一列（切換鈕靠右），連結與 CTA 一列。 */
@media (max-width: 660px) {
  .site-header {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    row-gap: 14px;
  }
  /* display:contents 讓 .site-nav 自己消失在版面裡，
     三個子項直接參與上面那個 grid。 */
  .site-nav { display: contents; }
  .brand { grid-column: 1; }
  .site-nav__ctrls { grid-column: 2; justify-self: end; }
  .site-nav__links { grid-column: 1; }
  .site-nav .btn--pill { grid-column: 2; justify-self: end; }
}

/* 設計稿 L16：a:hover 一律轉強調色。 */
.site-nav a:hover, .site-footer a:hover { color: var(--acc); }

/* 語言與外觀的切換。設計稿 L41–44 只有語言，外觀是我們加的
   —— 因為官網要跟 app 的 Appearance 一樣可以手動蓋過系統設定。
   兩顆長一樣，使用者不必學兩種控制項。 */
.seg {
  display: flex;
  border: 1px solid var(--line2);
  border-radius: 999px;
  overflow: hidden;
}

.seg button {
  padding: 6px 14px;
  font: inherit;
  font-weight: 500;
  font-size: 11px;
  background: none;
  color: var(--sub);
  border: none;
  cursor: pointer;
}

.seg button[aria-pressed='true'] {
  background: var(--btn-bg);
  color: var(--btn-fg);
}

/* 設計稿 L45：導覽列的下載鈕是圓角 999px，跟 hero 那兩顆商店鈕（14px）不同。 */
.btn--pill {
  border-radius: 999px;
  padding: 10px 22px;
  font-size: 13px;
}

/* ── Hero ──────────────────────────────────────────────────
   設計稿 L51：grid auto-fit minmax(min(100%,340px),1fr)。
   340px 這個斷點是重點 —— 視窗窄到放不下兩欄 340px 時自動變一欄，
   不用寫 media query，而且圓環會掉到文字下面（實測 430px 寬確認過）。 */
.hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(32px, 5vw, 60px);
  align-items: center;
  padding: clamp(36px, 6vw, 70px) 0 var(--section-y);
}

.hero__eyebrow {
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--sub);
  text-transform: uppercase;
}

.hero h1 {
  font-weight: 600;
  font-size: clamp(34px, 5.5vw, 54px);
  line-height: 1.2;
  letter-spacing: .02em;
  margin: 18px 0 0;
  text-wrap: pretty;
}

.hero__sub {
  font-size: 17px;
  line-height: 1.9;
  color: var(--sub);
  margin: 22px 0 0;
  max-width: 400px;
  text-wrap: pretty;
}

.hero__note {
  font-size: 11.5px;
  color: var(--faint);
  margin-top: 22px;
}

/* 商店按鈕。設計稿 L57：radius 14px、padding 12px 22px、icon 與字距 10px。 */
.stores {
  display: flex;
  gap: 12px;
  margin-top: 36px;
  flex-wrap: wrap;
}

/* 🔴 這一條不能刪。`hidden` 屬性是靠瀏覽器預設樣式表的
   `[hidden] { display: none }` 生效的，而上面那個 `display: flex`
   是作者端宣告，**會蓋過它** —— 沒有這一條，`hidden` 完全沒作用，
   而且讀 markup 看不出來（2026-08-12 就是這樣漏掉的，跑畫面才發現）。 */
.stores[hidden] { display: none; }

/* ── 官方商店 badge ─────────────────────────────────────────
   🔴 這裡**不可以**加 opacity、filter、border-radius、背景色或任何濾鏡。
   Apple 與 Google 的品牌規範都明文禁止修改 badge 本體。
   設計稿畫的是自製按鈕（radius 14px、padding 12px 22px、自家字體排
   「下載於 / App Store」）—— 那個好看，但不合規，2026-08-12 換掉。
   這是「視覺 follow 設計稿」的例外，理由是法務不是美感。

   可以動的只有外框尺寸：Google 的 PNG 自帶約 11% 留白（規範要求的
   clear space），Apple 的 SVG 是切齊的。所以兩者用同一個 height
   會看起來一大一小 —— Google 給 60px、Apple 給 50px 才視覺等高。 */
.badge {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.badge__img { display: none; }

/* 語言：site.js 的 applyLang 會把 html 的 lang 設成 en 或 zh-Hant。
   ⚠️ 預設露中文（`:not([lang="en"])`）而不是預設露英文 —— 沒有 JS 時
   `<html lang="zh-Hant">`，使用者要拿到中文那張。順序不可以倒過來。 */
html:not([lang="en"]) .badge__img[data-lang="zh"],
html[lang="en"] .badge__img[data-lang="en"] { display: block; }

/* 主題：Apple 的 badge 有黑白兩版（Google 只有一版，兩種主題共用）。
   黑底白字那版用在淺色背景，白底黑字那版用在深色背景。
   ⚠️ 這兩條要排在語言那條**後面**：特異性相同，靠順序決勝。
   檔名寫的是 Apple 自己的講法（black / white），哪一版配哪個主題
   只寫在這裡，改名不會把對應關係弄反。 */
html:not([data-theme="dark"]) .badge__img[data-variant="white"],
html[data-theme="dark"] .badge__img[data-variant="black"] { display: none; }

/* ── 兩顆等高 ───────────────────────────────────────────────
   🔴 給同一個 height 會**不等高**。官方素材的留白比例不一樣，量出來是：

     Apple  SVG    切齊，內容佔 100%
     Google 繁中   646×250 的畫布裡內容是 646×192 → 76.8%
     Google 英文   646×250 的畫布裡內容是 564×168 → 67.2%

   兩張 Google 的內容長寬比其實一樣（3.365 / 3.357）——同一個 badge，
   塞在不同大小的留白裡。那圈留白是 Google 規範要求的 clear space，
   **不可以用負 margin 吃掉**，吃掉就低於規範的最小淨空。
   所以做法是反過來算：先定「內容要多高」，再各自除以自己的佔比。

   內容目標高度 44px：
     Apple        44 / 1.000 = 44
     Google 繁中  44 / 0.768 = 57.3
     Google 英文  44 / 0.672 = 65.5

   ⚠️ 換素材就要重量一次。量法（PIL 的 alpha bbox）：
     Image.open(f).convert('RGBA').getchannel('A').getbbox() */
.badge__img { height: 44px; width: auto; }
.badge--play .badge__img[data-lang="zh"] { height: 57.3px; }
.badge--play .badge__img[data-lang="en"] { height: 65.5px; }

/* ── Hero 的圓環 ────────────────────────────────────────────
   設計稿 L69–77。兩層動畫：外層上下浮（ldFloat 7s）、
   內層只轉色弧（ldSpin 90s）—— 刻度與中心點**不轉**。
   🔴 順序不能倒：整個 svg 一起轉的話，60 格刻度會跟著轉，
   那就變成一個轉盤而不是一支指針在走。 */
.ring-float {
  animation: ldFloat 7s ease-in-out infinite;
  display: flex;
  justify-content: center;
}

.ring-float svg {
  width: min(380px, 82vw);
  height: auto;
}

.ring-arcs {
  animation: ldSpin 90s linear infinite;
  transform-box: view-box;
  transform-origin: 50% 50%;
}

@keyframes ldFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes ldSpin { to { transform: rotate(360deg); } }

/* 刻度與中心點的顏色跟著主題走（設計稿寫死 rgba(27,29,38,.3)）。 */
.ring-tick { stroke: var(--line2); stroke-width: 1; }
.ring-hub { fill: var(--text); }
.ring-caption {
  font-size: 10px;
  letter-spacing: .4em;
  fill: var(--faint);
}

/* ── 三張特色卡 ────────────────────────────────────────────
   設計稿 L82–89：minmax(min(100%,240px),1fr)、gap 22px、
   卡片 radius 22px、padding 30px 28px。 */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 22px;
  padding: 0 0 var(--section-y);
}

.feature {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 30px 28px;
}

/* 色點是十二地支色票裡的三個，用徑向漸層做出一點球感（設計稿 L85）。 */
.feature__dot {
  display: inline-block;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 36%, var(--c2), var(--c1));
}

.feature h3 {
  font-weight: 600;
  font-size: 18px;
  margin: 18px 0 0;
}

.feature p {
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--sub);
  margin: 10px 0 0;
  text-wrap: pretty;
}

/* ── 「它長什麼樣子」 ──────────────────────────────────────
   設計稿 L92–113。 */
.section-eyebrow {
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--sub);
  text-transform: uppercase;
}

.section h2 {
  font-weight: 600;
  font-size: clamp(24px, 3.6vw, 32px);
  margin: 14px 0 30px;
}

.section { padding: 0 0 var(--section-y); }

.step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 22px;
}

.step {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.step__frame {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 26px 26px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  overflow: hidden;
}

.step__hint {
  font-size: 10.5px;
  color: var(--faint);
  text-align: center;
}

/* 手機外框。設計稿 L100：210x330、上圓角 22px、無下框線、
   底色 #F4F2ED、陰影 0 12px 32px rgba(27,29,38,.12)。
   裡面塞的 393x852 app 縮 0.534 倍，所以只看得到最上面 618 個邏輯像素 ——
   我們的截圖已經照這個比例裁好（420x660，2x）。 */
.phone {
  width: 210px;
  height: 330px;
  border-radius: 22px 22px 0 0;
  border: 1px solid var(--line2);
  border-bottom: none;
  overflow: hidden;
  position: relative;
  background: #F4F2ED;
  flex: none;
  box-shadow: 0 12px 32px rgba(27, 29, 38, .12);
}

/* ⚠️ 深色底下 rgba 黑陰影完全看不見，改用一圈微光把外框從背景上撐起來。 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .phone {
    background: #12110E;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
  }
}
:root[data-theme='dark'] .phone {
  background: #12110E;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
}

.phone img {
  width: 100%;
  display: block;
}

.step__no {
  font-weight: 600;
  font-size: 13px;
  color: var(--faint);
}

.step__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.step__title { font-weight: 600; font-size: 17px; }

.step__body {
  font-size: 13px;
  line-height: 1.8;
  color: var(--sub);
  margin: 6px 0 0;
  text-wrap: pretty;
}

/* ── 價格 ───────────────────────────────────────────────────
   設計稿 L116：一整塊 #1B1D26、radius 28px。
   🔴 在淺色模式它是整頁唯一的反白區塊，那個對比就是它的功能 ——
   讀者捲到這裡會知道「換段落了」。

   ⚠️ 深色模式**不要照著反白成亮塊** —— 整片 #EFE9DC 在夜裡刺眼。
   改用 app v4 深色的 sheet 值（rgba(25,23,19,.94)）加一圈亮邊界，
   讓它比一般卡片更「浮」一階。理由是跟著 SSOT 走：v4 自己的付費牆
   在深色下也是深色 sheet，不是反白。 */
.price-panel {
  background: #1B1D26;
  color: #EAE8E3;
  border: 1px solid transparent;
  border-radius: 28px;
  padding: clamp(28px, 5vw, 60px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 40px);
  align-items: center;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .price-panel {
    background: var(--sheet);
    color: var(--text);
    border-color: var(--line2);
  }
}
:root[data-theme='dark'] .price-panel {
  background: var(--sheet);
  color: var(--text);
  border-color: var(--line2);
}

.price-panel h2 {
  font-weight: 600;
  font-size: clamp(23px, 3.4vw, 30px);
  line-height: 1.4;
  margin: 0;
  color: inherit;
  text-wrap: pretty;
}

.price-panel__copy { flex: 1 1 320px; }

.price-panel__sub {
  font-size: 14px;
  line-height: 1.9;
  color: rgba(234, 232, 227, .6);
  color: color-mix(in srgb, currentColor 60%, transparent);
  margin-top: 16px;
  max-width: 440px;
  text-wrap: pretty;
}

.price-plans {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 220px;
  max-width: 320px;
}

/* ⚠️ 用 color-mix 綁 currentColor，是為了讓這一塊在淺色（深底淺字）與
   深色（深底淺字但色階不同）兩種情況下都不必寫兩套值。
   前一行的 rgba 是不支援 color-mix 的瀏覽器的退路 —— 沒有它的話
   格子會完全沒有底色與邊框，價格就飄在面板上。 */
.plan {
  border-radius: 18px;
  padding: 18px 24px;
  background: rgba(234, 232, 227, .04);
  background: color-mix(in srgb, currentColor 4%, transparent);
  border: 1px solid rgba(234, 232, 227, .14);
  border-color: color-mix(in srgb, currentColor 14%, transparent);
}

/* 設計稿把年繳那一格做得比較亮 —— 那是預設選項的暗示，不是裝飾。 */
.plan--featured {
  background: rgba(234, 232, 227, .08);
  background: color-mix(in srgb, currentColor 8%, transparent);
  border-color: rgba(234, 232, 227, .25);
  border-color: color-mix(in srgb, currentColor 25%, transparent);
}

.plan__row {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
}

.plan__was {
  font-size: 13px;
  color: color-mix(in srgb, currentColor 40%, transparent);
  text-decoration: line-through;
}

.plan__price { font-weight: 600; font-size: 22px; }

.plan__per {
  font-weight: 400;
  font-size: 12px;
  color: color-mix(in srgb, currentColor 55%, transparent);
}

.plan__note {
  font-size: 11px;
  color: color-mix(in srgb, currentColor 50%, transparent);
  margin-top: 4px;
}

/* ── 下載 ───────────────────────────────────────────────────
   設計稿 L134：置中、gap 24px、下緣 clamp(60px,9vw,100px)。 */
.download {
  padding: 0 0 clamp(60px, 9vw, 100px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.download h2 {
  font-weight: 600;
  font-size: clamp(23px, 3.4vw, 30px);
  margin: 0;
  text-align: center;
  text-wrap: pretty;
}

.download .stores { margin-top: 0; justify-content: center; }

.download__note {
  font-size: 11.5px;
  color: var(--faint);
  text-align: center;
}

/* ── 頁尾 ───────────────────────────────────────────────────
   設計稿 L166 只有 © 與兩個法律連結。
   🔴 我們多了一條「字體授權」 —— jf open 粉圓是 SIL OFL 1.1，
   **網站散布也要附授權全文並讓人找得到**。這不是加料，是履行義務。 */
.site-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px 24px;
  flex-wrap: wrap;
  padding-top: 28px;
  padding-bottom: 44px;
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.site-footer__brand svg { width: 22px; height: 22px; }

.site-footer__copy {
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--sub);
}

.site-footer__links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 11px;
}

.site-footer__links a { color: var(--sub); text-decoration: none; }

/* 授權的細字。放在最下面一行，不跟法律連結擠在一起。 */
.site-footer__licence {
  flex-basis: 100%;
  font-size: 10.5px;
  line-height: 1.9;
  color: var(--faint);
  margin-top: 8px;
}

.site-footer__licence a { color: inherit; text-decoration: underline; }

/* ── 法律頁 ─────────────────────────────────────────────────
   設計稿 L152：max-width 720px、置中。 */
.legal {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 0 90px;
}

.legal h1 {
  font-weight: 600;
  font-size: clamp(28px, 5vw, 38px);
  margin: 14px 0 6px;
}

.legal__upd { font-size: 12px; color: var(--faint); }

.legal section { margin-top: 36px; }

.legal h2 { font-weight: 600; font-size: 19px; margin: 0; }

.legal p {
  font-size: 14px;
  line-height: 2;
  color: var(--sub);
  margin: 10px 0 0;
  text-wrap: pretty;
}

.legal__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 48px;
  font-weight: 500;
  font-size: 13px;
  border: 1px solid var(--line2);
  padding: 12px 26px;
  border-radius: 999px;
  text-decoration: none;
}

/* ── 法律頁的語言切換 ───────────────────────────────────────
   🔴 首頁靠 site.js 逐個換 `[data-i18n]` 的 textContent，那一招搬不動
   法律文件（有表格、清單、引言、連結）。所以兩份內文都在 DOM 裡，
   由 CSS 依 `html` 的 lang 決定露哪一份 —— site.js 的 applyLang
   本來就會改 doc.lang，所以 JS 一行都不用動。

   ⚠️ 預設藏英文而不是藏中文：沒有 JS 時 `<html lang="zh-Hant">`，
   使用者拿到的是完整的中文頁。順序不可以倒過來。 */
[data-lang-sec="en"] { display: none; }
html[lang="en"] [data-lang-sec="en"] { display: block; }
html[lang="en"] [data-lang-sec="zh"] { display: none; }

/* ── 法律頁的內文元素 ───────────────────────────────────────
   ⚠️ 以下這些（清單、表格、引言、連結）**設計稿的法律頁沒有** ——
   它的 `legalSecs` 每一節就是一個 h2 加一段 p。
   但真正的文件有結構：授權表是一張三欄表格、訂閱條件是清單、
   出生時間那段是引言。把它們壓成純段落會讓「哪個演奏版本要標示來源」
   這種**有法律後果的對照關係**消失，所以寧可多這幾條 CSS。
   字級與顏色仍然跟著 `.legal p` 走，不另外發明。 */
.legal__intro {
  font-size: 14px;
  line-height: 2;
  color: var(--sub);
  margin: 24px 0 0;
}

.legal ul, .legal ol {
  font-size: 14px;
  line-height: 2;
  color: var(--sub);
  margin: 10px 0 0;
  padding-left: 1.4em;
}

.legal li { margin-top: 4px; }

/* ⚠️ ol 的編號要留著、也要顯示成阿拉伯數字。
   隱私權政策第一節那兩項（購買訂閱／自己分享檔案）在第四、第五節被回頭
   指名引用，編號是內容的一部分，不是排版裝飾。 */
.legal ol { list-style: decimal; }

.legal a { color: inherit; }

/* 連結網址在窄螢幕會撐破版面（RevenueCat 那三條是完整網址）。 */
.legal li a { overflow-wrap: anywhere; }