@charset "utf-8";
@import url("site.css?v=43ec84801f");

/* ==========================================================================
   TripEZGo 首頁（2026-10 改版）
   token、標誌、頁首、頁尾在 chrome.css；這裡只有首頁自己的版面。
   設計稿：Open Design 專案 tripezgo 的 site-home-v2.html。
   App 截圖由 screens/ 的 HTML 複刻渲染（node tools/screens.mjs all），不是手動截圖。
   ========================================================================== */
:root {
  --ph-line: color-mix(in srgb, var(--accent) 38%, var(--border));
}
@media (prefers-color-scheme: dark) {
  :root { --ph-line: color-mix(in srgb, var(--accent) 30%, var(--border)); }
}

*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:88px; -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--page); color:var(--fg);
  font-family:var(--font-body); font-size:var(--text-base); line-height:var(--leading-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img, svg { max-width:100%; }
a { color:var(--accent-ink); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover { color:var(--fg); }
:focus-visible { outline:none; box-shadow:var(--focus-ring); border-radius:var(--radius-sm); }
.wrap { width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter); }
.skip-link {
  position:absolute; left:-9999px; top:0; background:var(--accent-ink); color:var(--accent-on);
  padding:10px 16px; border-radius:0 0 var(--radius-md) 0; z-index:100;
}
.skip-link:focus { left:0; }
.nb { white-space:nowrap; }

/* 線條 icon：一律 stroke、不填色 */
.i { width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8;
     stroke-linecap:round; stroke-linejoin:round; }


/* ─── 按鈕與排版（site.css）──────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:13px 26px; border-radius:var(--radius-pill);
  font-size:var(--text-base); font-weight:600; line-height:1.2;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition:transform .12s ease, background-color .12s ease, border-color .12s ease;
}
.btn-primary { background:var(--accent-ink); color:var(--accent-on); }
.btn-primary:hover { background:color-mix(in srgb, var(--accent-ink) 82%, var(--fg)); color:var(--accent-on); transform:translateY(-1px); }
.btn-ghost { background:transparent; color:var(--fg); border-color:var(--border); }
.btn-ghost:hover { border-color:var(--accent); color:var(--fg); background:var(--accent-wash); }
.eyebrow {
  font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent-ink); margin:0 0 14px;
}
h1, h2, h3 { letter-spacing:var(--tracking-display); line-height:var(--leading-tight); font-weight:700; }
h1 { font-size:clamp(32px, 5.4vw, var(--text-4xl)); margin:0 0 20px; }
h2 { font-size:clamp(26px, 3.6vw, var(--text-3xl)); margin:0 0 16px; }
h3 { font-size:var(--text-xl); margin:0 0 10px; font-weight:600; }
.lede { font-size:var(--text-lg); color:var(--muted); margin:0; max-width:34em; text-wrap:pretty; }
/* 留白收緊到原本的約 55–60% */
.section { padding:clamp(40px, 5.2vw, 68px) 0; }
.section-head { max-width:46ch; margin:0 0 clamp(24px, 3.6vw, 40px); }
.section-alt { background:var(--surface); border-block:1px solid var(--border-soft); }

/* ─── 標籤：Premium 實心 ───────────────────────────────────────── */
.tag {
  display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:var(--radius-pill);
  font-size:var(--text-xs); font-weight:600; letter-spacing:.02em; line-height:1; white-space:nowrap;
  vertical-align:middle;
}
.tag-premium { background:var(--accent-ink); color:var(--accent-on); }
/* 即將推出：同藍圖 .is-soon .rm-badge 的配色（accent-wash 底、accent-ink 字、accent 混 border 的框） */

/* ─── 截圖佔位：手機 720×1565 ───────────────────────────────────── */
.ph {
  --w:clamp(130px, 42vw, 232px); --r:30px;
  position:relative; flex:none; margin:0;
  width:var(--w); aspect-ratio:720 / 1565; border-radius:var(--r);
  background:var(--ph-bg); border:1.5px dashed var(--ph-line);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  padding:14px; text-align:center; color:var(--muted);
}
.ph .i { width:24px; height:24px; color:var(--accent); stroke-width:1.6; }
.ph figcaption { font-size:13px; line-height:1.5; font-weight:500; color:var(--fg); text-wrap:balance; }
.ph figcaption b { display:block; font-family:var(--font-mono); font-size:11px; font-weight:500;
                   letter-spacing:.06em; color:var(--muted); margin-bottom:2px; }
.ph .ph-size { position:absolute; bottom:12px; left:0; right:0; font-family:var(--font-mono);
               font-size:10px; letter-spacing:.06em; color:var(--muted); }
.ph-wide { --w:100%; --r:var(--radius-lg); aspect-ratio:668 / 472; max-width:520px; }

/* ─── Hero ───────────────────────────────────────────────────────── */
.hero { padding:clamp(32px, 5vw, 56px) 0 clamp(40px, 5.2vw, 68px); overflow:hidden; }
.hero .wrap { display:grid; gap:clamp(44px, 6vw, 56px); grid-template-columns:1fr; align-items:center; }
@media (min-width:900px) { .hero .wrap { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); } }
.hero h1 em { font-style:normal; color:var(--accent-ink); white-space:nowrap; }
.hero .lede { margin-bottom:32px; max-width:28em; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.hero-tags { list-style:none; margin:22px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.hero-tags li {
  display:inline-flex; align-items:center; gap:6px; padding:5px 12px 5px 9px;
  border:1px solid var(--border); border-radius:var(--radius-pill);
  font-size:var(--text-sm); color:var(--fg); line-height:1.3;
}
.hero-tags .i { width:16px; height:16px; color:var(--accent-ink); stroke-width:2; }

/* 三支手機：中間行事曆在前，兩側縮小、壓低、退到後面 */
.trio { --c:clamp(140px, 18vw, 224px); display:flex; justify-content:center; align-items:center; padding-bottom:8px; }
.trio .ph { --w:var(--c); --r:clamp(22px, 2.6vw, 32px); }
.trio .ph-main { z-index:2; box-shadow:var(--shadow-lg); background:color-mix(in srgb, var(--accent) 7%, var(--page)); }
.trio .ph-side {
  --w:calc(var(--c) * .78); z-index:1; transform:translateY(22px);
  box-shadow:var(--shadow-md); background:color-mix(in srgb, var(--accent) 4%, var(--surface));
}
.trio .ph-side:first-child { margin-inline-end:calc(var(--c) * -.2); }
.trio .ph-side:last-child { margin-inline-start:calc(var(--c) * -.2); }
.trio .ph-side figcaption { font-size:12px; padding-inline:4px; }
.trio .ph-side:first-child figcaption { padding-inline-end:calc(var(--c) * .2); }
.trio .ph-side:last-child figcaption { padding-inline-start:calc(var(--c) * .2); }

/* ─── 功能列（2–6 左右交錯）────────────────────────────────────── */
.feature { display:grid; gap:clamp(24px, 3.6vw, 48px); align-items:start; padding:clamp(24px, 3.6vw, 44px) 0; }
.feature:first-child { padding-top:0; }
.feature:last-child { padding-bottom:0; }
@media (min-width:880px) {
  .feature { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
  .feature.is-flipped .feature-media { order:-1; }
  /* 文字欄跟圖片頂端對齊、略微下移 */
  .feature > div:not(.feature-media) { padding-top:clamp(8px, 2vw, 28px); }
}
.feature + .feature { border-top:1px solid var(--border-soft); }
.feature .eyebrow { margin-bottom:12px; }
.soon-pill { display:inline-flex; align-items:center; margin-left:8px; padding:1px 9px; border-radius:var(--radius-pill); vertical-align:middle;
  font-size:var(--text-xs); font-weight:600; line-height:18px; letter-spacing:0; text-transform:none; white-space:nowrap;
  color:var(--accent-ink); background:var(--accent-wash); border:1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); }
.feature h3 { font-size:clamp(24px, 3vw, var(--text-2xl)); font-weight:700; margin-bottom:14px; }
.feature h3 em { font-style:normal; color:var(--accent-ink); display:block; }
.feature p { margin:0; color:var(--muted); max-width:34em; }
.points { list-style:none; margin:24px 0 0; padding:0; display:grid; gap:12px; }
.points li { display:flex; gap:12px; align-items:flex-start; font-size:15px; line-height:1.6; }
.points .i { margin-top:1px; color:var(--accent-ink); }
.points .tag { margin-inline-start:6px; }
.feature-media { display:flex; justify-content:center; }
.duo { display:flex; justify-content:center; align-items:flex-end; gap:clamp(12px, 2vw, 22px); position:relative; }
.duo .ph:last-child { margin-bottom:28px; }
.duo.is-even .ph:last-child { margin-bottom:0; }

/* 行事曆 ⇄ 時間軸 */
.modes { display:flex; flex-direction:column; align-items:center; gap:16px; }
.modes .duo { gap:clamp(24px, 3vw, 36px); }
.mode-label { display:flex; justify-content:center; gap:clamp(24px, 3vw, 36px); width:100%; }
.mode-label span { width:var(--w-lbl, clamp(130px, 42vw, 232px)); text-align:center; font-size:var(--text-sm); font-weight:600; }
.swap {
  position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:2;
  width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  background:var(--page); color:var(--accent-ink);
  border:1px solid var(--border); box-shadow:var(--shadow-md);
}
.swap .i { width:22px; height:22px; }

/* ─── 即時動態、Widget ─────────────────────────────────────────── */
.caps { display:grid; gap:14px; margin-top:28px; }
@media (min-width:560px) { .caps { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.cap {
  border:1px solid var(--border-soft); border-radius:var(--radius-md); background:var(--page);
  padding:16px 18px;
}
.cap-head { display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-weight:600; margin-bottom:4px; }
.cap-head .i { color:var(--accent-ink); }
.cap p { margin:0; font-size:var(--text-sm); color:var(--muted); line-height:1.6; }

/* ─── 小工具卡片 ─────────────────────────────────────────────────── */
.tools { display:grid; gap:clamp(12px, 2vw, 20px); grid-template-columns:repeat(2, minmax(0, 1fr)); }
@media (min-width:900px) { .tools { grid-template-columns:repeat(4, minmax(0, 1fr)); } }
.tool {
  background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius-lg);
  padding:clamp(14px, 2vw, 22px); display:flex; flex-direction:column;
}
.tool .ph { --w:min(100%, 132px); --r:18px; margin:0 auto 18px; padding:10px; gap:6px; }
.tool .ph figcaption { font-size:12px; }
.tool .ph .i { width:20px; height:20px; }
.tool h3, .tool h4 { font-size:var(--text-lg); margin:0 0 6px; display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; }
.tool p { margin:0; font-size:var(--text-sm); color:var(--muted); line-height:1.6; }

/* ─── AI Agent 橫幅 ────────────────────────────────────────────── */
.ai-band {
  display:grid; gap:clamp(28px, 4vw, 48px); align-items:center;
  background:var(--surface); border:1px solid var(--border-soft); border-radius:calc(var(--radius-lg) + 6px);
  padding:clamp(24px, 5vw, 56px);
}
/* 區塊在 surface 底上時，橫幅反過來用白底，才不會跟背景黏在一起 */
.section-alt .ai-band { background:var(--page); }
@media (min-width:880px) { .ai-band { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); } }
.ai-band p { margin:0; color:var(--muted); }
.chat {
  background:var(--page); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:18px; display:grid; gap:12px; box-shadow:var(--shadow-md);
}
.chat-top { display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11px;
            letter-spacing:.06em; color:var(--muted); padding-bottom:12px; border-bottom:1px solid var(--border-soft); }
.chat-top .i { width:16px; height:16px; color:var(--accent-ink); }
.bubble { max-width:86%; padding:10px 14px; border-radius:16px; font-size:15px; line-height:1.6; }
.bubble.me { justify-self:end; background:var(--accent-ink); color:var(--accent-on); border-bottom-right-radius:6px; }
.bubble.ai { justify-self:start; background:var(--sunken); color:var(--fg); border-bottom-left-radius:6px; }
.tool-call {
  justify-self:start; display:inline-flex; align-items:center; gap:8px;
  font-size:13px; color:var(--muted); padding:6px 12px 6px 10px;
  border:1px dashed var(--ph-line); border-radius:var(--radius-pill);
}
.tool-call .i { width:16px; height:16px; color:var(--accent-ink); }

/* ─── 隱私 ───────────────────────────────────────────────────────── */
.privacy-band .wrap { display:grid; gap:clamp(32px, 5vw, 64px); align-items:center; }
@media (min-width:880px) { .privacy-band .wrap { grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr); } }
.disclosure {
  margin:24px 0 0; padding-top:18px; border-top:1px solid var(--border-soft);
  font-size:13px; line-height:1.7; color:var(--muted); max-width:40em;
}
.more-link { display:inline-block; margin-top:18px; font-weight:600; }

/* ─── 方案對照表 ─────────────────────────────────────────────────── */
.plans-head { text-align:center; margin-inline:auto; }
.plans-head .lede { margin-inline:auto; }
.compare {
  width:100%; max-width:860px; margin:0 auto; border-collapse:separate; border-spacing:0;
  table-layout:fixed; font-size:15px;
}
.compare col.c-plan { width:22%; }
.compare col.c-prem { width:24%; }
@media (min-width:700px) { .compare col.c-plan, .compare col.c-prem { width:200px; } }
.compare th, .compare td {
  padding:14px clamp(8px, 2vw, 20px); border-bottom:1px solid var(--border-soft);
  text-align:center; vertical-align:middle; line-height:1.45; overflow-wrap:anywhere;
}
.compare thead th { font-size:var(--text-sm); font-weight:600; color:var(--muted); border-bottom:1px solid var(--border); padding-block:16px; }
.compare thead th.prem {
  background:var(--accent-ink); color:var(--accent-on); font-size:var(--text-base);
  border-radius:var(--radius-md) var(--radius-md) 0 0; border-bottom-color:var(--accent-ink);
}
.compare tbody th { text-align:start; font-weight:500; color:var(--fg); }
.compare td.prem { background:var(--accent-wash); font-weight:600; }
.compare tbody tr:last-child td.prem { border-radius:0 0 var(--radius-md) var(--radius-md); }
.compare .ok { width:22px; height:22px; color:var(--accent-ink); stroke-width:2; vertical-align:middle; }
.compare .no { color:var(--muted); opacity:.55; }
.compare small { display:block; font-size:12px; color:var(--muted); font-weight:400; word-break:keep-all; overflow-wrap:anywhere; }
.compare td { text-wrap:balance; }
.compare tr.split th, .compare tr.split td { border-bottom-color:var(--border); }
@media (max-width:520px) {
  .compare { font-size:14px; }
  .compare th, .compare td { padding:12px 6px; }
  .compare tbody th { padding-inline-start:2px; }
}
.plans-note { max-width:860px; margin:18px auto 0; font-size:13px; color:var(--muted); text-align:center; }
.plans-cta { justify-content:center; margin-top:clamp(28px, 4vw, 40px); }

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  * { animation:none !important; transition:none !important; }
}

