/* FRIDAI 官網 v2 首頁原型 — 版型骨架參考 ManyChat 的區塊節奏，內容、素材、程式皆為 FRIDAI 自有 */
/* LINE Seed 只載全站用到的字（建置時 subsetFonts() 自動裁，整套 6.9 MB → 約 0.9 MB；10-05）。
   @font-face 不寫在這裡，改由 partials/head-mode.html 的程式載：第一次來的人等第一格畫面出來才下載（10-05 手機速度） */
/* 不載 LINE Seed 特粗（Eb）：她覺得特粗沒有質感（10-04），寫 800、900 的大標會自動用粗（700） */
/* Satoshi 的 @font-face 在 assets/fonts/satoshi.css（字型內嵌在樣式裡，由 head-mode 先載入） */
/* Satoshi 還沒載完之前，英文字先用系統的 Arial 排，字寬調成跟 Satoshi 一樣（量過：Arial 一般體寬 1.0098 倍、粗體 1.016 倍），換字型那一刻字不會跳。只接手 Satoshi 本來就有的字 */
@font-face { font-family: "Satoshi Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); font-weight: 400; size-adjust: 99%; ascent-override: 102%; descent-override: 24.2%; line-gap-override: 10.1%; unicode-range: U+0020-007E, U+00B7, U+00D7, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2192; }
@font-face { font-family: "Satoshi Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Liberation Sans Bold"); font-weight: 700 900; size-adjust: 98.4%; ascent-override: 102.6%; descent-override: 24.4%; line-gap-override: 10.2%; unicode-range: U+0020-007E, U+00B7, U+00D7, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2192; }
/* LINE Seed 還沒載完之前用系統的中文字型代替，但行高的上下比例調成跟 LINE Seed 一樣（上 115.2%、下 45.8%）：
   字型換過去的那一刻字才不會整行往下跳（中文字本來就都是一個字寬，換字型不會改變斷行） */
@font-face { font-family: "LINE Seed TW Fallback"; src: local("Microsoft JhengHei"), local("PingFang TC Regular"), local("Noto Sans CJK TC Regular"), local("Noto Sans TC Regular"); font-weight: 400; ascent-override: 115.2%; descent-override: 45.8%; line-gap-override: 0%; }
@font-face { font-family: "LINE Seed TW Fallback"; src: local("Microsoft JhengHei Bold"), local("PingFang TC Semibold"), local("Noto Sans CJK TC Bold"), local("Noto Sans TC Bold"); font-weight: 700 900; ascent-override: 115.2%; descent-override: 45.8%; line-gap-override: 0%; }

