:root {
  --ink: #132238;
  --muted: #52657c;
  --line: #dce5eb;
  --paper: #fff;
  --wash: #f3f8f7;
  --brand: #087f70;
  --brand-dark: #075e54;
  --motion-fast: 150ms;
  --motion-standard: 220ms;
  --motion-dialog: 240ms;
  --motion-distance: 8px;
  --motion-ease: cubic-bezier(.2, .75, .25, 1);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--wash); color: var(--ink); }
body { margin: 0; min-width: 320px; line-height: 1.65; }
a { color: var(--brand-dark); text-underline-offset: .18em; }
a:focus-visible { outline: 3px solid #e8a317; outline-offset: 3px; border-radius: 4px; }
.skip-link { position: absolute; left: 1rem; top: -5rem; z-index: 10; padding: .65rem .9rem; background: var(--ink); color: #fff; }
.skip-link:focus { top: 1rem; }
.site-header { background: #fff; border-bottom: 1px solid var(--line); }
.header-inner, .page, .footer-inner { width: min(1120px, calc(100% - 2rem)); margin-inline: auto; }
.header-inner { min-height: 72px; display: flex; align-items: center; gap: 1.1rem; }
.brand { display: inline-flex; flex: 0 0 auto; }
.brand img { display: block; width: 142px; height: 36px; }
.primary-nav { display: flex; align-items: center; gap: .9rem; margin-left: auto; }
.primary-nav a, .locale-switch { font-weight: 650; text-decoration: none; }
.primary-nav a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
.primary-nav a { position: relative; }
.primary-nav a[aria-current="page"]::after { content: ''; position: absolute; right: 0; bottom: -.45rem; left: 0; height: 2px; border-radius: 999px; background: var(--brand); transform: scaleX(1); transform-origin: center; transition: transform var(--motion-standard) var(--motion-ease); }
.header-cta, .button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  padding: .65rem 1rem; border-radius: 999px; font-weight: 750; text-decoration: none;
}
.header-cta, .button, .primary-nav a { transition: transform var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease); }
.header-cta:active, .button:active { transform: scale(.97); }
.header-cta, .button-primary { color: #fff; background: var(--brand-dark); }
.button-secondary { border: 1px solid var(--brand); background: #fff; }
.page { padding: 4rem 0 5rem; }
.hero > *, .grid > .card { animation: public-enter var(--motion-standard) var(--motion-ease) both; }
.grid > .card:nth-child(2) { animation-delay: 40ms; }
.grid > .card:nth-child(3) { animation-delay: 80ms; }
@keyframes public-enter { from { opacity: .01; transform: translateY(var(--motion-distance)); } }
.hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr); gap: 2rem; align-items: center; padding-bottom: 2rem; }
.eyebrow { color: var(--brand-dark); font-size: .82rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
h1, h2 { line-height: 1.22; text-wrap: balance; }
h1 { max-width: 820px; margin: .3rem 0 1rem; font-size: clamp(2.1rem, 6vw, 4rem); }
.lead, .hero p, .card p, .legal-section p, .muted { color: var(--muted); }
.lead, .hero p { max-width: 760px; font-size: 1.08rem; }
.hero-panel, .card, .legal-section, .table-wrap, .notice {
  background: var(--paper); border: 1px solid var(--line); border-radius: 18px;
}
.hero-panel, .card, .legal-section { padding: 1.35rem; }
.hero-panel ul, .card ul, .legal-section ul { margin: 0; padding-left: 1.2rem; }
.actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }
/* 主按鈕下方的補充說明：誘因要看得到，但不能搶走按鈕本身的視覺重量。 */
.hero-note { margin: .8rem 0 0; max-width: 46ch; color: var(--muted); font-size: .95rem; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.card h2, .legal-section h2 { margin-top: 0; }
/* 清單卡（例如「有哪些圖」「升級 Pro 可以多看到」）：逐項列出比一整段好讀，佔滿整列。 */
.grid > .card-list { grid-column: 1 / -1; }
.feature-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: .6rem 1.4rem; margin: 0; padding: 0 !important; list-style: none; }
.feature-list li { padding: .7rem 0; border-top: 1px solid var(--line); }
.feature-list-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.feature-list li p { margin: .25rem 0 0; font-size: .95rem; }
.feature-tag { padding: .08rem .55rem; border-radius: 999px; background: #e3f2ee; color: var(--brand-dark); font-size: .78rem; font-weight: 750; white-space: nowrap; }
.feature-tag-pro { background: #fff1c9; color: #7a5200; }
/* 圖表清單：整列（名稱＋縮圖＋說明）都能點，點了用 :target 打開放大圖。 */
.feature-list-link { display: block; color: inherit; text-decoration: none; border-radius: 12px; }
.feature-list-link:hover strong, .feature-list-link:focus-visible strong { color: var(--brand-dark); text-decoration: underline; }
.chart-thumb { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; margin-top: .55rem; object-fit: cover; border: 1px solid var(--line); border-radius: 10px; background: #1b2a47; transition: transform var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease); }
.feature-list-link:hover .chart-thumb, .feature-list-link:focus-visible .chart-thumb { transform: translateY(-2px); box-shadow: 0 8px 20px rgb(19 34 56 / 18%); }
/* 卡片 hover／focus 的上浮是 transform，會讓 position:fixed 的放大層被關在卡片裡；清單卡不上浮。 */
.grid > .card.card-list:hover, .grid > .card.card-list:focus-within { transform: none; }
/* 進場動畫用 fill-mode both 持有 transform，同樣會把放大層關在卡片裡，清單卡不套用。 */
.grid > .card.card-list { animation: none; }
.chart-zoom { position: fixed; inset: 0; z-index: 40; display: none; place-items: center; padding: 1rem; }
.chart-zoom:target { display: grid; }
.chart-zoom-backdrop { position: absolute; inset: 0; background: rgb(10 18 32 / 78%); }
.chart-zoom figure { position: relative; margin: 0; width: min(100%, 1100px); }
.chart-zoom figure img { display: block; width: 100%; height: auto; max-height: 80vh; object-fit: contain; border-radius: 12px; background: #1b2a47; }
.chart-zoom figcaption { margin-top: .6rem; color: #fff; font-weight: 750; text-align: center; }
.chart-zoom-close { position: absolute; top: 1rem; right: 1rem; padding: .45rem .9rem; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 750; text-decoration: none; }
@media (prefers-reduced-motion: no-preference) { .chart-zoom:target figure { animation: public-enter var(--motion-dialog) var(--motion-ease) both; } }
.card { transition: transform var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease); }
.card:hover, .card:focus-within { transform: translateY(-3px); border-color: var(--brand); box-shadow: 0 10px 24px rgb(19 34 56 / 9%); }
.card:target { animation: anchor-arrival 1.4s var(--motion-ease) both; }
@keyframes anchor-arrival { 0%, 55% { background: #fff8df; outline: 3px solid #e8a317; outline-offset: 4px; } 100% { background: var(--paper); outline: 0 solid transparent; outline-offset: 0; } }
.article { max-width: 850px; }
.article > * + * { margin-top: 1rem; }
.guide-tutorial { padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: 14px; background: #fbfdfc; }
.guide-tutorial summary { color: var(--brand-dark); cursor: pointer; font-weight: 800; }
.guide-tutorial p { margin: .8rem 0 0; color: var(--muted); }
.notice { padding: 1rem 1.2rem; background: #fff8df; }
.notice-list { font-size: .88rem; color: var(--muted); }
.notice-list strong { display: block; margin-bottom: .35rem; color: var(--ink); }
.notice-list ul { display: grid; gap: .3rem; margin: 0; padding-left: 1.1rem; }
.table-wrap { overflow-x: auto; }
table { width: 100%; min-width: 600px; border-collapse: collapse; }
th, td { padding: .9rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
th { background: #f7faf9; }
tr:last-child td { border-bottom: 0; }
.pricing-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

.plan-card { display: grid; gap: 1.2rem; align-content: start; padding: 1.4rem; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; }
.plan-card-pro { position: relative; border: 2px solid var(--brand-dark); box-shadow: 0 10px 30px rgba(7, 94, 84, .12); }
/* 計費週期切換：公開頁不載入 JavaScript，靠 radio 的 :checked ~ 換面板。
   input 用 clip 藏起來而不是 display:none —— 後者會讓鍵盤完全操作不到這個切換。 */
.plan-billing-input { position: absolute; width: 1px; height: 1px; opacity: 0; clip: rect(0 0 0 0); clip-path: inset(50%); }
.plan-billing-switch { display: inline-flex; gap: .25rem; margin-bottom: .9rem; padding: .25rem; background: #eef4f2; border: 1px solid var(--line); border-radius: 999px; }
.plan-billing-switch label { padding: .35rem .95rem; border-radius: 999px; color: var(--muted); cursor: pointer; font-size: .9rem; font-weight: 750; }
#pro-billing-yearly:checked ~ div .plan-billing-switch label[for="pro-billing-yearly"],
#pro-billing-monthly:checked ~ div .plan-billing-switch label[for="pro-billing-monthly"] { background: var(--brand-dark); color: #fff; }
/* 焦點環掛在 label 上，因為真正被 focus 的 input 是看不見的。 */
.plan-billing-input:focus-visible ~ div .plan-billing-switch label[for="pro-billing-yearly"],
.plan-billing-input:focus-visible ~ div .plan-billing-switch label[for="pro-billing-monthly"] { outline: 2px solid var(--brand-dark); outline-offset: 2px; }
.plan-billing-pane h3 { margin: 0 0 .35rem; color: var(--muted); font-size: .95rem; }
#pro-billing-monthly:checked ~ div .plan-billing-yearly,
#pro-billing-yearly:checked ~ div .plan-billing-monthly { display: none; }
.plan-card h2, .plan-card h3, .plan-card p { margin-top: 0; }
.plan-card h3 { margin-bottom: .45rem; font-size: 1rem; }
.plan-card ul, .pricing-credit ol { margin: 0; padding-left: 1.2rem; }
.plan-card ul + h3 { margin-top: 1.15rem; }
.plan-comparison { margin-top: 1.25rem; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--paper); }
.plan-comparison table { width: 100%; border-collapse: collapse; }
.plan-comparison th, .plan-comparison td { padding: .85rem 1rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.plan-comparison tbody tr:last-child > * { border-bottom: 0; }
.plan-comparison th[scope="row"] { width: 28%; font-weight: 750; }
.plan-comparison td { width: 36%; }
.matrix-marker { font-weight: 800; }
.matrix-included .matrix-marker { color: #087443; }
.matrix-limited .matrix-marker { color: #946200; }
.matrix-excluded .matrix-marker { color: #8a1f28; }
.plan-comparison small { display: block; margin-top: .22rem; color: var(--muted); }
.plan-price { margin-bottom: .15rem; color: var(--ink); font-size: 2rem; font-weight: 800; line-height: 1.1; }
/* 年繳原價：被劃掉的金額要看得出來是「另一個價格」，所以壓低對比、縮小級距，
   不跟實際要付的數字爭主位。 */
.plan-price-list { margin-right: .35rem; color: var(--muted); font-size: 1.15rem; font-weight: 700; }
.plan-period, .plan-badge { color: var(--brand-dark); font-weight: 750; }
.plan-badge { margin-bottom: .45rem; font-size: .86rem; }
.pricing-table-wrap { margin-top: 1rem; }
.pricing-table td:last-child, .pricing-table th:last-child { text-align: right; white-space: nowrap; }
/* 首頁三大核心：每列＝說明＋對應的產品截圖。桌機左右交錯，手機標題在上、圖在下，
   訪客才知道每張圖在說哪個功能（原本三張圖擠成一區、介紹另成一區，看不懂）。 */
.feature-showcase { display: grid; gap: 1.25rem; }
.feature-row {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: center;
  padding: 1.35rem; background: var(--paper); border: 1px solid var(--line); border-radius: 18px;
  animation: public-enter var(--motion-standard) var(--motion-ease) both;
}
.feature-row.has-screenshot { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }
.feature-row.has-screenshot:nth-child(even) { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
.feature-row.has-screenshot:nth-child(even) .feature-row-text { order: 2; }
.feature-row h2 { margin-top: 0; }
.feature-row p { color: var(--muted); }
.feature-row:target { animation: anchor-arrival 1.4s var(--motion-ease) both; }
.product-screenshot {
  width: 100%; max-width: 360px; margin: 0; padding: .4rem;
  overflow: hidden; background: var(--paper);
  border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 10px 30px rgb(19 34 56 / 10%);
}
.product-screenshot img {
  display: block; max-width: 100%; height: auto; border-radius: 12px;
}
.product-screenshot a { display: block; }
.product-screenshot a:hover img, .product-screenshot a:focus-visible img { box-shadow: 0 0 0 3px #e8a317; }

/* The HTML below remains a three-panel explanation without JavaScript. Once the
   small same-origin script starts, it exposes one scene at a time as a player. */
.product-demo { margin: 0 0 2rem; padding: 1.35rem; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); }
.product-demo-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.product-demo h2, .product-demo h3, .product-demo p { margin-top: 0; }
.product-demo h2 { margin-bottom: .5rem; }
.demo-disclaimer, .demo-kicker, .demo-news-card small { color: var(--muted); font-size: .88rem; }
.demo-tabs, .demo-controls { display: flex; gap: .5rem; flex-wrap: wrap; }
.demo-tabs[hidden], .demo-controls[hidden], .demo-reduced-note[hidden] { display: none; }
.demo-tabs { margin: 1rem 0; border-bottom: 1px solid var(--line); }
.demo-tabs button, .demo-controls button { min-height: 40px; padding: .45rem .75rem; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.demo-tabs button[aria-selected="true"] { border-color: var(--brand); background: #eaf5f2; color: var(--brand-dark); }
.demo-tabs button:focus-visible, .demo-controls button:focus-visible { outline: 3px solid #e8a317; outline-offset: 2px; }
.demo-scenes { display: grid; gap: .75rem; }
.demo-scene { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 1fr); gap: 1.25rem; align-items: center; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: #fbfdfc; }
.is-enhanced .demo-scene[hidden] { display: none; }
.demo-chart-frame, .demo-news-card, .demo-scan-card { padding: 1rem; border: 1px solid #b9d8d1; border-radius: 10px; background: linear-gradient(135deg, #f7fbfa, #eaf5f2); }
.demo-controls .demo-icon-button { display: inline-grid; width: 44px; min-height: 44px; padding: 0; place-items: center; }
.demo-icon-button svg { width: 22px; height: 22px; fill: currentColor; }
[data-demo-play] .demo-icon-pause, [data-demo-play][aria-pressed="true"] .demo-icon-play { display: none; }
[data-demo-play][aria-pressed="true"] .demo-icon-pause { display: block; }

/* 看圖：四個題材，虛線圈是 09/04 的位置、實心是 09/11；播放時實心從舊位置移過去。
   位置寫在 class 上而不是 style 屬性——公開站 CSP 是 style-src 'self'，行內樣式會被擋。 */
.demo-chart-frame { position: relative; height: 220px; overflow: hidden; padding: 0; background-image: linear-gradient(#d6e8e3 1px, transparent 1px), linear-gradient(90deg, #d6e8e3 1px, transparent 1px); background-size: 25% 25%; }
.demo-axis { position: absolute; color: var(--muted); font-size: .72rem; font-weight: 700; }
.demo-axis-x { right: .6rem; bottom: .35rem; }
.demo-axis-y { left: .5rem; top: .45rem; }
.demo-date { position: absolute; right: .6rem; top: .4rem; display: grid; color: var(--ink); font-size: .85rem; font-weight: 800; }
.demo-date > span { grid-area: 1 / 1; }
.demo-date-from { opacity: 0; }
.demo-bubble, .demo-bubble-ghost { position: absolute; display: grid; width: var(--size); height: var(--size); place-items: center; border-radius: 50%; transform: translate(-50%, -50%); }
.demo-bubble { z-index: 1; padding: .2rem; background: var(--tone); color: #fff; font-size: .68rem; font-weight: 800; line-height: 1.1; text-align: center; }
.demo-bubble-ghost { border: 2px dashed var(--tone); opacity: .55; }
/* 四個題材各佔一區，舊位置（虛線）與新位置互不重疊：以 300×200 的手機畫框配置。 */
.demo-bubble-ai { --size: 58px; --tone: var(--brand-dark); left: 78%; top: 28%; --dx: -85px; --dy: 62px; }
.demo-bubble-chip { --size: 50px; --tone: #16977f; left: 48%; top: 22%; --dx: -52px; --dy: 28px; }
.demo-bubble-bank { --size: 44px; --tone: #6d8497; left: 22%; top: 70%; --dx: -10px; --dy: 12px; }
.demo-bubble-ship { --size: 46px; --tone: #b5544a; left: 62%; top: 80%; --dx: 60px; --dy: -42px; }
/* 虛線圈固定在 09/04 的位置（實心位置加上位移）。 */
.demo-bubble-ghost { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))); }
.demo-legend { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin: .5rem 0 0; color: var(--muted); font-size: .8rem; }
.demo-legend-ghost, .demo-legend-solid { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.demo-legend-ghost { border: 2px dashed var(--brand-dark); }
.demo-legend-solid { margin-left: .5rem; background: var(--brand-dark); }

/* 追新聞：先出現新聞 → 標出內文提到的公司與題材 → 連回相關標的 → 按追蹤。 */
.demo-news-card { display: grid; gap: .55rem; }
.demo-news-card p { margin: 0; }
.demo-news-meta { color: var(--muted); font-size: .78rem; }
.demo-news-title { font-size: 1.02rem; line-height: 1.35; }
.demo-news-body { color: var(--ink); font-size: .9rem; line-height: 1.6; }
.demo-news-body mark { padding: 0 .15rem; border-radius: 4px; background: #ffe8a3; color: inherit; }
.demo-news-tags { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.demo-news-tags > span { color: var(--muted); font-size: .78rem; font-weight: 700; }
.demo-news-tags b { padding: .18rem .5rem; border-radius: 999px; background: #d8eee9; color: var(--brand-dark); font-size: .8rem; }
.demo-news-follow { display: grid; justify-items: start; }
.demo-news-follow > span { grid-area: 1 / 1; }
.demo-follow-button { padding: .3rem .75rem; border-radius: 999px; background: var(--brand-dark); color: #fff; font-size: .82rem; font-weight: 800; opacity: 0; }
.demo-follow-done { color: var(--brand-dark); font-size: .84rem; font-weight: 800; }
.demo-news-card small { display: block; color: var(--muted); font-size: .78rem; }

/* 跑掃描：條件逐一加入 → 掃描進度 → 符合的標的一列一列出現，附上符合原因。 */
.demo-scan-card { display: grid; gap: .45rem; }
.demo-scan-card p { margin: 0; }
.demo-scan-step { color: var(--muted); font-size: .76rem; font-weight: 800; }
.demo-scan-conditions { display: flex; gap: .35rem; flex-wrap: wrap; }
.demo-scan-conditions span { padding: .18rem .5rem; border: 1px solid #9fcfc5; border-radius: 999px; background: #fff; color: var(--brand-dark); font-size: .8rem; font-weight: 700; }
.demo-scan-progress { height: 8px; overflow: hidden; border-radius: 999px; background: #d6e8e3; }
.demo-scan-progress span { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--brand); transform-origin: left; }
.demo-scan-status { color: var(--brand-dark); font-size: .84rem; font-weight: 800; }
.demo-scan-card ol { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; counter-reset: demo-rank; }
.demo-scan-card li { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; padding: .35rem .55rem; border-radius: 8px; background: #fff; font-size: .88rem; counter-increment: demo-rank; }
.demo-scan-card li::before { content: counter(demo-rank) "."; color: var(--muted); font-weight: 700; }
.demo-scan-card li b { margin-right: auto; }
.demo-scan-card li small { color: var(--muted); font-size: .75rem; }

/* 動畫只在播放中套用；沒有 JavaScript 或減少動態時，看到的是播完後的最終畫面。 */
.is-playing .demo-bubble { animation: demo-bubble-move 6s var(--motion-ease) both; }
.is-playing .demo-date-from { animation: demo-date-from 6s linear both; }
.is-playing .demo-date-to { animation: demo-date-to 6s linear both; }
.is-playing .demo-news-title, .is-playing .demo-news-body { animation: demo-fade-in 6s var(--motion-ease) both; }
.is-playing .demo-news-body mark { animation: demo-mark 6s var(--motion-ease) both; }
.is-playing .demo-news-body mark + mark { animation-name: demo-mark-late; }
.is-playing .demo-news-tags b { animation: demo-pop-1 6s var(--motion-ease) both; }
.is-playing .demo-news-tags b:nth-of-type(2) { animation-name: demo-pop-2; }
.is-playing .demo-news-tags b:nth-of-type(3) { animation-name: demo-pop-3; }
.is-playing .demo-follow-button { animation: demo-follow 6s var(--motion-ease) both; }
.is-playing .demo-follow-done { animation: demo-follow-done 6s var(--motion-ease) both; }
.is-playing .demo-scan-conditions span { animation: demo-cond-1 6s var(--motion-ease) both; }
.is-playing .demo-scan-conditions span:nth-child(2) { animation-name: demo-cond-2; }
.is-playing .demo-scan-conditions span:nth-child(3) { animation-name: demo-cond-3; }
.is-playing .demo-scan-progress span { animation: demo-progress 6s ease-in-out both; }
.is-playing .demo-scan-status { animation: demo-status 6s var(--motion-ease) both; }
.is-playing .demo-scan-card li { animation: demo-row-1 6s var(--motion-ease) both; }
.is-playing .demo-scan-card li:nth-child(2) { animation-name: demo-row-2; }
.is-playing .demo-scan-card li:nth-child(3) { animation-name: demo-row-3; }
.is-playing.is-paused .demo-anim, .is-playing.is-paused .demo-news-title, .is-playing.is-paused .demo-news-body { animation-play-state: paused; }
@keyframes demo-bubble-move { 0%, 12% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))); } 62%, 100% { transform: translate(-50%, -50%); } }
@keyframes demo-date-from { 0%, 30% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes demo-date-to { 0%, 30% { opacity: 0; } 40%, 100% { opacity: 1; } }
@keyframes demo-fade-in { 0% { opacity: 0; transform: translateY(6px); } 12%, 100% { opacity: 1; transform: none; } }
@keyframes demo-mark { 0%, 20% { background: transparent; } 30%, 100% { background: #ffe8a3; } }
@keyframes demo-mark-late { 0%, 28% { background: transparent; } 38%, 100% { background: #ffe8a3; } }
@keyframes demo-pop-1 { 0%, 42% { opacity: 0; transform: scale(.8); } 50%, 100% { opacity: 1; transform: none; } }
@keyframes demo-pop-2 { 0%, 48% { opacity: 0; transform: scale(.8); } 56%, 100% { opacity: 1; transform: none; } }
@keyframes demo-pop-3 { 0%, 54% { opacity: 0; transform: scale(.8); } 62%, 100% { opacity: 1; transform: none; } }
@keyframes demo-follow { 0%, 64% { opacity: 0; transform: none; } 70% { opacity: 1; } 76% { opacity: 1; transform: scale(.92); } 82% { opacity: 1; transform: none; } 86%, 100% { opacity: 0; } }
@keyframes demo-follow-done { 0%, 84% { opacity: 0; } 90%, 100% { opacity: 1; } }
/* 掃描的順序是「條件先加齊，才開始掃」，所以條件的時間點比新聞的標籤早。 */
@keyframes demo-cond-1 { 0%, 3% { opacity: 0; transform: scale(.8); } 9%, 100% { opacity: 1; transform: none; } }
@keyframes demo-cond-2 { 0%, 9% { opacity: 0; transform: scale(.8); } 15%, 100% { opacity: 1; transform: none; } }
@keyframes demo-cond-3 { 0%, 15% { opacity: 0; transform: scale(.8); } 21%, 100% { opacity: 1; transform: none; } }
@keyframes demo-progress { 0%, 24% { transform: scaleX(0); } 58%, 100% { transform: scaleX(1); } }
@keyframes demo-status { 0%, 58% { opacity: 0; } 64%, 100% { opacity: 1; } }
@keyframes demo-row-1 { 0%, 64% { opacity: 0; transform: translateY(8px); } 72%, 100% { opacity: 1; transform: none; } }
@keyframes demo-row-2 { 0%, 72% { opacity: 0; transform: translateY(8px); } 80%, 100% { opacity: 1; transform: none; } }
@keyframes demo-row-3 { 0%, 80% { opacity: 0; transform: translateY(8px); } 88%, 100% { opacity: 1; transform: none; } }
@media (max-width: 620px) { .product-demo { padding: 1rem; }.demo-scene { grid-template-columns: 1fr; }.demo-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: .4rem; }.demo-tabs button { flex: 0 0 auto; }.demo-chart-frame { height: 200px; } }
.site-footer { border-top: 1px solid var(--line); background: #fff; }
/* The links column is capped so the wider guide list wraps instead of squeezing
   the disclaimer text out of its own column. */
.footer-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); gap: 1.5rem; padding: 2rem 0; }
.footer-nav-groups { display: grid; gap: 1.25rem; }
.footer-links { display: flex; flex-wrap: wrap; align-content: start; gap: .7rem 1rem; }
.footer-inner p { margin: 0; color: var(--muted); font-size: .92rem; }
.footer-links .footer-group-title {
  flex: 0 0 100%; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
@media (max-width: 820px) {
  /* align-items 要置中：登入與主按鈕有 44px 最小高度、語言切換沒有，靠上對齊時
     「English」會浮在其他按鈕上方，看起來像跑版。 */
  .header-inner { align-items: center; flex-wrap: wrap; gap: .6rem; padding-block: .8rem; }
  .locale-switch { display: inline-flex; align-items: center; min-height: 44px; margin-left: auto; font-size: .92rem; }
  /* 中文導覽改成「視覺化金融／新聞事件追蹤／智慧掃描」後，一列放不下；橫向捲動在手機上
     沒有任何提示，後面的「價格」「常見問題」會像是不存在，所以改為換行。 */
  .primary-nav { order: 3; width: 100%; margin-left: 0; padding-top: .7rem; flex-wrap: wrap; gap: .55rem 1rem; border-top: 1px solid var(--line); }
  .primary-nav a { white-space: nowrap; }
  .hero, .grid, .footer-inner, .pricing-plans { grid-template-columns: 1fr; }
  .feature-row.has-screenshot, .feature-row.has-screenshot:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  .feature-row.has-screenshot:nth-child(even) .feature-row-text { order: 0; }
  .product-screenshot { justify-self: center; }
  /* 單欄之後兩張直式手機截圖疊起來會吃掉將近一半的頁面高度，把下面三張價值主張
     卡片推到兩個螢幕以外。改為固定高度並從頂端裁切：截圖最有資訊量的是頁首與前
     幾列，底部本來就是同樣格式的重複清單。固定高度也讓版面在圖片載入前後不位移。 */
  .product-screenshot img { height: 420px; object-fit: cover; object-position: top center; }
}
@media (max-width: 620px) {
  .pricing-table-wrap { overflow: visible; border: 0; }
  .pricing-table, .pricing-table thead, .pricing-table tbody, .pricing-table tr, .pricing-table td { display: block; min-width: 0; width: 100%; }
  .pricing-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .pricing-table tr { padding: .8rem 1rem; border-bottom: 1px solid var(--line); }
  .pricing-table tr:last-child { border-bottom: 0; }
  .pricing-table td { display: grid; grid-template-columns: minmax(8rem, .9fr) minmax(0, 1.1fr); gap: .75rem; padding: .3rem 0; border: 0; text-align: left !important; white-space: normal !important; }
  .pricing-table td::before { content: attr(data-label); color: var(--muted); font-weight: 700; }
  /* 比較表在手機維持真正的表格：拆成一列一張卡後，同一個能力的 Free 與 Pro 會被
     拆到上下兩行，而「比較」正是要並排看才成立的事。全域的 table{min-width:600px}
     是給 .table-wrap 那種可橫捲的表用的，這裡必須解掉——沒解掉就是整頁被撐寬、
     右側一片空白的來源。 */
  .plan-comparison { overflow-x: auto; }
  .plan-comparison table { min-width: 0; font-size: .88rem; }
  .plan-comparison th, .plan-comparison td { padding: .6rem .5rem; }
  .plan-comparison th[scope="row"] { width: 38%; }
  .plan-comparison td { width: 31%; }
  /* 標記與文字改為上下排，欄位才不必為了容納「• 每次 5⭐」而變寬。 */
  .plan-comparison .matrix-marker { display: block; }
}
@media (max-width: 430px) {
  .header-inner, .page, .footer-inner { width: min(100% - 1.25rem, 1120px); }
  /* 上方的方案卡在窄螢幕佔掉整個首屏，等於把比較表推到看不見的地方。 */
  .plan-card { gap: .8rem; padding: 1rem; }
  .plan-price { font-size: 1.6rem; }
  .plan-price-list { font-size: 1rem; }
  /* 品牌、語言、登入、主按鈕要在 360～430px 擠進同一列；主按鈕單獨掉到第二列時看起來像跑版。 */
  .header-inner { gap: .35rem; }
  .brand img { width: 108px; height: auto; }
  .locale-switch { font-size: .85rem; }
  .header-cta { padding-inline: .7rem; font-size: .88rem; }
  .actions .button { width: 100%; }
}

/* ── 匿名分析同意橫幅 ─────────────────────────────────────────
   預設 hidden；由 /public-assets/analytics.js 依瀏覽器自身狀態決定是否顯示
   （頁面經 CDN 快取，不能 server-render 個別訪客的狀態）。
   「拒絕」與「允許」尺寸、對比一致 —— 讓拒絕比同意費力就不算同意。 */
.consent-banner {
  position: fixed; z-index: 20; inset-inline: 0; bottom: 0;
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
  width: min(1120px, calc(100% - 2rem)); margin: 0 auto 1rem;
  padding: 1rem 1.15rem;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 8px 28px rgb(19 34 56 / 18%);
}
.consent-banner[hidden] { display: none; }
.consent-banner-text { flex: 1 1 22rem; min-width: 0; }
.consent-banner-title { margin: 0 0 .2rem; font-weight: 800; }
.consent-banner-body { margin: 0; font-size: .92rem; color: var(--muted); }
.consent-banner-actions { display: flex; flex: 0 0 auto; gap: .6rem; margin-left: auto; }
.consent-button {
  min-height: 44px; padding: .55rem 1.35rem;
  font: inherit; font-weight: 700; line-height: 1.2;
  border-radius: 8px; border: 1px solid var(--brand-dark); cursor: pointer;
}
.consent-button-primary { background: var(--brand-dark); color: #fff; }
.consent-button-secondary { background: var(--paper); color: var(--brand-dark); }
.consent-button:hover { filter: brightness(1.08); }
.consent-button:focus-visible { outline: 3px solid #e8a317; outline-offset: 3px; }
@media (max-width: 620px) {
  .consent-banner { gap: .8rem; padding: .9rem 1rem; }
  .consent-banner-actions { width: 100%; margin-left: 0; }
  .consent-button { flex: 1 1 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .consent-banner { animation: consent-rise .18s ease-out; }
  @keyframes consent-rise { from { transform: translateY(0.5rem); opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}