/* ─── App 截圖：佔位框換成圖。外框只畫圓角與一圈細線，白底畫面在白頁上才分得出邊 ─── */
.ph.shot { background:var(--page); border:0; padding:0; overflow:hidden; display:block;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--fg) 12%, transparent), var(--shadow-md); }
.ph.shot img { display:block; width:100%; height:100%; object-fit:cover; }
.trio .ph-main.shot { box-shadow:0 0 0 1px color-mix(in srgb, var(--fg) 12%, transparent), var(--shadow-lg); }
.ph-wide.shot { box-shadow:none; background:none; overflow:visible; aspect-ratio:auto; }

/* ─── 隱私示意：HTML 排版（取代原本的 privacy.webp，深淺色跟著 token 走）─── */
.vault { width:100%; max-width:520px; margin-inline:auto; }
.vault-card { background:var(--page); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md); overflow:hidden; }
.vault-head { display:flex; align-items:center; gap:10px; padding:20px 22px 0; }
.vault-head .i { width:24px; height:24px; color:var(--fg); stroke-width:1.7; }
.vault-head b { font-size:var(--text-lg); font-weight:700; }
.vault-head span, .vault-row span { margin-inline-start:auto; font-size:var(--text-sm); color:var(--muted); text-align:end; }
.vault-chips { list-style:none; margin:0; padding:16px 22px 22px; display:flex; flex-wrap:wrap; gap:10px; }
.vault-chips li { padding:6px 16px; border:1px solid var(--border); border-radius:var(--radius-pill);
  font-size:15px; line-height:1.5; background:var(--page); }
.vault-row { display:flex; align-items:center; gap:10px; padding:14px 22px; background:var(--surface);
  border-top:1px solid var(--border-soft); }
.vault-row .i { width:20px; height:20px; color:var(--accent-ink); stroke-width:1.9; }
.vault-row b { color:var(--accent-ink); font-weight:700; font-size:15px; white-space:nowrap; }
.vault-note { margin:18px 0 0; text-align:center; font-size:var(--text-sm); color:var(--muted); }
@media (max-width:420px) {
  .vault-row { flex-wrap:wrap; row-gap:2px; }
  .vault-row span { margin-inline-start:30px; text-align:start; width:100%; }
}

/* 地圖段三張：每日路線、附近超商、導航中——中間那張墊高。寬度照容器三等分，不靠 vw 估 */
.duo.is-three { --gap:clamp(10px, 1.6vw, 18px); gap:var(--gap); width:100%; max-width:486px; }
.duo.is-three .ph { --w:calc((100% - 2 * var(--gap)) / 3); --r:clamp(14px, 2vw, 24px); margin-bottom:0; }
.duo.is-three .ph:nth-child(2) { margin-bottom:28px; }

/* 兩張並排：寬度照容器二等分（上限 232），雙欄剛成立的 880–1000px 才不會擠出欄外 */
.duo { --gap:clamp(12px, 2vw, 22px); gap:var(--gap); width:100%; max-width:486px; }
.duo:not(.is-three) .ph { --w:min(232px, calc((100% - var(--gap)) / 2)); }
.modes { width:100%; max-width:486px; margin-inline:auto; }
.modes .duo { --gap:clamp(24px, 3vw, 36px); }
.mode-label { --gap:clamp(24px, 3vw, 36px); }
.mode-label span { width:min(232px, calc((100% - var(--gap)) / 2)); }

/* 英日文字串比較長：格子不准被內容撐寬，隱私卡片那一列的粗體可以換行 */
.privacy-band .wrap { grid-template-columns:minmax(0, 1fr); }
@media (min-width:880px) { .privacy-band .wrap { grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr); } }
.vault-row b { white-space:normal; }
.vault-row span { flex:none; }
@media (max-width:520px) { .vault-row { flex-wrap:wrap; row-gap:2px; } .vault-row span { margin-inline-start:30px; text-align:start; width:100%; flex:auto; } }