:root {
  --chat: #605DBA;      /* AI 私訊與客服 */
  --social: #3D73D8;    /* AI 留言與海巡（10-05 無障礙：原本 #3F77DF 上的白字對比 4.27，標準要 4.5 → 調深一點點到 4.52，肉眼看不出差別；漸層 --grad 和 logo 不動） */
  --social-ink: #3A6DCD; /* 淺灰底（#F5F5F7）上的藍字再深一點點才夠清楚（4.52） */
  --post: #0EA5E9;      /* AI 發文與排程 */
  --ink: #252E3D;       /* 深色區與深色字 */
  --paper: #F5F5F7;
  --white: #FFFFFF;
  --sub: #6E6E73;
  --line: rgba(37, 46, 61, .12);
  --grad: linear-gradient(135deg, #605DBA, #3F77DF);
  --ease: cubic-bezier(.22, .7, .12, 1);
  --w: 1272px;
  --nav-h: 84px;
  --r-card: 24px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--ink); background: var(--white); font-family: "Satoshi", "Satoshi Fallback", "LINE Seed TW", "LINE Seed TW Fallback", "Microsoft JhengHei", "PingFang TC", system-ui, sans-serif; font-size: 18px; line-height: 1.7; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
.wrap { width: min(var(--w), 100% - 64px); margin: 0 auto; }
.skip { position: absolute; left: -999px; top: 8px; background: #fff; color: var(--ink); padding: 10px 16px; border-radius: 100px; z-index: 200; }
.skip:focus { left: 16px; }
.nb { white-space: nowrap; }
/* 在文案編輯器改過的字（data-te）：只在標點或詞和詞之間換行，一個詞不會被拆開；標題讓每行長度接近、內文避免最後一行只剩一兩個字 */
[data-te] { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; text-wrap: pretty; }
h1[data-te], h2[data-te], h3[data-te] { text-wrap: balance; }
/* 主視覺對話泡泡改過字之後：自己會換行，一行最多 12 個字寬 */
.hb[data-te], .hb:has(> [data-te]:not(small)) { white-space: normal; max-width: 13.8em; } /* 只改小字那行不算，上面那句照手排的換行 */
.hero-lead, .lead, .step-copy p, .platform-card p, .platform-note, .demo-desc p, .s3-body p, .faq-list p, .faq-list summary, .footer-about, .ccard li, .quote p, .hero-note, .footer-legal p { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
/* 手機示範畫面、照片上的對話泡泡：地方很窄，一樣只在標點、空格和「可以換行」的記號那裡換行（記號由建置程式放在詞和詞之間），一個詞不會被拆成兩行 */
.screen, .phero-chat { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
/* 英文頁（英文版、FRIDAI for X）：英文在空格換行。標題各行長度接近，段落最後一行不會只剩一個字；
   中文版手排斷行、整行不拆的地方（主視覺的對話泡泡、產品頁主視覺的清單）改成自己換行 */
html:lang(en) :is(h1, h2, h3, h4) { text-wrap: balance; }
html:lang(en) :is(p, li, dd, blockquote, figcaption, summary) { text-wrap: pretty; }
html:lang(en) .hb { white-space: normal; max-width: 15em; }
html:lang(en) .phero-list li { white-space: normal; }
html:lang(en) .hchat, html:lang(en) .phero-chat { font-family: "Satoshi", "Satoshi Fallback", "LINE Seed TW", "LINE Seed TW Fallback", "Microsoft JhengHei", sans-serif; } /* 照片上的對話泡泡：中文版用中文字型排，英文的撇號（I’d）在中文字型裡是全形，看起來像多一個空格 */
html:lang(en) .bcard-cover b::first-letter { text-transform: uppercase; } /* 部落格卡片色塊上的關鍵字（現站英文是小寫開頭）：當標題放大時第一個字母大寫 */
@media (min-width: 900px) { /* 前後對照卡（桌機）：英文句子比較長，照中文的寬度每行都會折成兩行、卡片比視窗還高 → 加寬；清單行距和間距收一點（字不小於 16px）。手機版維持原本的寬度 */
  html:lang(en) .ccard { width: min(calc(var(--u) * 600), 50vw - 64px); }
  html:lang(en) .ccard h3 { font-size: calc(var(--u) * 30); }
  html:lang(en) .ccard { padding-top: calc(var(--u) * 24); padding-bottom: calc(var(--u) * 22); }
  html:lang(en) .ccard ul { padding-top: calc(var(--u) * 14); }
  html:lang(en) .ccard li { font-size: max(16px, calc(var(--u) * 15)); line-height: 1.4; padding: calc(var(--u) * 8) 0; }
}
@media (max-height: 700px) and (min-width: 900px) { /* 矮視窗（筆電把瀏覽器縮小）：再收緊（.cards 加上去才蓋得過 Social 頁的 cards-long） */
  html:lang(en) .cards .ccard h3 { font-size: 26px; }
  html:lang(en) .cards .ccard ul { margin-top: 8px; padding-top: 8px; }
  html:lang(en) .cards .ccard li { padding: 4px 0; font-size: 16px; line-height: 1.3; }
  html:lang(en) .cards .ccard .btn { margin-top: 12px; height: 44px; }
}
html:lang(en) .screen { font-size: 14px; line-height: 1.5; } /* 手機示範畫面：英文句子比較長，字小一號才放得進畫面（14px 是小字下限） */
@media (max-width: 1023px) { /* 窄螢幕的手機示範畫面：英文會多折一行（巡邏通知四則、發文系統兩個長名稱），間距收一點才放得進畫面 */
  html:lang(en) .alerts { gap: 6px; padding: 10px; }
  html:lang(en) .alert { padding: 8px 12px; }
  html:lang(en) .alert p, html:lang(en) .a-meta { margin-top: 4px; }
  html:lang(en) .lines { gap: 8px; padding: 12px; }
  html:lang(en) .line { padding: 6px 12px; }
}
html:lang(en) .step-tag { height: auto; min-height: 36px; padding-top: 6px; padding-bottom: 6px; line-height: 1.4; text-wrap: balance; } /* 小標籤：英文比較長，手機上換兩行時底色要跟著長高 */
html:lang(en) .chead-copy .h2 { font-size: clamp(36px, 4.6vw, 60px); } /* 聯絡頁大標：英文「Free Consultation」一行要放得下左欄，不然每個字各一行 */
html:lang(en) .c-opt .btn { max-width: 100%; height: auto; min-height: 52px; padding: 13px 24px; white-space: normal; line-height: 1.3; text-align: center; } /* 聯絡頁卡片的按鈕：現站英文的字很長，手機上放不下就換行 */

/* 按鈕：全圓角 */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 28px; border-radius: 999px; font-weight: 700; font-size: 17px; line-height: 1; white-space: nowrap; transition: transform .25s var(--ease), background .25s, color .25s, box-shadow .25s; }
.btn:hover { transform: translateY(-1px); }
.btn-white { background: #fff; color: var(--ink); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-grad { background: var(--grad); color: #fff; box-shadow: 0 4px 12px rgba(63, 119, 223, .3); }
.btn-ghost { box-shadow: inset 0 0 0 1.5px currentColor; }
.btn-wide { width: 100%; height: 64px; font-size: 19px; }

/* 導覽列 */
.nav { position: fixed; z-index: 100; top: 0; left: 0; right: 0; height: var(--nav-h); display: flex; align-items: center; gap: 28px; padding: 0 32px; color: #fff; transition: top .35s var(--ease), left .35s var(--ease), right .35s var(--ease), height .35s var(--ease), background .35s, color .35s, border-radius .35s, box-shadow .35s; }
/* nav-logo:start（tools/make-nav-logo.py 產生，別手改） */
.nav-logo { position: relative; display: block; height: 30px; width: 123px; flex: none; }
.nl { position: absolute; inset: 0; pointer-events: none; --py: 0px; }
.nl i { position: absolute; overflow: hidden; }
.nl b { display: block; width: 100%; height: 100%; background: url(assets/nav-logo/pieces.png) no-repeat var(--px) var(--py) / 162px 102px; }
.nl-m { left: -1px; top: -2px; width: 24px; height: 34px; --px: 0px; }
.nl-f { left: 27px; top: -2px; width: 17px; height: 26px; --px: -25px; --d: 6; }
.nl-r { left: 44px; top: -2px; width: 21px; height: 26px; --px: -43px; --d: 5; }
.nl-i { left: 65px; top: -2px; width: 8px; height: 26px; --px: -65px; --d: 4; }
.nl-d { left: 74px; top: -2px; width: 23px; height: 26px; --px: -74px; --d: 3; }
.nl-a { left: 94px; top: -2px; width: 23px; height: 26px; --px: -98px; --d: 2; }
.nl-u { left: 94px; top: 24px; width: 30px; height: 7px; --px: -122px; --d: 1; }
.nl-i2 { left: 116px; top: -2px; width: 8px; height: 26px; --px: -153px; --d: 0; }
@property --py { syntax: "<length>"; inherits: true; initial-value: 0px; }
.nav-ink .nav:not(.is-scrolled) .nl { --py: -34px; }
.page-product.theme-chat .nav:not(.is-scrolled) .nl, .page-product.theme-social .nav:not(.is-scrolled) .nl { --py: -68px; }
.nav.is-scrolled .nl { --py: -34px; transition: --py 0s .1s; }
body.menu-open .nav .nl, body.menu-open.nav-ink .nav:not(.is-scrolled) .nl { --py: 0px; }
.nav.is-scrolled .nl i:not(.nl-m) b { transform: translateY(110%); transition: transform .2s cubic-bezier(.55, 0, .8, .35) calc(.1s + var(--d) * 35ms); }
.nl-anim { position: absolute; left: -16px; top: -12px; width: 290px; height: 72px; pointer-events: none; visibility: hidden; background: no-repeat 0 0 / 1740px 720px; --frames: 57; --cols: 6; }
.nl-anim { --src: anim-white; } .nav-ink .nl-anim { --src: anim-dark; } .page-product.theme-chat .nl-anim, .page-product.theme-social .nl-anim { --src: anim-mono; }
.nav.logo-play .nl { visibility: hidden; }
.nav.logo-play .nl-anim { visibility: visible; }
@media (prefers-reduced-motion: reduce) { .nav.is-scrolled .nl i:not(.nl-m) b { transition: none; } }
/* nav-logo:end */
.nav-links { display: flex; align-items: center; gap: 4px; margin: 0 auto; }
.nav-links > a, .nav-item > button { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px; border-radius: 999px; font-size: 16px; font-weight: 700; transition: background .2s; }
.nav-links > a:hover, .nav-item > button:hover, .nav-item:focus-within > button { background: rgba(255, 255, 255, .16); }
.nav-item { position: relative; }
.nav-item > button::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.nav-menu { position: absolute; top: 52px; left: 0; width: 380px; padding: 10px; border-radius: 20px; background: #fff; color: var(--ink); box-shadow: 0 8px 32px rgba(0, 0, 0, .08); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .25s var(--ease), visibility .2s; }
.nav-item:hover .nav-menu, .nav-item:focus-within .nav-menu { opacity: 1; visibility: visible; transform: none; }
.nav-menu a { display: grid; grid-template-columns: 12px 1fr; column-gap: 14px; align-items: start; padding: 14px 16px; border-radius: 14px; }
.nav-menu a:hover { background: var(--paper); }
.nav-menu i { width: 12px; height: 12px; border-radius: 50%; margin-top: 8px; }
.nav-menu strong { display: block; font-size: 17px; line-height: 1.5; }
.nav-menu small { display: block; font-size: 15px; line-height: 1.5; color: var(--sub); }
/* 語言切換（10-05 學 ManyChat 放在 Logo 右邊）：跟「產品」同一種下拉，字小一點、靠 Logo 近一點。
   捲下去 Logo 收成 F 符號（123px → 23px）時，等字掉完再往左靠 100px；v2.js 的 Logo 動畫避讓用它回原位後的位置算 */
.nav-lang { margin-left: -16px; transition: transform .3s var(--ease); }
.nav-lang > button { height: 36px; padding: 0 12px; font-size: 15px; }
.nav-lang-menu { top: 46px; width: 168px; padding: 8px; border-radius: 16px; }
.nav-lang-menu a { display: block; padding: 10px 14px; border-radius: 10px; font-size: 16px; font-weight: 700; }
.nav-lang-menu a[aria-current] { color: var(--chat); }
.nav.is-scrolled .nav-lang { transform: translateX(-100px); transition-delay: .35s; }
@media (prefers-reduced-motion: reduce) { .nav-lang { transition: none; } }
.mobile-menu .mm-lang { font-size: 17px; opacity: .85; border-bottom: 0; } /* 手機選單最下面：換另一個語言 */
.nav-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.nav-actions .btn { height: 44px; padding: 0 20px; font-size: 16px; }
.nav-login { display: inline-flex; align-items: center; height: 44px; padding: 0 14px; font-size: 16px; font-weight: 700; border-radius: 999px; }
.nav-login:hover { background: rgba(255, 255, 255, .16); }
.nav-burger { display: none; width: 44px; height: 44px; border-radius: 50%; position: relative; }
.nav-burger::before, .nav-burger::after { content: ""; position: absolute; left: 12px; right: 12px; height: 2px; background: currentColor; transition: transform .25s var(--ease), top .25s var(--ease); }
.nav-burger::before { top: 17px; } .nav-burger::after { top: 25px; }
.nav.is-scrolled { top: 12px; left: 20px; right: 20px; height: 64px; padding: 0 12px 0 22px; border-radius: 999px; background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px); color: var(--ink); box-shadow: 0 2px 8px rgba(0, 0, 0, .06); }
.nav.is-scrolled .nav-links > a:hover, .nav.is-scrolled .nav-item > button:hover, .nav.is-scrolled .nav-login:hover { background: rgba(37, 46, 61, .07); }
.nav.is-scrolled .btn-white { background: var(--grad); color: #fff; }
.mobile-menu { position: fixed; z-index: 99; inset: 0; padding: 104px 24px 32px; background: var(--ink); color: #fff; display: none; flex-direction: column; gap: 4px; overflow-y: auto; }
.mobile-menu a { padding: 16px 4px; font-size: 22px; font-weight: 700; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.mobile-menu small { display: block; font-size: 15px; font-weight: 400; opacity: .75; }
.mobile-menu .btn { margin-top: 20px; border-bottom: 0; }
body.menu-open { overflow: hidden; }
body.menu-open .mobile-menu { display: flex; }
body.menu-open .nav { color: #fff; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.menu-open .nav-burger::before { top: 21px; transform: rotate(45deg); } body.menu-open .nav-burger::after { top: 21px; transform: rotate(-45deg); }

/* 色塊上的淡格線 */
.grid-lines { background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 96px 96px; background-position: center top; }

/* 主視覺：整面循環影片。排法照 ManyChat 的主視覺——標題、說明、按鈕在左上，三個重點在左下，手機旁邊跳出對話。
   影片比例 1662:940（高 = 寬 × 56.56%）。高度最多到影片的高，所以左右不會被裁；視窗比較扁的時候只裁掉最下面。
   手機底部在「寬 × 43.3%」的位置，下面再留 76px 放三個重點，所以高度至少 43.3vw + 76px。 */
.hero { position: relative; overflow: hidden; height: clamp(43.3vw + 76px, 100vh, 56.56vw); background: #082842; color: #fff; }
@supports (height: 100svh) { .hero { height: clamp(43.3vw + 76px, 100svh, 56.56vw); } }
.hero-stage { position: absolute; inset: 0; overflow: hidden; container-type: size; }
.hero-stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 22, 48, .12) 0%, rgba(6, 22, 48, 0) 22%); pointer-events: none; }
.hero-frame { position: absolute; left: 0; top: 0; width: 100%; width: max(100cqw, 176.81cqh); aspect-ratio: 1662 / 940; container-type: inline-size; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 手機螢幕上的 FRIDAI 符號：一塊 390×844 的「螢幕」用透視貼到影片裡手機螢幕的四個角。
   座標以影片寬 1662 為準（matrix3d 是算好的），外層再跟著影片實際寬度縮放（tan(atan2(a, b)) = a ÷ b）。
   符號分兩片：直角那片不動，弧那片繞固定一點轉 180 度——轉 180 是「圓弧」、0 是官方的 F。 */
.hphone { position: absolute; left: 0; top: 0; width: 1662px; height: 940px; transform-origin: 0 0; scale: tan(atan2(100cqw, 1662px)); pointer-events: none; }
.hscreen { position: absolute; left: 0; top: 0; width: 390px; height: 844px; transform-origin: 0 0; transform: matrix3d(0.2804197, 0.03294382, 0, 0.00008587009, -0.00472211, 0.2092381, 0, -0.00007684202, 0, 0, 1, 0, 445, 482.4, 0, 1); }
.hmark-sk, .hmark-arc { position: absolute; left: 107px; top: 247.8px; width: 176px; height: auto; max-width: none; }
.hmark-arc { transform-origin: 49.956% 66.381%; }
/* 舊瀏覽器算不出上面那個縮放比例：符號那一層不顯示（螢幕只剩漸層底） */
@supports not (scale: tan(atan2(1px, 1px))) { .hphone { display: none; } }
/* 手機旁邊的對話：泡泡從最下面冒出來，舊的往上推、最上面的淡出（同時最多兩則）。位置和大小都跟著影片縮放。
   沒有動畫的時候（系統設「減少動態」）停在第一問一答。 */
.hchat { position: absolute; left: 43.98%; bottom: 24.9%; width: 21.4em; height: 0; font-family: "LINE Seed TW", "LINE Seed TW Fallback", "Microsoft JhengHei", sans-serif; font-size: 22px; font-size: clamp(16px, 1.33cqw, 24px); font-weight: 700; line-height: 1.5; color: #1B2130; --g: .4em; }
.hmsg { position: absolute; bottom: 0; display: flex; align-items: flex-end; gap: .5em; white-space: nowrap; opacity: 0; }
.hmsg.in { left: 0; transform-origin: 0 100%; }
.hmsg.out { right: 0; transform-origin: 100% 100%; }
.hb { display: block; padding: .62em .9em; border-radius: 1.15em; box-shadow: 0 16px 36px rgba(20, 30, 60, .22), 0 2px 6px rgba(20, 30, 60, .1); }
.in .hb { background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); border-bottom-left-radius: .35em; }
.out .hb { background: var(--chat); color: #fff; border-bottom-right-radius: .35em; }
.hb small { display: block; margin-top: .1em; font-size: max(14px, .72em); font-weight: 400; line-height: 1.4; opacity: .85; }
.hb .bm { display: none; }
.hmsg .brand-tile { width: 2.1em; height: 2.1em; border-radius: .58em; }
.hmsg[data-m="c1"], .hmsg[data-m="r1"] { opacity: 1; }
.hmsg[data-m="c1"] { translate: 0 calc(-1 * (var(--h-r1, 5.5em) + var(--g))); }
.hbell { position: absolute; left: 0; bottom: 0; width: 3.6em; height: 3.6em; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .92); box-shadow: 0 16px 36px rgba(20, 30, 60, .22), 0 2px 6px rgba(20, 30, 60, .1); transform-origin: 0 100%; opacity: 0; }
.hbell svg { width: 2.05em; height: 2.05em; fill: var(--chat); transform-origin: 50% 12%; }
.hbell i { position: absolute; right: .5em; top: .5em; width: .84em; height: .84em; border-radius: 50%; background: #FF3B30; box-shadow: 0 0 0 .13em #fff; }
/* 鈴鐺響的時候往外擴的兩圈 */
.hbell::before, .hbell::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 .11em rgba(255, 255, 255, .9); opacity: 0; }
/* hero-chat:start —— 這一段是 D:/manychat-reskin/hero-cards-ae/scripts/chat_motion.cjs 產生的，要改時間或動法請改那支再重產，不要手改 */
@keyframes h-c1-opacity { 0% { opacity: 0; } 11.884% { opacity: 0; } 14.396% { opacity: 1; } 45.797% { opacity: 1; animation-timing-function: cubic-bezier(0.25, 0.75, 0.5, 1); } 48.116% { opacity: 0; } 100% { opacity: 0; } }
@keyframes h-c1-scale { 0% { scale: 0.8; } 11.884% { scale: 0.8; animation-timing-function: cubic-bezier(0.3333, 1.5672, 0.6667, 1); } 15.749% { scale: 1; } 100% { scale: 1; } }
@keyframes h-c1-y { 0% { translate: 0 0; } 22.609% { translate: 0 0; animation-timing-function: cubic-bezier(0.45, 0.05, 0.25, 1.12); } 26.86% { translate: 0 calc(-1 * (var(--h-r1) + var(--g))); } 45.797% { translate: 0 calc(-1 * (var(--h-r1) + var(--g))); animation-timing-function: cubic-bezier(0.45, 0.05, 0.25, 1.12); } 50.048% { translate: 0 calc(-1 * (var(--h-r1) + var(--g) + var(--h-c2) + var(--g))); } 100% { translate: 0 calc(-1 * (var(--h-r1) + var(--g) + var(--h-c2) + var(--g))); } }
@keyframes h-c1-nudge { 0% { transform: none; } 27.903% { transform: none; } 28.676% { transform: translateY(-0.22em); } 29.449% { transform: none; } 100% { transform: none; } }
@keyframes h-r1-opacity { 0% { opacity: 0; } 26.435% { opacity: 0; } 28.947% { opacity: 1; } 66.667% { opacity: 1; animation-timing-function: cubic-bezier(0.25, 0.75, 0.5, 1); } 68.986% { opacity: 0; } 100% { opacity: 0; } }
@keyframes h-r1-scale { 0% { scale: 0.8; } 26.435% { scale: 0.8; animation-timing-function: cubic-bezier(0.3333, 1.5672, 0.6667, 1); } 30.3% { scale: 1; } 100% { scale: 1; } }
@keyframes h-r1-y { 0% { translate: 0 0; } 45.797% { translate: 0 0; animation-timing-function: cubic-bezier(0.45, 0.05, 0.25, 1.12); } 50.048% { translate: 0 calc(-1 * (var(--h-c2) + var(--g))); } 66.667% { translate: 0 calc(-1 * (var(--h-c2) + var(--g))); animation-timing-function: cubic-bezier(0.45, 0.05, 0.25, 1.12); } 70.918% { translate: 0 calc(-1 * (var(--h-c2) + var(--g) + var(--h-r2) + var(--g))); } 100% { translate: 0 calc(-1 * (var(--h-c2) + var(--g) + var(--h-r2) + var(--g))); } }
@keyframes h-r1-nudge { 0% { transform: none; } 51.092% { transform: none; } 51.865% { transform: translateY(-0.22em); } 52.638% { transform: none; } 100% { transform: none; } }
@keyframes h-c2-opacity { 0% { opacity: 0; } 49.623% { opacity: 0; } 52.135% { opacity: 1; } 78.841% { opacity: 1; animation-timing-function: cubic-bezier(0.25, 0.75, 0.5, 1); } 81.159% { opacity: 0; } 100% { opacity: 0; } }
@keyframes h-c2-scale { 0% { scale: 0.8; } 49.623% { scale: 0.8; animation-timing-function: cubic-bezier(0.3333, 1.5672, 0.6667, 1); } 53.488% { scale: 1; } 100% { scale: 1; } }
@keyframes h-c2-y { 0% { translate: 0 0; } 66.667% { translate: 0 0; animation-timing-function: cubic-bezier(0.45, 0.05, 0.25, 1.12); } 70.918% { translate: 0 calc(-1 * (var(--h-r2) + var(--g))); } 78.841% { translate: 0 calc(-1 * (var(--h-r2) + var(--g))); animation-timing-function: cubic-bezier(0.45, 0.05, 0.25, 1.12); } 83.092% { translate: 0 calc(-1 * (var(--h-r2) + var(--g) + var(--h-c3) + var(--g))); } 100% { translate: 0 calc(-1 * (var(--h-r2) + var(--g) + var(--h-c3) + var(--g))); } }
@keyframes h-c2-nudge { 0% { transform: none; } 71.961% { transform: none; } 72.734% { transform: translateY(-0.22em); } 73.507% { transform: none; } 100% { transform: none; } }
@keyframes h-r2-opacity { 0% { opacity: 0; } 70.493% { opacity: 0; } 73.005% { opacity: 1; } 92.754% { opacity: 1; animation-timing-function: cubic-bezier(0.45, 0.05, 0.25, 1); } 95.652% { opacity: 0; } 100% { opacity: 0; } }
@keyframes h-r2-scale { 0% { scale: 0.8; } 70.493% { scale: 0.8; animation-timing-function: cubic-bezier(0.3333, 1.5672, 0.6667, 1); } 74.357% { scale: 1; } 100% { scale: 1; } }
@keyframes h-r2-y { 0% { translate: 0 0; } 78.841% { translate: 0 0; animation-timing-function: cubic-bezier(0.45, 0.05, 0.25, 1.12); } 83.092% { translate: 0 calc(-1 * (var(--h-c3) + var(--g))); } 92.754% { translate: 0 calc(-1 * (var(--h-c3) + var(--g))); animation-timing-function: cubic-bezier(0.45, 0.05, 0.25, 1); } 95.652% { translate: 0 calc(-1 * (var(--h-c3) + var(--g) + 0.3em)); } 100% { translate: 0 calc(-1 * (var(--h-c3) + var(--g) + 0.3em)); } }
@keyframes h-r2-nudge { 0% { transform: none; } 84.135% { transform: none; } 84.908% { transform: translateY(-0.22em); } 85.681% { transform: none; } 100% { transform: none; } }
@keyframes h-c3-opacity { 0% { opacity: 0; } 82.667% { opacity: 0; } 85.179% { opacity: 1; } 92.754% { opacity: 1; animation-timing-function: cubic-bezier(0.45, 0.05, 0.25, 1); } 95.652% { opacity: 0; } 100% { opacity: 0; } }
@keyframes h-c3-scale { 0% { scale: 0.8; } 82.667% { scale: 0.8; animation-timing-function: cubic-bezier(0.3333, 1.5672, 0.6667, 1); } 86.531% { scale: 1; } 100% { scale: 1; } }
@keyframes h-c3-y { 0% { translate: 0 0; } 92.754% { translate: 0 0; animation-timing-function: cubic-bezier(0.45, 0.05, 0.25, 1); } 95.652% { translate: 0 calc(-1 * (0.3em)); } 100% { translate: 0 calc(-1 * (0.3em)); } }
@keyframes h-c3-nudge { 0% { transform: none; } 100% { transform: none; } }
@keyframes h-bell-opacity { 0% { opacity: 0; } 2.899% { opacity: 0; } 5.411% { opacity: 1; } 10.435% { opacity: 1; animation-timing-function: cubic-bezier(0.45, 0.05, 0.25, 1); } 11.594% { opacity: 0; } 100% { opacity: 0; } }
@keyframes h-bell-scale { 0% { scale: 0.8; } 2.899% { scale: 0.8; animation-timing-function: cubic-bezier(0.3333, 1.5672, 0.6667, 1); } 6.763% { scale: 1; } 10.435% { scale: 1; animation-timing-function: cubic-bezier(0.45, 0.05, 0.25, 1); } 11.594% { scale: 0.7; } 100% { scale: 0.7; } }
@keyframes h-bellicon-rotate { 0% { rotate: 0deg; } 4.928% { rotate: 0deg; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); } 5.507% { rotate: -20deg; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); } 6.319% { rotate: 17deg; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); } 7.13% { rotate: -13deg; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); } 7.942% { rotate: 9deg; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); } 8.754% { rotate: -5deg; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); } 9.449% { rotate: 2deg; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); } 9.971% { rotate: 0deg; } 100% { rotate: 0deg; } }
@keyframes h-belldot-scale { 0% { scale: 0; } 5.507% { scale: 0; animation-timing-function: cubic-bezier(0.3333, 1, 0.6667, 1); } 6.667% { scale: 1.35; animation-timing-function: cubic-bezier(0.3333, 1.6667, 0.6667, 1); } 8.792% { scale: 1; } 100% { scale: 1; } }
@keyframes h-bellring1-opacity { 0% { opacity: 0; } 5.501% { opacity: 0; } 5.507% { opacity: 0.75; } 9.372% { opacity: 0; } 100% { opacity: 0; } }
@keyframes h-bellring1-scale { 0% { scale: 1; } 5.507% { scale: 1; animation-timing-function: cubic-bezier(0.3333, 1, 0.6667, 1); } 9.372% { scale: 1.9; } 100% { scale: 1.9; } }
@keyframes h-bellring2-opacity { 0% { opacity: 0; } 7.53% { opacity: 0; } 7.536% { opacity: 0.75; } 11.401% { opacity: 0; } 100% { opacity: 0; } }
@keyframes h-bellring2-scale { 0% { scale: 1; } 7.536% { scale: 1; animation-timing-function: cubic-bezier(0.3333, 1, 0.6667, 1); } 11.401% { scale: 1.9; } 100% { scale: 1.9; } }
@keyframes h-arc-rotate { 0% { rotate: 180deg; } 16.812% { rotate: 180deg; animation-timing-function: cubic-bezier(0.68, 0, 0.32, 1); } 17.275% { rotate: 192deg; animation-timing-function: cubic-bezier(0.68, 0, 0.32, 1); } 18.435% { rotate: -9deg; animation-timing-function: cubic-bezier(0.68, 0, 0.32, 1); } 19.014% { rotate: 4deg; animation-timing-function: cubic-bezier(0.68, 0, 0.32, 1); } 19.478% { rotate: 0deg; } 93.043% { rotate: 0deg; animation-timing-function: cubic-bezier(0.68, 0, 0.32, 1); } 95.362% { rotate: 180deg; } 100% { rotate: 180deg; } }
/* 舊瀏覽器不認得 translate／scale／rotate 這幾個獨立屬性：整段動畫不啟用，停在第一問一答 */
@media (prefers-reduced-motion: no-preference) { @supports (translate: 0 0) and (scale: 1) and (rotate: 0deg) {
  .hmsg[data-m="c1"] { animation: h-c1-opacity 17.25s linear infinite, h-c1-scale 17.25s linear infinite, h-c1-y 17.25s linear infinite, h-c1-nudge 17.25s linear infinite; }
  .hmsg[data-m="r1"] { animation: h-r1-opacity 17.25s linear infinite, h-r1-scale 17.25s linear infinite, h-r1-y 17.25s linear infinite, h-r1-nudge 17.25s linear infinite; }
  .hmsg[data-m="c2"] { animation: h-c2-opacity 17.25s linear infinite, h-c2-scale 17.25s linear infinite, h-c2-y 17.25s linear infinite, h-c2-nudge 17.25s linear infinite; }
  .hmsg[data-m="r2"] { animation: h-r2-opacity 17.25s linear infinite, h-r2-scale 17.25s linear infinite, h-r2-y 17.25s linear infinite, h-r2-nudge 17.25s linear infinite; }
  .hmsg[data-m="c3"] { animation: h-c3-opacity 17.25s linear infinite, h-c3-scale 17.25s linear infinite, h-c3-y 17.25s linear infinite, h-c3-nudge 17.25s linear infinite; }
  .hbell { animation: h-bell-opacity 17.25s linear infinite, h-bell-scale 17.25s linear infinite; }
  .hbell svg { animation: h-bellicon-rotate 17.25s linear infinite; }
  .hbell i { animation: h-belldot-scale 17.25s linear infinite; }
  .hbell::before { animation: h-bellring1-opacity 17.25s linear infinite, h-bellring1-scale 17.25s linear infinite; }
  .hbell::after { animation: h-bellring2-opacity 17.25s linear infinite, h-bellring2-scale 17.25s linear infinite; }
  .hmark-arc { animation: h-arc-rotate 17.25s linear infinite; }
  .hero-frame.is-paused :is(.hmsg, .hbell, .hbell svg, .hbell i, .hmark-arc), .hero-frame.is-paused .hbell::before, .hero-frame.is-paused .hbell::after { animation-play-state: paused; }
} }
/* hero-chat:end */
.hero-copy { position: absolute; z-index: 2; left: 32px; top: clamp(92px, 7.2vw, 132px); }
.hero h1 { font-size: clamp(40px, 5vw, 84px); line-height: 1.2; font-weight: 800; letter-spacing: 0; text-shadow: 0 2px 22px rgba(4, 16, 40, .3); }
.hero-lead { margin-top: clamp(14px, 1.4vw, 22px); max-width: 30em; font-size: clamp(18px, 1.39vw, 20px); line-height: 1.7; text-shadow: 0 1px 12px rgba(4, 16, 40, .34); }
.hero-cta { margin-top: clamp(20px, 1.95vw, 30px); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.hero-note { font-size: 16px; text-shadow: 0 1px 10px rgba(4, 16, 40, .36); }
.hero-stats { position: absolute; z-index: 2; left: 32px; bottom: 24px; display: flex; gap: 10px; }
.hero-stats li { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px; background: rgba(9, 18, 36, .5); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); font-size: 16px; line-height: 1; white-space: nowrap; }
.hero-stats strong { font-size: 18px; font-weight: 800; }
/* 首頁主視覺底下：每一個支援平台的 logo（官方圖示，她說「不要有顏色」→ 全部單色白，不要彩色方塊） */
.hero-plats { position: absolute; z-index: 2; left: 32px; bottom: 24px; display: flex; align-items: center; gap: 18px; height: 48px; padding: 0 20px; border-radius: 999px; background: rgba(9, 18, 36, .5); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.hero-plats li { display: flex; }
.hero-plats svg { display: block; width: auto; height: 20px; }

/* 合作品牌 */
.trust { background: #fff; padding: 22px 0; border-bottom: 1px solid var(--line); }
.trust .wrap { display: flex; align-items: center; gap: 28px; }
.trust b { flex: none; font-size: 16px; font-weight: 700; color: var(--sub); }
.trust ul { display: flex; flex-wrap: wrap; align-items: center; gap: 14px clamp(14px, 2vw, 34px); }
.trust img { height: 30px; width: auto; filter: brightness(0); opacity: .6; }
.trust li[aria-hidden] { display: none; } /* 跑馬燈用的複製品（v2.js 加的），只有手機版用 */

/* 手機畫面（純樣式畫的示意） */
.device { position: relative; width: 320px; height: 640px; border-radius: 44px; background: #10141C; padding: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, .18); }
.device::before { content: ""; position: absolute; z-index: 3; top: 20px; left: 50%; width: 92px; height: 24px; margin-left: -46px; border-radius: 999px; background: #10141C; }
.screen { position: relative; width: 100%; height: 100%; border-radius: 34px; background: #fff; color: var(--ink); overflow: hidden; display: flex; flex-direction: column; font-size: 15px; line-height: 1.55; }
.screen-top { flex: none; display: flex; align-items: center; gap: 8px; padding: 52px 12px 12px; border-bottom: 1px solid var(--line); background: #fff; }
.avatar { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 16px; background: var(--grad); overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar .av-f { width: 15px; height: auto; }
.screen-top strong { display: block; font-size: 16px; line-height: 1.3; }
.screen-top small { display: block; font-size: 14px; color: var(--sub); line-height: 1.3; white-space: nowrap; }
.screen-top strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 帳號名稱太長：用「…」收尾，不會壓到右邊的值班標籤 */
.screen-top > span:nth-child(2) { min-width: 0; }
.on-duty { margin-left: auto; flex: none; font-size: 14px; font-weight: 700; font-style: normal; color: #1B7F39; background: #EAF8EE; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.chat { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 16px 14px 20px; background: #F6F7F9; }
.screen :is(.chat, .comments, .alerts, .plan, .gen, .langs, .stats, .lines) { min-height: 0; }
.screen .comments { flex: 0 1 auto; } /* 留言串可以被壓縮（內容多了就往上捲），上面的照片最少留 150px */
.screen .is-scroll { position: relative; justify-content: flex-start; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px); mask-image: linear-gradient(to bottom, transparent 0, #000 22px); } /* 對話比手機畫面長：像真的聊天室，新訊息出來時舊的往上捲走（v2.js 加 is-scroll、跟著訊息捲） */
.chat-time { align-self: center; margin-bottom: auto; padding: 3px 12px; border-radius: 999px; background: rgba(37, 46, 61, .07); font-size: 14px; color: var(--sub); }
.msg { max-width: 82%; padding: 10px 14px; border-radius: 18px; opacity: 0; transform: translateY(12px) scale(.98); }
.msg.in { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.msg.out { align-self: flex-end; background: var(--chat); color: #fff; border-bottom-right-radius: 6px; }
.msg small { display: block; margin-top: 4px; font-size: 14px; opacity: .85; }
.is-live .msg { animation: msgIn .5s var(--ease) forwards; }
.is-live .msg:nth-child(1) { animation-delay: .25s; } .is-live .msg:nth-child(2) { animation-delay: 1.1s; }
.is-live .msg:nth-child(3) { animation-delay: 2.1s; } .is-live .msg:nth-child(4) { animation-delay: 3s; }
.is-live .msg:nth-child(5) { animation-delay: 3.9s; } .is-live .msg:nth-child(6) { animation-delay: 4.8s; }
.is-live .msg:nth-child(7) { animation-delay: 5.7s; } .is-live .msg:nth-child(8) { animation-delay: 6.6s; }
/* 每段示範最後的結果（成交、發出、處理完）：綠色勾勾的小膠囊，等前面都出來了才出現 */
.done { align-self: center; flex: none; max-width: 100%; padding: 7px 14px; border-radius: 999px; background: #EAF8EE; color: #1B7F39; font-size: 14px; font-weight: 700; line-height: 1.4; text-align: center; opacity: 0; transform: translateY(12px); }
.done::before { content: "✓ "; }
.is-live .done { animation: msgIn .5s var(--ease) 4.6s forwards; }
@keyframes msgIn { to { opacity: 1; transform: none; } }
/* 顧客傳來的照片和語音、對話中間「過了多久」的小標（分頁示範：圖片辨識、語音訊息、自動跟進） */
.msg.photo { padding: 4px; }
.msg.photo img { display: block; width: 150px; height: auto; border-radius: 14px; }
.msg.voice .vm { display: flex; align-items: center; gap: 8px; }
.msg.voice .vm i { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); }
.msg.voice .vm i::after { content: ""; position: absolute; left: 11px; top: 8px; border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent #fff; }
.msg.voice .vm svg { flex: none; width: 86px; height: 20px; fill: none; stroke: var(--sub); stroke-width: 2.4; stroke-linecap: round; }
.msg.voice .vm b { font-size: 14px; color: var(--sub); }
.msg.voice small { color: var(--sub); opacity: 1; }
.msg.gap { align-self: center; max-width: none; padding: 3px 12px; border-radius: 999px; background: rgba(37, 46, 61, .07); color: var(--sub); font-size: 14px; line-height: 1.5; }
/* 留言畫面 */
.reel { position: relative; flex: 1; min-height: 150px; overflow: hidden; background: #3A2A1E; }
.reel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 34% 50%; }
.reel-cap { position: absolute; left: 8px; right: 8px; bottom: 10px; text-align: center; font-size: 14px; font-weight: 700; line-height: 2.1; color: #fff; }
.reel-cap > span { padding: 5px 11px; border-radius: 999px; background: var(--social); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.comments { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 18px; background: #F6F7F9; }
.cmt { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; opacity: 0; transform: translateY(12px); }
.cmt i { width: 30px; height: 30px; border-radius: 50%; background: #CBD3E1; overflow: hidden; }
.cmt i img { width: 100%; height: 100%; object-fit: cover; }
.cmt.me i { background: var(--grad); }
.cmt p { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 8px 12px; }
.cmt b { display: block; font-size: 14px; }
.dm-toast { margin-top: 4px; padding: 12px 14px; border-radius: 16px; background: var(--social); color: #fff; opacity: 0; transform: translateY(12px); }
.dm-toast b { display: block; font-size: 14px; opacity: .9; }
.is-live .cmt, .is-live .dm-toast { animation: msgIn .5s var(--ease) forwards; }
.is-live .cmt:nth-child(5) { animation-delay: 3.9s; } .is-live .cmt:nth-child(6) { animation-delay: 4.8s; }
.is-live .cmt:nth-child(1) { animation-delay: .25s; } .is-live .cmt:nth-child(2) { animation-delay: 1.2s; } .is-live .dm-toast { animation-delay: 2.3s; }
/* 排程畫面 */
.plan { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 14px; background: #F6F7F9; }
.plan-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.plan-week span { display: grid; place-items: center; height: 44px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-size: 14px; font-weight: 700; color: var(--sub); }
.plan-week .on { background: var(--post); color: #fff; border-color: transparent; }
.plan-item { display: grid; grid-template-columns: 54px 1fr; gap: 12px; align-items: center; padding: 10px; border-radius: 16px; background: #fff; border: 1px solid var(--line); opacity: 0; transform: translateY(12px); }
.plan-item i { width: 54px; height: 54px; border-radius: 12px; background: linear-gradient(135deg, #CFEFFC, #A6DDF7); overflow: hidden; }
.plan-item i img { width: 100%; height: 100%; object-fit: cover; }
.plan-hero { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; }
.plan-hero i { width: 100%; height: 168px; border-radius: 0; }
.plan-hero > div { padding: 10px 12px 12px; }
.plan-item b { display: block; font-size: 15px; line-height: 1.4; }
.plan-meta { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 14px; color: var(--sub); }
.plan-meta svg { width: 16px; height: 16px; }
.plan-meta em { margin-left: auto; font-style: normal; font-weight: 700; color: #0B76A8; }
.is-live .plan-item { animation: msgIn .5s var(--ease) forwards; }
.is-live .plan-item:nth-child(2) { animation-delay: .3s; } .is-live .plan-item:nth-child(3) { animation-delay: 1.1s; } .is-live .plan-item:nth-child(4) { animation-delay: 1.9s; }
/* 首頁「AI 發文與排程」那支手機：給主題 → AI 寫好貼文（一行一行打出來）→ 排程 → 發佈 */
.compose { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px; background: #F6F7F9; }
.cp-ask, .cp-post, .cp-sched, .cp-done { opacity: 0; transform: translateY(12px); }
.cp-ask { align-self: flex-start; max-width: 90%; padding: 8px 12px; border-radius: 14px; background: #fff; border: 1px solid var(--line); font-size: 14px; line-height: 1.5; }
.cp-ask b { display: block; color: var(--sub); }
.cp-post { flex: none; border-radius: 16px; background: #fff; border: 1px solid var(--line); overflow: hidden; }
.cp-img { display: block; height: 108px; background: #EEE6DC; }
.cp-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cp-text { padding: 10px 12px 12px; font-size: 15px; line-height: 1.55; }
.cp-text span { display: block; clip-path: inset(0 100% 0 0); }
.cp-sched { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; background: #fff; border: 1px solid var(--line); font-size: 14px; }
.cp-plat { display: flex; gap: 5px; }
.cp-plat svg { width: 16px; height: 16px; }
.cp-sched em { margin-left: auto; font-style: normal; font-weight: 700; color: #0B7FB5; }
.cp-done { padding: 9px 12px; border-radius: 14px; background: #EAF8EE; color: #1B7F39; font-size: 14px; line-height: 1.5; }
.cp-done b { display: block; font-weight: 800; }
.is-live .cp-ask { animation: msgIn .5s var(--ease) .2s forwards; }
.is-live .cp-post { animation: msgIn .5s var(--ease) .8s forwards; }
.is-live .cp-text span { animation: cpType .8s linear forwards; }
.is-live .cp-text span:nth-child(1) { animation-delay: 1.3s; } .is-live .cp-text span:nth-child(2) { animation-delay: 2.1s; animation-duration: 1.2s; } .is-live .cp-text span:nth-child(3) { animation-delay: 3.3s; }
.is-live .cp-sched { animation: msgIn .5s var(--ease) 4.4s forwards; }
.is-live .cp-done { animation: msgIn .5s var(--ease) 5.4s forwards; }
@keyframes cpType { to { clip-path: inset(0 0 0 0); } }

/* 見證跑馬燈 */
.marquee { border-bottom: 1px solid var(--line); background: #fff; overflow: hidden; padding: 22px 0; }
.marquee-track { display: flex; width: max-content; animation: marquee 60s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-set { display: flex; flex: none; }
.quote { flex: none; display: flex; align-items: center; gap: 14px; padding: 0 34px; border-right: 1px solid var(--line); }
.quote i { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--grad); display: grid; place-items: center; color: #fff; font-style: normal; font-weight: 700; font-size: 16px; }
.quote i svg { width: 21px; height: 21px; }
.quote p { font-size: 17px; font-weight: 700; line-height: 1.5; }
.quote small { display: block; font-size: 15px; font-weight: 400; color: var(--sub); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* 區段大標 */
.title-block { padding: 128px 0 112px; text-align: center; }
.spark { width: 44px; height: 44px; margin: 0 auto 24px; }
.h2 { font-size: clamp(30px, 4.2vw, 64px); line-height: 1.25; font-weight: 800; letter-spacing: 0; }
.lead { margin: 22px auto 0; max-width: 32em; font-size: 20px; line-height: 1.7; color: var(--sub); }

/* 釘住的手機示範 */
.showcase { position: relative; height: 400vh; color: #fff; }
.showcase .pin { position: sticky; top: 0; height: 100vh; overflow: hidden; background-color: var(--chat); transition: background-color .6s var(--ease), color .6s var(--ease); }
.showcase[data-step="1"] .pin { background-color: var(--social); }
.showcase[data-step="2"] .pin { background-color: var(--post); color: var(--ink); }
.showcase[data-step="2"] .grid-lines { background-image: linear-gradient(rgba(37, 46, 61, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(37, 46, 61, .07) 1px, transparent 1px); }
.showcase-inner { position: relative; height: 100%; padding-top: var(--nav-h); }
.dashes { position: absolute; top: calc(var(--nav-h) + 20px); left: 0; display: flex; gap: 8px; }
.dashes i { width: 44px; height: 4px; border-radius: 4px; background: currentColor; opacity: .3; transition: opacity .4s; }
.dashes i.on { opacity: 1; }
.steps-stack { position: relative; height: 100%; }
.step { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 80px; align-items: center; align-content: center; padding: 56px 8% 96px 0; opacity: 0; visibility: hidden; transition: opacity .55s var(--ease), visibility .55s; }
.step.is-active { opacity: 1; visibility: visible; }
.step-copy { transform: translateY(28px); transition: transform .7s var(--ease); max-width: 620px; }
.step.is-active .step-copy { transform: none; }
.step-tag { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px; background: rgba(37, 46, 61, .14); font-size: 16px; font-weight: 700; } /* 紫、藍卡片上的小標籤疊深色（原本疊白色，白字對比只有 3.2–3.8）；淺藍卡片那張疊白色（10-05 無障礙） */
.showcase[data-step="2"] .step-tag { background: rgba(255, 255, 255, .2); }
.step h3 { margin-top: 20px; font-size: clamp(30px, 3.6vw, 56px); line-height: 1.25; font-weight: 800; }
.step-copy p { margin-top: 18px; font-size: 20px; line-height: 1.7; font-weight: 700; max-width: 26em; }
.step .screen-wrap { position: relative; width: 320px; height: 640px; padding: 10px; }
/* 視窗比較矮的時候（筆電）：手機畫面和外框一起以中心點等比例縮小，下面的標籤跟著變窄 */
html:not(.no-pin) .step .screen-wrap, html:not(.no-pin) .device-frame { transform: scale(var(--ps, 1)); }
.device-frame { position: absolute; z-index: 2; right: 8%; top: 50%; width: 320px; height: 640px; margin-top: calc(-320px + (var(--nav-h) - 40px) / 2); border-radius: 44px; box-shadow: inset 0 0 0 10px #10141C, 0 20px 60px rgba(0, 0, 0, .18); pointer-events: none; }
.device-frame::before { content: ""; position: absolute; top: 20px; left: 50%; width: 92px; height: 24px; margin-left: -46px; border-radius: 999px; background: #10141C; }
.showcase-foot { position: absolute; left: 0; right: 0; bottom: 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.showcase-foot .btn { min-width: 300px; }
.phone-label { width: calc(320px * var(--ps, 1)); margin-right: calc(8% + 160px * (1 - var(--ps, 1))); display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 18px; border-radius: 12px; background: #fff; color: var(--ink); font-size: 16px; font-weight: 700; }
.phone-label span:last-child { color: var(--sub); }
.pl-names b { display: none; font-weight: inherit; }
.pl-names b.on { display: inline; }

/* 大字放大轉場＋平台卡 */
.platforms { position: relative; height: 350vh; color: #fff; }
.platforms .pin { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--ink); }
.scene { position: absolute; left: 0; right: 0; top: 0; bottom: -80px; }   /* 往下多留 80px：照片會跟著捲動慢慢往上移 */
.scene img { width: 100%; height: 100%; object-fit: cover; object-position: 56% 24%; }
.zoom-word { position: absolute; inset: 0; display: grid; place-items: end center; padding-bottom: 3vh; pointer-events: none; contain: layout paint; }
.zoom-word b { display: block; font-family: "Satoshi", "Satoshi Fallback", sans-serif; font-weight: 900; font-size: 26vw; line-height: .86; letter-spacing: -.02em; color: var(--social); white-space: nowrap; }
.platforms-fill { position: absolute; inset: 0; background-color: var(--social); opacity: 0; }
.platforms-content { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--nav-h) 0 24px; opacity: 0; }
.platforms-content .lead { color: #fff; font-weight: 700; }
.platform-cards { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 300px); justify-content: center; gap: 20px; text-align: left; }
.platform-card { display: block; background: #fff; color: var(--ink); border-radius: var(--r-card); padding: 24px; transition: transform .3s var(--ease); }
.platform-card:hover { transform: translateY(-4px); }
.platform-card .p-head { display: flex; align-items: center; gap: 12px; font-size: 24px; font-weight: 800; line-height: 1.3; }
.brand-tile { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; }
.brand-tile svg { width: 56%; height: 56%; }
.platform-card p { margin-top: 12px; font-size: 17px; line-height: 1.6; color: var(--sub); }
.platform-card em { display: inline-block; margin-top: 16px; font-style: normal; font-size: 16px; font-weight: 700; color: var(--social); }
.platform-more { margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; }
.platform-more li { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 6px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 16px; font-weight: 700; }
.platform-more .brand-tile { width: 28px; height: 28px; border-radius: 8px; }
.platform-note { margin-top: 18px; font-size: 16px; } /* 藍底上的白字要 100% 才夠清楚（10-05 無障礙） */
.platform-note a { text-decoration: underline; text-underline-offset: 3px; }

/* 前後對照疊卡 */
.compare { padding: 128px 0 0; }
.compare-head { text-align: center; }
.compare-track { position: relative; height: 220vh; }
.compare .pin { position: sticky; top: calc(var(--nav-h) + 24px); height: calc(100vh - var(--nav-h) - 48px); display: grid; place-items: center; }
/* 兩張卡的大小跟著視窗走（參考站一張卡大約是視窗寬的三成六、高的八成，大螢幕上才不會縮在中間一小塊）：
   --u＝「一個單位」，一般筆電大小以下是 1px（跟原本一樣大），視窗越大越大，最多 1.625px；下面的尺寸都是 --u 的倍數 */
.cards { --u: clamp(1px, min(.0831vw, .146vh), 1.625px); position: relative; display: flex; gap: calc(var(--u) * 24); }
.ccard { position: relative; display: flex; flex-direction: column; width: min(calc(var(--u) * 440), 50vw - 28px); min-height: calc(var(--u) * 532); border-radius: calc(var(--u) * 28); padding: calc(var(--u) * 36) calc(var(--u) * 32) calc(var(--u) * 32); will-change: transform; }
.ccard small { display: block; text-align: center; font-size: calc(var(--u) * 16); font-weight: 700; }
.ccard h3 { margin-top: calc(var(--u) * 10); text-align: center; font-size: calc(var(--u) * 36); line-height: 1.3; font-weight: 800; position: relative; }
.cards-long .ccard h3 { font-size: calc(var(--u) * 32); } /* 標題比較長的頁面（11 個字）：兩張卡的標題一起小一號，才排得成一行、卡片不會比視窗高 */
.ccard ul { margin-top: auto; padding-top: calc(var(--u) * 28); } /* 卡片比內容高的時候，清單和按鈕貼在下面，標題下面留白（參考站也是這樣） */
.ccard li { display: grid; grid-template-columns: 1fr calc(var(--u) * 24); gap: calc(var(--u) * 16); align-items: center; padding: calc(var(--u) * 14) 0; border-top: 1px solid; font-size: calc(var(--u) * 17); line-height: 1.5; font-weight: 700; }
.ccard li::after { content: ""; width: calc(var(--u) * 22); height: calc(var(--u) * 22); border-radius: calc(var(--u) * 7); }
.ccard .btn { flex: none; margin-top: calc(var(--u) * 20); width: 100%; height: calc(var(--u) * 52); font-size: calc(var(--u) * 17); }
.c-before { background: var(--paper); z-index: 1; }
.c-before li { border-color: var(--line); color: var(--sub); }
.c-before li::after { box-shadow: inset 0 0 0 2px #B9BEC8; }
.c-after { background: var(--chat); color: #fff; z-index: 2; }
.c-after li { border-color: rgba(255, 255, 255, .22); }
.c-after li::after { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M5.5 11.5l3.5 3.5 7.5-8' fill='none' stroke='%23605DBA' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
/* 手繪圈：上下各比標題多出固定的一小段（標題排成兩行時圈才不會畫到上面的「導入之後」） */
.scribble { position: absolute; left: 50%; top: 50%; width: 118%; height: calc(100% + var(--u, 1px) * 42); transform: translate(-50%, -50%); overflow: visible; pointer-events: none; }
.scribble path { fill: none; stroke: #9FE870; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }

/* 分頁示範 */
.demo { padding: 128px 0 0; }
.demo-head { text-align: center; }
.demo-box { margin-top: 56px; border-radius: 32px; background-color: var(--post); color: var(--ink); padding: 48px; display: grid; grid-template-columns: 360px 320px minmax(0, 1fr); gap: 48px; align-items: center; }
.demo-box.grid-lines { background-image: linear-gradient(rgba(37, 46, 61, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(37, 46, 61, .07) 1px, transparent 1px); }
.tabs { background: #fff; border-radius: var(--r-card); padding: 28px 24px 24px; align-self: stretch; display: flex; flex-direction: column; }
.tabs h3 { font-size: 26px; line-height: 1.3; font-weight: 800; padding: 0 8px 14px; }
.tab { display: block; width: 100%; text-align: left; padding: 14px 16px; border-radius: 14px; font-size: 18px; font-weight: 700; line-height: 1.4; transition: background .2s; word-break: keep-all; overflow-wrap: anywhere; } /* 分頁字太長時只在詞和詞之間（<wbr>）換行 */
.tab:hover { background: var(--paper); }
.tab[aria-selected="true"] { background: var(--ink); color: #fff; }
.tabs .btn { margin-top: auto; }
@media (min-width: 900px) {
  .tabs .tab:last-child { margin-bottom: 12px; } /* 分頁多的時候，最後一個分頁和下面的按鈕之間至少留 12px（分頁少時按鈕本來就推到最下面，看不出差別） */
  .tabs:has(.tab-list > .tab:nth-child(9)) .tab { padding-top: 11px; padding-bottom: 11px; } /* 九個分頁（Chat、Social 頁，10-06）：上下留白收一點，分頁欄跟旁邊的手機差不多高 */
}
.tab-list { display: contents; } /* 分頁按鈕外面那一層只給報讀軟體看（role="tablist"），不影響排版（10-05 無障礙） */
.demo-phones { position: relative; width: 320px; height: 640px; }
.demo-phones .device { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s; }
.demo-phones .device.is-active { opacity: 1; visibility: visible; }
.demo-desc p { display: none; font-size: 22px; line-height: 1.65; font-weight: 700; max-width: 16em; }
.demo-desc p.is-active { display: block; }

/* 三步驟 */
.steps3 { padding: 128px 0; }
.steps3-head { text-align: center; }
.steps3-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.s3 { border-radius: var(--r-card); overflow: hidden; background: var(--paper); }
.s3-img { aspect-ratio: 4 / 3; overflow: hidden; }
/* 三張卡的畫面都是樣式畫的小動畫（排法照參考站的三張：一顆按鈕被點、兩邊連起來、一排設定被打開） */
.art { position: relative; display: flex; align-items: center; justify-content: center; }
/* ① 連接帳戶：FRIDAI ─ 連結 ─ 店家的帳號（右下角輪流出現三個平台） */
.art-link { gap: 5%; background: conic-gradient(#DCDAF4 25%, #EEF2F9 0 50%, #DCDAF4 0 75%, #EEF2F9 0) 0 0 / 50% 66.667%; }
.al-node { position: relative; flex: none; width: 27%; aspect-ratio: 1; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 10px 28px rgba(37, 46, 61, .14); }
.al-f img { width: 36%; height: auto; }
.al-acct > img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.al-link { flex: none; width: 16%; aspect-ratio: 1; border-radius: 28%; background: var(--social); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 20px rgba(63, 119, 223, .35); }
.al-link svg { width: 54%; height: 54%; }
.al-badges { position: absolute; right: -8%; bottom: -4%; width: 40%; aspect-ratio: 1; }
.al-badges .brand-tile { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 28%; box-shadow: 0 0 0 3px #fff; opacity: 0; }
.al-badges .brand-tile:first-child { opacity: 1; }
/* ② 一鍵建立知識庫：游標點一下按鈕，四種內容來源冒出來 */
.art-click { background-color: var(--social); background-size: 25% 33.334%; background-position: 0 0; }
.ac-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; height: 50px; padding: 0 26px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 17px; font-weight: 700; line-height: 1; white-space: nowrap; box-shadow: 0 10px 24px rgba(18, 40, 96, .3); }
.ac-cursor, .av-cursor { position: absolute; z-index: 2; width: 30px; height: 30px; filter: drop-shadow(0 3px 5px rgba(18, 30, 60, .3)); }
.ac-cursor svg, .av-cursor svg { width: 100%; height: 100%; fill: var(--ink); stroke: #fff; stroke-width: 1.6; }
.ac-cursor { left: 50%; top: 50%; transform: translate(34px, 12px); }
.ac-chip { position: absolute; width: 46px; height: 46px; border-radius: 15px; background: rgba(255, 255, 255, .2); color: #fff; display: grid; place-items: center; }
.ac-chip svg { width: 23px; height: 23px; }
.ac-chip.c1 { left: 12%; top: 16%; } .ac-chip.c2 { right: 12%; top: 16%; } .ac-chip.c3 { left: 12%; bottom: 16%; } .ac-chip.c4 { right: 12%; bottom: 16%; }
/* ③ 立即上線：游標把三個開關一個一個打開 */
.art-live { background: #fff; box-shadow: inset 0 0 0 1px var(--line); border-radius: var(--r-card) var(--r-card) 0 0; }
.av-card { width: 84%; display: grid; gap: 10px; }
.av-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 56px; padding: 0 14px 0 18px; border-radius: 16px; background: var(--paper); font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--ink); white-space: nowrap; }
.av-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tg { flex: none; position: relative; width: 52px; height: 30px; border-radius: 999px; background: var(--social); }
.tg::after { content: ""; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .22); transform: translateX(22px); }
.av-cursor { left: calc(92% - 42px); top: 50%; transform: translateY(70px); }
@media (prefers-reduced-motion: no-preference) {
  .al-link { animation: alPulse 2.4s var(--ease) infinite; }
  .al-badges .brand-tile { animation: alBadge 6s infinite; }
  .al-badges .brand-tile:first-child { opacity: 0; }
  .al-badges .brand-tile:nth-child(2) { animation-delay: 2s; } .al-badges .brand-tile:nth-child(3) { animation-delay: 4s; }
  .ac-btn { animation: acPress 4s var(--ease) infinite; }
  .ac-cursor { animation: acMove 4s var(--ease) infinite; }
  .ac-chip { animation: acChip 4s var(--ease) infinite both; }
  .ac-chip.c2 { animation-delay: .08s; } .ac-chip.c3 { animation-delay: .16s; } .ac-chip.c4 { animation-delay: .24s; }
  .tg { animation: tgBg 6s infinite both; } .tg::after { animation: tgKnob 6s infinite both; }
  .av-row:nth-child(2) .tg, .av-row:nth-child(2) .tg::after { animation-delay: .9s; }
  .av-row:nth-child(3) .tg, .av-row:nth-child(3) .tg::after { animation-delay: 1.8s; }
  .av-cursor { animation: avMove 6s var(--ease) infinite; }
}
@keyframes alPulse { 0%, 100% { transform: none; } 50% { transform: scale(1.09); } }
@keyframes alBadge { 0% { opacity: 0; transform: scale(.6); } 5%, 33% { opacity: 1; transform: none; } 38%, 100% { opacity: 0; transform: scale(.6); } }
@keyframes acMove { 0%, 10% { transform: translate(52px, 92px); } 30% { transform: translate(34px, 12px); } 35% { transform: translate(34px, 12px) scale(.86); } 40%, 78% { transform: translate(34px, 12px); } 94%, 100% { transform: translate(52px, 92px); } }
@keyframes acPress { 0%, 33% { transform: none; } 36% { transform: scale(.94); } 41%, 100% { transform: none; } }
@keyframes acChip { 0%, 38% { opacity: 0; transform: scale(.5); } 46%, 84% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: scale(.5); } }
@keyframes tgBg { 0%, 13% { background: #C9CED8; } 17%, 88% { background: var(--social); } 93%, 100% { background: #C9CED8; } }
@keyframes tgKnob { 0%, 13% { transform: none; } 17%, 88% { transform: translateX(22px); } 93%, 100% { transform: none; } }
@keyframes avMove { 0%, 4% { transform: translateY(110px); } 12%, 15% { transform: translateY(-58px); } 27%, 30% { transform: translateY(8px); } 42%, 46% { transform: translateY(74px); } 60%, 100% { transform: translateY(110px); } }
.s3-body { padding: 24px 26px 28px; }
.s3-body span { font-size: 16px; font-weight: 700; color: var(--social); }
.s3-body h3 { margin-top: 6px; font-size: 26px; line-height: 1.35; font-weight: 800; }
.s3-body p { margin-top: 8px; font-size: 17px; line-height: 1.65; color: var(--sub); }
.w-n { display: none; }   /* 卡片很窄（窄桌機三欄）的時候才啟用的斷行點，其他寬度照標點斷行 */
.steps3-cta { margin-top: 44px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* 常見問題（深色） */
.faq { background: var(--ink); color: #fff; padding: 128px 0; }
.faq-head { text-align: center; }
.faq-head small { display: block; font-size: 16px; font-weight: 700; opacity: .75; margin-bottom: 12px; }
.faq-list { margin: 56px auto 0; max-width: 880px; }
.faq-list details { border-top: 1px solid rgba(255, 255, 255, .18); }
.faq-list details:last-child { border-bottom: 1px solid rgba(255, 255, 255, .18); }
.faq-list summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 24px; gap: 24px; align-items: center; padding: 24px 4px; font-size: 20px; font-weight: 700; line-height: 1.5; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); transition: transform .3s var(--ease); justify-self: center; }
.faq-list details[open] summary::after { transform: rotate(-135deg); }
.faq-list details p { padding: 0 44px 26px 4px; font-size: 18px; line-height: 1.75; opacity: .88; }
.faq-more { display: block; width: max-content; margin: 36px auto 0; font-size: 17px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }

/* 頁尾（深色） */
.footer { background: var(--ink); color: #fff; padding: 0 0 40px; }
.footer-cta { border-top: 1px solid rgba(255, 255, 255, .18); padding: 96px 0 72px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 40px 56px; align-items: center; }
.fc-copy .h2 { font-size: clamp(30px, 3.4vw, 52px); }
.footer-cta .lead { margin-left: 0; color: rgba(255, 255, 255, .85); }
.footer-cta-row { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
.fc-photo { position: relative; margin: 0; border-radius: 28px; overflow: hidden; aspect-ratio: 3 / 2; background: #1B222E; }
.fc-photo img { width: 100%; height: 100%; object-fit: cover; }
/* 照片裡手機旁邊冒出來的一小則提示（跟主視覺的對話是同一個意思：手機自己在回） */
.fc-pop { position: absolute; left: 19.5%; top: calc(64% - 46px); display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 14px; border-radius: 999px 999px 999px 8px; background: rgba(255, 255, 255, .94); color: var(--ink); font-size: 15px; font-weight: 700; line-height: 1; white-space: nowrap; box-shadow: 0 12px 28px rgba(10, 16, 30, .3); transform-origin: 0 100%; }
.fc-pop::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2DBE60; }
@media (prefers-reduced-motion: no-preference) { .fc-pop { animation: fcPop 5s var(--ease) infinite; } }
@keyframes fcPop { 0%, 12% { opacity: 0; transform: scale(.7); } 18%, 82% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: scale(.9); } }
.footer-cta .btn-wide { grid-column: 1 / -1; }
.footer-grid { display: grid; grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr)); gap: 40px; padding: 56px 0 40px; border-top: 1px solid rgba(255, 255, 255, .18); }
.footer-logo { height: 34px; width: auto; }
.footer-about { margin-top: 18px; font-size: 16px; line-height: 1.7; opacity: .78; max-width: 24em; }
.footer-col h3 { margin: 0 0 14px; font-size: 16px; font-weight: 700; opacity: .7; }
.footer-col a { display: block; padding: 6px 0; font-size: 17px; }
.footer-col a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-social { margin-top: 20px; display: flex; gap: 10px; }
.footer-social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.footer-social svg { width: 22px; height: 22px; }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 40px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .18); font-size: 16px; line-height: 1.7; opacity: .8; }
.footer-legal nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.footer-legal a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* 進場 */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* 窄螢幕與「減少動態」：不釘住，改成一般往下排的版面 */
html.no-pin .showcase, html.no-pin .platforms { height: auto; }
html.no-pin .showcase .pin, html.no-pin .platforms .pin, html.no-pin .compare .pin { position: static; height: auto; overflow: visible; }
html.no-pin .showcase .pin { background: none; color: inherit; }
html.no-pin .showcase-inner { padding: 0; width: 100%; }
html.no-pin .dashes, html.no-pin .device-frame, html.no-pin .showcase-foot, html.no-pin .zoom-word, html.no-pin .platforms-fill { display: none; }
html.no-pin .scene { position: relative; bottom: auto; height: min(62vw, 560px); }
html.no-pin .steps-stack { height: auto; }
html.no-pin .step { position: relative; inset: auto; opacity: 1; visibility: visible; padding: 72px 32px; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; color: #fff; background-color: var(--chat); }
html.no-pin .step:nth-child(2) { background-color: var(--social); }
html.no-pin .step:nth-child(3) { background-color: var(--post); color: var(--ink); }
html.no-pin .step:nth-child(3) .step-tag { background: rgba(255, 255, 255, .2); }
html.no-pin .step-copy { transform: none; }
html.no-pin .step .screen-wrap { padding: 0; }
html.no-pin .step .screen-wrap .screen { border: 10px solid #10141C; border-radius: 44px; }
html.no-pin .platforms .pin { background-color: var(--social); }
html.no-pin .platforms-content { position: relative; inset: auto; opacity: 1 !important; transform: none !important; padding: 96px 24px; }
html.no-pin .compare-track { height: auto; }
html.no-pin .compare .pin { display: block; padding: 48px 0 0; }
html.no-pin .cards { justify-content: center; flex-wrap: wrap; }
html.no-pin .ccard { transform: none !important; opacity: 1 !important; min-height: 0; }
html.no-pin .scribble path { stroke-dashoffset: 0 !important; }

@media (min-width: 900px) and (max-width: 1180px) { .w-n { display: inline; } }
/* 平板直放：三步驟卡改成左圖右字，圖才不會佔滿整屏 */
@media (min-width: 600px) and (max-width: 899px) {
  .s3 { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: center; }
  .art-live { border-radius: var(--r-card) 0 0 var(--r-card); }
}
@media (max-width: 1180px) {
  .nav-links { display: none; }
  .nav-actions { margin-left: auto; }
  .nav-burger { display: block; }
  .platform-cards { grid-template-columns: repeat(3, minmax(0, 260px)); }
  .demo-box { grid-template-columns: 300px 320px; }
  .demo-desc { grid-column: 1 / -1; }
  .demo-desc p { max-width: none; }
}
/* 主視覺改成上下排：字在上、影片在下。影片那一塊是 4:3、靠右對齊（影片本身放大到 132.6% 寬），手機到人都看得到 */
@media (max-width: 1199px) {
  .hero { height: auto; display: flex; flex-direction: column; padding-top: calc(var(--nav-h) + 28px); }
  .hero-copy { position: static; order: 1; padding: 0 32px; }
  .hero h1 { font-size: clamp(40px, 6.4vw, 72px); }
  .hero-lead { margin-top: 20px; font-size: 20px; }
  .hero-cta { margin-top: 28px; }
  .hero-stats { position: static; order: 2; flex-wrap: wrap; margin: 28px 32px 0; }
  .hero-plats { position: static; order: 2; align-self: flex-start; margin: 28px 32px 0; }
  .hero-stage { position: relative; inset: auto; order: 3; margin-top: 36px; height: 75vw; }
  .hero-stage::after { background: linear-gradient(180deg, #082842 0%, rgba(8, 40, 66, 0) 16%); }
  .hero-frame { left: auto; right: 0; }
}
@media (max-width: 899px) {
  .nav-lang { display: none; } /* 手機導覽列放不下：改用手機選單最下面那一行 */
  :root { --nav-h: 68px; }
  body { font-size: 17px; }
  .wrap { width: min(var(--w), 100% - 40px); }
  .nav { padding: 0 16px; gap: 12px; }
  .nav.is-scrolled { left: 10px; right: 10px; top: 8px; height: 58px; padding: 0 8px 0 16px; }
  .nav-login { display: none; }
  .nav-actions .btn { padding: 0 16px; }
  .hero { padding-top: calc(var(--nav-h) + 24px); }
  .hero-copy { padding: 0 20px; }
  .hero-lead { font-size: 18px; }
  .hero-stats { margin: 24px 20px 0; gap: 8px; }
  .hero-stats li { height: 40px; padding: 0 14px; font-size: 15px; }
  .hero-stats strong { font-size: 16px; }
  .hero-plats { display: none; } /* 手機版主視覺不放平台 logo，畫面才不會擠（10-04 她說的） */
  .plan-hero i { height: 132px; }
  .trust .wrap { flex-direction: column; align-items: flex-start; gap: 14px; }
  .trust ul { gap: 12px 24px; }
  .trust img { height: 24px; }
  .title-block { padding: 88px 0 72px; }
  .lead { font-size: 18px; }
  html.no-pin .step { grid-template-columns: 1fr; padding: 64px 20px; gap: 32px; }
  html.no-pin .step .screen-wrap { width: 300px; height: 600px; margin: 0 auto; }
  .step-copy p { font-size: 18px; }
  .platform-cards { grid-template-columns: minmax(0, 420px); width: 100%; }
  html.no-pin .platforms-content { padding: 80px 20px; }
  .compare, .demo { padding-top: 88px; }
  .ccard { width: calc(100% - 40px); max-width: 440px; padding: 30px 24px 26px; }
  .ccard h3 { font-size: 30px; }
  .demo-box { grid-template-columns: 1fr; padding: 24px 20px 32px; gap: 28px; border-radius: 24px; justify-items: center; }
  .tabs { width: 100%; }
  .tabs .btn { margin-top: 16px; }
  .tabs:has(.tab-list > .tab:nth-child(6)) { display: grid; grid-template-columns: 1fr 1fr; column-gap: 6px; align-content: start; padding: 22px 12px 16px; } /* 分頁超過五個：手機上排兩欄，按了分頁才看得到下面的手機（英文頁還是四個，維持一欄） */
  .tabs:has(.tab-list > .tab:nth-child(6)) :is(h3, .btn) { grid-column: 1 / -1; }
  .tabs:has(.tab-list > .tab:nth-child(6)) .tab { font-size: 16px; padding: 12px 10px; }
  .tabs:has(.tab-list > .tab:nth-child(6)) .tab:last-child:nth-child(odd) { grid-column: 1 / -1; } /* 分頁是單數（九個）：最後一個排整排，不要落單在左邊 */
  .demo-phones { width: 300px; height: 600px; }
  .demo-phones .device { width: 300px; height: 600px; }
  .demo-desc { grid-column: auto; }
  .demo-desc p { font-size: 19px; text-align: center; }
  .steps3 { padding: 88px 0; }
  .steps3-grid { grid-template-columns: 1fr; }
  .faq { padding: 88px 0; }
  .faq-list summary { font-size: 18px; padding: 20px 2px; }
  .faq-list details p { padding-right: 8px; font-size: 17px; }
  .footer-cta { padding: 72px 0 56px; grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .footer-cta-row { margin-top: 24px; }
  .fc-photo { border-radius: 22px; }
  .fc-pop { top: calc(64% - 42px); height: 36px; padding: 0 13px 0 11px; } /* 標籤底邊停在手機上緣（照片 64% 高）上面一點，手機版照片小也不會蓋到手機 */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .footer-brand { grid-column: 1 / -1; }
  .btn-wide { height: 58px; font-size: 18px; }
}
/* 手機：對話直接疊在照片下半部（10-05 她說對話被移到下面、照片下面多一大段深藍色不好看）。
   照片放大到 115vw 高、只露出右邊的人（桌上的手機會被裁掉），臉在上面、對話在下面不會擋到；一行字數也改少 */
@media (max-width: 767px) {
  .hero-stage { height: 115vw; }
  .hero-frame { width: 203.3cqw; } /* 115 ÷ (940 / 1662)：剛好蓋滿照片的高 */
  .hchat { left: calc(50.8% + 16px); bottom: 3%; width: min(21.4em, 100vw - 32px); --g: .35em; } /* 照片左邊被裁掉 103.3 ÷ 203.3 ＝ 50.8%，對話從畫面左邊 16px 開始 */
  .hbell { left: 12px; }   /* 鈴鐺往外擴的圈才不會被螢幕左邊切到 */
  .hb .bm { display: inline; }
  .hb .bd { display: none; }
}
@media (max-width: 599px) {
  .trust ul { gap: 12px 20px; }
  .trust img { height: 22px; }
  /* 區段大標裡「整段不拆」的小段：最長那一段有幾個字寬（--hn，建置時算好寫在標題上），窄手機上字就縮到那一段剛好放得下 */
  .h2 { font-size: min(30px, calc((100vw - 41px) / var(--hn, 10))); }
}
/* 合作品牌：手機版（含小平板）三排太擠 → 跟見證一樣一排往左跑（10-04 她說的）。
   放在所有手機區塊之後：裡面的間距、排法才不會把它蓋回去。間距用每格的右邊留白、不用 gap：往左跑剛好一份的寬度，接回開頭才不會跳一下 */
@media (max-width: 899px) {
  .trust { overflow: hidden; }
  .trust ul { flex-wrap: nowrap; gap: 0; width: max-content; animation: marquee 14s linear infinite; } /* 一份約 880px，14 秒＝每秒 63px，跟見證一樣快 */
  .trust li, .trust li[aria-hidden] { display: block; flex: none; padding-right: 28px; }
  .trust:hover ul { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .trust ul { animation: none; flex-wrap: wrap; width: auto; gap: 12px 20px; } .trust li { padding-right: 0; } .trust li[aria-hidden] { display: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .msg, .cmt, .dm-toast, .plan-item, .alert, .draft, .lang, .line { opacity: 1; transform: none; animation: none !important; }
  .cp-ask, .cp-post, .cp-sched, .cp-done { opacity: 1; transform: none; animation: none !important; }
  .cp-text span { clip-path: none; animation: none !important; }
  .done { opacity: 1; transform: none; animation: none !important; }
}

/* 桌機才換行的地方 */
@media (max-width: 899px) { .br-d { display: none; } }

/* ===================== 產品頁（Chat／Social／Post 共用一套，換主題色） =====================
   排法照 ManyChat 的平台產品頁：整片主題色的主視覺＋一張大照片（往下捲從滿版縮成圓角卡片，
   上面疊清單和一段對話）→ 見證 → 大標 → 釘住的手機示範（整段同一個主題色，手機裡是滿版照片）
   → 前後對照 → 分頁示範 → 三步驟 → 大字轉場接其他產品 → 常見問題 → 頁尾 */
/* 一頁一個主題色。壓在主題色上面的東西用下面幾個變數，沒設就是白字那一組：
   --on＝主題色上面的字；--on-soft＝主題色上面的半透明小底（標籤、按鈕）；--on-line＝分隔線；--on-grid＝格線；
   --theme-ink＝白底上的主題色小字（天藍在白底上太淺，換深一階）；--check＝對照卡裡的勾 */
.theme-chat { --theme: var(--chat); --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M5.5 11.5l3.5 3.5 7.5-8' fill='none' stroke='%23605DBA' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.theme-social { --theme: var(--social); --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M5.5 11.5l3.5 3.5 7.5-8' fill='none' stroke='%233F77DF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.theme-post { --theme: var(--post); --on: var(--ink); --on-soft: rgba(37, 46, 61, .12); --tag-bg: rgba(255, 255, 255, .2); --on-line: rgba(37, 46, 61, .2); --on-grid: rgba(37, 46, 61, .07); --theme-ink: #0B76A8; --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M5.5 11.5l3.5 3.5 7.5-8' fill='none' stroke='%230B76A8' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --scribble: #fff; }
.theme-x { --theme: #0F1419; --tag-bg: rgba(255, 255, 255, .18); --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M5.5 11.5l3.5 3.5 7.5-8' fill='none' stroke='%230F1419' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
/* 主題色或頁面上緣是淺色的頁：導覽列還沒捲動的時候用深色字和深色 logo */
.nav-ink .nav:not(.is-scrolled) { color: var(--ink); }
.nav-ink .nav:not(.is-scrolled) .btn-white { background: var(--ink); color: #fff; }

/* 主視覺上半：標題、說明、按鈕在左，支援的平台在右下。
   標題大小和上下留白除了看視窗寬度，也看視窗高度（vh）：筆電的視窗比較矮，這一塊要跟著縮，
   第一屏下面才留得出三成左右給照片，一開頁就看得到人（參考站也是這個比例） */
.phero { position: relative; background-color: var(--theme); color: var(--on, #fff); }
.phero-top { padding: calc(var(--nav-h) + clamp(10px, 2.2vh, 52px)) 0 clamp(18px, 3.4vh, 44px); background-color: var(--theme); }
.page-product .phero-top.grid-lines, .page-product .showcase .grid-lines, .page-product .platforms-fill.grid-lines { background-image: linear-gradient(var(--on-grid, rgba(255, 255, 255, .07)) 1px, transparent 1px), linear-gradient(90deg, var(--on-grid, rgba(255, 255, 255, .07)) 1px, transparent 1px); }
.page-product .step-tag, .page-product .showcase[data-step] .step-tag { background: var(--tag-bg, rgba(37, 46, 61, .14)); }
.phero-top .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; }
html:not(.no-pin) .phero-top .wrap { width: auto; margin: 0 32px; } /* 桌機：左邊貼齊導覽列的 logo、右邊貼齊導覽列的按鈕（跟首頁主視覺、參考站一樣），不是置中的內容欄 */
.phero h1 { margin-top: clamp(10px, 2vh, 18px); font-size: clamp(40px, min(5.6vw, 9.2vh), 88px); line-height: 1.2; font-weight: 800; letter-spacing: 0; }
.phero-lead { margin-top: clamp(10px, 1.8vh, 22px); max-width: 44em; font-size: clamp(18px, 1.39vw, 20px); line-height: 1.7; word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
.phero-copy .btn { margin-top: clamp(14px, 2.6vh, 30px); }
.phero-badges { display: flex; gap: 10px; padding-bottom: 4px; }
.phero-badges li { display: block; }
.phero-badges .brand-tile { width: 44px; height: 44px; border-radius: 12px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .92); }

/* 主視覺下半：大照片。--pp（0→1，v2.js 依捲動算）＝從滿版縮成卡片的進度；--pl＝清單淡入的進度。
   卡片在版面上一直是「縮好之後」的位置和大小，滿版→卡片只改「露出來的範圍」（clip-path）和照片的放大倍率（transform）。
   這兩樣都不會動到版面：捲動時瀏覽器不用重排，也不會被算成版面跳動（之前用 left／right／top／bottom 去縮，會被算） */
.phero-track { position: relative; height: 230vh; }
.phero-media { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.phero-card { color: #fff; position: absolute; left: 11.5%; right: 11.5%; left: round(11.5%, 1px); right: round(11.5%, 1px); /* 左右對齊到整數像素，圓角卡片的邊才不會有半個像素的毛邊（舊瀏覽器不認得 round() 就用上一行） */ top: calc(var(--nav-h) + 20px); bottom: 7vh; clip-path: inset(calc((1 - var(--pp, 0)) * -1 * (var(--nav-h) + 20px)) calc((1 - var(--pp, 0)) * -15%) calc((1 - var(--pp, 0)) * -7vh) round calc(var(--pp, 0) * 32px)); }
/* 照片：還是滿版的時候放大、往左上移，縮成卡片的同時回到原本的大小和位置。
   放大幾倍（--ps0＝倍率減 1）、移多少（--ptx、--pty）由 v2.js 的 measurePhero 依視窗大小和照片的焦點算好填進來，
   讓臉落在第一屏露出來那一條的中間。後面的數字是程式還沒跑之前先用的大概值（放大 1.45 倍） */
.phero-photo { position: absolute; inset: 0; transform-origin: 0 0; transform: translate(calc((1 - var(--pp, 0)) * var(--ptx, -25.83%)), calc((1 - var(--pp, 0)) * var(--pty, calc(-.7 * max(0px, 145% - 100vh) - var(--nav-h) - 20px)))) scale(calc(1 + (1 - var(--pp, 0)) * var(--ps0, .45))); }
.phero-photo img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 80% 28%; }
.phero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 10, 22, .5) 0%, rgba(14, 10, 22, 0) 46%); pointer-events: none; }
.phero-list { position: absolute; z-index: 1; left: 5.5%; top: 11%; opacity: var(--pl, 0); transform: translateY(calc((1 - var(--pl, 0)) * 24px)); }
.phero-list small { display: block; font-size: 18px; font-weight: 700; line-height: 1.4; }
.phero-list ul { margin-top: 12px; display: grid; gap: 2px; }
.phero-list li { display: flex; align-items: center; gap: 14px; font-size: clamp(26px, 2.7vw, 42px); line-height: 1.36; font-weight: 800; white-space: nowrap; }
.phero-list li svg { flex: none; width: .78em; height: .78em; }
.phero-chat { position: absolute; z-index: 1; right: 4%; bottom: 9%; width: min(22em, 36%); display: grid; gap: .5em; font-family: "LINE Seed TW", "LINE Seed TW Fallback", "Microsoft JhengHei", sans-serif; font-size: clamp(15px, 1.2vw, 18px); font-weight: 700; line-height: 1.5; }
.pmsg { display: flex; align-items: flex-end; gap: .5em; max-width: 100%; }
.pmsg.in { justify-self: start; }
.pmsg.out { justify-self: end; }
.pmsg i { flex: none; width: 2.1em; height: 2.1em; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }
.pmsg i img { width: 100%; height: 100%; object-fit: cover; }
.pb { display: block; padding: .62em .9em; border-radius: 1.15em; word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
.pmsg.in .pb { background: rgba(24, 20, 34, .8); color: #fff; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-left-radius: .35em; }
.pmsg.out .pb { background: var(--theme); color: var(--on, #fff); border-bottom-right-radius: .35em; box-shadow: 0 16px 36px rgba(20, 10, 60, .35); }
.pb small { display: block; margin-top: .15em; font-size: max(14px, .78em); font-weight: 400; line-height: 1.4; opacity: .9; }
/* 清單輪流亮一項；對話一則一則跳出來，9 秒一輪。系統設「減少動態」或不釘住的版面就全部直接顯示 */
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-pin) .phero-list li { animation: pheroOn 9.6s linear infinite; }
  html:not(.no-pin) .phero-list li:nth-child(2) { animation-delay: -7.2s; }
  html:not(.no-pin) .phero-list li:nth-child(3) { animation-delay: -4.8s; }
  html:not(.no-pin) .phero-list li:nth-child(4) { animation-delay: -2.4s; }
  html:not(.no-pin) .phero-card .pmsg { opacity: 0; }
  html:not(.no-pin) .phero-card.is-live .phero-chat > .pmsg { animation: pheroMsg 9s var(--ease) infinite both; }
  html:not(.no-pin) .phero-card.is-live .phero-chat > .pmsg:nth-child(2) { animation-name: pheroMsg2; }
  html:not(.no-pin) .phero-card.is-live .phero-chat > .pmsg:nth-child(3) { animation-name: pheroMsg3; }
  html:not(.no-pin) .phero-card.is-live .phero-chat > .pmsg:nth-child(4) { animation-name: pheroMsg4; } /* 第四則＝結果（已發出、老闆回了） */
  /* 分成兩幕的對話（Chat 頁）：兩幕疊在同一格、靠下對齊；第一幕兩則淡出後，第二幕四則一則一則出來，18 秒一輪 */
  html:not(.no-pin) .phero-chat:has(.pscene) { grid-template-areas: "s"; }
  html:not(.no-pin) .pscene { grid-area: s; align-content: end; }
  html:not(.no-pin) .phero-card.is-live .pscene .pmsg { animation: pS1a 18s var(--ease) infinite both; }
  html:not(.no-pin) .phero-card.is-live .pscene:nth-child(1) .pmsg:nth-child(2) { animation-name: pS1b; }
  html:not(.no-pin) .phero-card.is-live .pscene:nth-child(2) .pmsg:nth-child(1) { animation-name: pS2a; }
  html:not(.no-pin) .phero-card.is-live .pscene:nth-child(2) .pmsg:nth-child(2) { animation-name: pS2b; }
  html:not(.no-pin) .phero-card.is-live .pscene:nth-child(2) .pmsg:nth-child(3) { animation-name: pS2c; }
  html:not(.no-pin) .phero-card.is-live .pscene:nth-child(2) .pmsg:nth-child(4) { animation-name: pS2d; }
}
.pscene { display: grid; gap: .5em; }
@keyframes pS1a { 0%, 2% { opacity: 0; transform: translateY(14px) scale(.96); } 5%, 42% { opacity: 1; transform: none; } 46%, 100% { opacity: 0; transform: none; } }
@keyframes pS1b { 0%, 11% { opacity: 0; transform: translateY(14px) scale(.96); } 14%, 42% { opacity: 1; transform: none; } 46%, 100% { opacity: 0; transform: none; } }
@keyframes pS2a { 0%, 50% { opacity: 0; transform: translateY(14px) scale(.96); } 53%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes pS2b { 0%, 58% { opacity: 0; transform: translateY(14px) scale(.96); } 61%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes pS2c { 0%, 67% { opacity: 0; transform: translateY(14px) scale(.96); } 70%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes pS2d { 0%, 75% { opacity: 0; transform: translateY(14px) scale(.96); } 78%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes pheroOn { 0%, 23% { opacity: 1; } 26%, 97% { opacity: .42; } 100% { opacity: 1; } }
@keyframes pheroMsg { 0%, 4% { opacity: 0; transform: translateY(14px) scale(.96); } 9%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes pheroMsg2 { 0%, 22% { opacity: 0; transform: translateY(14px) scale(.96); } 27%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes pheroMsg3 { 0%, 52% { opacity: 0; transform: translateY(14px) scale(.96); } 57%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes pheroMsg4 { 0%, 70% { opacity: 0; transform: translateY(14px) scale(.96); } 75%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }

/* 區段大標上的小圖示（主題色、微微歪一點） */
.tb-icon { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 22px; border-radius: 16px; background: var(--theme, var(--chat)); color: var(--on, #fff); transform: rotate(-8deg); }
.tb-icon svg { width: 28px; height: 28px; }

/* 釘住的手機示範：整段都是這一頁的主題色（首頁是一步一個顏色） */
.page-product .showcase .pin, .page-product .showcase[data-step] .pin { background-color: var(--theme); color: var(--on, #fff); }
.showcase[data-steps="4"] { height: 500vh; } /* 四步的頁面多留一屏的捲動距離 */
.page-product .step-copy p { font-size: 19px; font-weight: 400; max-width: 30em; }
/* 手機裡是滿版照片，帳號名稱在上面、對話疊在照片下緣 */
.screen.story { background: #15121C; color: #fff; }
.story-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.screen.story::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 8, 16, .56) 0%, rgba(10, 8, 16, 0) 24%, rgba(10, 8, 16, 0) 44%, rgba(10, 8, 16, .74) 100%); pointer-events: none; }
.story-top { position: relative; z-index: 1; flex: none; display: flex; align-items: center; gap: 8px; padding: 52px 12px 0; }
.story-top .avatar { width: 34px; height: 34px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); }
.story-top strong { font-size: 16px; line-height: 1.3; white-space: nowrap; text-shadow: 0 1px 8px rgba(0, 0, 0, .55); }
.story-top .on-duty { background: rgba(255, 255, 255, .94); }
.screen.story .chat { position: relative; z-index: 1; background: none; }
.screen.story .msg.in { background: rgba(28, 24, 38, .8); color: #fff; border: 0; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.screen.story .msg.out { background: var(--theme); color: var(--on, #fff); }
.msg-btn { display: block; margin-top: 8px; padding: 9px 12px; border-radius: 10px; background: var(--on-soft, rgba(255, 255, 255, .22)); text-align: center; font-size: 15px; font-weight: 700; line-height: 1.3; }
.msg.sys { align-self: center; max-width: none; padding: 6px 14px; border-radius: 999px; background: #EAF8EE; color: #1B7F39; border: 0; font-size: 14px; font-weight: 700; line-height: 1.4; } /* 系統訊息（例如付款完成）：置中的小膠囊 */
.msg.sys::before { content: "✓ "; }

/* 前後對照：這一頁每張卡六條，排緊一點；視窗很矮的時候再縮 */
.page-product .ccard li { padding: calc(var(--u) * 11) 0; font-size: calc(var(--u) * 16); }
@media (max-height: 700px) and (min-width: 900px) {
  .ccard { min-height: 0; }
  .page-product .ccard { padding: 24px 28px 22px; }
  .page-product .ccard h3 { font-size: 30px; }
  .page-product .ccard ul { margin-top: 16px; }
  .page-product .ccard li { padding: 8px 0; }
  .page-product .ccard .btn { margin-top: 14px; height: 46px; }
  /* 清單比較長的頁面（Social：五點裡有四點是兩行）在矮視窗再收緊一點，按鈕才不會被切到 */
  .page-product .cards-long .ccard ul { margin-top: 10px; padding-top: 14px; }
  .page-product .cards-long .ccard li { padding: 5px 0; font-size: 16px; line-height: 1.45; }
}

/* 大字轉場接「其他產品」：字和底色用主題色，卡片兩張 */
.page-product .zoom-word b { color: var(--theme); }
.page-product .platforms-fill { background-color: var(--theme); }
.page-product .platforms { color: var(--on, #fff); }
.page-product .platforms-content .lead { color: inherit; }
/* 前後對照的「導入之後」那張卡用這一頁的主題色 */
.page-product .c-after { background: var(--theme); color: var(--on, #fff); }
.page-product .c-after li { border-color: var(--on-line, rgba(255, 255, 255, .22)); }
.page-product .c-after li::after { background: #fff var(--check, none) center/100% no-repeat; }
.page-product .scribble path { stroke: var(--scribble, #9FE870); }
.platform-cards.two { grid-template-columns: repeat(2, minmax(0, 340px)); }
.p-dot { flex: none; width: 16px; height: 16px; border-radius: 50%; }
.page-product .platform-card em { color: var(--theme-ink, var(--theme)); }

/* 不釘住的版面（手機、平板直放、減少動態） */
html.no-pin .phero-track { height: auto; padding: 0 0 56px; }
html.no-pin .phero-media { position: static; height: auto; overflow: visible; width: min(var(--w), 100% - 64px); margin: 0 auto; }
html.no-pin .phero-card { position: relative; left: auto; right: auto; top: auto; bottom: auto; display: flex; flex-direction: column; gap: 20px; clip-path: none; }
html.no-pin .phero-photo { position: static; order: 2; transform: none; }
html.no-pin .phero-photo::after { display: none; }
html.no-pin .phero-photo img { position: static; height: auto; aspect-ratio: 4 / 3; border-radius: 24px; object-position: 86% 30%; }
@media (min-width: 900px) { html.no-pin .phero-photo img { aspect-ratio: 16 / 9; object-position: 80% 28%; } }
html.no-pin .phero-list { position: static; order: 1; opacity: 1; transform: none; color: var(--on, #fff); } /* 手機版清單不在照片上、在主題色底上：字色跟著主題走（Post 的天藍底用深色字） */
html.no-pin .phero-list li { font-size: clamp(24px, 6vw, 34px); }
html.no-pin .phero-chat { position: static; order: 3; width: auto; max-width: 26em; font-size: 16px; }
html.no-pin .pmsg.in .pb { background: rgba(16, 12, 30, .34); -webkit-backdrop-filter: none; backdrop-filter: none; }
html.no-pin .pmsg.out .pb { background: #fff; color: var(--ink); box-shadow: none; }
html.no-pin .page-product .step, html.no-pin .page-product .step:nth-child(2), html.no-pin .page-product .step:nth-child(3) { background-color: var(--theme); color: var(--on, #fff); }
html.no-pin .page-product .step:nth-child(3) .step-tag { background: var(--tag-bg, rgba(37, 46, 61, .14)); }
html.no-pin .page-product .platforms .pin { background-color: var(--theme); }

@media (max-width: 1180px) {
  .phero-top .wrap { grid-template-columns: minmax(0, 1fr); }
  .phero-badges { padding-bottom: 0; }
}
@media (max-width: 899px) {
  .phero-top { padding-top: calc(var(--nav-h) + 24px); }
  /* 大標題每一行都不拆：最長那一行有幾個字寬（--h1n，建置時算好寫在標題上），字就縮到那一行剛好放得下 */
  .phero h1 { font-size: min(clamp(36px, 9.6vw, 56px), calc((100vw - 41px) / var(--h1n, 9))); }
  .phero-badges .brand-tile { width: 40px; height: 40px; border-radius: 11px; }
  html.no-pin .phero-media { width: min(var(--w), 100% - 40px); }
  html.no-pin .phero-track { padding-bottom: 44px; }
  .page-product .step-copy p { font-size: 17px; }
  .platform-cards.two { grid-template-columns: minmax(0, 420px); }
  .tb-icon { width: 46px; height: 46px; border-radius: 14px; margin-bottom: 18px; }
  .tb-icon svg { width: 24px; height: 24px; }
}

/* ===================== 產品頁手機畫面裡的零件（Social／Post／X 的示範畫面用） ===================== */
/* 留言清單佔滿整個畫面（上面沒有貼文照片的時候），多則留言一則一則進場 */
.comments.fill { flex: 1; justify-content: flex-end; }
.screen .comments.fill.is-scroll { justify-content: flex-start; } /* 上一行跟 .screen .is-scroll 一樣重、又寫在後面，會把「太長就往上捲」蓋掉，留言就往上擠到店名上 */
.is-live .cmt:nth-child(3), .is-live .draft:nth-child(3) { animation-delay: 2.1s; }
.is-live .cmt:nth-child(4), .is-live .draft:nth-child(4) { animation-delay: 3s; }
/* 等老闆審核的回覆草稿 */
.draft { margin-left: 40px; padding: 10px 12px; border-radius: 14px; background: #EEF3FD; border: 1px dashed rgba(63, 119, 223, .55); opacity: 0; transform: translateY(12px); }
.draft b { display: block; font-size: 14px; color: #2B5FC4; }
.draft-acts { display: flex; gap: 8px; margin-top: 8px; }
.draft-acts i { font-style: normal; font-size: 14px; font-weight: 700; line-height: 1.3; padding: 5px 12px; border-radius: 999px; }
.d-ok { background: var(--social); color: #fff; }
.d-edit { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.is-live .draft { animation: msgIn .5s var(--ease) forwards; }
.is-live .draft:nth-child(2) { animation-delay: 1.2s; }
/* 設定成「不處理」的留言（class 不能叫 skip：那是「跳到主要內容」連結的名字，會被藏到畫面外） */
.cmt.ign p { background: transparent; border-style: dashed; color: var(--sub); }
.cmt.ign i { background: #E3E6EC; }
.c-chip { display: inline-block; margin-top: 4px; font-style: normal; font-size: 14px; font-weight: 700; line-height: 1.4; padding: 2px 9px; border-radius: 999px; background: rgba(37, 46, 61, .08); color: var(--sub); }
/* 海巡通知清單 */
.alerts { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 14px; background: #F6F7F9; }
.alert { padding: 11px 12px; border-radius: 16px; background: #fff; border: 1px solid var(--line); opacity: 0; transform: translateY(12px); }
.a-tag { display: inline-block; font-size: 14px; line-height: 1.4; padding: 2px 10px; border-radius: 999px; background: #EEF3FD; color: #2B5FC4; }
.alert.warn .a-tag { background: #FDECEC; color: #C0392B; }
.alert p { margin-top: 6px; font-weight: 700; line-height: 1.45; }
.a-meta { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 14px; color: var(--sub); }
.a-meta svg { width: 16px; height: 16px; flex: none; }
.a-meta em { margin-left: auto; font-style: normal; font-weight: 700; color: var(--ink); }
.is-live .alert { animation: msgIn .5s var(--ease) forwards; }
.is-live .alert:nth-child(1) { animation-delay: .25s; } .is-live .alert:nth-child(2) { animation-delay: 1s; }
.is-live .alert:nth-child(3) { animation-delay: 1.8s; } .is-live .alert:nth-child(4) { animation-delay: 2.6s; }
/* 對話泡泡裡並排的兩顆按鈕（送出／修改） */
.msg-acts { display: flex; gap: 8px; margin-top: 8px; }
.msg-acts .msg-btn { flex: 1; margin-top: 0; }
.msg-btn.ghost { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }

/* ---- Post 頁的手機畫面 ---- */
/* 主視覺照片上的「排好的貼文」小卡：縮圖是方的 */
.pmsg i.sq { border-radius: .5em; }
/* AI 圖片創作：一句需求、四張生成的圖、一顆按鈕 */
.gen { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 14px; background: #F6F7F9; }
.gen-ask { align-self: flex-end; max-width: 86%; padding: 10px 14px; border-radius: 18px 18px 6px 18px; background: var(--post); color: var(--ink); font-weight: 700; }
.gen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gen-grid i { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: #DDE6EE; }
.gen-grid img { width: 100%; height: 100%; object-fit: cover; }
.gen-grid .pick { outline: 3px solid var(--post); outline-offset: -3px; }
.gen-grid .pick::after { content: ""; position: absolute; right: 8px; top: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--post) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6 11.5l3.2 3.2 6.8-7.4' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.gen-btn { display: grid; place-items: center; height: 44px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 15px; }
/* 多語翻譯：同一篇貼文的三種語言 */
.langs { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 14px; background: #F6F7F9; }
.lang { padding: 11px 12px; border-radius: 16px; background: #fff; border: 1px solid var(--line); opacity: 0; transform: translateY(12px); }
.lang b { display: inline-block; font-size: 14px; line-height: 1.4; padding: 2px 10px; border-radius: 999px; background: #E3F5FD; color: #0B76A8; }
.lang p { margin-top: 6px; font-weight: 700; line-height: 1.45; }
/* 上面是那一篇貼文的照片，畫面多高它就吃多高（三種語言的卡片貼在下面） */
.lang-photo { flex: 1 1 0; min-height: 72px; border-radius: 16px; overflow: hidden; }
.lang-photo img { width: 100%; height: 100%; object-fit: cover; }
.is-live .lang { animation: msgIn .5s var(--ease) forwards; }
.is-live .lang:nth-child(2) { animation-delay: .25s; } .is-live .lang:nth-child(3) { animation-delay: 1.1s; } .is-live .lang:nth-child(4) { animation-delay: 1.9s; }
/* 成效分析：表現最好的貼文（大照片，吃掉剩下的高度）＋各平台的長條（只畫相對長短，不放數字） */
.stats { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 14px; background: #F6F7F9; }
.stat-top { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; border-radius: 16px; background: #fff; border: 1px solid var(--line); overflow: hidden; margin-bottom: 4px; }
.stat-top i { flex: 1 1 0; min-height: 72px; overflow: hidden; }
.stat-top > div { padding: 10px 12px 12px; }
.stat-top img { width: 100%; height: 100%; object-fit: cover; }
.stat-top small { display: block; font-size: 14px; color: #0B76A8; font-weight: 700; }
.stat-top b { display: block; font-size: 15px; line-height: 1.4; }
.stat-row { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: center; }
.stat-row svg { width: 18px; height: 18px; }
.bar { display: block; height: 14px; border-radius: 999px; background: #E3E8EF; overflow: hidden; }
.bar::after { content: ""; display: block; height: 100%; width: calc(var(--v) * 100%); border-radius: 999px; background: var(--post); transform-origin: 0 50%; transform: scaleX(0); }
.is-live .bar::after { animation: barIn .9s var(--ease) forwards; }
.is-live .stat-row:nth-child(2) .bar::after { animation-delay: .3s; } .is-live .stat-row:nth-child(3) .bar::after { animation-delay: .5s; }
.is-live .stat-row:nth-child(4) .bar::after { animation-delay: .7s; } .is-live .stat-row:nth-child(5) .bar::after { animation-delay: .9s; } .is-live .stat-row:nth-child(6) .bar::after { animation-delay: 1.1s; }
@keyframes barIn { to { transform: none; } }
/* 發文系統：幾條會重複跑的內容產線，各有一個開關 */
.lines { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; gap: 10px; padding: 14px; background: #F6F7F9; }
.line { flex: 0 1 92px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 16px; background: #fff; border: 1px solid var(--line); opacity: 0; transform: translateY(12px); }
.line > div { flex: 1; min-width: 0; }
.line b { display: block; font-size: 15px; line-height: 1.4; }
.line-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #E3F5FD; color: #0B76A8; }
.line-ic svg { width: 20px; height: 20px; }
.line-add { flex: 0 1 48px; min-height: 36px; display: grid; place-items: center; border-radius: 16px; border: 1.5px dashed rgba(37, 46, 61, .3); color: var(--sub); }
.line-add svg { width: 22px; height: 22px; }
.line .plan-meta { flex-wrap: wrap; }
.line .plan-meta em { flex-basis: 100%; margin: 3px 0 0; white-space: nowrap; } /* 時間自己一行（跟圖示擠同一行會被折成兩行） */
.sw { flex: none; position: relative; width: 40px; height: 24px; border-radius: 999px; background: #D5DAE2; }
.sw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.sw.on { background: var(--post); }
.sw.on::after { left: 19px; }
.is-live .line { animation: msgIn .5s var(--ease) forwards; }
.is-live .line:nth-child(1) { animation-delay: .25s; } .is-live .line:nth-child(2) { animation-delay: .9s; }
.is-live .line:nth-child(3) { animation-delay: 1.5s; } .is-live .line:nth-child(4) { animation-delay: 2.1s; }
/* 媒體庫：分類＋三欄四列的格子（格子的高度跟著畫面走，把畫面排滿） */
.media { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 14px; background: #F6F7F9; }
.media-tabs { display: flex; gap: 6px; }
.media-tabs b { font-size: 14px; line-height: 1.4; padding: 5px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--sub); }
.media-tabs .on { background: var(--ink); color: #fff; border-color: transparent; }
.media-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(0, 1fr); gap: 6px; }
.media-grid i { position: relative; min-height: 0; border-radius: 12px; overflow: hidden; background: #DDE6EE; }
.media-grid img { width: 100%; height: 100%; object-fit: cover; }
.media-grid .vid::after { content: ""; position: absolute; left: 6px; bottom: 6px; width: 22px; height: 22px; border-radius: 50%; background: rgba(16, 20, 28, .7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M8.5 6.5v9l7-4.5z' fill='%23fff'/%3E%3C/svg%3E") center/100% no-repeat; }
.media-grid .add { display: grid; place-items: center; background: #fff; border: 1.5px dashed rgba(37, 46, 61, .3); color: var(--sub); }
.media-grid .add svg { width: 24px; height: 24px; }
/* 品牌風格訓練：你給的照片 → 照這個風格生成的新圖 */
.lora { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 14px; background: #F6F7F9; }
.lora small { font-size: 14px; color: var(--sub); font-weight: 700; }
.lora-in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 6px; }
.lora-in i { aspect-ratio: 1; border-radius: 10px; overflow: hidden; }
.lora-in img, .lora-out img { width: 100%; height: 100%; object-fit: cover; }
.lora-out { flex: 1 1 0; min-height: 150px; border-radius: 16px; overflow: hidden; outline: 3px solid var(--post); outline-offset: -3px; } /* 生成的那一張吃掉剩下的高度 */
/* 排程總覽裡「今天／本週」的小標 */
.plan-day { font-size: 14px; color: var(--sub); font-weight: 700; margin-bottom: -4px; }
.plan-day:first-child { margin-top: auto; }

/* 深色字導覽列的頁面（Post、價格…）打開手機選單時：選單是深色底，導覽列的字和標誌要回到白色 */
body.menu-open.nav-ink .nav:not(.is-scrolled) { color: #fff; }
body.menu-open.nav-ink .nav:not(.is-scrolled) .btn-white { background: #fff; color: var(--ink); }

/* ===================== 價格頁（版型參考 ManyChat 的價格頁：淺底、置中的標題和切換鈕、一排方案卡、選產品的卡、比較表） ===================== */
.page-pricing { background: var(--paper); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tag-ink { display: inline-block; min-height: 36px; padding: 6px 16px; border-radius: 18px; background: rgba(37, 46, 61, .07); font-size: 16px; font-weight: 700; line-height: 1.5; }
.price-head { padding: calc(var(--nav-h) + clamp(24px, 5vh, 64px)) 0 0; text-align: center; }
.price-head .h2, .price-in-head .h2 { margin: 18px auto 0; font-size: clamp(32px, 3.6vw, 56px); }
.price-head .lead, .price-in-head .lead { max-width: 38em; }
/* 產品頁的價格區（10-06）：跟價格頁同一套開頭和方案卡；淺灰底讓白色方案卡跳出來，上面不用留導覽列的高度 */
.price-in { padding: 120px 0 0; background: var(--paper); }
.price-in-head { text-align: center; }
@media (max-width: 767px) { .price-in { padding-top: 88px; } }
.price-unit { margin-top: 20px; font-size: 18px; font-weight: 700; }
/* 切換鈕：一顆膠囊裡幾個選項，選到的那個是深色 */
.seg { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 18px; padding: 5px; border-radius: 28px; background: rgba(37, 46, 61, .08); }
.seg button { height: 44px; padding: 0 22px; border-radius: 999px; font-size: 16px; font-weight: 700; color: #5E5E63; transition: background .25s, color .25s; } /* 灰底按鈕上的灰字深一點（10-05 無障礙） */
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.pay { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 16px; font-size: 14px; line-height: 1.4; color: var(--sub); }
.pay i { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line); }
.pay img { height: 22px; width: auto; }
.seg-prod { margin-top: 36px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.seg-prod button { height: 48px; padding: 0 26px; font-size: 17px; }
/* 月繳／年繳、產品分頁、選產品：按鈕只改 <body> 上的標記，這裡決定顯示哪一塊 */
body[data-cycle="m"] .cy-y, body[data-cycle="y"] .cy-m { display: none !important; }
.plan-panel { display: none; }
body[data-prod="chat"] .plan-panel[data-prod="chat"], body[data-prod="social"] .plan-panel[data-prod="social"], body[data-prod="post"] .plan-panel[data-prod="post"] { display: block; }

/* 方案卡 */
.plans { padding: 40px 0 96px; }
.plan-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; }
.plan-top h2 { font-size: 22px; line-height: 1.4; font-weight: 800; }
.plan-plats { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.plan-plats .brand-tile { width: 32px; height: 32px; border-radius: 9px; }
.plat-txt { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; font-weight: 700; line-height: 1; }
.plat-txt svg { width: 16px; height: 16px; }
.plan-cards { margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.pcard { display: flex; flex-direction: column; padding: 28px 28px 30px; border-radius: var(--r-card); background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); text-align: left; }
.pcard h3 { display: flex; align-items: center; gap: 10px; font-size: 20px; line-height: 1.4; font-weight: 800; }
.pcard h3 em { font-style: normal; font-size: 14px; font-weight: 700; line-height: 1; padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, .22); }
.p-fit { margin-top: 4px; font-size: 16px; line-height: 1.6; color: var(--sub); }
.p-price { margin-top: 20px; display: flex; align-items: baseline; gap: 6px; line-height: 1; }
.p-price small { font-size: 20px; font-weight: 700; }
.p-price b { font-size: clamp(48px, 4.4vw, 64px); font-weight: 800; }
.p-price span { font-size: 17px; color: var(--sub); }
.p-price s { margin-left: 6px; font-size: 20px; color: var(--sub); }
.p-sub { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--sub); }
.pcard .btn { margin-top: 22px; width: 100%; }
.p-trial { margin-top: 14px; align-self: flex-start; font-size: 15px; font-weight: 700; line-height: 1.5; text-decoration: underline; text-underline-offset: 4px; }
.p-feats { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.p-feats li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: 16px; line-height: 1.5; }
.p-feats svg { width: 20px; height: 20px; margin-top: 2px; color: var(--theme-ink, var(--theme)); }
/* 中間那張（Popular）用這個產品的主題色 */
.pcard.is-pop { background: var(--theme); color: var(--on, #fff); }
.pcard.is-pop .p-fit, .pcard.is-pop .p-price span, .pcard.is-pop .p-price s, .pcard.is-pop .p-sub { color: inherit; opacity: .88; }
.pcard.is-pop .btn { background: #fff; color: var(--ink); }
.pcard.is-pop .p-feats { border-color: var(--on-line, rgba(255, 255, 255, .28)); }
.pcard.is-pop .p-feats svg { color: inherit; }
.theme-post .pcard.is-pop .btn { background: var(--ink); color: #fff; }
.pcard.is-pop h3 em { background: var(--tag-bg, rgba(37, 46, 61, .14)); } /* 熱門方案卡上的「熱門」標籤：紫、藍底疊深色才看得清楚（10-05 無障礙） */
.theme-post .pcard.is-pop h3 em { background: rgba(255, 255, 255, .2); }
.plan-note { margin-top: 24px; text-align: center; font-size: 15px; line-height: 1.6; color: var(--sub); }

/* 不知道選哪個：左邊三個產品選一個，右邊換成那個產品的照片 */
.pick-sec { padding: 112px 0 120px; } /* 不能叫 .pick：手機畫面裡「選到的那張圖」也叫 pick */
.pick-head, .ptable-head { text-align: center; }
.pick-box { margin: 48px auto 0; max-width: 1040px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: 28px; overflow: hidden; background: #fff; text-align: left; }
.pick-card { display: flex; flex-direction: column; padding: 36px; }
.pick-dashes { display: flex; gap: 6px; }
.pick-dashes i { width: 28px; height: 3px; border-radius: 3px; background: rgba(37, 46, 61, .14); transition: background .3s; }
body[data-pick="chat"] .pick-dashes i:nth-child(1), body[data-pick="social"] .pick-dashes i:nth-child(2), body[data-pick="post"] .pick-dashes i:nth-child(3) { background: var(--ink); }
.pick-opts { margin-top: 24px; display: grid; gap: 10px; }
.pick-opt { display: grid; grid-template-columns: 16px 1fr; gap: 14px; align-items: start; width: 100%; padding: 16px 18px; border-radius: 18px; text-align: left; box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow .2s, background .2s; }
.pick-opt .p-dot { margin-top: 7px; }
.pick-opt strong { display: block; font-size: 20px; line-height: 1.4; font-weight: 800; }
.pick-opt small { display: block; margin-top: 2px; font-size: 16px; line-height: 1.55; color: var(--sub); word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
.pick-opt[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--ink); background: var(--paper); }
.pick-go { display: none; margin-top: 24px; width: 100%; }
body[data-pick="chat"] .pick-go[data-pick="chat"], body[data-pick="social"] .pick-go[data-pick="social"], body[data-pick="post"] .pick-go[data-pick="post"] { display: inline-flex; }
.pick-media { position: relative; min-height: 440px; background: var(--ink); }
.pick-media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 80% 30%; opacity: 0; transition: opacity .5s var(--ease); }
body[data-pick="chat"] .pick-media img[data-pick="chat"], body[data-pick="social"] .pick-media img[data-pick="social"], body[data-pick="post"] .pick-media img[data-pick="post"] { opacity: 1; }
.pick-chip { position: absolute; left: 20px; bottom: 20px; display: none; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 16px; font-weight: 700; line-height: 1; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
body[data-pick="chat"] .pick-chip[data-pick="chat"], body[data-pick="social"] .pick-chip[data-pick="social"], body[data-pick="post"] .pick-chip[data-pick="post"] { display: inline-flex; }

/* 完整方案比較表 */
.ptable { padding: 120px 0 128px; background: #fff; }
.ptable-head { position: relative; z-index: 3; }
.ptable-head .seg { margin-top: 28px; }
.pt { width: 100%; max-width: 1040px; margin: 36px auto 0; border-collapse: separate; border-spacing: 0; table-layout: fixed; text-align: center; font-size: 17px; }
.pt th, .pt td { padding: 16px 12px; border-bottom: 1px solid var(--line); line-height: 1.5; font-weight: 400; }
/* 表頭捲到上面會黏住（方案名稱一直看得到）；上方用白色補滿，後面的列才不會從導覽列和表頭中間露出來 */
.pt thead th { position: sticky; top: 88px; z-index: 2; background: #fff; vertical-align: bottom; padding-bottom: 18px; }
.pt thead th::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 96px; background: #fff; }
.pt thead th:first-child { width: 34%; text-align: left; font-weight: 700; }
.pt thead b { display: block; font-size: 18px; font-weight: 800; word-break: keep-all; }
.pt thead th > span { display: block; font-size: 16px; color: var(--sub); }
.pt tbody th[scope="row"] { text-align: left; word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
.pt-sec th { padding: 44px 12px 14px; text-align: left; font-size: 22px; font-weight: 800; border-bottom: 2px solid var(--ink); }
.pt-sec th > * { display: inline-block; vertical-align: middle; }
.pt-sec .p-dot { margin-right: 10px; }
.pt-sec small { margin-left: 12px; font-size: 16px; font-weight: 400; color: var(--sub); }
.pt td.yes svg { margin: 0 auto; width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: var(--theme); color: var(--on, #fff); }
.pt td.no { color: #A9AFBA; }
.pt-cta td { border-bottom: 0; padding-top: 20px; }
.pt-cta .btn { height: 44px; padding: 0 18px; font-size: 16px; width: 100%; max-width: 176px; }

@media (max-width: 899px) {
  .plan-cards { grid-template-columns: minmax(0, 520px); justify-content: center; }
  .pick-sec { padding: 88px 0 96px; }
  .pick-box { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .pick-card { padding: 28px 22px; }
  .pick-media { min-height: 0; aspect-ratio: 4 / 3; }
  .ptable { padding: 88px 0 96px; }
}
@media (max-width: 599px) {
  .seg button { padding: 0 16px; }
  .seg-prod { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .seg-prod button { height: 44px; padding: 0 4px; font-size: 16px; }
  /* 手機：功能名稱自己一列，下面三格是三個方案 */
  .pt, .pt thead, .pt tbody { display: block; }
  .pt tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pt thead { position: sticky; top: 84px; z-index: 2; background: #fff; }
  .pt thead::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 96px; background: #fff; }
  .pt thead th { position: static; padding: 12px 4px; }
  .pt thead th::before { display: none; }
  .pt thead th:first-child { display: none; }
  .pt thead b { font-size: 16px; }
  .pt thead th > span { font-size: 15px; }
  .pt tbody th[scope="row"] { grid-column: 1 / -1; padding: 14px 0 0; border-bottom: 0; font-weight: 700; }
  .pt td { padding: 8px 4px 14px; font-size: 16px; }
  .pt-sec th { grid-column: 1 / -1; padding: 36px 0 12px; }
  .pt-sec small { display: block; margin: 2px 0 0 26px; }
  .pt-cta td:first-child { display: none; }
  .pt-cta .btn { padding: 0 6px; font-size: 15px; }
}

/* ===================== 聯絡頁 ===================== */
.page-contact { background: var(--paper); }
/* 關於頁、聯絡頁窄欄裡的字：只在標點、空格和建置程式放的「可以換行」記號那裡換行，一個詞不會被拆開 */
.form-card p, .form-card small, .form-card label, .alink span, .ab-values span, .afacts dd, .c-badge { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
.chead { padding: calc(var(--nav-h) + clamp(24px, 5vh, 64px)) 0 112px; }
.chead-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: start; }
.chead-copy .h2 { font-size: clamp(44px, 5.6vw, 88px); line-height: 1.2; }
.chead-copy .lead { margin: 22px 0 0; }
.c-links { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; }
.c-links a { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px 0 8px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 16px; font-weight: 700; transition: box-shadow .2s; }
.c-links a:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.c-links i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--paper); }
.c-links i svg { width: 18px; height: 18px; }
.c-photo { position: relative; margin-top: 32px; border-radius: 28px; overflow: hidden; aspect-ratio: 1100 / 967; max-height: 460px; width: 100%; }
.c-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; }
.c-badge { position: absolute; left: 18px; bottom: 18px; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-radius: 18px; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 8px 24px rgba(0, 0, 0, .14); }
.c-badge > i { width: 12px; height: 12px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 4px rgba(34, 197, 94, .2); }
.c-badge b { display: block; font-size: 16px; line-height: 1.3; }
.c-badge small { display: block; font-size: 14px; line-height: 1.3; color: var(--sub); }
/* 表單卡 */
.form-card { position: relative; background: #fff; border-radius: 28px; padding: 36px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.form-card h2 { font-size: clamp(24px, 2vw, 30px); line-height: 1.35; font-weight: 800; word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
.f-sub { margin-top: 10px; font-size: 16px; line-height: 1.7; color: var(--sub); word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
.f-error { display: none; margin-top: 14px; padding: 10px 14px; border-radius: 12px; background: #FDECEC; color: #B42318; font-size: 15px; font-weight: 700; }
.form-card.is-error .f-error { display: block; }
.f-fail { display: none; margin-top: 14px; padding: 10px 14px; border-radius: 12px; background: #FDECEC; color: #B42318; font-size: 15px; font-weight: 700; } /* 送到後台失敗（正式網域才會送） */
.form-card.is-fail .f-fail { display: block; }
.form-card { scroll-margin-top: calc(var(--nav-h) + 16px); } /* 從 #fridai-lead-form 跳過來時表單不會被導覽列蓋住 */
.f-hp { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0; pointer-events: none; } /* 擋機器人的隱形欄位：真人看不到（10-06 改成原地裁掉，不再推到畫面外 9999px，版面檢查才不會算成超出畫面） */
.f-grid { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
.f-grid .full { grid-column: 1 / -1; }
.f-grid label, .f-label { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 700; line-height: 1.4; }
.f-grid label em { font-style: normal; color: #E5484D; margin-left: 2px; }
.f-grid input, .f-grid select, .f-grid textarea { width: 100%; height: 52px; padding: 0 16px; border-radius: 14px; border: 1.5px solid rgba(37, 46, 61, .16); background: #fff; color: var(--ink); font: inherit; font-size: 16px; line-height: 1.4; transition: border-color .2s, box-shadow .2s; }
.f-grid textarea { height: 120px; padding: 12px 16px; resize: vertical; }
.f-grid input:focus, .f-grid select:focus, .f-grid textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(37, 46, 61, .1); }
.f-grid ::placeholder { color: #A0A6B1; }
.f-hint { display: block; margin-top: 6px; font-size: 14px; line-height: 1.4; color: var(--sub); }
.f-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.f-chips label { position: relative; margin: 0; }
.f-chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.f-chips span { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(37, 46, 61, .16); font-size: 16px; font-weight: 700; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.f-chips input:checked + span { background: var(--ink); color: #fff; box-shadow: none; }
.f-chips input:focus-visible + span { box-shadow: 0 0 0 3px rgba(63, 119, 223, .45); }
.f-grid .btn { width: 100%; height: 56px; font-size: 18px; }
.f-privacy { margin-top: 12px; text-align: center; font-size: 14px; line-height: 1.5; color: var(--sub); }
.f-ok { display: none; padding: 40px 8px; text-align: center; }
.form-card.is-done .f-body { display: none; }
.form-card.is-done .f-ok { display: block; }
.f-ok > i { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; background: #E8F7EE; color: #15803D; }
.f-ok > i svg { width: 34px; height: 34px; }
.f-ok h3 { font-size: 26px; line-height: 1.4; font-weight: 800; }
.f-ok p { margin-top: 10px; font-size: 17px; color: var(--sub); }
.f-ok .btn { margin-top: 24px; gap: 8px; }
.f-ok .btn svg { width: 20px; height: 20px; }
/* 兩張「先看看」的卡 */
.c-opts { padding: 0 0 120px; }
.c-opts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.c-opt { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); border-radius: 28px; overflow: hidden; background: var(--theme); color: var(--on, #fff); min-height: 360px; }
.c-opt-copy { display: flex; flex-direction: column; align-items: flex-start; padding: 34px 32px; }
.c-opt-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: rgba(255, 255, 255, .18); }
.c-opt h2 { margin-top: 22px; font-size: clamp(24px, 2vw, 30px); line-height: 1.35; font-weight: 800; word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
.c-opt p { margin-top: 12px; font-size: 17px; line-height: 1.7; opacity: .9; word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
.c-opt .btn { margin-top: auto; }
.c-opt-copy p + .btn { margin-top: 28px; }
.c-opt figure { position: relative; }
.c-opt figure img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 70% 30%; }

/* 開發者的話（關於頁、聯絡頁共用） */
.lore { padding: 120px 0; background: var(--post); color: var(--ink); }
.lore-head { text-align: center; }
.lore-head small { display: block; font-size: 16px; font-weight: 700; margin-bottom: 12px; opacity: .8; }
.lore-head .lead { color: inherit; max-width: 40em; opacity: .9; }
.lore-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.lore-col { display: grid; gap: 20px; }
.lore-card { background: #fff; border-radius: 24px; padding: 30px 30px 26px; }
.lore-card blockquote { margin: 0; font-size: 17px; line-height: 1.85; word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
.lore-card figcaption { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 12px; }
.lore-av { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--paper); color: var(--sub); }
.lore-av svg { width: 22px; height: 22px; }
.lore-card figcaption b { display: block; font-size: 17px; line-height: 1.3; }
.lore-card figcaption small { display: block; font-size: 15px; line-height: 1.4; color: var(--sub); }
.lore-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 0; }
.lore-stats div { background: var(--ink); color: #fff; border-radius: 24px; padding: 26px 26px 24px; }
.lore-stats dt { font-size: 16px; font-weight: 700; opacity: .8; }
.lore-stats dd { margin: 6px 0 0; font-size: clamp(44px, 4.6vw, 64px); line-height: 1.1; font-weight: 800; }

/* ===================== 關於頁 ===================== */
/* 開頭：棋盤人像（一格照片、一格主題色；欄數是單數，照片和色塊照順序排就會錯開），中間一個對話泡泡 */
.ahero { position: relative; height: 190vh; background: var(--chat); }
.ahero-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.mosaic { display: grid; grid-template-columns: repeat(5, 1fr); }
.mosaic i { aspect-ratio: 1; }
.mosaic .t { position: relative; }
.mosaic .t img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1 - .8 * var(--ap, 0))); border-radius: calc(var(--ap, 0) * 50%); }
.ahero-bub { position: absolute; left: 50%; top: 30vw; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 10px; width: max-content; max-width: calc(100% - 40px); }
.abub { background: #fff; color: var(--ink); border-radius: 28px 28px 28px 8px; padding: 22px 30px 24px; box-shadow: 0 16px 40px rgba(20, 16, 60, .25); text-align: center; }
.abub small { display: block; font-size: 16px; font-weight: 700; color: var(--chat); }
.abub h1 { margin-top: 4px; font-size: clamp(36px, 3.6vw, 60px); line-height: 1.2; font-weight: 800; }
.abub-s { align-self: flex-end; padding: 10px 18px; border-radius: 20px 20px 8px 20px; font-size: 15px; font-weight: 700; line-height: 1.5; color: var(--sub); }
/* 色塊＋照片 */
.ab-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ab-cell { min-height: min(50vw, 640px); }
.ab-color { display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 5vw, 88px); background: var(--theme); color: var(--on, #fff); }
.ab-paper { background: var(--paper); color: var(--ink); }
.ab-big { font-size: clamp(24px, 2.3vw, 38px); line-height: 1.6; font-weight: 700; word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
.ab-photo { position: relative; overflow: hidden; }
.ab-photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 30%; }
.ab-values { margin-top: 28px; display: grid; gap: 16px; }
.ab-values li { padding: 20px 22px; border-radius: 20px; background: #fff; font-size: 17px; line-height: 1.75; word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
.ab-values b { display: block; font-size: 20px; line-height: 1.5; margin-bottom: 2px; }
/* 三條產品線 */
.alines { padding: 120px 0; background: #fff; }
.alines .h2 { text-align: center; }
.aline-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.aline { display: flex; flex-direction: column; border-radius: 28px; overflow: hidden; background: var(--theme); color: var(--on, #fff); transition: transform .3s var(--ease); }
.aline:hover { transform: translateY(-4px); }
.aline-photo { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.aline-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 30%; }
.aline-body { display: flex; flex-direction: column; flex: 1; padding: 26px 26px 28px; }
.aline-body b { font-size: 26px; line-height: 1.3; font-weight: 800; }
.aline-body > span { margin-top: 12px; font-size: 17px; line-height: 1.75; word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
.aline-body em { margin-top: auto; padding-top: 18px; font-style: normal; font-size: 16px; font-weight: 700; }
/* 深色區：信任＋公司資料，四周飄幾個小頭像 */
.atrust { position: relative; overflow: hidden; padding: 140px 0; background: var(--ink); color: #fff; }
.atrust-avs img { position: absolute; width: clamp(56px, 6vw, 96px); height: auto; aspect-ratio: 1; border-radius: 22px; object-fit: cover; opacity: .9; }
.atrust-avs img:nth-child(1) { left: 4%; top: 12%; transform: rotate(-6deg); }
.atrust-avs img:nth-child(2) { left: 9%; bottom: 14%; transform: rotate(5deg); }
.atrust-avs img:nth-child(3) { right: 5%; top: 9%; transform: rotate(7deg); }
.atrust-avs img:nth-child(4) { right: 10%; bottom: 10%; transform: rotate(-4deg); }
.atrust-avs img:nth-child(5) { left: 47%; top: 4%; width: clamp(44px, 4vw, 64px); transform: rotate(3deg); }
.atrust-avs img:nth-child(6) { left: 52%; bottom: 3%; width: clamp(44px, 4vw, 64px); transform: rotate(-5deg); }
.atrust-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.atrust-copy p { margin-top: 20px; font-size: 18px; line-height: 1.8; opacity: .88; word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
.afacts { margin: 0; border-radius: 28px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); padding: 8px 28px; }
.afacts div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.afacts div:last-child { border-bottom: 0; }
.afacts dt { font-size: 16px; opacity: .7; }
.afacts dd { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.6; overflow-wrap: anywhere; }
/* 可查證資料 */
.alinks { padding: 120px 0; background: var(--paper); }
.alinks .h2 { text-align: center; }
.alink-grid { margin-top: 44px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.alink { display: grid; grid-template-columns: 44px 1fr 22px; gap: 14px; align-items: center; padding: 20px 22px; border-radius: 20px; background: #fff; font-size: 17px; font-weight: 700; line-height: 1.5; transition: transform .25s var(--ease), box-shadow .25s; }
.alink:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, .06); }
.alink i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--paper); }
.alink i svg { width: 22px; height: 22px; }
.alink em svg { width: 20px; height: 20px; color: var(--sub); }

html.no-pin .ahero { height: auto; }
html.no-pin .ahero-pin { position: relative; height: auto; }
html.no-pin .mosaic .t img { transform: none; border-radius: 0; }

@media (max-width: 1100px) {
  .chead-grid { grid-template-columns: minmax(0, 1fr); }
  .c-photo { max-height: 380px; }
  .c-opts-grid { grid-template-columns: minmax(0, 1fr); }
  .atrust-in { grid-template-columns: minmax(0, 1fr); }
  .aline-grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 899px) {
  .mosaic { grid-template-columns: repeat(3, 1fr); }
  .ahero-bub { top: 83.3vw; }
  .ab-row, .ab-row-r { grid-template-columns: minmax(0, 1fr); }
  .ab-row-r .ab-photo { order: 2; }
  .ab-cell.ab-photo { min-height: 0; aspect-ratio: 4 / 3; }
  .ab-cell.ab-color { min-height: 0; }
  .lore { padding: 88px 0; }
  .lore-grid { grid-template-columns: minmax(0, 1fr); }
  .alink-grid { grid-template-columns: minmax(0, 1fr); }
  .alines, .alinks { padding: 88px 0; }
  .atrust { padding: 96px 0; }
}
@media (max-width: 599px) {
  .chead { padding-bottom: 72px; }
  .form-card { padding: 26px 20px; border-radius: 22px; }
  .f-grid { grid-template-columns: minmax(0, 1fr); }
  .c-opt { grid-template-columns: minmax(0, 1fr); }
  .c-opt figure { aspect-ratio: 4 / 3; order: -1; }
  .lore-card { padding: 24px 20px 22px; }
  .abub { padding: 18px 22px 20px; }
  .afacts { padding: 4px 18px; }
  .afacts div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .atrust-avs { display: none; }
}

/* ===================== FRIDAI for X（英文頁；產品頁版型＋X 的黑色主題） ===================== */
.x-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.phero-copy .x-ctas { margin-top: clamp(20px, 3vh, 32px); }
.x-ctas.center { justify-content: center; margin-top: 32px; }
.tb-tag { display: block; margin-bottom: 12px; font-size: 15px; font-weight: 700; letter-spacing: .06em; color: var(--sub); }
.platforms .tb-tag { color: inherit; opacity: .75; }
.pb-tag { display: block; margin-bottom: 2px; font-size: 14px; font-weight: 700; letter-spacing: .04em; opacity: .72; }
.pmsg.sys .pb { background: #FFF1C9; color: #5B3B00; border-bottom-right-radius: .35em; box-shadow: none; }
html.no-pin .pmsg.sys .pb { background: #FFF1C9; color: #5B3B00; }
/* 對話畫面裡「正在輸入」的三個點、轉給真人的提示 */
.msg.typing { display: inline-flex; gap: 4px; align-self: flex-start; padding: 12px 14px; }
.msg.typing i { width: 7px; height: 7px; border-radius: 50%; background: #9AA3AF; animation: typeDot 1.2s infinite ease-in-out; }
.msg.typing i:nth-child(2) { animation-delay: .15s; } .msg.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typeDot { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.msg.handoff { align-self: center; background: #FFF1C9; color: #5B3B00; font-size: 14px; font-weight: 700; border-radius: 999px; padding: 6px 14px; }
/* 第三格：照片＋說明文字草稿＋核准 */
.xpub { justify-content: flex-end; }
/* 選到的那張放大在左邊，另外兩張疊在右邊 */
.xpub-media { flex: 1 1 0; min-height: 120px; max-height: 220px; display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; }
.xpub-media i { position: relative; min-height: 0; border-radius: 12px; overflow: hidden; }
.xpub-media .pick { grid-column: 1; grid-row: 1 / 3; }
.xpub-media img { width: 100%; height: 100%; object-fit: cover; }
.xpub-media .pick { outline: 3px solid var(--ink); outline-offset: -3px; }
.xpub-draft { display: grid; gap: 8px; padding: 14px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.xpub-draft small { font-size: 14px; font-weight: 700; color: var(--sub); }
.xpub-draft p { font-weight: 700; line-height: 1.5; }
.xpub-draft .d-ok { background: var(--ink); }
.xpub-learn { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; background: #E7F8C9; color: #2F5A00; font-size: 14px; font-weight: 700; }
.xpub-learn svg { width: 18px; height: 18px; flex: none; }
/* 創辦人實測（數字和截圖跟現站一樣） */
.xcase { padding: 120px 0; background: #fff; }
.xcase-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 56px; align-items: center; }
.xcase .h2 { margin-top: 18px; }
.xcase .lead { margin: 18px 0 0; max-width: 38em; }
.xcase-cmp { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); border-radius: 18px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.xcase-cmp > span { padding: 14px 18px; }
.xcase-cmp > span.on { background: var(--ink); color: #fff; }
.xcase-cmp small { display: block; font-size: 14px; font-weight: 700; letter-spacing: .04em; opacity: .7; }
.xcase-cmp b { font-size: 18px; }
.xcase-cmp em { display: grid; place-items: center; padding: 0 14px; background: var(--social); color: #fff; font-style: normal; font-size: 14px; font-weight: 700; letter-spacing: .03em; text-align: center; }
.xstats { margin: 14px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.xstats div { padding: 18px 20px; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line); }
.xstats dt { font-size: 14px; font-weight: 700; letter-spacing: .04em; color: var(--sub); }
.xstats dd { margin: 4px 0 0; font-size: clamp(40px, 3.6vw, 56px); font-weight: 800; line-height: 1.1; }
.xstats dd.xstats-vs { margin: 0; font: inherit; } /* 「比沒用 FRIDAI 多幾 %」包在 dd 裡結構才對（報讀軟體），樣式跟原本一樣（10-05 無障礙） */
.xstats small { display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 999px; background: #E7F8C9; color: #2F5A00; font-size: 14px; font-weight: 700; }
.xcase-link { display: inline-block; margin-top: 22px; font-size: 17px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.xcase-note { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--sub); }
.xcase-shot { margin: 0; justify-self: center; width: 100%; max-width: 340px; }
.xcase-shot img { width: 100%; height: auto; border-radius: 30px; box-shadow: 0 0 0 8px #0F1419, 0 24px 60px rgba(15, 20, 25, .25); } /* 手機外框用陰影畫，不用 border（border 會讓截圖的比例看起來被壓扁） */
.xcase-shot figcaption { margin-top: 12px; text-align: center; font-size: 14px; line-height: 1.5; }
.xcase-shot a { color: var(--sub); text-decoration: underline; text-underline-offset: 3px; }
.xcase-shot figcaption a { display: block; } .xcase-shot figcaption a + a { margin-top: 6px; } /* 成果摘要、成長曲線兩個來源連結各一行 */
/* 自動化的煞車 */
.xbrake { padding: 120px 0; background: var(--social); color: #fff; }
.xbrake .tag-ink, .xpost .tag-ink { background: rgba(255, 255, 255, .16); }
.xbrake .h2, .xpost .h2 { margin-top: 18px; }
.xbrake .lead { margin: 18px 0 0; color: rgba(255, 255, 255, .88); }
.xbrake-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.xbrake-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .3); }
.xbrake-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr) 14px; gap: 14px; align-items: center; padding: 20px 4px; border-bottom: 1px solid rgba(255, 255, 255, .3); font-size: 18px; line-height: 1.5; }
.xbrake-list span { font-size: 14px; font-weight: 700; opacity: .7; }
.xbrake-list li::after { content: ""; width: 10px; height: 10px; border: 2px solid currentColor; transform: rotate(45deg); }
/* X 的方案卡（沿用價格頁的卡，加上帳號數、每月包含的項目） */
.xprice { padding: 120px 0; background: var(--paper); }
.xprice .ptable-head .h2 { margin-top: 18px; }
.xplans { margin-top: 40px; }
.x-acc { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; padding: 14px 16px; border-radius: 16px; background: var(--ink); color: #fff; }
.x-acc b { font-size: 36px; line-height: 1; font-weight: 800; }
.x-acc span { font-size: 16px; font-weight: 700; }
.x-acc small { margin-left: auto; font-size: 14px; letter-spacing: .03em; opacity: .7; }
.x-inc { margin-top: 14px; }
.x-inc small { display: block; font-size: 14px; font-weight: 700; color: var(--sub); }
.x-inc b { font-size: 20px; line-height: 1.4; }
.x-month { margin-top: 14px; display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--paper); }
.x-month small, .x-prepaid small { font-size: 14px; font-weight: 700; letter-spacing: .03em; color: var(--social-ink); }
.x-month b { font-size: 15px; line-height: 1.5; }
.x-prepaid { margin-top: 12px; display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; box-shadow: inset 0 0 0 1.5px var(--line); font-size: 15px; line-height: 1.5; }
.x-prepaid a { margin-top: 4px; color: var(--social); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.xplans .p-price { flex-wrap: wrap; padding-top: 6px; }
.page-x .phero-list li { white-space: normal; } /* 英文清單比較長，手機上要能在空格換行 */
.page-x .h2, .page-x .phero h1, .page-x .step-copy h3, .page-x .step-copy p { text-wrap: balance; } /* 英文標題和短段落：各行長度接近 */
.page-x .phero-lead, .page-x .lead, .page-x .plan-note, .page-x .xcase-note { text-wrap: pretty; } /* 英文長段落：最後一行不會只剩一個字 */
.xplans .x-tier { flex-basis: 100%; margin-bottom: 6px; font-size: 14px; font-weight: 700; letter-spacing: .03em; color: var(--sub); }
.xplans .pcard.is-pop .x-acc { background: rgba(255, 255, 255, .12); }
.xplans .pcard.is-pop .x-month { background: rgba(255, 255, 255, .08); }
.xplans .pcard.is-pop .x-month small, .xplans .pcard.is-pop .x-inc small, .xplans .pcard.is-pop .x-tier { color: inherit; opacity: .75; }
.xplans .pcard.is-pop h3 em { background: var(--social); }
/* X 也能加購完整的 Post */
.xpost { padding: 120px 0; background: #0F1419; color: #fff; }
.xpost .h2 { max-width: 18em; }
.xpost .lead { margin: 18px 0 0; color: rgba(255, 255, 255, .8); max-width: 40em; }
.xup { margin-top: 40px; border-radius: 24px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.xup-head, .xup-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; padding: 16px 22px; font-size: 15px; line-height: 1.5; }
.xup-head { border-bottom: 1px solid rgba(255, 255, 255, .16); }
.xup-head small { font-size: 14px; font-weight: 700; letter-spacing: .04em; color: var(--post); }
.xup-foot { border-top: 1px solid rgba(255, 255, 255, .16); }
.xup-foot a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.xup-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.xup-tiers div { padding: 20px 22px; border-right: 1px solid rgba(255, 255, 255, .16); }
.xup-tiers div:last-child { border-right: 0; }
.xup-tiers div.on { background: var(--post); color: var(--ink); }
.xup-tiers small { display: block; font-size: 14px; font-weight: 700; letter-spacing: .04em; opacity: .75; }
.xup-tiers b { display: block; font-size: 32px; font-weight: 800; line-height: 1.25; }
.xup-tiers span { font-size: 15px; opacity: .85; }
.xsteps { margin: 28px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; border-radius: 20px; overflow: hidden; background: rgba(255, 255, 255, .16); }
.xsteps li { display: flex; flex-direction: column; justify-content: space-between; min-height: 120px; padding: 18px 18px 22px; background: #0F1419; }
.xsteps li.on { background: var(--post); color: var(--ink); }
.xsteps span { font-size: 14px; font-weight: 700; opacity: .7; }
.xsteps b { font-size: 18px; }
.xpost .plan-note { color: rgba(255, 255, 255, .7); text-align: left; }
/* X 頁尾 */
.footer-x { padding: 28px 0 32px; }
.footer-x-in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; }
.footer-x p { font-size: 15px; opacity: .8; }

@media (max-width: 1100px) {
  .xcase-grid, .xbrake-grid { grid-template-columns: minmax(0, 1fr); }
  .xcase-shot { max-width: 300px; }
}
@media (max-width: 899px) {
  .xcase, .xbrake, .xprice, .xpost { padding: 88px 0; }
  .xsteps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xsteps li { min-height: 96px; }
  .xsteps li:last-child { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  .xcase-cmp { grid-template-columns: minmax(0, 1fr); }
  .xcase-cmp em { padding: 8px 14px; }
  .xstats dd { font-size: 38px; }
  .xup-tiers { grid-template-columns: minmax(0, 1fr); }
  .xup-tiers div { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .16); }
  .xup-tiers div:last-child { border-bottom: 0; }
}

/* ===================== 比較指南、海巡案例、試用落地頁（現站內容不變，換新版面） ===================== */
/* 這三頁有些字是程式在瀏覽器裡填進去的（比較工具、圖集），沒有建置時加的「可以換行」記號：一律只在標點、空格換行 */
.page-compare main, .page-patrol main, .page-start main { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
.page-compare, .page-patrol { background: var(--paper); }
.page-compare .h2, .page-patrol .h2, .page-start .h2 { text-wrap: balance; } /* 標題各行長度接近，最後一行不會只剩兩個字 */
.page-compare .lead, .page-patrol .lead { text-wrap: pretty; }
.pc-head .h2 { font-size: clamp(30px, 3.4vw, 56px); } /* 左右兩欄的標題：「各有值得留意的對話。」要在左欄放得下 */
.cmp-kicker { display: block; margin-bottom: 14px; font-size: 15px; font-weight: 700; letter-spacing: .06em; color: var(--sub); }
.cmp-fine { margin-top: 16px; font-size: 15px; line-height: 1.6; color: var(--sub); }
.cmp-head { max-width: 760px; margin: 0 auto; text-align: center; }
.cmp-head .lead { margin-top: 18px; }
.cmp-sec { padding: 112px 0; }
.cmp-tint { background: #fff; }
/* 比較指南開頭 */
.cmp-hero { padding: calc(var(--nav-h) + clamp(20px, 4vh, 48px)) 0 48px; }
.cmp-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.top-nav { display: flex; flex-wrap: wrap; gap: 6px; }
.top-nav a { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; font-weight: 700; }
.top-nav a:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.lang-switch { margin-top: 0; }
.lang-switch button { height: 36px; padding: 0 14px; font-size: 15px; }
.cmp-hero-grid { margin-top: clamp(28px, 5vh, 56px); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 48px; align-items: center; }
.cmp-hero-copy .h2 { margin-top: 18px; font-size: clamp(40px, 5vw, 76px); line-height: 1.2; }
.cmp-hero-copy .lead { margin: 20px 0 0; max-width: 34em; }
.cmp-hero-copy .x-ctas { margin-top: 28px; }
.cmp-aside { border-radius: 28px; padding: 32px; background: var(--ink); color: #fff; }
.cmp-aside-kicker { display: inline-block; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .14); font-size: 15px; font-weight: 700; }
.cmp-aside ol { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.cmp-aside li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 18px; font-weight: 700; line-height: 1.55; }
.cmp-aside li b { font-size: 15px; color: #9DB8F5; }
.cmp-notice { margin-top: 40px; display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; line-height: 1.7; color: var(--sub); }
.cmp-notice i { flex: none; width: 10px; height: 10px; margin-top: 8px; border-radius: 50%; background: #F5A524; box-shadow: 0 0 0 4px rgba(245, 165, 36, .2); }
/* 比較工具 */
.cmp-tool { padding: 24px 0 112px; }
.cmp-box { border-radius: 32px; background: #fff; padding: clamp(28px, 4vw, 56px); }
.cmp-search-label { display: block; margin-top: 36px; font-size: 15px; font-weight: 700; }
.cmp-search { position: relative; margin-top: 8px; }
.cmp-search i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--sub); }
.cmp-search svg { width: 20px; height: 20px; }
.cmp-search input { width: 100%; height: 58px; padding: 0 20px 0 50px; border-radius: 999px; border: 1.5px solid rgba(37, 46, 61, .16); background: var(--paper); font: inherit; font-size: 17px; color: var(--ink); }
.cmp-search input:focus { outline: none; border-color: var(--ink); background: #fff; }
.cmp-cats { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.cmp-cats button { height: 40px; padding: 0 16px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line); font-size: 15px; font-weight: 700; color: var(--sub); }
.cmp-cats button[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.cmp-count { margin-top: 20px; font-size: 15px; font-weight: 700; color: var(--sub); }
.cmp-options { margin-top: 12px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cmp-options button { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px 18px; border-radius: 18px; background: var(--paper); text-align: left; transition: background .2s, box-shadow .2s; }
.cmp-options button:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.cmp-options button[aria-pressed="true"] { background: var(--chat); color: #fff; }
.cmp-options strong { font-size: 17px; line-height: 1.4; }
.cmp-options small { font-size: 14px; line-height: 1.4; opacity: .75; }
.no-matches { grid-column: 1 / -1; padding: 24px; text-align: center; color: var(--sub); }
.comparison-panel { margin-top: 28px; border-radius: 24px; background: var(--paper); padding: clamp(22px, 3vw, 36px); scroll-margin-top: 100px; }
.comparison-panel.empty { text-align: center; color: var(--sub); font-size: 17px; }
.comparison-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 16px; }
.comparison-top h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.4; font-weight: 800; }
.comparison-top p { margin-top: 6px; color: var(--sub); }
.share-button { height: 44px; padding: 0 18px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); font-size: 15px; font-weight: 700; }
.comparison-grid { margin-top: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.comparison-card { padding: 22px 24px; border-radius: 20px; background: #fff; }
.comparison-card h4, .checklist h4 { margin: 0; }
.comparison-card h4 { font-size: 18px; line-height: 1.4; }
.comparison-card p { margin-top: 10px; font-size: 16px; line-height: 1.75; color: var(--sub); }
.comparison-card a { display: inline-block; margin-top: 12px; margin-right: 14px; font-weight: 700; color: var(--social); text-decoration: underline; text-underline-offset: 3px; }
.comparison-card.fridai { background: var(--chat); color: #fff; }
.comparison-card.fridai p { color: rgba(255, 255, 255, .88); }
.comparison-card.fridai a { color: #fff; }
.checklist { margin-top: 22px; }
.checklist h4 { font-size: 18px; }
.check-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.check-item { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 14px 16px; border-radius: 16px; background: #fff; font-size: 16px; line-height: 1.6; }
.check-item span { font-size: 14px; font-weight: 800; color: var(--chat); }
/* 價格不是單一數字 */
.cmp-price { margin-top: 44px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.cmp-price-main { display: flex; flex-direction: column; align-items: flex-start; padding: 32px; border-radius: 28px; background: var(--theme); color: #fff; }
.cmp-price-label { font-size: 16px; font-weight: 700; opacity: .85; }
.cmp-price-value { margin-top: 6px; font-size: clamp(44px, 4.4vw, 64px); font-weight: 800; line-height: 1.15; }
.cmp-price-value span { font-size: 20px; font-weight: 700; }
.cmp-price-main > p:not([class]) { margin-top: 12px; font-size: 16px; line-height: 1.75; opacity: .9; }
.cmp-price-main .btn { margin-top: auto; }
.cmp-price-main > p + .btn { margin-top: 24px; }
.cmp-price-list { padding: 32px; border-radius: 28px; background: var(--paper); }
.cmp-price-list h3 { font-size: 20px; }
.cmp-price-list ul { margin-top: 14px; display: grid; gap: 10px; }
.cmp-price-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 12px 14px; border-radius: 14px; background: #fff; font-size: 16px; line-height: 1.6; }
.cmp-price-list li::before { content: ""; width: 20px; height: 20px; margin-top: 3px; border-radius: 6px; background: var(--chat) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M5.5 11.5l3.5 3.5 7.5-8' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.cmp-price-list > p { margin-top: 14px; font-size: 15px; line-height: 1.7; color: var(--sub); }
/* 三個產品 */
.cmp-products { margin-top: 44px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.product-card { display: flex; flex-direction: column; padding: 28px; border-radius: 26px; background: #fff; box-shadow: inset 0 6px 0 var(--accent); }
.product-card h3 { font-size: 24px; line-height: 1.3; color: var(--accent-ink, var(--accent)); } /* 天藍字在白底上太淺，換深一階（compare.js 給 --accent-ink） */
.product-card p { margin-top: 12px; font-size: 17px; line-height: 1.75; color: var(--sub); }
.product-card a { margin-top: auto; padding-top: 18px; font-weight: 700; }
/* 查證方式 */
.cmp-sources { margin-top: 44px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.cmp-source-card { padding: 28px; border-radius: 26px; background: var(--paper); }
.cmp-source-card h3 { font-size: 20px; }
.cmp-source-links { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.cmp-source-links a { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; font-weight: 700; }
.cmp-source-links a:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.cmp-method { margin-top: 20px; font-size: 15px; line-height: 1.7; color: var(--sub); text-align: center; }
/* 結尾的主題色大塊 */
.cmp-closing { padding: 112px 0; background: var(--theme); color: #fff; text-align: center; }
.cmp-closing .cmp-kicker { color: inherit; } /* 紫、藍底上的小字不調淡（調淡對比就不夠，10-05 無障礙） */
.cmp-closing .lead { margin-top: 18px; color: #fff; }
.cmp-foot-note { margin-top: 28px; font-size: 14px; }

/* 海巡案例 */
.pc-hero { padding: calc(var(--nav-h) + clamp(24px, 5vh, 64px)) 0 64px; }
.pc-hero-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 48px; align-items: center; }
.pc-status { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; padding: 6px 14px; border-radius: 999px; background: #FFF4D6; color: #7A4B00; font-size: 15px; font-weight: 700; }
.pc-status i { width: 8px; height: 8px; border-radius: 50%; background: #F5A524; }
.pc-hero-copy .h2 { font-size: clamp(40px, 5vw, 80px); line-height: 1.2; }
.pc-hero-copy .lead { margin: 20px 0 0; }
.pc-hero-copy .x-ctas { margin-top: 28px; }
.pc-frame { margin: 0; border-radius: 28px; overflow: hidden; background: #000; box-shadow: 0 24px 60px rgba(15, 20, 25, .18); }
.pc-frame img { width: 100%; height: auto; }
.pc-frame figcaption { display: flex; justify-content: space-between; padding: 12px 20px; background: #111; color: rgba(255, 255, 255, .7); font-size: 14px; font-weight: 700; }
.pc-strip { overflow: hidden; padding: 18px 0; background: var(--ink); color: #fff; }
.pc-strip-track { display: flex; align-items: center; gap: 28px; width: max-content; font-size: 17px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.pc-strip-track i { font-style: normal; color: var(--post); }
@media (prefers-reduced-motion: no-preference) { .pc-strip-track { animation: pcStrip 28s linear infinite; } }
@keyframes pcStrip { to { transform: translateX(-50%); } }
.pc-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 56px; align-items: end; }
.pc-head .lead { margin: 0; max-width: none; }
.pc-scenes { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pc-scene { position: relative; padding: 26px 26px 54px; border-radius: 24px; background: #fff; }
.pc-scene > span { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--theme); color: var(--on, #fff); font-size: 14px; font-weight: 700; letter-spacing: .03em; }
.pc-scene h3 { margin-top: 18px; font-size: 26px; line-height: 1.3; }
.pc-scene p { margin-top: 10px; font-size: 16px; line-height: 1.75; color: var(--sub); }
.pc-scene i { position: absolute; right: 22px; bottom: 18px; font-style: normal; font-size: 20px; color: var(--theme-ink, var(--theme)); }
.pc-gallery { padding: 112px 0; background: #fff; }
.pc-viewer { margin-top: 44px; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); border-radius: 28px; overflow: hidden; background: #0F1419; color: #fff; }
.pc-viewer-media { padding: 18px; }
.pc-viewer-top { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 14px; font-weight: 700; letter-spacing: .04em; color: rgba(255, 255, 255, .6); }
.pc-viewer-media img { width: 100%; height: auto; border-radius: 16px; }
.pc-viewer-side { display: flex; flex-direction: column; padding: 26px 26px 22px; border-left: 1px solid rgba(255, 255, 255, .12); }
.pc-viewer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pc-label { font-size: 14px; font-weight: 700; letter-spacing: .04em; color: rgba(255, 255, 255, .6); }
.pc-count { font-size: 40px; font-weight: 800; line-height: 1.2; }
.pc-count span { font-size: 18px; opacity: .55; }
.pc-industry { text-align: right; }
.pc-industry span { display: block; font-size: 14px; color: rgba(255, 255, 255, .6); }
.pc-industry strong { font-size: 22px; }
.pc-metrics { margin: 18px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pc-metrics > div { padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .06); }
.pc-metrics .pc-main, .pc-metrics .pc-ad { grid-column: 1 / -1; }
.pc-metrics dt { font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .65); }
.pc-metrics dd { margin: 4px 0 0; font-size: 18px; font-weight: 800; line-height: 1.3; }
.pc-metrics .pc-main dd { font-size: 30px; }
.pc-metrics .pc-ad dd { font-size: 22px; }
.pc-metrics dd small { margin-left: 4px; font-size: 14px; font-weight: 700; opacity: .7; }
.pc-metrics .pc-ad .pc-basis { margin-top: 6px; font-size: 14px; font-weight: 400; line-height: 1.55; color: rgba(255, 255, 255, .6); }
.pc-explain { margin-top: 12px; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .6); }
.pc-controls { margin-top: auto; padding-top: 16px; display: flex; gap: 8px; }
.pc-controls button { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; }
.pc-controls button:hover { background: rgba(255, 255, 255, .2); }
.pc-controls svg { width: 22px; height: 22px; }
.pc-controls button:first-child svg { transform: scaleX(-1); }
.pc-subhead { margin-top: 40px; display: flex; align-items: baseline; gap: 14px; }
.pc-subhead h3 { font-size: 22px; }
.pc-subhead p { font-size: 15px; color: var(--sub); }
.pc-thumbs { margin-top: 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pc-thumbs .thumb { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--paper); text-align: left; transition: box-shadow .2s; }
.pc-thumbs .thumb img { width: 100%; height: auto; }
.pc-thumbs .thumb[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--social); }
.thumb-meta { display: flex; justify-content: space-between; gap: 8px; padding: 10px 14px; }
.thumb-no { font-size: 14px; font-weight: 700; color: var(--sub); }
.thumb-value { font-size: 15px; font-weight: 800; }
.pc-readme { margin-top: 44px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pc-readme > div { padding: 26px; border-radius: 24px; background: #fff; }
.pc-readme span { font-size: 14px; font-weight: 800; color: var(--social); }
.pc-readme h3 { margin-top: 12px; font-size: 24px; }
.pc-readme p { margin-top: 10px; font-size: 16px; line-height: 1.75; color: var(--sub); }

/* 試用落地頁 */
.page-start { background: var(--paper); }
.lp-top { position: absolute; z-index: 10; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; height: var(--nav-h); padding: 0 32px; }
.lp-top .logo-w { position: static; filter: brightness(0) invert(1); height: 30px; width: auto; }
.lp-line { height: 44px; gap: 8px; padding: 0 18px; font-size: 16px; }
.lp-line svg { width: 20px; height: 20px; }
.lp-hero { position: relative; padding: calc(var(--nav-h) + clamp(16px, 4vh, 48px)) 0 72px; background-color: var(--theme); color: #fff; }
.lp-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.lp-hero-copy .h2 { margin-top: 18px; font-size: clamp(40px, 4.8vw, 72px); line-height: 1.2; }
.lp-lead { margin-top: 18px; max-width: 30em; font-size: clamp(18px, 1.4vw, 21px); line-height: 1.75; opacity: .92; }
.lp-cta { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.lp-note { font-size: 16px; font-weight: 700; opacity: .85; }
.lp-proofline { margin-top: 24px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; background: rgba(255, 255, 255, .14); font-size: 16px; font-weight: 700; }
.lp-proofline svg { width: 20px; height: 20px; flex: none; }
.lp-photo { position: relative; margin: 0; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 3.4; box-shadow: 0 24px 60px rgba(20, 16, 60, .3); }
.lp-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 40%; }
.lp-bubble { position: absolute; left: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 16px; font-weight: 700; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.lp-bubble i { width: 10px; height: 10px; border-radius: 50%; background: #22C55E; }
.lp-sec { padding: 96px 0; }
.lp-proof { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: clamp(28px, 4vw, 48px); border-radius: 32px; background: #fff; }
.lp-quote { margin-top: 18px; font-size: clamp(26px, 2.6vw, 38px); font-weight: 800; line-height: 1.45; }
.lp-who { margin-top: 14px; font-size: 16px; color: var(--sub); }
.lp-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.lp-shots figure { margin: 0; padding: 12px; border-radius: 20px; background: #111; }
.lp-shots img { width: 100%; height: auto; border-radius: 10px; }
.lp-shots figcaption { margin-top: 10px; text-align: center; color: rgba(255, 255, 255, .75); font-size: 15px; font-weight: 700; }
.lp-steps-sec { padding-top: 0; }
.lp-steps-sec .h2 { text-align: center; }
.lp-steps { margin: 40px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lp-steps li { padding: 28px; border-radius: 26px; background: #fff; }
.lp-steps b { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--chat); color: #fff; font-size: 20px; }
.lp-steps h3 { margin-top: 18px; font-size: 22px; }
.lp-steps p { margin-top: 10px; font-size: 16px; line-height: 1.75; color: var(--sub); }
.lp-price { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px 40px; padding: clamp(28px, 4vw, 48px); border-radius: 32px; background: var(--theme); color: #fff; }
.lp-price-m { margin-top: 14px; font-size: clamp(36px, 3.6vw, 56px); font-weight: 800; line-height: 1.2; }
.lp-price-sub { margin-top: 8px; font-size: 16px; line-height: 1.7; }
.lp-price-acts { display: flex; flex-wrap: wrap; gap: 12px; }
.page-start .faq-head .h2 { margin: 0; }
.lp-lead-in { max-width: 860px; text-align: center; }
.lp-lead-in .form-card { margin-top: 18px; text-align: left; }
.lp-legal { padding: 28px 0 36px; background: var(--ink); color: rgba(255, 255, 255, .75); font-size: 15px; line-height: 1.7; }
.lp-legal .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; }
.lp-legal nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.lp-legal a:hover { color: #fff; }

@media (max-width: 1100px) {
  .cmp-hero-grid, .pc-hero-grid, .lp-hero-grid, .lp-proof { grid-template-columns: minmax(0, 1fr); }
  .cmp-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pc-viewer { grid-template-columns: minmax(0, 1fr); }
  .pc-viewer-side { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .12); }
}
@media (max-width: 899px) {
  .cmp-sec, .pc-gallery, .cmp-closing { padding: 88px 0; }
  .cmp-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .comparison-grid, .check-grid, .cmp-price, .cmp-sources, .cmp-products, .pc-readme, .lp-steps { grid-template-columns: minmax(0, 1fr); }
  .pc-head { grid-template-columns: minmax(0, 1fr); }
  .pc-scenes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc-thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-sec { padding: 72px 0; }
  .lp-steps-sec { padding-top: 0; }
}
@media (max-width: 599px) {
  /* 開頭大標：最長的一段（「先比真正需要的事。」9 個字）剛好放得下，句號才不會被擠到下一行 */
  .cmp-hero-copy .h2, .pc-hero-copy .h2, .lp-hero-copy .h2 { font-size: min(40px, calc((100vw - 41px) / 9.6)); }
  .thumb-meta { flex-direction: column; gap: 2px; }
  html:lang(ja) .cmp-options { grid-template-columns: minmax(0, 1fr); } /* 日文的分類名稱是一長串片假名，兩欄放不下會從字中間斷 */
  .cmp-bar { flex-direction: column; align-items: flex-start; }
  .cmp-box { border-radius: 24px; padding: 24px 18px; }
  .cmp-aside { padding: 24px 20px; }
  .pc-scenes { grid-template-columns: minmax(0, 1fr); }
  .pc-metrics { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lp-top { padding: 0 16px; }
  .lp-photo { aspect-ratio: 4 / 3; }
}

/* ===================== 部落格、文章、政策頁、陪跑教學、完整設定教學、404（內容照現站，換導覽列／頁尾／字體與版面） ===================== */
.page-blog, .page-post, .page-legal, .page-learn, .page-tutorial { background: #fff; }
.page-blog main, .page-post main, .page-legal main, .page-learn main, .page-tutorial main, .page-sales main { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
.page-blog .h2, .page-post .h2, .page-learn .h2, .page-tutorial .h2 { text-wrap: balance; }
/* 部落格首頁 */
.blog-hero { padding: calc(var(--nav-h) + clamp(24px, 5vh, 64px)) 0 72px; background: var(--paper); }
.blog-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.blog-hero-copy .h2 { margin-top: 18px; font-size: clamp(36px, 3.6vw, 54px); line-height: 1.25; } /* 58px 時兩行剛好塞滿，英文字型晚一步到就會多一行、整塊跳一下 → 小一點留餘裕 */
.blog-hero-copy .lead { margin: 20px 0 0; }
.bfeat, .bcard { display: flex; flex-direction: column; border-radius: 26px; overflow: hidden; background: #fff; transition: transform .3s var(--ease), box-shadow .3s; }
.bfeat:hover, .bcard:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(15, 20, 25, .1); }
.bcard-cover { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-height: 168px; padding: 22px 24px; background: var(--theme); color: var(--on, #fff); background-image: linear-gradient(var(--on-grid, rgba(255, 255, 255, .08)) 1px, transparent 1px), linear-gradient(90deg, var(--on-grid, rgba(255, 255, 255, .08)) 1px, transparent 1px); background-size: 32px 32px; }
.bcard-cover small { position: absolute; left: 24px; top: 20px; padding: 4px 12px; border-radius: 999px; background: var(--on-soft, rgba(255, 255, 255, .18)); font-size: 14px; font-weight: 700; }
.bcard-cover b { font-size: clamp(22px, 1.9vw, 30px); line-height: 1.3; font-weight: 800; }
.bfeat .bcard-cover { min-height: 220px; }
.bfeat .bcard-cover b { font-size: clamp(28px, 2.6vw, 40px); }
.bcard-body { display: flex; flex-direction: column; flex: 1; gap: 8px; padding: 20px 24px 24px; }
.bcard-body small { font-size: 14px; font-weight: 700; color: var(--sub); }
.bcard-body strong { font-size: 20px; line-height: 1.5; }
.bfeat .bcard-body strong { font-size: 24px; }
.bcard-body > span { font-size: 16px; line-height: 1.75; color: var(--sub); }
.bcard-body em { margin-top: auto; padding-top: 8px; font-style: normal; font-size: 16px; font-weight: 700; color: var(--social); }
.blog-hub { padding: 96px 0 40px; }
.blog-hub .h2 { font-size: clamp(28px, 2.8vw, 44px); }
.hub-grid { margin-top: 32px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.hub-col { padding: 24px; border-radius: 24px; background: var(--paper); box-shadow: inset 0 5px 0 var(--theme); }
.hub-col h3 { font-size: 20px; }
.hub-col nav { margin-top: 12px; display: grid; }
.hub-col a { padding: 10px 0; border-top: 1px solid var(--line); font-size: 16px; font-weight: 700; line-height: 1.5; }
.hub-col a:hover { color: var(--theme-ink, var(--theme)); }
.blog-list { padding: 40px 0 112px; }
.bgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.bgrid .bcard { box-shadow: inset 0 0 0 1px var(--line); }
/* 文章 */
.post-hero { padding: calc(var(--nav-h) + clamp(20px, 4vh, 48px)) 0 56px; background: var(--paper); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 15px; color: var(--sub); }
.breadcrumbs li + li::before { content: "/"; margin-right: 8px; opacity: .5; }
.breadcrumbs a:hover { color: var(--ink); }
.post-hero-grid { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; }
.post-hero-copy .category { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--chat); color: #fff; font-size: 15px; font-weight: 700; }
.post-hero-copy h1 { margin-top: 18px; font-size: clamp(32px, 3.4vw, 52px); line-height: 1.3; font-weight: 800; text-wrap: balance; }
.post-hero-copy .subtitle { margin-top: 16px; font-size: clamp(18px, 1.4vw, 21px); line-height: 1.75; color: var(--sub); }
.post-hero-copy .byline { margin-top: 18px; font-size: 15px; line-height: 1.8; color: var(--sub); }
.post-hero-copy .byline a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.article-summary-image { margin: 0; padding: 14px; border-radius: 26px; background: #fff; box-shadow: 0 16px 40px rgba(15, 20, 25, .08); }
.article-summary-image img { width: 100%; height: auto; border-radius: 16px; }
.article-summary-image figcaption { margin-top: 10px; font-size: 14px; color: var(--sub); text-align: center; }
.post-layout { display: grid; grid-template-columns: 240px minmax(0, 760px); justify-content: center; gap: 56px; padding: 56px 0 112px; }
.post-layout .toc { position: sticky; top: 100px; align-self: start; }
.post-layout .toc > p { font-size: 15px; font-weight: 800; }
.post-layout .toc nav { margin-top: 10px; display: grid; border-left: 2px solid var(--line); }
.post-layout .toc a { margin-left: -2px; padding: 7px 14px; border-left: 2px solid transparent; font-size: 15px; line-height: 1.5; color: var(--sub); }
.post-layout .toc a:hover { color: var(--ink); border-left-color: var(--chat); }
.post section + section { margin-top: 64px; }
.post h2 { font-size: clamp(26px, 2.2vw, 34px); line-height: 1.4; font-weight: 800; scroll-margin-top: 100px; text-wrap: balance; }
.post h3 { margin-top: 32px; font-size: 22px; line-height: 1.5; }
.post p { margin-top: 18px; font-size: 18px; line-height: 1.9; color: #3A4352; }
.post a { color: var(--social); text-decoration: underline; text-underline-offset: 3px; }
.post strong { color: var(--ink); }
.post .table-wrap { margin-top: 24px; overflow-x: auto; overflow-y: hidden; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line); }
.post table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.7; }
.post caption { padding: 14px 18px; text-align: left; font-weight: 800; background: var(--paper); }
.post th { padding: 12px 16px; text-align: left; background: var(--paper); border-top: 1px solid var(--line); white-space: nowrap; }
.post td { padding: 12px 16px; border-top: 1px solid var(--line); vertical-align: top; min-width: 7em; }
.post .answer-box { display: block; margin-top: 24px; padding: 22px 24px; border-radius: 22px; background: #EEEDFB; }
.post .answer-box strong { color: var(--chat); }
.post .answer-box p { margin-top: 8px; }
.post .disclosure { display: block; margin-top: 18px; padding: 14px 18px; border-radius: 16px; background: var(--paper); font-size: 15px; line-height: 1.7; color: var(--sub); }
.post .flow, .post .learning-visual { margin: 28px 0 0; padding: 24px; border-radius: 24px; background: var(--paper); }
.post .flow-heading, .post .learning-visual > figcaption { font-size: 17px; font-weight: 800; }
.post .flow ol { margin: 14px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.post .flow li { display: grid; gap: 6px; padding: 18px; border-radius: 18px; background: #fff; }
.post .step-no { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--chat); color: #fff; font-weight: 800; }
.post .flow small { font-size: 15px; line-height: 1.6; color: var(--sub); }
/* 英文文章的流程圖（卡片 → 卡片）：現站英文版用另一種標記，樣式照中文文章的流程卡（白卡、圓角、產品紫的箭頭） */
.post .flow-chart { display: grid; gap: 10px; margin-top: 14px; }
.post .flow-edge { display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); align-items: center; gap: 10px; }
.post .flow-card { display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 14px 16px; border-radius: 18px; background: #fff; text-align: center; font-size: 16px; line-height: 1.55; font-weight: 700; }
.post .flow-connector { display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--chat); text-align: center; }
.post .flow-connector small { font-size: 14px; line-height: 1.4; color: var(--sub); }
.post .flow-connector b { font-size: 22px; line-height: 1; }
.post .decision-flow { margin-top: 14px; display: grid; gap: 10px; }
.post .decision-step { padding: 14px 18px; border-radius: 16px; background: #fff; font-size: 16px; line-height: 1.7; }
.post .decision-step strong { display: block; }
.post .map-arrow { display: none; }
.post .decision-diamond { justify-self: center; padding: 14px 24px; border-radius: 18px; background: var(--chat); color: #fff; font-weight: 800; text-align: center; line-height: 1.5; }
.post .decision-branches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.post .branch { padding: 14px 16px; border-radius: 16px; background: #fff; font-size: 16px; line-height: 1.7; }
.post .branch.yes { box-shadow: inset 4px 0 0 #22C55E; }
.post .branch.no { box-shadow: inset 4px 0 0 #F5A524; }
.post .case-flow { margin-top: 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.post .node { position: relative; padding: 16px 12px; border-radius: 16px; background: #fff; font-size: 15px; line-height: 1.6; text-align: center; }
.post .node:not(:last-child)::after { content: "›"; position: absolute; right: -10px; top: 50%; transform: translateY(-50%); font-size: 20px; font-weight: 800; color: var(--sub); }
.post .node.stop { background: var(--chat); color: #fff; }
.post .node.stop strong { color: #fff; }
.post .visual-note { margin-top: 12px; font-size: 15px; color: var(--sub); }
.post .stage-flow { margin-top: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.post .stage { display: grid; gap: 6px; padding: 16px; border-radius: 16px; background: #fff; }
.post .stage b { color: var(--social); }
.post .stage span { font-size: 15px; line-height: 1.7; color: var(--sub); }
.post .conversation { margin: 28px 0 0; border-radius: 24px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.post .chat-title { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: var(--paper); font-weight: 800; }
.post .status-dot { width: 9px; height: 9px; border-radius: 50%; background: #22C55E; }
.post .example { margin-left: auto; padding: 3px 10px; border-radius: 999px; background: #fff; font-size: 14px; font-weight: 700; color: var(--sub); }
.post .chat-body { display: grid; gap: 14px; padding: 20px 18px; background: #F6F7F9; }
.post .message { max-width: 84%; }
.post .message.guest { justify-self: start; }
.post .message.assistant { justify-self: end; text-align: left; }
.post .speaker { display: block; font-size: 14px; font-weight: 700; color: var(--sub); }
.post .message.assistant .speaker { text-align: right; }
.post .message p { margin-top: 4px; padding: 12px 16px; border-radius: 18px; background: #fff; font-size: 16px; line-height: 1.75; color: var(--ink); }
.post .message.guest p { border-bottom-left-radius: 6px; }
.post .message.assistant p { background: var(--chat); color: #fff; border-bottom-right-radius: 6px; }
.post .message.human p { background: var(--ink); }
.post .gap { justify-self: center; padding: 4px 12px; border-radius: 999px; background: #fff; font-size: 14px; color: var(--sub); }
.post .conversation figcaption { padding: 12px 18px; font-size: 14px; line-height: 1.6; color: var(--sub); background: var(--paper); }
.post .pull { margin-top: 28px; padding-left: 20px; border-left: 4px solid var(--chat); font-size: 22px; font-weight: 800; line-height: 1.6; color: var(--ink); }
.post .worksheet { display: block; margin-top: 28px; padding: 24px; border-radius: 22px; border: 2px dashed rgba(96, 93, 186, .4); background: #F7F7FF; }
.post .worksheet h3 { margin-top: 0; font-size: 20px; }
.post .result { display: block; margin-top: 24px; padding: 20px 24px; border-radius: 22px; background: #E8F7EE; }
.post .result strong { color: #15803D; }
.post .result p { margin-top: 8px; }
.post .exercise { margin-top: 20px; padding: 22px 24px; border-radius: 22px; background: var(--paper); }
.post .exercise h3 { margin-top: 0; font-size: 20px; }
.post .exercise details { margin-top: 12px; }
.post .exercise summary { cursor: pointer; font-weight: 700; color: var(--social-ink); }
.post .faq-list { margin: 20px 0 0; max-width: none; }
.post .faq-list details { border-top: 1px solid var(--line); }
.post .faq-list details:last-child { border-bottom: 1px solid var(--line); }
.post .faq-list summary { padding: 18px 4px; font-size: 18px; color: var(--ink); }
.post .faq-list summary::after { border-color: var(--ink); }
.post .faq-list details p { margin-top: 0; padding: 0 4px 18px; font-size: 17px; opacity: 1; color: #3A4352; }
.post .related-guides { display: block; margin-top: 64px; padding: 26px; border-radius: 26px; background: var(--paper); }
.post .related-guides__kicker { margin-top: 0; font-size: 15px; font-weight: 700; color: var(--sub); }
.post .related-guides h2 { margin-top: 4px; font-size: 24px; }
.post .related-guides nav { margin-top: 14px; display: grid; gap: 10px; }
.post .related-guides__link { display: grid; gap: 4px; padding: 16px 18px; border-radius: 16px; background: #fff; text-decoration: none; color: var(--ink); }
.post .related-guides__link span { font-size: 14px; font-weight: 700; color: var(--sub); }
.post .related-guides__link strong { font-size: 17px; line-height: 1.5; }
.post .fridai-article-cta { margin-top: 32px; padding: 32px; border-radius: 28px; background: var(--chat); color: #fff; }
.post .fridai-article-cta p, .post .fridai-article-cta strong, .post .fridai-article-cta h2 { color: #fff; }
.post .fridai-article-cta a { color: #fff; } /* 紫底上的連結：原本跟文章一樣是藍字，對比 1.3 幾乎看不到（10-05） */
.post .cta-kicker { margin-top: 0; font-size: 15px; font-weight: 700; opacity: .85; }
.post .fridai-article-cta h2 { margin-top: 6px; font-size: clamp(24px, 2vw, 30px); }
.post .fridai-cta-actions { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }
.post .fridai-cta-actions a { display: inline-flex; align-items: center; height: 48px; padding: 0 22px; border-radius: 999px; font-weight: 700; text-decoration: none; }
.post .fridai-cta-actions .primary { background: #fff; color: var(--ink); }
.post .fridai-cta-actions .secondary { box-shadow: inset 0 0 0 1.5px #fff; color: #fff; }
.post .fridai-socials { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .25); }
.post .fridai-socials p { margin-top: 0; font-size: 15px; opacity: .9; }
.post .fridai-social-links { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 14px; }
.post .fridai-social-links a { color: #fff; font-weight: 700; }
.post .sources { margin-top: 28px; }
.post .sources p { font-size: 15px; line-height: 1.75; color: var(--sub); }
/* 政策頁 */
.legal-wrap { max-width: 860px; padding: calc(var(--nav-h) + clamp(20px, 4vh, 48px)) 0 112px; }
.legal-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.legal-tabs a { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line); font-size: 15px; font-weight: 700; color: var(--sub); }
.legal-tabs a[aria-current="page"] { background: var(--ink); color: #fff; box-shadow: none; }
.legal { margin-top: 36px; }
.legal .legal-kicker { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--paper); font-size: 14px; font-weight: 700; color: var(--sub); }
.legal h1 { margin-top: 14px; font-size: clamp(32px, 3.4vw, 48px); line-height: 1.3; font-weight: 800; }
.legal .legal-updated { margin-top: 12px; font-size: 15px; color: var(--sub); }
.legal .legal-lead { margin-top: 24px; padding: 20px 22px; border-radius: 20px; background: var(--paper); font-size: 17px; line-height: 1.85; }
.legal .legal-entity { margin: 20px 0 0; display: grid; grid-template-columns: 8em minmax(0, 1fr); border-radius: 20px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.legal .legal-entity dt, .legal .legal-entity dd { margin: 0; padding: 12px 18px; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.6; }
.legal .legal-entity dt:first-of-type, .legal .legal-entity dt:first-of-type + dd { border-top: 0; }
.legal .legal-entity dt { color: var(--sub); background: var(--paper); }
@media (min-width: 600px) { html:lang(en) .legal .legal-entity { grid-template-columns: 11em minmax(0, 1fr); } } /* 英文的欄位名稱比較長（Representative），8em 會從字中間切開；手機上本來就是一欄 */
.legal .legal-section { margin-top: 44px; }
.legal h2 { font-size: clamp(22px, 1.8vw, 28px); line-height: 1.45; }
.legal p, .legal li { font-size: 17px; line-height: 1.9; color: #3A4352; }
.legal p { margin-top: 14px; }
.legal ul, .legal ol { margin-top: 14px; padding-left: 1.4em; list-style: disc; display: grid; gap: 6px; }
.legal ol { list-style: decimal; }
.legal .legal-callout { margin-top: 16px; padding: 16px 20px; border-radius: 16px; background: #FFF4D6; color: #6B4600; font-size: 16px; line-height: 1.8; }
.legal a { color: var(--social); text-decoration: underline; text-underline-offset: 3px; }
/* 陪跑教學 */
.ln-hero { padding: calc(var(--nav-h) + clamp(24px, 5vh, 64px)) 0 48px; background: var(--paper); text-align: center; }
.ln-hero-in .h2 { margin-top: 18px; font-size: clamp(36px, 4.4vw, 68px); line-height: 1.2; }
.ln-hero-in .lead { margin-top: 18px; }
.ln-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--grad); vertical-align: middle; }
.ln-row { margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 24px; }
.ln-start { gap: 8px; }
.ln-start svg { width: 18px; height: 18px; }
.ln-stat { display: inline-flex; align-items: baseline; gap: 4px; font-size: 16px; font-weight: 700; color: var(--sub); }
.ln-stat b { font-size: 28px; color: var(--ink); }
.ln-bar { position: sticky; top: 76px; z-index: 20; padding: 12px 0; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.ln-bar-in { display: flex; align-items: center; gap: 10px; }
.ln-search { position: relative; flex: 1; max-width: 420px; display: flex; align-items: center; }
.ln-search svg { position: absolute; left: 16px; width: 18px; height: 18px; color: var(--sub); }
.ln-search input { width: 100%; height: 46px; padding: 0 16px 0 44px; border-radius: 999px; border: 1.5px solid rgba(37, 46, 61, .16); background: var(--paper); font: inherit; font-size: 16px; color: var(--ink); }
.ln-search input:focus { outline: none; border-color: var(--ink); background: #fff; }
.ln-toc-btn { display: none; height: 46px; padding: 0 18px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line); font-weight: 700; }
.ln-login { margin-left: auto; height: 46px; font-size: 16px; }
.ln-wrap { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 40px; padding: 40px 0 72px; min-height: 100vh; } /* 目錄和集數是程式填進來的：先撐住一個畫面高，填好之前頁尾不會先出現在畫面上、再被推下去 */
.ln-wrap > .toc { position: sticky; top: 160px; align-self: start; max-height: calc(100vh - 180px); overflow: auto; padding-right: 6px; }
.page-learn .toc h2 { font-size: 17px; font-weight: 800; }
.page-learn .toc-sec { margin-top: 10px; border-radius: 14px; }
.page-learn .toc-sec > a { display: flex; justify-content: space-between; gap: 8px; padding: 8px 12px; border-radius: 12px; font-size: 15px; font-weight: 700; line-height: 1.5; }
.page-learn .toc-sec.on > a { background: var(--paper); }
.page-learn .toc-sec .cnt { color: var(--sub); }
.page-learn .toc-eps { margin: 2px 0 0; padding: 0 0 0 12px; list-style: none; display: grid; } /* 每一篇的集數都展開：捲動時只把目前那一篇標底色，不再自動展開／收起（展開會把下面的目錄推開，算成版面跳動） */
.page-learn .toc-eps button { display: flex; gap: 8px; width: 100%; padding: 6px 8px; border-radius: 10px; text-align: left; font-size: 14px; line-height: 1.5; color: var(--sub); }
.page-learn .toc-eps button:hover { background: var(--paper); color: var(--ink); }
.page-learn .toc-eps .num { flex: none; font-weight: 700; }
.page-learn .sec { scroll-margin-top: 150px; }
.page-learn .sec + .sec { margin-top: 56px; }
.page-learn .sec-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.page-learn .sec-head h2 { font-size: clamp(24px, 2vw, 30px); line-height: 1.4; }
.page-learn .chip { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; color: #fff; font-size: 14px; font-weight: 700; }
.page-learn .sec-count { margin-left: auto; font-size: 15px; font-weight: 700; color: var(--sub); }
.page-learn .sec-desc { margin-top: 10px; font-size: 17px; line-height: 1.8; color: var(--sub); }
.page-learn .grid { margin-top: 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.page-learn .card { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--line); text-align: left; transition: transform .25s var(--ease), box-shadow .25s; }
.page-learn .card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(15, 20, 25, .1); }
.page-learn .thumb { position: relative; aspect-ratio: 16 / 9; background: #DDE3EA; }
.page-learn .thumb img { width: 100%; height: 100%; object-fit: cover; }
.page-learn .dur { position: absolute; right: 10px; bottom: 10px; padding: 2px 8px; border-radius: 8px; background: rgba(15, 20, 25, .8); color: #fff; font-size: 14px; font-weight: 700; }
.page-learn .play { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity .2s; }
.page-learn .play span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, .92); }
.page-learn .play svg { width: 22px; height: 22px; fill: var(--ink); }
.page-learn .card:hover .play { opacity: 1; }
.page-learn .card-body { display: grid; gap: 4px; padding: 14px 16px 18px; }
.page-learn .card-ep { font-size: 14px; font-weight: 800; color: var(--social); }
.page-learn .card-title { font-size: 17px; font-weight: 800; line-height: 1.5; }
.page-learn .card-promise { font-size: 15px; line-height: 1.7; color: var(--sub); }
.page-learn .soon, .page-learn .empty { margin-top: 18px; padding: 24px; border-radius: 18px; background: var(--paper); text-align: center; color: var(--sub); }
.page-learn .empty { display: none; }
.ln-note { padding: 0 20px 64px; text-align: center; font-size: 15px; color: var(--sub); }
.ln-note a { text-decoration: underline; text-underline-offset: 3px; }
.ln-sheet { position: fixed; z-index: 120; inset: 0; display: none; background: rgba(15, 20, 25, .45); }
.ln-sheet.open { display: block; }
.ln-sheet .toc { position: absolute; left: 0; right: 0; bottom: 0; max-height: 78vh; overflow: auto; padding: 20px 18px 28px; border-radius: 24px 24px 0 0; background: #fff; }
.ln-sheet .toc-eps { display: grid; }
.ln-modal { position: fixed; z-index: 130; inset: 0; display: none; place-items: center; padding: 24px; background: rgba(15, 20, 25, .7); }
.ln-modal.open { display: grid; }
.ln-panel { position: relative; width: min(1080px, 100%); max-height: calc(100vh - 48px); overflow: auto; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); border-radius: 26px; background: #fff; }
.ln-x { position: absolute; z-index: 2; right: 12px; top: 12px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(15, 20, 25, .7); color: #fff; }
.ln-x svg { width: 20px; height: 20px; }
.ln-video { background: #000; display: grid; place-items: center; }
.ln-video video, .ln-video img { width: 100%; height: auto; display: block; }
.ln-video .pending { color: #fff; padding: 12px; }
.ln-info { display: flex; flex-direction: column; gap: 10px; padding: 24px; }
.ln-info-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--sub); }
.ln-info h3 { font-size: 22px; line-height: 1.45; }
.ln-info > p { font-size: 16px; line-height: 1.75; color: var(--sub); }
.page-learn .chapters h4 { margin: 6px 0 0; font-size: 15px; }
.page-learn .chapters ol { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.page-learn .chapters button { display: flex; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 10px; background: var(--paper); text-align: left; font-size: 15px; }
.page-learn .chapters .num { font-weight: 800; color: var(--social); }
.ln-prevnext { margin-top: auto; padding-top: 10px; display: flex; gap: 8px; }
.ln-btn2 { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 46px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line); font-weight: 700; }
.ln-btn2:disabled { opacity: .4; cursor: default; }
.ln-btn2 svg { width: 18px; height: 18px; }
#mPrev svg { transform: scaleX(-1); }
/* 完整設定教學 */
.tu-hero { padding: calc(var(--nav-h) + clamp(24px, 5vh, 56px)) 0 40px; background: var(--paper); }
.tu-hero .h2 { margin-top: 16px; font-size: clamp(36px, 4vw, 60px); }
.tu-hero .lead { margin: 14px 0 0; }
.tu-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; padding: 40px 0 96px; align-items: start; }
.tu-video { border-radius: 24px; overflow: hidden; background: #000; scroll-margin-top: 100px; }
.tu-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.tu-status { margin-top: 12px; padding: 12px 16px; border-radius: 14px; background: #FDECEC; color: #B42318; font-size: 15px; }
.tu-hint { margin-top: 12px; font-size: 15px; color: var(--sub); }
.tu-card { margin-top: 24px; padding: 28px; border-radius: 24px; background: var(--paper); }
.tu-card h2 { font-size: 24px; }
.tu-card p { margin-top: 14px; font-size: 17px; line-height: 1.9; color: #3A4352; }
.tu-card .tu-lead { font-size: 19px; font-weight: 700; color: var(--ink); }
.tu-card mark { background: #FFF1C9; color: var(--ink); padding: 0 4px; border-radius: 4px; }
.tu-card a { color: var(--social-ink); text-decoration: underline; text-underline-offset: 3px; }
.tu-svcs { margin-top: 16px; display: grid; gap: 10px; }
.tu-svcs > div { display: grid; gap: 4px; padding: 16px 18px; border-radius: 16px; background: #fff; box-shadow: inset 4px 0 0 var(--theme); }
.tu-svcs b { font-size: 17px; color: var(--theme-ink, var(--theme)); }
.tu-svcs span { font-size: 15px; line-height: 1.7; color: var(--sub); }
.tu-side { position: sticky; top: 100px; display: grid; gap: 16px; }
.tu-cta { display: grid; gap: 10px; padding: 24px; border-radius: 24px; background: var(--theme); color: #fff; }
.tu-cta h3 { font-size: 22px; }
.tu-cta p { font-size: 16px; opacity: .9; margin-bottom: 4px; }
.tu-cta .btn { width: 100%; }
.tu-chapters { padding: 20px; border-radius: 24px; background: var(--paper); max-height: calc(100vh - 420px); min-height: 260px; overflow: auto; }
.tu-side-h { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.tu-side-h b { font-size: 17px; }
.tu-side-h small { font-size: 14px; color: var(--sub); }
.tu-ch { display: flex; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 12px; text-align: left; font-size: 15px; line-height: 1.5; }
.tu-ch:hover { background: #fff; }
.tu-ch .n { flex: none; font-weight: 800; color: var(--social-ink); }
.tu-toast { position: fixed; z-index: 140; left: 50%; bottom: 28px; transform: translate(-50%, 20px); padding: 12px 20px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 15px; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
.tu-toast.on { opacity: 1; transform: translate(-50%, 0); }
/* 404 */
.e404 { min-height: 72vh; display: grid; place-items: center; padding: calc(var(--nav-h) + 48px) 0 96px; background-color: var(--paper); background-image: linear-gradient(rgba(37, 46, 61, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(37, 46, 61, .05) 1px, transparent 1px); }
.e404-in { text-align: center; }
.e404-num { font-family: "Satoshi", "Satoshi Fallback", sans-serif; font-size: clamp(120px, 18vw, 240px); font-weight: 900; line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.e404-num span { color: var(--chat); }
.e404 .h2 { margin-top: 12px; font-size: clamp(24px, 2.4vw, 36px); }

@media (max-width: 1100px) {
  .blog-hero-grid, .post-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .bgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-layout { grid-template-columns: minmax(0, 760px); }
  .post-layout .toc { position: static; padding: 18px 20px; border-radius: 20px; background: var(--paper); }
  .ln-wrap { grid-template-columns: minmax(0, 1fr); }
  .ln-wrap > .toc { display: none; }
  .ln-toc-btn { display: inline-flex; align-items: center; }
  .page-learn .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tu-grid { grid-template-columns: minmax(0, 1fr); }
  .tu-side { position: static; }
  .tu-chapters { max-height: none; }
  .ln-panel { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 899px) {
  .hub-grid { grid-template-columns: minmax(0, 1fr); }
  .post .flow ol, .post .case-flow, .post .stage-flow { grid-template-columns: minmax(0, 1fr); }
  .post .node:not(:last-child)::after { content: "⌄"; right: 50%; top: auto; bottom: -16px; transform: translateX(50%); }
  .post .flow-edge { grid-template-columns: minmax(0, 1fr); }
  .post .flow-connector { min-height: 44px; }
  .post .flow-connector b { transform: rotate(90deg); }
  .ln-bar { top: 72px; }
}
@media (max-width: 599px) {
  .bgrid, .page-learn .grid { grid-template-columns: minmax(0, 1fr); }
  .post .decision-branches { grid-template-columns: minmax(0, 1fr); }
  .post table { min-width: 560px; } /* 手機上表格維持可讀的欄寬，左右滑動看，不把字擠到一欄只剩幾個字 */
  .post .message { max-width: 92%; }
  .legal .legal-entity { grid-template-columns: minmax(0, 1fr); }
  .legal .legal-entity dd { border-top: 0; padding-top: 0; }
  .ln-login { display: none; }
  .ln-modal { padding: 0; }
  .ln-panel { max-height: 100vh; border-radius: 0; }
}

/* 文章表格：現站有標 stack-on-mobile 的表格（每格帶 data-label），手機上照現站疊成一列一張卡：第一格（不管是 th 還是 td）當卡片標題，其餘每格左邊欄名、右邊內容；沒標的表格照舊左右滑 */
@media (max-width: 640px) {
  .post .table-wrap.stack-on-mobile { overflow: visible; border-radius: 0; box-shadow: none; }
  .post .stack-on-mobile table, .post .stack-on-mobile tbody, .post .stack-on-mobile tr, .post .stack-on-mobile th, .post .stack-on-mobile td { display: block; width: 100%; min-width: 0; }
  .post .stack-on-mobile caption { display: block; width: 100%; padding: 0 0 10px; text-align: left; }
  .post .stack-on-mobile thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .post .stack-on-mobile thead th { white-space: nowrap; } /* 藏起來的表頭只有 1px 寬：不准換行，不然會一個字一行 */
  .post .stack-on-mobile tr { margin: 0 0 12px; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
  .post .stack-on-mobile tbody tr > :first-child { padding: 12px 16px; border-top: 0; background: var(--paper); font-size: 16px; font-weight: 700; white-space: normal; }
  .post .stack-on-mobile td:not(:first-child) { display: grid; grid-template-columns: minmax(96px, 42%) minmax(0, 1fr); gap: 10px; padding: 10px 16px; font-size: 15px; line-height: 1.6; overflow-wrap: break-word; }
  .post .stack-on-mobile td:not(:first-child)::before { content: attr(data-label); color: var(--sub); font-weight: 700; }
}

/* 其他文章才有的零件（10-04 全部文章換新版型時補）：逐步操作截圖、直排流程、程式碼框、摘錄標籤、測試對照表；顏色照原型，不照現站的綠色 */
.post .walkthrough-screenshot { margin: 30px 0 36px; padding: 10px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 10px 28px rgba(0, 0, 0, .05); overflow: hidden; }
.post .walkthrough-screenshot img { display: block; width: 100%; height: auto; border-radius: 14px; }
.post .walkthrough-screenshot figcaption { margin: 10px 6px 4px; font-size: 14px; line-height: 1.7; color: var(--sub); }
.post .flow-sequence { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.post .flow-sequence .flow-card { width: 100%; max-width: 520px; }
.post .flow-sequence .flow-connector { min-height: 40px; }
.post .flow-sequence .flow-connector b { transform: none; }
.post .flow-sequence .flow-loop { background: var(--paper); box-shadow: inset 0 0 0 1.5px rgba(96, 93, 186, .45); color: #4B48A6; }
.post .plain-code { margin: 24px 0; padding: 20px 22px; border-radius: 18px; background: var(--ink); color: #F5F6F8; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.75; }
.post .excerpt-label { margin-top: 6px; font-size: 14px; color: var(--sub); }
.post .test-matrix td:first-child { width: 18%; font-weight: 700; }
@media (max-width: 599px) {
  .post .walkthrough-screenshot { margin: 24px -4px 30px; padding: 6px; border-radius: 16px; }
  .post .walkthrough-screenshot img { border-radius: 10px; }
  .post .test-matrix td:first-child { width: auto; }
}

/* ===================== AI 銷售頁（內容照現站 /sales-pages，換新版面；紫色只套在需要的區塊） ===================== */
.page-sales .footer-cta { display: none; } /* 這頁自己有行動呼籲，頁尾那塊「免費試用 30 天」是另一個產品 */
.sp-hero { padding: calc(var(--nav-h) + clamp(28px, 6vh, 72px)) 0 88px; background-color: var(--paper); background-image: linear-gradient(rgba(37, 46, 61, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(37, 46, 61, .05) 1px, transparent 1px); background-size: 48px 48px; }
.sp-hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 56px; align-items: center; }
.sp-hero-copy .h2 { font-size: clamp(40px, 4.4vw, 72px); line-height: 1.2; }
.sp-hl { font-style: normal; color: var(--chat); }
.sp-hero-copy .lead { margin: 22px 0 0; max-width: 34em; } /* 共用的 .lead 預設置中，這裡跟大標一起靠左 */
.sp-hero-copy .x-ctas { margin-top: 30px; }
.sp-btn-line { gap: 8px; background: #04873A; color: #fff; } /* LINE 綠加深到白字對比 4.6:1（原本 #06C755 只有 2.3:1，10-06 她選「改 AI 銷售頁 LINE 按鈕對比」）；白色 LINE 圖示照官方不動 */
.sp-btn-line svg { flex: none; }
.sp-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.sp-facts li { padding: 6px 14px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; font-weight: 700; line-height: 1.5; }
/* 主標題 A/B 測試示意卡 */
.sp-ab { margin: 0; padding: 28px; border-radius: 32px; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .06); }
.sp-ab-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sp-ab-head b { font-size: 19px; line-height: 1.4; }
.sp-ab-head em { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: #EAF8EE; color: #1B7F39; font-size: 14px; font-weight: 700; font-style: normal; }
.sp-ab-head em::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #22A04B; animation: spPulse 1.6s ease-in-out infinite; }
@keyframes spPulse { 50% { opacity: .35; } }
.sp-ab-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.sp-ab-v { padding: 16px; border-radius: 18px; background: var(--paper); }
.sp-ab-v span { display: block; font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--sub); }
.sp-ab-v p { margin-top: 6px; font-size: 17px; font-weight: 700; line-height: 1.5; }
.sp-ab-v small { display: block; margin-top: 8px; font-size: 14px; line-height: 1.4; color: var(--sub); }
.sp-ab-v.is-b { background: #EEEDFA; box-shadow: inset 0 0 0 1.5px rgba(96, 93, 186, .55); }
.sp-ab-v.is-b span { color: var(--chat); }
.sp-ab-v.is-b small { color: #5E5E63; } /* 淡紫底上的灰字深一點（10-05 無障礙） */
.sp-ab-rules { display: grid; gap: 10px; margin-top: 18px; }
.sp-ab-rules li, .sp-mech li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: 16px; line-height: 1.6; }
.sp-ab-rules svg, .sp-mech li svg { width: 20px; height: 20px; margin-top: 3px; color: var(--chat); }
.sp-ab figcaption { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.5; color: var(--sub); }
/* 共用：區段、標題、小字、圖示 */
.sp-sec { padding: 120px 0; }
.sp-alt { background: var(--paper); }
.sp-head { max-width: 820px; margin: 0 auto; text-align: center; }
.sp-head .lead { margin-top: 18px; }
.sp-note { max-width: 46em; margin: 24px auto 0; text-align: center; font-size: 15px; line-height: 1.6; color: var(--sub); }
.sp-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #EEEDFA; color: var(--chat); }
.sp-ic svg { width: 24px; height: 24px; }
.sp-tag { display: inline-block; padding: 4px 12px; border-radius: 999px; background: #EEEDFA; color: #4B48A6; font-size: 14px; font-weight: 700; line-height: 1.5; }
/* 三步驟 */
.sp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 56px; }
.sp-steps li { position: relative; padding: 32px 28px 30px; border-radius: 32px; background: #fff; }
.sp-num { position: absolute; top: 28px; right: 28px; font-family: "Satoshi", "Satoshi Fallback", sans-serif; font-size: 44px; font-weight: 700; line-height: 1; color: rgba(37, 46, 61, .12); }
.sp-steps h3 { margin-top: 22px; font-size: 24px; line-height: 1.4; font-weight: 800; }
.sp-steps p { margin-top: 10px; font-size: 17px; line-height: 1.7; color: var(--sub); }
.sp-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 40px auto 0; max-width: 960px; }
.sp-chips li { padding: 6px 14px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; font-weight: 700; line-height: 1.5; }
/* 自動優化 */
.sp-loop { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 40px; }
.sp-loop li { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 8px; border-radius: 999px; background: var(--paper); font-size: 16px; font-weight: 700; line-height: 1.4; }
.sp-loop b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 14px; }
.sp-mechs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.sp-mech { padding: 30px 28px; border-radius: 32px; background: var(--paper); }
.sp-mech h3 { margin-top: 16px; font-size: 22px; line-height: 1.45; font-weight: 800; }
.sp-mech p { margin-top: 10px; font-size: 17px; line-height: 1.7; color: var(--sub); }
.sp-mech ul { display: grid; gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.sp-caveat { margin-top: 28px; padding: 20px 24px; border-radius: 20px; background: #FFF6E0; color: #6B4A00; font-size: 16px; line-height: 1.7; }
/* 用講的改網站 */
.sp-editor { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.sp-editor-copy .lead { margin: 18px 0 0; }
.sp-chat { margin-top: 32px; padding: 24px; border-radius: 32px; background: #fff; display: flex; flex-direction: column; gap: 12px; }
.sp-chat-label { font-size: 14px; font-weight: 700; color: var(--sub); }
.sp-bub { max-width: 86%; padding: 12px 16px; border-radius: 18px; font-size: 16px; line-height: 1.6; }
.sp-bub.me { align-self: flex-end; background: var(--ink); color: #fff; border-bottom-right-radius: 6px; }
.sp-bub.ai { align-self: flex-start; background: var(--paper); border-bottom-left-radius: 6px; }
.sp-flow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.sp-flow li { padding: 5px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; font-weight: 700; line-height: 1.5; }
.sp-flow li + li::before { content: "→ "; color: var(--sub); }
.sp-list { display: grid; gap: 12px; }
.sp-list li { display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; padding: 18px 20px; border-radius: 24px; background: #fff; }
.sp-list .sp-ic { grid-row: span 2; }
.sp-list b { font-size: 18px; line-height: 1.45; }
.sp-list span:not(.sp-ic) { margin-top: 4px; font-size: 16px; line-height: 1.6; color: var(--sub); }
/* 數據洞察 */
.sp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 56px; }
.sp-card { padding: 30px 28px; border-radius: 32px; background: var(--paper); }
.sp-card h3 { margin-top: 20px; font-size: 22px; line-height: 1.45; font-weight: 800; }
.sp-card > p { margin-top: 10px; font-size: 17px; line-height: 1.7; color: var(--sub); }
.sp-quote { margin: 16px 0 0; padding: 14px 16px; border-left: 3px solid var(--chat); border-radius: 0 14px 14px 0; background: #fff; }
.sp-quote p { font-size: 16px; font-weight: 700; line-height: 1.6; }
.sp-quote small { display: block; margin-top: 4px; font-size: 14px; color: var(--sub); }
/* 方案與價格 */
.sp-plan { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; max-width: 1080px; margin: 56px auto 0; padding: 40px; border-radius: 32px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.sp-plan-main h3 { margin-top: 16px; font-size: 26px; line-height: 1.4; font-weight: 800; }
.sp-price { margin-top: 18px; }
.sp-price b { display: block; font-family: "Satoshi", "Satoshi Fallback", sans-serif; font-size: clamp(44px, 4.4vw, 64px); font-weight: 700; line-height: 1.05; }
.sp-price span { display: block; margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--sub); }
.sp-renew { margin-top: 18px; padding: 10px 14px; border-radius: 14px; background: #EEEDFA; color: #4B48A6; font-size: 16px; font-weight: 700; line-height: 1.5; }
.sp-plan-main .btn { width: 100%; margin-top: 14px; }
.sp-plan-main .btn-ink { margin-top: 24px; }
.sp-plan-side h4 { font-size: 18px; line-height: 1.45; }
.sp-plan-side .p-feats { margin-top: 14px; padding-top: 0; border-top: 0; }
.sp-plan-side .p-feats + h4 { margin-top: 26px; }
.sp-addons { display: grid; gap: 10px; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.sp-addons li { font-size: 16px; line-height: 1.6; color: var(--sub); }
.sp-addons b { color: var(--ink); }
@media (max-width: 1180px) {
  .sp-hero-grid, .sp-editor { grid-template-columns: 1fr; gap: 40px; }
  .sp-ab { max-width: 620px; }
}
@media (max-width: 899px) {
  .sp-sec { padding: 88px 0; }
  .sp-steps, .sp-mechs, .sp-cards { grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
  .sp-plan { grid-template-columns: 1fr; gap: 32px; padding: 28px 22px; }
}
@media (max-width: 599px) {
  .sp-hero { padding-bottom: 64px; }
  .sp-ab { padding: 20px; border-radius: 24px; }
  .sp-ab-vs { grid-template-columns: 1fr; }
  .sp-steps li, .sp-mech, .sp-card { padding: 26px 22px; border-radius: 24px; }
  .sp-chat { padding: 18px; border-radius: 24px; }
  .sp-list li { grid-template-columns: 40px 1fr; padding: 16px; }
  .sp-list .sp-ic { width: 40px; height: 40px; }
}

/* 往下捲過主視覺後浮在底部的三顆按鈕（現站首頁有，10-04 她說要留著）：主視覺看不到才出現，看到頁尾那三顆時先藏起來（v2.js 加 is-visible／is-hidden）。
   藏起來時用 visibility 拿掉，鍵盤 Tab 才不會跳到看不見的按鈕；疊在手機選單（99）下面 */
.floating-cta { position: fixed; z-index: 90; left: 50%; bottom: 16px; display: flex; gap: 8px; padding: 8px; border-radius: 999px; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 0 0 1px rgba(37, 46, 61, .1), 0 16px 48px rgba(37, 46, 61, .18); opacity: 0; visibility: hidden; transform: translate(-50%, 120%); transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; }
.floating-cta.is-visible:not(.is-hidden) { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.floating-cta .btn { height: 44px; padding: 0 22px; font-size: 16px; }
.floating-cta .btn-ghost { color: var(--ink); }
@media (max-width: 899px) {
  .floating-cta { left: 12px; right: 12px; bottom: 12px; gap: 6px; padding: 6px; border-radius: 22px; transform: translateY(120%); }
  .floating-cta.is-visible:not(.is-hidden) { transform: none; }
  .floating-cta .btn { flex: 1; min-width: 0; padding: 0 6px; font-size: 15px; }
  .floating-cta .btn-grad { flex: 1.4; }
}
@media (prefers-reduced-motion: reduce) { .floating-cta { transition: none; } }

/* ===================== 速度：畫面外的區塊（10-05 手機速度） ===================== */
/* 畫面外的區塊動畫先暫停（v2.js 加 data-offscreen，前後多算 200px）：手機上不會一直重算看不到的動畫（10-05） */
[data-offscreen] *, [data-offscreen] *::before, [data-offscreen] *::after { animation-play-state: paused !important; }

/* 首頁下半部的示範、三步驟、常見問題（頁尾不套：深色底，Lighthouse 掃到還沒畫出來的頁尾會把白字誤判成「白字配淺灰」扣無障礙分）：還沒捲到附近就先不排版也不畫（瀏覽器內建），第一次打開、中文字型換上時要排的東西少很多（10-05 手機速度）。
   還沒畫過的區塊先當 900px 高（auto：畫過一次就記住真正的高度）。捲到附近才畫，看起來跟原本一樣 */
main > .demo, main > .steps3, main > .faq { content-visibility: auto; contain-intrinsic-size: auto 900px; }
/* 手機、平板（不釘住的版面）：見證跑馬燈、三個產品示範、支援平台、前後對照也一樣。這幾區在手機上是一般的區塊，電腦上是釘住捲動的（要量位置），所以只套手機。
   中文字型換上時要重排的東西少很多，手機比較快空下來、字型也比較早換上（10-05 量：慢手機上換字型那一次排版要 1 秒） */
html.no-pin main > .marquee, html.no-pin main > .showcase, html.no-pin main > .platforms, html.no-pin main > .compare { content-visibility: auto; contain-intrinsic-size: auto 900px; }
/* 文章頁：每一節（h2 那一段）也一樣，捲到附近才排版。文章頁斷行用的隱形記號很多（一篇 1,900 個），整篇一起排第一次要 0.8 秒（10-05 手機速度） */
.post > section { content-visibility: auto; contain-intrinsic-size: auto 700px; }

/* ===================== 首頁配色：照最初那一版（7/14，練就設計）＝白／淺灰＋墨藍，紫藍漸層只放重點（10-06 她選 1） ===================== */
/* 只套首頁（body.page-home）；她確認後再套產品頁。三個產品示範比照當初的產品卡：Chat 漸層、Social 淺灰、Post 墨藍 */
.page-home { --home-grad: linear-gradient(135deg, #605DBA, #3D73D8); --home-light: #F7F7F7; }
.page-home .showcase .pin { background-color: var(--home-light); isolation: isolate; }
.page-home .showcase .pin::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--home-grad); transition: opacity .6s var(--ease); } /* 漸層一層淡入淡出：換產品時跟原本一樣慢慢換色，不會硬切 */
.page-home .showcase[data-step="1"] .pin { background-color: var(--home-light); color: var(--ink); }
.page-home .showcase[data-step="2"] .pin { background-color: var(--ink); color: #fff; }
.page-home .showcase[data-step="1"] .pin::before, .page-home .showcase[data-step="2"] .pin::before { opacity: 0; }
.page-home .showcase[data-step="1"] .grid-lines { background-image: linear-gradient(rgba(37, 46, 61, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(37, 46, 61, .07) 1px, transparent 1px); }
.page-home .showcase[data-step="2"] .grid-lines { background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px); }
.page-home .showcase[data-step="1"] .step-tag { background: rgba(37, 46, 61, .08); }
.page-home .showcase[data-step="2"] .step-tag { background: rgba(255, 255, 255, .14); }
html.no-pin .page-home .step { background: var(--home-grad); color: #fff; }
html.no-pin .page-home .step:nth-child(2) { background: var(--home-light); color: var(--ink); }
html.no-pin .page-home .step:nth-child(3) { background: var(--ink); color: #fff; }
html.no-pin .page-home .step:nth-child(2) .step-tag { background: rgba(37, 46, 61, .08); }
html.no-pin .page-home .step:nth-child(3) .step-tag { background: rgba(255, 255, 255, .14); }
/* 支援平台：大字從墨藍底升上來放大，放到最大變成淺灰整面，平台卡片排在淺灰上（原本整面藍） */
.page-home .zoom-word b { color: var(--home-light); }
.page-home .platforms-fill { background-color: var(--home-light); }
.page-home .platforms-content, .page-home .platforms-content .lead { color: var(--ink); }
html.no-pin .page-home .platforms .pin { background-color: var(--home-light); }
/* 導入前後：「導入之後」是重點，用漸層；手繪圈原本螢光綠，改白色 */
.page-home .c-after { background: var(--home-grad); }
.page-home .scribble path { stroke: rgba(255, 255, 255, .92); }
/* 示範：天藍大框改淺灰 */
.page-home .demo-box { background-color: var(--home-light); }
/* 三步驟：藍色插圖改漸層 */
.page-home .art-click { background-color: #605DBA; background-image: linear-gradient(rgba(255, 255, 255, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .1) 1px, transparent 1px), linear-gradient(135deg, #605DBA, #3D73D8); background-size: 25% 33.334%, 25% 33.334%, 100% 100%; }
.page-home .al-link { background: var(--home-grad); box-shadow: 0 8px 20px rgba(96, 93, 186, .35); }
/* 常見問題：整片墨藍改淺灰，最下面只留頁尾一塊墨藍（跟最初那一版一樣） */
.page-home .faq { background: var(--home-light); color: var(--ink); }
.page-home .faq-list details, .page-home .faq-list details:last-child { border-color: var(--line); }
.page-home .faq-list summary::after { border-color: var(--ink); }
.page-home .faq-head small { opacity: 1; color: var(--sub); }
.page-home .faq-list details p { opacity: 1; color: #3A4352; }

/* ===================== 官網 AI 客服（正式站的 widget.js，10-06 搬進新版） ===================== */
/* 手機、平板上底部浮動按鈕列出現時，客服的圓形按鈕往上讓，不要疊在按鈕列上（正式站同樣做法：往上 78px） */
@media (max-width: 899px) { body:has(.floating-cta.is-visible:not(.is-hidden)) #fn-widget-container { transform: translateY(-78px) !important; transition: transform .3s var(--ease); } }
body.menu-open #fn-widget-container { visibility: hidden !important; } /* 手機選單打開時先把客服圓鈕收起來（不然會蓋住選單最下面的「體驗 30 天」） */

/* ===================== FRIDAI MCP（首頁支援平台後面，10-06） ===================== */
/* 配色照最初那一版：白底、卡片淺灰，重點那張（優化大師）用紫藍漸層 */
.mcp-sec { padding: 128px 0; background: #fff; }
.mcp-head { max-width: 860px; margin: 0 auto; text-align: center; }
.mcp-head small { display: block; margin-bottom: 12px; font-size: 16px; font-weight: 700; color: var(--sub); }
.mcp-head .lead { margin-top: 20px; }
.mcp-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.mcp-card { padding: 28px 26px; border-radius: var(--r-card); background: #F7F7F7; }
.mcp-card h3 { font-size: 22px; line-height: 1.4; font-weight: 800; }
.mcp-card p { margin-top: 10px; font-size: 17px; line-height: 1.7; color: var(--sub); }
.mcp-card h3, .mcp-card p, .mcp-note { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; } /* 中文詞不拆開（跟全站內文同一套斷行規則） */
.mcp-card.is-hi { background: linear-gradient(135deg, #605DBA, #3D73D8); color: #fff; }
.mcp-card.is-hi p { color: #fff; }
.mcp-note { margin-top: 28px; text-align: center; font-size: 16px; line-height: 1.7; color: var(--sub); }
.mcp-sec .x-ctas { margin-top: 24px; }
@media (max-width: 1199px) { .mcp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .mcp-sec { padding: 88px 0; } .mcp-grid { margin-top: 36px; grid-template-columns: minmax(0, 1fr); gap: 14px; } .mcp-card { padding: 24px 22px; } }

/* ===================== 實作教學（首頁、三個產品頁，常見問題前面；10-06 上線前照正式站搬：站內連到部落格文章） ===================== */
/* 配色照最初那一版：白底、卡片淺灰；整張卡都是連結（鍵盤看得到框） */
.guides-sec { padding: 120px 0; background: #fff; }
.guides-head { max-width: 860px; margin: 0 auto; text-align: center; }
.guides-head small { display: block; margin-bottom: 12px; font-size: 16px; font-weight: 700; color: var(--sub); }
.guides-head .lead { margin-top: 18px; text-wrap: balance; } /* 說明句各行一樣長：英文窄手機最後一行不會只剩一個字（10-06 體檢抓到 Social 頁 390 寬剩「on.」） */
.guides-head .h2 { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; text-wrap: balance; } /* 大標題只在詞和詞之間換行（建置時放好的記號），行長平均 */
.guides-grid { margin-top: 52px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.guide-card { display: flex; flex-direction: column; gap: 10px; padding: 28px 26px; border-radius: var(--r-card); background: #F7F7F7; color: var(--ink); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.guide-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(37, 46, 61, .08); }
.guide-card:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.guide-label { font-size: 15px; font-weight: 700; color: var(--sub); }
.guide-card strong { font-size: 21px; line-height: 1.45; font-weight: 800; }
.guide-desc { font-size: 17px; line-height: 1.7; color: var(--sub); }
.guide-card strong, .guide-desc { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; } /* 中文詞不拆開 */
.guides-sec .x-ctas { margin-top: 32px; }
@media (max-width: 1023px) { .guides-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; } }
@media (max-width: 767px) { .guides-sec { padding: 88px 0; } .guides-grid { margin-top: 36px; } .guide-card { padding: 24px 22px; } }

/* ===================== 產品事實（首頁，常見問題前面；10-06 上線前照正式站首頁同一區搬：AI 搜尋引用看這一區） ===================== */
/* 淺灰底、白卡片（前面的實作教學是白底灰卡片，兩區交錯） */
.facts-sec { padding: 120px 0; background: var(--paper); }
.facts-head { max-width: 860px; margin: 0 auto; text-align: center; }
.facts-head small { display: block; margin-bottom: 12px; font-size: 16px; font-weight: 700; color: var(--sub); }
.facts-head .h2 { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; text-wrap: balance; }
.facts-head .lead { margin-top: 18px; max-width: 38em; text-wrap: balance; }
.facts-grid { margin: 52px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.fact { padding: 24px 24px 26px; border-radius: var(--r-card); background: #fff; }
.fact dt { font-size: 15px; font-weight: 700; line-height: 1.5; color: var(--sub); }
.fact dd { margin: 8px 0 0; font-size: 19px; line-height: 1.55; font-weight: 800; word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
.facts-more { margin-top: 20px; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px; }
.facts-card { padding: 28px 28px 30px; border-radius: var(--r-card); background: #fff; }
.facts-card h3 { font-size: 20px; line-height: 1.4; font-weight: 800; }
.facts-diff { margin-top: 14px; display: grid; gap: 10px; }
.facts-diff li { position: relative; padding-left: 18px; font-size: 17px; line-height: 1.7; color: var(--sub); }
.facts-diff li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.facts-card p { margin-top: 12px; font-size: 17px; line-height: 1.7; color: var(--sub); }
.facts-diff li, .facts-card p { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; } /* 中文詞不拆開 */
.facts-link { display: inline-block; margin-top: 16px; font-size: 16px; font-weight: 700; line-height: 1.5; text-decoration: underline; text-underline-offset: 4px; }
.facts-links { margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.facts-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 16px; font-weight: 700; line-height: 1.3; transition: box-shadow .2s; }
.facts-links a:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.facts-links a:focus-visible, .facts-link:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
@media (max-width: 1199px) { .facts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* 四格放不下公司全名（1024 寬「公司」會被拆開） */
@media (max-width: 1023px) { .facts-more { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) { .facts-sec { padding: 88px 0; } .facts-grid { margin-top: 36px; gap: 12px; } .fact { padding: 20px; } .facts-more { gap: 12px; margin-top: 12px; } .facts-card { padding: 24px 22px; } }
@media (max-width: 479px) { .facts-grid { grid-template-columns: minmax(0, 1fr); } }

/* ===================== 最新 AI 快訊：正式站 Worker（official-website/src/news.js）在首頁「實作教學」後面插入的區塊 ===================== */
/* 標記是 Worker 產生的（class 沿用舊首頁的名字），這裡只給新版的外觀：接在實作教學後面、同樣白底、卡片跟實作教學同一套 */
#fridai-latest-news { padding: 0 0 120px; background: #fff; color: var(--ink); }
#fridai-latest-news .content-width { width: min(var(--w), 100% - 64px); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
#fridai-latest-news .section-kicker { font-size: 16px; font-weight: 700; color: var(--sub); }
#fridai-latest-news h2 { margin-top: 12px; font-size: clamp(28px, 3vw, 44px); line-height: 1.3; font-weight: 800; word-break: keep-all; overflow-wrap: anywhere; line-break: strict; text-wrap: balance; }
#fridai-latest-news .content-width > div > p:not(.section-kicker) { margin-top: 16px; font-size: 18px; line-height: 1.7; color: var(--sub); }
#fridai-latest-news .text-link { display: inline-block; margin-top: 20px; font-size: 16px; font-weight: 700; line-height: 1.5; text-decoration: underline; text-underline-offset: 4px; }
#fridai-latest-news nav { display: grid; gap: 14px; }
#fridai-latest-news nav a { display: grid; gap: 6px; padding: 22px 24px; border-radius: var(--r-card); background: #F7F7F7; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
#fridai-latest-news nav a:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(37, 46, 61, .08); }
#fridai-latest-news nav a:focus-visible, #fridai-latest-news .text-link:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
#fridai-latest-news nav span { font-size: 15px; font-weight: 700; line-height: 1.5; color: var(--sub); }
#fridai-latest-news nav strong { font-size: 19px; line-height: 1.5; font-weight: 800; word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
#fridai-latest-news nav small { font-size: 16px; line-height: 1.65; color: var(--sub); word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
@media (max-width: 1023px) { #fridai-latest-news .content-width { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
@media (max-width: 899px) { #fridai-latest-news .content-width { width: min(var(--w), 100% - 40px); } }
@media (max-width: 767px) { #fridai-latest-news { padding-bottom: 88px; } #fridai-latest-news nav a { padding: 20px; } }