/* v30（11/1 深夜）：首頁「一位客人，從看到廣告到成交」的分流圖（assets/flow.js）＋下面的溝通時間試算（v31：小拉桿、一年省下幾小時＋節約時間的曲線、金框的預估每月多賺）。
   放在黑色舞台上：線是淡灰、接住的地方是香檳金、流失的出口是淺紅。每一格可以停上去、點、Tab 到，旁邊跳出小框框（.fl-tip） */
.fl-sec { position: relative; background: var(--band); color: var(--band-fg); }
.fl-sec .sec-head h2 { color: var(--band-fg); }
.fl-sec .sec-head p { color: var(--band-soft); }
.fl-how { color: #EFCC8E; }

.fl {
  --ink: #F5F5F7; --ink-soft: #A1A1A6; --ink-faint: #7A7A80; --amber: #EFCC8E;
  --fl-honey: #EAD09A; --fl-bad: #FF9F8F;
  position: relative; display: grid; gap: 16px; color: var(--ink);
}
/* 沒有 JavaScript：一般的清單 */
.fl-plain { display: grid; gap: 8px; margin: 0; padding-left: 1.4em; color: var(--ink-soft); font-size: 15.5px; line-height: 1.7; }
.fl-plain b { color: var(--ink); }

.fl-chart { position: relative; }
.fl-chart.is-tall { max-width: 440px; width: 100%; margin-inline: auto; }
.fl-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-body); -webkit-user-select: none; user-select: none; }
.fl-e { fill: none; stroke: rgba(255, 255, 255, .2); stroke-width: 2.4; stroke-linecap: round; transition: stroke .45s, opacity .45s; }
.fl-e.is-hot { stroke: color-mix(in srgb, var(--fl-honey) 72%, transparent); }
.fl-e.is-bad { stroke: var(--fl-bad); stroke-dasharray: 6 7; }
.fl-e.is-dim { opacity: .3; }
.fl-lp { fill: none; stroke: color-mix(in srgb, var(--fl-honey) 42%, transparent); stroke-width: 1.6; stroke-dasharray: 4 6; stroke-linecap: round; }
.fl-la { fill: color-mix(in srgb, var(--fl-honey) 60%, transparent); }
.fl-lt { fill: var(--ink-soft); font-size: .8em; font-weight: 600; }
.fl[data-mode="all"] .fl-lp { animation: fl-run 1.1s linear infinite; }
.fl[data-mode]:not([data-mode="all"]) .fl-loop { opacity: .35; }
.fl-loop { transition: opacity .45s; }
/* 流失的出口：平常淡淡的；「沒有它」的時候亮起來；可以停上去看說明 */
.fl-x { opacity: .3; cursor: pointer; outline: none; transition: opacity .45s; }
.fl-x:hover, .fl-x.is-focus { opacity: .85; }
.fl-xh { fill: transparent; }
.fl-xo { fill: none; stroke: none; }
.fl-xp { fill: none; stroke: var(--fl-bad); stroke-width: 1.8; stroke-dasharray: 3 5; stroke-linecap: round; }
.fl-xb { fill: #2A1512; stroke: var(--fl-bad); stroke-width: 1.6; }
.fl-xx { fill: none; stroke: var(--fl-bad); stroke-width: 2; stroke-linecap: round; }
.fl-xt { fill: var(--fl-bad); font-size: .8em; font-weight: 700; }
.fl-x.is-live { opacity: 1; }
.fl-x.is-live .fl-xb { transform-box: fill-box; transform-origin: center; animation: fl-pulse 1.1s ease-in-out infinite; }
.fl-x:focus-visible .fl-xb { stroke: #F5D38A; stroke-width: 3; }
/* 「分流」小標 */
.fl-sp rect { fill: #1F1B14; stroke: color-mix(in srgb, var(--fl-honey) 55%, transparent); stroke-width: 1.2; }
.fl-sp text { fill: var(--amber); font-size: .74em; font-weight: 800; letter-spacing: .06em; }
/* 每一格：可以停上去、點 */
.fl-n { cursor: pointer; outline: none; transition: opacity .45s; }
.fl-n.is-dim { opacity: .34; }
.fl-hx { fill: #141416; stroke: rgba(255, 255, 255, .24); stroke-width: 1.6; stroke-linejoin: round; transition: fill .45s, stroke .45s; }
.fl-ic { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--ink-soft); transition: color .45s; }
.fl-halo { opacity: 0; transition: opacity .5s; }
.fl-ring { fill: none; stroke: var(--fl-honey); stroke-width: 1.4; stroke-dasharray: 3 4; opacity: 0; transition: opacity .25s; }
.fl-n:hover .fl-ring, .fl-n.is-focus .fl-ring { opacity: .9; }
.fl-n.is-place:not(.is-focus):not(.is-bad) .fl-ring { opacity: .32; }
.fl-n:hover .fl-hx, .fl-n.is-focus .fl-hx { stroke: #fff; }
.fl-n:focus-visible .fl-hx, .fl-n.is-pill:focus-visible .fl-pb { stroke: #F5D38A; stroke-width: 3; }
.fl-t { fill: var(--ink); font-size: 1em; font-weight: 800; }
.fl-s { fill: var(--ink-soft); font-size: .8em; font-weight: 500; }
.fl-back { fill: var(--amber); font-weight: 700; }
.fl-pb { fill: #141416; stroke: rgba(255, 255, 255, .24); stroke-width: 1.4; transition: fill .45s, stroke .45s; }
.fl-pt { fill: var(--ink); font-size: .86em; font-weight: 700; }
.fl-n.is-pill:hover .fl-pb, .fl-n.is-pill.is-focus .fl-pb { stroke: #fff; }
.fl-n.is-hot .fl-hx, .fl-n.is-pill.is-hot .fl-pb { stroke: var(--fl-honey); }
.fl-n.is-hot .fl-ic { color: var(--fl-honey); }
.fl[data-mode]:not([data-mode="all"]) .fl-n.is-hot .fl-hx { fill: var(--fl-honey); }
.fl[data-mode]:not([data-mode="all"]) .fl-n.is-hot .fl-ic { color: #241B0E; }
.fl[data-mode]:not([data-mode="all"]) .fl-n.is-hot .fl-halo { opacity: 1; }
.fl[data-mode]:not([data-mode="all"]) .fl-n.is-pill.is-hot .fl-pb { fill: #3A3020; }
.fl-n.is-bad .fl-hx, .fl-n.is-pill.is-bad .fl-pb { fill: #1E1210; stroke: var(--fl-bad); stroke-dasharray: 5 4; }
.fl-n.is-bad .fl-ic { color: var(--fl-bad); }
.fl-n.is-bad .fl-t { fill: var(--fl-bad); }
.fl-n.is-bad .fl-ring { stroke: var(--fl-bad); }
.fl-ok, .fl-no { opacity: 0; transition: opacity .3s; }
.fl-ok circle { fill: var(--fl-honey); }
.fl-ok path { fill: none; stroke: #241B0E; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fl-no circle { fill: var(--fl-bad); }
.fl-no path { fill: none; stroke: #2B0F0A; stroke-width: 2.2; stroke-linecap: round; }
.fl[data-mode]:not([data-mode="all"]) .fl-n.is-hot .fl-ok, .fl-n.is-bad .fl-no { opacity: 1; }
/* 一道一道光＝一位一位的客人：亮點＋越來越淡的光尾（流失的變紅） */
.fl-men { pointer-events: none; }
/* 一道光＝一位客人：亮點＋光暈＋漸層光尾（尾巴透明、越靠近亮點越亮）；流失的變淺紅 */
.fl-orb-t { fill: none; stroke-width: 3.8; stroke-linecap: round; stroke-linejoin: round; }
.fl-chart.is-tall .fl-orb-t { stroke-width: 3.2; }
.fl-orb-s0 { stop-color: #F5E1B3; stop-opacity: 0; }
.fl-orb-s1 { stop-color: #FFFFFF; stop-opacity: 1; }
.fl-orb-h { fill: #F5E1B3; opacity: .18; }
.fl-orb-c { fill: #FFF8E8; stroke: rgba(234, 208, 154, .6); stroke-width: 3; paint-order: stroke; }
.fl-orb.is-lost .fl-orb-s0 { stop-color: #FF9F8F; }
.fl-orb.is-lost .fl-orb-s1 { stop-color: #FFE3DD; }
.fl-orb.is-lost .fl-orb-h { fill: #FF9F8F; }
.fl-orb.is-lost .fl-orb-c { fill: #FFE6E1; stroke: rgba(255, 159, 143, .65); }
@keyframes fl-run { to { stroke-dashoffset: -20; } }
@keyframes fl-pulse { 50% { transform: scale(1.2); } }

/* 小框框：跳在那一格旁邊（位置由 flow.js 算）；小三角形指著那一格 */
.fl-tip { position: absolute; left: 0; top: 0; z-index: 6; width: min(332px, calc(100% - 12px)); padding: 13px 15px 14px; border-radius: 16px;
  background: #1A1A1D; border: 1px solid rgba(255, 255, 255, .14);   /* 實心：後面的字不會透出來變重影 */ box-shadow: 0 26px 60px -22px rgba(0, 0, 0, .95), 0 0 0 1px rgba(234, 208, 154, .07);
  color: var(--ink); font-size: 14px; line-height: 1.6; visibility: hidden; opacity: 0; transform: translateY(4px) scale(.98); pointer-events: none;
  transition: opacity .18s, transform .18s, visibility 0s linear .18s; }
.fl-tip.is-on { visibility: visible; opacity: 1; transform: none; transition: opacity .18s, transform .18s, visibility 0s; }
/* 小框框不擋滑鼠、手指（底下被蓋住的格子一樣停得到、點得到）；只有點開時的關閉按鈕可以按 */
.fl-tip.is-on .fl-tip-x { pointer-events: auto; }
.fl-tip::before { content: ""; position: absolute; width: 11px; height: 11px; background: inherit; border: inherit; border-width: 1px 0 0 1px; }
.fl-tip[data-side="b"]::before { top: -6.5px; left: calc(var(--ax, 50%) - 5.5px); transform: rotate(45deg); }
.fl-tip[data-side="t"]::before { bottom: -6.5px; left: calc(var(--ax, 50%) - 5.5px); transform: rotate(225deg); }
.fl-tip[data-side="r"]::before { left: -6.5px; top: calc(var(--ay, 50%) - 5.5px); transform: rotate(-45deg); }
.fl-tip[data-side="l"]::before { right: -6.5px; top: calc(var(--ay, 50%) - 5.5px); transform: rotate(135deg); }
.fl-tip-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0 0 6px; padding-right: 18px; }
.fl-tip-h b { font-size: 16px; font-weight: 800; line-height: 1.4; }
.fl-tip-h span { font-size: 12.5px; color: var(--ink-soft); }
.fl-tip-h.is-bad b { color: var(--fl-bad); }
.fl-tip-d { margin: 0; color: color-mix(in srgb, var(--ink) 88%, transparent); text-wrap: pretty; }
.fl-tip-r { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fl-tip-r li { padding: 7px 10px 8px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .08); font-size: 13.5px; line-height: 1.58; opacity: .5; text-wrap: pretty; transition: opacity .3s, border-color .3s, background-color .3s; }
.fl-tip-r em { display: block; margin-bottom: 1px; font-size: 12px; font-style: normal; font-weight: 800; }
.fl-tip-r li.is-off em { color: var(--fl-bad); }
.fl-tip-r li.is-on em { color: var(--fl-honey); }
.fl-tip-r li.is-now { opacity: 1; }
.fl-tip-r li.is-off.is-now { border-color: color-mix(in srgb, var(--fl-bad) 55%, transparent); background: color-mix(in srgb, var(--fl-bad) 9%, transparent); }
.fl-tip-r li.is-on.is-now { border-color: color-mix(in srgb, var(--fl-honey) 55%, transparent); background: color-mix(in srgb, var(--fl-honey) 9%, transparent); }
.fl-tip-use { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 9px; }
.fl-tip-use small { width: 100%; font-size: 11.5px; color: var(--ink-soft); }
.fl-chip { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--ink); font-size: 12px; font-weight: 600; line-height: 1.5; }
.fl-chip em { font-size: 10.5px; font-style: normal; font-weight: 700; color: var(--amber); white-space: nowrap; }
.fl-tip-x { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--ink); font: 400 20px/1 var(--font-body); cursor: pointer; }
.fl-tip-x:focus-visible { outline: 3px solid #F5D38A; outline-offset: 1px; }

/* 小框框裡的小動圖：沒有它（小人一個一個走掉、變紅）／有它（小人走進來、被接住） */
.fl-tip-sw { display: inline-flex; gap: 3px; margin-left: auto; padding: 2px; border-radius: 999px; background: rgba(255, 255, 255, .07); }
.fl-tip-sw i { padding: 1px 9px; border-radius: 999px; font: 800 11.5px/1.6 var(--font-body); font-style: normal; color: var(--ink-soft); transition: background-color .3s, color .3s; }
.fl-tip-sw i.is-off.is-now { background: var(--fl-bad); color: #2B0F0A; }
.fl-tip-sw i.is-on.is-now { background: var(--fl-honey); color: #241B0E; }
.fl-tip-h:has(.fl-tip-sw) { padding-right: 26px; align-items: center; }
.fl-sc { position: relative; height: 152px; margin: 2px 0 9px; border-radius: 12px; overflow: hidden;
  background: radial-gradient(80% 70% at 30% 0%, rgba(231, 201, 135, .14), transparent 70%), linear-gradient(180deg, #19191C, #0D0D0F); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.fl-tip-cap { min-height: 4.8em; margin: 0; font-size: 13px; line-height: 1.6; color: color-mix(in srgb, var(--ink) 88%, transparent); text-wrap: pretty; }
.fl-tip-cap em { display: block; font-size: 12px; font-style: normal; font-weight: 800; }
.fl-tip-cap.is-off em { color: var(--fl-bad); }
.fl-tip-cap.is-on em { color: var(--fl-honey); }
.sc { position: absolute; inset: 0; color: #1D1D1F; }
.sc * { box-sizing: border-box; }
.sc p { margin: 0; }
.sc-mock { position: absolute; left: 12px; top: 12px; bottom: 12px; width: 60%; display: grid; place-items: center; }
.sc-crowd { position: absolute; right: 12px; bottom: 20px; display: flex; gap: 3px; }
.sc-p { display: block; width: 13px; height: 18px; color: #EAD09A; }
.sc-p svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.sc-tag { position: absolute; right: 12px; top: 12px; padding: 1px 9px; border-radius: 999px; font: 800 11px/1.7 var(--font-body); opacity: 0; }
.sc.is-off .sc-tag { background: rgba(255, 159, 143, .16); color: #FF9F8F; animation: sc-tag .4s 2s var(--ease-out) forwards; }
.sc.is-on .sc-tag { background: rgba(234, 208, 154, .18); color: #EAD09A; animation: sc-tag .4s 2.2s var(--ease-out) forwards; }
.sc.is-off .sc-p { animation: sc-leave 2.2s calc(.5s + var(--i) * .22s) cubic-bezier(.45, 0, .75, .4) both; }
.sc.is-on .sc-p { animation: sc-come 1.5s calc(.35s + var(--i) * .12s) var(--ease-out) both; }
.sc-p svg { animation: sc-step .3s ease-in-out 8 alternate; }
.sc.is-on .sc-p svg { animation-delay: calc(.35s + var(--i) * .12s); }
.sc.is-off .sc-p svg { animation-delay: calc(.5s + var(--i) * .22s); }
@keyframes sc-leave { 0% { transform: none; color: #EAD09A; opacity: 1; } 18% { color: #FF9F8F; } 100% { transform: translateX(92px); color: #FF9F8F; opacity: 0; } }
@keyframes sc-come { 0% { transform: translateX(84px); opacity: 0; } 25% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes sc-step { to { transform: translateY(-1.6px); } }
@keyframes sc-tag { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes sc-in { from { opacity: 0; transform: translateY(5px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes sc-pulse { 0%, 100% { transform: none; box-shadow: 0 0 0 0 rgba(6, 199, 85, .5); } 50% { transform: scale(1.05); box-shadow: 0 0 0 5px rgba(6, 199, 85, .18); } }
/* 泡泡 */
.sc-b { max-width: 92%; padding: 3px 7px; border-radius: 8px; font: 700 8px/1.45 var(--font-body); }
.sc-b.is-you { justify-self: start; background: #FFFFFF; color: #1D1D1F; border-top-left-radius: 3px; box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }
.sc-b.is-me { justify-self: end; background: #06C755; color: #FFFFFF; border-top-right-radius: 3px; }
.sc-b.is-msg { background: #0A7CFF; color: #FFFFFF; border-top-right-radius: 3px; }
/* 官網：搜尋不到／網站 */
.sc-br { display: flex; flex-direction: column; width: 100%; height: 100%; border-radius: 9px; background: #FFFFFF; overflow: hidden; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .8); }
.sc-bar { display: flex; flex: none; align-items: center; gap: 3px; height: 16px; padding: 0 6px; background: #F1EFEA; }
.sc-bar i { width: 4px; height: 4px; border-radius: 50%; background: #D6D1C6; }
.sc-bar span { flex: 1; margin-left: 5px; padding: 0 6px; border-radius: 3px; background: #FFFFFF; color: #8B857A; font: 600 7.5px/11px var(--font-body); }
.sc-pg { position: relative; flex: 1; display: grid; align-content: start; gap: 4px; padding: 6px 7px; }
.sc-q { padding: 1px 7px; border-radius: 99px; border: 1px solid #DDD8CD; font: 600 8px/1.6 var(--font-body); color: #3A3A3E; }
.sc-none { font: 800 9px/1.4 var(--font-body); color: #D9534F; }
.sc-res { display: grid; padding: 3px 6px; border-radius: 5px; background: #F6F3EC; }
.sc-res b { font: 800 8px/1.45 var(--font-body); color: #2A6CC0; }
.sc-res span { font: 600 7px/1.4 var(--font-body); color: #6E6A63; }
.sc-res.is-dim { opacity: .55; }
.sc-hero { position: relative; height: 30px; border-radius: 6px; background: linear-gradient(120deg, #1D1D1F, #3A3020); }
.sc-hero b { position: absolute; left: 6px; top: 7px; width: 55%; height: 5px; border-radius: 3px; background: #EAD09A; }
.sc-hero small { position: absolute; left: 6px; top: 16px; width: 35%; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .5); }
.sc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.sc-cards i { height: 20px; border-radius: 4px; background: #EFE9DD; }
.sc-lines { display: grid; gap: 3px; }
.sc-lines i { height: 4px; border-radius: 2px; background: #ECEAE4; }
.sc-lines i:nth-child(2) { width: 70%; }
.sc-cta { position: absolute; left: 7px; right: 7px; bottom: 5px; height: 14px; border-radius: 7px; background: #06C755; color: #FFFFFF; font: 800 7.5px/14px var(--font-body); text-align: center; }
.sc.is-on .sc-hero { animation: sc-in .45s .1s var(--ease-out) both; }
.sc.is-on .sc-cards i { animation: sc-in .45s calc(.3s + var(--n, 0) * .1s) var(--ease-out) both; }
.sc.is-on .sc-cards i:nth-child(2) { --n: 1; } .sc.is-on .sc-cards i:nth-child(3) { --n: 2; }
.sc.is-on .sc-lines { animation: sc-in .45s .6s var(--ease-out) both; }
.sc.is-on .sc-cta { animation: sc-in .4s .8s var(--ease-out) both, sc-pulse 1s 1.5s ease-in-out 2; }
/* 粉絲專頁：三年前的貼文／最新的短影音 */
.sc-fb { position: relative; display: grid; gap: 4px; width: 136px; padding: 6px; border-radius: 9px; background: #FFFFFF; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .8); }
.sc-fh { display: flex; align-items: center; gap: 4px; }
.sc-av { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #62BEEB; }
.sc-fh span, .sc-row span { display: grid; gap: 2px; }
.sc-fh b { width: 46px; height: 4px; border-radius: 2px; background: #3A3A3E; }
.sc-fh small { font: 700 6.5px/1.2 var(--font-body); color: #8B857A; }
.sc-fimg { height: 48px; border-radius: 6px; background: #E4E1DA; }
.sc-fimg.is-video { display: grid; place-items: center; background: linear-gradient(135deg, #CFE6F5, #EAD09A); }
.sc-play { position: relative; width: 16px; height: 16px; border-radius: 50%; background: rgba(255, 255, 255, .9); }
.sc-play::after { content: ""; position: absolute; left: 6px; top: 4.5px; border-left: 6px solid #1D1D1F; border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent; }
.sc-fact { display: flex; align-items: center; justify-content: space-between; font: 700 7px/1 var(--font-body); color: #6E6A63; }
.sc-fact svg { width: 8px; height: 8px; margin-right: 2px; fill: #F2557A; vertical-align: -1px; }
.sc-like { display: inline-flex; align-items: center; color: #1D1D1F; }
.sc-cnt { display: inline-block; height: 1.2em; overflow: hidden; }
.sc-cnt i { display: block; font-style: normal; line-height: 1.2em; }
.sc.is-on .sc-cnt i { animation: sc-cnt 1.6s .5s steps(1, end) both; }
@keyframes sc-cnt { 0% { transform: none; } 40% { transform: translateY(-100%); } 80%, 100% { transform: translateY(-200%); } }
.sc-fb .sc-b { position: absolute; white-space: nowrap; }
.sc-c1 { left: -20px; bottom: 16px; }
.sc-c2 { right: -30px; bottom: -9px; }
.sc.is-on .sc-c1 { animation: sc-in .4s 1s var(--ease-out) both; }
.sc.is-on .sc-c2 { animation: sc-in .4s 1.6s var(--ease-out) both; }
.sc-fb.is-old .sc-av { background: #BDBDBD; }
.sc-fb.is-old small, .sc-list.is-old small { color: #D9534F; }
/* LINE：已讀不回／自動回應 */
.sc-ph { position: relative; width: 116px; height: 100%; border: 2.5px solid #1D1D1F; border-radius: 16px; background: #D9E4DC; overflow: hidden; }
.sc-pt { display: flex; align-items: center; gap: 4px; height: 17px; padding: 0 7px; background: #1D1D1F; color: #FFFFFF; font: 700 7.5px/1 var(--font-body); }
.sc-pt i { width: 8px; height: 8px; border-radius: 50%; background: #E7C987; }
.sc-chat { display: grid; gap: 5px; padding: 7px 5px; }
.sc-wait { justify-self: end; font: 800 7px/1.4 var(--font-body); color: #D9534F; }
.sc-menu { position: absolute; left: 4px; right: 4px; bottom: 4px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 2px; border-radius: 5px; background: #FFFFFF; }
.sc-menu i { height: 11px; border-radius: 3px; background: #E6EDE8; }
.sc.is-on .sc-2 { animation: sc-in .4s .8s var(--ease-out) both; }
.sc.is-on .sc-hit { animation: sc-hit 1.4s 1.4s ease-in-out both; }
@keyframes sc-hit { 0%, 100% { background: #E6EDE8; } 20%, 80% { background: #E7C987; transform: scale(1.08); } }
.sc.is-off .sc-wait { animation: sc-in .4s .6s var(--ease-out) both; }
/* 私域經營：沒人聯絡／貼標籤、提醒 */
.sc-list { position: relative; display: grid; gap: 5px; width: 100%; padding: 7px 8px; border-radius: 9px; background: #FFFFFF; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .8); }
.sc-lh { font: 800 7.5px/1.3 var(--font-body); color: #6E6A63; }
.sc-row { display: flex; align-items: center; gap: 5px; }
.sc-row b { width: 40px; height: 4px; border-radius: 2px; background: #3A3A3E; }
.sc-row small { font: 700 6.5px/1.2 var(--font-body); }
.sc-row em { display: flex; gap: 2px; font-style: normal; }
.sc-row u { padding: 0 4px; border-radius: 99px; background: #F5E7C8; color: #7E6340; font: 800 6.5px/1.6 var(--font-body); text-decoration: none; }
.sc.is-on .sc-row em { animation: sc-in .35s calc(.3s + var(--k) * .25s) var(--ease-out) both; }
.sc-rem { position: absolute; right: -20px; bottom: -10px; white-space: nowrap; }
.sc.is-on .sc-rem { animation: sc-in .4s 1.3s var(--ease-out) both; }
.sc-list.is-old .sc-av { background: #BDBDBD; }

/* 溝通時間試算（v31）：接在分流圖下面。
   最大的是「一年省下多少小時」＋節約時間的曲線；「預估每月多賺」放在香檳金的框（跟最下面「立即預約」那塊同一種金：.cta 的漸層）。
   拉桿做小：數字是我們先估好的，拉一拉換成自己的（拉到最右邊放手，範圍變大）。
   捲到的時候：數字從 0 跳上來（why.js）、兩條線畫出來、塗色的「省下的時間」淡進來、金框浮上來再掃一道光 */
.fl-roi { display: grid; gap: 16px; max-width: 1040px; margin: 26px auto 0; padding: 22px 24px 22px; }
.tc-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; }
.tc-h h3 { margin: 0; font-size: 20px; color: var(--band-fg); text-wrap: balance; }
.tc-h small { font-size: 12px; letter-spacing: .01em; color: var(--band-soft); }

/* 五根小拉桿：一排五個（平板 3＋2、手機 2＋2＋1，都對齊） */
.tc-ctl { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px 18px; padding: 10px 16px 6px; border-radius: 16px; background: rgba(255, 255, 255, .025); border: 1px solid var(--band-rule); }
.tc-s { display: grid; gap: 0; min-width: 0; cursor: pointer; }
.tc-l { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--band-soft); white-space: nowrap; }
.tc-l output { font: 700 14px/1.4 var(--font-num); letter-spacing: -.01em; color: var(--band-fg); }
.tc-in.range { height: 24px; margin: 0; }
.tc-in.range::-webkit-slider-runnable-track { height: 4px; }
.tc-in.range::-moz-range-track, .tc-in.range::-moz-range-progress { height: 4px; }
.tc-in.range::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: -6px; background: #fff; box-shadow: 0 0 0 2px var(--honey), 0 2px 6px rgba(0, 0, 0, .5); }
.tc-in.range::-moz-range-thumb { width: 14px; height: 14px; background: #fff; box-shadow: 0 0 0 2px var(--honey), 0 2px 6px rgba(0, 0, 0, .5); }
@media (hover: hover) and (pointer: fine) {
  .tc-in.range:hover::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--honey), 0 0 0 6px color-mix(in srgb, var(--honey) 22%, transparent), 0 2px 6px rgba(0, 0, 0, .5); }
  .tc-in.range:hover::-moz-range-thumb { box-shadow: 0 0 0 2px var(--honey), 0 0 0 6px color-mix(in srgb, var(--honey) 22%, transparent), 0 2px 6px rgba(0, 0, 0, .5); }
}
.tc-in.range:active::-webkit-slider-thumb { transform: scale(1.15); }
.tc-in.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--honey), 0 0 0 6px color-mix(in srgb, var(--honey) 55%, transparent); }
.tc-in.range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--honey), 0 0 0 6px color-mix(in srgb, var(--honey) 55%, transparent); }
@media (pointer: coarse) { .tc-in.range { height: 32px; } }

/* 結果（左）＋曲線（右） */
.tc-body { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 18px 26px; align-items: stretch; }
.tc-res { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tc-k { margin: 0; font-size: 15px; font-weight: 700; color: var(--band-soft); }
.tc-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; }
.tc-big b { font: 800 clamp(56px, 6.4vw, 82px)/1 var(--font-num); letter-spacing: -.045em; color: var(--honey); filter: var(--num-glow); }
.tc-big span { font-size: 20px; font-weight: 700; color: var(--band-fg); }
/* 數字很長（範圍一直放大）：字縮小，不衝出左邊那一欄 */
.tc-big[data-len="l"] b { font-size: clamp(46px, 5.2vw, 66px); }
.tc-big[data-len="xl"] b { font-size: clamp(38px, 4.1vw, 52px); }
.tc-big[data-len="xxl"] b { font-size: clamp(32px, 3.4vw, 42px); }
.tc-gm[data-len="l"] b { font-size: clamp(30px, 3.2vw, 38px); }
.tc-gm[data-len="xl"] b { font-size: clamp(26px, 2.7vw, 32px); }
.tc-sub { margin: 4px 0 14px; font-size: 13px; line-height: 1.6; color: var(--band-soft); text-wrap: pretty; }
.tc-sub .nb, .tc-gs .nb { max-width: 100%; }
.tc-gold { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 3px; margin-top: auto; padding: 15px 18px 15px; border-radius: 18px;
  background: linear-gradient(110deg, #E7C987, #F5E1B3 48%, #ECD098); color: var(--on-honey);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 0 0 1px rgba(255, 246, 226, .18), 0 18px 44px -20px rgba(234, 208, 154, .6); }
.tc-gl { margin: 0; font-size: 14px; font-weight: 800; }
.tc-gm { margin: 0; }
.tc-gm b { font: 900 clamp(36px, 3.8vw, 46px)/1.05 var(--font-num); letter-spacing: -.035em; }
.tc-gs { margin: 2px 0 0; font-size: 12.5px; line-height: 1.6; color: color-mix(in srgb, var(--on-honey) 76%, transparent); text-wrap: pretty; }
.tc-gs b { font-weight: 800; color: var(--on-honey); }
.tc-gold::after { content: ""; position: absolute; z-index: -1; top: -30%; bottom: -30%; left: -50%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75) 50%, transparent); transform: skewX(-18deg); opacity: 0; pointer-events: none; }

/* 曲線：跟整包「四個版本，差在做多少」那張同一種樣子——虛線格線、等寬字刻度、兩條線都有光暈、中間由上往下淡掉的金色、深底金框的標籤 */
.tc-chart { position: relative; min-width: 0; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize; }
.tc-chart svg { display: block; width: 100%; overflow: visible; }
.wc-grid { stroke: rgba(255, 255, 255, .09); stroke-width: 1; stroke-dasharray: 3 5; }
.wc-base { stroke: rgba(255, 255, 255, .3); stroke-width: 1; }
.wc-tick { fill: #8E8E96; font: 500 11px var(--font-mono); letter-spacing: .02em; }
.wc-axis { fill: #8E8E96; font: 500 10.5px var(--font-mono); letter-spacing: .04em; }
.wc-gap { fill: url(#tc-gap-g); }
.wc-off, .wc-on, .wc-glow, .wc-seg, .wc-sglow { fill: none; stroke-linecap: round; pointer-events: none; }
.wc-glow { stroke-width: 10; }
.wc-glow.is-off { stroke: #FF9F8F; opacity: .3; }
.wc-glow.is-on { stroke: var(--honey); opacity: .5; }
.wc-sglow { stroke: var(--honey); stroke-width: 12; opacity: .55; }
.wc-off { stroke: #FF9F8F; stroke-width: 2.4; }
.wc-on { stroke: var(--honey); stroke-width: 2.6; }
.wc-seg { stroke: #FFF3CF; stroke-width: 3.2; }
.wc-end { font: 700 12.5px var(--font-body); }
.wc-end.is-off { fill: #FF9F8F; }
.wc-end.is-on { fill: var(--honey); }
.wc-cur { stroke: rgba(255, 255, 255, .34); stroke-width: 1; stroke-dasharray: 2 4; }
.wc-rail { stroke: rgba(255, 255, 255, .1); stroke-width: 4; stroke-linecap: round; }   /* 白點走的軌道（橫軸下面） */
.wc-br { fill: none; stroke: color-mix(in srgb, var(--honey) 80%, transparent); stroke-width: 1.5; }
/* 「省下 X 小時」：深底金框的小標籤（跟整包曲線上「多 $14 萬，多 24 項」那個一樣） */
.wc-pill { position: absolute; z-index: 1; transform: translateY(-50%); padding: 3px 11px; border-radius: 999px; background: rgba(12, 12, 14, .92); border: 1px solid color-mix(in srgb, var(--honey) 55%, transparent);
  color: #EFCC8E; font: 700 12.5px/1.5 var(--font-body); white-space: nowrap; pointer-events: none; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .9); }
.wc-pill.is-l { transform: translate(-100%, -50%); }
.wc-pill.is-up { transform: translate(-50%, -100%); }
.wc-pill b { font: 800 13.5px var(--font-num); letter-spacing: -.01em; color: var(--honey); }
/* 拖得動的三個點：紅點（沒有系統）、金點（有系統）上下拖；橫軸上的白點左右拖 */
.wc-h { position: absolute; z-index: 2; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; cursor: ns-resize; touch-action: none; }
.wc-h::after { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: var(--honey); box-shadow: 0 0 0 2.5px var(--band-2), 0 0 12px color-mix(in srgb, var(--honey) 70%, transparent); transition: transform .2s var(--ease-out); }
.wc-h.is-m::after { background: #FF9F8F; box-shadow: 0 0 0 2.5px var(--band-2), 0 0 12px rgba(255, 159, 143, .6); }
.wc-h.is-n { cursor: ew-resize; touch-action: pan-y; }
.wc-h.is-n::after { inset: 10px; background: #FFFFFF; box-shadow: 0 0 0 3px var(--honey), 0 0 14px color-mix(in srgb, var(--honey) 75%, transparent); }
.wc-h::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; border: 1.5px solid var(--honey); opacity: 0; pointer-events: none; }
.wc-h.is-m::before { border-color: #FF9F8F; }
.wc-h:hover::after, .tc-chart.is-drag-m .wc-h.is-m::after, .tc-chart.is-drag-t .wc-h.is-t::after, .tc-chart.is-drag-n .wc-h.is-n::after { transform: scale(1.3); }
.tc-chart.is-drag-m, .tc-chart.is-drag-t { cursor: ns-resize; }
@media (pointer: coarse) {
  .wc-h { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  .wc-h::after { inset: 16px; } .wc-h.is-n::after { inset: 15px; } .wc-h::before { inset: 13px; }
}
.wc-leg { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 2px 4px 0; font-size: 12px; color: var(--band-soft); }
.wc-leg span { display: inline-flex; align-items: center; gap: 6px; }
.wc-leg span::before { content: ""; width: 14px; height: 3px; border-radius: 2px; background: currentColor; }
.wc-leg .is-off { color: #FF9F8F; }
.wc-leg .is-on { color: var(--honey); }
.wc-leg .is-gap { color: var(--band-soft); }
.wc-leg .is-gap::before { height: 10px; border-radius: 3px; background: linear-gradient(color-mix(in srgb, var(--honey) 40%, transparent), color-mix(in srgb, var(--honey) 8%, transparent)); }

/* 捲到才播：is-pre＝還沒捲到（先藏好）、is-go＝正在播（線畫出來 → 光暈、漸層淡進來 → 標籤、三個點出來 → 紅點、金點閃兩下：拖得動） */
.fl-roi.is-pre .wc-off, .fl-roi.is-pre .wc-on { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.fl-roi.is-pre :is(.wc-gap, .wc-glow, .wc-seg, .wc-sglow, .wc-cur, .wc-rail, .wc-br, .wc-end, .wc-pill, .wc-h) { opacity: 0; }
.fl-roi.is-pre .tc-gold { opacity: 0; transform: translateY(12px); }
.fl-roi.is-go .wc-off, .fl-roi.is-go .wc-on { stroke-dasharray: 1 1; animation: wc-draw 1.25s .15s var(--ease-out) both; }
.fl-roi.is-go .wc-on { animation-delay: .35s; }
.fl-roi.is-go :is(.wc-gap, .wc-glow) { animation: wc-fade .8s 1s var(--ease-out) both; }
.fl-roi.is-go :is(.wc-seg, .wc-sglow, .wc-cur, .wc-rail, .wc-br, .wc-end, .wc-pill, .wc-h) { animation: wc-fade .45s 1.35s var(--ease-out) both; }
.fl-roi.is-go .wc-h:not(.is-n)::before { animation: wc-ping 1.1s 2.2s var(--ease-out) 2; }
.fl-roi.is-go .tc-gold { animation: tc-rise .6s .55s var(--ease-out) both; }
.fl-roi.is-go .tc-gold::after { animation: tc-shine 1.25s 1.25s var(--ease-out) both; }
@keyframes wc-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes wc-fade { from { opacity: 0; } }
@keyframes wc-ping { 0% { opacity: .95; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes tc-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes tc-shine { 0% { opacity: 0; transform: skewX(-18deg) translateX(0); } 18% { opacity: 1; } 100% { opacity: 0; transform: skewX(-18deg) translateX(420%); } }

@media (max-width: 899.98px) {
  .tc-ctl { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tc-s { grid-column: span 2; }
  .tc-s:nth-child(n+4) { grid-column: span 3; }
}
@media (max-width: 759.98px) {
  .tc-body { grid-template-columns: minmax(0, 1fr); }
  .tc-gold { margin-top: 0; }
}
@media (max-width: 559.98px) {
  .fl-roi { gap: 14px; padding: 18px 14px 16px; }
  .tc-h h3 { font-size: 18px; }
  .tc-ctl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; padding: 8px 12px 4px; }
  .tc-s, .tc-s:nth-child(n+4) { grid-column: auto; }
  .tc-s:last-child { grid-column: 1 / -1; }
  .tc-l { font-size: 12px; }
  .tc-l output { font-size: 13.5px; }
  .tc-gold { padding: 14px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .fl-lp, .fl-x.is-live .fl-xb { animation: none !important; }
  .fl-e, .fl-n, .fl-hx, .fl-ic, .fl-x, .fl-tip, .fl-tip-r li { transition: none !important; }
  .sc *, .sc-p, .sc-p svg { animation: none !important; }
  .sc.is-off .sc-p { opacity: .35; color: #FF9F8F; }
  .fl-roi :is(.wc-off, .wc-on, .wc-gap, .wc-glow, .wc-seg, .wc-sglow, .wc-cur, .wc-br, .wc-end, .wc-pill, .wc-h, .tc-gold), .fl-roi .tc-gold::after, .fl-roi .wc-h::before { animation: none !important; }
  .wc-h::after { transition: none; }
  .sc-tag { opacity: 1; }
}