/* 窄螢幕：不換行的片段（.nb）放開，格子一律 minmax(0, 1fr)，長的英日文字串才不會把頁面撐寬 */
.hero .wrap, .feature, .ai-band { grid-template-columns:minmax(0, 1fr); }
@media (min-width:880px) { .feature, .ai-band { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width:900px) { .hero .wrap { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width:560px) { .nb { white-space:normal; } }

/* ─── 展開介紹：每段一個，預設收合，內容是使用者手稿的原文 ─────────── */
.more { margin-top:18px; max-width:38em; }
.more > summary {
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; list-style:none;
  font-size:var(--text-sm); font-weight:600; color:var(--accent-ink);
}
.more > summary::-webkit-details-marker { display:none; }
.more > summary::after {
  content:""; width:7px; height:7px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg); transition:transform .15s ease;
}
.more[open] > summary::after { transform:translateY(1px) rotate(225deg); }
.more[open] > summary { margin-bottom:10px; }
.more-body { border-inline-start:2px solid var(--border-soft); padding-inline-start:16px; color:var(--muted);
  font-size:15px; line-height:1.75; }
.more-body p, .feature .more-body p { margin:0 0 10px; color:var(--muted); max-width:none; }
.more-body ul { margin:0 0 10px; padding-inline-start:1.2em; }
.more-body li { margin-bottom:4px; }
.more-body b { color:var(--fg); font-weight:600; }
.section-head + .tools + .more, .tools + .more { margin-top:24px; }
.plans-more { max-width:860px; margin:18px auto 0; display:flex; justify-content:center; }
.plans-more .more { text-align:start; }

/* ─── 開發背景故事：整段一個 details，預設收合 ─────────────────────── */
.story { border:1px solid var(--border-soft); border-radius:var(--radius-lg); background:var(--surface); }
.story > summary { list-style:none; cursor:pointer; padding:clamp(20px, 3vw, 32px); display:grid; gap:6px; }
.story > summary::-webkit-details-marker { display:none; }
.story .eyebrow { margin:0; }
.story-title { font-size:clamp(20px, 2.6vw, 26px); font-weight:700; line-height:1.3; letter-spacing:var(--tracking-display); }
.story-toggle { font-size:var(--text-sm); font-weight:600; color:var(--accent-ink); }
.story[open] .story-toggle { display:none; }
.story-body { padding:0 clamp(20px, 3vw, 32px) clamp(24px, 3vw, 36px); color:var(--muted); }   /* 內部寬度 100%（使用者 2026-10-12） */
.story-body h3 { color:var(--fg); margin:28px 0 10px; font-size:var(--text-lg); }
.story-body p { margin:0 0 14px; }
.story-body b { color:var(--fg); }
.story-fig { margin:8px 0 16px; max-width:760px; }   /* 故事改滿寬後，截圖還是維持原本的大小，不然直式那張會比一個螢幕還高 */
.story-fig img { width:100%; height:auto; border-radius:var(--radius-md); border:1px solid var(--border-soft); }

/* ─── 這一輪新增、還沒有真實截圖的版位：虛線框＋「新」標記 ─────────── */
.ph.is-new { border-color:var(--warn); }
.ph.is-new::before { content:"新版位"; position:absolute; top:10px; left:50%; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; color:var(--warn); }

/* 整合區三張卡 */
@media (min-width:700px) { .tools.is-three { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
.tool h3 .tag, .tool h4 .tag { margin-inline-start:2px; }

/* ══════════ 互動示意（assets/js/home.js）══════════ */
.demo-card { background:var(--page); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); padding:18px; }
.btn-mini { display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:6px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--border); background:var(--page); color:var(--fg); font:inherit; font-size:var(--text-sm); font-weight:600; cursor:pointer; }
.btn-mini:hover { border-color:var(--accent); background:var(--accent-wash); }

/* 隱私＋離線 */
.demo-net { display:flex; align-items:center; gap:10px; padding:12px 22px 0; font-size:var(--text-sm); color:var(--muted); }
.switch { margin-inline-start:auto; width:46px; height:28px; border-radius:14px; border:0; padding:0; cursor:pointer;
  background:var(--border); position:relative; transition:background .2s; }
.switch i { position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform .2s; }
.switch[aria-checked="true"] { background:var(--success); }
.switch[aria-checked="true"] i { transform:translateX(18px); }
.badge-off { color:var(--warn) !important; font-weight:600; }
.vault-chips .add { padding:0; border:0; }
.demo-add { display:inline-flex; align-items:center; gap:4px; padding:6px 14px; border:1px dashed var(--accent);
  border-radius:var(--radius-pill); background:var(--accent-wash); color:var(--accent-ink); font:inherit; font-size:15px; cursor:pointer; }
.demo-add .i { width:16px; height:16px; }
.vault-chips .is-added { border-color:var(--accent); color:var(--accent-ink); }
.vault-chips .is-pop { animation:pop .35s ease; }
@keyframes pop { from { transform:scale(.7); opacity:0; } to { transform:none; opacity:1; } }
.sync.is-ok { color:var(--success) !important; }
.sync.is-wait { color:var(--warn) !important; }
.sync.is-syncing { color:var(--accent-ink) !important; }
.is-offline .vault-row:first-of-type .i { color:var(--warn); }

/* 班次備案 */
.demo[data-demo="runs"] { width:min(100%, 300px); flex:none; }
.runs-card { display:grid; gap:12px; font-size:var(--text-sm); }
.runs-ends { display:grid; grid-template-columns:14px 1fr; column-gap:10px; align-items:center; }
.runs-ends b { font-size:15px; }
.runs-ends small { grid-column:2; color:var(--muted); }
.runs-ends .dot { width:12px; height:12px; border-radius:50%; background:var(--fg); }
.runs-ends .dot.is-end { background:var(--page); border:2.5px solid var(--fg); }
.runs-walk { margin:0 0 0 24px; color:var(--muted); font-size:13px; }
.runs-chips { display:flex; gap:8px; margin-left:24px; flex-wrap:wrap; }
.run { display:grid; gap:0; padding:6px 10px; border-radius:12px; border:1px solid var(--border); background:var(--surface);
  font:inherit; text-align:start; cursor:pointer; color:var(--fg); min-width:76px; }
.run b { font-size:15px; font-variant-numeric:tabular-nums; }
.run small { font-size:11px; color:var(--muted); white-space:nowrap; }
.run.on { background:var(--fg); border-color:var(--fg); color:var(--page); }
.run.on small { color:color-mix(in srgb, var(--page) 70%, var(--fg)); }
.run.gone { opacity:.45; text-decoration:line-through; cursor:default; }
.runs-pick, .runs-warn { margin-left:24px; display:flex; gap:10px; align-items:flex-start; padding:10px 12px;
  border-radius:12px; background:var(--accent-wash); }
.runs-pick .i, .runs-warn .i { flex:none; color:var(--accent-ink); }
.runs-pick div { display:grid; } .runs-pick span { color:var(--muted); font-variant-numeric:tabular-nums; }
.runs-warn { background:color-mix(in srgb, var(--danger) 10%, var(--page)); color:var(--fg); line-height:1.6; }
.runs-warn .i { color:var(--danger); }
.runs-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-left:24px; }
.runs-note { color:var(--success); font-weight:600; }

/* 即時動態：鎖定畫面 */
.glance-media { display:grid; gap:18px; width:100%; max-width:520px; margin-inline:auto; }
@media (min-width:560px) { .glance-media { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); align-items:start; } }
.glance-side { display:grid; gap:14px; }
.lock { border-radius:32px; padding:22px 14px 16px; color:#fff; min-height:420px; display:flex; flex-direction:column; gap:14px;
  background:linear-gradient(170deg, #5aa7c9 0%, #3f8fb3 38%, #2d6e8f 62%, #1f4f68 100%); box-shadow:var(--shadow-lg); }
.lock-clock { text-align:center; }
.lock-clock small { display:block; font-size:13px; opacity:.85; }
.lock-time { font-size:64px; font-weight:600; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.la { margin-top:auto; border-radius:22px; padding:12px 14px; background:rgba(20,20,22,.72); backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px); display:grid; gap:6px; font-size:13px; }
.la-top { display:flex; justify-content:space-between; opacity:.75; font-size:11px; }
.la-app { display:inline-flex; align-items:center; gap:6px; }
.la-mark { width:16px; height:16px; border-radius:5px; flex:none; background:url(/assets/img/icon-180.png) center / cover; }
.la-main { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.la-main b { font-size:17px; line-height:1.3; }
.la-left { font-variant-numeric:tabular-nums; white-space:nowrap; color:#7ad7d4; font-weight:600; }
.la-bar { height:5px; border-radius:3px; background:rgba(255,255,255,.18); overflow:hidden; }
.la-bar i { display:block; height:100%; background:#5cc6c3; border-radius:3px; transition:width .15s; }
.la-bar.is-leg i { background:#e9a535; }
.la-sub { display:flex; justify-content:space-between; gap:10px; opacity:.8; font-size:12px; }
.lock-scrub { display:grid; gap:4px; font-size:12px; text-align:center; opacity:.95; }
.lock-scrub input { width:100%; accent-color:#5cc6c3; }

/* Widget */
.home-screen { display:grid; gap:12px; }
.wg { border-radius:22px; padding:14px 16px; background:var(--page); border:1px solid var(--border); box-shadow:var(--shadow-md); font-size:13px; }
.wg-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.wg-head b { font-size:15px; }
.wg-head small { margin-inline-start:auto; color:var(--muted); font-variant-numeric:tabular-nums; }
.wg-head .i { width:18px; height:18px; color:var(--accent-ink); }
.wg-list, .wg-todos { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.wg-list li { display:grid; grid-template-columns:44px 1fr; gap:8px; color:var(--muted); }
.wg-list .t { font-variant-numeric:tabular-nums; }
.wg-list .n { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.wg-list .is-now { color:var(--fg); font-weight:600; }
.wg-todos button { display:flex; gap:10px; align-items:flex-start; width:100%; padding:2px 0; background:none; border:0;
  font:inherit; color:var(--fg); text-align:start; cursor:pointer; line-height:1.45; }
.wg-todos .box { flex:none; width:20px; height:20px; border-radius:50%; border:1.5px solid var(--border); display:grid; place-items:center; margin-top:1px; }
.wg-todos .box .i { width:13px; height:13px; opacity:0; color:#fff; stroke-width:3; }
.wg-todos .on .box { background:var(--success); border-color:var(--success); }
.wg-todos .on .box .i { opacity:1; }
.wg-todos .on .txt { color:var(--muted); text-decoration:line-through; }
.wg-owner { margin:8px 0 0; color:var(--muted); font-size:12px; }

/* 推播 */
.notifs { display:grid; gap:8px; }
.notif { display:grid; grid-template-columns:22px 1fr auto; gap:10px; align-items:start; padding:10px 12px; border-radius:18px;
  background:color-mix(in srgb, var(--surface) 80%, var(--border)); font-size:13px; line-height:1.45; }
.notif .la-mark { width:22px; height:22px; border-radius:6px; }
.notif b { display:block; font-size:13px; }
.notif p { margin:0; color:var(--muted); }
.notif small { color:var(--muted); font-size:11px; white-space:nowrap; }

/* 整合區的小插畫 */
.art { width:100%; aspect-ratio:4 / 3; margin:0 0 18px; border-radius:16px; background:var(--page); border:1px solid var(--border-soft);
  padding:14px; display:flex; flex-direction:column; gap:10px; font-size:12px; overflow:hidden; }
.art ul { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.art li { display:grid; grid-template-columns:40px 1fr; gap:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.art li span { color:var(--muted); font-variant-numeric:tabular-nums; }
.art-sheet-head { display:flex; gap:10px; align-items:center; padding-bottom:10px; border-bottom:1px solid var(--border-soft); }
.art-sheet-head div { display:grid; } .art-sheet-head small { color:var(--muted); }
.art-thumb { width:36px; height:36px; border-radius:8px; background:linear-gradient(135deg, #9fd3c7, #5aa7c9); flex:none; }
.art-apps { display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; margin-top:auto; }
.art-apps span { display:grid; justify-items:center; gap:4px; font-size:10px; color:var(--muted); }
.art-apps i, .art-apps img { width:40px; height:40px; border-radius:10px; display:block; }
.art-apps .c1 { background:#7fc98b; } .art-apps .c2 { background:#7aa9e0; } .art-apps .c3 { background:#efd27a; }
.art-apps .is-pick { color:var(--accent-ink); font-weight:700; }
.art-apps .is-pick img { box-shadow:0 0 0 2.5px var(--page), 0 0 0 4.5px var(--accent); }
.art-cal-head { display:flex; justify-content:space-between; align-items:baseline; }
.art-cal li { padding:5px 8px; border-radius:6px; background:color-mix(in srgb, var(--accent) 12%, var(--page)); border-inline-start:3px solid var(--accent); }
.art-url { font-family:var(--font-mono); font-size:10px; color:var(--muted); padding:5px 10px; border-radius:var(--radius-pill); background:var(--surface); }
.art-web b { font-size:13px; line-height:1.35; }
@media (prefers-reduced-motion:reduce) { .vault-chips .is-pop { animation:none; } }
/* 截圖旁邊放互動卡：窄螢幕換到下一行，卡片吃滿寬度 */
.duo:has(.demo) { flex-wrap:wrap; align-items:flex-start; }
.demo[data-demo="runs"] { flex:1 1 260px; width:auto; max-width:320px; min-width:0; }
.duo:has(.demo) .ph:last-child { margin-bottom:0; }

/* ─── 截圖 ⇄ 動手試試 ─────────────────────────────────────────────── */
.media-switch { display:flex; flex-direction:column; align-items:center; gap:14px; width:100%; }
.ms-shot, .ms-demo { width:100%; display:flex; justify-content:center; }
.ms-shot[hidden], .ms-demo[hidden] { display:none; }
.ms-tabs { display:inline-flex; padding:3px; gap:2px; border-radius:var(--radius-pill); background:var(--sunken); border:1px solid var(--border-soft); }
.ms-tabs button { display:inline-flex; align-items:center; gap:6px; border:0; background:none; font:inherit; font-size:13px; font-weight:600;
  color:var(--muted); padding:6px 14px; border-radius:var(--radius-pill); cursor:pointer; min-height:32px; }
.ms-tabs button[aria-selected="true"] { background:var(--page); color:var(--fg); box-shadow:var(--shadow-sm); }
.ms-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.ms-loading { width:40px; height:40px; margin:60px auto; border-radius:50%; border:3px solid var(--border); border-top-color:var(--accent); animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.tool .media-switch { gap:10px; margin-bottom:18px; }
.tool .media-switch .ph, .tool .media-switch .art { margin-bottom:0; }
.tool .ms-tabs button { padding:5px 10px; font-size:12px; }
.ai-band .media-switch { align-items:stretch; }
/* 包進切換元件後，原本 .feature-media 上的排版要搬到 .ms-shot 上 */
.modes .ms-shot { flex-direction:column; align-items:center; gap:16px; }
.ms-shot > .duo, .ms-shot > .modes, .ms-shot > figure { margin-inline:auto; }
.ms-shot > .duo { width:100%; }

/* ─── 互動小元件放文字欄（取代切換）─────────────────────────────── */
.demo-slot { margin-top:24px; max-width:486px; }
.demo-slot:empty { min-height:1px; } /* 不能 display:none：IntersectionObserver 看不到就永遠不載入 */
.demo-slot .demo[data-demo="runs"] { max-width:none; width:100%; }
.tool .demo-slot { margin-top:14px; max-width:none; }
.ai-band .demo-slot { margin-top:0; max-width:none; }
.glance-demos { display:grid; gap:14px; max-width:none; }
@media (min-width:1100px) { .glance-demos { grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr); align-items:start; } }
.glance-demos .lock { min-height:360px; }

/* 整合三張卡：手機一欄（卡片裡有互動元件，兩欄只剩 100px 寬） */
@media (max-width:699px) { .tools.is-three { grid-template-columns:minmax(0, 1fr); } }

/* ─── iPhone 外框：圖（預覽）→ 捲到附近換成可操作的 HTML 畫面 ─────────── */
.ph.shot.phone { position:relative; overflow:hidden; background:#000;
  box-shadow:0 0 0 calc(var(--w) * .022) #1b1b1d, 0 0 0 calc(var(--w) * .028) #3a3a3d, var(--shadow-lg); }
.ph.shot.phone > img { position:absolute; inset:0; transition:opacity .25s; }
.ph.shot.phone > iframe { position:absolute; top:0; left:0; width:402px; height:874px; border:0; transform-origin:0 0;
  opacity:0; transition:opacity .25s; background:#fff; }
.ph.shot.phone.is-live > iframe { opacity:1; }
.ph.shot.phone.is-live > img { opacity:0; }
/* 整合卡片裡的手機 */
.tool > .ph:not(.shot), .tool > .ph.shot { --w:min(100%, 200px); margin:0 auto 18px; }
/* 小工具／整合卡片裡的手機：卡片多寬就多寬（上限 220），手機兩欄時也撐得住 */
.tool > .ph.shot, .tool > .ph:not(.shot) { --w:min(100%, 220px); --r:clamp(16px, 4vw, 26px); margin:0 auto 18px; }

/* ═══ 統一的 iPhone 外框（所有手機同一款，照比例縮放）═══════════════
   機身：螢幕外一圈黑色邊框（寬度＝螢幕寬的 3.2%）＋鈦金屬外緣；圓角照 iPhone 17 Pro 螢幕比例；左右側鍵。 */
.ph.shot.phone {
  --bz:calc(var(--wpx, 260px) * .032);
  border-radius:calc(var(--wpx, 260px) * .148);
  overflow:visible; background:#000;
  box-shadow:
    0 0 0 var(--bz) #0b0b0c,
    0 0 0 calc(var(--bz) + 1.2px) #8e8e93,
    0 0 0 calc(var(--bz) + 2.4px) #3a3a3c,
    var(--shadow-lg);
  margin:calc(var(--bz) + 3px);
}
.ph.shot.phone > img, .ph.shot.phone > iframe { border-radius:inherit; }
.ph.shot.phone > iframe { clip-path:inset(0 round 59px); }   /* iframe 座標（402 寬）裡的 .148 × 402 */
.ph.shot.phone::before, .ph.shot.phone::after { content:""; position:absolute; width:calc(var(--bz) * .9);
  background:linear-gradient(90deg, #2c2c2e, #6e6e73); border-radius:2px; pointer-events:none; }
.ph.shot.phone::before { left:calc(-1 * var(--bz) - 2.4px - var(--bz) * .8); top:22%; height:12%; }   /* 音量鍵 */
.ph.shot.phone::after  { right:calc(-1 * var(--bz) - 2.4px - var(--bz) * .8); top:26%; height:16%; }  /* 側邊按鈕 */
.ph.shot.phone > img { overflow:hidden; }

/* 自動示範的進度：就是螢幕底部那條 Home 指示條本身，黑色往右填，不用主題色（使用者 2026-10-12）。
   跟畫面裡的 .home 同一個位置大小（141×5、離底 8，402 寬），照手機寬等比縮放；有示範的畫面把原生那條藏掉（autoplay.js） */
.auto-prog { position:absolute; z-index:5; left:50%; bottom:calc(var(--wpx, 260px) * 8 / 402); width:calc(var(--wpx, 260px) * 141 / 402);
  height:calc(var(--wpx, 260px) * 5 / 402); min-height:3px; transform:translateX(-50%); border-radius:99px; overflow:hidden; pointer-events:none;
  background:rgba(0,0,0,.18); }
.auto-prog > i { display:block; height:100%; width:0; border-radius:inherit; background:#000; }   /* 寬度動畫由 home.js 依每一步的時間設 */
/* 鎖定畫面的「時間」拉桿：搬到手機外面、手機底下（使用者 2026-10-12），拖它就撥畫面裡的時間 */
.ph.shot.phone.has-ext { margin-bottom:calc(var(--bz) + 64px); }
.lk-ext { position:absolute; left:8%; right:8%; top:calc(100% + var(--bz) + 14px); display:grid; gap:8px; touch-action:none; cursor:pointer;
  user-select:none; -webkit-user-select:none; outline:none; }
.lk-ext-t { text-align:center; font-size:var(--text-sm, 14px); font-weight:600; font-variant-numeric:tabular-nums; color:var(--text); }
.lk-ext-track { position:relative; height:6px; border-radius:3px; background:color-mix(in srgb, var(--accent) 18%, transparent); }
.lk-ext-fill { position:absolute; left:0; top:0; bottom:0; border-radius:3px; background:var(--accent); }
.lk-ext-thumb { position:absolute; top:50%; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 3px var(--page, #fff), 0 1px 4px rgba(0,0,0,.25); transition:transform .15s; }
.lk-ext.active .lk-ext-thumb { transform:scale(1.25); }
.lk-ext:focus-visible .lk-ext-track { box-shadow:0 0 0 2px var(--accent); }
/* 地圖畫面載入中：預覽圖上蓋一個轉圈，MapKit 取完景才換成真的地圖 */
.ph-loading { position:absolute; z-index:3; left:50%; top:50%; width:36px; height:36px; margin:-18px 0 0 -18px; border-radius:50%;
  border:3px solid rgba(255,255,255,.55); border-top-color:var(--accent); background:rgba(255,255,255,.35);
  box-shadow:0 2px 10px rgba(0,0,0,.15); animation:spin .8s linear infinite; pointer-events:none; transition:opacity .25s; }
.ph.shot.phone.is-live > .ph-loading { opacity:0; animation:none; }
.play-phone .auto-prog, .play-phone .ph-loading { display:none; }
/* 點手機畫面就全螢幕：一層透明的按鈕蓋在畫面上 */
.phone-hit { position:absolute; inset:0; z-index:4; border:0; padding:0; background:transparent; border-radius:inherit; cursor:zoom-in; }
.phone-hit:focus-visible { box-shadow:0 0 0 3px var(--accent); }

/* ═══ 手機放大：裡面的字跟著手機縮放，手機太小字就讀不到（使用者 2026-10-11）═══ */
.feature-media > .ph.shot { --w:clamp(220px, 27vw, 320px); }
.feature-media .duo { --gap:clamp(16px, 2.4vw, 32px); max-width:620px; }
.feature-media .duo:not(.is-three) .ph { --w:min(290px, calc((100% - var(--gap)) / 2)); }
/* 三支手機總寬約 2.3 × --c（中間 1、兩側各 .78、各疊進去 .2，再加外框）：--c 照這一欄自己的寬度算，不照視窗算，
   不然桌機會蓋到左邊的標題、右邊那支被切出畫面（2026-10-12） */
.trio { container-type:inline-size; }
.trio > * { --c:min(280px, 36cqi); }
@media (min-width:880px) { .feature { grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); } }
/* 小工具：每列兩張，手機才夠大；整合三張維持一列三張 */
@media (min-width:560px) { .tools:not(.is-three) { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (min-width:900px) { .tools:not(.is-three) { grid-template-columns:repeat(4, minmax(0, 1fr)); } }   /* 小工具一行四張（使用者 2026-10-12） */
.tool > .ph.shot { --w:min(100%, 280px); }
.tools:not(.is-three) .tool { display:grid; grid-template-columns:minmax(0, 1fr); }

/* 全螢幕試玩 */
.play-dlg { border:0; padding:0; max-width:none; max-height:none; width:100vw; height:100dvh; background:transparent; }
.play-dlg::backdrop { background:color-mix(in srgb, #000 72%, transparent); backdrop-filter:blur(6px); }
.play-wrap { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; position:relative; }
.play-phone { margin:0; }
.play-phone .phone-hit { display:none; }
.play-phone > iframe { opacity:1 !important; }
.play-hint { margin:0; color:#fff; font-size:14px; opacity:.85; text-align:center; padding:0 16px; }
.play-x { position:absolute; top:16px; right:16px; width:44px; height:44px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.16); color:#fff; display:grid; place-items:center; }
.play-x svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }

/* ─── 隱私：資料流向圖（版面由 OpenDesign 設計，2026-10-12 改橫向；類別一律 pf- 開頭，避開首頁的 .switch）── */
.flow { width:100%; max-width:600px; margin-inline:auto; }
/* ─── 外框：米白卡片 ─────────────────────────────────────────── */
/* 卡片是 size container：外層不能用 grid/flex 置中（內容寬會被量成 0），用 margin 置中 */
.pf-card {
  container: pf / inline-size;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(16px, 4vw, 22px);
  box-shadow: var(--shadow-md);
}
.pf-status { margin: 0 0 20px; font-size: 15px; font-weight: 600; line-height: 1.5; min-height: 1.5em; text-wrap: balance; }

/* ─── 圖：左＝你的帳號，右＝旅伴 ─────────────────────────────── */
.pf-stage {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; column-gap: clamp(40px, 11cqi, 68px);
}
.pf-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }

.pf-account {
  --account-bg: color-mix(in srgb, var(--page) 60%, var(--surface));
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--account-bg);
  padding: 18px 14px 14px;
  display: grid; grid-template-columns: auto auto; justify-content: space-between;
  align-items: center;
}
/* 帳號名稱壓在框線上，省一列高度 */
.pf-account-label {
  position: absolute; top: 0; left: 12px; transform: translateY(-50%);
  margin: 0; padding: 0 6px;
  font-size: var(--text-xs); color: var(--muted); letter-spacing: .04em; line-height: 1.4; white-space: nowrap;
  background: linear-gradient(var(--surface) 50%, var(--account-bg) 50%);
}
.pf-devices { display: grid; row-gap: 14px; justify-items: center; }

.pf-node {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center;
  transition: opacity .35s ease, visibility .35s;
}
.pf-tile {
  width: 44px; height: 44px; border-radius: 13px;
  display: grid; place-items: center; flex: none;
  background: var(--page); color: var(--fg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: border-color .35s, background-color .35s, color .35s;
}
.pf-tile svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pf-nm b { display: block; font-size: var(--text-sm); font-weight: 600; line-height: 1.3; white-space: nowrap; }
.pf-nm small { display: block; margin-top: 1px; font-size: var(--text-xs); color: var(--muted); line-height: 1.4; white-space: nowrap; }

/* 主角：你的 iPhone */
.pf-phone .pf-tile {
  width: 54px; height: 54px; border-radius: 16px;
  background: var(--accent-wash); color: var(--accent-ink);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 7%, transparent), var(--shadow-sm);
}
.pf-phone .pf-tile svg { width: 26px; height: 26px; }

/* 旅伴：一欄直排，圓形首字＋名字 */
.pf-mates { display: grid; row-gap: 14px; }
.pf-mate { flex-direction: row; gap: 10px; text-align: start; }
.pf-mate .pf-tile {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--sunken); box-shadow: none;
  font-size: 14px; font-weight: 600; line-height: 1;
}

/* 未啟用：虛線、淡出；iPad 則整個不在 */
.pf-stage[data-sync="false"] .pf-cloud,
.pf-stage[data-share="false"] .pf-mate { opacity: .45; }
.pf-stage[data-sync="false"] .pf-cloud .pf-tile,
.pf-stage[data-share="false"] .pf-mate .pf-tile { border-style: dashed; background: transparent; box-shadow: none; color: var(--muted); }
.pf-stage[data-sync="false"] .pf-ipad { opacity: 0; visibility: hidden; }

/* 傳輸線：底軌＋流動虛線 */
.pf-wire { opacity: 0; transition: opacity .35s ease; }
.pf-stage[data-sync="true"] .pf-wire.a,
.pf-stage[data-share="true"] .pf-wire.b { opacity: 1; }
.pf-wire path { fill: none; }
.pf-wire .pf-track { stroke: color-mix(in srgb, var(--accent) 26%, var(--border)); stroke-width: 1.25; }
.pf-wire .pf-flow {
  stroke: var(--accent); stroke-width: 1.75; stroke-linecap: round;
  stroke-dasharray: 1.5 7;
  animation: pf-flow 1.1s linear infinite;
}
@keyframes pf-flow { to { stroke-dashoffset: -17; } }

/* ─── 開關：圖下方一列兩欄 ───────────────────────────────────── */
.pf-settings {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--page); border: 1px solid var(--border); border-radius: var(--radius-md);
}
.pf-setting { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 14px; min-height: 60px; min-width: 0; }
.pf-setting + .pf-setting { border-left: 1px solid var(--border-soft); }
.pf-setting label { flex: 1; min-width: 0; cursor: pointer; }
.pf-setting b { display: block; font-size: 15px; font-weight: 600; line-height: 1.35; text-wrap: balance; word-break: keep-all; }
.pf-setting span { display: block; margin-top: 1px; font-size: 13px; color: var(--muted); line-height: 1.45; }
.pf-setting.is-locked label { cursor: not-allowed; }
.pf-setting.is-locked b { color: var(--muted); }

.pf-sw {
  position: relative; flex: none;
  width: 51px; height: 31px; padding: 0; border: 0; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--fg) 15%, var(--page));
  cursor: pointer;
  transition: background-color .2s ease, opacity .2s ease;
}
.pf-sw::before { content: ""; position: absolute; inset: -7px -4px; }  /* 觸控範圍 ≥ 44px */
.pf-sw::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 27px; height: 27px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .18), 0 0 0 .5px rgba(0, 0, 0, .06);
  transition: transform .22s cubic-bezier(.3, .7, .4, 1);
}
.pf-sw[aria-checked="true"] { background: var(--accent); }
.pf-sw[aria-checked="true"]::after { transform: translateX(20px); }
.pf-sw:hover { background: color-mix(in srgb, var(--fg) 24%, var(--page)); }
.pf-sw[aria-checked="true"]:hover { background: color-mix(in srgb, var(--accent) 86%, var(--fg)); }
.pf-sw:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pf-sw[aria-disabled="true"] { opacity: .4; cursor: not-allowed; background: color-mix(in srgb, var(--fg) 15%, var(--page)); }


/* ─── 窄卡片（卡片內容寬 380px 以下，也就是手機）：旅伴移到框下方排成一列，開關上下疊。首頁右欄的卡片內容只有約 418px，設計稿原本的 420 門檻會讓桌機也掉進窄版 ─── */
@container pf (max-width: 379px) {
  .pf-stage { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .pf-mates { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pf-mate { flex-direction: column; gap: 6px; text-align: center; }
  .pf-settings { grid-template-columns: minmax(0, 1fr); }
  .pf-setting + .pf-setting { border-left: 0; border-top: 1px solid var(--border-soft); }
}

@media (prefers-reduced-motion: reduce) {
  .pf-wire .pf-flow { animation: none; }
  .pf-node, .pf-tile, .pf-wire, .pf-sw, .pf-sw::after { transition: none; }
}

/* 循環重播：新的那份先透明疊在上面，畫好再淡入 */
.ph.shot.phone > iframe.is-next { opacity:0 !important; }
.ph.shot.phone > iframe { transition:opacity .35s; }



/* 小工具／整合卡片：外框是 box-shadow 畫的、不佔版面，間距要把框的厚度加回去，標題才不會貼著手機（使用者 2026-10-12） */
.tool > .ph.shot.phone { margin-top:calc(var(--bz) + 2px); margin-bottom:calc(var(--bz) + 24px); }

/* 捲過 hero 之後右下角的「立即下載 App」（使用者 2026-10-12）；頁尾的下載鈕看得到時收起來，免得兩顆疊在一起 */
.fab-dl { position:fixed; right:max(16px, env(safe-area-inset-right)); bottom:max(16px, env(safe-area-inset-bottom)); z-index:50;
  display:flex; flex-direction:column; align-items:stretch; gap:10px;
  opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity .25s, transform .25s; }
.fab-dl > .btn { box-shadow:var(--shadow-md); }
/* 電腦版（滑鼠＋可懸停）：上面先放商店的 QR Code，用手機掃；連結放在下面 */
.fab-qr { display:none; margin:0; padding:12px 12px 10px; background:var(--page); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md); text-align:center; }
.fab-qr img { display:block; width:120px; height:120px; margin:0 auto; padding:6px; background:#fff; color:#000; border-radius:var(--radius-sm); }
.fab-qr figcaption { margin-top:8px; font-size:var(--text-xs); color:var(--muted); }
@media (hover:hover) and (pointer:fine) and (min-width:900px) { .fab-qr { display:block; } }
.fab-dl.is-on { opacity:1; transform:none; pointer-events:auto; }
/* 捲動中淡出、停下來淡入（使用者 2026-10-12） */
.fab-dl.is-on.is-scrolling { opacity:0; pointer-events:none; }
@media (prefers-reduced-motion:reduce) { .fab-dl { transition:none; } }

/* 兩欄開關的副標：右欄只有約 205px，13px 會把最後一個字擠到第二行 */
.pf-setting span { font-size:12px; }
.pf-setting { padding:10px 10px 10px 12px; gap:8px; }
@container pf (max-width: 379px) { .pf-setting span { font-size:13px; } }

/* 資料與小工具：資料三張＋主頁小工具兩張，桌機並排（使用者 2026-10-12：App 1.3.0 資料分頁＋工具鈕） */
.tool-groups { display:grid; gap:clamp(28px, 4vw, 40px); }
@media (min-width:900px) { .tool-groups { grid-template-columns:minmax(0, 3fr) minmax(0, 2fr); } }   /* 1.6.0：資料三張（靈感、筆記、購物清單）、主頁小工具兩張（使用者 2026-10-31） */
.tg-h { margin:0 0 14px; font-size:var(--text-xl, 20px); }
@media (min-width:560px) { .tool-group .tools:not(.is-three) { grid-template-columns:repeat(2, minmax(0, 1fr)); } }

/* 整合：「分享進來」那張放兩支手機（社群貼文、地圖 App），桌機佔兩欄（使用者 2026-10-12） */
.share-pair { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(12px, 2vw, 20px); }
.share-pair > .ph.shot { --w:min(100%, 220px); --r:clamp(16px, 4vw, 26px); margin:0 auto 18px; }
.share-pair > .ph.shot.phone { margin-top:calc(var(--bz) + 2px); margin-bottom:calc(var(--bz) + 24px); }
@media (min-width:700px) { .tools.is-three.has-wide { grid-template-columns:repeat(2, minmax(0, 1fr)); } .tools.has-wide > .is-wide { grid-column:1 / -1; } }
@media (min-width:900px) { .tools.is-three.has-wide { grid-template-columns:repeat(4, minmax(0, 1fr)); } .tools.has-wide > .is-wide { grid-column:span 2; } }
@media (max-width:479px) { .share-pair { grid-template-columns:minmax(0, 1fr); } }   /* 手機上兩支並排太小，上下疊 */

/* 頁面鎖住左右：手機上不准左右拖動整頁（使用者 2026-10-12）。外框裡的 iframe 是 402 寬再縮放、手機側鍵畫在外框外，
   版面框會比螢幕多出一點點，iOS Safari 就讓整頁左右晃。clip 不會變成捲動容器，position: sticky 照常 */
html, body { overflow-x: clip; overscroll-behavior-x: none; }

/* ─── 關於：開發團隊（藍圖 2026-10-13 搬出去自成一區） ─── */
.about-grid { display:grid; gap:clamp(16px, 2.4vw, 24px); margin-bottom:clamp(20px, 3vw, 32px); max-width:560px; }
.about-card { border:1px solid var(--border-soft); border-radius:var(--radius-lg); background:var(--surface); padding:clamp(20px, 3vw, 32px); }
.about-card h3 { margin:0 0 12px; font-size:var(--text-lg); }
.about-card p { margin:0 0 10px; color:var(--muted); }
.about-card p:last-child { margin-bottom:0; }
.member { display:flex; gap:16px; align-items:center; }
.member-photo { width:88px; height:88px; flex:none; border-radius:50%; object-fit:cover; background:var(--border-soft); }
.member-info { display:grid; gap:2px; }
.about-card .member-info p { margin:0; }
.about-card .member-name { color:var(--text); font-weight:700; font-size:var(--text-lg); }
.about-card .member-role { color:var(--accent-ink, var(--accent)); font-weight:600; }
.about-card .member-title { font-size:var(--text-sm, 14px); }
.member-link { margin-top:4px; font-size:var(--text-sm, 14px); }

/* 我的遊記：每列 4 張、往下排，不左右捲（使用者 2026-10-12）；手機 2 張、平板 3 張 */
.journals { margin:8px 0 0; }
.jr-row { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(14px, 2vw, 22px); }
@media (min-width:700px) { .jr-row { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (min-width:1000px) { .jr-row { grid-template-columns:repeat(4, minmax(0, 1fr)); } }
.jr-card { display:grid; gap:6px; color:inherit; text-decoration:none; }
.jr-card img { width:100%; aspect-ratio:16 / 10; object-fit:cover; border-radius:var(--radius-md, 12px); background:var(--border-soft); }
.jr-date { font-size:var(--text-xs, 12px); color:var(--muted); }
.jr-title { font-weight:600; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.jr-card:hover .jr-title { color:var(--accent-ink, var(--accent)); }

/* ─── 藍圖：橫向時間軸（使用者 2026-10-13，Open Design 稿 v2）──────────────────
   外框裡左右捲、一張一張對齊；時間軸線在中間，卡片輪流放線的上方、下方，左右相鄰的兩張分在兩側、錯開半張。
   三列格線（上卡｜線｜下卡）用 subgrid 讓每個里程碑共用同一條線；卡片高度跟內容走。
   狀態：已完成 is-done／即將推出 is-soon／進行中 is-now（載入時置中）／規劃中 is-planned，用詞見 CONTEXT.md */
@media (max-width:480px) { #roadmap .wrap { padding-inline:16px; } }
.rm-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:clamp(28px, 4vw, 40px); }
.rm-head .section-head { margin:0; }
.rm-nav { display:flex; gap:10px; flex:none; }
.rm-btn { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; padding:0; cursor:pointer;
  background:var(--page); color:var(--fg); border:1px solid var(--border); transition:border-color .15s, color .15s, background-color .15s; }
.rm-btn svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.rm-btn:hover:not(:disabled) { border-color:var(--accent); color:var(--accent-ink); background:var(--accent-wash); }
.rm-btn:focus-visible { border-radius:50%; }
.rm-btn:disabled { opacity:.4; cursor:default; }
@media (max-width:640px), (hover:none) { .rm-nav { display:none; } }

.rm-frame { position:relative; background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius-lg); overflow:hidden; }
.rm-frame::before, .rm-frame::after { content:""; position:absolute; top:0; bottom:0; z-index:3; width:clamp(24px, 6vw, 56px); pointer-events:none; transition:opacity .2s; }
.rm-frame::before { left:0; background:linear-gradient(to right, var(--surface), transparent); }
.rm-frame::after { right:0; background:linear-gradient(to left, var(--surface), transparent); }
.rm-frame[data-at-start]::before, .rm-frame[data-at-end]::after { opacity:0; }

.rm-scroller { --rm-pad:clamp(16px, 3vw, 28px); --rm-card:248px; --rm-gap:16px; --rm-step:calc((var(--rm-card) + var(--rm-gap)) / 2);
  --rm-stem:20px; --rm-x:24px;
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none;
  /* 左右留到半個外框寬：頭尾的里程碑也能捲到正中間 */
  padding:24px max(var(--rm-pad), calc(50% - var(--rm-card) / 2)); }
.rm-scroller::-webkit-scrollbar { display:none; }
.rm-scroller:focus-visible { box-shadow:inset 0 0 0 2px var(--accent-ink); }
.rm-scroller.is-dragging { scroll-snap-type:none; cursor:grabbing; user-select:none; }
@media (max-width:640px) { .rm-scroller { --rm-card:70vw; --rm-gap:12px; } }

.rm-track { list-style:none; margin:0; padding:0; display:grid; grid-auto-columns:var(--rm-step); grid-template-rows:auto 24px auto; width:max-content; }
.rm-item { grid-row:1 / 4; grid-column:var(--i) / span 2; display:grid; grid-template-rows:subgrid; position:relative; scroll-snap-align:center; width:var(--rm-card); }
.rm-node { grid-row:2; position:relative; }
/* 這顆點到下一顆點的那段線 */
.rm-node::before { content:""; position:absolute; top:11.5px; left:var(--rm-x); height:1px; width:var(--rm-step); background:var(--accent); }
.rm-item:last-child .rm-node::before { display:none; }
.rm-item.is-now .rm-node::before { background:linear-gradient(to right, var(--accent), var(--border)); }
.rm-item.is-planned .rm-node::before { background:repeating-linear-gradient(to right, var(--border) 0 5px, transparent 5px 10px); }
.rm-dot { position:absolute; left:calc(var(--rm-x) - 6px); top:6px; width:12px; height:12px; border-radius:50%; background:var(--accent); z-index:2; }
.is-soon .rm-dot { background:var(--surface); box-shadow:inset 0 0 0 2px var(--accent); }
.is-now .rm-dot { left:calc(var(--rm-x) - 8px); top:4px; width:16px; height:16px; box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.is-now .rm-dot::after { content:""; position:absolute; inset:0; border-radius:50%;
  box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); animation:rm-pulse 2.2s ease-out infinite; }
@keyframes rm-pulse { to { box-shadow:0 0 0 12px transparent; } }
.is-planned .rm-dot { background:var(--surface); box-shadow:inset 0 0 0 1.5px var(--muted); }

/* 卡片＋立柱：單數在線上方、雙數在線下方 */
.rm-arm { display:flex; flex-direction:column; position:relative; z-index:1; }
.rm-item:nth-child(odd) .rm-arm { grid-row:1; align-self:end; flex-direction:column-reverse; }
.rm-item:nth-child(even) .rm-arm { grid-row:3; align-self:start; }
.rm-stem { flex:none; width:1px; height:var(--rm-stem); margin-left:calc(var(--rm-x) - .5px); background:var(--border); }
.is-now .rm-stem { background:var(--accent); }
.is-planned .rm-stem { background:repeating-linear-gradient(to bottom, var(--border) 0 3px, transparent 3px 6px); }

.rm-card { display:flex; flex-direction:column; gap:6px; padding:14px 16px 16px; background:var(--page);
  border:1px solid var(--border-soft); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); }
.is-soon .rm-card { border-color:color-mix(in srgb, var(--accent) 55%, var(--border)); }
.is-now .rm-card { border:1.5px solid var(--accent); box-shadow:var(--shadow-md); }
.is-planned .rm-card { background:var(--surface); border:1px dashed var(--border); box-shadow:none; }
.rm-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:22px; }
.rm-when { font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.rm-badge { flex:none; display:inline-flex; align-items:center; padding:1px 9px; border-radius:var(--radius-pill);
  font-size:var(--text-xs); font-weight:600; line-height:18px; white-space:nowrap; color:var(--fg); border:1px solid var(--border); }
.is-soon .rm-badge { color:var(--accent-ink); background:var(--accent-wash); border-color:color-mix(in srgb, var(--accent) 45%, var(--border)); }
.is-now .rm-badge { color:var(--accent-on); background:var(--accent-ink); border-color:var(--accent-ink); }
.is-planned .rm-badge { color:var(--muted); border-style:dashed; }
.rm-title { margin:0; font-size:17px; font-weight:700; line-height:1.35; letter-spacing:-0.01em; }
.rm-desc { margin:0; font-size:var(--text-sm); color:var(--muted); line-height:1.6; }
/* 帶日期的功能列：「08.05 時間軸行事曆」；沒日期的（還沒上線的版本）改用圓點 */
.rm-log { list-style:none; margin:2px 0 0; padding:0; display:grid; gap:4px; }
.rm-log li { display:grid; grid-template-columns:3.1em minmax(0, 1fr); column-gap:8px; font-size:var(--text-sm); line-height:1.55; }
.rm-log time { color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums; }
.rm-log.is-plain li { grid-template-columns:6px minmax(0, 1fr); column-gap:9px; }
.rm-log.is-plain li::before { content:""; width:5px; height:5px; margin-top:.68em; border-radius:50%; background:var(--border); }
.rm-log b { font-weight:600; }
.rm-log small { display:block; color:var(--muted); font-size:13px; }
@media (prefers-reduced-motion:reduce) { .is-now .rm-dot::after { animation:none; } .rm-btn, .rm-frame::before, .rm-frame::after { transition:none; } }
/* 整合只剩兩張（行事曆整合、Siri；「分享進來」併進 02 靈感）：置中兩欄，不拉成四欄 */
@media (min-width:560px) { .tools.is-two { grid-template-columns:repeat(2, minmax(0, 300px)); justify-content:center; } }
/* 標題只有關鍵詞上色、同一行接著寫完（02 靈感：「靈感」一次收齊） */
.feature h3 em.mix { color:inherit; } .feature h3 em.mix span { color:var(--accent-ink); }

/* ─── 限時活動：分享到社群，免費兌換一年 Premium（assets/js/promo.js；設計稿 Open Design site-home-v2.html #promo）───
   第一屏一顆醒目入口＋Hero 與隱私之間一張 accent-wash 卡：左邊標題、價格、倒數，右邊三步驟。
   兩者都先 hidden，promo.js 確認活動還沒結束才打開。 */
.promo[hidden], .promo-jump[hidden], .promo .chip[hidden] { display:none !important; }
.promo-jump {
  display:inline-flex; align-items:center; gap:10px; max-width:100%;
  margin:0 0 22px; padding:6px 16px 6px 6px; border-radius:var(--radius-pill);
  background:var(--accent-ink); color:var(--accent-on); text-decoration:none;
  font-size:var(--text-sm); font-weight:600; line-height:1.35;
  box-shadow:0 10px 24px -12px color-mix(in srgb, var(--accent-ink) 80%, transparent);
  transition:transform .12s ease, background-color .12s ease;
}
/* hover 只給滑鼠：手機上第一下會先被當成 hover（iPhone Safari 要點兩下） */
@media (hover:hover) { .promo-jump:hover { color:var(--accent-on); background:color-mix(in srgb, var(--accent-ink) 82%, var(--fg)); transform:translateY(-1px); } }
.promo-jump-tag {
  flex:none; padding:3px 10px; border-radius:var(--radius-pill);
  background:var(--accent-on); color:var(--accent-ink); font-size:var(--text-xs); font-weight:700;
}
.promo-jump-go { flex:none; animation:promo-nudge 1.6s ease-in-out infinite; }
@keyframes promo-nudge { 0%, 100% { transform:translateX(0); } 50% { transform:translateX(4px); } }
.promo.section { padding-block:clamp(28px, 4vw, 48px); }
.promo-card {
  display:grid; gap:clamp(24px, 4vw, 48px); align-items:start;
  background:var(--accent-wash); border:1px solid color-mix(in srgb, var(--accent) 28%, var(--border-soft));
  border-radius:calc(var(--radius-lg) + 6px); padding:clamp(22px, 4.4vw, 48px);
}
@media (min-width:900px) { .promo-card { grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); } }
.promo h2 { margin-bottom:14px; }
.promo h2 em { font-style:normal; color:var(--accent-ink); }
.promo .lede { font-size:var(--text-base); }
.promo .price { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 14px; margin:22px 0 6px; }
.promo .price s { color:var(--muted); font-size:var(--text-lg); text-decoration-thickness:1.5px; }
.promo .price .arrow { color:var(--muted); }
.promo .price strong { font-size:clamp(36px, 5vw, 46px); line-height:1; letter-spacing:var(--tracking-display); color:var(--accent-ink); }
.promo .deadline {
  display:inline-flex; align-items:center; gap:8px; margin-top:12px;
  padding:6px 14px 6px 10px; border-radius:var(--radius-pill); background:var(--page);
  border:1px solid var(--border-soft); font-size:var(--text-sm);
}
.promo .deadline .i { width:16px; height:16px; color:var(--accent-ink); }
.promo .cd { font-family:var(--font-mono); font-weight:600; font-variant-numeric:tabular-nums; color:var(--accent-ink); }
.promo .steps { list-style:none; margin:0; padding:0; display:grid; gap:12px; counter-reset:step; }
.promo .step {
  background:var(--page); border:1px solid var(--border-soft); border-radius:var(--radius-lg);
  padding:16px 18px; display:grid; grid-template-columns:28px minmax(0, 1fr); gap:4px 12px; transition:opacity .2s ease;
}
.promo .step::before {
  counter-increment:step; content:counter(step);
  grid-row:span 2; width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  background:var(--accent-ink); color:var(--accent-on); font-weight:700; font-size:var(--text-sm);
}
/* 還沒輪到的步驟：整張變淡、號碼轉灰，但仍按得到（按了跳 alert）；做完的步驟號碼換成勾 */
.promo .step.is-locked { opacity:.5; }
.promo .step.is-locked::before { background:var(--sunken); color:var(--muted); }
.promo .step.is-complete::before { content:"✓"; }
.promo .step h3 { font-size:var(--text-base); margin:3px 0 0; }
.promo .step-body { grid-column:2; min-width:0; }
.promo .step-body > p { margin:4px 0 0; font-size:var(--text-sm); color:var(--muted); line-height:1.6; }
.promo .caption {
  margin:10px 0 0; padding:12px 14px; border-radius:var(--radius-md); background:var(--surface);
  border:1px dashed color-mix(in srgb, var(--accent) 38%, var(--border)); color:var(--fg);
  font-size:var(--text-sm); line-height:1.7; white-space:pre-line; overflow-wrap:anywhere;
}
.promo .chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.promo .chip {
  display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:6px 14px;
  border-radius:var(--radius-pill); border:1px solid var(--border); background:var(--page);
  color:var(--fg); font:inherit; font-size:var(--text-sm); font-weight:600; text-decoration:none; cursor:pointer;
}
@media (hover:hover) { .promo .chip:hover { border-color:var(--accent); background:var(--accent-wash); color:var(--fg); } }
.promo .chip, .promo .btn-redeem, .promo-jump { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.promo .chip .i { width:16px; height:16px; color:var(--accent-ink); }
.promo .chip.is-done { border-color:var(--accent-ink); color:var(--accent-ink); }
.promo .redeem-row { margin-top:12px; }
/* site.css 的 .btn[aria-disabled] 會 pointer-events:none；這顆要按得到，按了才跳 alert 說還差哪一步 */
.promo .btn-redeem[aria-disabled="true"] { opacity:.45; cursor:not-allowed; pointer-events:auto; }
.promo .btn-redeem[aria-disabled="true"]:hover { transform:none; background:var(--accent-ink); }
.promo .step-body > p.redeem-hint { font-size:12.5px; }
.promo .howto { margin:4px 0 0; padding-inline-start:1.3em; display:grid; gap:2px; font-size:var(--text-sm); color:var(--muted); line-height:1.6; }
@media (prefers-reduced-motion:reduce) { .promo-jump-go { animation:none; } .promo .step { transition:none; } }

/* ─── 開發紀錄：關於之後（使用者 2026-10-25）──────────────────────── */
.story + .story { margin-top:clamp(16px, 2.4vw, 24px); }
.dl-stats {
  list-style:none; margin:20px 0 0; padding:0; display:grid; grid-template-columns:repeat(6, minmax(0, 1fr));
  border-top:2px solid var(--fg);
}
.dl-stats li { display:grid; align-content:start; gap:4px; padding:18px 16px 4px; border-left:1px solid var(--border-soft); min-width:0; }
.dl-stats li:first-child { border-left:0; padding-left:0; }
.dl-stats b { font-family:var(--font-mono); font-size:clamp(26px, 3vw, 38px); font-weight:600; line-height:1.1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--fg); }
.dl-stats b i { font-style:normal; font-family:var(--font-body); font-size:.5em; font-weight:600; color:var(--muted); margin-left:2px; }
.dl-stats li:nth-child(5) b { color:var(--accent-ink); }
.dl-stats span { font-weight:700; color:var(--fg); }
.dl-stats small { font-size:var(--text-sm); color:var(--muted); line-height:1.5; }
@media (max-width:900px) {
  .dl-stats { grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .dl-stats li:nth-child(4) { border-left:0; padding-left:0; }
}
@media (max-width:520px) {
  .dl-stats { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .dl-stats li:nth-child(n) { border-left:1px solid var(--border-soft); padding-left:16px; }
  .dl-stats li:nth-child(odd) { border-left:0; padding-left:0; }
}
.dl-cloud { margin:clamp(24px, 3.6vw, 40px) 0 0; }
.dl-cloud canvas { display:block; margin:0 auto; width:100%; height:clamp(380px, 52vw, 600px); }
@media (max-width:640px) { .dl-cloud canvas { height:115vw; } }
.dl-cloud figcaption { margin-top:12px; font-size:var(--text-sm); color:var(--muted); }

/* ─── 公告（使用者 2026-10-26；設計稿 Open Design site-announcements.html）──────────────
   資料是 assets/data/announcements.json（tools/announcements.mjs 部署時從 App 的公告 gist 產）；home.js 畫最新 5 則，
   沒有公告整段維持 hidden。最新一則是大卡（有圖時寬螢幕圖在左），其他每則一行、點開看內文。 */
.ann[hidden] { display:none !important; }
.ann { container-type:inline-size; }
.ann-head { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:clamp(20px, 3vw, 32px); }
.ann-head h2 { margin:0; }
.ann-all { display:inline-flex; align-items:center; gap:6px; font-size:var(--text-sm); font-weight:600; color:var(--accent-ink); text-decoration:none; white-space:nowrap; padding-bottom:4px; }
.ann-all .i { width:16px; height:16px; }
.ann-feature {
  display:grid; overflow:hidden; background:var(--page); border:1px solid var(--border-soft);
  border-radius:calc(var(--radius-lg) + 6px); box-shadow:var(--shadow-md);
}
@container (min-width:860px) { .ann-feature.has-img { grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr); } }
.ann-feature figure { margin:0; background:var(--sunken); aspect-ratio:16/9; }
.ann-feature img { display:block; width:100%; height:100%; object-fit:cover; }
.ann-feature .ann-body { padding:clamp(20px, 3.4vw, 36px); display:flex; flex-direction:column; gap:12px; min-width:0; }
.ann-meta { display:flex; align-items:center; gap:10px; font-size:var(--text-xs); color:var(--muted); font-family:var(--font-mono); letter-spacing:.04em; }
.ann-new, .an-new {
  font-family:var(--font-body); font-weight:700; letter-spacing:0; font-size:11px; line-height:1.6; padding:1px 8px; border-radius:var(--radius-pill);
  background:var(--accent-wash); color:var(--accent-ink); border:1px solid color-mix(in srgb, var(--accent) 30%, var(--border-soft));
}
.ann-feature h3 { font-size:clamp(20px, 2.4vw, var(--text-2xl)); margin:0; }
.ann-text { margin:0; color:var(--muted); white-space:pre-line; overflow-wrap:anywhere; }
.ann-feature .btn { align-self:flex-start; margin-top:6px; }
.ann-list { list-style:none; margin:16px 0 0; padding:0; border:1px solid var(--border-soft); border-radius:var(--radius-lg); background:var(--page); overflow:hidden; }
.ann-list li + li { border-top:1px solid var(--border-soft); }
.ann-item summary {
  list-style:none; cursor:pointer; display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:14px;
  padding:14px clamp(16px, 2.4vw, 22px); min-height:56px;
}
.ann-item summary::-webkit-details-marker { display:none; }
@media (hover:hover) { .ann-item summary:hover { background:var(--surface); } }
.ann-item .ann-date { font-family:var(--font-mono); font-size:var(--text-xs); color:var(--muted); font-variant-numeric:tabular-nums; }
.ann-item .ann-title { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ann-item[open] .ann-title { white-space:normal; }
.ann-item .chev { width:16px; height:16px; color:var(--muted); transition:transform .15s ease; }
.ann-item[open] .chev { transform:rotate(180deg); }
.ann-item .ann-more { padding:0 clamp(16px, 2.4vw, 22px) 18px; display:grid; gap:12px; }
.ann-item .ann-more img { width:100%; max-width:420px; border-radius:var(--radius-md); aspect-ratio:16/9; object-fit:cover; background:var(--sunken); }
.ann-item .ann-text { font-size:var(--text-sm); line-height:1.7; }
.ann-link { display:inline-flex; align-items:center; gap:6px; font-size:var(--text-sm); font-weight:600; color:var(--accent-ink); text-decoration:none; justify-self:start; }
.ann-link .i { width:16px; height:16px; }
@container (max-width:560px) {
  .ann-item summary { grid-template-columns:minmax(0, 1fr) auto; gap:2px 12px; }
  .ann-item .ann-date, .ann-item .ann-title { grid-column:1; }
  .ann-item .chev { grid-column:2; grid-row:1 / span 2; }
}
@media (prefers-reduced-motion:reduce) { .ann-item .chev { transition:none; } }