/* 蜂窩行銷｜官網前台：蘋果式留白，每一區都回答「做了什麼 → 同樣的錢客人變多 → 換算成錢省多少」
   所有數字都畫成圖：長條、柱子、折線、點；捲到才長出來（html.viz 有動畫時，還沒捲到的圖先收起來） */
:root { --head-h: 52px; --shadow-lift: 0 2px 8px rgba(0, 0, 0, .05), 0 28px 54px -22px rgba(0, 0, 0, .3); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 70; background: var(--wax); }

.sec-in, .head-in, .hero-in, .foot-in, .cta-in {
  max-width: var(--wrap); margin: 0 auto; padding-left: var(--gl); padding-right: var(--gr);
}
.sec { padding-block: clamp(64px, 9vw, 120px); }
.sec-alt { background: var(--wax-2); }
.sec-head { max-width: 780px; margin-bottom: clamp(28px, 4vw, 48px); }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head h2 { font-size: clamp(32px, 4.8vw, 56px); font-weight: 800; letter-spacing: -.005em; margin-bottom: 14px; }
.sec-head p { color: var(--ink-soft); font-size: clamp(16.5px, 1.5vw, 19px); text-wrap: pretty; }
.sec-head .seg { margin-top: 24px; }
.center { text-align: center; }
.fine { margin-top: 18px; font-size: 13px; color: var(--ink-faint); }

/* 共用：影片縮圖上的播放鍵、品牌頭像 */
.play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .38)); pointer-events: none; }
.play .ico { width: 24px; height: 24px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5)); }
.av { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; background: var(--comb); color: var(--amber); font: 800 11px/1 var(--font-body); }
.av img { display: block; width: 100%; height: 100%; object-fit: cover; }
.av.is-mono span { white-space: nowrap; letter-spacing: -.02em; }
.av-sm { width: 26px; height: 26px; font-size: 10px; }

/* 公告列 */
.notice { padding: 9px var(--gr) 9px var(--gl); background: var(--honey); color: var(--on-honey); text-align: center; font-weight: 700; font-size: 14px; }

/* 導覽列（毛玻璃） */
.site-head {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 60;
  background: color-mix(in srgb, var(--wax) 78%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 70%, transparent);
}
.head-in { height: var(--head-h); display: flex; align-items: center; gap: 18px; position: relative; }
.brand { display: flex; align-items: center; color: var(--ink); text-decoration: none; flex: none; }
.brand svg { height: 30px; width: auto; display: block; }
.nav { display: flex; gap: 2px; margin: 0 auto; }
.nav a { padding: 6px 11px; border-radius: 999px; color: var(--ink-soft); font-size: 14px; text-decoration: none; white-space: nowrap; transition: color .2s; }
.nav a:hover { color: var(--ink); }
.site-head { transition: background-color .35s, border-color .35s; }
.site-head .brand, .site-head .nav a, .site-head .menu-btn { transition: color .35s; }
.site-head.on-dark { background: color-mix(in srgb, var(--band) 72%, transparent); border-bottom-color: color-mix(in srgb, var(--band-rule) 80%, transparent); }
.site-head.on-dark .brand { color: var(--band-fg); }
.site-head.on-dark .menu-btn { color: var(--band-fg); background: var(--band-3); border-color: var(--band-rule); }
.site-head.on-dark .nav a { color: var(--band-soft); }
.site-head.on-dark .nav a:hover { color: var(--band-fg); }
.head-cta { min-height: 34px; padding: 0 1em; font-size: 14px; }
.menu-btn { display: none; width: 36px; height: 36px; }
@media (max-width: 1000px) {
  .nav { display: none; }
  .head-cta { margin-left: auto; }
  .menu-btn { display: inline-grid; }
  .nav.is-open {
    display: flex; flex-direction: column; gap: 2px; position: absolute; top: var(--head-h); left: 0; right: 0; margin: 0;
    padding: 10px var(--gr) 18px var(--gl); background: var(--wax); border-bottom: 1px solid var(--rule); box-shadow: var(--shadow);
  }
  .site-head.on-dark .nav.is-open { background: var(--band-2); border-bottom-color: var(--band-rule); }
  .nav.is-open a { padding: 12px 14px; font-size: 16px; }
  /* 打開選單：選單蓋在段落捷徑那一排上面，那一排先收起來（不會兩組一樣的連結疊在一起） */
  .nav.is-open { z-index: 3; }
  .site-head:has(.nav.is-open) .subnav { visibility: hidden; }
}

/* ---------- 首屏：蘋果式置中留白。一句話、兩條長條、省下的總額 ---------- */
.hero { padding-block: clamp(44px, 7vw, 104px) 0; text-align: center; }
.hero-in { display: grid; justify-items: center; }
.hero-title { max-width: 14em; margin: 0; font-size: clamp(40px, 7.2vw, 88px); font-weight: 700; line-height: 1.1; letter-spacing: -.015em; }
.hero-title .hl { display: block; }
.hero-title b { font-weight: 700; }
.hero-sub { max-width: 30em; text-wrap: balance; margin-top: clamp(16px, 2vw, 22px); color: var(--ink-soft); font-size: clamp(17px, 1.8vw, 21px); line-height: 1.6; text-wrap: pretty; }
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 28px; margin-top: 30px; }
.hero-cta .btn { min-height: 50px; padding: 0 1.6em; font-size: 17px; }
.hero-cta .link-chev { font-size: 17px; }
/* 兩條長條：一般行情 vs 蜂窩平均 */
.hero-viz { width: min(100%, 780px); margin: clamp(44px, 6vw, 72px) 0 0; }
.hv-rows { display: grid; gap: 14px; }
.hv-row { display: grid; grid-template-columns: 5.4em minmax(0, 1fr) 4.2em; align-items: center; gap: 14px; text-align: left; }
.hv-l { font-size: 15px; font-weight: 600; color: var(--ink-soft); }
.hv-t { position: relative; display: block; height: 28px; border-radius: 12px; }
.hv-t i { --hc: color-mix(in srgb, var(--ink) 34%, var(--wax)); position: relative; display: block; width: calc(var(--w) * 100%); min-width: 8px; height: 100%; border-radius: 12px; overflow: hidden; background: var(--lt-bar); transition: width 1.2s var(--ease-out) .15s; }
.hv-row.is-us .hv-t i { --hc: var(--honey); transition-delay: .45s; box-shadow: -2px 8px 22px -12px var(--honey); }
.hv-v { font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; letter-spacing: -.02em; text-align: right; }
.hv-row.is-them .hv-v { color: var(--ink-soft); }
.hero-viz figcaption { margin-top: 14px; font-size: 13px; color: var(--ink-faint); }
.viz .hero-viz:not(.is-on) .hv-t i { width: 0; }
/* 3 年的總數：兩張黑卡（跟試算同一套）。左：同樣的廣告費找到幾位客人——巨大的「×3.5」＋蜂巢格子長條（一格 100 位，蜂窩那條長出 3 倍多）；
   右：一共省下多少——照行情要花的 vs 實際花的兩條長條、省下幾 % */
.hero-band { width: 100%; margin-top: clamp(48px, 6vw, 80px); padding-block: clamp(40px, 5vw, 68px); background: var(--wax-2); }
.hb-in { display: grid; justify-items: center; gap: 18px; max-width: 1120px; margin: 0 auto; padding-left: var(--gl); padding-right: var(--gr); }
.hb-k { max-width: 36em; font-size: clamp(17px, 2vw, 22px); font-weight: 600; color: var(--ink-soft); text-wrap: balance; }
.hb-k b { color: var(--ink); font-weight: 800; }
.hb-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; width: 100%; text-align: left; }
.hb-blk { --ink: #F5F5F7; --ink-soft: #A1A1A6; --ink-faint: #6E6E73; --wax: #0C0C0E;
  position: relative; display: grid; gap: 14px; align-content: start; min-width: 0; padding: clamp(20px, 2.6vw, 30px); border-radius: 28px; color: var(--ink);
  border: 1px solid rgba(255, 255, 255, .08);
  background: radial-gradient(110% 60% at 0% 0%, rgba(235, 200, 126, .13), transparent 58%), linear-gradient(180deg, #141416, #070708 72%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 60px -34px rgba(0, 0, 0, .5); }
.hb-l { font-size: 15px; font-weight: 700; color: var(--ink-soft); }
.hb-v { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: clamp(44px, 6.2vw, 76px); font-weight: 800; line-height: 1.02; letter-spacing: -.035em; color: var(--honey); filter: drop-shadow(0 0 22px rgba(235, 200, 126, .28)); }
/* 倍數：最大的字 */
.hb-x { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.hb-times { font: 800 clamp(72px, 9vw, 120px)/.86 var(--font-num); letter-spacing: -.05em; color: var(--honey); filter: drop-shadow(0 0 26px rgba(235, 200, 126, .36)); }
.hb-x > span { font-size: 15px; line-height: 1.65; color: var(--ink-soft); }
.hb-x > span b { font-size: 19px; font-weight: 800; color: var(--ink); }
/* 蜂巢格子長條 */
.hh { display: grid; gap: 12px; margin-top: 2px; }
.hh-row { display: grid; grid-template-columns: 5.6em minmax(0, 1fr); align-items: center; gap: 12px; }
.hh-l { display: grid; font-size: 12.5px; line-height: 1.35; color: var(--ink-soft); }
.hh-l b { font: 700 16px/1.25 var(--font-num); color: var(--ink); white-space: nowrap; }
.hh-row.is-us .hh-l b { color: var(--honey); }
.hh-track { display: block; min-width: 0; }
.hh-svg { display: block; height: auto; max-width: 100%; overflow: visible; clip-path: inset(-4px -4px -4px -4px); transition: clip-path 1.5s cubic-bezier(.2, .8, .2, 1) .25s; }
.hh-row.is-us .hh-svg { transition-duration: 2.3s; transition-delay: .65s; filter: drop-shadow(0 0 7px rgba(235, 200, 126, .4)); }
.viz .hero-band:not(.is-on) .hh-svg { clip-path: inset(-4px 100% -4px -4px); }
.hh-row.is-them .hh-c { fill: #5E5E66; }
.hh-row.is-us .hh-c { fill: var(--honey); }
.hh-tw { fill: #FFF3C4; opacity: 0; }
.hero-band.is-live.is-on .hh-tw { animation: hh-tw 3.6s ease-in-out infinite; animation-delay: calc(var(--d) + 3s); }
@keyframes hh-tw { 0%, 100% { opacity: 0; } 45% { opacity: .95; } }
/* 一道斜斜的光從左刷到右（只亮在格子上），停一下再刷一次；兩排用同一把尺，光一起掃過去 */
.hero-band.is-live.is-on .hh-sw { animation: hh-sweep 4.4s cubic-bezier(.5, 0, .3, 1) 2.4s infinite; }
@keyframes hh-sweep { 0% { transform: translateX(0); } 42%, 100% { transform: translateX(var(--sw)); } }
.hh-row.is-them .hh-sw rect { opacity: .6; }
@media (prefers-reduced-motion: reduce) { .hh-tw { animation: none !important; } .hh-sw { display: none; } }
.hh-unit { display: flex; align-items: center; gap: 7px; margin: 0; font: 500 11.5px var(--font-mono); color: var(--ink-faint); }
.hh-unit i { width: 10px; height: 11.5px; background: var(--honey); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
/* 省下多少：照行情要花（灰，整條）vs 實際花（蜂蜜色，短） */
.hb-mb { display: grid; gap: 12px; }
.mb-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l v" "b b"; align-items: baseline; gap: 6px 12px; font-size: 13.5px; color: var(--ink-soft); }
.mb-row > span { grid-area: l; font-weight: 600; }
.mb-row > b { grid-area: v; font: 700 17px var(--font-num); color: var(--ink); }
.mb-row.is-us > b { color: var(--honey); }
.mb-row > i { --hc: #6B6B73; grid-area: b; position: relative; display: block; width: calc(var(--w) * 100%); min-width: 10px; height: 28px; border-radius: 10px; overflow: hidden;
  background: linear-gradient(90deg, var(--hc) 0%, color-mix(in srgb, var(--hc) 92%, #000) 26%, color-mix(in srgb, var(--hc) 66%, #000) 56%, color-mix(in srgb, var(--hc) 30%, #000) 82%, rgba(0, 0, 0, 0) 100%);
  transition: width 1.2s var(--ease-out) .2s; }
.mb-row.is-us > i { --hc: var(--honey); box-shadow: -2px 0 22px -6px rgba(235, 200, 126, .75); transition-delay: .6s; }
.mb-row.is-us > i::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(100deg, transparent 10%, rgba(255, 255, 255, .55) 50%, transparent 90%); transform: translateX(-130%); }
.hero-band.is-live.is-on .mb-row.is-us > i::before { animation: bar-shine 4.6s cubic-bezier(.5, 0, .3, 1) 2.2s infinite; }
.viz .hero-band:not(.is-on) .mb-row > i { width: 0; }
.hb-pct { display: flex; align-items: baseline; gap: 10px; margin: 2px 0 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .09); font-size: 15px; color: var(--ink-soft); }
.hb-pct b { font: 800 clamp(34px, 3.8vw, 46px)/1 var(--font-num); letter-spacing: -.03em; color: var(--ink); }
@media (min-width: 860px) { .hb-two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
@media (max-width: 520px) {
  .hv-row { grid-template-columns: 4.8em minmax(0, 1fr) 3.6em; gap: 10px; }
  .hv-l { font-size: 14px; }
  .hv-t { height: 18px; }
}

/* ---------- 首屏合作過的客戶（Cerebrium 的做法）：一行「合作過幾個客戶」，下面蜂巢點陣 ----------
   點陣每格中間一個小點；滑鼠滑過的格子跳出 logo（0.2 秒長出來），淡掉比較慢；logo 都切自同一張合成圖。v23：上面那排滾動的 logo 拿掉 */
.hero-dots {
  /* v23：跳出來的 logo＝毛玻璃磚：顏色收淡（降飽和、帶一點暖色）、邊緣微微虛化，上面蓋一層半透明的白（左上亮一點，像玻璃的反光）；
     跟淺色、蜂蜜色的首屏融在一起，還認得出是哪個客戶。滑鼠劃過的那幾格清楚一點 */
  --hd-veil: linear-gradient(160deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .14) 50%, rgba(255, 246, 228, .3));
  --hd-fx: saturate(.32) sepia(.12) contrast(.9) brightness(1.03) blur(.6px);
  --hd-fx-on: saturate(.62) sepia(.06) contrast(.96) brightness(1.01) blur(0px);
  --hd-op: .86; --hd-shadow: rgba(120, 88, 36, .14);
  --cols: 20; --rows: 5;
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); width: 100%;
  margin-top: clamp(2px, .8vw, 10px); padding-left: var(--gl); padding-right: var(--gr);
  padding-block: calc((100% - 32px) / var(--cols) * .15);   /* 最上、最下一列的六角形尖角會超出格子，留位置給它（不然會被左右淡出的遮罩切掉） */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  touch-action: pan-y;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero-dots { --hd-veil: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03) 50%, rgba(234, 208, 154, .08)); --hd-fx: saturate(.3) sepia(.1) contrast(.86) brightness(.72) blur(.6px); --hd-fx-on: saturate(.6) contrast(.92) brightness(.82) blur(0px); --hd-op: .78; --hd-shadow: rgba(0, 0, 0, .35); } }
:root[data-theme="dark"] .hero-dots { --hd-veil: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03) 50%, rgba(234, 208, 154, .08)); --hd-fx: saturate(.3) sepia(.1) contrast(.86) brightness(.72) blur(.6px); --hd-fx-on: saturate(.6) contrast(.92) brightness(.82) blur(0px); --hd-op: .78; --hd-shadow: rgba(0, 0, 0, .35); }
/* 蜂巢：奇數列往右錯開半格（像蜂巢的排法），每格中間一個小六角形；滑過跳出來的 logo 也是六角形 */
/* 真的蜂巢：一列的高度＝六角形高度的 3/4，上下兩列卡在一起；每格一片淡淡的六角形（中間留一點縫），像 3 年那塊的蜂巢格子 */
.hd-c { position: relative; aspect-ratio: 1 / .866; transform: translateX(-25%); }
.hd-c.is-odd { transform: translateX(25%); }   /* v25：雙數列往左 1/4 格、單數列往右 1/4 格，左右兩邊缺的一樣多（之前單數列往右半格，左邊比較空） */
/* v20：蜂巢跟上面的光波接成一片：最上面一列很淡、帶一點蜂蜜色（接住淡下來的光波），越往下越清楚、越接近原本的灰，最下面一列再淡一點收掉。
   --r＝第幾列（0 最上面、1 最下面，cases.js 建格子時給）；只淡掉格子的底色，跳出來的 logo 不受影響 */
.hd-c::after { content: ""; position: absolute; left: 1.5px; right: 1.5px; top: calc(-16.67% + 1.5px); bottom: calc(-16.67% + 1.5px);
  background: color-mix(in srgb, color-mix(in srgb, #B08A4C calc((1 - var(--r, 1)) * 85%), var(--ink)) calc(5.5% + (1 - var(--r, 1)) * 2%), transparent);
  opacity: calc(min(1, .3 + var(--r, 1) * 1.3) * (1 - max(0, var(--r, 1) - .75) * 1.2));
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); transition: opacity .35s; }
/* 滑過跳出來的 logo：一整片白色的六角形磚（透明底的 logo 也有底），浮起來帶一點影子 */
/* 呼吸感：logo 慢慢亮起來（0.9 秒，從 0.86 倍慢慢長到原本大小），停一下，再慢慢淡掉（1.2 秒）；滑鼠帶出來的亮快一點（.is-quick）。
   底下一團淡淡的影子跟著一起亮、一起淡（用透明度，不是每一格都掛濾鏡，比較省） */
.hd-c .bw-l { left: 1.5px; right: 1.5px; top: calc(-16.67% + 1.5px); bottom: calc(-16.67% + 1.5px); border-radius: 0; box-shadow: none; background-color: #FFFFFF; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); transform: scale(.86);
  filter: var(--hd-fx);
  transition: opacity 1.2s cubic-bezier(.45, 0, .55, 1), transform 1.4s cubic-bezier(.45, 0, .55, 1), filter .6s ease; }
.hd-c .bw-l.is-sp { background-image: var(--hd-veil), var(--bw-img); background-size: 100% 100%, var(--bw-size, 1000% 700%); }   /* 毛玻璃那層白蓋在 logo 上面（位置照 logo 那張算也一樣蓋滿） */
.hd-c::before { content: ""; position: absolute; left: 8%; right: 8%; bottom: -26%; height: 34%; border-radius: 50%; background: radial-gradient(closest-side, var(--hd-shadow), transparent 75%); opacity: 0; transition: opacity 1.2s cubic-bezier(.45, 0, .55, 1); pointer-events: none; }
.hd-c.is-on { z-index: 1; }
.hd-c.is-on::before { opacity: 1; transition-duration: .9s; }
.hd-c.is-on .bw-l { opacity: var(--hd-op); transform: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); transition: opacity .9s cubic-bezier(.45, 0, .55, 1), transform 1.1s cubic-bezier(.22, 1, .36, 1), filter .6s ease; }
.hd-c.is-on.is-quick .bw-l { filter: var(--hd-fx-on); }
.hd-c.is-on.is-quick .bw-l, .hd-c.is-on.is-quick::before { transition-duration: .45s, .6s, .45s; }
.hd-c.is-on::after { opacity: 0; transition-duration: .9s; }
@media (prefers-reduced-motion: reduce) { .hd-c .bw-l, .hd-c::before, .hd-c::after { transition: none; } }
.bw-l {
  position: absolute; inset: 0; border-radius: inherit; background-color: var(--card); background-repeat: no-repeat; background-size: cover; background-position: center;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 9%, transparent), 0 6px 16px -8px rgba(0, 0, 0, .28);
  opacity: 0; transform: scale(.62);
}
.bw-l.is-sp { background-image: var(--bw-img); background-size: var(--bw-size, 1000% 700%); }
.hero-brands-cap { margin-top: clamp(36px, 5vw, 60px); padding-inline: 16px; text-align: center; font-size: 14.5px; color: var(--ink-soft);
  text-shadow: 0 0 3px var(--wax), 0 0 10px var(--wax), 0 0 18px var(--wax); }   /* v20：光波延伸到這一行後面，字邊留一圈底色，讀起來不吃力 */
.hero-brands-cap b { color: var(--ink); font-weight: 700; }
.cap-tip { color: var(--ink-faint); }

/* 自動滾動的一排：可以用手滑；滑過、按住就停 */
.mq { position: relative; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.mq::-webkit-scrollbar { display: none; }
.mq-in { display: flex; width: max-content; padding-block: 6px 10px; }
.mq-set { display: flex; gap: 12px; padding-right: 12px; }
.mq.is-drag { cursor: grabbing; }
.mq.is-drag a { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .mq { cursor: auto; } }

/* ---------- 我們做了什麼 → 同樣的錢，客人變多：四個真實案例全部攤開 ---------- */
.sec.how { padding-top: clamp(28px, 4vw, 64px); }
.how-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 980px) { .how-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } }
/* 手機：四個案例左右並排，用手滑；下面有進度條 */
@media (max-width: 699px) {
  .how-grid { position: relative; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-left: calc(-1 * var(--gl)); margin-right: calc(-1 * var(--gr)); padding: 4px var(--gr) 12px var(--gl); scroll-padding-inline: var(--gl) var(--gr); scrollbar-width: none; overscroll-behavior-x: contain; }
  .how-grid::-webkit-scrollbar { display: none; }
  .how-grid > .hw { flex: 0 0 88%; scroll-snap-align: start; }
  .how-grid .hw-ba { display: none; }
  .how .rail-ctl { margin-top: 2px; }
}
.hw { --glr: var(--r-xl); position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: clamp(20px, 2.6vw, 32px); border-radius: var(--r-xl); background: var(--wax-2); }
.hw-head { display: flex; align-items: center; gap: 12px; }
.hw-logo { display: block; width: 44px; height: 44px; flex: none; border-radius: 50%; overflow: hidden; background: var(--card); }
.hw-logo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hw-head b { display: block; font-size: 16.5px; line-height: 1.3; }
.hw-head div span { font-size: 13px; color: var(--ink-soft); }
.hw-act { font-size: clamp(22px, 2.3vw, 28px); font-weight: 700; line-height: 1.3; }
.hw-did { font-size: 15.5px; line-height: 1.75; color: var(--ink-soft); text-wrap: pretty; }
.hw-chart { min-width: 0; padding: clamp(14px, 2vw, 20px); border-radius: 22px; background: var(--card); }
.hc-cap { margin-bottom: 14px; font-size: 13.5px; font-weight: 700; color: var(--ink-soft); }
/* 結果：客人變成幾倍、同樣 $1 萬之前 vs 之後、多找到幾位 */
.hw-res { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "x extra" "ba ba"; gap: 14px 16px; margin-top: auto; padding-top: 6px; }
.hw-x { grid-area: x; display: grid; gap: 2px; align-content: start; min-width: 0; }
.hw-extra { grid-area: extra; display: grid; gap: 2px; align-content: start; min-width: 0; }
.hw-x b, .hw-extra b { font-size: clamp(38px, 4.2vw, 54px); font-weight: 700; line-height: 1.05; letter-spacing: -.03em; }
.hw-extra b { color: var(--amber); }
.hw-x > span, .hw-extra > span { font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); }
.hw-extra small { display: block; font-size: 12.5px; color: var(--ink-faint); }
.hw-ba { grid-area: ba; display: grid; gap: 7px; }
.ba { display: grid; grid-template-columns: minmax(0, 8.6em) minmax(0, 1fr) 4.4em; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-soft); }
.ba > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ba-t { display: block; height: 14px; border-radius: 7px; }
.ba-t i { --hc: color-mix(in srgb, var(--ink) 34%, var(--wax)); position: relative; display: block; width: calc(var(--w) * 100%); min-width: 6px; height: 100%; border-radius: 7px; overflow: hidden; background: var(--lt-bar); transition: width 1s var(--ease-out) .3s; }
.ba.is-after .ba-t i { --hc: var(--honey); transition-delay: .55s; }
.ba b { text-align: right; font-size: 14.5px; color: var(--ink); }
.viz .hw:not(.is-on) .ba-t i { width: 0; }
.hw-note { font-size: 12.5px; line-height: 1.6; color: var(--ink-faint); text-wrap: pretty; }
.hp-feat { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; color: var(--ink-soft); }
.hp-feat > span { margin-right: 2px; }
.hp-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 13px; border-radius: 999px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); font: 700 13px var(--font-body); text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s, transform .15s var(--ease-out); }
.hp-chip:active { transform: scale(.95); }
@media (hover: hover) and (pointer: fine) { .hp-chip:hover { background: var(--ink); color: var(--wax); } }
.hp-also { padding: 11px 14px; border-radius: 14px; background: var(--card); font-size: 13.5px; line-height: 1.65; color: var(--ink-soft); text-wrap: pretty; }
@media (max-width: 340px) { .hw-res { grid-template-columns: minmax(0, 1fr); grid-template-areas: "x" "extra" "ba"; } }
@media (max-width: 420px) { .hw-x b, .hw-extra b { font-size: 34px; } }

/* 三種開頭一起跑：同樣 $1 萬，各找到幾位 */
.hc-race { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.hc-race li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: center; }
.hr-thumb { position: relative; display: block; width: 48px; aspect-ratio: 9 / 16; border-radius: 9px; overflow: hidden; background: #121214; }
.hr-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hc-race li.is-win .hr-thumb { box-shadow: 0 0 0 3px var(--honey); }
.hr-main { min-width: 0; }
.hr-label { margin-bottom: 6px; font-size: 13.5px; font-weight: 600; line-height: 1.45; }
.hr-bar { display: grid; grid-template-columns: minmax(0, 1fr) 4.6em; align-items: center; gap: 10px; }
.hr-bar i { --hc: color-mix(in srgb, var(--ink) 30%, var(--wax)); position: relative; display: block; width: calc(var(--w) * 100%); min-width: 6px; height: 16px; border-radius: 8px; overflow: hidden; background: var(--lt-bar); transition: width .9s var(--ease-out); transition-delay: calc(var(--k) * .14s + .1s); }
.hc-race li.is-win .hr-bar i { --hc: var(--honey); box-shadow: -2px 6px 18px -10px var(--honey); }
.viz .hw:not(.is-on) .hr-bar i { width: 0; }
.hr-bar b { font-size: 16px; font-weight: 700; text-align: right; }
.hr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 5px; font-size: 12.5px; color: var(--ink-soft); }
.hr-meta em { padding: 1px 9px; border-radius: 999px; background: var(--wax-2); font-size: 12px; font-style: normal; font-weight: 700; }
.hr-meta em.is-win { background: var(--honey); color: var(--on-honey); }
.hr-meta em.is-off { color: var(--ink-faint); }

/* 換腳本：每個月一根柱子 */
.hc-months { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 12px; height: 210px; padding-top: 30px; }
.hm { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0; height: 100%; }
.hm b { margin-bottom: 4px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.hm i { --hc: color-mix(in srgb, var(--honey) 62%, var(--card)); position: relative; display: block; width: min(100%, 60px); height: calc((100% - 50px) * var(--h)); min-height: 4px; border-radius: 12px 12px 4px 4px; overflow: hidden; background: var(--lt-bar-v); transition: height .8s var(--ease-out); transition-delay: calc(var(--k) * .12s + .1s); }
.hm.is-old i { --hc: color-mix(in srgb, var(--ink) 30%, var(--wax)); }
.hm.is-old b { color: var(--ink-soft); }
.hm.is-win i { --hc: var(--honey); box-shadow: 0 -8px 24px -10px var(--honey); }
.viz .hw:not(.is-on) .hm i { height: 0; min-height: 0; }
.hm span { margin-top: 6px; font-size: 12.5px; color: var(--ink-soft); }
.hm-cut { position: absolute; top: 0; bottom: 26px; left: calc(var(--cut) * (100% + 12px) / var(--n) - 7px); border-left: 2px dashed var(--ink); }
.hm-cut span { position: absolute; top: 0; left: 8px; padding: 2px 9px; border-radius: 999px; background: var(--ink); color: var(--wax); font-size: 12px; font-weight: 700; white-space: nowrap; }
.hc-scripts { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); }
.hs { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 10px; flex: 1; min-width: 0; margin: 0; }
.hs img { display: block; width: 44px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 8px; background: #121214; }
.hs.is-win img { box-shadow: 0 0 0 3px var(--honey); }
.hs figcaption { display: grid; min-width: 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); }
.hs figcaption b { font-size: 13.5px; color: var(--ink); }
.hs-arrow { flex: none; color: var(--ink-faint); }
.hs-arrow .ico { width: 18px; height: 18px; }

/* 逐月往上：折線＋四次調整 */
.hl-plot { position: relative; height: 190px; margin: 28px 16px 0 58px; }
.hl-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; clip-path: inset(-12px -12px -12px 0); transition: clip-path 1.6s var(--ease-out) .1s; }
.viz .hw:not(.is-on) .hl-plot svg { clip-path: inset(-12px 100% -12px 0); }
.hl-grid { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--rule); }
.hl-area { transition: opacity .8s ease .6s; }
.hl-path { fill: none; stroke: var(--honey-deep); stroke-width: 3; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
/* 曲線的光：底下一層寬寬淡淡的光暈，上面一小段亮光沿著線跑（每隔幾秒一次） */
.hl-glow, .rp-fn-glow, .sv-glow { fill: none; stroke: var(--honey); stroke-width: 10; stroke-opacity: .16; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.hl-run, .rp-fn-run, .sv-run { fill: none; stroke: #FFF3C4; stroke-width: 3.4; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: .07 .93; stroke-dashoffset: .07; opacity: 0; }
.hw.is-live.is-on .hl-run, .rp.is-live.is-on .rp-fn-run, .saver-chart.is-live .sv-run { animation: line-run 5s cubic-bezier(.45, 0, .25, 1) 2.2s infinite; }
@keyframes line-run { 0% { stroke-dashoffset: .07; opacity: 0; } 6% { opacity: 1; } 56% { stroke-dashoffset: -.93; opacity: 1; } 62%, 100% { stroke-dashoffset: -.93; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hl-run, .rp-fn-run, .sv-run { display: none; } }
.viz .hw:not(.is-on) .hl-glow { opacity: 0; }
.hl-glow { transition: opacity .8s ease 1.2s; }
.viz .hw:not(.is-on) .hl-area { opacity: 0; }
.hl-pt { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--card); border: 2px solid var(--honey-deep); transition: opacity .3s; transition-delay: calc(var(--k) * .15s + .2s); }
.hl-pt.is-hi { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; background: var(--honey); }
.viz .hw:not(.is-on) .hl-pt { opacity: 0; }
.hl-mark { position: absolute; transform: translate(-50%, calc(-100% - 12px)); transition: opacity .3s; transition-delay: calc(var(--k) * .15s + .35s); }
.viz .hw:not(.is-on) .hl-mark { opacity: 0; }
.hl-mark b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--wax); font-size: 12px; font-weight: 800; }
.hl-val { position: absolute; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.hl-val.is-first { right: calc(100% + 10px); transform: translateY(-50%); color: var(--ink-soft); }
.hl-val.is-hi { transform: translate(-50%, calc(-100% - 12px)); }
.hl-x { position: relative; height: 20px; margin: 8px 16px 0 58px; }
.hl-x span { position: absolute; top: 0; transform: translateX(-50%); font-size: 12px; color: var(--ink-faint); white-space: nowrap; }
.hl-x span:first-child::after { content: " 月"; }
.hl-steps { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--rule); }
.hl-steps li { display: grid; grid-template-columns: auto 30px minmax(0, 1fr); align-items: center; gap: 8px; min-width: 0; }
.hl-no { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--wax); font-size: 12px; font-weight: 800; }
.hl-steps img { display: block; width: 30px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 6px; background: #121214; }
.hl-steps div { display: grid; min-width: 0; line-height: 1.4; }
.hl-steps b { font-size: 13px; }
.hl-steps span { font-size: 12px; color: var(--ink-soft); }
@media (max-width: 420px) { .hl-plot, .hl-x { margin-left: 50px; margin-right: 10px; } .hl-steps { grid-template-columns: minmax(0, 1fr); } }

/* 拍對影片：兩種影片，同樣 $1 萬各找到幾位 */
.hc-vs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.hv { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 12px; min-width: 0; padding: 10px; border-radius: 18px; border: 1.5px solid var(--rule); color: inherit; text-decoration: none; transition: box-shadow .3s, border-color .2s; }
.hv.is-win { border-color: var(--honey); }
.hv-thumb { position: relative; display: block; width: 56px; aspect-ratio: 9 / 16; border-radius: 10px; overflow: hidden; background: #121214; }
.hv-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hv-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; min-width: 0; }
.hv-body > b { grid-column: 1 / -1; font-size: 13.5px; line-height: 1.45; }
.hv-bar { display: block; height: 16px; border-radius: 8px; }
.hv-bar i { --hc: color-mix(in srgb, var(--ink) 30%, var(--wax)); position: relative; display: block; width: calc(var(--w) * 100%); min-width: 6px; height: 100%; border-radius: 8px; overflow: hidden; background: var(--lt-bar); transition: width .9s var(--ease-out); transition-delay: calc(var(--k) * .18s + .15s); }
.hv.is-win .hv-bar i { --hc: var(--honey); box-shadow: -2px 6px 18px -10px var(--honey); }
.viz .hw:not(.is-on) .hv-bar i { width: 0; }
.hv-n { font-size: 17px; font-weight: 700; text-align: right; }
.hv-cust { grid-column: 1 / -1; font-size: 12.5px; color: var(--ink-soft); }
@media (hover: hover) and (pointer: fine) { .hv:hover { box-shadow: var(--shadow); } }

/* 四個案例加起來 */
.how-sum { display: grid; justify-items: center; gap: 14px; max-width: 980px; margin: clamp(34px, 4.5vw, 56px) auto 0; text-align: center; }
.hs-k { font-size: clamp(16px, 1.7vw, 19px); color: var(--ink-soft); text-wrap: balance; }
.hs-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; width: 100%; }
.hs-n { display: grid; justify-items: center; gap: 4px; padding: clamp(18px, 2.6vw, 28px) 18px; border-radius: var(--r-xl); background: var(--wax-2); }
.hs-n.is-hon { background: linear-gradient(135deg, #F6D998, var(--honey) 55%, #D8B06A); color: var(--on-honey); }
.hs-v { font-size: clamp(44px, 6.4vw, 78px); font-weight: 800; line-height: 1.04; letter-spacing: -.035em; }
.hs-n > span { font-size: 15px; font-weight: 600; color: var(--ink-soft); }
.hs-n.is-hon > span { color: inherit; opacity: .8; }
.how-sum .btn { margin-top: 4px; }
@media (min-width: 760px) { .hs-two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }

/* ---------- 你的產業：黑底數據區（Framer 式的儀表板） ----------
   黑色面板＋一圈細線（上緣亮一點），長條是亮色往右淡進黑底的漸層、前端一條亮線；刻度用等寬小字、框裡有刻度線（Cerebrium）。
   拉每月廣告費，每一條的數字、長度和上面的刻度一起換；滑鼠移到哪一條就選哪一條（其他的淡下去），手機捲到畫面中間的那一條自動選。
   面板：電腦黏在右邊，手機黏在畫面下面 */
.is-dark, .quote-band { --fx-bg: #0F0F11; --fx-bg-2: #060607; --fx-line: rgba(255, 255, 255, .085); --fx-line-hi: rgba(255, 255, 255, .45); --fx-fill: rgba(255, 255, 255, .028); --fx-grid: rgba(255, 255, 255, .075); --fx-gray: #5E5E66; --fx-white: #E6E6EB; }
.proof.is-dark { position: relative; background: var(--band); color: var(--band-fg); }
.proof.is-dark .sec-head p { color: var(--band-soft); }
/* 淺色底的版本：亮色 → 一路淡進底色（橫的、直的）。--hc 一樣宣告在長條自己身上 */
.hv-t i, .ba-t i, .hr-bar i, .hv-bar i { --lt-bar: linear-gradient(90deg, var(--hc) 0%, color-mix(in srgb, var(--hc) 90%, transparent) 26%, color-mix(in srgb, var(--hc) 60%, transparent) 54%, color-mix(in srgb, var(--hc) 24%, transparent) 80%, transparent 100%); }
.hm i { --lt-bar-v: linear-gradient(180deg, var(--hc) 0%, color-mix(in srgb, var(--hc) 82%, transparent) 30%, color-mix(in srgb, var(--hc) 40%, transparent) 70%, color-mix(in srgb, var(--hc) 8%, transparent) 100%); }
/* 一道光：蜂蜜色的長條每隔幾秒從頭掃到尾（直的柱子從上往下） */
.hv-row.is-us .hv-t i::before, .ba.is-after .ba-t i::before, .hc-race li.is-win .hr-bar i::before, .hv.is-win .hv-bar i::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 36%; background: linear-gradient(100deg, transparent 10%, rgba(255, 255, 255, .7) 50%, transparent 90%); transform: translateX(-130%); }
.hm.is-win i::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40%; background: linear-gradient(180deg, transparent 10%, rgba(255, 255, 255, .6) 50%, transparent 90%); transform: translateY(-130%); }
.is-on .hv-row.is-us .hv-t i::before, .hw.is-live .ba.is-after .ba-t i::before, .hw.is-live .hc-race li.is-win .hr-bar i::before, .hw.is-live .hv.is-win .hv-bar i::before { animation: bar-shine 4.6s cubic-bezier(.5, 0, .3, 1) 1.6s infinite; }
.hw.is-live .hm.is-win i::before { animation: bar-shine-v 4.6s cubic-bezier(.5, 0, .3, 1) 1.6s infinite; }
@keyframes bar-shine-v { 0% { transform: translateY(-130%); } 46%, 100% { transform: translateY(330%); } }
@media (prefers-reduced-motion: reduce) { [class] > i::before { animation: none !important; } }
/* Framer 的發光長條：亮色 → 一路變暗淡進黑底（是「變暗」不是變透明）。--hc 是長條的顏色，要宣告在長條自己身上才算得到 */
.bx-bar, .vs-t i, .rb i, .rp-bar > i > i, .tk-bar i, .cb-t i, .fxb { --fx-bar: linear-gradient(90deg, var(--hc) 0%, color-mix(in srgb, var(--hc) 94%, #000) 22%, color-mix(in srgb, var(--hc) 78%, #000) 44%, color-mix(in srgb, var(--hc) 46%, #000) 66%, color-mix(in srgb, var(--hc) 16%, #000) 86%, rgba(0, 0, 0, 0) 100%); }
.rpv-st i, .ru i { --fx-bar-v: linear-gradient(180deg, var(--hc) 0%, color-mix(in srgb, var(--hc) 86%, #000) 30%, color-mix(in srgb, var(--hc) 45%, #000) 66%, rgba(0, 0, 0, 0) 100%); }
.fx-panel { position: relative; border: 1px solid var(--fx-line); border-radius: 20px; background: linear-gradient(180deg, var(--fx-bg), var(--fx-bg-2) 55%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 40px 80px -40px #000; }
.fx-panel::before { content: ""; position: absolute; left: 14%; right: 14%; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--fx-line-hi), transparent); pointer-events: none; }
.pfx { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.pfx-main { min-width: 0; padding: clamp(14px, 1.8vw, 22px); }
.pfx-hd { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 2px 4px 14px; border-bottom: 1px solid var(--fx-line); }
.pfx-t { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--band-soft); }
.pfx-t b { margin: 0 3px; font: 700 19px/1 var(--font-num); letter-spacing: -.01em; color: var(--band-fg); }
.pfx-lg { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pfx-lg li { padding: 3px 9px; border-radius: 6px; font: 600 11px/1.45 var(--font-mono); letter-spacing: .02em; }
.pfx-lg .is-ind { background: linear-gradient(90deg, #FF6A1A, var(--honey)); color: var(--on-honey); }
.pfx-lg .is-all { background: var(--fx-white); color: var(--on-honey); }
.pfx-lg .is-bm { background: var(--fx-gray); color: var(--band-fg); }
/* 刻度：跟長條同寬 */
.pfx-axis { position: relative; height: 30px; margin: 0 11px; font: 500 10.5px/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--tick); }
.pfx-axis span { position: absolute; bottom: 7px; left: calc(var(--p) * 100%); transform: translateX(-50%); white-space: nowrap; }
.pfx-axis span:first-child { transform: none; }
.pfx-axis span:last-child { transform: translateX(-100%); }
.pfx-list { display: grid; gap: 2px; min-width: 0; --gs: 25%; }
.bx { --hc: var(--honey); position: relative; display: grid; grid-template-columns: minmax(6em, 1fr) auto; grid-template-areas: "l v" "t t"; align-items: end; gap: 6px 14px; width: 100%; margin: 0; padding: 8px 10px 10px; border: 1px solid transparent; border-radius: 14px; background: none; color: var(--band-fg); font: inherit; text-align: left; -webkit-tap-highlight-color: transparent; transition: opacity .3s, background-color .25s, border-color .25s; }
button.bx { cursor: pointer; }
button.bx:focus-visible { outline: 2px solid var(--honey); outline-offset: 2px; }
.bx-l { grid-area: l; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.bx-l b { font-size: 15px; font-weight: 700; line-height: 1.35; }
.bx-l small { font: 500 11px/1.4 var(--font-mono); letter-spacing: .02em; color: var(--band-soft); white-space: nowrap; }
.bx-v { grid-area: v; display: inline-flex; align-items: baseline; gap: 4px; font: 600 clamp(22px, 2.1vw, 27px)/1 var(--font-num); letter-spacing: -.02em; color: var(--band-fg); white-space: nowrap; transition: opacity .45s; }
.bx-v small { font: 500 min(12.5px, max(9px, .57em)) var(--font-body); letter-spacing: 0; color: var(--band-soft); }   /* 數字縮小時「位」也跟著小 */
/* 長條（Framer 的做法）：沒有框，亮色從左邊發光、一路淡進黑底；後面只留很淡的刻度虛線 */
.bx-t { grid-area: t; position: relative; display: block; height: 30px; border-radius: 9px; }
/* 框裡的刻度線：虛線（Cerebrium），跟上面的刻度對齊 */
.bx-t::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 calc(var(--gs) - 1px), var(--fx-grid) calc(var(--gs) - 1px) var(--gs));
  -webkit-mask: repeating-linear-gradient(180deg, #000 0 3px, transparent 3px 6px); mask: repeating-linear-gradient(180deg, #000 0 3px, transparent 3px 6px); }
.bx-bar { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--w, 0) * 100%); min-width: 6px; border-radius: 9px; overflow: hidden;
  background: var(--fx-bar); transition: width .65s cubic-bezier(.2, .9, .25, 1); }
/* 光：長條前段的亮色往外暈開一點（跟著長條長短）＋一道白光每隔幾秒從左掃到右，一排接一排 */
.bx-t::after { content: ""; position: absolute; left: 0; top: -7px; bottom: -7px; width: calc(var(--w, 0) * 62%); border-radius: 14px; pointer-events: none;
  background: radial-gradient(70% 60% at 22% 50%, color-mix(in srgb, var(--hc) 42%, transparent), transparent 75%); filter: blur(6px); opacity: .85; transition: width .65s cubic-bezier(.2, .9, .25, 1); }
.bx-bar::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 36%; background: linear-gradient(100deg, transparent 10%, rgba(255, 255, 255, .5) 50%, transparent 90%); transform: translateX(-130%); }
.pfx-list.is-live .bx-bar::before { animation: bar-shine 4.6s cubic-bezier(.5, 0, .3, 1) infinite; animation-delay: calc(var(--k) * 160ms + .6s); }
@keyframes bar-shine { 0% { transform: translateX(-130%); } 46%, 100% { transform: translateX(330%); } }   /* v24：光走慢一點（約 2 秒走完一條），4.6 秒一次 */
@media (prefers-reduced-motion: reduce) { .bx-bar::before, .vs-t i::before { animation: none !important; } }
.viz .pfx-list:not(.is-on) .bx-bar { width: 0; }
.viz .pfx-list:not(.is-on) .bx-v { opacity: 0; }
.viz .pfx-list:not(.is-live) .bx-bar { transition-duration: 1.2s; transition-delay: calc(var(--k) * 70ms + 60ms); }
.viz .pfx-list:not(.is-live) .bx-v { transition-delay: calc(var(--k) * 70ms + 500ms); }
.bx[aria-pressed="true"] { background: rgba(255, 255, 255, .025); border-color: var(--fx-line); }
.bx[aria-pressed="true"] .bx-t::after { opacity: 1; filter: blur(8px); }
.bx[aria-pressed="true"] .bx-bar { box-shadow: 0 0 0 1px color-mix(in srgb, var(--hc) 45%, transparent); }
.bx[aria-pressed="true"] .bx-l b::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--hc); box-shadow: 0 0 10px var(--hc); vertical-align: 2px; }
@media (hover: hover) and (pointer: fine) { .pfx-list:hover .bx:not(:hover) { opacity: .45; } }
.bx.is-all { --hc: var(--fx-white); }
.bx.is-all .bx-bar { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .16) 0 6px, transparent 6px 12px), var(--fx-bar); }
.bx.is-bm { --hc: var(--fx-gray); }
.bx.is-bm .bx-v { color: var(--band-soft); }
/* 面板：每月廣告費 → 大約找到幾位 → 跟一般行情比 → 一年省下多少 */
.pfx-side { min-width: 0; --glr: 20px; }
.pq { display: grid; overflow: hidden; }
.pq > * { padding: 16px clamp(16px, 1.8vw, 22px); }
.pq > :not(.gg) + :not(.gg) { border-top: 1px solid var(--fx-line); }   /* 卡片的光（.gg）放在最前面，不算 */
.pq.is-swap { animation: pq-swap .4s var(--ease-out); }
@keyframes pq-swap { from { opacity: .4; transform: translateY(5px); } }
.pq-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; padding-top: 18px; }
.pq-head > b { font-size: clamp(19px, 1.9vw, 22px); line-height: 1.25; }
.pq-head > span { font: 500 11.5px var(--font-mono); color: var(--band-soft); }
.pq-head > span b { color: var(--band-fg); }
.pq-ad { display: grid; gap: 8px; }
.pq-q { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pq-q label { flex: none; font-size: 14px; font-weight: 600; color: var(--band-soft); white-space: nowrap; }
.pq-q b { font: 700 clamp(24px, 2.3vw, 30px)/1 var(--font-num); letter-spacing: -.02em; color: var(--band-fg); }
.pq-slide { position: relative; --pct: 0; }
.pq-slide .range { margin: 2px 0 0; }
/* 引導：拇指右邊「拉拉看」，左右輕輕晃；拉過一次就收掉 */
.pq-nudge { position: absolute; top: 50%; left: calc(var(--pct) * (100% - 26px) + 34px); display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; background: var(--honey); color: var(--on-honey); font-size: 12px; font-weight: 700; line-height: 1.5; white-space: nowrap; pointer-events: none; transform: translateY(-50%); box-shadow: 0 6px 18px -6px var(--honey-glow); transition: opacity .3s, visibility 0s .3s; }
.pq-nudge i { width: 0; height: 0; border: 4px solid transparent; }
.pq-nudge i:first-child { border-right-color: currentColor; margin-left: -4px; }
.pq-nudge i:last-child { border-left-color: currentColor; margin-right: -4px; }
.viz .pq-nudge { animation: pq-nudge 1.8s ease-in-out infinite; }
@keyframes pq-nudge { 0%, 100% { transform: translate(0, -50%); } 35% { transform: translate(-5px, -50%); } 65% { transform: translate(5px, -50%); } }
.pq.is-touched .pq-nudge, .pfx-side .pq-nudge.is-off { opacity: 0; visibility: hidden; animation: none; }
.pq-ticks { position: relative; height: 12px; margin: -4px 13px 0; font: 500 10.5px/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--tick); }
.pq-ticks span { position: absolute; left: calc(var(--p) * 100%); transform: translateX(-50%); white-space: nowrap; }
.pq-ticks span:last-child { transform: translateX(-75%); }
/* 每月超過 $3 萬：提醒這是照過去的平均成本估 */
.pq-big { margin: 4px 0 0; padding: 8px 10px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--honey) 30%, transparent); background: color-mix(in srgb, var(--honey) 9%, transparent); font-size: 12px; line-height: 1.5; color: var(--band-fg); }
/* 兩條比較長條用同一把尺：三欄（名稱、長條、數字）跨兩列對齊，兩條長條一樣寬 */
/* 右邊數字那一格：平常 5.6em；數字 7 位數以上 JS 給 --vw（照位數加寬，最多半條），長條跟著短一點，數字才不會壓到長條上 */
.pq-vs { display: grid; grid-template-columns: 4.4em minmax(0, 1fr) var(--vw, 5.6em); column-gap: 10px; row-gap: 10px; }
.pq-vs > p { grid-column: 1 / -1; }
.pq-k { margin: 0; font-size: 14px; font-weight: 600; color: var(--band-soft); }
.vs-row { --vc: var(--honey); grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; }
@supports not (grid-template-columns: subgrid) { .vs-row { grid-template-columns: 4.4em minmax(0, 1fr) var(--vw, 5.6em); column-gap: 10px; } }
.vs-l { font-size: 13px; color: var(--band-soft); }
.vs-t { position: relative; height: 36px; border-radius: 10px; }
.vs-t i { --hc: var(--vc); position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--w, 1) * 100%); min-width: 6px; border-radius: 10px; overflow: hidden; background: var(--fx-bar); transition: width .6s cubic-bezier(.2, .9, .25, 1); }
.vs-t::after { content: ""; position: absolute; left: 0; top: -8px; bottom: -8px; width: calc(var(--w, 1) * 60%); pointer-events: none; background: radial-gradient(70% 60% at 22% 50%, color-mix(in srgb, var(--vc) 40%, transparent), transparent 75%); filter: blur(7px); transition: width .6s cubic-bezier(.2, .9, .25, 1); }
.vs-t i::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(100deg, transparent 10%, rgba(255, 255, 255, .5) 50%, transparent 90%); transform: translateX(-130%); animation: bar-shine 4.6s cubic-bezier(.5, 0, .3, 1) infinite; animation-delay: var(--sd, .8s); }
.vs-row.is-bm { --vc: var(--fx-gray); }
.vs-row.is-bm .vs-t i::before, .vs-row.is-img .vs-t i::before { display: none; }
.vs-row.is-vid { --vc: #FF8A3D; }
.vs-row.is-vid .vs-v { font-size: 27px; color: #FF9A4D; }
.vs-row.is-img { --vc: #B9B9C2; }
.vs-row.is-img .vs-v { font-weight: 600; color: var(--band-soft); }
.vs-l small { display: block; font: 500 10.5px/1.3 var(--font-mono); letter-spacing: .01em; color: var(--tick); }
.pq-k small { margin-left: 4px; font-size: 11.5px; font-weight: 500; color: var(--tick); }
.pq-hint { margin: 2px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--tick); }
.pq.is-touched .pq-hint { display: none; }
.pq-mt { --sd: 1.6s; }
.vs-v { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 3px; min-width: 0; font: 700 22px/1 var(--font-num); letter-spacing: -.02em; white-space: nowrap; }
.vs-row.is-us .vs-v { font-size: 27px; color: var(--honey); }
.vs-row.is-bm .vs-v { font-weight: 600; color: var(--band-soft); }
.vs-v small { font: 500 12px var(--font-body); letter-spacing: 0; color: var(--band-soft); }
.pq-x { margin: 0; font-size: 11.5px; line-height: 1.6; letter-spacing: .01em; color: var(--band-soft); }   /* v24：一行、小字（跟下面那行說明一樣小） */
.pq-x b { color: var(--band-fg); font-size: 12px; }
.pq-why { margin: 0; font-size: 11.5px; line-height: 1.6; color: var(--tick); text-wrap: pretty; }
.pq-why b { color: var(--band-fg); }
.pq-mini { display: none; }
.pq-mini small { font-size: 11.5px; color: var(--tick); }
/* 一段（「找到 X 位」）不拆開；字太長時整段一起縮小，所以裡面的數字用 em（跟著那一段的字級） */
.pq-mini .pm { display: inline-block; white-space: nowrap; }
.pq-mini small b { font-size: 1.087em; color: var(--band-soft); }
.pq-top { display: block; margin-top: 3px; font-weight: 700; color: var(--honey); }
.nw { white-space: nowrap; }
.pq-save { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 4px 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--honey) 13%, transparent), transparent 85%); }
.pq-save > span { font-size: 14px; font-weight: 700; }
.pq-save > b { justify-self: end; font: 800 clamp(30px, 3vw, 40px)/1.05 var(--font-num); letter-spacing: -.035em; color: var(--honey); white-space: nowrap; }
.pq-save > small { grid-column: 1 / -1; font-size: 12px; line-height: 1.5; color: var(--band-soft); }
/* 很大的金額（每月拉到幾百萬）：數字換到下一行、字小一點，不會撞到「一年省下」 */
.pq-save.is-long { grid-template-columns: minmax(0, 1fr); }
.pq-save.is-long > b { justify-self: start; font-size: clamp(26px, 2.6vw, 32px); }
.pq-save.is-xlong > b { font-size: 24px; }
.pq-go { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; border: 0; border-top: 1px solid var(--fx-line); background: none; color: var(--band-fg); font: 600 14px var(--font-body); text-align: left; cursor: pointer; transition: background-color .2s, color .2s; }
.pq-go .ico { width: 16px; height: 16px; flex: none; transition: transform .2s var(--ease-out); }
.pq-go:hover { background: rgba(255, 255, 255, .04); color: var(--honey); }
.pq-go:hover .ico { transform: translateX(3px); }
.pq-go:focus-visible { outline: 2px solid var(--honey); outline-offset: -2px; }
.range.range-light::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--honey) var(--pct, 0%), color-mix(in srgb, var(--ink) 10%, transparent) var(--pct, 0%)); }
.range.range-light::-moz-range-track { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.range.range-light::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--honey), 0 2px 8px rgba(0, 0, 0, .2); }
@media (min-width: 1001px) {
  .pfx { grid-template-columns: minmax(0, 1fr) minmax(330px, 380px); gap: 28px; align-items: start; }
  .pfx-side { position: sticky; top: calc(var(--head-h) + 24px + env(safe-area-inset-top, 0px)); }
}
@media (max-width: 1000px) {
  /* 手機：面板黏在畫面下面，捲動長條時一直看得到；長條捲完，面板就停在原來的位置 */
  .pfx-main { padding: 12px 8px 10px; border-radius: 18px; }
  .pfx-hd { padding: 2px 6px 12px; }
  .pfx-t { font-size: 13.5px; } .pfx-t b { font-size: 17px; }
  .pfx-axis { margin: 0 9px; }
  .pfx-list { padding-bottom: 6px; }
  .bx { padding: 8px 8px 10px; gap: 6px 10px; }
  .bx-t { height: 22px; }
  .bx-v { font-size: 22px; }
  .pfx-side { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 6; }
  .viz .pfx .pq { transition: transform .55s var(--ease-out), opacity .4s; }
  .viz .pfx:not(.is-near) .pq { transform: translateY(calc(100% + 40px)); opacity: 0; pointer-events: none; }
  /* 右邊「一年省下」最多佔一半寬：金額很長時數字縮小，不會把左邊的字擠爆 */
  .pq { grid-template-columns: minmax(0, 1fr) fit-content(48%); border-radius: 18px; box-shadow: 0 -14px 44px -12px #000; }
  .pq > * { grid-column: 1 / -1; padding: 9px 14px; }
  .pq-head { padding-top: 12px; } .pq-head > b { font-size: 16px; } .pq-head > span { font-size: 11px; }
  .pq-head + .pq-ad { border-top: 0; padding-top: 0; }
  .pq-ad { gap: 2px; } .pq-q label { font-size: 13px; } .pq-q b { font-size: 21px; }
  .pq-ticks { display: none; }
  .pq-big { font-size: 11px; padding: 6px 8px; }
  .pq-vs { grid-column: 1; align-content: center; gap: 2px; }
  /* 「找到幾位」那一列右邊沒有東西：整列都給它用 */
  .pq-vs:not(.pq-mt) { grid-column: 1 / -1; }
  .pq-vs .pq-k, .pq-vs .vs-row, .pq-vs .pq-x, .pq-vs .pq-why { display: none; }
  .pq-mini { display: grid; gap: 2px; margin: 0; font-size: 13px; color: var(--band-soft); }
  .pq-mini b { color: var(--band-fg); font: 700 1.154em var(--font-num); }
  .pq-mini .pq-mx b { color: var(--honey); }
  .pq-save { grid-column: 2; display: grid; grid-template-columns: auto; justify-items: end; gap: 0; border-left: 1px solid var(--fx-line); background: none; }
  .pq-save > span { font-size: 12px; color: var(--band-soft); font-weight: 600; }
  .pq-save > b { font-size: 23px; }
  .pq-save.is-long > b { justify-self: end; font-size: 19px; }
  .pq-save.is-xlong > b { font-size: 16px; }
  .pq-save > small, .pq-go { display: none; }
}
@media (max-width: 420px) { .bx-l small { font-size: 10.5px; } .pfx-lg li { padding: 2px 7px; font-size: 10.5px; } }

/* ---------- 案例：分頁、廣告牆、報告、短影音、LINE、官網、貼文 ---------- */
.case-tabs { display: flex; gap: 4px; width: max-content; max-width: 100%; margin: 0 auto 24px; padding: 4px; border-radius: 999px; background: var(--card); box-shadow: var(--shadow-sm); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.case-tabs::-webkit-scrollbar { display: none; }
.case-tabs.is-fr { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
.case-tabs.is-fl { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px); mask-image: linear-gradient(90deg, transparent, #000 36px); }
.case-tabs.is-fl.is-fr { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
.case-tabs button { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-soft); font: 700 14.5px var(--font-body); white-space: nowrap; cursor: pointer; transition: background-color .25s, color .25s, transform .2s var(--ease-out); -webkit-tap-highlight-color: transparent; }
.case-tabs button small { font: 700 11.5px var(--font-num); color: var(--ink-faint); }
.case-tabs button[aria-selected="true"] { background: var(--ink); color: var(--wax); }
.case-tabs button[aria-selected="true"] small { color: inherit; opacity: .7; }
.case-tabs button:active { transform: scale(.95); }
@media (max-width: 700px) { .case-tabs { width: auto; border-radius: 16px; -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); padding-right: 28px; } }
.cp.is-in { animation: cp-in .45s var(--ease-out); }
@keyframes cp-in { from { opacity: 0; transform: translateY(8px); } }
.cp-lead { max-width: 720px; margin: 0 auto 8px; text-align: center; font-size: 15.5px; color: var(--ink-soft); text-wrap: pretty; }
.cp-h { margin: 28px 0 12px; font-size: 17px; }
.cp-fine { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-faint); }

/* ---------- 案例：實際投放的廣告牆 ---------- */
.cp-lead b { color: var(--ink); }
/* 個人 IP 分頁最上面：為什麼要做個人 IP（最早首頁那段話） */
.ip-pitch { display: grid; justify-items: center; gap: 8px; max-width: 760px; margin: 4px auto 18px; text-align: center; }
.ip-pitch-t { margin: 0; font-size: clamp(17px, 1.9vw, 21px); font-weight: 600; line-height: 1.6; color: var(--ink-soft); text-wrap: balance; }
.ip-pitch-k { margin: 0; font-size: clamp(20px, 2.4vw, 28px); font-weight: 800; line-height: 1.35; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.ip-pitch .cp-lead { margin-top: 4px; }
.ad-filter { display: flex; gap: 6px; margin: 18px auto 14px; padding: 2px var(--gr) 4px var(--gl); margin-inline: calc(-1 * var(--gl)) calc(-1 * var(--gr)); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.ad-filter::-webkit-scrollbar { display: none; }
@media (min-width: 1000px) { .ad-filter { flex-wrap: wrap; justify-content: center; margin-inline: 0; padding-inline: 0; } }
.af { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--rule); background: var(--card); color: var(--ink-soft); font: 700 13.5px var(--font-body); cursor: pointer; transition: border-color .2s, background-color .2s, color .2s, transform .15s var(--ease-out); -webkit-tap-highlight-color: transparent; }
.af small { font: 700 11.5px var(--font-num); color: var(--ink-faint); }
.af[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--wax); }
.af[aria-pressed="true"] small { color: inherit; opacity: .7; }
.af:active { transform: scale(.95); }
@media (hover: hover) and (pointer: fine) { .af:not([aria-pressed="true"]):hover { border-color: var(--ink-faint); color: var(--ink); } }
.ad-wall { display: grid; gap: 4px; margin-inline: calc(-1 * var(--gl)) calc(-1 * var(--gr)); }
@media (min-width: 1240px) { .ad-wall { margin-inline: -24px; } }
.ad { flex: none; position: relative; display: grid; align-content: start; width: 164px; border-radius: 18px; overflow: hidden; background: var(--card); box-shadow: var(--shadow-sm); color: inherit; text-decoration: none; transition: transform .25s var(--ease-out), box-shadow .3s; -webkit-user-drag: none; }
.ad-thumb { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: #121214; }
.ad-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; }
.ad.is-fit .ad-thumb img { object-fit: contain; }
.ad-cpa { position: absolute; left: 8px; bottom: 8px; display: grid; padding: 4px 10px 5px; border-radius: 12px; background: rgba(12, 12, 14, .84); color: #fff; line-height: 1.15;  }
.ad-cpa small { font-size: 10.5px; opacity: .78; }
.ad-cpa b { font-size: 21px; font-weight: 800; color: #F5D38A; letter-spacing: -.01em; }
.ad-body { display: flex; align-items: flex-start; gap: 8px; min-width: 0; padding: 10px 10px 0; }
.ad-txt { display: grid; min-width: 0; line-height: 1.4; }
.ad-txt b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-txt span { font-size: 12px; color: var(--ink-soft); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ad-foot { padding: 4px 10px 11px 44px; font-size: 12px; font-weight: 700; color: var(--amber); }
@media (hover: hover) and (pointer: fine) { .ad:hover { transform: translateY(-4px); box-shadow: var(--shadow); } }
.ad-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 12px; }
.ad-grid .ad { width: auto; }
.ad-grid.is-in { animation: cp-in .4s var(--ease-out); }
@media (max-width: 420px) { .ad { width: 142px; } .ad-cpa b { font-size: 19px; } }

/* 個人 IP：短影音滾動、經營中的帳號 */
/* v21：經營中的帳號＝小小的成效卡（頭像＋平台、名字、產業、兩個成效數字）。電腦一排 6 張、最後一排不滿就置中（不會空一個洞）；
   平板一排 4 張；手機改成一排左右滑（不用往下捲十幾張） */
.acc-run { position: relative; overflow: hidden; margin-inline: calc(-1 * var(--gl)) calc(-1 * var(--gr)); padding: 4px 0 12px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
@media (min-width: 1240px) { .acc-run { margin-inline: 0; } }
.acc-track { display: flex; gap: 10px; width: max-content; padding-left: 10px; animation: acc-run calc(var(--acc-k, 10) * 4.6s) linear infinite; }
.acc-track > .acc { flex: 0 0 186px; }
@keyframes acc-run { to { transform: translateX(-50%); } }
.acc-run:hover .acc-track, .acc-run:focus-within .acc-track, .acc-run.is-hold .acc-track { animation-play-state: paused; }
@media (max-width: 699px) { .acc-track > .acc { flex-basis: 158px; } }
/* 減少動態：不滾，改成可以左右滑 */
@media (prefers-reduced-motion: reduce) {
  .acc-run { overflow-x: auto; scrollbar-width: none; -webkit-mask-image: none; mask-image: none; }
  .acc-track { animation: none; }
  .acc-track > .is-dup { display: none; }
}
.acc { display: flex; flex-direction: column; min-width: 0; padding: 13px 14px 12px; border-radius: 18px; border: 1px solid var(--rule); background: var(--card); color: var(--ink); text-decoration: none;
  transition: transform .3s var(--ease-out), border-color .25s, box-shadow .3s; }
.acc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.acc-av { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: var(--wax-2);
  box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px color-mix(in srgb, var(--honey) 70%, transparent); }
.acc-av.is-txt { background: var(--honey); color: var(--on-honey); font-weight: 800; font-size: 17px; }
.acc-plat { padding: 1px 8px; border-radius: 999px; background: var(--wax-2); color: var(--ink-soft); font-size: 11px; font-weight: 700; line-height: 1.7; white-space: nowrap; }
.acc-name { font-size: 14px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.acc-tag { margin: 2px 0 11px; font-size: 11.5px; color: var(--ink-soft); }
.acc-stats { display: flex; align-items: flex-end; gap: 6px 14px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--rule); }
.acc-stats > span { display: grid; min-width: 0; line-height: 1.2; }
.acc-stats b { font: 800 19px/1.1 var(--font-num); letter-spacing: -.015em; white-space: nowrap; }
.acc-stats small { font-size: 11.5px; color: var(--ink-soft); }
.acc:focus-visible { outline: 3px solid var(--honey-deep); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .acc:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--honey) 60%, var(--rule)); box-shadow: 0 18px 34px -24px rgba(0, 0, 0, .4); } }
@media (prefers-reduced-motion: reduce) { .acc { transition: none; } .acc:hover { transform: none; } }

/* ---------- LINE 官方帳號：九個項目，每一項都能在手機上點出來 ---------- */
.lx-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 18px; }
.lx-side { display: grid; gap: 14px; min-width: 0; }
.lx-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.lx-picks button { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px 0 11px; border-radius: 999px; border: 1.5px solid var(--rule); background: var(--card); color: var(--ink); font: 700 14px var(--font-body); cursor: pointer; transition: border-color .2s, background-color .2s, transform .15s var(--ease-out); }
.lx-picks .ico { width: 18px; height: 18px; color: var(--lc); }
.lx-picks button[aria-selected="true"] { border-color: var(--lc); background: color-mix(in srgb, var(--lc) 12%, var(--card)); }
.lx-picks button:active { transform: scale(.95); }
.lx-feats { padding: 16px; border-radius: 22px; background: var(--card); box-shadow: var(--shadow-sm); }
.lx-feats-h { display: grid; gap: 2px; margin-bottom: 8px; }
.lx-feats-h > b { font-size: 17px; }
.lx-feats-h span { font-size: 13px; color: var(--ink-soft); }
.lx-feats-h span b { color: var(--ink); }
.lx-feats ul { list-style: none; margin: 0; padding: 0; display: grid; }
.lxf { border-top: 1px solid var(--rule); }
.lxf:first-child { border-top: 0; }
.lxf-btn { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 11px 6px; border: 0; border-radius: 12px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background-color .2s; -webkit-tap-highlight-color: transparent; }
.lxf-btn > .ico { width: 20px; height: 20px; color: var(--line-green); stroke-width: 2.6; }
.lxf-t { display: grid; min-width: 0; line-height: 1.4; }
.lxf-t b { font-size: 15px; }
.lxf-t small { font-size: 12.5px; color: var(--ink-soft); }
.lxf-go { font-size: 12.5px; font-weight: 700; color: var(--amber); white-space: nowrap; }
.lxf-go::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 5px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: translateY(-1px) rotate(45deg); }
.lxf.is-on .lxf-btn { background: color-mix(in srgb, var(--line-green) 10%, transparent); }
.lxf-opts { margin: -2px 0 10px 38px; }
.seg-xs { padding: 3px; }
.seg-xs button { min-height: 30px; padding: 0 12px; font-size: 13px; }
@media (hover: hover) and (pointer: fine) { .lxf-btn:hover { background: var(--wax-2); } }
.lx-real { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 12px; padding: 16px; border-radius: 22px; background: var(--card); box-shadow: var(--shadow-sm); }
.lx-real-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--line-green); color: #fff; }
.lx-real-ico .ico { width: 26px; height: 26px; }
.lx-real b { display: block; font-size: 15.5px; }
.lx-real div span { display: block; font-size: 12.5px; font-weight: 700; color: var(--ok); }
.lx-real p { grid-column: 1 / -1; margin: 6px 0 4px; font-size: 13.5px; color: var(--ink-soft); }
.lx-real .btn { grid-column: 1 / -1; justify-self: start; }
.lx-pick-l { margin: 4px 0 0; font-size: 14px; font-weight: 700; }
.lx-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lx-shot { display: grid; gap: 6px; align-content: start; margin: 0; min-width: 0; }
.lx-shot img { display: block; width: 100%; aspect-ratio: 420 / 400; object-fit: cover; object-position: top; border-radius: 12px; border: 1px solid var(--rule); }
.lx-shot b { display: block; font-size: 12.5px; }
.lx-shot span { font-size: 11.5px; line-height: 1.4; color: var(--ink-soft); }

.lx-phone { justify-self: center; width: min(100%, 350px); padding: 10px; border-radius: 44px; background: #0E0E10; box-shadow: var(--shadow); }
.lx-screen { display: flex; flex-direction: column; height: 640px; border-radius: 34px; overflow: hidden; background: #8FA9C9; color: #111; font-size: 13.5px; }
.lx-top { display: flex; align-items: center; gap: 8px; padding: 14px 14px 10px; background: #fff; }
.lx-top > .ico { width: 18px; height: 18px; }
.lx-top b { font-size: 15px; }
.lx-top em { margin-left: auto; padding: 1px 8px; border-radius: 999px; background: #F0F0F0; color: #666; font-size: 11px; font-style: normal; font-weight: 700; }
.lx-av { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--lc); color: #fff; }
.lx-av .ico { width: 17px; height: 17px; }
.lx-av.sm { width: 28px; height: 28px; }
.lx-chat { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 12px 10px; overflow-y: auto; scrollbar-width: none; }
.lx-chat::-webkit-scrollbar { display: none; }
.lx-msg { display: flex; gap: 6px; align-items: flex-start; animation: lx-in .35s var(--ease-out); }
@keyframes lx-in { from { opacity: 0; transform: translateY(8px); } }
.lx-msg.is-me { justify-content: flex-end; }
.lx-bw { min-width: 0; max-width: calc(100% - 34px); }
.lx-b { margin: 0; padding: 8px 11px; border-radius: 16px; background: #fff; font-size: 13.5px; line-height: 1.55; }
.is-bot .lx-b { border-top-left-radius: 4px; }
.is-me .lx-b { max-width: 75%; background: #A6E36F; border-top-right-radius: 4px; }
.lx-typing { display: flex; gap: 4px; padding: 11px 13px; }
.lx-typing i { width: 6px; height: 6px; border-radius: 50%; background: #999; animation: lx-dot 1s infinite; }
.lx-typing i:nth-child(2) { animation-delay: .15s; }
.lx-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes lx-dot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
/* 聊天室裡的各種訊息 */
.lx-card1 { display: grid; width: 200px; border-radius: 16px; overflow: hidden; background: #fff; }
.lx-c-top { display: grid; align-content: end; gap: 4px; height: 84px; padding: 10px 12px; background: linear-gradient(150deg, var(--lc), color-mix(in srgb, var(--lc) 55%, #000)); color: #fff; }
.lx-c-top .ico { width: 22px; height: 22px; opacity: .85; }
.lx-c-top b { font-size: 15px; }
.lx-c-sub { padding: 9px 12px 2px; font-size: 12.5px; color: #555; }
.lx-c-btn { display: block; margin: 8px 12px 12px; padding: 7px 0; border: 0; border-radius: 9px; background: var(--ls); color: var(--lc); font: 700 13px var(--font-body); text-align: center; cursor: pointer; }
.lx-coupon { position: relative; display: grid; gap: 6px; width: 210px; padding: 12px 14px; border-radius: 14px; background: var(--lc); color: #fff; }
.lx-coupon::before, .lx-coupon::after { content: ""; position: absolute; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: #8FA9C9; }
.lx-coupon::before { left: -7px; } .lx-coupon::after { right: -7px; }
.lx-cp-k { font-size: 11.5px; font-weight: 700; opacity: .85; }
.lx-coupon b { font-size: 14px; line-height: 1.5; }
.lx-cp-btn { justify-self: start; padding: 3px 14px; border-radius: 999px; background: #fff; color: var(--lc); font-size: 12px; font-weight: 800; }
.lx-stamps { display: grid; gap: 8px; width: 214px; padding: 12px; border-radius: 16px; background: #fff; }
.lx-stamps > b { font-size: 14px; }
.lx-st { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.lx-st i { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--lc) 45%, #fff); }
.lx-st i.is-on { border: 0; background: var(--lc); color: #fff; }
.lx-st .ico { width: 15px; height: 15px; }
.lx-stamps > span { font-size: 12px; line-height: 1.5; color: #555; }
.lx-car-wrap { display: grid; gap: 6px; width: 252px; }
.lx-car { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.lx-car::-webkit-scrollbar { display: none; }
.lx-pg { flex: 0 0 150px; scroll-snap-align: start; display: grid; border-radius: 14px; overflow: hidden; background: #fff; }
.lx-pg-art { display: grid; place-items: end start; height: 96px; padding: 8px 10px; background: linear-gradient(140deg, color-mix(in srgb, var(--lc) calc(30% + var(--k) * 18%), #fff), var(--lc)); color: #fff; }
.lx-pg-art b { font-size: 22px; font-weight: 800; opacity: .9; }
.lx-pg-t { padding: 8px 10px 0; font-size: 12.5px; font-weight: 700; line-height: 1.4; }
.lx-pg-btn { margin: 6px 10px 10px; padding: 5px 0; border-radius: 8px; background: var(--ls); color: var(--lc); font-size: 12px; font-weight: 700; text-align: center; }
.lx-car-n { justify-self: start; padding: 1px 9px; border-radius: 999px; background: rgba(0, 0, 0, .45); color: #fff; font-size: 11.5px; font-weight: 700; }
.lx-gal { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; width: 206px; border-radius: 14px; overflow: hidden; }
.lx-gal span { display: grid; align-items: end; height: 78px; padding: 6px 8px; background: linear-gradient(135deg, color-mix(in srgb, var(--lc) calc(35% + var(--k) * 16%), #fff), var(--lc)); color: #fff; font-size: 11.5px; font-weight: 700; }
.lx-link, .lx-map { display: grid; gap: 4px; width: 214px; padding: 0 0 4px; border-radius: 16px; overflow: hidden; background: #fff; }
.lx-link-art, .lx-map-art { display: grid; place-items: center; height: 78px; background: var(--ls); color: var(--lc); }
.lx-map-art { background: repeating-linear-gradient(45deg, var(--ls) 0 12px, color-mix(in srgb, var(--ls) 70%, #fff) 12px 24px); }
.lx-link-art .ico, .lx-map-art .ico { width: 30px; height: 30px; }
.lx-link b { padding: 4px 12px 0; font-size: 13.5px; }
.lx-link > span:last-child, .lx-map > span:nth-child(2) { padding: 0 12px 6px; font-size: 12px; color: #555; }
.lx-map .lx-c-btn { margin-top: 0; }
.lx-book { display: grid; gap: 6px; width: 226px; padding: 12px; border-radius: 16px; background: #fff; }
.lx-book > b { font-size: 14.5px; }
.lx-book > span { font-size: 12px; color: #555; }
.lx-slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-top: 2px; }
.lx-slots button { padding: 7px 4px; border-radius: 9px; border: 1.5px solid var(--ls); background: #fff; color: var(--lc); font: 700 11.5px var(--font-body); cursor: pointer; }
.lx-slots button.is-on { background: var(--lc); border-color: var(--lc); color: #fff; }
.lx-slots button[disabled]:not(.is-on) { opacity: .45; cursor: default; }
/* 快速回覆、多頁圖文選單 */
.lx-quick { display: flex; gap: 6px; padding: 8px 10px; overflow-x: auto; scrollbar-width: none; background: rgba(255, 255, 255, .55); }
.lx-quick::-webkit-scrollbar { display: none; }
.lx-quick button { flex: none; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--lc); background: #fff; color: var(--lc); font: 700 12.5px var(--font-body); cursor: pointer; animation: lx-in .3s var(--ease-out) backwards; }
.lx-quick button:nth-child(2) { animation-delay: .06s; } .lx-quick button:nth-child(3) { animation-delay: .12s; }
.lx-rich { background: #fff; border-top: 1px solid rgba(0, 0, 0, .08); }
.lx-rtabs { display: flex; }
.lx-rtabs button { flex: 1; min-height: 34px; border: 0; border-bottom: 2px solid transparent; background: #fff; color: #777; font: 700 13px var(--font-body); cursor: pointer; transition: color .2s, border-color .2s; }
.lx-rtabs button[aria-selected="true"] { color: var(--lc); border-bottom-color: var(--lc); }
.lx-rpage { display: grid; gap: 1px; height: 162px; background: color-mix(in srgb, var(--lc) 26%, #fff); }
.lx-rpage.is-in { animation: lx-page .35s var(--ease-out); }
@keyframes lx-page { from { opacity: .3; transform: translateX(14px); } }
.lx-g9 { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
.lx-g3 { grid-template-columns: 1.2fr 1fr; grid-template-rows: 1fr 1fr; }
.lx-g3 .lx-tile:first-child { grid-row: span 2; }
.lx-g4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.lx-tile { display: grid; justify-items: center; align-content: center; gap: 3px; min-width: 0; border: 0; background: var(--ls); color: var(--lc); font: 700 12px/1.25 var(--font-body); text-align: center; cursor: pointer; transition: background-color .2s, transform .15s; -webkit-tap-highlight-color: transparent; }
.lx-tile .ico { width: 22px; height: 22px; }
.lx-g3 .lx-tile:first-child .ico { width: 34px; height: 34px; }
.lx-g3 .lx-tile:first-child span { font-size: 14px; }
.lx-tile small { font-size: 10.5px; font-weight: 600; opacity: .75; }
.lx-tile.is-on, .lx-tile:active { background: color-mix(in srgb, var(--lc) 20%, var(--ls)); }
.lx-tile:focus-visible { outline: 3px solid var(--lc); outline-offset: -3px; }
.lx-bar { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px 12px; background: #fff; color: #555; font-size: 12px; border-top: 1px solid #eee; }
.lx-bar .ico { width: 16px; height: 16px; }
.lx-phone .is-flash { animation: lx-flash 1.1s var(--ease-out); }
@keyframes lx-flash { 0%, 35% { box-shadow: 0 0 0 3px var(--honey); } }
@media (hover: hover) and (pointer: fine) { .lx-tile:hover { background: color-mix(in srgb, var(--lc) 12%, var(--ls)); } }
@media (min-width: 900px) { .lx-wrap { grid-template-columns: minmax(0, 1fr) 350px; gap: 32px; } }
@media (max-width: 380px) { .lx-screen { height: 600px; } }

/* ---------- 服務過的客戶（Energy Profits 的列表做法） ----------
   一列一個有投廣告的品牌：logo、名稱、大字客人數、比行情省多少、右邊一顆蜂蜜色的 ＋；
   按下去整列打開（高度慢慢長出來），＋ 轉成 ×。先列 6 個，「看全部」再展開 */
.clients { margin-top: clamp(40px, 5vw, 64px); }
.cl-head { display: grid; justify-items: center; gap: 6px; margin-bottom: 22px; text-align: center; padding-inline: 8px; }
.cl-head h3 { font-size: clamp(22px, 2.8vw, 32px); }
.cl-head p { font-size: 15px; color: var(--ink-soft); text-wrap: balance; }
.cl-h { margin: 34px 0 10px; font-size: 17px; text-align: center; }
.cl-rows { display: grid; gap: 4px; margin-inline: calc(-1 * var(--gl)) calc(-1 * var(--gr)); }
.cl-logo { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; overflow: hidden; background: var(--comb); color: var(--amber); font: 800 12px/1.1 var(--font-body); }
.cl-logo img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.cl-logo[data-tone="2"] { background: color-mix(in srgb, var(--honey) 45%, var(--card)); color: var(--on-honey); }
.cl-txt { display: grid; min-width: 0; line-height: 1.35; }
.cl-txt b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-txt span { font-size: 12px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl2 { display: inline-grid; grid-template-columns: 34px minmax(0, auto); align-items: center; gap: 10px; min-width: 0; padding: 8px 16px 8px 8px; border-radius: 999px; background: var(--card); white-space: nowrap; user-select: none; }
.cl2 .cl-logo { width: 34px; height: 34px; }
.cl2 .cl-txt b { font-size: 13.5px; }
.cl-rows.is-chips .mq-set { gap: 10px; padding-right: 10px; }
.clx { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.clx-row { border-bottom: 1px solid var(--rule); }
.clx-row.is-more { display: none; }
.clx.is-all .clx-row.is-more { display: block; animation: clx-in .45s var(--ease-out) backwards; }
@keyframes clx-in { from { opacity: 0; transform: translateY(8px); } }
.clx-top {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto minmax(7.5em, auto) 40px; grid-template-areas: "logo name big save pm";
  align-items: center; gap: 4px 20px; width: 100%; padding: 16px 4px; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.clx-top:focus-visible { outline: 3px solid var(--honey-deep); outline-offset: 2px; border-radius: 14px; }
.clx-top .cl-logo { grid-area: logo; width: 52px; height: 52px; border-radius: 15px; }
.clx-name { grid-area: name; display: grid; min-width: 0; line-height: 1.35; }
.clx-name b { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .2s; }
.clx-name span { font-size: 13px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clx-big { grid-area: big; display: flex; align-items: baseline; justify-self: end; gap: 6px; }
.clx-big b { font: 700 clamp(30px, 4.2vw, 54px)/1 var(--font-num); letter-spacing: -.04em; }
.clx-big small { font-size: 14px; color: var(--ink-soft); white-space: nowrap; }
.clx-save { grid-area: save; display: grid; justify-items: end; line-height: 1.25; }
.clx-save small { font: 500 11px var(--font-mono); color: var(--ink-faint); white-space: nowrap; }
.clx-save b { font-size: 17px; font-weight: 800; color: var(--amber); white-space: nowrap; }
/* 蜂蜜色的 ＋：打開時轉成 × */
.clx-pm { --pm: 36px; grid-area: pm; position: relative; justify-self: end; display: block; width: var(--pm); height: var(--pm); flex: none; border-radius: 50%; background: var(--honey); transition: transform .4s var(--ease-out), background-color .2s; }
.clx-pm::before, .clx-pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 40%; height: 2px; margin-top: -1px; border-radius: 1px; background: var(--on-honey); transform: translateX(-50%); }
.clx-pm::after { transform: translateX(-50%) rotate(90deg); }
[aria-expanded="true"] > .clx-pm { transform: rotate(135deg); }
@media (hover: hover) and (pointer: fine) { .clx-top:hover .clx-pm, .est-tog:hover .clx-pm { background: var(--honey-deep); } .clx-top:hover .clx-name b { color: var(--amber); } }
.clx-body { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .38s cubic-bezier(.3, .8, .3, 1), visibility 0s .38s; }
.clx-row.is-open .clx-body { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .38s cubic-bezier(.3, .8, .3, 1), visibility 0s; }
.clx-in > * { contain: layout; }
.clx-in { min-height: 0; overflow: hidden; }
.clx-row.no-anim .clx-body { transition: none !important; }
.clx-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 4px 4px 28px 76px; }
.clx-k { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; margin-bottom: 14px; font-size: 15px; font-weight: 700; }
.clx-k small { font-size: 12.5px; font-weight: 500; color: var(--ink-soft); }
.clx-cmp .cpp-bigs { margin-top: 18px; }
.clx-cmp .kb b { font-size: clamp(22px, 2.3vw, 30px); }
.clx-foot { display: flex; justify-content: center; margin-top: 20px; }
@media (min-width: 900px) { .clx-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; } }
@media (max-width: 700px) {
  .clx-top { grid-template-columns: 44px minmax(0, 1fr) auto 36px; grid-template-areas: "logo name name pm" "logo big save save"; gap: 6px 12px; padding: 14px 2px; }
  .clx-top .cl-logo { width: 44px; height: 44px; border-radius: 13px; align-self: start; }
  .clx-top .clx-pm { --pm: 32px; }
  .clx-big { justify-self: start; } .clx-big b { font-size: 34px; }
  .clx-save { justify-self: end; align-self: end; }
  .clx-grid { padding: 2px 2px 24px; }
}
.cpp-bigs { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
@media (max-width: 520px) { .cpp-bigs .kb.is-hon:nth-child(3) { grid-column: 1 / -1; } }
.kb { display: grid; gap: 2px; padding: 14px 16px; border-radius: 18px; background: var(--wax-2); }
.sec-alt .kb { background: var(--card); }
.kb b { font-size: clamp(28px, 3.6vw, 38px); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; }
.kb span { font-size: 13px; color: var(--ink-soft); }
.kb.is-hon { background: var(--honey); color: var(--on-honey); }
.kb.is-hon span { color: inherit; opacity: .8; }
.cpp-ms { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 6px; height: 180px; }
.cm { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0; height: 100%; }
.cm b { margin-bottom: 3px; font-size: 12.5px; font-weight: 700; }
.cm i { position: relative; display: block; width: min(100%, 34px); height: calc((100% - 58px) * var(--h)); min-height: 3px; border-radius: 6px 6px 2px 2px;
  background: repeating-linear-gradient(180deg, transparent 0 5px, color-mix(in srgb, var(--card) 30%, transparent) 5px 6px), linear-gradient(180deg, var(--honey), color-mix(in srgb, var(--honey) 14%, transparent));
  box-shadow: inset 0 2px 0 color-mix(in srgb, #FFFFFF 55%, var(--honey)), 0 -6px 16px -6px color-mix(in srgb, var(--honey) 70%, transparent);
  transform-origin: 50% 100%; transition: transform .85s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--k) * 70ms + 60ms); }
.cm.is-before i { background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 32%, transparent), color-mix(in srgb, var(--ink) 6%, transparent)); box-shadow: inset 0 2px 0 color-mix(in srgb, var(--ink) 40%, transparent); }
.cm span { margin-top: 4px; font: 500 11px var(--font-mono); color: var(--ink-soft); }
.cm small { font: 500 10.5px var(--font-mono); color: var(--ink-faint); }
.cm.is-after small { color: var(--ok); font-weight: 600; }
.viz .cpp-ms:not(.is-on) .cm i { transform: scaleY(0); }
.pop-fine { font-size: 12px; line-height: 1.6; color: var(--ink-faint); }
@media (max-width: 480px) { .cpp-ms { gap: 3px; height: 160px; } .cm b { font-size: 11px; } .cm small { font-size: 9.5px; } .cm span { font-size: 10px; } }

/* 成效報表：每個數字都畫成圖 */
.rp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 900px) { .rp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rp { padding: 24px; } }
.rp { display: grid; gap: 16px; align-content: start; min-width: 0; padding: 20px 18px; border-radius: 24px; background: var(--card); box-shadow: var(--shadow-sm); }
.rp-head { display: flex; align-items: center; gap: 10px; }
.rp-head > div { margin-right: auto; min-width: 0; }
.rp-head .av { width: 38px; height: 38px; }
.rp-head b { display: block; font-size: 18px; }
.rp-head div span { font-size: 13px; color: var(--ink-soft); }
.rp-when { flex: none; padding: 3px 10px; border-radius: 999px; background: var(--comb); color: var(--amber); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.rp-bigs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rp-big { display: grid; grid-template-rows: auto auto 1fr; gap: 3px; min-width: 0; padding: 12px 11px; border-radius: 16px; background: var(--wax-2); }
.rp-bv { font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; line-height: 1.1; letter-spacing: -.01em; white-space: nowrap; }
.rp-bv small { margin-left: 2px; font-size: 13px; font-weight: 700; }
.rp-bl { font-size: 12px; line-height: 1.35; color: var(--ink-soft); }
.rpv { display: grid; align-content: end; gap: 6px; min-width: 0; margin-top: 8px; }
.rpv-lg { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 11px; line-height: 1.4; color: var(--ink-soft); }
.rpv-lg span { display: inline-flex; align-items: center; gap: 4px; }
.rpv-lg i { width: 8px; height: 8px; border-radius: 50%; }
/* 一個點是一位客人 */
.rpv-dots { display: block; width: 100%; height: auto; clip-path: inset(0 0 0 0); transition: clip-path 1.5s var(--ease-out) .1s; }
.viz .rp:not(.is-on) .rpv-dots { clip-path: inset(0 0 100% 0); }
.rpv-dots .dp-0, .rpv-lg i.dp-0 { fill: var(--honey-deep); background: var(--honey-deep); }
.rpv-dots .dp-1, .rpv-lg i.dp-1 { fill: var(--ink); background: var(--ink); }
/* 跟一般行情比 */
.rpv-bm { display: grid; gap: 6px; }
.rb { display: grid; gap: 2px; }
.rb i { display: block; width: calc(var(--w) * 100%); height: 9px; border-radius: 5px; background: color-mix(in srgb, var(--ink) 22%, transparent); transition: width .9s var(--ease-out); }
.rb.is-us i { background: linear-gradient(90deg, color-mix(in srgb, var(--honey) 45%, transparent), var(--honey)); transition-delay: .3s; }
.viz .rp:not(.is-on) .rb i { width: 0; }
.rb em { font-size: 11px; font-style: normal; color: var(--ink-soft); white-space: nowrap; }
/* 連續成長：一格一個月，越來越高 */
.rpv-st { display: flex; align-items: flex-end; gap: 4px; height: 54px; }
.rpv-st i { flex: 1; height: calc(var(--h) * 100%); border-radius: 4px 4px 2px 2px; background: var(--honey); transform-origin: 50% 100%; transition: transform .45s var(--ease-out); transition-delay: calc(var(--k) * .12s + .1s); }
.viz .rp:not(.is-on) .rpv-st i { transform: scaleY(0); }
/* 比上個月：兩根柱子 */
.rpv-up { display: flex; align-items: flex-end; gap: 6px; height: 74px; }
.ru { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; flex: 1; min-width: 0; height: 100%; }
.ru b { font-size: 12.5px; }
.ru i { display: block; width: min(100%, 34px); height: calc((100% - 34px) * var(--h)); border-radius: 6px 6px 3px 3px; background: color-mix(in srgb, var(--ink) 22%, transparent); transition: height .8s var(--ease-out) .1s; }
.ru.is-curr i { background: linear-gradient(180deg, var(--honey), color-mix(in srgb, var(--honey) 38%, transparent)); transition-delay: .35s; }
.viz .rp:not(.is-on) .ru i { height: 0; }
.ru small { margin-top: 3px; font-size: 11px; color: var(--ink-soft); }
.ru-arrow { align-self: center; color: var(--ink-faint); }
.ru-arrow .ico { width: 16px; height: 16px; }
@media (max-width: 560px) {
  .rp-bigs { grid-template-columns: minmax(0, 1fr); }
  .rp-big { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); grid-template-rows: auto 1fr; grid-template-areas: "v vis" "l vis"; column-gap: 12px; align-items: start; }
  .rp-bv { grid-area: v; }
  .rp-bl { grid-area: l; }
  .rpv { grid-area: vis; margin-top: 0; }
}
.rp-k { margin: 0 0 8px; font-size: 13.5px; font-weight: 700; color: var(--ink-soft); }
.rp-k b { color: var(--ok); }
.rp-bar { display: grid; grid-template-columns: 3em minmax(0, 1fr) 3em; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; color: var(--ink-soft); }
.rp-bar > i { display: block; height: 14px; border-radius: 7px; background: var(--wax-2); overflow: hidden; }
.rp-bar > i > i { display: block; height: 100%; width: calc(var(--w) * 100%); border-radius: 7px; background: color-mix(in srgb, var(--ink) 24%, transparent); transition: width 1s var(--ease-out); transition-delay: calc(var(--k) * .25s + .2s); }
.rp-bar.is-curr > i > i { background: var(--honey); }
.viz .rp:not(.is-on) .rp-bar > i > i { width: 0; }
.rp-bar b { text-align: right; font-size: 15px; font-weight: 700; color: var(--ink); }
.rp-fnplot { position: relative; }
.rp-fn { display: block; width: 100%; height: 96px; overflow: visible; clip-path: inset(-6px -6px -6px 0); transition: clip-path 1.6s var(--ease-out) .2s; }
.viz .rp:not(.is-on) .rp-fn { clip-path: inset(-6px 100% -6px 0); }
.rp-fn-a { transition: opacity .8s ease .8s; }
.rp-fn-l { fill: none; stroke: var(--honey-deep); stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.viz .rp:not(.is-on) .rp-fn-a { opacity: 0; }
.rp-fn-d { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--card); border: 2px solid var(--honey-deep); transition: opacity .3s, transform .4s var(--ease-spring); transition-delay: calc(var(--k) * .3s + .3s); }
.viz .rp:not(.is-on) .rp-fn-d { opacity: 0; transform: scale(.3); }
.rp-fn-x { position: relative; height: 34px; margin-top: 2px; }
.rp-fn-x span { position: absolute; top: 0; transform: translateX(-50%); font-size: 11.5px; color: var(--ink-soft); text-align: center; white-space: nowrap; transition: opacity .3s; transition-delay: calc(var(--k) * .3s + .4s); }
.viz .rp:not(.is-on) .rp-fn-x span { opacity: 0; }
.rp-fn-x span:first-child { transform: none; text-align: left; }
.rp-fn-x span:last-child { transform: translateX(-100%); text-align: right; }
.rp-fn-x b { display: block; font-size: 13px; color: var(--ink); }
.rp-next { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--comb); font-size: 13.5px; line-height: 1.55; }
.rp-next .ico { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--amber); }
/* 報表卡：Framer 的深色儀表板（黑底、細線框、亮色往右淡進黑底的漸層長條、等寬小字、虛線格線）；淺色、深色主題都是深色卡 */
.rp {
  --ink: #F5F5F7; --ink-soft: #A1A1A6; --ink-faint: #6E6E73; --card: #0C0C0E; --wax-2: rgba(255, 255, 255, .035); --rule: rgba(255, 255, 255, .08);
  --comb: rgba(235, 200, 126, .1); --amber: #EFCC8E; --ok: #7FD3A0; --honey-deep: #F5D38A; --grid: rgba(255, 255, 255, .09); --tick: #8E8E96; --glr: 24px;
  color: var(--ink); border: 1px solid rgba(255, 255, 255, .08);
  background: radial-gradient(120% 55% at 50% -12%, rgba(235, 200, 126, .08), transparent 62%), linear-gradient(180deg, #141416, #070708 72%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 60px -34px rgba(0, 0, 0, .55);
}
.rp-head { padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.rp-head .av { background: #FFFFFF; }
.rp-when { padding: 2px 10px; border: 1px solid color-mix(in srgb, var(--honey) 45%, transparent); background: transparent; color: var(--honey); font: 600 11.5px/1.6 var(--font-mono); letter-spacing: .02em; }
/* 三個大數字：連成一排的格子，中間細線隔開（Framer Analytics 的數字列） */
.rp-bigs { gap: 0; border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, .03), transparent); }
.rp-big { border-radius: 0; background: transparent; padding: 14px 14px 12px; }
.rp-big + .rp-big { border-left: 1px solid var(--rule); }
.rp-bl { font: 500 11.5px/1.4 var(--font-mono); letter-spacing: .02em; }
.rpv-dots .dp-0, .rpv-lg i.dp-0 { fill: var(--honey); background: var(--honey); }
.rpv-dots .dp-1, .rpv-lg i.dp-1 { fill: #E6E6EB; background: #E6E6EB; }
.rb i { --hc: #7A7A82; position: relative; height: 14px; border-radius: 7px; overflow: hidden; background: var(--fx-bar); }
.rb.is-us i { --hc: var(--honey); background: var(--fx-bar); box-shadow: -2px 0 18px -6px color-mix(in srgb, var(--honey) 75%, transparent); }
.rb em { font-family: var(--font-mono); font-size: 10.5px; }
.rpv-st i { --hc: var(--honey); background: var(--fx-bar-v); box-shadow: 0 -6px 18px -8px var(--honey); }
.ru i { --hc: #7A7A82; position: relative; overflow: hidden; background: var(--fx-bar-v); }
.ru.is-curr i { --hc: var(--honey); background: var(--fx-bar-v); box-shadow: 0 -8px 22px -10px var(--honey); }
.ru small, .rpv-lg { font-family: var(--font-mono); }
.rp-k { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.rp-bar > i { height: 18px; border-radius: 9px; border: 0; background: none; overflow: visible; }
.rp-bar > i > i { --hc: #7A7A82; position: relative; overflow: hidden; border-radius: 9px; background: var(--fx-bar); }
.rp-bar.is-curr > i > i { --hc: var(--honey); background: var(--fx-bar); box-shadow: -2px 0 18px -6px color-mix(in srgb, var(--honey) 75%, transparent); }
/* 報表卡裡的蜂蜜色長條也掃過一道光 */
.rb.is-us i::before, .rp-bar.is-curr > i > i::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 36%; background: linear-gradient(100deg, transparent 10%, rgba(255, 255, 255, .5) 50%, transparent 90%); transform: translateX(-130%); }
.ru.is-curr i::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40%; background: linear-gradient(180deg, transparent 10%, rgba(255, 255, 255, .5) 50%, transparent 90%); transform: translateY(-130%); }
.rp.is-live.is-on .rb.is-us i::before, .rp.is-live.is-on .rp-bar.is-curr > i > i::before { animation: bar-shine 4.6s cubic-bezier(.5, 0, .3, 1) 1.4s infinite; }
.rp.is-live.is-on .ru.is-curr i::before { animation: bar-shine-v 4.6s cubic-bezier(.5, 0, .3, 1) 1.4s infinite; }
.rp-bar span { font: 500 11.5px var(--font-mono); }
/* 影片留存：面積淡到黑、亮線、虛線格線（Cerebrium） */
.rp-fnbox { padding: 14px 14px 4px; border: 1px solid var(--rule); border-radius: 16px; background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent); }
.rp-fn-g line { stroke: var(--grid); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.rp-fn-l { stroke: var(--honey); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--honey) 75%, transparent)); }
.rp-fn-d { background: var(--card); border-color: var(--honey); box-shadow: 0 0 10px color-mix(in srgb, var(--honey) 60%, transparent); }
.rp-fn-x span { font: 500 10.5px/1.35 var(--font-mono); color: var(--tick); }
.rp-fn-x b { font: 600 13px var(--font-num); color: var(--ink); }
.rp-next { border: 1px solid color-mix(in srgb, var(--honey) 24%, transparent); background: color-mix(in srgb, var(--honey) 8%, transparent); color: var(--ink); }
.rp-next .ico { color: var(--honey); }
@media (max-width: 560px) { .rp-big + .rp-big { border-left: 0; border-top: 1px solid var(--rule); } }

/* 短影音、帳號卡片 */
.rl { display: grid; align-content: start; min-width: 0; border-radius: 20px; overflow: hidden; background: var(--card); box-shadow: var(--shadow-sm); color: inherit; text-decoration: none; transition: transform .25s var(--ease-out), box-shadow .3s; }
.rl-thumb { position: relative; display: block; aspect-ratio: 9 / 14; background: linear-gradient(160deg, #2C2C31, #101012); overflow: hidden; }
.rl-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rl-plat { position: absolute; left: 10px; top: 10px; padding: 2px 9px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 11.5px; font-weight: 700; }
.rl-body { display: grid; gap: 5px; padding: 12px 14px 14px; }
.rl-body > b { font-size: 14.5px; line-height: 1.35; }
.rl-cap { font-size: 13px; line-height: 1.5; color: var(--ink-soft); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rl-stats { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--ink-soft); }
.rl-stats b { margin-right: 3px; font-size: 14px; color: var(--ink); }
.rl-stats .is-cpa b { color: var(--amber); }
@media (hover: hover) and (pointer: fine) { .rl:hover { transform: translateY(-4px); box-shadow: var(--shadow); } }

/* 做過的 IP 規劃：五個產業分頁 */
.ipx-picks { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ipx-picks button { min-height: 40px; padding: 0 15px; border-radius: 999px; border: 1.5px solid var(--rule); background: var(--card); color: var(--ink-soft); font: 700 14px var(--font-body); cursor: pointer; transition: border-color .2s, background-color .2s, color .2s, transform .15s var(--ease-out); }
.ipx-picks button[aria-selected="true"] { border-color: var(--honey); background: var(--comb); color: var(--ink); }
.ipx-picks button:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) { .ipx-picks button:not([aria-selected="true"]):hover { border-color: var(--ink-faint); color: var(--ink); } }
.ipx-card { padding: 20px 18px; border-radius: 24px; background: var(--card); border: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); }
.ipx-card.is-in { animation: cp-in .4s var(--ease-out); }
.ipx-who { display: grid; gap: 2px; }
.ipx-who span, .ipx-aud span { margin-right: 8px; font-size: 12.5px; font-weight: 700; color: var(--amber); }
.ipx-who b { font-size: clamp(19px, 2.4vw, 24px); line-height: 1.35; text-wrap: balance; }
.ipx-aud { margin: 8px 0 0; font-size: 14px; color: var(--ink-soft); }
.ipx-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 16px; }
.ipx-box { min-width: 0; padding: 14px 16px; border-radius: 16px; background: var(--wax-2); }
.ipx-box h5 { margin: 0 0 10px; font-size: 13px; color: var(--ink-soft); }
.ipx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ipx-chips span { padding: 4px 11px; border-radius: 999px; background: var(--card); font-size: 13px; font-weight: 600; }
.ipx-layers { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ipx-layers li { padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--honey) calc(16% + var(--k) * 16%), var(--card)); font-size: 13.5px; line-height: 1.45; }
.ipx-funnel { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: f; }
.ipx-funnel li { counter-increment: f; display: flex; align-items: center; gap: 9px; font-size: 13.5px; line-height: 1.4; }
.ipx-funnel li::before { content: counter(f); flex: none; display: grid; place-items: center; width: 22px; height: 25px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--honey); color: var(--on-honey); font: 800 12px var(--font-num); }
.ipx-topics { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ipx-topics li { display: flex; gap: 8px; font-size: 14px; font-weight: 600; line-height: 1.45; }
.ipx-topics .ico { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--amber); }
@media (min-width: 800px) { .ipx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ipx-card { padding: 26px 28px; } }
/* IP 方向模擬器：輸入產業 → 一份方向藍圖（先看反差定位、五層人設、示範題目，其他收在 ＋ 裡） */
.ipg { display: grid; gap: 12px; padding: clamp(16px, 2.4vw, 26px); border-radius: var(--r-xl); background: var(--wax-2); }
.ipg-form { display: flex; gap: 8px; }
.ipg-form .input { flex: 1; min-width: 0; min-height: 50px; font-size: 16px; border-radius: 999px; padding-inline: 20px; }
.ipg-form .btn { flex: none; min-height: 50px; }
.ipg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ipg-row > span { flex: none; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.ipg-chips, .ipg-roles { display: flex; flex-wrap: wrap; gap: 6px; }
.ipg-chip, .ipg-role { min-height: 34px; padding: 0 13px; border-radius: 999px; border: 1.5px solid var(--rule); background: var(--card); color: var(--ink-soft); font: 600 13.5px var(--font-body); cursor: pointer; transition: border-color .2s, background-color .2s, color .2s, transform .15s var(--ease-out); }
.ipg-chip[aria-pressed="true"], .ipg-role[aria-checked="true"] { border-color: var(--honey); background: var(--honey); color: var(--on-honey); }
.ipg-chip:active, .ipg-role:active { transform: scale(.95); }
@media (hover: hover) and (pointer: fine) { .ipg-chip:hover, .ipg-role:hover { border-color: var(--ink-faint); color: var(--ink); } }
.ipg-out { margin-top: 6px; transition: opacity .3s; }
.ipg-out.is-busy .ipb { opacity: .55; transition: opacity .3s; }
.ipg-ai { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13.5px; font-weight: 700; color: var(--amber); }
.ipg-ai::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: ipg-spin .8s linear infinite; }
@keyframes ipg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ipg-ai::before { animation: none; } }
.ipf { display: inline-block; min-width: 2.4em; margin: 0 2px; padding: 0 5px; border-radius: 6px; border-bottom: 2px dashed var(--honey-deep); background: color-mix(in srgb, var(--honey) 22%, transparent); color: inherit; text-align: center; line-height: 1.35; }
.ipb { display: grid; gap: 22px; padding: clamp(18px, 2.6vw, 32px); border-radius: var(--r-xl); background: var(--card); box-shadow: var(--shadow-sm); }
.ipb-head { display: grid; gap: 4px; justify-items: start; }
.ipb-badge { padding: 2px 10px; border-radius: 999px; background: var(--ink); color: var(--wax); font-size: 12px; font-weight: 700; }
.ipb-head h5 { margin: 0; font-size: clamp(22px, 3vw, 30px); line-height: 1.25; }
.ipb-head small { font-size: 13px; color: var(--ink-soft); }
.ipb-k { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 800; color: var(--ink-soft); }
.ipb-flip { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ipb-myth { padding: 16px 18px; border-radius: 20px; background: var(--wax-2); }
.ipb-myth ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ipb-myth li { font-size: 15px; color: var(--ink-faint); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); text-decoration-thickness: 2px; }
.ipb-arrow { display: grid; place-items: center; }
.ipb-arrow span { display: inline-grid; place-items: center; width: 64px; height: 72px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--honey); color: var(--on-honey); font-size: 14px; font-weight: 800; }
.ipb-who { padding: 18px 20px; border-radius: 20px; background: linear-gradient(135deg, color-mix(in srgb, var(--honey) 30%, var(--card)), var(--card) 70%); box-shadow: inset 0 0 0 2px var(--honey); }
.ipb-who > b { display: block; font-size: clamp(21px, 2.8vw, 28px); line-height: 1.3; text-wrap: balance; }
.ipb-who p { margin-top: 8px; font-size: 15px; line-height: 1.6; }
.ipb-who p span, .ipb-share span { display: inline-block; margin-right: 8px; font-size: 12.5px; font-weight: 800; color: var(--amber); }
.ipb-aud { color: var(--ink-soft); }
.ipb-sec { display: grid; gap: 12px; }
.ipb-sec h6 { display: grid; gap: 2px; margin: 0; font-size: 18px; }
.ipb-sec h6 small { font-size: 12.5px; font-weight: 500; color: var(--ink-soft); }
.ipb-tags { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.ipb-tags li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 14px; border-radius: 18px; background: var(--wax-2); }
.ipb-hx { position: relative; display: grid; place-items: center; width: 40px; height: 44px; }
.ipb-hx svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--honey); }
.ipb-hx i { position: relative; font: 800 15px/1 var(--font-num); font-style: normal; color: var(--on-honey); }
.ipb-tags b { font-size: 15px; }
.ipb-tags small { margin-left: 8px; font-size: 12px; color: var(--ink-soft); }
.ipb-tags p { margin-top: 2px; font-size: 14.5px; line-height: 1.55; }
.ipb-pools { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.ipb-pool { display: grid; gap: 6px; align-content: start; padding: 14px 16px; border-radius: 18px; border: 1.5px solid var(--rule); }
.ipb-pool.is-main { border-color: color-mix(in srgb, var(--honey) 70%, transparent); background: color-mix(in srgb, var(--honey) 8%, var(--card)); }
.ipb-pool.is-out { border-color: color-mix(in srgb, var(--sky) 45%, transparent); background: color-mix(in srgb, var(--sky) 6%, var(--card)); }
.ipb-pk { justify-self: start; padding: 1px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; background: var(--honey); color: var(--on-honey); }
.ipb-pool.is-out .ipb-pk { background: var(--sky); color: #fff; }
.ipb-pool b { font-size: 16px; }
.ipb-pool p { font-size: 14px; line-height: 1.55; }
.ipb-share { color: var(--ink-soft); }
.ipb-reels { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.ipb-reel { position: relative; flex: none; display: grid; align-content: end; width: 148px; aspect-ratio: 9 / 16; padding: 12px; border-radius: 18px; overflow: hidden; scroll-snap-align: start; color: #fff;
  background: radial-gradient(120% 80% at 20% 0%, color-mix(in srgb, var(--honey) 55%, #2A2015) 0%, #17130B 58%, #0B0A08 100%); }
.ipb-reel:nth-child(2n) { background: radial-gradient(120% 80% at 80% 0%, #3A2A6A 0%, #15121F 60%, #0A0910 100%); }
.ipb-reel:nth-child(3n) { background: radial-gradient(120% 80% at 50% 0%, #1F4C66 0%, #0F1A22 60%, #07090C 100%); }
.ipb-reel b { font-size: 16px; line-height: 1.4; text-wrap: balance; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.ipb-reel .ipf { border-bottom-color: #F6D998; background: rgba(246, 217, 152, .25); }
.ipb-ep { position: absolute; top: 10px; left: 10px; padding: 1px 8px; border-radius: 999px; background: rgba(255, 255, 255, .16); font-size: 11px; font-weight: 700; }
.ipb-play { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.ipb-play .ico { width: 14px; height: 14px; }
.ipb-script { list-style: none; margin: 0; padding: 0 0 0 4px; display: grid; gap: 0; position: relative; }
.ipb-script li { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 10px 0 10px 0; border-top: 1px dashed var(--rule); }
.ipb-script li:first-child { border-top: 0; }
.ipb-bt { justify-self: start; align-self: start; padding: 2px 10px; border-radius: 999px; background: var(--wax-2); font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.ipb-script li.is-0 .ipb-bt { background: var(--ink); color: var(--wax); }
.ipb-script li.is-1 .ipb-bt { background: var(--honey); color: var(--on-honey); }
.ipb-script li.is-3 .ipb-bt { background: color-mix(in srgb, var(--flame) 85%, #fff); color: #fff; }
.ipb-script li.is-6 .ipb-bt { background: color-mix(in srgb, var(--sky) 85%, #fff); color: #fff; }
.ipb-script p { font-size: 15px; line-height: 1.65; }
.ipb-script li.is-0 p { font-weight: 800; font-size: 16px; }
.ipb-core { display: grid; gap: 6px; padding: 14px 16px; border-radius: 18px; background: var(--ink); color: var(--wax); }
.ipb-core b { font-size: 14px; color: var(--honey); }
.ipb-core ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ipb-core li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.55; }
.ipb-core li::before { content: "→"; position: absolute; left: 0; color: var(--honey); font-weight: 800; }
.ipb-core .ipf { color: var(--wax); }
.ipb-funnel { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.ipb-funnel li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: color-mix(in srgb, var(--honey) calc(10% + var(--k) * 14%), var(--card)); font-size: 14.5px; font-weight: 600; }
.ipb-funnel li span { display: grid; place-items: center; flex: none; width: 24px; height: 27px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--ink); color: var(--wax); font-size: 12px; font-weight: 800; }
.ipb-foot { display: grid; gap: 12px; justify-items: start; padding-top: 16px; border-top: 1px solid var(--rule); }
.ipb-foot p { font-size: 14px; color: var(--ink-soft); }
/* 生成時：一段一段長出來 */
.ipb > * { transition: opacity .45s var(--ease-out), transform .55s var(--ease-out); }
.ipb > :nth-child(2) { transition-delay: .08s; } .ipb > :nth-child(3) { transition-delay: .16s; } .ipb > :nth-child(4) { transition-delay: .24s; } .ipb > :nth-child(5) { transition-delay: .32s; } .ipb > :nth-child(6) { transition-delay: .4s; } .ipb > :nth-child(7) { transition-delay: .48s; } .ipb > :nth-child(8) { transition-delay: .56s; }
.viz .ipb:not(.is-on) > * { opacity: 0; transform: translateY(12px); }
@media (min-width: 760px) {
  .ipb-flip { grid-template-columns: minmax(0, .8fr) auto minmax(0, 1.2fr); align-items: center; }
  .ipb-arrow span { width: 70px; height: 78px; }
  .ipb-tags { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ipb-tags li:nth-child(5) { grid-column: 1 / -1; }
  .ipb-pools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ipb-funnel { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ipb-reel { width: 168px; aspect-ratio: 4 / 5; }
}
@media (min-width: 1000px) { .ipb-tags { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ipb-tags li:nth-child(5) { grid-column: auto; } }
@media (max-width: 520px) { .ipg-form { flex-direction: column; } .ipg-form .btn { width: 100%; } .ipb-script li { grid-template-columns: minmax(0, 1fr); gap: 4px; } .ipb-arrow span { width: 54px; height: 60px; } }

/* 官網作品 */
.ws-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 18px; }
.ws { position: relative; display: grid; gap: 12px; align-content: start; min-width: 0; padding: 14px 14px 16px; border-radius: 22px; background: var(--card); box-shadow: var(--shadow-sm); color: inherit; text-decoration: none; transition: transform .25s var(--ease-out), box-shadow .3s; }
.ws-frame { position: relative; display: block; aspect-ratio: 16 / 11; border-radius: 12px; overflow: hidden; background: var(--wax-2); border: 1px solid var(--rule); }
.ws-dots { display: flex; gap: 5px; height: 22px; align-items: center; padding: 0 10px; background: var(--wax-2); border-bottom: 1px solid var(--rule); }
.ws-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--rule); }
.ws-frame img { display: block; width: 100%; height: calc(100% - 22px); object-fit: cover; object-position: top; }
.ws-ph { display: grid; place-items: center; height: calc(100% - 22px); color: var(--ink-faint); }
.ws-ph .ico { width: 40px; height: 40px; }
.ws-phone { position: absolute; right: 22px; top: 60px; width: 25%; aspect-ratio: 9 / 18; border-radius: 14px; border: 4px solid #121214; overflow: hidden; background: #121214; box-shadow: var(--shadow); transition: transform .3s var(--ease-out); }
.ws-phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ws-body { display: grid; gap: 1px; }
.ws-body b { font-size: 16px; }
.ws-body span { font-size: 13px; color: var(--ink-soft); }
.ws-body .ws-url { font-weight: 700; color: var(--amber); }
@media (hover: hover) and (pointer: fine) { .ws:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .ws:hover .ws-phone { transform: translateY(-6px) rotate(-2deg); } }
@media (min-width: 640px) { .ws-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .ws-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- 方案：四張卡並排（上一版的卡片，精簡到一般電腦一眼看完） ----------
   月費、照試算一年省多少、月費包含的服務（每一項多少錢；滑鼠移上去看在做什麼）、用這個方案試算 */
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 22px 20px 20px; border-radius: var(--r-xl); background: var(--card); box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.plan.has-tag { box-shadow: 0 0 0 2px var(--honey), 0 26px 54px -32px var(--honey-glow); }
.plan-tag { position: absolute; top: 16px; right: 16px; background: var(--honey); color: var(--on-honey); }
.plan-head { display: flex; align-items: center; gap: 10px; padding-right: 44px; }
.plan-head .gem { width: 34px; height: 34px; }
.plan-head h3 { font-size: 21px; }
.plan-aud { font-size: 13px; line-height: 1.4; color: var(--ink-soft); }
.plan-price { display: flex; align-items: baseline; gap: 3px; }
.plan-price .roll { font-size: clamp(34px, 3.1vw, 44px); font-weight: 700; letter-spacing: -.025em; }
.plan-price small { font-size: 15px; color: var(--ink-soft); }
.plan-alt { display: grid; gap: 2px; margin-top: -6px; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }
.plan-alt b { color: var(--amber); }
/* 實際是季繳：月費下面寫「每季收多少」 */
.plan-alt .pb { font-size: 14px; font-weight: 700; color: var(--ink); }
.plan-alt .pb b { font-size: 15.5px; }
.plan-alt .pb small { font-size: 12px; font-weight: 500; color: var(--ink-soft); }
.plan-alt .pb-s { font-size: 12px; color: var(--ink-soft); }
.plan-extra { min-height: 64px; }
.px-base { padding-top: 6px; font-size: 13px; line-height: 1.55; color: var(--ink-faint); }
.px-up { display: grid; padding: 10px 12px; border-radius: 14px; background: var(--comb); }
.px-l { font-size: 12px; line-height: 1.45; color: var(--amber); font-weight: 700; }
.px-v { font-size: 24px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
.px-tip { display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; border: 1.5px dashed var(--rule); }
.px-tip .px-l { color: var(--ink-soft); font-weight: 600; }
.px-t { font-size: 14px; font-weight: 700; line-height: 1.45; }
.plan-sec { display: grid; gap: 8px; align-content: start; padding-top: 12px; border-top: 1px solid var(--rule); }
.plan-sec h4 { font: 500 11px var(--font-mono); letter-spacing: .08em; color: var(--ink-faint); }
.plan-inc { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 13.5px; font-weight: 700; }
.plan-inc .gem { width: 18px; height: 18px; flex: none; }
.plan-inc b { margin-left: auto; font: 600 13px var(--font-num); color: var(--ink-soft); }
.plan-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.plan-feats li { position: relative; display: flex; align-items: baseline; gap: 8px; padding: 4px 0; font-size: 14px; line-height: 1.45; outline: none; }
.plan-feats .sw { flex: none; width: 7px; height: 7px; border-radius: 2px; background: var(--honey); transform: translateY(-1px); }
.plan-feats li > b { min-width: 0; font-weight: 600; }
.pf-p { flex: none; margin-left: auto; font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--amber); white-space: nowrap; }
.plan-feats li.has-note { cursor: help; }
.plan-feats li.has-note > b { text-decoration: underline dotted color-mix(in srgb, var(--ink) 32%, transparent); text-underline-offset: 4px; }
.pf-note { position: absolute; z-index: 9; left: -10px; right: -10px; top: calc(100% + 2px); padding: 10px 12px; border-radius: 12px; background: var(--ink); color: var(--wax); font-size: 12.5px; font-weight: 500; line-height: 1.6; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .16s, transform .22s var(--ease-out), visibility 0s .22s; }
@media (hover: hover) and (pointer: fine) { .plan-feats li.has-note:hover .pf-note { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } }
.plan-feats li.has-note:focus-visible .pf-note, .plan-feats li.is-open .pf-note { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.plan-feats li.has-note:focus-visible > b { color: var(--amber); }
.plan .btn { margin-top: auto; }
.plan.is-flash { animation: plan-flash 1.4s var(--ease-out); }
@keyframes plan-flash { 0%, 30% { box-shadow: 0 0 0 3px var(--honey), var(--shadow); } }
@media (max-width: 1120px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 四張卡並排時，每一段（價格、月費包含、投放規格、按鈕）四張卡對齊在同一條線上，同一列規格一眼比 */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 1121px) {
    .plans { grid-template-rows: repeat(7, auto); row-gap: 0; }
    .plan { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 12px; align-content: start; }
    .plan .btn { margin-top: 4px; align-self: end; }
  }
}
/* 滑鼠移上去：邊框亮起一圈跟著滑鼠走的蜂蜜色光、卡片微微浮起、長條掃過一道光（Framer／Linear 的卡片） */
.plan { isolation: isolate; transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.plan::before, .plan::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s; }
.plan::before {
  z-index: 3; padding: 1.5px;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), var(--honey), color-mix(in srgb, var(--honey) 28%, transparent) 45%, transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.plan::after { z-index: -1; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--honey) 11%, transparent), transparent 70%); }
@media (hover: hover) and (pointer: fine) {
  .plan:hover { transform: translateY(-5px); box-shadow: 0 2px 6px rgba(0, 0, 0, .04), 0 30px 60px -32px rgba(0, 0, 0, .32); }
  .plan.has-tag:hover { box-shadow: 0 0 0 2px var(--honey), 0 32px 64px -28px var(--honey-glow); }
  .plan:hover::before, .plan:hover::after { opacity: 1; }
}
/* 投放規格：一列一個項目，下面一條細長條（越長越多）；捲到才長出來，長出來後掃過一道光；滑鼠移上卡片再掃一次。
   滑鼠移到某一列：四張卡的同一列一起亮，其他列變淡 */
.plan-specs { gap: 4px; }
.meters { display: grid; gap: 1px; margin: 0; }
.mt { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 10px; margin: 0 -8px; padding: 5px 8px 6px; border-radius: 10px; transition: background-color .2s, opacity .2s; }
.mt dt { min-width: 0; font-size: 13px; line-height: 1.4; color: var(--ink-soft); }
.mt dd { margin: 0; font: 600 13px/1.4 var(--font-num); color: var(--ink); text-align: right; white-space: nowrap; transition: color .2s; }
.mt-yes { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-body); }
.mt-yes .ico { width: 15px; height: 15px; color: var(--ok); stroke-width: 2.6; }
.mt-no { font-family: var(--font-body); font-weight: 500; color: var(--ink-faint); }
.mt.is-off dt { color: var(--ink-faint); }
.mt-bar { grid-column: 1 / -1; position: relative; display: block; height: 4px; margin-top: 5px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.mt-bar i { position: relative; display: block; width: calc(var(--w) * 100%); height: 100%; border-radius: 2px; overflow: hidden;
  background: linear-gradient(90deg, color-mix(in srgb, var(--honey) 22%, transparent), var(--honey) 70%, var(--honey-deep));
  transition: width 1s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--k, 0) * 60ms + 80ms); }
.mt-bar::after { content: ""; position: absolute; top: 50%; left: calc(var(--w, 0) * 100%); width: 7px; height: 7px; margin: -3.5px 0 0 -4px; border-radius: 50%; background: var(--honey); box-shadow: 0 0 0 2px var(--card), 0 0 12px 1px color-mix(in srgb, var(--honey) 80%, transparent); transition: left 1s cubic-bezier(.16, 1, .3, 1), opacity .3s; transition-delay: calc(var(--k, 0) * 60ms + 80ms); }
.mt-bar i::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent) no-repeat; background-size: 45% 100%; background-position: -80% 0; }
.meters.is-on .mt-bar i::before { animation: mt-sweep 4.6s cubic-bezier(.5, 0, .3, 1) infinite; animation-delay: calc(var(--k, 0) * 120ms + 900ms); }
@media (hover: hover) and (pointer: fine) { .plan:hover .meters.is-on .mt-bar i::before { animation-name: mt-sweep-b; animation-delay: calc(var(--k, 0) * 45ms); } }
@keyframes mt-sweep { 0% { background-position: -80% 0; } 46%, 100% { background-position: 180% 0; } }
@keyframes mt-sweep-b { 0% { background-position: -80% 0; } 46%, 100% { background-position: 180% 0; } }
.viz .meters:not(.is-on) .mt-bar i { width: 0; }
.viz .meters:not(.is-on) .mt-bar::after { left: 0; opacity: 0; }
.plans.is-rowing .mt:not(.is-row) { opacity: .45; }
.plans.is-rowing .mt.is-row { background: color-mix(in srgb, var(--honey) 17%, transparent); }
.plans.is-rowing .mt.is-row dd { color: var(--amber); }

/* ---------- 一年付給蜂窩多少：方案月費＋服務費的曲線（Cerebrium／Framer 的質感） ---------- */
.fee {
  /* 跟下面「先選方案，再選內容」同一套黑底卡片的做法：黑底、細線框、白字、蜂蜜色重點 */
  --ink: #F5F5F7; --ink-soft: #A1A1A6; --ink-faint: #6E6E73; --card: #0C0C0E; --rule: rgba(255, 255, 255, .09); --wax-2: rgba(255, 255, 255, .04);
  --grid: rgba(255, 255, 255, .11); --tick: #8E8E96; --amber: #EFCC8E; --honey-deep: #F5D38A; --bad: #FF8A8A;
  --rose: var(--rose-band); --sky: var(--sky-band); --violet: var(--violet-band); --graphite: var(--graphite-band); --band-3: #1E1E21;
  display: grid; gap: 16px; margin-top: clamp(28px, 4vw, 44px); padding: clamp(20px, 3vw, 34px); border-radius: 28px; color: var(--ink);
  border: 1px solid rgba(255, 255, 255, .08);
  background: radial-gradient(110% 50% at 50% -8%, rgba(235, 200, 126, .1), transparent 62%), linear-gradient(180deg, #141416, #070708 72%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 40px 80px -40px rgba(0, 0, 0, .55); }
.fee-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px 28px; }
.fee-title { flex: 1 1 520px; min-width: 0; }
.fee-per { flex: none; }
/* v19：圖上每條線的起點（不投廣告時要付的：方案費＋製作）*/
.fe-st { font: 700 11px var(--font-num); fill: var(--band-soft); paint-order: stroke; stroke: #0C0C0E; stroke-width: 3px; stroke-linejoin: round; }
.fee-head h3 { font-size: clamp(22px, 2.6vw, 30px); margin-bottom: 8px; color: var(--ink); }
.fee-head p { max-width: 56em; font-size: 13.5px; line-height: 1.75; letter-spacing: .01em; color: var(--ink-soft); text-wrap: pretty; }   /* v23：小字說明小一號（學小米：標題大、說明小而淡） */
.fee-head p b { color: var(--ink); font-weight: 700; }
.fee-ctls { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.fee-c { display: grid; align-content: start; gap: 6px; min-width: 0; padding: 16px 18px 14px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .08); background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015)); }
.fee-c[hidden] { display: none; }
.fee-ctl { display: flex; align-items: flex-start; gap: 12px; }
/* 標籤最少留 8.5 個字寬（數字很長時標籤不會被擠成直的）；手機兩張並排的小卡片，最少留一半左右就好，數字才放得下 */
.fee-ctl label { display: grid; flex: 1 1 auto; gap: 2px; min-width: min(8.5em, 45%); font-weight: 700; color: var(--ink); }
.fee-ctl label small { font: 500 11.5px/1.45 var(--font-body); color: var(--ink-soft); }
.fee-ctl output { margin-left: auto; font: 800 clamp(24px, 2.6vw, 32px)/1.05 var(--font-num); letter-spacing: -.025em; white-space: nowrap; color: var(--honey); }
/* 單位跟著數字縮小（數字放不下、字變小的時候，「／月」「支」也一起變小，最小 9px） */
.fee-ctl output small { margin-left: 2px; font: 600 min(13px, max(9px, .68em)) var(--font-body); letter-spacing: 0; color: var(--ink-soft); }
.fee-c:not(.is-ad) .fee-ctl output { font-size: clamp(19px, 1.8vw, 24px); color: var(--ink); }
.fee .range { margin: 4px 0 0; }
.fee-ticks { margin: -2px 13px 2px; }
/* 預估找到幾位客人：一塊發光的讀數（小字標題、發光的大數字、下面一行怎麼算的） */
.fee-est { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 2px 12px; min-width: 0; margin-top: 8px; padding: 12px 14px 11px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--honey) 34%, transparent);
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--honey) 15%, transparent), transparent 62%), rgba(255, 255, 255, .02);
  box-shadow: inset 0 1px 0 rgba(255, 236, 170, .08), 0 0 26px -12px color-mix(in srgb, var(--honey) 70%, transparent); }
.fee-est .fe-k { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.fee-est .fe-n { justify-self: end; display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; white-space: nowrap; }
.fee-est .fe-n .num { font: 800 clamp(26px, 2.8vw, 34px)/1 var(--font-num); letter-spacing: -.03em; color: var(--honey); filter: var(--num-glow); }
.fee-est .fe-n small { font: 600 13px var(--font-body); color: var(--ink-soft); }
.fee-est .fe-d { grid-column: 1 / -1; margin-top: 6px; font-size: 11.5px; line-height: 1.5; color: var(--ink-faint); }
.fee-est.is-empty { display: block; border-color: var(--rule); background: none; box-shadow: none; }
.fee-est.is-empty .fe-k { font-weight: 500; color: var(--ink-soft); }
@media (max-width: 420px) { .fee-est { grid-template-columns: minmax(0, 1fr); } .fee-est .fe-n { justify-self: start; } }
.fee-est.is-long { grid-template-columns: minmax(0, 1fr); } .fee-est.is-long .fe-n { justify-self: start; }
.fee-ctl output.is-long { font-size: clamp(20px, 2vw, 25px); }
.fee-ctl output.is-xlong { font-size: 19px; }
.fee-cm { font: 500 11px/1.4 var(--font-mono); letter-spacing: .02em; color: var(--ink-soft); }
.fee-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px 28px; }
.fee-foot .fee-note { flex: 1 1 420px; }
.fee-foot .btn { flex: none; }
@media (max-width: 900px) { .fee-ctls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .fee-c.is-ad { grid-column: 1 / -1; } }
@media (max-width: 520px) { .fee-c { padding: 13px 13px 11px; } .fee-foot .btn { width: 100%; } }
@media (max-width: 340px) { .fee-ctls { grid-template-columns: minmax(0, 1fr); } }
/* 圖：黑底上的四條線，最省的那一段發光，上面還有一顆光點沿著線跑 */
.fee-chart { position: relative; touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; }
/* 拉到哪裡旁邊的小標籤：誰最省、比你選的（或個人版）省多少——深底金框，跟整包曲線、溝通時間曲線上的標籤同一種 */
.fe-pill { position: absolute; z-index: 2; left: 0; top: 0; display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 2px; max-width: calc(100% - 24px); padding: 3px 11px; border-radius: 999px;
  background: rgba(12, 12, 14, .94); border: 1px solid color-mix(in srgb, var(--honey) 55%, transparent); color: #EFCC8E; font: 600 12px/1.5 var(--font-body); white-space: nowrap; pointer-events: none;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .9); transition: left .25s var(--ease-out), top .25s var(--ease-out); }
.fe-pill b { font-weight: 800; color: var(--honey); }
.fe-pill b.num { font-family: var(--font-num); }
.fe-pill.is-sm { font-size: 11.5px; padding: 2px 9px; }
.fee-chart.is-drag .fe-pill { transition: none; }
.fee-chart svg { display: block; overflow: visible; }
.fe-grid line.is-zero { stroke: rgba(255, 255, 255, .34); stroke-dasharray: none; }
.fe-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; opacity: .72; transition: stroke-dashoffset 1.3s var(--ease-out), stroke-width .25s, opacity .25s; }
.fe-line.is-best { stroke-width: 3.2; opacity: 1; }
.fe-line:nth-child(2) { transition-delay: .12s, 0s, 0s; } .fe-line:nth-child(3) { transition-delay: .24s, 0s, 0s; } .fe-line:nth-child(4) { transition-delay: .36s, 0s, 0s; }
.fe-line.tone-rose { stroke: var(--rose); } .fe-line.tone-sky { stroke: var(--sky); } .fe-line.tone-violet { stroke: var(--violet); } .fe-line.tone-graphite { stroke: var(--graphite); }
/* 哪個最省就閃哪個：現在最省的那條線底下一層會呼吸的光暈，一道亮光沿著線跑過去；換了最省的方案，光暈先閃一下再換過去 */
.fe-bglow { fill: none; stroke: var(--honey); stroke-width: 9; stroke-linecap: round; opacity: 0; filter: blur(4px); pointer-events: none; }   /* v23：細一點，交叉的地方不會把旁邊的線蓋掉 */
.fee.is-live.is-on .fe-bglow { animation: fe-pulse 2.2s ease-in-out 1.2s infinite both; }
.fee.is-live.is-on.is-swap .fe-bglow { animation: fe-flash .9s ease-out, fe-pulse 2.2s ease-in-out .9s infinite both; }
@keyframes fe-pulse { 0%, 100% { opacity: .2; } 50% { opacity: .62; } }
@keyframes fe-flash { from { opacity: 1; stroke-width: 26px; } to { opacity: .2; stroke-width: 14px; } }
.fe-brun { fill: none; stroke: #FFF6D6; stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: .1 1; stroke-dashoffset: .1; opacity: 0; filter: drop-shadow(0 0 5px var(--honey)); pointer-events: none; }
.fee.is-live.is-on .fe-brun { animation: fe-brun 3.6s cubic-bezier(.45, 0, .25, 1) 1.8s infinite; }
@keyframes fe-brun { 0% { stroke-dashoffset: .1; opacity: 0; } 8% { opacity: 1; } 66% { stroke-dashoffset: -1; opacity: 1; } 72%, 100% { stroke-dashoffset: -1; opacity: 0; } }
.fe-lab.is-best { font-weight: 800; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--honey) 75%, transparent)); }
.fe-run { position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; pointer-events: none; offset-rotate: 0deg; offset-distance: 0%; opacity: 0;
  background: radial-gradient(closest-side, #FFF6D6, color-mix(in srgb, var(--honey) 85%, transparent) 30%, color-mix(in srgb, var(--honey) 25%, transparent) 62%, transparent); }
.fee.is-live.is-on .fe-run.is-ready { animation: fe-run 3.6s cubic-bezier(.45, 0, .25, 1) 1.8s infinite; }
@media (prefers-reduced-motion: reduce) { .fe-bglow { opacity: .4; animation: none !important; } .fe-brun { display: none; } }
@keyframes fe-run { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 62% { offset-distance: 100%; opacity: 1; } 70%, 100% { offset-distance: 100%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fe-run { display: none; } }
.fe-mark { fill: #0C0C0E; stroke: var(--honey-deep); stroke-width: 2.2; }
/* v23：交叉點旁邊的方案名稱（從這裡開始它最省）；深色描邊，壓在線上也看得清楚 */
.fe-mk-t { font: 700 11px var(--font-body); paint-order: stroke; stroke: #0C0C0E; stroke-width: 3.5px; stroke-linejoin: round; pointer-events: none; }
.fe-mk-t.tone-rose { fill: var(--rose); } .fe-mk-t.tone-sky { fill: var(--sky); } .fe-mk-t.tone-violet { fill: var(--violet); } .fe-mk-t.tone-graphite { fill: var(--graphite); }
.fe-xg { stroke: color-mix(in srgb, var(--honey-deep) 55%, transparent); stroke-width: 1; stroke-dasharray: 2 4; }
.fe-xt text.is-cross { fill: var(--amber); font-weight: 700; }
.fe-lab { font: 600 12px var(--font-body); }
/* v20：線尾下面一行，比個人版省多少（蜂蜜色）；個人版寫「比較基準」、比較貴的寫「多」（灰） */
.fe-lab-s { font: 700 11px var(--font-num); fill: var(--honey); letter-spacing: -.01em; }
@media (max-width: 600px) { .fe-lab-s { font-size: 10.5px; } }
.fe-lab-s.is-base, .fe-lab-s.is-more { fill: var(--band-soft); font-family: var(--font-body); font-weight: 600; }
.fe-lab.tone-rose { fill: var(--rose); } .fe-lab.tone-sky { fill: var(--sky); } .fe-lab.tone-violet { fill: var(--violet); } .fe-lab.tone-graphite { fill: var(--graphite); }
.fe-cur-l { stroke: rgba(255, 255, 255, .4); stroke-width: 1; stroke-dasharray: 2 4; }
.fe-cur-m { fill: var(--honey); stroke: #0C0C0E; stroke-width: 1.5px; stroke-linejoin: round; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--honey) 70%, transparent)); }
.fe-dot { stroke: #0C0C0E; stroke-width: 2.5; transition: r .2s; }
.fe-dot.tone-rose { fill: var(--rose); } .fe-dot.tone-sky { fill: var(--sky); } .fe-dot.tone-violet { fill: var(--violet); } .fe-dot.tone-graphite { fill: var(--graphite); }
.fe-dot.is-best { r: 7px; stroke: var(--honey); stroke-width: 3; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--honey) 80%, transparent)); }
.fe-dot, .fe-lab, .fee-read .cbar { transition: opacity .25s, r .2s; }
.fee.has-focus .fe-line:not(.is-focus), .fee.has-focus .fe-dot:not(.is-focus), .fee.has-focus .fe-lab:not(.is-focus), .fee.has-focus .fe-st:not(.is-focus) { opacity: .18; }
.fee.has-focus .fe-line.is-focus { stroke-width: 3.6; opacity: 1; }
.fee.has-focus .fe-dot.is-focus { r: 7px; }
.fee.has-focus .fee-read .cbar:not(.is-focus) { opacity: .4; }
.fe-marks, .fe-labs, .fe-cur { transition: opacity .5s ease 1.1s; }
/* 讀數：最上面一大塊寫最省的方案、每季總共、每季省多少（一眼看出「每季」）；下面四個方案各一列 */
.fee-read { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding-top: 18px; border-top: 1px solid var(--rule); }
@media (min-width: 1000px) { .fee-read { grid-template-columns: minmax(300px, .9fr) minmax(0, 1.5fr); align-items: stretch; gap: 18px; } }   /* v23：左邊總價卡跟右邊排名一樣高 */
.fr-top { position: relative; display: grid; gap: 10px; align-content: start; padding: 18px 20px 16px; border-radius: 20px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--honey) 45%, transparent);
  background: radial-gradient(120% 90% at 0% 0%, rgba(235, 200, 126, .2), transparent 60%), linear-gradient(180deg, #1A1710, #0C0B08); box-shadow: 0 0 0 1px rgba(235, 200, 126, .08), 0 24px 50px -28px rgba(235, 200, 126, .45); }
.fr-k { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.fr-k small { font-size: 12.5px; font-weight: 600; color: var(--honey); }
.fr-win { display: grid; gap: 4px; }
.fr-wl { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; color: var(--ink-soft); }
.fr-wl .gem { width: 22px; height: 22px; }
.fr-wl b { font-size: 18px; color: var(--ink); }
.fr-wl span { padding: 1px 8px; border-radius: 6px; background: var(--honey); color: var(--on-honey); font-size: 12px; font-weight: 800; }
.fr-wv { display: flex; align-items: baseline; gap: 4px; font: 800 clamp(34px, 3.6vw, 46px)/1.02 var(--font-num); letter-spacing: -.035em; color: var(--ink); }
.fr-wv small { font: 700 16px var(--font-body); letter-spacing: 0; color: var(--ink-soft); }
.fr-save { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px; padding-top: 12px; border-top: 1px dashed color-mix(in srgb, var(--honey) 35%, transparent); }
.fr-save > span { font-size: 14px; font-weight: 700; color: var(--ink); }
.fr-save > b { font: 800 clamp(26px, 2.6vw, 34px)/1 var(--font-num); letter-spacing: -.03em; color: var(--honey); filter: drop-shadow(0 0 14px color-mix(in srgb, var(--honey) 40%, transparent)); }
.fr-save > small { grid-column: 1 / -1; font-size: 12px; line-height: 1.6; letter-spacing: .01em; color: var(--ink-soft); }
.fee-read.is-base .fr-save { grid-template-columns: minmax(0, 1fr); }
.fee-read.is-base .fr-save > b { display: none; }
.fr-mix { margin: 0; font: 500 11px/1.5 var(--font-mono); letter-spacing: .01em; color: var(--ink-faint); }
/* v23：拉高到跟右邊排名一樣高之後：標題在上、「照這組算」貼在最下面，中間那組（方案＋總價＋省多少）放在正中間，不會下面空一大塊 */
@media (min-width: 1000px) {
  .fr-top { grid-template-rows: auto minmax(0, 1fr) auto auto minmax(0, 1fr) auto; }   /* 第 2、5 列是空的：多出來的高度上下平分 */
  .fr-top > .fr-k { grid-row: 1; } .fr-top > .fr-win { grid-row: 3; } .fr-top > .fr-save { grid-row: 4; } .fr-top > .fr-mix { grid-row: 6; }
}
/* v20：排名——最便宜的在最上面；每一列前面一個名次（照目前的順序自動編號） */
.fee-read .fr-list { display: grid; gap: 8px; counter-reset: fr; }
.fee-read .fr-row { counter-increment: fr; }
.fr-row .cb-l::before { content: counter(fr); display: inline-grid; place-items: center; flex: none; width: 19px; height: 19px; margin-right: 2px; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--ink-soft); font: 700 11px/1 var(--font-num); }
.fr-row.is-best .cb-l::before { background: var(--honey); color: var(--on-honey); }
.fee-read .fr-row { --cb: #8E8E96; display: grid; grid-template-columns: minmax(7.5em, 1fr) auto; grid-template-areas: "l v" "t s" "m m"; align-items: center; gap: 6px 14px; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .025); transition: border-color .25s, background-color .25s, opacity .25s; }
.fee-read .fr-row.is-best { --cb: var(--honey); border-color: color-mix(in srgb, var(--honey) 55%, transparent); background: color-mix(in srgb, var(--honey) 8%, rgba(255, 255, 255, .02)); }
.fr-row .cb-l { grid-area: l; font: 600 12px/1.35 var(--font-body); color: var(--ink-soft); }
.fr-row .cb-l b { font-size: 15px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.fr-row .cb-l .gem { width: 18px; height: 18px; }
.fr-row .cb-v { grid-area: v; display: inline-flex; align-items: baseline; gap: 2px; font: 700 clamp(19px, 1.9vw, 23px)/1 var(--font-num); letter-spacing: -.02em; color: var(--ink); }
.fr-row .cb-v small { font: 600 12px var(--font-body); letter-spacing: 0; color: var(--ink-soft); }
.fr-row .cb-t { grid-area: t; height: 10px; margin: 0; border-radius: 5px; background: none; }
.fr-row .cb-t i { --hc: var(--cb); border-radius: 5px; background: var(--fx-bar); }
.fr-row .cb-t::after { display: none; }
.fr-row.is-best .cb-t i { box-shadow: -2px 0 14px -4px color-mix(in srgb, var(--honey) 75%, transparent); }
.fr-row .fr-sv { grid-area: s; justify-self: end; font: 700 12.5px/1 var(--font-num); font-style: normal; color: var(--ink-faint); white-space: nowrap; }
.fr-row .fr-sv.is-up { color: var(--honey); }
.fr-row .fr-sv.is-neg { color: var(--ink-faint); font-weight: 600; }
.fr-row .fr-sv.is-base { font-family: var(--font-body); font-weight: 600; }
.fr-row .fr-m { grid-area: m; font: 500 10.5px/1.5 var(--font-mono); letter-spacing: .01em; color: var(--ink-faint); white-space: normal; }
.fr-best { display: none; flex: none; padding: 0 7px; border-radius: 6px; background: var(--honey); color: var(--on-honey); font: 700 10.5px/1.75 var(--font-body); font-style: normal; letter-spacing: 0; }
.fr-row.is-best .fr-best { display: inline-block; }
.fee-note { font-size: 12.5px; line-height: 1.65; color: var(--ink-soft); text-wrap: pretty; }

/* ---------- 把四個方案的投放規格放在一起比：精簡對照表（推薦的那一欄淡淡的蜂蜜色） ---------- */
.spec-wrap { margin-top: 22px; text-align: center; }
.spec-wrap > summary { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 1.5px solid var(--rule); background: var(--card); cursor: pointer; list-style: none; font-weight: 700; font-size: 15px; transition: border-color .2s; }
.spec-wrap > summary::-webkit-details-marker { display: none; }
.spec-wrap > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft); transform: rotate(45deg) translateY(-2px); transition: transform .25s var(--ease-out); }
.spec-wrap[open] > summary::after { transform: rotate(-135deg); }
@media (hover: hover) and (pointer: fine) { .spec-wrap > summary:hover { border-color: var(--ink-faint); } }
.spec-scroll { margin-top: 14px; overflow-x: auto; border-radius: 22px; background: var(--card); text-align: left; }
.spec-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14px; }
.spec-table th, .spec-table td { padding: 11px 14px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.spec-table thead th { padding-top: 16px; font-size: 14.5px; text-align: center; white-space: nowrap; }
.spec-table thead th .gem { display: block; width: 24px; height: 24px; margin: 0 auto 2px; }
.spec-table tbody th { text-align: left; font-weight: 700; }
.spec-table tbody th small { display: block; font-size: 12px; font-weight: 500; line-height: 1.45; color: var(--ink-soft); }
.spec-table td { text-align: center; font-weight: 700; }
.spec-table td.is-price { font-size: 17px; }
.st-yes { display: inline-flex; align-items: center; gap: 4px; }
.st-yes .ico { width: 16px; height: 16px; color: var(--ok); stroke-width: 2.6; }
.st-no { color: var(--ink-faint); font-weight: 500; }
.st-bar { display: block; width: 78%; height: 5px; margin: 6px auto 0; border-radius: 3px; background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; }
.st-bar i { display: block; width: calc(var(--w) * 100%); height: 100%; border-radius: 3px; background: var(--honey-deep); }
.spec-table .is-hi { background: color-mix(in srgb, var(--honey) 12%, transparent); }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }
.spec-table tr.is-flash th, .spec-table tr.is-flash td { animation: row-flash 1.6s var(--ease-out); }
.spec-table.is-pop { min-width: 560px; }

@keyframes row-flash { 0%, 30% { background: color-mix(in srgb, var(--honey) 38%, transparent); } }

/* ---------- 省錢試算（黑色舞台） ---------- */
.quote-band { background: var(--band); color: var(--band-fg); position: relative; overflow: hidden; overflow: clip; }
.quote-band::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 520px; background: radial-gradient(46% 100% at 50% 0%, color-mix(in srgb, var(--honey) 20%, transparent), transparent 100%); pointer-events: none; }
.quote-band .sec-head p { color: var(--band-soft); }
.quote-band .sec-in { position: relative; }
/* 先選方案、再選內容（手機優先：一欄由上往下；電腦：左邊選、右邊看價格） */
.qx { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 14px; }
.qx-steps { display: grid; gap: 14px; min-width: 0; }
.qx-card { min-width: 0; padding: 18px 16px 16px; border-radius: 24px; background: var(--band-2); border: 1px solid var(--band-rule); }
.qx-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.qx-head h3 { font-size: 20px; margin-right: auto; }
.qx-no { display: inline-grid; place-items: center; flex: none; width: 26px; height: 29px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--honey); color: var(--on-honey); font: 800 14px/1 var(--font-num); }
.seg-sm button { min-height: 32px; padding: 0 14px; font-size: 13.5px; }
.seg-dark { background: var(--band-3); }
.seg-dark button { color: var(--band-soft); }
.seg-dark button[aria-pressed="true"] { color: var(--on-honey); }
.seg-dark .seg-pill { background: var(--honey); }

/* ① 方案：四個大按鈕 */
.pp-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pp { position: relative; display: grid; gap: 4px; align-content: start; min-width: 0; padding: 12px 12px 11px; border-radius: 18px; border: 1.5px solid var(--band-rule); background: var(--band-3); color: var(--band-fg); font: inherit; text-align: left; cursor: pointer; transition: border-color .25s, background-color .25s, transform .2s var(--ease-out); -webkit-tap-highlight-color: transparent; }
.pp-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pp-top .gem { width: 24px; height: 24px; flex: none; }
.pp-top b { font-size: 16px; white-space: nowrap; }
.pp-top em { margin-left: auto; padding: 0 7px; border-radius: 999px; background: var(--band-rule); color: var(--band-soft); font: 700 11px/1.75 var(--font-body); font-style: normal; white-space: nowrap; }
.pp-price { display: flex; align-items: baseline; gap: 2px; }
.pp-price b { font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.pp-price small { font-size: 12.5px; color: var(--band-soft); }
.pp-meta { font-size: 12.5px; color: var(--band-soft); }
.pp[aria-checked="true"] { border-color: var(--honey); background: color-mix(in srgb, var(--honey) 13%, var(--band-3)); box-shadow: 0 14px 30px -20px var(--honey-glow); }
.pp[aria-checked="true"] .pp-price b { color: var(--honey); }
.pp[aria-checked="true"] .pp-meta { color: var(--band-fg); }
.pp[aria-checked="true"] .pp-top em { background: var(--honey); color: var(--on-honey); }
.pp:active { transform: scale(.97); }
.pp:focus-visible { outline: 3px solid var(--honey-deep); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .pp:not([aria-checked="true"]):hover { border-color: var(--band-soft); } }
.pp-terms { display: flex; justify-content: flex-end; margin-top: 10px; }
.pp-fee { display: grid; gap: 1px; }
.pp-fee b { font-size: 14px; color: var(--honey); }
.pp-fee span { font-size: 13px; line-height: 1.55; color: var(--band-soft); }
.pp-more { justify-self: start; display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 13.5px; font-weight: 700; color: var(--band-fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--honey); }

/* ② 內容：每一項直接點數量（一排選項），選項裡沒有的按「自訂」 */
.qx-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 4px; }
.qx-presets > span { font-size: 13px; font-weight: 700; color: var(--band-soft); }
.pk-hint { margin: 8px 0 2px; font-size: 12px; letter-spacing: .01em; color: var(--band-soft); }
.pk-list { display: grid; }
.pk { display: grid; gap: 10px; padding: 15px 8px; margin-inline: -8px; border-top: 1px solid var(--band-rule); border-radius: 12px; }
.pk-list > .pk:first-child { border-top: 0; }
.pk-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pk-l { display: grid; gap: 1px; min-width: min(8.5em, 55%); }
.pk-l b { font-size: 15.5px; line-height: 1.4; transition: color .25s; }
.pk-l small { font-size: 12.5px; line-height: 1.5; color: var(--band-soft); }
.pk-v { flex: none; padding-top: 1px; font-size: 17px; font-weight: 700; color: var(--band-soft); white-space: nowrap; transition: color .25s; }
.pk.has-v .pk-v { color: var(--honey); }
.pk-opts { display: flex; flex-wrap: wrap; gap: 6px; }
/* v17：製作數量的拉桿跟每月廣告費一樣——順順地拉、上不封頂（拉到最右邊放手，範圍自動放大），刻度寫在下面、剛好選到的那個亮起來；
   拉的時候拇指上面一顆小標籤寫數量；右上角數量下面一個小小的「自訂」（一個一個加減） */
.pk-slide { display: block; padding-top: 16px; }
.pk-slide .range { margin: 0; }
.pk-ticks span { transition: color .2s; }
.pk-ticks span.is-on { color: var(--honey); font-weight: 700; }
.pk-tip { z-index: 2; padding: 2px 8px; border-radius: 7px; font-size: 12px; }
.pk-r { flex: none; display: grid; justify-items: end; gap: 2px; }
.pk-cbtn { padding: 2px 0; border: 0; background: none; color: var(--band-soft); font: 600 12px/1.4 var(--font-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; white-space: nowrap; }
.pk-cbtn[aria-pressed="true"] { color: var(--honey); }
.pk-cbtn:focus-visible { outline: 2px solid var(--honey-deep); outline-offset: 2px; border-radius: 4px; }
@media (hover: hover) and (pointer: fine) { .pk-cbtn:hover { color: var(--band-fg); } }
/* v20：右上角 －／＋ 直接加減（數量夾在中間）；拉桿下面一排常用數量，直接點 */
.pk-step { display: inline-flex; align-items: center; gap: 6px; }
.pk-step .pk-v { min-width: 4.6em; padding-top: 0; text-align: center; }
.pk-sb { display: grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 1px solid var(--band-rule); background: var(--band-3); color: var(--band-fg); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color .2s, color .2s, background-color .2s, transform .15s var(--ease-out); }
.pk-sb .ico { width: 14px; height: 14px; stroke-width: 2.4; }
.pk-sb:active:not([disabled]) { transform: scale(.88); }
.pk-sb[disabled] { opacity: .28; cursor: default; }
.pk-sb:focus-visible { outline: 2px solid var(--honey); outline-offset: 2px; }
.pk.has-v .pk-sb[data-d="1"] { border-color: color-mix(in srgb, var(--honey) 45%, transparent); }
@media (hover: hover) and (pointer: fine) { .pk-sb:hover:not([disabled]) { border-color: var(--honey); color: var(--honey); } }
.pk-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; max-width: 340px; margin-top: -2px; }   /* v25：不需要＋3 個數量，四格一樣寬 */
.pk-l small:empty { display: none; }
.pk-chip { min-width: 0; min-height: 30px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--band-rule); background: transparent; color: var(--band-soft); font: 600 12.5px/1 var(--font-body); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color .2s, color .2s, background-color .2s, transform .15s var(--ease-out); }
.pk-chip:active { transform: scale(.94); }
.pk-chip[aria-pressed="true"] { border-color: var(--honey); background: var(--honey); color: var(--on-honey); }
.pk-chip:focus-visible { outline: 2px solid var(--honey); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .pk-chip:hover:not([aria-pressed="true"]) { border-color: color-mix(in srgb, var(--honey) 70%, transparent); color: var(--band-fg); } }
@media (max-width: 380px) { .pk-chip { padding: 0 10px; font-size: 12px; } .pk-sb { width: 30px; height: 30px; } }
.pk-note { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 13px; line-height: 1.55; color: var(--band-soft); }
.pk-note b { color: var(--honey); font-weight: 700; }
.pk-note s { color: var(--band-soft); opacity: .7; }
.pk-custom { display: flex; justify-content: flex-end; }
.pk-custom .range-wrap { flex: 1; padding-top: 22px; }
/* 每月廣告費：用拉的。刻度＝後台的廣告預算選項；下面一行預估客人，＋ 打開看曲線 */
.pk.is-ad { gap: 8px; }
.ad-slide { padding-top: 26px; }
.ad-slide .range { margin: 0; }
.ad-ticks { position: relative; height: 16px; margin-top: 2px; }
.ad-ticks span { position: absolute; top: 0; left: calc(var(--p) * (100% - 26px) + 13px); transform: translateX(-50%); font: 500 10.5px/1.4 var(--font-mono); color: var(--band-soft); white-space: nowrap; }
.ad-ticks span:last-child { transform: translateX(-80%); }
.ad-hint { margin: 4px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--band-soft); }
.ad-row2 { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; margin-top: 4px; }
.ad-row2 .pk-note { flex: 1 1 260px; }
.ad-row2 .link-btn { flex: none; font-size: 13px; }
/* v19：每月實際要付的廣告費＝廣告費＋服務費：你選的方案一列、企業版一列（企業版那列標每月少付多少）；方案區的拉桿下面也一樣 */
.ad-pay { display: grid; gap: 8px; margin-top: 6px; padding: 12px 12px 12px; border-radius: 16px; border: 1px solid var(--band-rule); background: rgba(255, 255, 255, .025); }
.ad-pay[hidden] { display: none; }
.ap-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0 2px; }
.ap-h b { font-size: 13.5px; color: var(--band-fg); }
.ap-h small { font-size: 12px; color: var(--band-soft); }
.ap-rows { display: grid; gap: 6px; }
.ap-row { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; padding: 8px 10px 9px; border-radius: 12px; background: rgba(255, 255, 255, .035); }
.ap-l { display: grid; flex: 1 1 8.5em; gap: 2px; min-width: 0; font-size: 14px; }
.ap-row.is-top { background: color-mix(in srgb, var(--honey) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--honey) 42%, transparent); }
.ap-who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
.ap-who .gem { width: 20px; height: 20px; }
.ap-who b { font-size: 14px; color: var(--band-fg); }
.ap-tag { padding: 0 7px; border-radius: 999px; font: 700 11px/1.7 var(--font-body); font-style: normal; white-space: nowrap; }
.ap-tag.is-pick { background: var(--band-fg); color: var(--band); }
.ap-tag.is-less { background: var(--honey); color: var(--on-honey); }
.ap-calc { min-width: 0; font-size: 12px; line-height: 1.45; color: var(--band-soft); overflow-wrap: anywhere; }
.ap-cf { display: inline-block; max-width: 100%; }   /* v23：「30% 服務費 $3,000」綁在一起：放不下就整段換行，不會剩「$3,000」自己一行 */
.ap-pay { flex: none; margin-left: auto; font: 800 19px/1.1 var(--font-num); letter-spacing: -.02em; color: var(--band-fg); white-space: nowrap; }
.ap-row.is-top .ap-pay { color: var(--honey); }
.ap-pay small { margin-left: 1px; font: 600 min(11.5px, max(9px, .6em)) var(--font-body); letter-spacing: 0; color: var(--band-soft); }
.ap-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 2px 2px 0; font-size: 12px; line-height: 1.5; color: var(--band-soft); }
.ap-foot > span { text-wrap: pretty; }
.ap-foot b { color: var(--honey); }
.ap-foot.is-best { color: var(--band-fg); }
.ap-foot .ico { flex: none; width: 16px; height: 16px; stroke-width: 2.6; color: var(--honey); }
.ap-go { flex: none; min-height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--honey) 60%, transparent); background: none; color: var(--honey); font: 700 12.5px var(--font-body); white-space: nowrap; cursor: pointer; transition: background-color .2s; }
.ap-go:focus-visible { outline: 2px solid var(--honey-deep); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .ap-go:hover { background: color-mix(in srgb, var(--honey) 14%, transparent); } }
.ad-pay.is-fee { margin-top: 8px; }
/* v20：預估客人、每月實際要付：拉桿下面自己一排（電腦左右兩塊、兩列實付並排；手機上下疊） */
/* v23：跟上面三張拉桿卡同一個格線（預估客人在廣告費那張下面、每月實際要付佔右邊兩欄），左右邊對齊、一樣高 */
.fee-res { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; align-items: stretch; }
.fee-res > .ad-pay.is-fee { grid-column: 2 / -1; }
.fee-res.is-solo > .fee-est { grid-column: 1 / -1; }
.fee-res .fee-est { margin-top: 0; align-content: center; }
.fee-res .ad-pay.is-fee { margin-top: 0; align-content: start; }
.fee-res .ad-pay.is-fee .ap-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .fee-res { grid-template-columns: minmax(0, 1fr); } .fee-res > .ad-pay.is-fee, .fee-res.is-solo > .fee-est { grid-column: auto; } }
@media (max-width: 640px) { .fee-res .ad-pay.is-fee .ap-rows { grid-template-columns: minmax(0, 1fr); } }
.ad-custom { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ad-custom label { font-size: 13px; font-weight: 700; color: var(--band-soft); }
.ad-cin { position: relative; display: inline-flex; align-items: center; }
.ad-cin > span { position: absolute; left: 13px; font-weight: 700; color: var(--band-soft); pointer-events: none; }
.ad-cin .input { width: 170px; min-height: 40px; padding: 6px 12px 6px 26px; border-color: var(--band-rule); background: var(--band-3); color: var(--band-fg); font: 700 16px var(--font-num); }
.est-more { margin-top: 2px; border-top: 1px dashed var(--band-rule); }
.est-tog { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 0 2px; border: 0; background: none; color: var(--band-fg); font: 600 13.5px/1.4 var(--font-body); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.est-tog .clx-pm { --pm: 24px; }
.est-tog .clx-pm::before, .est-tog .clx-pm::after { height: 1.6px; }
.est-x { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .45s var(--ease-out), visibility 0s .45s; }
.est-more.is-open .est-x { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .45s var(--ease-out), visibility 0s; }
.est-in { min-height: 0; overflow: hidden; display: grid; gap: 10px; }
.est-in > :first-child { margin-top: 12px; }
.pk.is-flash { animation: item-flash 1s var(--ease-out); }
.pk-more { margin-top: 6px; border-top: 1px solid var(--band-rule); }
.pk-more > summary { display: flex; align-items: baseline; gap: 10px; padding: 14px 0 6px; cursor: pointer; list-style: none; font-weight: 700; font-size: 15px; }
.pk-more > summary::-webkit-details-marker { display: none; }
.pk-more > summary::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid var(--band-soft); border-bottom: 2px solid var(--band-soft); transform: rotate(45deg); transition: transform .25s var(--ease-out); align-self: center; }
.pk-more[open] > summary::after { transform: rotate(-135deg); }
.pk-more > summary > span { flex: none; }
.pk-more > summary small { min-width: 0; font-size: 12.5px; font-weight: 500; color: var(--band-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--band-rule); background: transparent; color: var(--band-soft); border-radius: 999px; min-height: 34px; padding: 0 12px; font: 600 14px/1 var(--font-num); cursor: pointer; transition: color .2s, border-color .2s, background-color .2s; }
.chip:hover { color: var(--band-fg); border-color: var(--band-soft); }
.chip[aria-pressed="true"] { border-color: var(--honey); color: var(--honey); background: color-mix(in srgb, var(--honey) 12%, transparent); }
.chip-word { font-family: var(--font-body); font-weight: 600; font-size: 14px; }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; margin: 6px 0 10px; cursor: pointer; }
.range::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--honey) var(--pct, 0%), var(--band-3) var(--pct, 0%)); }
.range::-moz-range-track { height: 6px; border-radius: 99px; background: var(--band-3); }
.range::-moz-range-progress { height: 6px; border-radius: 99px; background: var(--honey); }
/* v20：拉桿的圓圈做細緻：白色圓鈕、細細一圈蜂蜜色、中間兩條小直線（看得出是可以左右拉的把手）；滑鼠移上去、按住時外面多一圈淡淡的光 */
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; border: 0; background: linear-gradient(90deg, transparent 10px, var(--thumb-grip, #C9A35A) 10px 11.5px, transparent 11.5px 14.5px, var(--thumb-grip, #C9A35A) 14.5px 16px, transparent 16px) 50% 50% / 100% 9px no-repeat, #fff; box-shadow: 0 0 0 2px var(--honey), 0 3px 10px rgba(0, 0, 0, .45); transition: box-shadow .2s, transform .15s var(--ease-out); }
.range::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; border: 0; background: linear-gradient(90deg, transparent 9px, var(--thumb-grip, #C9A35A) 9px 10.5px, transparent 10.5px 13.5px, var(--thumb-grip, #C9A35A) 13.5px 15px, transparent 15px) 50% 50% / 100% 9px no-repeat, #fff; box-shadow: 0 0 0 2px var(--honey), 0 3px 10px rgba(0, 0, 0, .45); }
@media (hover: hover) and (pointer: fine) { .range:hover::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--honey), 0 0 0 7px color-mix(in srgb, var(--honey) 20%, transparent), 0 3px 10px rgba(0, 0, 0, .45); } .range:hover::-moz-range-thumb { box-shadow: 0 0 0 2px var(--honey), 0 0 0 7px color-mix(in srgb, var(--honey) 20%, transparent), 0 3px 10px rgba(0, 0, 0, .45); } }
.range:active::-webkit-slider-thumb { transform: scale(1.1); box-shadow: 0 0 0 2px var(--honey), 0 0 0 9px color-mix(in srgb, var(--honey) 26%, transparent), 0 3px 10px rgba(0, 0, 0, .45); }
.range:focus-visible { outline: none; }
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--honey), 0 0 0 7px color-mix(in srgb, var(--honey) 55%, transparent); }
.stepper { display: flex; align-items: center; gap: 4px; }
.stepper button { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--band-rule); background: var(--band-3); color: var(--band-fg); cursor: pointer; transition: transform .15s var(--ease-out), border-color .2s, color .2s; }
.stepper button:hover:not([disabled]) { border-color: var(--honey); color: var(--honey); }
.stepper button:active:not([disabled]) { transform: scale(.88); }
.stepper button[disabled] { opacity: .3; cursor: default; }
.stepper .ico { width: 16px; height: 16px; stroke-width: 2.4; }
.stepper output { min-width: 64px; text-align: center; line-height: 1.1; }
.stepper output b { display: block; font: 700 19px/1.1 var(--font-num); color: var(--honey); }
.stepper output small { font-size: 12px; color: var(--band-soft); }
.link-btn { background: none; border: 0; padding: 4px 0; color: var(--band-soft); font: 600 14px var(--font-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-btn:hover { color: var(--band-fg); }

/* 你的價格：一個總數、一條長條、一句省多少 */
.qx-result { display: grid; gap: 14px; align-content: start; }
.qx-result.flash { animation: sq-flash .9s var(--ease-out); }
@keyframes sq-flash { 0% { background: color-mix(in srgb, var(--honey) 24%, var(--band-2)); } }
.qr-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.qr-head h3 { font-size: 20px; }
.qr-who { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--band-soft); }
.qr-who .gem { width: 22px; height: 22px; }
.qr-who b { color: var(--band-fg); font-size: 15px; }
.qr-total { display: grid; gap: 2px; }
.qr-lbl { font-size: 14px; color: var(--band-soft); }
.qr-val { font-size: clamp(40px, 9vw, 58px); font-weight: 800; line-height: 1.05; letter-spacing: -.025em; color: var(--band-fg); }
.qr-avg { font-size: 14px; color: var(--band-soft); }
/* v19：總共怎麼算的：方案月費、廣告費、廣告服務費、製作，一行一行，加起來就是上面的總數 */
.qr-break { display: grid; gap: 0; margin: -2px 0 0; padding: 4px 0 2px; border-block: 1px solid var(--band-rule); }
.qr-break > div { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 5px 0; }
.qr-break > div + div { border-top: 1px dashed color-mix(in srgb, var(--band-rule) 80%, transparent); }
.qr-break dt { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-width: 7em; font-size: 13.5px; font-weight: 600; color: var(--band-fg); }
.qr-break dt span { font-size: 12px; font-weight: 500; color: var(--band-soft); }
.qr-break dd { margin: 0; font: 700 14.5px/1.3 var(--font-num); color: var(--band-fg); white-space: nowrap; }
.qr-verdict { display: grid; gap: 10px; }
.qr-save { display: grid; gap: 2px; margin: 0; }
.qr-save > span { font-size: 15px; font-weight: 700; color: var(--band-soft); }
.qr-save.is-up { padding: 14px 16px 16px; border-radius: 18px; background: linear-gradient(135deg, #F6D998, var(--honey) 55%, #D8B06A); color: var(--on-honey); }
.qr-save.is-up > span { color: inherit; opacity: .85; }
.qr-save.is-up > b { font-size: clamp(36px, 4.4vw, 48px); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; }
.qr-save.is-tip > span { font-size: 16px; color: var(--band-fg); }
.qr-save.is-base > span { font-size: 15px; color: var(--band-soft); font-weight: 600; }
.qr-inc { margin: 0; font-size: 12.5px; color: var(--band-soft); }
.qr-up { display: flex; align-items: center; gap: 8px; width: 100%; padding: 11px 14px; border-radius: 16px; border: 1.5px dashed color-mix(in srgb, var(--honey) 60%, transparent); background: color-mix(in srgb, var(--honey) 8%, transparent); color: var(--band-fg); font: 600 15px/1.45 var(--font-body); text-align: left; cursor: pointer; transition: background-color .2s, transform .2s var(--ease-out); }
.qr-up .gem { width: 24px; height: 24px; flex: none; }
.qr-up b { color: var(--honey); }
.qr-up::after { content: ""; flex: none; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid var(--honey); border-top: 2px solid var(--honey); transform: rotate(45deg); }
.qr-up:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .qr-up:hover { background: color-mix(in srgb, var(--honey) 16%, transparent); } }
.qr-best { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 600; color: var(--band-good); }
.qr-best .ico { width: 18px; height: 18px; stroke-width: 2.6; }
.qr-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.qr-cta .link-chev { color: var(--honey); }
@media (min-width: 700px) {
  .qx-card { padding: 22px 22px 20px; border-radius: var(--r-xl); }
  .pp-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1081px) {
  .qx { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 18px; align-items: start; margin-bottom: 18px; }
  .qx-result { position: sticky; top: calc(var(--head-h) + 22px + env(safe-area-inset-top, 0px)); }
}
@media (max-width: 420px) { .qr-cta .btn { flex: 1; } }

/* 右邊黏住：你的價格＋曲線（電腦）；手機改成上方的迷你列 */
.qx-side { display: grid; gap: 14px; align-content: start; min-width: 0; }

/* 曲線：你選的方案 vs 個人版，一個月一個月累積下來的花費 */
.saver { display: grid; gap: 10px; padding: 18px 16px 16px; border-radius: 24px; background: var(--band-2); border: 1px solid var(--band-rule); }
.saver-head h3 { font-size: 19px; }
.saver-head p { margin-top: 4px; font-size: 12px; line-height: 1.65; letter-spacing: .01em; color: var(--band-soft); text-wrap: pretty; }
.lgd { display: inline-block; width: 18px; height: 3px; margin-right: 5px; border-radius: 2px; vertical-align: middle; }
.lgd-mine { height: 4px; background: var(--sv-m, var(--honey)); }
.lgd-other { background: var(--sv-o, #8E8E96); }
.saver-chart { position: relative; touch-action: pan-y; cursor: crosshair; user-select: none; -webkit-user-select: none; border-radius: 12px; }
.saver-chart:focus-visible { outline: 3px solid var(--honey-deep); outline-offset: 4px; }
.saver-chart svg { display: block; overflow: visible; }
.sv-mine { fill: none; stroke: var(--sv-m, var(--honey)); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.sv-other { fill: none; stroke: var(--sv-o, #8E8E96); stroke-width: 1.9; stroke-linejoin: round; stroke-linecap: round; }
.saver .sv-glow { stroke: var(--sv-m, var(--honey)); }
/* 黑底上用亮一點的方案色（跟上面方案區的圖一樣） */
.saver { --rose: var(--rose-band); --sky: var(--sky-band); --violet: var(--violet-band); --graphite: var(--graphite-band); }
.sv-gap { fill: url(#sv-g); }
.sv-gap-bad { fill: rgba(255, 159, 143, .2); }
.sv-cross-l { stroke: rgba(255, 255, 255, .5); stroke-width: 1.2; stroke-dasharray: 3 4; }
.sv-dot-m { fill: var(--sv-m, var(--honey)); stroke: var(--band-2); stroke-width: 3; }
.sv-dot-o { fill: var(--sv-o, #8E8E96); stroke: var(--band-2); stroke-width: 2.5; }
.sv-bep { fill: var(--band-2); stroke: var(--honey); stroke-width: 2.5; }
.sv-bep-l { fill: var(--honey); font: 700 11.5px var(--font-body); }
.saver-read { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--band-rule); }
.sr-m { font-size: 13px; color: var(--band-soft); }
.sr-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sr-col { display: grid; gap: 1px; min-width: 0; }
.sr-l { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--band-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-l .gem { width: 18px; height: 18px; }
.sr-col b { font-size: 19px; font-weight: 700; }
.sr-col.is-mine b { color: var(--honey); }
.sr-diff { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; }
.sr-dl { font-size: 14px; font-weight: 600; }
.sr-diff b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.sr-diff.is-up b { color: var(--honey); }
.sr-diff.is-tip .sr-dl { color: var(--band-fg); }
.sr-diff.is-flat .sr-dl { color: var(--band-soft); }
@media (min-width: 700px) { .saver { padding: 22px 22px 20px; border-radius: var(--r-xl); } }
.sv-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 4px; font-weight: 700; color: var(--band-fg); }
.sv-legend span { display: inline-flex; align-items: center; }
/* 電腦（v19）：右欄跟左欄一樣高，裡面三張卡（你的價格、四個方案、曲線）整組跟著畫面走，不會空一個角落：
   比畫面矮就黏在標頭下面；比畫面高，往下捲時底部對齊畫面下緣、往上捲時頂部對齊標頭（site.js 的 initStick 切換） */
.qx-stick { display: grid; gap: 14px; align-content: start; min-width: 0; }
.qx-sp { display: none; }
@media (min-width: 1081px) {
  .qx-side { display: block; align-self: stretch; overflow-anchor: none; }
  .qx-sp { display: block; height: 0; }
  .qx-stick { position: sticky; top: calc(var(--head-h) + 18px + env(safe-area-inset-top, 0px)); grid-template-rows: auto minmax(0, 1fr); }   /* v23：拉高時第二張（預估多賺多少）吃掉多出來的高度 */
  .qx-side .qx-result { position: relative; top: auto; }   /* 不自己黏；但要有定位，邊框的光才會繞著它 */
}
@media (min-width: 1081px) and (max-height: 820px) {
  .saver-head p { font-size: 12px; }
}

/* v21／v22：預估多賺多少（右邊「你的價格」下面）——成交率 [15]%、每位成交客人幫你賺 $[20,000]（都可以改）；
   每月客人 × 成交率 ≈ 成交幾位 → 預估每月多賺 $…；這一季／一年一共多少、扣掉費用約淨賺多少 */
.qx-roi { display: grid; gap: 10px; }
.qx-roi[hidden] { display: none; }
.roi-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
.roi-h h3 { font-size: 17px; }
.roi-h small { font-size: 11px; letter-spacing: .01em; color: var(--band-soft); }
.roi-ins { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.roi-in { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--band-fg); white-space: nowrap; }
.rev-box { display: inline-flex; align-items: center; gap: 2px; padding: 2px 10px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--honey) 55%, transparent); background: color-mix(in srgb, var(--honey) 9%, transparent);
  color: var(--honey); font: 700 16px/1.4 var(--font-num); cursor: text; transition: border-color .2s, background-color .2s; }
.rev-box:focus-within { border-color: var(--honey); background: color-mix(in srgb, var(--honey) 16%, transparent); }
.rev-in { width: 6.2em; min-width: 0; padding: 2px 0; border: 0; background: none; color: inherit; font: inherit; outline: none; }
.rev-box.is-pct { padding-inline: 8px 10px; }
.rev-box.is-pct .rev-in { width: 2.1em; text-align: right; }
.roi-out { display: grid; gap: 4px; }
/* v23：小字說明學小米——小一號、行距鬆一點、裡面的數字只微微亮一點（不搶上面的大數字）；金額範圍不拆成兩行 */
.roi-f { margin: 0; font-size: 11.5px; line-height: 1.6; letter-spacing: .01em; color: var(--band-soft); }
.roi-f b, .roi-p b { font-weight: 600; color: color-mix(in srgb, var(--band-fg) 78%, var(--band-soft)); }
.roi-f .nb, .roi-p .nb { display: inline-block; max-width: 100%; }   /* 「約淨賺 $6.7 萬–$9.7 萬」這種整段不拆開 */
.roi-m { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 2px 0 0; font-size: 14px; color: var(--band-soft); }
.roi-m b { font: 800 clamp(24px, 2.4vw, 30px)/1.15 var(--font-num); letter-spacing: -.02em; color: var(--honey); filter: var(--num-glow); }
.roi-m.is-none span { font-size: 15px; font-weight: 700; color: var(--band-fg); }
.roi-p { margin: 0; font-size: 11.5px; line-height: 1.6; letter-spacing: .01em; color: var(--band-soft); text-wrap: pretty; }
@media (min-width: 1081px) { .qx-side .qx-roi { gap: 8px; padding: 14px 20px 14px; } }
@media (min-width: 1081px) and (max-height: 860px) { .qx-side .qx-roi { gap: 6px; padding-block: 12px; } .roi-h small { display: none; } .roi-m b { font-size: 24px; } }

/* v21：電腦的試算一個畫面看完——左邊所有項目都調得到，右邊「你的價格」一直看得到（黏在標頭下面）。
   四個方案、錢省在哪裡搬到試算下面（.qx-more，電腦兩張並排）。每個製作項目壓成兩行：
   名稱＋說明（右邊寫這項多少錢）／常用數量（右邊 －／＋）；電腦不放每一項的拉桿，每月廣告費的拉桿留著 */
.qx-more { display: grid; gap: 14px; margin-bottom: 14px; }
.ap-line { display: none; }
@media (min-width: 1081px) {
  .qx { margin-bottom: 18px; }
  .qx-more { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 18px; align-items: stretch; margin-bottom: 18px; }   /* v23：兩張一樣高 */
  /* 拉高多出來的高度給最省的那張大卡：名稱、標籤在上，總額、長條、省多少貼在下面；下面三張小卡照原本高度；右邊那張多出來的放最下面 */
  .qx-more > .tk-card { grid-template-rows: auto minmax(0, 1fr); }
  .qx-more .tickers { grid-template-rows: minmax(0, 1fr) auto; }
  .qx-more .tk-card { gap: 16px; }
  .qx-more .tickers { gap: 10px; }
  .qx-more .tk.is-best { grid-template-rows: auto auto minmax(0, 1fr) auto auto; padding: 18px 20px 18px; }
  .qx-more .tk:not(.is-best) { padding: 13px 14px 14px; }
  .qx-more .tk.is-best > .tk-total { align-self: end; }
  .qx-more .tk.is-best .tk-tot { font-size: clamp(32px, 2.8vw, 40px); }
  .qx-more > .saver { align-content: start; }
  .qx-steps { gap: 12px; }
  .qx-steps > .qx-card { padding: 16px 20px 12px; }
  .qx-steps .qx-head { margin-bottom: 10px; }
  .qx-steps .qx-head h3 { font-size: 18px; }
  /* ① 方案：四個按鈕矮一點 */
  .pp { gap: 1px; padding: 8px 11px 9px; border-radius: 15px; }
  .pp-top .gem { width: 20px; height: 20px; }
  .pp-top b { font-size: 15px; }
  .pp-price b { font-size: 18.5px; }
  .pp-meta { font-size: 11.5px; }
  #qx-plan { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; column-gap: 10px; }
  #qx-plan > .qx-head { display: contents; }
  #qx-plan > .qx-head > * { grid-row: 1; margin: 0 0 10px; }
  #qx-plan > .pp-terms { grid-row: 1; grid-column: 3; justify-content: flex-end; margin: 0 4px 10px 0; }
  #qx-plan > .pp-list { grid-column: 1 / -1; }
  .pp-more { font-size: 12.5px; }
  /* ② 內容：標題、常見組合、全部清空排同一行 */
  #qx-need { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; column-gap: 10px; }
  #qx-need > .qx-head { display: contents; }
  #qx-need > .qx-head > * { grid-row: 1; margin: 0 0 6px; }
  #qx-need > .qx-head > .link-btn { grid-column: 4; }
  #qx-need > .qx-presets { grid-row: 1; grid-column: 3; justify-content: center; gap: 4px 6px; margin: 0 0 6px; }
  #qx-need > :not(.qx-head):not(.qx-presets):not(.gg) { grid-column: 1 / -1; }   /* .gg（卡片邊框的金光）不能吃到：絕對定位的子元素一放進格線，就改成貼著格線（內距裡面 20px）畫，金光會跑到卡片裡面 */
  .qx-presets > span { font-size: 12px; }
  .qx-presets .chip { min-height: 30px; padding: 0 11px; font-size: 13px; }
  .pk-hint { margin: 0 0 2px; font-size: 11.5px; }
  .hint-drag { display: none; }
  .pk { padding: 7px 8px; border-top: 0; background: linear-gradient(var(--band-rule), var(--band-rule)) 50% 0 / calc(100% - 16px) 1px no-repeat; }   /* 分隔線直的，不跟著圓角彎 */
  .pk-list > .pk:first-child { background: none; }
  /* 每月廣告費：一行標題、拉桿、預估客人、每月實付一行寫完 */
  .pk.is-ad { gap: 3px; padding-block: 6px 9px; }
  .pk.is-ad .pk-top { align-items: center; }
  .pk.is-ad .pk-l, .pk:not(.is-ad) .pk-l { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
  .pk.is-ad .pk-l small, .pk:not(.is-ad) .pk-l small { min-width: 0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pk.is-ad .pk-l b, .pk:not(.is-ad) .pk-l b { flex: none; font-size: 15px; }
  .pk.is-ad .pk-v { font-size: 17px; }
  .ad-slide { padding-top: 12px; }
  .ad-ticks { height: 14px; margin-top: 0; }
  .ad-hint { display: none; }
  .ad-row2 { margin-top: 1px; }
  #ad-pay { gap: 4px; margin-top: 2px; padding: 0; border: 0; border-radius: 0; background: none; }
  #ad-pay .ap-h, #ad-pay .ap-rows { display: none; }   /* 只給試算用（方案區的 #fee-pay 照舊兩列） */
  .ap-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--band-soft); }
  .ap-lh { font-weight: 700; color: var(--band-fg); }
  .ap-li { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
  .ap-li .gem { width: 16px; height: 16px; }
  .ap-li b { font: 700 13.5px/1.2 var(--font-num); color: var(--band-fg); }
  .ap-li.is-top b { color: var(--honey); }
  #ad-pay .ap-foot { margin: 0; font-size: 12px; }
  #ad-pay .ap-foot .ap-go { padding-block: 1px; }
  /* 「看怎麼算的」放在預估客人那一行的右邊（展開的圖還是整行） */
  .pk.is-ad { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; }
  .pk.is-ad > * { grid-column: 1 / -1; }
  .pk.is-ad > .ad-row2 { grid-row: 3; grid-column: 1; }
  .pk.is-ad > .est-more { display: contents; }
  .pk.is-ad .est-tog { grid-row: 3; grid-column: 2; width: auto; gap: 6px; padding: 0; font-size: 12.5px; white-space: nowrap; }
  .pk.is-ad .est-tog .clx-pm { --pm: 18px; }
  .pk.is-ad .est-tl { display: none; }
  .pk.is-ad .est-x { grid-column: 1 / -1; }
  /* 製作：一項一行——左邊名稱、下面一行小字（還沒選：這項是什麼；選了：這項多少錢）｜常用數量｜－／＋ */
  .pk:not(.is-ad) { grid-template-columns: minmax(6.5em, 1fr) auto auto; grid-template-areas: "name chips r" "sub chips r"; align-items: center; gap: 0 12px; }   /* v25：名稱至少留 6.5 個字寬，不會被擠成直排 */
  .pk:not(.is-ad) > .pk-top, .pk:not(.is-ad) .pk-l { display: contents; }
  .pk:not(.is-ad) .pk-l b { grid-area: name; align-self: end; min-width: 0; }
  .pk:not(.is-ad) .pk-l small { grid-area: sub; align-self: start; }
  .pk:not(.is-ad) .pk-note { grid-area: sub; align-self: start; min-width: 0; gap: 0 5px; font-size: 12px; line-height: 1.5; }
  .pk:not(.is-ad) .pk-note > span { min-width: 0; overflow-wrap: anywhere; }   /* 數量拉很大、金額很長：換到下一行，不會切掉或壓到常用數量 */
  .pk:not(.is-ad).has-v .pk-l small { visibility: hidden; }
  .pk:not(.is-ad) .pk-note .pk-pn { display: none; }
  .pk:not(.is-ad) .pk-r { grid-area: r; }
  .pk:not(.is-ad) .pk-slide { display: none; }
  .pk:not(.is-ad) .pk-chips { grid-area: chips; display: grid; grid-template-columns: repeat(4, 54px); gap: 4px; margin: 0; }   /* v25：每一列都是不需要＋3 個數量，一樣寬、上下對齊 */
  .pk-chip { min-height: 28px; padding: 0 9px; font-size: 12px; }
  .pk:not(.is-ad) .pk-chip { padding: 0 4px; }
  .pk-sb { width: 28px; height: 28px; }
  .pk-sb .ico { width: 13px; height: 13px; }
  .pk-step { gap: 4px; }
  .pk-step .pk-v { min-width: 4.4em; font-size: 16px; }
  .pk-more > summary { padding-block: 10px 6px; }
  /* 右邊：只放你的價格，黏在標頭下面；矮一點，小筆電也整張看得到 */
  .qx-side .qx-result { gap: 12px; padding: 18px 20px 18px; }
  .qx-result .qr-val { font-size: clamp(40px, 3.5vw, 52px); }
  .qx-result .qr-save.is-up { padding: 12px 16px 14px; }
  .qx-result .qr-save.is-up > b { font-size: clamp(32px, 3vw, 42px); }
}
/* 比較矮的螢幕（小筆電）：方案下面的說明、數量說明收起來，讓整個試算放進一個畫面 */
@media (min-width: 1081px) and (max-height: 860px) {
  .pp-meta, .pk-hint { display: none; }
  .qx-steps > .qx-card { padding-block: 14px 10px; }
  .qx-steps .qx-head { margin-bottom: 8px; }
  #qx-plan > .qx-head > *, #qx-plan > .pp-terms { margin-bottom: 8px; }
  .qx-steps .seg-sm button { min-height: 28px; }
  .pk { padding-block: 6px; }
  .pk:not(.is-ad) { padding-block: 4px; }
  .pk:not(.is-ad) .pk-l b { line-height: 1.35; }
  .pk:not(.is-ad) .pk-l small, .pk:not(.is-ad) .pk-note { line-height: 1.4; }
  .qx-side .qx-result { gap: 10px; padding-block: 16px; }
  .qx-result .qr-val { font-size: clamp(38px, 3.2vw, 46px); }
  /* v23：右邊（你的價格＋預估多賺多少）收得跟左邊一樣高：「這一季總共」跟劃掉的個人版價錢同一行、省多少那塊矮一點、明細行距小一點 */
  .qx-result .qr-total { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 12px; }
  .qx-result .qr-total > .qr-lbl { grid-column: 1; }
  .qx-result .qr-total > .qr-was { grid-column: 2; margin: 0; }
  .qx-result .qr-total > .qr-val, .qx-result .qr-total > .qr-avg { grid-column: 1 / -1; }
  .qx-result .qr-save.is-up { padding: 10px 16px 12px; }
  .qx-result .qr-save.is-up > b { font-size: clamp(30px, 2.6vw, 38px); }
  .qx-result .qr-break > div { padding-block: 4px; }
}
/* 再矮一點（1536×864 的筆電開 125%、瀏覽器有書籤列）：刻度、間距再收一點 */
@media (min-width: 1081px) and (max-height: 760px) {
  .ad-ticks { display: none; }
  .ad-slide { padding-top: 8px; }
  .qx-steps { gap: 10px; }
  .qx-steps > .qx-card { padding-block: 12px 8px; }
  .pk { padding-block: 4px; }
  .pk:not(.is-ad) { padding-block: 3px; }
  .pk.is-ad { padding-block: 4px 7px; }
  .pp { padding-block: 6px 7px; }
  .pk-more > summary { padding-block: 8px 4px; }
  .qx-side .qx-result { gap: 8px; padding-block: 14px; }
  .qx-result .qr-break > div { padding-block: 4px; }
  .qx-result .qr-save.is-up { padding: 8px 14px 10px; }
  .qx-result .qr-save.is-up > b { font-size: 30px; }
  .qx-result .qr-cta .btn { min-height: 44px; padding-block: 0; }
  .qx-side .qx-roi { gap: 4px; padding-block: 10px; }
  .qx-side .roi-ins { gap: 6px 14px; }
  .qx-side .rev-box { padding-block: 0; }
  .qx-side .roi-m b { font-size: 22px; }
}

/* 手機：選內容時，上方一直看得到總額、省多少、小曲線 */
.qx-mini { position: fixed; z-index: 58; left: 0; right: 0; top: calc(var(--head-h) + 44px + env(safe-area-inset-top, 0px)); display: flex; align-items: center; gap: 12px; padding: 8px var(--gr) 9px var(--gl); background: var(--band-2); color: var(--band-fg); border-bottom: 1px solid var(--band-rule); box-shadow: 0 12px 24px -16px rgba(0, 0, 0, .6); cursor: pointer;
  transform: translateY(-120%); opacity: 0; pointer-events: none; transition: transform .4s var(--ease-out), opacity .3s; }
.qx-mini.is-on { transform: none; opacity: 1; pointer-events: auto; }
.qm-who { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; white-space: nowrap; }
.qm-who .gem { width: 20px; height: 20px; }
.qm-tot, .qm-save { display: grid; line-height: 1.2; min-width: 0; }
.qm-tot small, .qm-save small { font-size: 11px; color: var(--band-soft); white-space: nowrap; }
.qm-tot b { font-size: 17px; font-weight: 800; }
.qm-save b { font-size: 17px; font-weight: 800; color: var(--honey); }
.qm-save.is-tip b { color: var(--band-fg); font-size: 15px; }
.qm-spark { flex: none; width: 76px; height: 28px; margin-left: auto; overflow: visible; }
.qm-m { fill: none; stroke: var(--honey); stroke-width: 2; vector-effect: non-scaling-stroke; }
.qm-o { fill: none; stroke: #8E8E96; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
@media (min-width: 1001px) { .qx-mini { top: calc(var(--head-h) + env(safe-area-inset-top, 0px)); } }
@media (max-width: 1000px) {
  .qx-mini { transition: transform .4s var(--ease-out), opacity .3s, top .3s var(--ease-out); }
  body.has-mini .qx-mini { z-index: 61; top: calc(var(--head-h) + env(safe-area-inset-top, 0px)); }   /* 蓋在段落捷徑那一排上面（不改導覽列的高度，頁面不會跳） */
  body.has-mini .subnav { visibility: hidden; opacity: 0; transition: opacity .2s, visibility 0s linear .2s; }
}
/* v20：電腦也有：往下調內容、「你的價格」的總數看不到時，最上面一條寫目前的方案、總共多少、省多少（置中、不用點） */
@media (min-width: 1081px) {
  .qx-mini { justify-content: center; gap: 30px; padding-block: 9px 10px; cursor: default; }
  .qm-who { font-size: 14px; } .qm-who .gem { width: 22px; height: 22px; }
  .qm-tot, .qm-save { grid-auto-flow: column; align-items: baseline; gap: 8px; }
  .qm-tot small, .qm-save small { font-size: 12.5px; }
  .qm-tot b, .qm-save b { font-size: 19px; }
  .qm-spark { margin-left: 0; width: 90px; }
}
@media (max-width: 360px) { .qm-spark { display: none; } }

/* 底部浮動列：依目前段落換內容 */
.dock {
  position: fixed; z-index: 55; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px;
  padding: 10px var(--gr) calc(10px + env(safe-area-inset-bottom, 0px)) var(--gl);
  background: var(--band-2); color: var(--band-fg);
  border-top: 1px solid var(--band-rule); box-shadow: 0 -14px 30px -16px rgba(0, 0, 0, .5);
  transform: translateY(115%); visibility: hidden; transition: transform .45s var(--ease-out), visibility 0s linear .45s;
}
.dock.is-on { transform: none; visibility: visible; transition: transform .45s var(--ease-out), visibility 0s; }
.dock-info { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.dock-label { font-size: 12.5px; color: var(--band-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock-value { font-size: 22px; font-weight: 800; color: var(--honey); white-space: nowrap; overflow: hidden; }
.dock[data-mode="line"] .dock-value { font-size: 16px; color: var(--band-fg); }
.dock-btn { flex: none; min-height: 44px; padding: 0 1.3em; font-size: 15px; }
.to-top {
  position: fixed; z-index: 54; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(86px + env(safe-area-inset-bottom, 0px));
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--band-2); color: var(--band-fg); border: 1px solid var(--band-rule);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .3); opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none;
  transition: opacity .3s, transform .35s var(--ease-spring), background-color .2s, color .2s;
}
.to-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.to-top .ico { width: 20px; height: 20px; transition: transform .25s var(--ease-out); }
.to-top:active { transform: scale(.92); }
@media (hover: hover) and (pointer: fine) { .to-top:hover { background: var(--honey); color: var(--on-honey); } .to-top:hover .ico { transform: translateY(-2px); } }
@media (min-width: 1081px) {
  .dock { left: auto; right: 24px; bottom: 24px; width: 390px; padding: 12px 12px 12px 20px; border: 1px solid var(--band-rule); border-radius: 20px; transform: translateY(calc(100% + 40px)); }
  .to-top { right: 24px; bottom: 112px; }
}
@media (max-width: 1080px) { .site-foot { padding-bottom: calc(44px + 76px + env(safe-area-inset-bottom, 0px)); } }

/* ---------- 整包方案（v25）：LINE、官網、臉書粉絲專頁一次建好 ----------
   四張版本卡（選中的那張金框、按鈕金色＋一圈繞的光）→ 逐項比較（分頁＋點開看說明）→ 加購。手機一次看一版，上面一排切換 */
.px { --px-top: calc(var(--head-h) + env(safe-area-inset-top, 0px)); }
.px-cards { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 14px; align-items: stretch; }
/* 每張卡的同一行對齊（價格、長條、重點、按鈕都在同一高度）：卡片用父層的列（subgrid） */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 761px) {
    .px-cards { grid-auto-rows: auto; row-gap: 14px; }
    .px-cards > .px-card { display: grid; grid-row: span 8; grid-template-rows: subgrid; row-gap: 14px; align-content: start; }
    .px-cards > .px-card > .px-who, .px-cards > .px-card > .px-mo { margin-top: -6px; }
    .px-cards > .px-card > .px-act { align-self: end; }
  }
}
.px-card { position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 22px 20px 20px; border-radius: var(--r-xl); background: var(--card); border: 1.5px solid transparent; cursor: pointer; transition: border-color .3s, box-shadow .3s; }
.px-card.is-on { border-color: var(--honey); box-shadow: 0 30px 60px -38px var(--honey-glow); }
.px-h { display: flex; align-items: center; gap: 8px; min-width: 0; }
.px-h .gem { flex: none; width: 28px; height: 28px; }
.px-h h3 { font-size: 22px; font-weight: 800; letter-spacing: -.005em; }
.px-who { margin-top: -6px; font-size: 13px; line-height: 1.6; color: var(--ink-soft); text-wrap: pretty; }
.px-price { display: flex; flex-wrap: wrap; align-items: baseline; align-content: flex-start; gap: 2px 8px; }   /* 卡片被拉高時，價格那一行不會被撐開往下掉（四張的「優惠價」、建置費同一個樣子） */
.px-price b { font: 700 clamp(27px, 2.5vw, 32px)/1.1 var(--font-num); letter-spacing: -.02em; }
.px-price small { font-size: 12px; color: var(--ink-faint); }
.px-mo { margin-top: -8px; font-size: 13px; color: var(--ink-soft); }
.px-mo b { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.px-keys { display: grid; gap: 7px; margin: 0; }
.px-keys > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; line-height: 1.45; }
.px-keys dt { min-width: 0; color: var(--ink-soft); }
.px-keys dd { margin: 0; flex: none; font-weight: 700; text-align: right; }
.px-keys .is-no dd { font-weight: 500; color: var(--ink-faint); }
.px-hr { font-size: 12px; color: var(--ink-faint); }
.px-act { margin-top: auto; display: grid; gap: 4px; }
.px-act .beam { display: flex; }
.px-cta { flex: 1; width: 100%; }
.px-card:not(.is-on) .beam::before, .px-card:not(.is-on) .beam::after { content: none; }
.px-see { justify-self: center; padding: 8px 10px; border: 0; background: none; color: var(--amber); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-underline-offset: 3px; -webkit-tap-highlight-color: transparent; }
.px-see:hover { text-decoration: underline; }
.px-see:focus-visible, .px-card:focus-visible { outline: 2px solid var(--honey); outline-offset: 2px; }

/* 逐項比較 */
.px-more { display: flex; justify-content: center; margin-top: 26px; }
.px-cmp { margin-top: 18px; padding: 18px clamp(14px, 2vw, 26px) 10px; border-radius: var(--r-xl); background: var(--card); }
.px-tabs { display: flex; width: max-content; max-width: 100%; margin: 0 auto; overflow-x: auto; scrollbar-width: none; }
.px-tabs::-webkit-scrollbar { display: none; }
.px-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; flex: none; }
.px-tabs button small { font: 500 11px/1 var(--font-num); opacity: .7; }
.px-tbl { --cols: minmax(0, 2.4fr) repeat(var(--n, 4), minmax(0, 1fr)); margin-top: 10px; }
.px-th { position: sticky; top: var(--px-top); z-index: 3; display: grid; grid-template-columns: var(--cols); align-items: end; gap: 0 8px; padding: 10px 0 8px; background: var(--card); border-bottom: 1px solid var(--rule); }
.px-th0 { display: flex; align-items: baseline; gap: 6px; font-size: 15px; font-weight: 800; }
.px-th0 small { font-size: 12px; font-weight: 500; color: var(--ink-faint); }
.px-th .px-c { display: grid; justify-items: center; gap: 2px; min-width: 0; padding: 8px 4px; border: 0; border-radius: 12px; background: none; color: var(--ink); font: inherit; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .25s, color .25s; }
.px-th .px-c b { font-size: 14px; font-weight: 700; line-height: 1.3; }
.px-th .px-c small { font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; }
.px-th .px-c:focus-visible { outline: 2px solid var(--honey); outline-offset: -2px; }
.px-gt { display: flex; align-items: baseline; gap: 6px; padding: 18px 0 4px; font-size: 13px; font-weight: 700; color: var(--amber); }
.px-gt small { font-size: 11.5px; font-weight: 500; color: var(--ink-faint); }
.px-sum { display: grid; grid-template-columns: var(--cols); align-items: center; gap: 0 8px; padding: 11px 0; border-bottom: 1px solid var(--rule); list-style: none; }
summary.px-sum { cursor: pointer; -webkit-tap-highlight-color: transparent; }
summary.px-sum::-webkit-details-marker { display: none; }
summary.px-sum:focus-visible { outline: 2px solid var(--honey); outline-offset: 2px; border-radius: 8px; }
.px-n { display: grid; gap: 2px; min-width: 0; }
.px-n b { display: inline-flex; align-items: center; gap: 4px; font-size: 14.5px; font-weight: 600; line-height: 1.45; }
.px-n b .ico { flex: none; width: 14px; height: 14px; stroke-width: 2.4; color: var(--ink-faint); transform: rotate(90deg); transition: transform .3s var(--ease-out); }
.px-row[open] .px-n b .ico { transform: rotate(-90deg); }
.px-n small { font-size: 12px; line-height: 1.5; color: var(--ink-faint); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.px-row[open] .px-n small { display: none; }
.px-sum > .px-c { display: grid; place-items: center; align-self: stretch; margin-block: -11px; padding: 11px 4px; min-width: 0; text-align: center; font-size: 13.5px; line-height: 1.35; transition: background-color .25s; }
.px-y .ico { width: 18px; height: 18px; stroke-width: 2.6; color: var(--amber); }
.px-no { color: var(--ink-faint); }
.px-ad-t { padding: 2px 8px; border-radius: 999px; background: var(--comb); color: var(--amber); font-size: 12px; font-weight: 700; }
.px-q { display: grid; gap: 1px; }
.px-q b { font-weight: 700; }
.px-q small { font-size: 11px; line-height: 1.35; color: var(--ink-faint); }
/* 選的那一版：整欄淡淡的金色 */
.px-tbl[data-pick="0"] .px-c[data-t="0"], .px-tbl[data-pick="1"] .px-c[data-t="1"], .px-tbl[data-pick="2"] .px-c[data-t="2"],
.px-tbl[data-pick="3"] .px-c[data-t="3"], .px-tbl[data-pick="4"] .px-c[data-t="4"], .px-tbl[data-pick="5"] .px-c[data-t="5"] { background: color-mix(in srgb, var(--honey) 13%, transparent); }
.px-tbl[data-pick="0"] .px-th .px-c[data-t="0"], .px-tbl[data-pick="1"] .px-th .px-c[data-t="1"], .px-tbl[data-pick="2"] .px-th .px-c[data-t="2"],
.px-tbl[data-pick="3"] .px-th .px-c[data-t="3"], .px-tbl[data-pick="4"] .px-th .px-c[data-t="4"], .px-tbl[data-pick="5"] .px-th .px-c[data-t="5"] { background: var(--honey); color: var(--on-honey); }
.px-tbl[data-pick] .px-th .px-c[aria-pressed="true"] small { color: color-mix(in srgb, var(--on-honey) 70%, transparent); }
.px-note { display: grid; gap: 7px; max-width: 780px; padding: 6px 0 18px; font-size: 13.5px; line-height: 1.75; color: var(--ink-soft); text-wrap: pretty; }
.px-note b { margin-right: 8px; color: var(--amber); font-weight: 700; }
.px-note .px-full { color: var(--ink); }
/* 加購 */
.px-add { margin-top: clamp(30px, 4vw, 46px); }
.px-add:empty { display: none; }
.px-subh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 14px; font-size: 20px; font-weight: 800; }
.px-subh small { font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.px-adds { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 14px; }
.px-ad { display: grid; align-content: start; gap: 10px; min-width: 0; padding: 20px; border-radius: var(--r-lg); background: var(--card); }
.px-ad-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.px-ad-h > b { font-size: 17px; font-weight: 800; }
.px-ad-p { flex: none; white-space: nowrap; }
.px-ad-p b { font: 700 20px/1 var(--font-num); letter-spacing: -.01em; }
.px-ad-p small { font-size: 12px; color: var(--ink-soft); }
.px-ad-p.is-list { font-size: 12.5px; line-height: 1.6; text-align: right; white-space: normal; }
.px-ad-d { font-size: 13.5px; line-height: 1.7; color: var(--ink-soft); text-wrap: pretty; }
.px-ad-s { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.px-ad-s li { padding: 3px 10px; border-radius: 999px; background: var(--comb); color: var(--amber); font-size: 12.5px; font-weight: 600; }
.px-ad-n summary { display: inline-flex; align-items: center; gap: 4px; padding: 4px 0; color: var(--amber); font-size: 13px; font-weight: 600; cursor: pointer; list-style: none; }
.px-ad-n summary::-webkit-details-marker { display: none; }
.px-ad-n summary .ico { width: 14px; height: 14px; stroke-width: 2.4; transform: rotate(90deg); transition: transform .3s var(--ease-out); }
.px-ad-n[open] summary .ico { transform: rotate(-90deg); }
.px-ad-n .px-note { padding-bottom: 0; }
.px-foot { display: grid; gap: 4px; max-width: 880px; margin: 18px auto 0; font-size: 12px; line-height: 1.7; color: var(--ink-faint); text-align: center; text-wrap: pretty; }
@media (max-width: 1080px) {
  .px-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) { .px { --px-top: calc(var(--head-h) + 44px + env(safe-area-inset-top, 0px)); } }
/* 手機：四張卡排一排左右滑（跟「四種方案，一眼比較」一樣：下面圓點＋左右箭頭），滑到哪一張就選哪一張；比較表只放選的那一版 */
@media (max-width: 760px) {
  .px-cards { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--gl)) calc(-1 * var(--gr)); padding: 6px var(--gr) 14px var(--gl); scroll-padding-inline: var(--gl) var(--gr); }
  .px-cards::-webkit-scrollbar { display: none; }
  .px-cards > .px-card { flex: 0 0 86%; scroll-snap-align: start; cursor: default; }
  .px-cards + .rail-ctl { margin-top: 0; }
  .px-cmp { margin-inline: calc(-1 * var(--gl) + 8px) calc(-1 * var(--gr) + 8px); padding: 14px 12px 6px; border-radius: 24px; }
  .px-tabs { width: auto; }
  .px-tabs button { padding: 0 11px; font-size: 13.5px; }
  .px-tbl[data-pick] .px-sum > .px-c { background: none; }
  .px-tbl { --cols: minmax(0, 1fr) minmax(86px, 36%); }
  .px-th { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 4px; padding: 8px 0; }
  .px-th0 { display: none; }
  .px-th .px-c { padding: 6px 2px; }
  .px-th .px-c b { font-size: 13px; }
  .px-th .px-c small { font-size: 10.5px; }
  .px-sum > .px-c { display: none; }
  .px-tbl[data-pick="0"] .px-sum > .px-c[data-t="0"], .px-tbl[data-pick="1"] .px-sum > .px-c[data-t="1"], .px-tbl[data-pick="2"] .px-sum > .px-c[data-t="2"],
  .px-tbl[data-pick="3"] .px-sum > .px-c[data-t="3"], .px-tbl[data-pick="4"] .px-sum > .px-c[data-t="4"], .px-tbl[data-pick="5"] .px-sum > .px-c[data-t="5"] { display: grid; }
  .px-n b { font-size: 14px; }
  .px-n small { -webkit-line-clamp: 1; }
}

/* ---------- v26：整包卡片拿掉三條長條（四版的差別改看下面的曲線）；主要按鈕「加進試算」 ---------- */
@supports (grid-template-rows: subgrid) { @media (min-width: 761px) { .px-cards > .px-card { grid-row: span 7; } } }
.px-h .px-in { display: none; align-items: center; gap: 3px; margin-left: auto; padding: 3px 9px 3px 6px; border-radius: 999px; background: var(--honey); color: var(--on-honey); font-size: 11.5px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.px-h .px-in .ico { width: 13px; height: 13px; stroke-width: 3; }
.px-card.is-calc .px-in { display: inline-flex; }
.px-mo small { margin-left: 2px; font-size: 12px; color: var(--ink-faint); }
.px-cnt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 4px; padding-top: 13px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--ink-soft); }
.px-cnt b { font: 700 19px/1 var(--font-num); color: var(--ink); }
.px-cnt span { font-size: 12px; color: var(--ink-faint); }
.px-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 16px; }
.px-links .link-chev { padding: 8px 0; font-size: 13px; white-space: nowrap; }
.px-links .px-see { white-space: nowrap; }
.px-links .px-see { justify-self: auto; padding-inline: 0; }

/* ---------- v27：LINE／官網／粉絲專頁三條長條放回卡片，一眼看出四版差在哪 ----------
   每一條分四段：每一段是那一版「多出來的項目」，用那一版的顏色（個人版粉、初創版藍、品牌版紫、企業版白鑽）；
   這張卡有的段塗滿，升級才有的段是淡淡的斜紋。捲到才依序長出來，塗滿的那一段有一道光慢慢掃過 */
@supports (grid-template-rows: subgrid) { @media (min-width: 761px) { .px-cards > .px-card { grid-row: span 8; } } }
.px-cov { display: grid; gap: 9px; padding: 0 0 14px; border-bottom: 1px solid var(--rule); }
.px-cards > .px-card > .px-cov { margin-top: -2px; }
.px-cv { display: grid; grid-template-columns: 4.3em minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-soft); }
.px-cvn { white-space: nowrap; }
.px-cv i { position: relative; display: block; height: 8px; border-radius: 8px; background: color-mix(in srgb, var(--ink) 5%, transparent); overflow: hidden; }
.px-sg { --c: var(--graphite); position: absolute; top: 0; bottom: 0; left: calc(var(--l, 0) * 100%); width: calc(var(--w, 0) * 100%); background: var(--c);
  box-shadow: inset -1.5px 0 0 var(--card); transform-origin: left center; transition: transform .75s var(--ease-out) calc(var(--k, 0) * 120ms + 80ms); }
.px-sg.tone-rose { --c: var(--rose); } .px-sg.tone-sky { --c: var(--sky); } .px-sg.tone-violet { --c: var(--violet); }
/* 企業版：白鑽的顏色（銀白帶一點彩虹的反光），跟鑽石一樣 */
.px-sg.tone-graphite { --c: #8293B0; background: linear-gradient(90deg, #8293B0 0%, #AEBFD9 30%, #C9B6DB 52%, #A6D0C0 74%, #8293B0 100%); }
.px-sg.is-up { background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--c) 46%, transparent) 0 2px, transparent 2px 5px); }
.px-sh { position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--p, 0) * 100%); overflow: hidden; pointer-events: none; }
.px-sh::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(100deg, transparent 10%, rgba(255, 255, 255, .7) 50%, transparent 90%); transform: translateX(-130%); animation: bar-shine 4.8s cubic-bezier(.5, 0, .3, 1) infinite 1.6s; }
.px-cv b { font: 600 13px/1 var(--font-num); color: var(--ink); text-align: right; white-space: nowrap; }
.px-cv b small { font: 500 11px var(--font-body); color: var(--ink-faint); }
.viz #px-cards:not(.is-on) .px-sg:not(.is-up) { transform: scaleX(0); }
.px-legend { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; margin-top: 16px; font-size: 12px; color: var(--ink-faint); }
.px-legend:empty { display: none; }
.px-lg-t { flex-basis: auto; color: var(--ink-soft); }
.px-lg-i { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.px-lg-i .px-sg { position: static; display: inline-block; width: 16px; height: 8px; border-radius: 4px; box-shadow: none; transition: none; }
/* 優惠活動中、每月限幾組：整包區標題下面、試算的③ */
.pxp { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 16px 0 0; }
/* v27（11/1）：整包標題下面一行，連到「為什麼要做 LINE、官網、粉絲專頁」 */
.px-why { margin-top: 14px; font-size: 15px; }
.pxp-b { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 4px 13px; border-radius: 999px; font-size: 13.5px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.pxp-b .ico { width: 15px; height: 15px; }
.pxp-b small { margin-left: 2px; font-size: 12px; font-weight: 600; opacity: .8; }
.pxp-b.is-promo { background: linear-gradient(100deg, var(--honey), color-mix(in srgb, var(--honey) 70%, #fff) 50%, var(--honey)); background-size: 220% 100%; color: var(--on-honey); box-shadow: 0 10px 24px -14px var(--honey-glow); animation: pxp-sheen 5.5s ease-in-out infinite; }
.pxp-b.is-limit { border: 1.5px solid color-mix(in srgb, var(--honey) 70%, transparent); color: var(--amber); }
.pxp-b.is-limit b { font: 700 15px/1 var(--font-num); margin-inline: 1px; }
@keyframes pxp-sheen { 0%, 60% { background-position: 100% 0; } 85%, 100% { background-position: 0 0; } }
.px-price .px-pt { align-self: center; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--honey) 18%, transparent); color: var(--amber); font-size: 11.5px; font-style: normal; font-weight: 700; line-height: 1.3; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .px-sh::after, .pxp-b.is-promo { animation: none; } .px-sg { transition: none; } }

/* ---------- v26：看效果——逐項比較裡的「看效果」、上面一排常被問的項目 ---------- */
.px-demo { justify-self: start; display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 3px 11px 3px 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--honey) 75%, transparent); background: color-mix(in srgb, var(--honey) 16%, transparent); color: var(--amber); font: 700 12px/1.45 var(--font-body); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .2s, transform .15s var(--ease-out); }
.px-demo .ico { width: 13px; height: 13px; stroke-width: 2.2; }
.px-demo:active { transform: scale(.95); }
.px-demo:focus-visible, .px-fxb:focus-visible { outline: 2px solid var(--honey); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .px-demo:hover { background: color-mix(in srgb, var(--honey) 30%, transparent); } }
.px-dmhint { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px 0 0; padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, var(--honey) 10%, transparent); color: var(--ink-soft); font-size: 12.5px; text-align: center; }
.px-dmhint .ico { flex: none; width: 13px; height: 13px; color: var(--amber); }
.px-fx { margin-top: clamp(22px, 3vw, 32px); }
.px-fx-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; margin-bottom: 12px; text-align: center; }
.px-fx-h .ico { width: 16px; height: 16px; color: var(--amber); }
.px-fx-h b { font-size: 17px; font-weight: 800; }
.px-fx-h span { font-size: 13px; color: var(--ink-soft); }
.px-fx-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.px-fxb { position: relative; display: grid; align-content: start; gap: 2px; min-width: 0; padding: 12px 40px 12px 14px; border-radius: 16px; border: 1px solid var(--rule); background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color .2s, transform .2s var(--ease-out), box-shadow .25s; }
.px-fxb small { font-size: 11.5px; font-weight: 700; color: var(--amber); }
.px-fxb b { font-size: 14px; font-weight: 700; line-height: 1.4; }
.px-fxp { position: absolute; right: 12px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: var(--honey); box-shadow: 0 6px 14px -6px var(--honey-glow); }
.px-fxp::after { content: ""; position: absolute; left: 10px; top: 8px; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent var(--on-honey); }
.px-fxb:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .px-fxb:hover { border-color: var(--honey); box-shadow: 0 16px 30px -22px var(--honey-glow); } }
@media (max-width: 900px) { .px-fx-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 手機：一排左右滑（跟上面的版本卡一樣） */
@media (max-width: 560px) {
  .px-fx-list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; margin-inline: calc(-1 * var(--gl)) calc(-1 * var(--gr)); padding: 2px var(--gr) 8px var(--gl); scroll-padding-inline: var(--gl) var(--gr); }
  .px-fx-list::-webkit-scrollbar { display: none; }
  .px-fxb { flex: 0 0 62%; scroll-snap-align: start; }
}

/* ---------- v26：四個版本差多少——跟方案區「每季總共多少」同一套黑底曲線 ---------- */
.pxc {
  --ink: #F5F5F7; --ink-soft: #A1A1A6; --ink-faint: #6E6E73; --rule: rgba(255, 255, 255, .09);
  --grid: rgba(255, 255, 255, .11); --tick: #8E8E96; --amber: #EFCC8E; --honey-deep: #F5D38A; --comb: rgba(239, 204, 142, .13);
  --rose: var(--rose-band); --sky: var(--sky-band); --violet: var(--violet-band); --graphite: var(--graphite-band);
  display: grid; gap: 14px; margin-top: clamp(26px, 4vw, 40px); padding: clamp(20px, 3vw, 32px); border-radius: 28px; color: var(--ink);
  border: 1px solid rgba(255, 255, 255, .08);
  background: radial-gradient(110% 50% at 50% -8%, rgba(235, 200, 126, .1), transparent 62%), linear-gradient(180deg, #141416, #070708 72%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 40px 80px -40px rgba(0, 0, 0, .55); }
.pxc-head h3 { margin-bottom: 8px; font-size: clamp(22px, 2.6vw, 30px); color: var(--ink); text-wrap: balance; }
.pxc-head p { max-width: 56em; font-size: 13.5px; line-height: 1.75; letter-spacing: .01em; color: var(--ink-soft); text-wrap: pretty; }
.pxc-chart { position: relative; min-width: 0; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.pxc-chart svg { display: block; overflow: visible; }
.pc-grid line { stroke: var(--grid); stroke-width: 1; stroke-dasharray: 3 5; }
.pc-grid line.is-zero { stroke: rgba(255, 255, 255, .3); stroke-dasharray: none; }
.pc-grid text { fill: var(--tick); font: 500 11px var(--font-mono); letter-spacing: .02em; }
.pc-axis { fill: var(--tick); font: 500 10.5px var(--font-mono); letter-spacing: .04em; }
.pc-area { fill: url(#pc-fill); }
.pc-line { fill: none; stroke: var(--honey); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; opacity: .85; transition: stroke-dashoffset 1.5s var(--ease-out); }
.pc-sglow { fill: none; stroke: var(--honey); stroke-width: 11; stroke-linecap: round; opacity: .32; filter: blur(5px); pointer-events: none; }
.pc-seg { fill: none; stroke: #FFF3CF; stroke-width: 3.6; stroke-linecap: round; filter: drop-shadow(0 0 6px var(--honey)); pointer-events: none; }
.pxc.is-live.is-on .pc-sglow { animation: fe-pulse 2.2s ease-in-out 1.6s infinite both; }
.pc-vl { stroke: rgba(255, 255, 255, .34); stroke-width: 1; stroke-dasharray: 2 4; }
.pc-dot { stroke: #0C0C0E; stroke-width: 2.5; transition: r .25s var(--ease-out); }
.pc-dot.tone-rose { fill: var(--rose); } .pc-dot.tone-sky { fill: var(--sky); } .pc-dot.tone-violet { fill: var(--violet); } .pc-dot.tone-graphite { fill: var(--graphite); }
.pc-dot.is-on { r: 8.5px; stroke: var(--honey); stroke-width: 3; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--honey) 80%, transparent)); }
.pc-v { fill: var(--ink-soft); font: 600 11.5px var(--font-body); paint-order: stroke; stroke: #0C0C0E; stroke-width: 4px; stroke-linejoin: round; }
.pc-v.is-on { fill: var(--ink); font-size: 13px; font-weight: 800; }
.pc-xn { fill: var(--ink-soft); font: 700 12.5px var(--font-body); }
.pc-xp { fill: var(--tick); font: 600 11.5px var(--font-num); }
.pc-x.is-on.tone-rose .pc-xn { fill: var(--rose); } .pc-x.is-on.tone-sky .pc-xn { fill: var(--sky); } .pc-x.is-on.tone-violet .pc-xn { fill: var(--violet); } .pc-x.is-on.tone-graphite .pc-xn { fill: var(--ink); }
.pc-x.is-on .pc-xp { fill: var(--amber); }
.pc-dbg { fill: rgba(12, 12, 14, .92); stroke: color-mix(in srgb, var(--honey) 55%, transparent); stroke-width: 1; }
.pc-dt { fill: var(--amber); font: 700 11.5px var(--font-body); }
.pc-hit { fill: transparent; cursor: pointer; }
.pc-dots, .pc-vals, .pc-delta, .pc-seg, .pc-sglow, .pc-area, .pc-vl { transition: opacity .6s ease .9s; }
.viz .pxc:not(.is-on) .pc-line { stroke-dashoffset: 1; }
.viz .pxc:not(.is-on) :is(.pc-area, .pc-dots, .pc-vals, .pc-delta, .pc-seg, .pc-sglow, .pc-vl) { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .pc-sglow { animation: none !important; } }
/* 下面：選到的版本——建置費、管理費、工時、幾項；比上一版多付多少、多做多少、多了哪些、哪些變多 */
.pxc-read { display: grid; gap: 14px; padding-top: 16px; border-top: 1px solid var(--rule); }
.pr-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.pr-who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.pr-who .gem { flex: none; width: 26px; height: 26px; }
.pr-who b { font-size: 20px; font-weight: 800; }
.pr-who small { font-size: 12.5px; color: var(--ink-soft); }
.pr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px; }
.pr-stats > div { display: grid; align-content: start; gap: 3px; min-width: 0; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .06); }
.pr-stats small { font-size: 12px; color: var(--ink-soft); }
.pr-stats b { font: 700 20px/1.2 var(--font-num); letter-spacing: -.01em; color: var(--ink); }
.pr-stats em { font-size: 11.5px; font-style: normal; color: var(--ink-faint); text-wrap: balance; }
.pr-diff { display: grid; gap: 10px; }
.pr-dh { font-size: 15px; font-weight: 600; line-height: 1.6; color: var(--ink); }
.pr-dh b { color: var(--honey); font-family: var(--font-num); font-weight: 700; }
.pr-row { display: grid; grid-template-columns: 5.4em minmax(0, 1fr); align-items: start; gap: 8px; }
.pr-l { padding-top: 4px; font-size: 12.5px; font-weight: 700; color: var(--amber); white-space: nowrap; }
.pr-chips, .pr-mvs { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.pr-chip { display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 10px; border-radius: 999px; background: var(--comb); color: var(--ink); font-size: 12.5px; font-weight: 600; line-height: 1.5; }
.pr-chip small, .pr-mv small { font-size: 10.5px; font-weight: 700; color: var(--amber); }
.pr-chip b { color: var(--honey); }
.pr-chip.is-rest, .pr-mv.is-rest { background: none; border: 1px dashed rgba(255, 255, 255, .2); color: var(--ink-soft); }
.pr-mv { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0 5px; padding: 4px 10px; border-radius: 10px; background: rgba(255, 255, 255, .05); color: var(--ink-soft); font-size: 12.5px; line-height: 1.5; }
.pr-mv i { font-style: normal; color: var(--ink-faint); }
.pr-mv b { color: var(--honey); font-weight: 700; }
.pr-mv b::before { content: "→"; margin-right: 5px; color: var(--ink-faint); font-weight: 500; }
/* v27：單買要多少——報價單上有標加購價的幾項（貼文、文章、影片、封面橫幅），單買加起來跟整包比 */
.pr-solo { display: grid; gap: 10px; padding: 14px 16px; border-radius: 18px; border: 1px dashed rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .025); }
.pr-solo.is-save { border: 1px solid color-mix(in srgb, var(--honey) 45%, transparent); background: color-mix(in srgb, var(--honey) 7%, transparent); }
.pr-solo-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: 14.5px; line-height: 1.5; }
.pr-solo-h b { font-weight: 800; color: var(--ink); }
.pr-solo-h small { font-size: 12px; color: var(--ink-faint); text-wrap: pretty; }
.pr-solo-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 6px; }
.pr-so { display: flex; align-items: baseline; gap: 6px; min-width: 0; padding: 7px 12px; border-radius: 12px; background: rgba(255, 255, 255, .05); font-size: 13px; line-height: 1.45; color: var(--ink); }
.pr-so small { flex: none; font-size: 10.5px; font-weight: 700; color: var(--amber); }
.pr-so-n { min-width: 0; }
.pr-so i { font-style: normal; color: var(--ink-soft); white-space: nowrap; }
.pr-so b { flex: none; margin-left: auto; padding-left: 6px; font: 700 13.5px/1.3 var(--font-num); color: var(--ink); white-space: nowrap; }
.pr-solo-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }
.pr-solo-sum b { color: var(--ink); font-family: var(--font-num); font-weight: 700; }
.pr-solo-sum .was { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.pr-solo-sum .was s { font: 700 17px/1.2 var(--font-num); color: var(--ink-soft); text-decoration-thickness: 2px; text-decoration-color: color-mix(in srgb, var(--rose) 80%, transparent); }
.pr-solo-sum .now { display: inline-flex; align-items: baseline; gap: 6px; margin-left: auto; padding: 6px 14px; border-radius: 999px; background: var(--honey); color: var(--on-honey); font-size: 13.5px; font-style: normal; font-weight: 800; white-space: nowrap; }
.pr-solo-sum .now b { color: inherit; font: 800 17px/1.1 var(--font-num); }
/* 卡片：企業版pro 的價格下面一行 */
.px-price .px-save { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 4px; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }
.px-price .px-save s { font-family: var(--font-num); font-weight: 700; color: var(--ink-soft); text-decoration-color: color-mix(in srgb, var(--rose) 75%, transparent); }
.px-price .px-save em { padding: 1px 9px; border-radius: 999px; background: color-mix(in srgb, var(--honey) 18%, transparent); color: var(--amber); font-style: normal; font-weight: 700; white-space: nowrap; }
.px-price .px-save em b { font: 800 12.5px/1.5 var(--font-num); letter-spacing: 0; }
@media (max-width: 560px) {
  .pxc { margin-inline: calc(-1 * var(--gl) + 8px) calc(-1 * var(--gr) + 8px); padding: 18px 14px; border-radius: 24px; }
  .pr-solo { padding: 12px; }
  .pr-solo-sum .now { margin-left: 0; }
  .pr-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .pr-l { padding-top: 0; }
  .pr-top .btn { width: 100%; }
}

/* ---------- v26：試算 ③ 加整包（選填）：不需要＋四個版本，跟 ① 選方案同一種按鈕 ---------- */
#qx-pack { scroll-margin-top: calc(var(--head-h) + 24px + env(safe-area-inset-top, 0px)); }
#qx-pack.is-flash { animation: sq-flash 1.4s var(--ease-out); }
.qx-head h3 small { margin-left: 8px; font-size: 12.5px; font-weight: 600; color: var(--band-soft); }
.pkx-none { flex: none; min-height: 32px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--band-rule); background: transparent; color: var(--band-soft); font: 700 13px/1 var(--font-body); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color .25s, background-color .25s, color .25s; }
.pkx-none[aria-checked="true"] { border-color: var(--honey); background: color-mix(in srgb, var(--honey) 13%, transparent); color: var(--honey); }
.pkx-none:focus-visible { outline: 3px solid var(--honey-deep); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .pkx-none:not([aria-checked="true"]):hover { border-color: var(--band-soft); color: var(--band-fg); } }
.pkx .pp-price small { margin-left: 3px; }
.pkx[disabled] { opacity: .5; cursor: default; }
.pkx-note { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 6px 16px; margin-top: 10px; font-size: 12.5px; line-height: 1.6; color: var(--band-soft); text-wrap: pretty; }
.pkx-note > span { flex: 1 1 100%; min-width: 0; }   /* 說明自己一整行，兩個連結排在下面一行（不會插在句子中間） */
.pkx-note b { color: var(--band-fg); }
#qx-pack.has-v .pkx-note b { color: var(--honey); }
.pkx-note .pp-more { flex: none; margin: 0; }
/* 你的價格：有加整包時，明細分兩段（廣告／建置） */
.qr-break > .qr-grp { padding: 7px 0 0; }
.qr-break > .qr-grp + div { border-top: 0; }
.qr-break > div + .qr-grp { margin-top: 4px; border-top: 1px solid var(--band-rule); }
.qr-break > .qr-grp dt { min-width: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: var(--honey); }
.dlg-summary .row1 h3 small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
/* v27：只做整包（不選廣告方案）：① 的方案先不選（淡一點）、季繳鎖住；② 換成一行說明；③ 的連結可以切換 */
#qx-plan.is-only .pp:not([aria-checked="true"]) { opacity: .62; }
#qx-plan.is-only .seg button:disabled { opacity: .45; cursor: default; }
.seg button:disabled { cursor: default; }
.pp-terms .link-btn.pp-more, .pkx-note .link-btn.pp-more { margin: 0; padding: 0; border: 0; background: none; color: var(--band-fg); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--honey); -webkit-tap-highlight-color: transparent; }
.pp-terms .link-btn.pp-more:focus-visible, .pkx-note .link-btn.pp-more:focus-visible { outline: 2px solid var(--honey); outline-offset: 2px; border-radius: 4px; }
.pp-terms { flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.pp-only-t { font-size: 12.5px; font-weight: 600; color: var(--band-fg); }
.qx-off { display: grid; gap: 10px; justify-items: start; }
.qx-off .qx-head { margin-bottom: 0; }
.qx-off-t { font-size: 13.5px; line-height: 1.7; color: var(--band-soft); text-wrap: pretty; }
.qx-off .btn-ghost { color: var(--band-fg); }
#qx-pack.is-only { border-color: color-mix(in srgb, var(--honey) 55%, var(--band-rule)); }
/* ③ 的優惠、名額：小一點、靠左 */
#pkx-promo:empty { display: none; }
.pxp.is-calc { justify-content: flex-start; gap: 6px; margin: 10px 0 0; }
.pxp.is-calc .pxp-b { min-height: 26px; padding: 3px 10px; font-size: 12.5px; }
.pxp.is-calc .pxp-b.is-limit { color: var(--honey); border-color: color-mix(in srgb, var(--honey) 55%, transparent); }
.qr-up .ico { width: 16px; height: 16px; flex: none; }

/* 貼文 */
/* v19：放不下就自動縮小的數字（core.js 的 HIVE.fit 加上 data-fit）：一律不換行 */
[data-fit] { white-space: nowrap; }
/* 數字後面的單位（／月、／季、位）不要被擠成兩行 */
.fr-wv small, .cb-v small, .ap-pay small, .fe-n small, .vs-v small, .bx-v small, .eb-v small, .cls-v small, .tk-total small, .pk-v small { flex: none; white-space: nowrap; }
/* 裡面有大數字的格子：不要被數字撐寬（撐寬會把整張卡片推出去），數字放不下改成縮小字 */
.qx-stick > *, .qx-result > *, .qr-total, .qr-verdict, .qr-save, .qr-break, .qr-break > div,
.pk, .pk-top, .pk-l, .pk-r, .ad-slide, .ad-row2, .ad-pay, .ap-rows, .ap-row, .ap-who, .ap-calc, .est-more, .est-x, .est-in, .est-chart, .eb-list, .eb-row, .eb-l,
.tk, .tk-head, .tk-total, .tk-save, .saver > *, .saver-read > *, .sr-cols, .sr-diff,
.pq > *, .pq-ad, .pq-q, .pq-vs, .pq-save, .pq-head, .bx > *,
.fee-c > *, .fee-ctl, .fee-est, .fee-read > *, .fr-top > *, .fr-win, .fr-save, .fr-row > *,
.plan > *, .kb, .kb > *, .cls-i > *, .hb-blk > * { min-width: 0; }
/* v19：3D 輪播（做過的貼文、拍過的短影音；assets/gcar.js）：卡片排一條、中間那張往前；v21：背景的彩色漸層拿掉，舞台就是乾淨的淺色底 */
.gc { display: grid; gap: 12px; min-width: 0; margin-bottom: 8px; }
.gc-post { --gc-w: clamp(200px, 26vw, 320px); --gc-ar: 1; --gc-h: clamp(320px, 38vw, 470px); }
.gc-reel { --gc-w: clamp(150px, 17vw, 228px); --gc-ar: 9 / 16; --gc-h: clamp(380px, 40vw, 520px); }
.gc-stage { position: relative; height: var(--gc-h); border-radius: 26px; overflow: hidden; background: var(--wax-2); perspective: 1600px; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; isolation: isolate; }
.gc-stage.is-drag { cursor: grabbing; }
.gc-stage:focus-visible { outline: 3px solid var(--honey-deep); outline-offset: 3px; }
.gc-track { position: absolute; inset: 0; transform-style: preserve-3d; }
.gc-card { position: absolute; top: 50%; left: 50%; display: block; width: var(--gc-w); max-width: none; margin: 0 0 0 calc(var(--gc-w) / -2); aspect-ratio: var(--gc-ar); border-radius: 18px; overflow: hidden; background: var(--wax-2); color: #fff; text-decoration: none;
  box-shadow: 0 28px 50px -28px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .08); transform: translate3d(0, -50%, 0); transform-style: preserve-3d; backface-visibility: hidden; will-change: transform; transition: box-shadow .4s; }
.gc-card img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; pointer-events: none; -webkit-user-drag: none; user-select: none; }
.gc-card.is-wide .gc-img { position: relative; object-fit: contain; }
.gc-card .gc-fill { position: absolute; inset: -10%; width: 120%; height: 120%; filter: blur(16px) saturate(1.2); opacity: .9; }
.gc-card.is-on { box-shadow: 0 36px 64px -30px rgba(0, 0, 0, .6), 0 0 0 2px rgba(255, 255, 255, .9); }
.gc-card:focus-visible { outline: 3px solid var(--honey-deep); outline-offset: 3px; }
.gc-plat { position: absolute; left: 10px; top: 10px; padding: 2px 9px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 11.5px; font-weight: 700; }
.gc-pl { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(0, 0, 0, .34); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transform: scale(.8); transition: opacity .3s, transform .35s var(--ease-out); }
.gc-pl .ico { width: 28px; height: 28px; color: #fff; }
.gc-card.is-on .gc-pl { opacity: 1; transform: none; }
/* 下面：中間那張的說明＋上一張／下一張／暫停 */
.gc-foot { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 20px; min-height: 62px; }
.gc-info { display: grid; gap: 3px; flex: 1 1 320px; min-width: 0; }
.gc-info.is-in { animation: gc-in .45s var(--ease-out); }
@keyframes gc-in { from { opacity: 0; transform: translateY(6px); } }
.gci-k { font-size: 12px; font-weight: 700; color: var(--amber); }
.gci-t { font-size: 17px; line-height: 1.35; }
.gci-s { font-size: 14px; line-height: 1.55; color: var(--ink-soft); text-wrap: pretty; }
.gci-r { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-style: normal; font-weight: 700; color: var(--amber); }
.gci-r .ico { flex: none; width: 16px; height: 16px; }
.gci-stats { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 13px; color: var(--ink-soft); }
.gci-stats b { margin-right: 3px; font-size: 15px; color: var(--ink); }
.gci-go { justify-self: start; display: inline-flex; align-items: center; gap: 2px; margin-top: 2px; font-size: 14px; font-weight: 700; color: var(--amber); text-decoration: none; }
.gci-go .ico { width: 16px; height: 16px; }
.gc-ctl { display: flex; flex: none; align-items: center; gap: 6px; }
.gc-btn { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid var(--rule); background: var(--card); color: var(--ink); cursor: pointer; transition: border-color .2s, transform .15s var(--ease-out); }
.gc-btn .ico { width: 18px; height: 18px; }
.gc-btn:active { transform: scale(.92); }
.gc-btn:focus-visible { outline: 3px solid var(--honey-deep); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .gc-btn:hover { border-color: var(--honey-deep); } }
.gc-n { min-width: 3.6em; text-align: center; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.gc-pi { position: relative; display: block; width: 12px; height: 14px; }
.gc-pi::before, .gc-pi::after { content: ""; position: absolute; top: 0; bottom: 0; width: 4px; border-radius: 1px; background: currentColor; }
.gc-pi::before { left: 1px; }
.gc-pi::after { right: 1px; }
.gc-play.is-paused .gc-pi::before { left: 2px; width: 0; height: 0; border-radius: 0; background: none; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent currentColor; }
.gc-play.is-paused .gc-pi::after { display: none; }
@media (max-width: 560px) { .gc-stage { border-radius: 20px; } .gc-foot { flex-direction: column; } .gc-info { flex-basis: auto; } .gc-ctl { align-self: flex-end; } }
@media (prefers-reduced-motion: reduce) { .gc-info.is-in { animation: none; } .gc-pl, .gc-card { transition: none; } }
.po-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
.po { display: grid; gap: 8px; align-content: start; min-width: 0; margin: 0; }
.po.is-wide { grid-column: 1 / -1; }
.po-art { position: relative; display: block; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: var(--card); box-shadow: var(--shadow-sm); container-type: inline-size; }
.po.is-wide .po-art { aspect-ratio: 900 / 365; }
.po-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.po figcaption b { display: block; font-size: 14px; }
.po figcaption span { display: block; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }
.po figcaption em { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12.5px; font-style: normal; font-weight: 700; color: var(--amber); }
.po figcaption em .ico { width: 14px; height: 14px; }
.po-badge { position: absolute; right: 8px; top: 8px; z-index: 2; padding: 2px 9px; border-radius: 999px; background: rgba(0, 0, 0, .62); color: #fff; font-size: 11.5px; font-weight: 700; }
@media (min-width: 800px) { .po-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 16px; } .po.is-wide { grid-column: span 2; } }
.mk { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 3cqw; padding: 8cqw 8cqw 7cqw; background: var(--ms); color: var(--mc); overflow: hidden; }
.mk-kick { align-self: flex-start; padding: 1.2cqw 3.6cqw; border-radius: 99px; background: var(--mc); color: #fff; font-size: 5cqw; font-weight: 800; }
.mk-title { position: relative; z-index: 1; font-size: 9cqw; font-weight: 900; line-height: 1.25; color: #1B1B1B; }
.mk-big { margin-top: auto; font-size: 11cqw; }
.mk-foot { position: relative; z-index: 1; margin-top: auto; display: flex; justify-content: space-between; align-items: center; font-size: 4.6cqw; font-weight: 700; }
.mk-tips .mk-big + .mk-foot { margin-top: 3cqw; }
.mk-dots { display: flex; gap: 1.5cqw; }
.mk-dots i { width: 2cqw; height: 2cqw; border-radius: 50%; background: currentColor; opacity: .3; }
.mk-dots i:first-child { opacity: 1; }
.mk-offer { background: var(--mc); color: #fff; }
.mk-offer .mk-kick { background: #fff; color: var(--mc); }
.mk-huge { margin-top: auto; font-size: 16cqw; font-weight: 900; line-height: 1.08; }
.mk-split { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; }
.mk-split i { display: grid; place-items: end center; padding-bottom: 3cqw; border-radius: 4cqw; font-size: 5cqw; font-style: normal; font-weight: 800; color: #fff; }
.mk-split i:first-child { background: linear-gradient(160deg, #A2A7AD, #5F6368); }
.mk-split i:last-child { background: radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .95) 0 5%, transparent 6%), radial-gradient(circle at 70% 60%, rgba(255, 255, 255, .5) 0 3%, transparent 4%), linear-gradient(160deg, var(--mc), #0A2B52); }
.mk-items { display: grid; gap: 2.4cqw; margin: 1cqw 0 0; padding: 0; list-style: none; counter-reset: m; }
.mk-items li { display: flex; align-items: center; gap: 2.6cqw; padding: 2.4cqw 3cqw; border-radius: 3cqw; background: #fff; color: #1B1B1B; font-size: 5cqw; font-weight: 700; }
.mk-items .ico { flex: none; width: 5.5cqw; height: 5.5cqw; color: var(--mc); stroke-width: 3; }
ol.mk-items li { counter-increment: m; }
ol.mk-items li::before { content: counter(m); flex: none; display: grid; place-items: center; width: 7cqw; height: 7cqw; border-radius: 50%; background: var(--mc); color: #fff; font-size: 4.4cqw; font-weight: 800; }
.mk-new { position: absolute; right: 7cqw; top: 21cqw; z-index: 1; display: grid; place-items: center; width: 16cqw; height: 16cqw; border-radius: 50%; background: var(--mc); color: #fff; font: 900 4.6cqw var(--font-num); transform: rotate(12deg); }
.mk-plate { position: absolute; right: -14cqw; bottom: -12cqw; width: 64cqw; height: 64cqw; border-radius: 50%; background: radial-gradient(circle, #E9B66E 0 30%, #B29464 31% 34%, #fff 35% 44%, #EADBC7 45% 100%); opacity: .95; }
.mk-menu .mk-title { margin-top: auto; max-width: 70%; }
.mk-menu .mk-foot { margin-top: 3cqw; max-width: 60%; }
/* v21：比較型——兩塊地板的樣子並排、中間 VS；互動型——A、B、C 三個選項 */
.mk-pair { flex: 1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 2cqw; min-height: 0; }
.mk-sw { position: relative; display: grid; place-items: end center; padding-bottom: 3cqw; border-radius: 4cqw; font-style: normal; overflow: hidden; box-shadow: inset 0 0 0 .4cqw rgba(255, 255, 255, .35); }
.mk-sw b { position: relative; padding: .8cqw 2.6cqw; border-radius: 99px; background: rgba(255, 255, 255, .92); color: #1B1B1B; font-size: 4.4cqw; font-weight: 800; white-space: nowrap; }
.mk-sw.is-a { background: repeating-linear-gradient(90deg, transparent 0 13cqw, rgba(60, 35, 15, .28) 13cqw 13.4cqw), repeating-linear-gradient(0deg, transparent 0 7cqw, rgba(60, 35, 15, .14) 7cqw 7.3cqw),
  repeating-linear-gradient(90deg, #C8955F 0 2cqw, #BE8A55 2cqw 3.4cqw, #CFA06B 3.4cqw 5cqw); }
.mk-sw.is-b { background: repeating-linear-gradient(0deg, transparent 0 10cqw, rgba(40, 40, 40, .18) 10cqw 10.4cqw), repeating-linear-gradient(90deg, transparent 0 18cqw, rgba(40, 40, 40, .14) 18cqw 18.4cqw),
  repeating-linear-gradient(115deg, rgba(255, 255, 255, .1) 0 1.2cqw, transparent 1.2cqw 4cqw), linear-gradient(160deg, #D3CCC0, #A9A296); }
.mk-pair em { align-self: center; display: grid; place-items: center; width: 10cqw; height: 10cqw; border-radius: 50%; background: var(--mc); color: #fff; font: 900 4.2cqw/1 var(--font-num); font-style: normal; }
.mk-vs .mk-title { font-size: 8cqw; }
.mk-vs .mk-foot { margin-top: 0; }
.mk-opts li { gap: 3cqw; padding: 2.6cqw 3cqw; }
.mk-ab { flex: none; display: grid; place-items: center; width: 7cqw; height: 7cqw; border-radius: 2cqw; background: var(--mc); color: #fff; font: 800 4.4cqw/1 var(--font-num); font-style: normal; }
.mk-poll .mk-title { font-size: 8.6cqw; }
.mk-poll .mk-foot { justify-content: flex-start; }

/* ---------- 常見問題 ---------- */
.faq-list { max-width: 860px; margin: 0 auto; }
.faq-list details { border-bottom: 1px solid var(--rule); }
.faq-list summary { position: relative; list-style: none; cursor: pointer; padding: 22px 48px 22px 0; font-weight: 700; font-size: 19px; line-height: 1.5; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; position: absolute; right: 10px; top: 50%; width: 10px; height: 10px; margin-top: -8px; border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft); transform: rotate(45deg); transition: transform .3s var(--ease-out); }
.faq-list details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq-a { padding: 0 0 24px; color: var(--ink-soft); max-width: 62ch; }
.faq-list details[open] .faq-a { animation: faq-in .45s var(--ease-out) backwards; }
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } }
.faq-list summary { transition: color .2s; }
@media (hover: hover) and (pointer: fine) { .faq-list summary:hover { color: var(--amber); } .faq-list summary:hover::after { border-color: var(--amber); } }

/* ---------- 行動呼籲與頁尾 ---------- */
.cta { background: linear-gradient(110deg, #E7C987, #F5E1B3 48%, #ECD098); color: var(--on-honey); padding-block: clamp(72px, 10vw, 128px); text-align: center; }   /* AI 影音學院按鈕那種緞面的香檳金 */
.cta-in { display: grid; justify-items: center; gap: 18px; }
.cta h2 { font-size: clamp(36px, 5.6vw, 68px); font-weight: 900; }
.cta p { font-size: 18px; max-width: 32em; }
.cta-contacts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: 15px; margin-top: 6px; }
.cta-contacts div { display: flex; align-items: center; gap: 8px; }
.cta-contacts .copy { background: none; border: 1px solid currentColor; color: inherit; border-radius: 99px; padding: 2px 10px; font: 600 12.5px var(--font-body); cursor: pointer; }
.site-foot { background: var(--band); color: var(--band-soft); padding-block: 44px calc(44px + env(safe-area-inset-bottom, 0px)); font-size: 14px; }
@media (max-width: 1080px) { .site-foot { padding-bottom: calc(44px + 76px + env(safe-area-inset-bottom, 0px)); } }   /* 寫在 .site-foot 後面：不然被上面那條蓋掉，頁尾最後一行會被底部的列蓋住 */
.foot-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: start; }
.foot-brand { display: flex; gap: 16px; align-items: center; color: var(--band-fg); }
.foot-brand svg { height: 40px; width: auto; display: block; }
.foot-brand b { font-size: 15px; }
.foot-contact { display: grid; gap: 4px; justify-items: end; text-align: right; }
.foot-contact a { color: var(--band-fg); text-decoration: none; }
.foot-contact a:hover { color: var(--honey); }
.foot-copy { grid-column: 1 / -1; padding-top: 18px; border-top: 1px solid var(--band-rule); font-size: 13px; }
@media (max-width: 700px) { .foot-in { grid-template-columns: minmax(0, 1fr); } .foot-contact { justify-items: start; text-align: left; } }

/* ---------- 報價對話框 ---------- */
.dlg-summary { display: grid; gap: 4px; padding: 16px 18px; margin-bottom: 20px; border-radius: var(--r-md); background: var(--wax-2); }
.dlg-summary .row1 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.dlg-summary .row1 .gem { width: 30px; height: 30px; }
.dlg-summary h3 { font-size: 20px; }
.dlg-summary .tot { margin-left: auto; font: 700 30px/1 var(--font-num); letter-spacing: -.02em; }
.dlg-summary p { font-size: 14px; color: var(--ink-soft); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.field-wide { grid-column: 1 / -1; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { margin-top: 14px; font-size: 13.5px; color: var(--ink-soft); }
.form-error { margin-top: 12px; padding: 10px 14px; border-radius: var(--r-sm); background: var(--bad-bg); color: var(--bad); font-weight: 700; font-size: 14.5px; }
@media (max-width: 560px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
.done { text-align: center; padding: 10px 0 4px; }
.done-hex { display: inline-grid; place-items: center; width: 64px; height: 72px; margin-bottom: 14px; background: var(--honey); color: var(--on-honey); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); animation: done-pop .6s var(--ease-spring); }
@keyframes done-pop { from { transform: scale(.3) rotate(-30deg); } }
.done-hex .ico { width: 30px; height: 30px; stroke-width: 2.4; }
.done h3 { font-size: 24px; margin-bottom: 6px; }
.done-no { font: 700 30px/1.2 var(--font-num); letter-spacing: .02em; margin: 8px 0 4px; }
.done p { color: var(--ink-soft); }
.done .dlg-actions { justify-content: center; }
.doc-back { margin-bottom: 14px; }

/* ==================== 互動層：滑過、按下、拖曳都有回應 ==================== */
/* 導覽列：目前段落、捲動進度、手機段落捷徑 */
.nav { position: relative; }
.nav a { position: relative; z-index: 1; }
.nav a[aria-current] { color: var(--ink); font-weight: 600; }
.site-head.on-dark .nav a[aria-current] { color: var(--band-fg); }
.nav-pill { position: absolute; z-index: 0; top: 50%; left: 0; width: 0; height: 32px; margin-top: -16px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 7%, transparent); opacity: 0; pointer-events: none; transition: transform .5s var(--ease-spring), width .5s var(--ease-spring), opacity .3s; }
.nav-pill.is-on { opacity: 1; }
.site-head.on-dark .nav-pill { background: rgba(255, 255, 255, .12); }
.head-prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--honey), #D5AA63); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
.subnav { display: none; }
@media (max-width: 1000px) {
  html { scroll-padding-top: calc(var(--head-h, 52px) + 45px + env(safe-area-inset-top, 0px)); }
  .subnav { display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 var(--gr) 6px var(--gl); overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .subnav::-webkit-scrollbar { display: none; }
  .subnav a { flex: none; padding: 6px 14px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink-soft); font-size: 14px; font-weight: 600; text-decoration: none; transition: background-color .3s, color .3s, transform .2s; -webkit-tap-highlight-color: transparent; }
  .subnav a[aria-current] { background: var(--ink); color: var(--wax); }
  .subnav a:active { transform: scale(.95); }
  .site-head.on-dark .subnav a { background: rgba(255, 255, 255, .09); color: var(--band-soft); }
  .site-head.on-dark .subnav a[aria-current] { background: var(--honey); color: var(--on-honey); }
}

/* 輪播（手機版左右滑） */
/* 左右滑的控制列（Apple 的做法）：左邊一顆膠囊裝圓點（目前那張拉長成一條），右邊兩顆半透明的圓形箭頭（到頭了變淡） */
.rail-ctl { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.rail-pill { display: flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.rail-dots { display: flex; align-items: center; gap: 7px; }
.rail-dot { --w: 0; position: relative; width: calc(7px + 22px * var(--w)); height: 7px; padding: 0; border: 0; border-radius: 7px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  background: var(--ink); opacity: calc(.26 + .62 * var(--w)); }
.rail-dot::before { content: ""; position: absolute; inset: -14px -4px; }
.rail-pads { display: flex; gap: 10px; }
.rail-btn { display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: transparent;
  background: color-mix(in srgb, var(--ink) 9%, transparent); color: color-mix(in srgb, var(--ink) 72%, transparent); transition: background-color .1s linear, color .1s linear, opacity .1s linear, transform .15s var(--ease-out); }
.rail-btn .ico { width: 18px; height: 18px; stroke-width: 2.4; }
.rail-btn:disabled { opacity: .42; cursor: default; }
.rail-btn:not(:disabled):active { transform: scale(.9); background: color-mix(in srgb, var(--ink) 15%, transparent); }
.is-rail { cursor: grab; }
.is-rail.is-drag { cursor: grabbing; scroll-snap-type: none; }
.is-rail.is-drag > * { pointer-events: none; }
@media (max-width: 620px) {
  .plans { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-left: calc(-1 * var(--gl)); margin-right: calc(-1 * var(--gr)); padding: 8px var(--gr) 18px var(--gl); scroll-padding-inline: var(--gl) var(--gr); scrollbar-width: none; overscroll-behavior-x: contain; }
  .plans::-webkit-scrollbar { display: none; }
  .plans > .plan { flex: 0 0 86%; scroll-snap-align: start; }
}

/* 四個方案（曲線下方）：滑過會在曲線上標出那條線，點一下選這個方案 */
/* 右欄「四個方案各要多少」（v19）：最省的放大在最上面一整排，其他三個小小的排一排；最省的換人時卡片滑過去 */
.tk-card { display: grid; gap: 12px; }
.tk-cardh h3 { font-size: 19px; }
.tk-cardh p { margin-top: 4px; font-size: 12px; line-height: 1.65; letter-spacing: .01em; color: var(--band-soft); text-wrap: pretty; }
.tickers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tk { position: relative; display: grid; gap: 3px; align-content: start; min-width: 0; padding: 10px 11px 11px; border-radius: 16px; border: 1px solid var(--band-rule); background: var(--band-3); color: var(--band-fg); font: inherit; text-align: left; cursor: pointer; transition: border-color .3s, background-color .3s, transform .25s var(--ease-out), box-shadow .3s; -webkit-tap-highlight-color: transparent; }
.tk.is-best { grid-column: 1 / -1; order: -1; gap: 6px; padding: 14px 16px 15px; border-radius: 20px; border-color: var(--honey); background: color-mix(in srgb, var(--honey) 8%, var(--band-3)); box-shadow: 0 0 0 1px var(--honey), 0 18px 40px -22px var(--honey-glow); }
.tk-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
.tk-head .gem { width: 20px; height: 20px; }
.tk.is-best .tk-head .gem { width: 28px; height: 28px; }
.tk-name { font-size: 14px; white-space: nowrap; }
.tk.is-best .tk-name { font-size: 17px; }
.tk-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.tk.is-best .tk-tags { margin-left: auto; }
.tk-tag { padding: 0 7px; border-radius: 999px; background: var(--honey); color: var(--on-honey); font-size: 11px; font-weight: 700; line-height: 1.7; white-space: nowrap; }
.tk-tag:not(.is-on) { display: none; }
.tk-tag.is-pick { background: var(--band-fg); color: var(--band); }
.tk-total { display: grid; }
.tk-terms { display: none; font-size: 11.5px; line-height: 1.5; letter-spacing: .01em; color: var(--band-soft); }
.tk.is-best .tk-terms { display: block; margin-top: -2px; }
.tk-tl { display: none; font-size: 12.5px; color: var(--band-soft); }
.tk.is-best .tk-tl { display: block; }
.tk-tot { font-size: 16px; font-weight: 700; color: var(--band-fg); }
.tk.is-best .tk-tot { font-size: clamp(28px, 2.4vw, 34px); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
/* 長條只在最省的那張：蜂蜜色＝它要付的，斜線＝比你選的（或個人版）省下來的 */
.tk-bar { display: none; }
.tk.is-best .tk-bar { position: relative; display: block; height: 12px; margin: 2px 0; border-radius: 6px; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--honey) 30%, transparent) 0 5px, transparent 5px 10px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--honey) 32%, transparent); }
.tk.is-best.no-ref .tk-bar { display: none; }
.tk.is-best .tk-bar i { --hc: var(--honey); position: relative; display: block; width: calc(var(--w, 1) * 100%); height: 100%; border-radius: 6px; overflow: hidden; background: linear-gradient(90deg, #F6D998, var(--honey) 60%, #D8B06A); box-shadow: -2px 0 12px -3px color-mix(in srgb, var(--honey) 80%, transparent); transition: width .8s cubic-bezier(.16, 1, .3, 1); }
.tk-save { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 5px; min-width: 0; font-size: 12.5px; line-height: 1.35; color: var(--band-soft); }
.tk-sv { font-weight: 700; color: var(--band-fg); }
/* 小卡片的「多 $X」黏在同一行（數字太長就縮小，不會剩一個「多」在上面一行） */
.tk:not(.is-best) .tk-save { flex-wrap: nowrap; }
.tk.is-best .tk-save { font-size: 15px; font-weight: 700; color: var(--honey); }
.tk.is-best .tk-sv { font-size: clamp(20px, 1.8vw, 24px); font-weight: 800; letter-spacing: -.02em; color: var(--honey); }
.tk.is-focus:not(.is-best) { background: color-mix(in srgb, var(--honey) 6%, var(--band-3)); }
.tk[aria-pressed="true"]:not(.is-best) { border-color: var(--band-fg); box-shadow: 0 0 0 1px var(--band-fg); }
.tk:active { transform: scale(.97); }
.tk:focus-visible { outline: 3px solid var(--honey-deep); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .tk:hover { transform: translateY(-3px); background: color-mix(in srgb, var(--band-fg) 6%, var(--band-3)); } .tk.is-best:hover { background: color-mix(in srgb, var(--honey) 12%, var(--band-3)); } }
@media (max-width: 380px) { .tickers { gap: 6px; } .tk:not(.is-best) { padding: 9px 8px 10px; } .tk-name { font-size: 13px; } .tk-tot { font-size: 15px; } }


/* 預算滑桿的數字泡泡、剛改過的項目閃一下 */
.range-wrap { position: relative; }
.range-tip { position: absolute; bottom: calc(100% - 2px); left: 0; padding: 3px 10px; border-radius: 8px; background: var(--honey); color: var(--on-honey); font-size: 13px; font-weight: 700; white-space: nowrap; opacity: 0; pointer-events: none; transform: translateX(calc(-50% + var(--tdx, 0px))) translateY(6px) scale(.9); transition: opacity .2s, transform .25s var(--ease-spring); }
.range-tip::after { content: ""; position: absolute; top: 100%; left: calc(50% - var(--tdx, 0px)); margin-left: -5px; border: 5px solid transparent; border-top-color: var(--honey); }
.range-wrap.is-active .range-tip, .range-wrap:has(.range:focus-visible) .range-tip { opacity: 1; transform: translateX(calc(-50% + var(--tdx, 0px))) translateY(0) scale(1); }
@media (hover: hover) and (pointer: fine) { .pk-slide .range-wrap:hover .range-tip { opacity: 1; transform: translateX(calc(-50% + var(--tdx, 0px))) translateY(0) scale(1); } }

@keyframes item-flash { 0% { background-color: color-mix(in srgb, var(--honey) 22%, transparent); } }

/* 按下去會回彈 */
.chip { transition: color .2s, border-color .2s, background-color .2s, transform .2s var(--ease-out); -webkit-tap-highlight-color: transparent; }
.seg button { transition: color .25s, transform .2s var(--ease-out); -webkit-tap-highlight-color: transparent; }
.chip:active, .seg button:active { transform: scale(.94); }

/* 滑鼠移過去會有反應 */
@media (hover: hover) and (pointer: fine) {
  .chip:hover { transform: translateY(-1px); }
  .seg button:not([aria-pressed="true"]):not([aria-selected="true"]):hover { color: var(--ink); }
  .seg-dark button:not([aria-pressed="true"]):hover { color: var(--band-fg); }
  .pk:hover .pk-l b { color: var(--honey); }
  .rail-btn:not(:disabled):hover { background: color-mix(in srgb, var(--ink) 14%, transparent); color: var(--ink); }
  .cta-contacts .copy:hover { background: var(--on-honey); color: var(--honey); }
}

/* ---------- 註解：頁面最下面一份；內文只有上標數字，點了在原地打開 ---------- */
.fn { display: inline-grid; place-items: center; min-width: 17px; height: 17px; margin: 0 0 0 3px; padding: 0 4px; border: 0; border-radius: 999px; vertical-align: super; background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink-soft); font: 700 10.5px/1 var(--font-num); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .2s, color .2s; }
.fn:hover, .fn:focus-visible { background: var(--honey); color: var(--on-honey); }
.fn:focus-visible { outline: 2px solid var(--honey-deep); outline-offset: 2px; }
.is-dark .fn, .quote-band .fn { background: rgba(255, 255, 255, .12); color: var(--band-soft); }
/* 註解：頁面最下面一行很小的字，自己往左跑（滑鼠移上去、手指按住、用鍵盤選到「全部」就停）；「全部」展開成一則一行 */
.notes { padding-block: 6px 7px; border-top: 1px solid var(--rule); }
.notes-bar { display: flex; align-items: center; gap: 12px; }
.notes .notes-h { flex: none; margin: 0; font: 700 10px/1 var(--font-body); letter-spacing: .04em; color: var(--ink-soft); }
.nt-tick { flex: 1 1 auto; min-width: 0; overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
.nt-run { display: flex; width: max-content; animation: nt-run var(--nt-dur, 240s) linear infinite; animation-play-state: paused; }
.notes.is-run .nt-run { animation-play-state: running; }
.notes.is-run.is-hold .nt-run { animation-play-state: paused; }
/* 11/2：滑鼠移上去就停，只算真的有滑鼠的電腦（手機點過之後 :hover 會一直黏在那裡，放開了也不會再跑） */
@media (hover: hover) and (pointer: fine) { .notes.is-run .nt-tick:hover .nt-run { animation-play-state: paused; } }
/* 用鍵盤選到「全部」才停；手指點過「全部」不算（點完焦點會留在按鈕上，跑馬燈就一直停著） */
.notes.is-run:has(:focus-visible) .nt-run { animation-play-state: paused; }
@supports not selector(:has(*)) { .notes.is-run:focus-within .nt-run { animation-play-state: paused; } }
@keyframes nt-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.nt-copy { display: flex; flex: none; }
.nt-i { display: inline-flex; flex: none; align-items: center; padding-right: 22px; font: 400 10px/1.6 var(--font-body); color: var(--ink-faint); white-space: nowrap; }
.nt-i::before { content: ""; flex: none; width: 5px; height: 6px; margin-right: 6px; background: var(--honey); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.nt-i b { margin-right: 3px; font-weight: 700; color: var(--ink-soft); }
.nt-all { flex: none; min-height: 24px; padding: 0 2px; border: 0; background: none; font: 700 10px/1 var(--font-body); color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.nt-all:hover { color: var(--ink); }
.nt-all:focus-visible { outline: 2px solid var(--honey-deep); outline-offset: 2px; border-radius: 4px; }
/* 完整的清單：收起來時只給報讀軟體唸；展開時一則一行，跑馬燈收起來 */
.notes-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-width: 920px; }
.notes:not(.is-open) .notes-list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.notes.is-open .notes-list { margin-top: 8px; }
.notes.is-open .nt-tick { visibility: hidden; }
.notes-list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 6px; font-size: 11.5px; line-height: 1.65; color: var(--ink-soft); }
.nt-no { display: grid; place-items: center; width: 17px; height: 17px; margin-top: 1px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 8%, transparent); font-size: 10px; font-weight: 700; color: var(--ink-soft); }
.notes-list p { text-wrap: pretty; }
@media (prefers-reduced-motion: reduce) { .nt-run { animation: none; } .nt-tick { overflow-x: auto; -webkit-mask: none; mask: none; } }

/* ---------- 小視窗：手機從下面滑上來，電腦置中 ---------- */
dialog.dlg.pop { width: min(620px, calc(100vw - 32px)); }
dialog.dlg.pop.is-wide { width: min(1040px, calc(100vw - 32px)); }
dialog.dlg.pop.is-note { width: min(480px, calc(100vw - 32px)); }
.pop .dlg-head h2 { font-size: 18px; }
.pop .dlg-body { display: grid; gap: 16px; }
.pop-note { font-size: 15.5px; line-height: 1.75; color: var(--ink); text-wrap: pretty; }
.pop-lead { font-size: 14.5px; color: var(--ink-soft); }
.pop-more { justify-self: start; }
.cmp.is-pop { --stick: 0px; }
.cmp.is-pop .cmp-head { top: 0; background: color-mix(in srgb, var(--wax) 92%, transparent); }
.cmp.is-pop .cr.is-cta { display: none; }
@media (max-width: 640px) {
  dialog.dlg.pop, dialog.dlg.pop.is-wide, dialog.dlg.pop.is-note, dialog.dlg.pop.is-year { width: 100vw; max-width: 100vw; }
  .pop .dlg-head { position: relative; padding-top: 22px; }
  .pop .dlg-head::before { content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 18%, transparent); }
}

/* ---------- 試算：預估客人（因為→所以）、沒選廣告費的提醒、回到試算 ---------- */
.est-chart { position: relative; display: grid; gap: 10px; }
/* v19：看怎麼算的——幾條橫的長條：同樣的廣告費，影片越多找到越多客人（你選的那一條是蜂蜜色） */
.eb-h { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.55; color: var(--band-fg); text-wrap: pretty; }
.eb-h b { color: var(--honey); }
.eb-list { display: flex; flex-direction: column; gap: 6px; }
.eb-row { display: grid; grid-template-columns: minmax(6.5em, 9.5em) minmax(48px, 1fr) auto; align-items: center; gap: 4px 12px; padding: 7px 10px; border-radius: 12px; }
.eb-row[hidden] { display: none; }
.eb-row.is-me { background: color-mix(in srgb, var(--honey) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--honey) 40%, transparent); }
.eb-l { display: grid; min-width: 0; }
.eb-l b { font-size: 13px; line-height: 1.35; color: var(--band-fg); }
.eb-l small { font-size: 11.5px; color: var(--band-soft); }
.eb-row.is-me .eb-l b { color: var(--honey); }
.eb-bar { position: relative; height: 12px; border-radius: 6px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.eb-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; transition: width .7s cubic-bezier(.16, 1, .3, 1); }
.eb-hi { width: calc(var(--hi, 0) * 100%); background: color-mix(in srgb, #8E8E96 45%, transparent); }
.eb-lo { width: calc(var(--lo, 0) * 100%); background: #8E8E96; }
.eb-row.is-me .eb-hi { background: color-mix(in srgb, var(--honey) 45%, transparent); }
.eb-row.is-me .eb-lo { background: var(--honey); box-shadow: 0 0 14px -2px color-mix(in srgb, var(--honey) 70%, transparent); }
.eb-v { display: inline-flex; align-items: baseline; gap: 3px; min-width: 4.6em; justify-content: flex-end; font: 700 15px/1.2 var(--font-num); color: var(--band-fg); white-space: nowrap; }
.eb-v small { font: 600 11.5px var(--font-body); color: var(--band-soft); }
.eb-row.is-me .eb-v { color: var(--honey); font-size: 17px; }
@media (max-width: 480px) { .eb-row { grid-template-columns: minmax(6.5em, 1fr) auto; } .eb-bar { grid-column: 1 / -1; grid-row: 2; } }
@media (prefers-reduced-motion: reduce) { .eb-bar i { transition: none; } }
.est-empty { display: grid; justify-items: start; gap: 6px; padding: 16px; border-radius: 16px; border: 1.5px dashed color-mix(in srgb, var(--honey) 55%, transparent); }
.est-empty b { font-size: 17px; }
.est-empty span { font-size: 13.5px; color: var(--band-soft); }
.est-ads { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.est-read { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--band-rule); }
.est-read p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--band-soft); }
.est-read b { color: var(--band-fg); }
.er-k { display: inline-grid; place-items: center; margin-right: 8px; padding: 1px 8px; border-radius: 999px; background: var(--band-3); color: var(--band-fg); font-size: 12px; font-weight: 800; vertical-align: 2px; }
.er-so .er-k { background: var(--honey); color: var(--on-honey); }
.er-so { color: var(--band-fg) !important; }
.er-v { margin: 0 6px; font-size: 26px; font-weight: 800; color: var(--honey) !important; letter-spacing: -.02em; white-space: nowrap; }
.er-vs.is-tip { color: var(--honey) !important; }
.is-warn { color: #FFB46B; font-weight: 700; }
.pk-note .is-warn { color: #FFB46B; }
.ad-ask { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.ad-opt { display: grid; gap: 2px; justify-items: start; padding: 12px 14px; border-radius: 16px; border: 1.5px solid var(--rule); background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .2s, transform .15s var(--ease-out); }
.ad-opt b { font-size: 19px; font-weight: 800; }
.ad-opt small { font-size: 12.5px; color: var(--ink-soft); }
.ad-opt:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .ad-opt:hover { border-color: var(--honey-deep); } }
.ad-skip { justify-self: start; color: var(--ink-soft); }
/* v20：季繳要產生報價單前，問要不要改年繳：季繳的月費劃掉、年繳的月費放大；主要按鈕是改年繳，不要的用小字連結 */
dialog.dlg.pop.is-year { width: min(500px, calc(100vw - 32px)); }
@media (max-width: 640px) { dialog.dlg.pop.is-year { width: 100vw; max-width: 100vw; } }
.ya { display: grid; gap: 8px; }
.ya-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; padding: 13px 16px; border-radius: 16px; border: 1.5px solid var(--rule); background: var(--card); }
.ya-row.is-a { border-color: var(--honey-deep); background: color-mix(in srgb, var(--honey) 10%, var(--card)); box-shadow: 0 10px 26px -18px var(--honey-glow); }
.ya-l { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.ya-l .gem { width: 22px; height: 22px; }
.ya-l b { font-size: 16px; }
.ya-l small { font-size: 12.5px; color: var(--ink-soft); }
.ya-tag { padding: 1px 9px; border-radius: 999px; background: var(--honey); color: var(--on-honey); font: 700 12px/1.6 var(--font-body); font-style: normal; white-space: nowrap; }
.ya-v { display: inline-flex; align-items: baseline; gap: 2px; margin-left: auto; white-space: nowrap; }
.ya-v s { font: 600 18px var(--font-num); color: var(--ink-soft); text-decoration-color: var(--bad, #E5484D); text-decoration-thickness: 2px; }
.ya-v b { font: 800 26px var(--font-num); letter-spacing: -.02em; color: var(--ink); }
.ya-v small { font-size: 12.5px; color: var(--ink-soft); }
.pop-note b { font-family: var(--font-num); }
.pop-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.pop-acts .link-btn { color: var(--ink-soft); }
@media (max-width: 480px) { .pop-acts .btn { width: 100%; } }
/* 報價視窗最上面：同樣的內容比個人版省多少 */
.dlg-summary .dlg-save { font-size: 14px; font-weight: 700; color: var(--ink); }
.dlg-summary .dlg-save b { color: var(--amber, var(--honey-deep)); font-size: 15px; }
.back-chip { position: fixed; z-index: 64; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px 10px 14px; border: 0; border-radius: 999px; background: var(--ink); color: var(--wax); font: 700 14.5px var(--font-body); box-shadow: var(--shadow); cursor: pointer; opacity: 0; pointer-events: none; transform: translate(-50%, 16px); transition: opacity .25s, transform .35s var(--ease-spring); }
.back-chip .ico { width: 16px; height: 16px; }
.back-chip.is-down .ico { transform: rotate(180deg); }
.back-chip.is-on { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
/* 「回到試算」出來的時候：只留這一顆，底部的預估列、浮動列、回到頂端先收起來；這顆放到最下面，不壓在卡片中間 */
body.has-back .xb, body.has-back .dock, body.has-back .to-top { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
body.has-back .back-chip { bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }

/* ---------- 卡片邊框的金光（Aceternity「Glowing Effect」＋React Bits「BorderGlow」；香檳金，自己繞、慢慢呼吸，節奏照 AI 影音學院官網） ----------
   interact.js 在卡片裡放一層 .gg（最上面、不擋滑鼠），裡面每一層都是一顆不動的柔光圓點，只用 transform 移動、轉向（顯示卡搬，不重畫）：
   .gg-ring：一圈只露出邊框寬度的框（遮罩挖掉中間、圓角裁掉外面），裡面一顆亮點——邊框上的一段金光
   .gg-halo：比卡片大一圈（--gg-m），中間挖掉卡片（clip-path，形狀由 interact.js 依卡片大小算）；裡面 5 顆橢圓光沿著邊框排成一段（轉角跟著圓角轉）——那段光外面的光暈
   .gg-in：只露在卡片裡面，一樣拉長的淡光——貼著邊框往裡面透一點
   .gg-spot：黑卡才有，跟著滑鼠的一團柔光（React Bits SpotlightCard）
   位置、透明度由 interact.js 每一格寫進來；沒有亮的卡片整層收起來（.gg-on 才顯示）；黑卡用「加亮」疊上去，字不會被蓋暗 */
.hw, .rp, .qx-result { position: relative; }   /* 黏住的面板（.pfx-side）本來就有定位，不要蓋掉 */
:where(.gg-pos) { position: relative; }   /* 本來沒定位的卡片才補；權重 0，卡片自己的 sticky 等設定照樣有效 */
.hw { border: 1.5px solid transparent; background-clip: padding-box; }
.rp, .pfx-side .fx-panel, .qx-result { background-clip: padding-box; }
.qx-result { border-color: rgba(255, 255, 255, .1); }
.gg { position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
  --gg-w: 2px; --gg-m: 56px;
  /* 香檳金（AI 影音學院官網的金：主色 #EAD5A4、發光 #EFCB80／#F2D590、深一點的 #D2A958）。白底卡片上用深一階，才看得到 */
  --gg-c2: rgba(201, 158, 74, .62); --gg-c3: #DCB66B; --gg-c4: #EBD196;
  --gg-h1: rgba(206, 163, 80, .55); --gg-h2: rgba(206, 163, 80, .4); --gg-h3: rgba(206, 163, 80, .23); --gg-h4: rgba(206, 163, 80, .1);
  --gg-sp: rgba(242, 213, 144, .085); --gg-sp2: rgba(242, 213, 144, .03); }
@media (max-width: 699px) { .gg { --gg-m: 34px; } }
.gg > i { position: absolute; display: none; border-radius: inherit; opacity: 0; }
.gg.gg-on > i { display: block; }
.gg > i > b { position: absolute; left: 0; top: 0; display: block; border-radius: 50%; }
.gg.gg-on > i > b { will-change: transform; }
.gg-ring { inset: 0; padding: var(--gg-w); overflow: hidden;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.gg-ring > b { background: radial-gradient(closest-side, var(--gg-c4), var(--gg-c3) 26%, var(--gg-c2) 60%, transparent); }
.gg-halo { inset: calc(var(--gg-m) * -1); border-radius: 0; }
.gg-halo > b { border-radius: 50%; background: radial-gradient(closest-side, var(--gg-h2), var(--gg-h3) 30%, var(--gg-h4) 60%, transparent); }
/* 5 顆排成一段：中間那顆最亮，往兩邊淡掉 */
.gg-halo > b:nth-child(1), .gg-halo > b:nth-child(5) { opacity: .3; }
.gg-halo > b:nth-child(2), .gg-halo > b:nth-child(4) { opacity: .62; }
.gg-halo > b:nth-child(3) { opacity: .92; }
.gg-in { inset: 0; overflow: hidden; }
.gg-in > b { background: radial-gradient(closest-side, var(--gg-h3), var(--gg-h4) 46%, transparent); }
.gg-spot { inset: 0; overflow: hidden; }
.gg-spot > b { width: 640px; height: 640px; background: radial-gradient(closest-side, var(--gg-sp), var(--gg-sp2) 45%, transparent 72%); }
/* 黑卡：邊框那段光的中間是近乎白的香檳色、外面是發光的金（#F2D590、#EFCB80）；用「加亮」疊上去，字不會被蓋暗 */
.gg-dk { --gg-c2: rgba(239, 203, 128, .55); --gg-c3: #F2D590; --gg-c4: #FFF6E2;
  --gg-h1: rgba(242, 213, 144, .8); --gg-h2: rgba(239, 203, 128, .42); --gg-h3: rgba(239, 203, 128, .25); --gg-h4: rgba(239, 203, 128, .12); }
.gg-dk > .gg-ring, .gg-dk > .gg-spot { mix-blend-mode: plus-lighter; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gg { --gg-c2: rgba(239, 203, 128, .55); --gg-c3: #F2D590; --gg-c4: #FFF6E2; --gg-h1: rgba(242, 213, 144, .8); --gg-h2: rgba(239, 203, 128, .42); --gg-h3: rgba(239, 203, 128, .25); --gg-h4: rgba(239, 203, 128, .12); } :root:not([data-theme="light"]) .gg > .gg-ring, :root:not([data-theme="light"]) .gg > .gg-spot { mix-blend-mode: plus-lighter; } }
:root[data-theme="dark"] .gg { --gg-c2: rgba(239, 203, 128, .55); --gg-c3: #F2D590; --gg-c4: #FFF6E2; --gg-h1: rgba(242, 213, 144, .8); --gg-h2: rgba(239, 203, 128, .42); --gg-h3: rgba(239, 203, 128, .25); --gg-h4: rgba(239, 203, 128, .12); }
:root[data-theme="dark"] .gg > .gg-ring, :root[data-theme="dark"] .gg > .gg-spot { mix-blend-mode: plus-lighter; }
/* 手機左右滑的那排卡片：外面那圈光暈會撐出捲動範圍（卡片能被上下推、最後一張後面多出一段空白）→ 那排不放光暈，邊框和裡面的光照樣有 */
.is-rail .gg > .gg-halo { display: none !important; }
.is-rail { overflow-y: hidden; }   /* 左右滑的那排不能被上下推 */
/* 光暈往外透一點：整頁左右多出來的部分裁掉，不會出現橫向捲動（舊版 Safari 不認得 clip，改用 hidden） */
main { overflow-x: clip; }
@supports not (overflow: clip) { body { overflow-x: hidden; } }

/* ---------- 過場：從上一區直接飛進蜂巢格子（Igloo 的做法） ----------
   不另外放一頁空白：上一區（.pre-portal）捲到最後一個畫面就停住（底部貼著畫面底部），
   下一區的舞台往上蓋在它上面（一開始是透明的）；往下捲時上一區放大、變模糊、變淡，中間的黑色六角形一路長大蓋滿畫面，
   蓋滿之後標題才從霧霧的變清楚，下面的內容接著從畫面下方上來。
   --pt-z：上一區停住、飛進去的那段捲動距離；--pt-run：舞台黏住的整段距離（飛進去＋標題）。沒有動畫時直接是黑底＋標題 */
/* 11/2 晚：飛進去那段拉長（她：稍微往下捲一點就整個過去了）——電腦 62vh → 110vh、手機 48vh → 90vh；窗一出現上一區就蓋上毛玻璃，窗裡一開始就看得到下一區的標題 */
:root { --pt-z: 110vh; --pt-run: 152vh; --pt-lead: 22vh; }
@media (max-width: 699px) { :root { --pt-z: 90vh; --pt-run: 126vh; --pt-lead: 16vh; } }
.proof.is-dark, .quote-band { position: relative; overflow-x: clip; }
.quote-band { overflow: visible; overflow-x: clip; }
.sec.has-portal { padding-top: 0; }
.quote-band.has-portal::before { display: none; }
.portal { position: relative; }
.pt-stage { position: relative; display: grid; place-items: center; padding: clamp(72px, 10vw, 128px) 0 clamp(8px, 2vw, 20px); background: var(--band); color: var(--band-fg); overflow: hidden; }
.pt-frost, .pt-fog, .pt-fly { display: none; }
.pt-head { position: relative; z-index: 2; margin-bottom: clamp(28px, 4vw, 48px); padding-left: var(--gl); padding-right: var(--gr); }
.has-portal .pt-head h2 { color: var(--band-fg); }
.has-portal .pt-head p { color: var(--band-soft); }
.quote-band .pt-stage::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 70%; background: radial-gradient(48% 50% at 50% 52%, color-mix(in srgb, var(--honey) 11%, transparent), transparent 100%); pointer-events: none; }
/* 上一區：最後一個畫面停住（放大會超出左右，所以左右裁掉；不會產生橫向捲動） */
.viz .pre-portal { padding-bottom: 0; overflow-x: clip; }
.viz .pre-portal::after { content: ""; display: block; height: var(--pt-z); }
/* 11/2 晚（她：「用這個組合試算」還沒按到就被過場擋住了，畫面要再往下一點才開始變）：
   最後一個畫面下面多留一段（--pt-lead）——最後一顆按鈕先捲到畫面中間偏下、看得清楚按得到，之後才停住、開始過場 */
.viz .pre-portal > .sec-in { position: sticky; top: calc(100vh - var(--h, 100vh)); padding-bottom: calc(clamp(36px, 6vw, 84px) + var(--pt-lead)); transform-origin: 50% calc(100% - 50vh); }
@media (max-width: 1080px) { .viz .pre-portal > .sec-in { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px) + var(--pt-lead)); } }   /* 手機：底部浮動列不要蓋住最後一個按鈕 */
/* 下一區的舞台：往上拉到跟上一區最後一個畫面重疊，飛進去之前是透明的、滑鼠穿得過去 */
.viz .portal { height: calc(100vh + var(--pt-run)); pointer-events: none; }
.viz .pre-portal + .has-portal { display: flow-root; }   /* 不讓舞台往上拉的負邊距把整個下一區一起拉上去 */
.viz .pre-portal + .has-portal > .portal { margin-top: calc(-100vh - var(--pt-z)); }
.viz .pt-stage { position: sticky; top: 0; height: 100vh; padding: 0 0 18vh; background: transparent; }
.viz .portal.is-covered .pt-stage { background: var(--band); }
.viz .portal.is-covered .pt-head { pointer-events: auto; }
/* 標題出來之後，下面的內容直接從畫面下方接上來（不留半個畫面的空白） */
.viz .portal + .sec-in { position: relative; z-index: 1; margin-top: -36vh; }
/* 毛玻璃：蓋在上一區上面，越飛越霧（只動透明度，模糊本身不變，比較順） */
.viz .pt-frost { display: block; position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none; background: var(--pt-frost, color-mix(in srgb, var(--wax) 42%, transparent)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
@media (pointer: coarse) { .viz .pt-frost { -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); background: var(--pt-frost, color-mix(in srgb, var(--wax) 48%, transparent)); } }
/* 霧：毛玻璃後面再蓋一層底色，越來越濃，蓋滿之後就把毛玻璃收掉（大螢幕上模糊最吃效能，只留前半段） */
.viz .pt-fog { display: block; position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none; background: var(--pt-fog, var(--wax)); }
/* 深色主題：上一區本來就是黑的，霧也是黑的話，窗口（黑底）就看不出來——霧改成抬亮一點的炭灰、窗裡的蜂蜜光加強 */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pt-fog: #1A1A1E; --pt-frost: rgba(26, 26, 30, .55); --pt-glow: 27%; } }
:root[data-theme="dark"] { --pt-fog: #1A1A1E; --pt-frost: rgba(26, 26, 30, .55); --pt-glow: 27%; }
/* 霧蓋滿之後：毛玻璃在霧後面看不到了，直接收掉；窗口蓋滿之後，霧和框也收掉，標題和內容上來時就不用再算 */
.viz .portal.is-fogged .pt-frost, .viz .portal.is-covered .pt-fog, .viz .portal.is-covered .pt-fly { visibility: hidden; }
/* 飛進去的時候，上一區卡片邊框的光先停 */
.is-flying .gg { visibility: hidden; }
/* 前面飛過去的蜂巢框：做成跟蓋滿畫面一樣大的圖，再縮小、放大（交給合成層跑，不用每一格重畫）；框比窗口近，畫在窗口前面 */
.viz .pt-fly { display: block; position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
.pt-fly svg { position: absolute; left: 50%; top: var(--pt-cy, 41%); max-width: none; width: var(--pt-b, 240vmax); height: var(--pt-b, 240vmax); margin: calc(var(--pt-b, 240vmax) / -2) 0 0 calc(var(--pt-b, 240vmax) / -2); overflow: visible; transform: scale(0); opacity: 0; }
.pt-rg path { fill: none; stroke: var(--honey); stroke-width: var(--pt-rw, .09); stroke-linejoin: round; }
/* 窗口：下一區本身（黑底＋標題）就在後面，前面用一個邊緣羽化的六角形遮罩打開——
   一開始很小、半透明，看得到裡面的標題若隱若現；遮罩越開越大，蓋滿畫面時就是下一區（遮罩拿掉，畫面不會跳） */
.pt-win { display: contents; }
.viz .pt-win { display: grid; place-items: center; position: absolute; inset: 0; z-index: 2; padding: 0 0 18vh; opacity: 0; pointer-events: none;
  background: radial-gradient(58% 46% at 50% 41%, color-mix(in srgb, var(--honey) var(--pt-glow, 16%), transparent), transparent 72%), var(--band);
  -webkit-mask: url(pt-hex.png) center / 0 0 no-repeat; mask: url(pt-hex.png) center / 0 0 no-repeat; }
.viz .quote-band .pt-win { background: radial-gradient(58% 46% at 50% 41%, color-mix(in srgb, var(--honey) var(--pt-glow, 16%), transparent), transparent 72%), radial-gradient(48% 35% at 50% 66.4%, color-mix(in srgb, var(--honey) 11%, transparent), transparent 100%), var(--band); }
.viz .portal.is-covered .pt-win { opacity: 1; -webkit-mask: none; mask: none; }
/* 窗口的邊：一圈柔柔的蜂蜜色光（pt-rim.png），跟窗口一起放大；窗口快蓋滿時就淡掉 */
.pt-rim { display: none; }
.viz .pt-rim { display: block; position: absolute; z-index: 3; left: 50%; top: var(--pt-cy, 41%); width: var(--pt-m, 3000px); height: var(--pt-m, 3000px); margin: calc(var(--pt-m, 3000px) / -2) 0 0 calc(var(--pt-m, 3000px) / -2);
  background: url(pt-rim.png) center / 100% 100% no-repeat; opacity: 0; transform: scale(0); pointer-events: none; }
.viz .portal.is-covered .pt-rim { visibility: hidden; }
.viz .pt-head { margin-bottom: 0; }
/* 11/2 晚：標題一直都在窗裡（窗開多大就看到多少）。窗的邊是羽化的，字會從金框外面透出來——
   標題另外用一個「硬邊」的六角形裁在金框裡面（外接圓半徑 0.37，金框在 0.38），跟窗同一條時間軸放大（interact.js 動 mask-size／position）；蓋滿之後拿掉 */
.viz .pt-head { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 13L82.04 31.5V68.5L50 87L17.96 68.5V31.5Z'/%3E%3C/svg%3E") 0 0 / 0 0 no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 13L82.04 31.5V68.5L50 87L17.96 68.5V31.5Z'/%3E%3C/svg%3E") 0 0 / 0 0 no-repeat; }
.viz .portal.is-covered .pt-head { -webkit-mask: none; mask: none; }
.viz .quote-band .pt-stage::after { display: none; }
/* 方案 → 試算：上一區最後一個畫面是一大張深色的試算卡，淺色主題用白色毛玻璃蓋上去會變成髒髒的灰——這一段改用深色的毛玻璃和霧（跟深色主題一樣），飛進黑色的試算區比較順 */
.quote-band { --pt-fog: #1A1A1E; --pt-frost: rgba(14, 14, 16, .8); --pt-glow: 27%; }   /* 毛玻璃再深一點：外面的米色底不會先變成一片髒灰 */
/* 點導覽列跳過來：直接停在標題出來的地方（跳過飛進去的那一段） */
.viz .has-portal { scroll-margin-top: calc(100vh + var(--pt-z) - var(--pt-run) * .95); }
@media (max-width: 699px) {
  .viz .pt-stage, .viz .pt-win { padding-bottom: 12vh; }
  .viz .portal + .sec-in { margin-top: -28vh; }
  .viz .pt-win { background: radial-gradient(70% 40% at 50% 44%, color-mix(in srgb, var(--honey) var(--pt-glow, 16%), transparent), transparent 72%), var(--band); }
  .viz .quote-band .pt-win { background: radial-gradient(70% 40% at 50% 44%, color-mix(in srgb, var(--honey) var(--pt-glow, 16%), transparent), transparent 72%), radial-gradient(48% 35% at 50% 66.4%, color-mix(in srgb, var(--honey) 11%, transparent), transparent 100%), var(--band); }
}
#qx { scroll-margin-top: calc(var(--head-h) + 56px + env(safe-area-inset-top, 0px)); }

/* ---------- 圖表共用（Cerebrium／Framer 的質感） ----------
   格線：淡色虛線；刻度、軸的名稱：等寬小字；線條細；主角蜂蜜黃，其他灰；面積往下淡出 */
:root { --grid: color-mix(in srgb, var(--ink) 14%, transparent); --tick: var(--ink-faint); }
.is-dark, .quote-band, .pq { --grid: rgba(255, 255, 255, .13); --tick: #8E8E96; }
.fe-grid line, .sv-grid line, .es-grid line { stroke: var(--grid); stroke-width: 1; stroke-dasharray: 3 5; }
.fe-grid text, .fe-xt text, .sv-grid text, .sv-xt text, .es-grid text, .es-xt text { fill: var(--tick); font: 500 11px var(--font-mono); letter-spacing: .02em; }
.fe-axis, .es-yl, .es-xl { fill: var(--tick); font: 500 10.5px var(--font-mono); letter-spacing: .06em; }
/* Cerebrium 的比較列：上面小字標籤、下面細長條（5px）、右邊大數字；捲到才長出來，換資料時數字一格一格滾 */
.cbars { display: grid; gap: 14px; }
.cbar { --cb: color-mix(in srgb, var(--ink) 30%, transparent); display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l v" "t v"; align-items: end; column-gap: 16px; row-gap: 8px; min-width: 0; }
.cb-l { grid-area: l; display: flex; align-items: center; gap: 6px; min-width: 0; font: 500 11.5px/1.35 var(--font-mono); letter-spacing: .03em; color: var(--ink-soft); }
.cb-t { grid-area: t; position: relative; display: block; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 9%, transparent); }
/* 長條和前端的圓點都用「縮放、位移」長出來（交給合成層跑，不用每一格重新排版，打開、拉動都順） */
.cb-t i { display: block; width: 100%; height: 100%; border-radius: 3px; background: linear-gradient(90deg, color-mix(in srgb, var(--cb) 22%, transparent), var(--cb)); transform: scaleX(var(--w, 1)); transform-origin: 0 50%; transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
.cb-t::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 28px; margin-top: -14px; pointer-events: none;
  background: radial-gradient(circle at calc(100% - 3.5px) 50%, var(--cb) 3.2px, transparent 3.9px);
  transform: translateX(calc((var(--w, 1) - 1) * 100% + 3.5px)); transition: transform .9s cubic-bezier(.16, 1, .3, 1), opacity .3s; }
.cbar.is-hi .cb-t::after, .cbar.is-best .cb-t::after { background: radial-gradient(circle at calc(100% - 3.5px) 50%, var(--cb) 3.2px, transparent 3.9px), radial-gradient(circle at calc(100% - 3.5px) 50%, color-mix(in srgb, var(--honey) 60%, transparent), transparent 13px); }
.viz .cbars:not(.is-on) .cb-t::after { transform: translateX(calc(-100% + 3.5px)); opacity: 0; }
.cbar:nth-child(2) .cb-t i, .cbar:nth-child(2) .cb-t::after { transition-delay: .08s; } .cbar:nth-child(3) .cb-t i, .cbar:nth-child(3) .cb-t::after { transition-delay: .16s; } .cbar:nth-child(4) .cb-t i, .cbar:nth-child(4) .cb-t::after { transition-delay: .24s; }
.cb-v { grid-area: v; align-self: center; font: 600 clamp(21px, 2.2vw, 27px)/1 var(--font-num); letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.cbar.is-hi, .cbar.is-best { --cb: var(--honey-deep); }
.cbar.is-off .cb-v { color: var(--ink-faint); font-weight: 500; }
.cbar.is-neg { --cb: color-mix(in srgb, var(--bad) 55%, transparent); }
.cbar.is-neg .cb-v { color: var(--ink-soft); }
.viz .cbars:not(.is-on) .cb-t i { transform: scaleX(0); }
.cbars.is-dark .cb-l { color: var(--band-soft); }
.cbars.is-dark .cb-t { background: rgba(255, 255, 255, .1); }
.cbars.is-dark .cb-v { color: var(--band-fg); }
.cbars.is-dark .cbar.is-hi { --cb: var(--honey); }
.cbars.is-dark .cbar.is-hi .cb-v { color: var(--honey); }
.cbars.is-dark .cbar.is-bm { --cb: #6B6B73; }
.cbars.is-pop { gap: 16px; padding: 4px 0; }
.cbars.is-pop .cb-l .gem { width: 20px; height: 20px; }
.cbars.is-pop .cb-l b { font-family: var(--font-body); font-weight: 700; color: var(--ink); letter-spacing: 0; }

/* =====================================================================
   v13 金光語言（參考 AI影音學院 fwomarketing.com 的做法，換成蜂蜜色）
   1. 主要按鈕：蜂蜜色漸層、內側一圈細亮線、一道白光隔幾秒刷過去；最重要的幾顆外面一圈光會呼吸
   2. 黑底上的大數字：一層一層的金色光暈（數字發光）
   3. 卡片：滑鼠移上去浮起來、微微放大，黑卡的邊框亮成蜂蜜色；卡片裡的圖片跟著放大一點
   4. 捲動：區塊捲進畫面時由下往上浮出來（同一排一個接一個）；標題只浮上來，不掃光（太刻意）
   5. 長條全站同一套：粗一點、亮色往右淡出、不要底軌和尾端的圓點；掃過的光帶一點蜂蜜色
   ===================================================================== */
:root {
  --num-glow: drop-shadow(0 0 2px rgba(255, 246, 226, .42)) drop-shadow(0 0 12px rgba(239, 203, 128, .34)) drop-shadow(0 0 30px rgba(239, 203, 128, .14));
  --ease-lift: cubic-bezier(.22, 1, .36, 1);
}

/* ---- 1. 按鈕 ---- */
.btn-honey { position: relative; overflow: hidden; isolation: isolate; border-color: #F9E7BF; background: linear-gradient(110deg, #E7C987, #F5E1B3 48%, #ECD098); }
.btn-honey:hover { background: linear-gradient(110deg, #ECD196, #F8E8C2 48%, #F0D7A6); }
.btn-honey::before { content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: inherit; border: 1px solid rgba(255, 255, 255, .5); pointer-events: none; }
.btn-honey::after, .cta .btn-ink::after { content: ""; position: absolute; z-index: -1; top: -50%; bottom: -50%; left: 0; width: 34%; pointer-events: none; opacity: 0; transform: translateX(-160%) skewX(-18deg);
  background: linear-gradient(100deg, transparent 5%, rgba(255, 255, 255, .6) 38%, rgba(255, 255, 255, .95) 50%, rgba(255, 255, 255, .6) 62%, transparent 95%); }
.cta .btn-ink { position: relative; overflow: hidden; isolation: isolate; }
.cta .btn-ink::after { background: linear-gradient(100deg, transparent 5%, rgba(247, 220, 157, .28) 38%, rgba(250, 230, 184, .5) 50%, rgba(247, 220, 157, .28) 62%, transparent 95%); }
.viz .btn-honey::after, .viz .cta .btn-ink::after { animation: cta-sweep 3.8s cubic-bezier(.25, .6, .35, 1) infinite; }
.viz .head-cta::after, .viz .dock-btn::after { animation-duration: 6.4s; }
@keyframes cta-sweep { 0%, 18% { transform: translateX(-160%) skewX(-18deg); opacity: 0; } 23% { opacity: .85; } 51% { transform: translateX(410%) skewX(-18deg); opacity: .6; } 56%, 100% { transform: translateX(410%) skewX(-18deg); opacity: 0; } }
@media (hover: hover) and (pointer: fine) {
  .btn-honey:hover { transform: translateY(-2px) scale(1.025); box-shadow: 0 0 0 1px rgba(248, 221, 158, .35), 0 0 28px -4px rgba(235, 200, 126, .55), 0 14px 30px -14px var(--honey-glow); }
  .cta .btn-ink:hover { transform: translateY(-2px) scale(1.025); }
}
/* 最重要的幾顆：外面一圈光像在呼吸（捲到畫面裡才跑） */
.btn-honey.is-breath { animation: cta-invite 3.2s ease-in-out infinite; }
/* 手機底部一直在的那顆：出現時呼吸三次就停（一直呼吸很搶眼，每一格也都要重畫一次光） */
.dock-btn.is-breath { animation-iteration-count: 3; }
.btn-honey.is-breath:active { animation-play-state: paused; }
@keyframes cta-invite {
  0%, 100% { box-shadow: 0 0 0 1px rgba(246, 219, 161, .15), 0 0 16px rgba(235, 200, 126, .16), 0 6px 22px rgba(0, 0, 0, .12); }
  48% { box-shadow: 0 0 0 6px rgba(246, 219, 161, .12), 0 0 36px rgba(235, 200, 126, .5), 0 8px 26px rgba(203, 169, 100, .16); }
  70% { box-shadow: 0 0 0 9px rgba(246, 219, 161, 0), 0 0 22px rgba(235, 200, 126, .26), 0 6px 22px rgba(0, 0, 0, .12); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-honey::after, .cta .btn-ink::after { display: none; }
  .btn-honey.is-breath { animation: none; box-shadow: 0 0 18px rgba(235, 200, 126, .32); }
}

/* ---- 2. 黑底上的大數字發光 ---- */
.hb-times, .hb-v, .pq-save > b, .vs-row.is-us .vs-v, .fr-save > b, .fee-ctl output, .bx[aria-pressed="true"] .bx-v, .qr-val, .tk.is-best .tk-save { filter: var(--num-glow); }
.fee-c:not(.is-ad) .fee-ctl output { filter: none; }
.hb-pct b { color: var(--honey); filter: var(--num-glow); }
/* 方案試算「每月廣告費」下面的預估人數：一樣放大、發光 */
.pk.is-ad .pk-note b { font: 800 19px var(--font-num); color: var(--honey); filter: var(--num-glow); }

/* ---- 3. 卡片：浮起來、微微放大（AI影音學院：上移 4px、放大 1.6%）；黑卡邊框亮成蜂蜜色 ---- */
.hw, .rp, .hb-blk, .hs-n, .px-card, .ws, .ad, .ipx-card, .tk, .pp, .fr-row, .plan, .kb { transition: transform .32s var(--ease-lift), box-shadow .32s var(--ease-lift), border-color .3s, background-color .3s, opacity .25s; }
.ad-thumb img, .ws-frame img, .po-art img { transition: transform .55s var(--ease-lift), filter .3s; }
@media (hover: hover) and (pointer: fine) {
  .hw:hover, .rp:hover, .hb-blk:hover, .hs-n:hover, .px-card:hover, .ws:hover, .ipx-card:hover { transform: translateY(-4px) scale(1.016); }
  .plan:hover { transform: translateY(-6px) scale(1.012); }
  .ad:hover { transform: translateY(-4px) scale(1.035); }
  .tk:hover, .pp:hover { transform: translateY(-3px) scale(1.02); }
  .fr-row:hover { transform: translateY(-2px) scale(1.01); }
  .rp:hover, .hb-blk:hover { border-color: color-mix(in srgb, var(--honey) 40%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--honey) 16%, transparent), 0 0 40px -12px color-mix(in srgb, var(--honey) 55%, transparent), 0 34px 70px -34px rgba(0, 0, 0, .7); }
  .hw:hover, .hs-n:hover, .px-card:hover, .ipx-card:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, .04), 0 28px 56px -30px rgba(0, 0, 0, .3); }
  .tk:hover, .pp:hover { border-color: color-mix(in srgb, var(--honey) 55%, var(--band-rule)); box-shadow: 0 0 26px -10px color-mix(in srgb, var(--honey) 60%, transparent); }
  .ad:hover .ad-thumb img, .ws:hover .ws-frame img, .po:hover .po-art img { transform: scale(1.045); filter: brightness(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .hw:hover, .rp:hover, .hb-blk:hover, .hs-n:hover, .px-card:hover, .ws:hover, .ipx-card:hover, .plan:hover, .ad:hover, .tk:hover, .pp:hover, .fr-row:hover { transform: none; }
  .ad:hover .ad-thumb img, .ws:hover .ws-frame img, .po:hover .po-art img { transform: none; }
}
/* 黑卡的底色畫在 ::after（z-index -1）：卡片浮起來（transform）時，底色一樣在字的後面 */
.hw::after, .rp::after, .hb-blk::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: var(--cbg); box-shadow: var(--cbg-in, none); }
.hw { --cbg: var(--wax-2); background: none; }
.rp { --cbg: radial-gradient(120% 55% at 50% -12%, rgba(235, 200, 126, .08), transparent 62%), linear-gradient(180deg, #141416, #070708 72%); --cbg-in: inset 0 1px 0 rgba(255, 255, 255, .06); background: none; box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .55); }
.hb-blk { --cbg: radial-gradient(110% 60% at 0% 0%, rgba(235, 200, 126, .13), transparent 58%), linear-gradient(180deg, #141416, #070708 72%); --cbg-in: inset 0 1px 0 rgba(255, 255, 255, .06); background: none; box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .5); }
.hw, .rp, .hb-blk { isolation: isolate; }

/* ---- 4. 捲動：區塊浮出來（標題只慢慢浮上來，不再掃光） ---- */
/* （用 translate 屬性，跟滑鼠移上去的 transform 分開，兩個不會互相蓋掉；浮完就把 class 拿掉，回到原本的動畫設定） */
.rv { opacity: 0; translate: 0 26px; transition: opacity .7s var(--ease-lift) var(--rv-d, 0ms), translate .9s var(--ease-lift) var(--rv-d, 0ms), transform .32s var(--ease-lift), box-shadow .32s var(--ease-lift), border-color .3s, background-color .3s; }
.rv.rv-in { opacity: 1; translate: 0 0; }
@media (max-width: 760px) { .rv { translate: 0 18px; } }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; translate: none; transition: none; } }

/* ---- 5. 長條全站同一套（Framer）：粗、亮色往右淡出、沒有底軌、沒有尾端圓點 ---- */
.cb-t i, .mt-bar i { --lt-bar: linear-gradient(90deg, var(--hc) 0%, color-mix(in srgb, var(--hc) 90%, transparent) 26%, color-mix(in srgb, var(--hc) 60%, transparent) 54%, color-mix(in srgb, var(--hc) 24%, transparent) 80%, transparent 100%); }
.cb-t { height: 12px; border-radius: 6px; background: none; }
.cb-t i { --hc: var(--cb); position: relative; overflow: hidden; border-radius: 6px; background: var(--lt-bar); }
.cb-t::after { display: none; }
.cbars.is-dark .cb-t, .fee .cb-t, .quote-band .cb-t, .is-dark .cb-t { background: none; }
.cbars.is-dark .cb-t i, .quote-band .cb-t i, .is-dark .cb-t i { background: var(--fx-bar); }
.cbar.is-hi .cb-t i::before, .cbar.is-best .cb-t i::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; mix-blend-mode: screen;
  background: linear-gradient(100deg, transparent 10%, rgba(255, 244, 205, .75) 50%, transparent 90%); transform: translateX(-130%); }
.cbars.is-on .cbar.is-hi .cb-t i::before, .cbars.is-on .cbar.is-best .cb-t i::before { animation: bar-shine 4.6s cubic-bezier(.5, 0, .3, 1) 1.4s infinite; }
.mt-bar { height: 10px; border-radius: 5px; background: none; }
.mt-bar i { --hc: var(--honey); border-radius: 5px; background: var(--lt-bar); }
.mt-bar::after { display: none; }
.viz .meters:not(.is-on) .mt-bar::after { display: none; }
.tk.is-best .tk-bar i::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; mix-blend-mode: screen; background: linear-gradient(100deg, transparent 10%, rgba(255, 244, 205, .75) 50%, transparent 90%); transform: translateX(-130%); animation: bar-shine 4.6s cubic-bezier(.5, 0, .3, 1) 1s infinite; }
/* 掃過長條的光：帶一點蜂蜜色、用 screen 疊上去（不會在亮色長條上變成灰灰髒髒的一塊） */
.vs-t i::before, .mb-row.is-us > i::before, .rb.is-us i::before, .rp-bar.is-curr > i > i::before { mix-blend-mode: screen; background: linear-gradient(100deg, transparent 10%, rgba(255, 244, 205, .72) 50%, transparent 90%); }
.mt-bar i::before { mix-blend-mode: screen; }
@media (prefers-reduced-motion: reduce) { .cbar .cb-t i::before, .tk-bar i::before { animation: none !important; display: none; } }
/* 服務過的客戶：真的加總（今年一共帶來幾位客人、比照行情一共省下多少）——黑卡、發光的大數字 */
.cl-sum { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; margin: 18px 0 22px; border-radius: 24px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .08); box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .5); }
.cls-i { --ink: #F5F5F7; --ink-soft: #A1A1A6; display: grid; gap: 8px; align-content: start; padding: clamp(18px, 2.4vw, 26px) clamp(18px, 2.6vw, 30px); color: var(--ink);
  background: radial-gradient(110% 80% at 0% 0%, rgba(235, 200, 126, .14), transparent 60%), linear-gradient(180deg, #141416, #070708 80%); }
.cls-k { font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.cls-v { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font: 800 clamp(40px, 5.2vw, 64px)/1 var(--font-num); letter-spacing: -.035em; color: var(--honey); }
.cls-v .roll { filter: var(--num-glow); }
.cls-v small { font: 700 16px var(--font-body); letter-spacing: 0; color: var(--ink-soft); }
.cls-i.is-save .cls-v { color: #FFE9A6; }
@media (min-width: 760px) { .cl-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 首屏標題：不再掃光（v16：太刻意），只留逐字浮現 */
.hero-title { position: relative; }

/* =====================================================================
   v14 按鈕的光（Raycast raycast.com 的做法，換成金色）
   1. 主要按鈕：有厚度——外面一圈細邊、上緣一條亮線、下緣一點陰影、外面一圈柔光；
      滑鼠移上去，後面亮起一團金色的光（Raycast 送出鈕後面那團模糊的 conic 漸層，這裡用三層顏色不同的光暈疊出來）
   2. 黑底上的次要按鈕、篩選：Raycast 黑色按鈕（由上往下微亮的漸層＋一圈細白邊，移上去邊框變亮）
   3. 分頁、篩選「選到的那一顆」：Raycast 鍵盤會發光的按鍵——深色鍵帽、字發光、後面一團金光、頂端一條反光
   ===================================================================== */
.btn-honey { border: 0; color: var(--on-honey);
  background: linear-gradient(180deg, #F8EBCB 0%, #EDD5A0 46%, #DDBF83 100%);
  box-shadow: 0 0 0 1px rgba(129, 102, 64, .34), 0 0 14px rgba(240, 202, 128, .34), 0 1px 1.5px rgba(94, 74, 45, .2), inset 0 -1px .4px rgba(92, 71, 43, .3), inset 0 1px .4px rgba(255, 255, 255, .95); }
.btn-honey::before { inset: 1px 1px 52% 1px; border: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); border-radius: 999px 999px 40% 40% / 999px 999px 60% 60%; }
.btn-honey:hover { background: linear-gradient(180deg, #FBF1DA 0%, #F2DDAF 46%, #E4C891 100%); }
.is-dark .btn-honey, .quote-band .btn-honey, .cta .btn-honey, .dock .btn-honey {
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .5), 0 0 16px rgba(241, 204, 130, .38), inset 0 -1px .4px rgba(92, 71, 43, .32), inset 0 1px .4px #FFF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-honey { box-shadow: 0 0 0 2px rgba(0, 0, 0, .5), 0 0 16px rgba(241, 204, 130, .38), inset 0 -1px .4px rgba(92, 71, 43, .32), inset 0 1px .4px #FFF; } }
:root[data-theme="dark"] .btn-honey { box-shadow: 0 0 0 2px rgba(0, 0, 0, .5), 0 0 16px rgba(241, 204, 130, .38), inset 0 -1px .4px rgba(92, 71, 43, .32), inset 0 1px .4px #FFF; }
@media (hover: hover) and (pointer: fine) {
  .btn-honey:hover { transform: translateY(-2px) scale(1.025);
    box-shadow: 0 0 0 1px rgba(129, 102, 64, .28), 0 0 18px 2px rgba(243, 208, 136, .55), -14px 6px 30px -4px rgba(214, 164, 95, .36), 14px -6px 30px -4px rgba(251, 232, 185, .5), 0 16px 34px -16px rgba(172, 134, 76, .55), inset 0 -1px .4px rgba(92, 71, 43, .3), inset 0 1px .4px #FFF; }
  .is-dark .btn-honey:hover, .quote-band .btn-honey:hover, .cta .btn-honey:hover, .dock .btn-honey:hover {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .5), 0 0 22px 3px rgba(243, 208, 136, .62), -16px 6px 34px -4px rgba(214, 164, 95, .45), 16px -6px 34px -4px rgba(251, 232, 185, .5), inset 0 -1px .4px rgba(92, 71, 43, .32), inset 0 1px .4px #FFF; }
}
.btn-honey:active { box-shadow: 0 0 0 1px rgba(129, 102, 64, .4), 0 0 10px rgba(240, 202, 128, .3), inset 0 1px 2px rgba(92, 71, 43, .35); }
/* 最重要的幾顆：外面那圈柔光像在呼吸 */
@keyframes cta-invite {
  0%, 100% { box-shadow: 0 0 0 1px rgba(129, 102, 64, .34), 0 0 14px rgba(240, 202, 128, .3), inset 0 -1px .4px rgba(92, 71, 43, .3), inset 0 1px .4px rgba(255, 255, 255, .95); }
  48% { box-shadow: 0 0 0 1px rgba(129, 102, 64, .3), 0 0 26px 4px rgba(241, 204, 130, .58), -12px 5px 28px -4px rgba(214, 164, 95, .3), 12px -5px 28px -4px rgba(251, 232, 185, .42), inset 0 -1px .4px rgba(92, 71, 43, .3), inset 0 1px .4px rgba(255, 255, 255, .95); }
  72% { box-shadow: 0 0 0 1px rgba(129, 102, 64, .34), 0 0 18px 1px rgba(240, 202, 128, .38), inset 0 -1px .4px rgba(92, 71, 43, .3), inset 0 1px .4px rgba(255, 255, 255, .95); }
}
@media (prefers-reduced-motion: reduce) { .btn-honey.is-breath { box-shadow: 0 0 0 1px rgba(129, 102, 64, .34), 0 0 20px rgba(240, 202, 128, .42), inset 0 -1px .4px rgba(92, 71, 43, .3), inset 0 1px .4px #FFF; } }

/* ---- 2. 黑底上的次要按鈕（Raycast 黑色按鈕） ---- */
.chip, .seg-dark, .quote-band .btn-ghost, .is-dark .btn-ghost, .quote-band .rail-btn {
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .1));
  box-shadow: inset 0 1px rgba(255, 255, 255, .05), 0 0 0 1px rgba(255, 255, 255, .22), inset 0 -1px rgba(0, 0, 0, .2); border-color: transparent; }
@media (hover: hover) and (pointer: fine) {
  .chip:hover, .quote-band .btn-ghost:hover, .is-dark .btn-ghost:hover { box-shadow: inset 0 1px rgba(255, 255, 255, .05), 0 0 0 1px rgba(255, 255, 255, .5), inset 0 -1px rgba(0, 0, 0, .2); }
}
.chip[aria-pressed="true"] { background: linear-gradient(180deg, #1A1A1A, #242424); color: #FFE4A6; text-shadow: 0 0 4.3px #EEC67A; border-color: transparent;
  box-shadow: 0 0 10px 4px rgba(224, 180, 107, .12), 0 0 3px 2px rgba(224, 180, 107, .12), inset 1px .5px .5px .5px rgba(244, 218, 165, .28), inset 0 0 1px 1px rgba(255, 255, 255, .42), inset 0 2px 1px 1px rgba(0, 0, 0, .25); }

/* ---- 3. 分頁、篩選選到的那一顆：Raycast 會發光的按鍵 ---- */
.case-tabs { padding: 5px; }
/* 選到那顆後面的金光（::before，z-index -1）要畫在「按鍵底色後面」：所以把整排設成一層（isolation），按鍵本身不要自成一層，
   光才會落在按鍵後面、只從按鍵四周透出來（按鍵自成一層時，光會蓋在深色按鍵上面，字就不清楚了） */
.case-tabs, .ad-filter, .ipx-picks { isolation: isolate; }
.case-tabs button, .af, .ipx-picks button { position: relative; }
/* 左右滑的分頁、篩選：金光放大時不能讓整排可以上下捲；篩選那排上下多留一點，光不會被切成一條直線 */
.case-tabs, .ad-filter { overflow-y: hidden; }
.ad-filter { padding-top: 12px; padding-bottom: 12px; margin-top: 8px; margin-bottom: 4px; }
.case-tabs button[aria-selected="true"], .af[aria-pressed="true"], .ipx-picks button[aria-selected="true"] {
  color: #FFE4A6; text-shadow: 0 0 4.3px rgba(238, 198, 122, .9); border-color: transparent;
  background: radial-gradient(75% 75% at 50% 91.9%, #262626 0%, #141414 100%);
  box-shadow: 0 0 10px 4px rgba(221, 176, 104, .14), 0 0 3px 2px rgba(221, 176, 104, .14), inset 1px .5px .5px .5px rgba(244, 218, 165, .3), inset 0 0 1px 1px rgba(255, 255, 255, .42), inset 0 2px 1px 1px rgba(0, 0, 0, .25); }
.case-tabs button[aria-selected="true"] small, .af[aria-pressed="true"] small { color: #F4DAA6; opacity: .85; }
/* 後面一團金光、頂端一條反光 */
.case-tabs button[aria-selected="true"]::before, .af[aria-pressed="true"]::before, .ipx-picks button[aria-selected="true"]::before {
  content: ""; position: absolute; z-index: -1; top: -15%; left: -10%; width: 120%; height: 130%; border-radius: 999px; pointer-events: none; filter: blur(12px); opacity: .55;
  background: radial-gradient(56% 65%, rgba(240, 202, 129, .9) 0%, rgba(235, 193, 119, 0) 100%); }
.case-tabs button[aria-selected="true"]::after, .af[aria-pressed="true"]::after, .ipx-picks button[aria-selected="true"]::after {
  content: ""; position: absolute; top: 1px; left: 14%; width: 60%; height: 3px; border-radius: 3px; pointer-events: none; filter: blur(2px); mix-blend-mode: overlay;
  background: radial-gradient(56% 65%, #FFFFFF 0%, rgba(246, 225, 183, 0) 100%); }
@media (prefers-reduced-motion: no-preference) {
  .case-tabs button[aria-selected="true"]::before, .af[aria-pressed="true"]::before, .ipx-picks button[aria-selected="true"]::before { animation: key-glow .9s cubic-bezier(.23, 1, .32, 1) both; }
}
@keyframes key-glow { from { opacity: 0; transform: scale(.9); } to { opacity: .55; transform: scale(1.08); } }

/* =====================================================================
   v14 首屏背景：金色光波（React Bits「Micro Slats」，assets/slats.js）
   一片片小葉片像海浪一樣起伏：遠的（上面）比較霧、近的（下面）比較亮；滑鼠劃過，葉片被推開、亮起來
   只蓋住標題到按鈕下面一點，上下淡出；標題後面用一層底色的柔光托住字
   ===================================================================== */
.hero { position: relative; isolation: isolate; }
.hero-slats { --sl-c: #E8C782; --sl-g: #9F7F51; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 640px; pointer-events: none; opacity: 0; transition: opacity 1.2s ease;
  /* 兩層遮罩相乘：上下淡出 × 標題後面變淡（字不會被光波蓋過去，四周的光波照樣亮） */
  /* v20：往下延伸到蜂巢中間、一路慢慢淡掉（位置由 interact.js 的 fit() 照版面算好給 --slm-*；--sl-c、--sl-g 是葉片的顏色，不要撞名） */
  -webkit-mask: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .6) var(--slm-a, 14%), #000 var(--slm-b, 40%), #000 var(--slm-c, 72%), rgba(0, 0, 0, .46) var(--slm-d, 86%), rgba(0, 0, 0, .16) var(--slm-e, 94%), transparent 100%), radial-gradient(ellipse 44% var(--slm-ry, 40%) at 50% var(--slm-cy, 46%), rgba(0, 0, 0, .16) 0%, rgba(0, 0, 0, .3) 52%, #000 100%);
  -webkit-mask-composite: source-in;
  mask: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .6) var(--slm-a, 14%), #000 var(--slm-b, 40%), #000 var(--slm-c, 72%), rgba(0, 0, 0, .46) var(--slm-d, 86%), rgba(0, 0, 0, .16) var(--slm-e, 94%), transparent 100%), radial-gradient(ellipse 44% var(--slm-ry, 40%) at 50% var(--slm-cy, 46%), rgba(0, 0, 0, .16) 0%, rgba(0, 0, 0, .3) 52%, #000 100%);
  mask-composite: intersect; }
.hero-slats.is-on { opacity: .78; }
.hero-slats canvas { position: absolute; inset: 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero-slats { --sl-c: #7D6946; --sl-g: #F5E1B3; } :root:not([data-theme="light"]) .hero-slats.is-on { opacity: 1; } }
:root[data-theme="dark"] .hero-slats { --sl-c: #7D6946; --sl-g: #F5E1B3; }
:root[data-theme="dark"] .hero-slats.is-on { opacity: 1; }
/* 首屏標題一個字一個字從模糊浮出來（React Bits「BlurText」） */
/* 每個字還是一般的「行內文字」（不是一格一格的小方塊）：整行字還是同一塊，瀏覽器算首屏載入分數（LCP）時才會把整個大標題當成一個；
   句號、逗號也照中文的規矩不會自己掉到下一行。所以往下落用 top（行內文字不能用 transform） */
.hero-title .bt { position: relative; }
.hero-title .bt:not(.roll) { display: inline; }
.hero-title.bt-wait .bt { opacity: .01; }   /* 不用 0：完全透明的字不算「畫出來了」，會拖慢首屏的載入分數（LCP） */
.hero-title.bt-go .bt { animation: bt-in .72s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--i) * 45ms + 160ms); }
@keyframes bt-in { 0% { opacity: .01; filter: blur(10px); top: -28px; } 50% { opacity: .55; filter: blur(4px); top: 4px; } 100% { opacity: 1; filter: blur(0); top: 0; } }
@media (prefers-reduced-motion: reduce) { .hero-title.bt-go .bt { animation: none; } }
/* 按下去噴出的金色火花（React Bits「ClickSpark」）：整頁一張不擋滑鼠的畫布 */
.spark-layer { position: fixed; inset: 0; z-index: 9999; width: 100%; height: 100%; pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .btn-honey.is-breath:hover { animation: none; } }

/* =====================================================================
   v14 案例區：每位客人最便宜的廣告排成一圈 3D 轉盤（React Bits「Circular Carousel」，assets/ring.js）
   電腦：圓柱（看得到背面那一圈，暗一點）；手機：從圓柱裡面看出去（前面那張最大，兩邊彎進去、淡掉）
   ===================================================================== */
.adr { margin: 4px 0 26px; }
.adr .adr-ring { position: relative; height: clamp(340px, 34vw, 480px); width: auto; margin-inline: calc(50% - 50vw); }
/* 轉盤下面一片淡淡的香檳金光（像舞台的地面），轉盤不會像浮在一片空白上 */
.adr .adr-ring::after { content: ""; position: absolute; z-index: -1; left: 50%; bottom: 2%; width: min(1180px, 92vw); height: 34%; transform: translateX(-50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(231, 201, 135, .34), rgba(231, 201, 135, .14) 55%, transparent); }
.adr { isolation: isolate; }
@media (max-width: 699px) { .adr .adr-ring::after { width: 96vw; height: 30%; bottom: 6%; } }
.cc { --cc-fade: #000; --cc-radius: 12px; --cc-inner: .4; position: relative; width: 100%; height: 100%; overflow: hidden; outline: none; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.cc[data-draggable] { cursor: grab; }
.cc[data-dragging] { cursor: grabbing; }
.cc:focus-visible { box-shadow: inset 0 0 0 3px var(--honey-deep); border-radius: 22px; }
.cc-view { position: absolute; inset: 0; }
.cc[data-shape="panorama"] .cc-view { -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }
.cc[data-shape="cylinder"] .cc-view { -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); }
.cc-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .45s ease; }
.cc[data-ready] .cc-stage { opacity: 1; }
.cc-camera, .cc-ring, .cc-card { width: 0; height: 0; transform-style: preserve-3d; }
.cc-camera { position: relative; }
.cc-ring, .cc-card { position: absolute; left: 0; top: 0; }
.cc-tile { position: absolute; outline: 1px solid transparent; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.cc-frame { position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; }
.cc-face { position: absolute; pointer-events: none; background: #121214; }
.cc-face img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; -webkit-user-drag: none; user-select: none; }
.cc-shade, .cc-inner { position: absolute; inset: 0; pointer-events: none; }
.cc-shade { background: var(--cc-fade); opacity: var(--cc-depth, 0); }
.cc-inner { background: #000; opacity: var(--cc-inner); }
.cc-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cc-face .ad-cpa { left: 9px; bottom: 9px; }
/* 轉盤下面：目前正前方那支廣告（品牌、開頭那句話、每位客人多少、帶來幾位、看原片） */
.adr-cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; margin-top: 4px; min-height: 52px; }
.adr-n { display: inline-flex; align-items: center; gap: 3px; font: 600 13px var(--font-num); color: var(--ink-faint); }
.adr-ds { display: inline-flex; }
.adr-n i { font-style: normal; opacity: .6; margin: 0 1px; }
.adr-d { display: inline-block; height: 1em; overflow: hidden; line-height: 1; }
.adr-reel { display: flex; flex-direction: column; transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.adr-reel > span { height: 1em; }
.adr-body { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; min-width: 0; }
.adr-body.is-in { animation: adr-in .52s cubic-bezier(.22, 1, .36, 1); }
@keyframes adr-in { from { opacity: 0; transform: translateY(8px); } }
.adr-who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.adr-t { display: grid; min-width: 0; text-align: left; }
.adr-t b { font-size: 15.5px; }
.adr-t span { max-width: 22em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--ink-soft); }
.adr-ks { display: flex; gap: 16px; }
.adr-k { display: grid; text-align: left; line-height: 1.2; }
.adr-k span { font-size: 11.5px; color: var(--ink-faint); }
.adr-k b { font: 800 19px var(--font-num); color: var(--amber, #A18350); }
.adr-hint { margin-top: 8px; text-align: center; font-size: 12.5px; color: var(--ink-faint); }
.adr-play { display: grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); cursor: pointer; transition: background-color .2s, transform .15s; -webkit-tap-highlight-color: transparent; }
.adr-play svg { width: 15px; height: 15px; fill: currentColor; }
.adr-play:active { transform: scale(.92); }
.adr-play:focus-visible { outline: 3px solid var(--honey-deep); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .adr-play:hover { background-color: color-mix(in srgb, var(--ink) 14%, transparent); } }
@media (max-width: 699px) { .adr .adr-ring { height: 300px; } .adr-t span { max-width: 15em; } }
@media (prefers-reduced-motion: reduce) { .adr-reel { transition: none; } .adr-body.is-in { animation: none; } }

/* =====================================================================
   v17 廣告牆最上面那一塊：四種版型（後台「網站設定 → 廣告牆版型」選），資料都是每位客人最便宜的 12 支（一個品牌挑一支）
   精選大卡 .sp／排行榜 .rk／疊卡 .st／3D 轉盤 .adr-ring（上面那一段）
   ===================================================================== */
/* 預覽版才有：上面一排換版型的按鈕（虛線框，一看就知道不是網站的一部分） */
.adw-pick { margin: 6px 0 18px; padding: 14px 16px 13px; border: 1px solid color-mix(in srgb, var(--honey-deep) 45%, transparent); border-radius: 18px; background: color-mix(in srgb, var(--honey) 7%, transparent); }
.adw-pick-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0 0 10px; font-size: 15px; font-weight: 800; color: var(--ink); }
.adw-pick-h .ico { align-self: center; width: 17px; height: 17px; color: var(--amber); }
.adw-pick-h small { font-size: 12.5px; font-weight: 500; color: var(--ink-soft); }
.adw-pick-in { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 6px 10px; }
.adw-pick-l { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.adw-btns { display: grid; grid-template-columns: repeat(4, minmax(0, 132px)); gap: 6px; }
.adw-btns .af { justify-content: center; min-width: 0; padding-inline: 4px; text-align: center; white-space: nowrap; }
@media (max-width: 520px) { .adw-pick-in { grid-template-columns: minmax(0, 1fr); gap: 4px; } .adw-pick-l.is-old { margin-top: 4px; } .adw-btns { grid-template-columns: repeat(4, minmax(0, 1fr)); } .adw-btns .af { font-size: 12.5px; } }
.adw-pick-n { margin: 8px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); }
.adw-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 18px; margin: 4px 0 14px; }
.adw-h { margin: 0; font-size: 17px; line-height: 1.4; }
.adw-h small { margin-left: 8px; font-size: 13px; font-weight: 500; color: var(--ink-faint); }
.adw-tip { margin: 0; font-size: 12.5px; color: var(--ink-faint); }
.adw.is-swap { animation: adw-in .5s var(--ease-out); }
@keyframes adw-in { from { opacity: 0; transform: translateY(10px); } }

/* ---------- 精選大卡：左邊一張大的（像限時動態：上面一排進度條、跑完換下一支），右邊大數字＋跟一般行情比，下面一排 12 張小圖 ---------- */
.sp { --sp-dur: 5.6s; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); grid-template-rows: 1fr auto; column-gap: clamp(24px, 4vw, 56px); row-gap: 18px; }
.sp-card { grid-row: 1 / span 2; position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--r-lg); overflow: hidden; background: #121214; color: #fff; text-decoration: none; isolation: isolate;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 24px 48px -24px rgba(40, 28, 8, .45); -webkit-tap-highlight-color: transparent; }
.sp-imgs img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity .7s ease, transform 1.4s var(--ease-lift, ease-out); }
.sp-imgs img.is-on { opacity: 1; transform: none; }
.sp-bars { position: absolute; z-index: 2; top: 10px; left: 10px; right: 10px; display: flex; gap: 3px; }
.sp-bars i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .32); overflow: hidden; }
.sp-bars b { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: 0 50%; }
.sp-bars i.is-done b { transform: none; }
.sp-bars i.is-now b { transform: none; }
.sp.is-auto .sp-bars i.is-now b { animation: sp-fill var(--sp-dur) linear both; }
.sp.is-auto.is-hold .sp-bars i.is-now b { animation-play-state: paused; }
@keyframes sp-fill { from { transform: scaleX(0); } to { transform: none; } }
.sp-shade { position: absolute; z-index: 1; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .74), rgba(0, 0, 0, .18) 38%, transparent 56%), linear-gradient(to bottom, rgba(0, 0, 0, .32), transparent 18%); pointer-events: none; }
.sp-cw { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 44px; display: flex; align-items: center; gap: 9px; min-width: 0; }
.sp-cw-t { display: grid; min-width: 0; line-height: 1.3; }
.sp-cw-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.sp-cw-t small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; opacity: .78; }
.sp-open { position: absolute; z-index: 2; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; opacity: .86; }
.sp-open .ico { width: 13px; height: 13px; }
.sp-card:focus-visible { outline: 3px solid var(--honey-deep); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .sp-card:hover .sp-imgs img.is-on { transform: scale(1.03); } .sp-card:hover .sp-open { opacity: 1; text-decoration: underline; text-underline-offset: 3px; } }
.sp-info { grid-column: 2; grid-row: 1; display: grid; align-content: start; gap: 6px; min-width: 0; }
.sp-top { display: flex; align-items: center; gap: 12px; min-height: 36px; }
.sp-body { display: grid; gap: 4px; min-width: 0; }
.sp-body.is-in { animation: adr-in .52s cubic-bezier(.22, 1, .36, 1); }
.sp-k { margin: 6px 0 0; font-size: 14px; font-weight: 700; color: var(--ink-soft); }
.sp-cpa { margin: 0; font: 800 clamp(56px, 7.4vw, 104px)/.96 var(--font-num); letter-spacing: -.04em; color: var(--amber); }
.sp-vs { display: grid; gap: 7px; max-width: 520px; margin: 14px 0 6px; }
.sp-vr { display: grid; grid-template-columns: 4.6em minmax(0, 1fr) 3.6em; align-items: center; gap: 10px; }
.sp-vr em { font-style: normal; font-size: 12.5px; color: var(--ink-soft); }
.sp-vr > i { position: relative; height: 10px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 7%, transparent); overflow: hidden; }
.sp-vr > i > i { position: absolute; inset: 0 auto 0 0; width: calc(var(--w, 0) * 100%); min-width: 6px; border-radius: inherit; transition: width .7s var(--ease-out); }
.sp-vr.is-them > i > i { background: color-mix(in srgb, var(--ink) 24%, transparent); }
.sp-vr.is-us > i > i { background: linear-gradient(90deg, var(--honey-deep), var(--honey)); }
.sp-vr b { font: 700 14px var(--font-num); text-align: right; color: var(--ink-soft); }
.sp-vr.is-us b { color: var(--amber); }
.sp-sum { margin: 4px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink); }
.sp-sum b { font-family: var(--font-num); font-weight: 800; color: var(--amber); }
.sp-hook { margin: 0; min-height: 1.6em; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.sp-thumbs { grid-column: 2; grid-row: 2; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; align-self: end; }
.sp-th { position: relative; display: block; min-width: 0; aspect-ratio: 3 / 4; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: #121214; cursor: pointer; opacity: .55; transition: opacity .25s, transform .25s var(--ease-out), box-shadow .25s; -webkit-tap-highlight-color: transparent; }
.sp-th img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sp-th span { position: absolute; left: 4px; bottom: 4px; padding: 1px 5px; border-radius: 6px; background: rgba(10, 10, 12, .72); color: #fff; font: 700 10.5px/1.5 var(--font-num); }
.sp-th.is-on { opacity: 1; box-shadow: 0 0 0 2px var(--wax), 0 0 0 4px var(--honey); transform: translateY(-2px); }
.sp-th:focus-visible { outline: 3px solid var(--honey-deep); outline-offset: 3px; opacity: 1; }
@media (hover: hover) and (pointer: fine) { .sp-th:hover { opacity: 1; } }
:root[data-theme="dark"] .sp-card { box-shadow: 0 0 0 1px rgba(234, 208, 154, .16), 0 30px 60px -30px rgba(0, 0, 0, .9); }
:root[data-theme="dark"] .sp-cpa { filter: var(--num-glow); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sp-card { box-shadow: 0 0 0 1px rgba(234, 208, 154, .16), 0 30px 60px -30px rgba(0, 0, 0, .9); }
  :root:not([data-theme="light"]) .sp-cpa { filter: var(--num-glow); }
}
@media (max-width: 900px) { .sp { grid-template-columns: minmax(0, 250px) minmax(0, 1fr); } .sp-thumbs { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 699px) {
  .sp { grid-template-columns: minmax(0, 43%) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 14px; }
  .sp-card { grid-row: 1; border-radius: 18px; }
  .sp-cw { left: 10px; right: 10px; bottom: 34px; gap: 7px; }
  .sp-cw .av { display: none; }
  .sp-cw-t b { font-size: 13px; } .sp-cw-t small { font-size: 11px; }
  .sp-open { left: 10px; bottom: 10px; font-size: 11.5px; }
  .sp-top { min-height: 32px; }
  .sp-k { margin-top: 2px; font-size: 12.5px; }
  .sp-cpa { font-size: clamp(40px, 13vw, 56px); }
  .sp-vs { gap: 5px; margin: 8px 0 2px; }
  .sp-vr { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; }
  .sp-vr em { grid-column: 1 / -1; font-size: 11.5px; }
  .sp-vr > i { height: 7px; }
  .sp-vr b { font-size: 12.5px; }
  .sp-sum { font-size: 13px; line-height: 1.55; }
  .sp-hook { display: none; }
  .sp-thumbs { grid-column: 1 / -1; display: flex; gap: 8px; margin-inline: calc(-1 * var(--gl)) calc(-1 * var(--gr)); padding: 4px var(--gr) 6px var(--gl); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain; }
  .sp-thumbs::-webkit-scrollbar { display: none; }
  .sp-th { flex: none; width: 56px; scroll-snap-align: center; }
}

/* ---------- 排行榜：前三名放大（封面＋名次），其他一列一列排；每列一條長條，整條＝一般行情，越短越省 ---------- */
.rk-top, .rk-list { list-style: none; margin: 0; padding: 0; }
.rk-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rk-t a { display: grid; grid-template-columns: minmax(0, 116px) minmax(0, 1fr); gap: 16px; height: 100%; padding: 12px; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--card); color: inherit; text-decoration: none; transition: border-color .25s, transform .3s var(--ease-lift, ease-out), box-shadow .3s; -webkit-tap-highlight-color: transparent; }
.rk-t.is-1 a { border-color: color-mix(in srgb, var(--honey-deep) 70%, transparent); background: color-mix(in srgb, var(--honey) 9%, var(--card)); }
.rk-cv { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; background: #121214; }
.rk-cv img, .rk-th img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rk-no { font-family: var(--font-num); font-weight: 800; }
.rk-cv .rk-no { position: absolute; left: 7px; top: 7px; display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 99px; background: rgba(10, 10, 12, .78); color: #fff; font-size: 14px; }
.rk-t.is-1 .rk-cv .rk-no { background: linear-gradient(180deg, #F8EBCB, #DDBF83); color: var(--on-honey); }
.rk-tb { display: grid; align-content: center; gap: 7px; min-width: 0; }
.rk-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rk-who > span { display: grid; min-width: 0; line-height: 1.35; }
.rk-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.rk-who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--ink-soft); }
.rk-k { display: flex; align-items: baseline; gap: 6px; }
.rk-k b { font: 800 clamp(30px, 3.2vw, 40px)/1 var(--font-num); letter-spacing: -.03em; color: var(--amber); }
.rk-k small { font-size: 12.5px; color: var(--ink-soft); }
.rk-bar { position: relative; display: block; height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.rk-bar > i { position: absolute; inset: 0 auto 0 0; width: calc(var(--w) * 100%); min-width: 6px; border-radius: inherit; background: linear-gradient(90deg, var(--honey-deep), var(--honey)); transform-origin: 0 50%; transition: transform .9s var(--ease-out) calc(var(--k, 0) * 70ms); }
.viz .rk:not(.is-on) .rk-bar > i { transform: scaleX(0); }
.rk-m { font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.rk-m b { font-family: var(--font-num); font-weight: 800; color: var(--amber); }
.rk-m-x { display: block; }   /* 「比行情省 97%」三張卡都自己一行（不會有的卡把 97% 擠到下一行）*/
.rk-r .rk-who small { white-space: normal; text-overflow: clip; }   /* 窄的時候換行，不在數字中間切成「48 …」 */
.rk-hook { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--ink-faint); }
.rk-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--rows, 5), auto); grid-auto-flow: column; column-gap: 28px; margin-top: 14px; }
.rk-r { border-top: 1px solid var(--rule); }
.rk-r a { display: grid; grid-template-columns: 28px 40px minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: 12px; padding: 9px 6px; border-radius: 12px; color: inherit; text-decoration: none; transition: background-color .2s; -webkit-tap-highlight-color: transparent; }
.rk-r .rk-no { font-size: 15px; text-align: center; color: var(--ink-faint); }
.rk-th { display: block; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; background: #121214; }
.rk-r .rk-who { display: grid; gap: 0; line-height: 1.35; }
.rk-r .rk-who b { font-size: 14.5px; }
.rk-r .rk-bar { margin-right: 52px; }
.rk-r .rk-bar { height: 6px; }
.rk-r .rk-bar > b { position: absolute; top: 50%; left: calc(var(--w) * 100%); transform: translate(4px, -50%); padding: 0 6px; background: var(--wax); font: 800 14.5px/1.3 var(--font-num); color: var(--amber); white-space: nowrap; }
.rk-t a:focus-visible, .rk-r a:focus-visible { outline: 3px solid var(--honey-deep); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .rk-t a:hover { border-color: var(--honey-deep); transform: translateY(-3px); box-shadow: 0 18px 34px -22px rgba(40, 28, 8, .45); }
  .rk-r a:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
  .rk-r a:hover .rk-bar > b { background: color-mix(in srgb, var(--ink) 4%, var(--wax)); }
}
@media (max-width: 1000px) { .rk-t a { grid-template-columns: minmax(0, 92px) minmax(0, 1fr); gap: 12px; } .rk-hook { display: none; } }
@media (max-width: 860px) {
  .rk-top { grid-template-columns: 1fr; gap: 10px; }
  .rk-t a { grid-template-columns: minmax(0, 96px) minmax(0, 1fr); }
  .rk-hook { display: block; }
  .rk-list { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
}
@media (max-width: 699px) {
  /* 手機：前三名並排成一排小卡（封面在上、數字在下），下面的名次一列一列 */
  .rk-top { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .rk-t a { grid-template-columns: 1fr; align-content: start; gap: 8px; padding: 6px 6px 10px; border-radius: 16px; }
  .rk-cv { border-radius: 11px; }
  .rk-cv .rk-no { left: 5px; top: 5px; min-width: 24px; height: 24px; font-size: 12.5px; }
  .rk-tb { gap: 5px; padding-inline: 2px; }
  .rk-t .rk-who .av, .rk-t .rk-who small, .rk-hook, .rk-k small { display: none; }
  .rk-t .rk-who b { font-size: 12.5px; }
  .rk-k b { font-size: clamp(22px, 7vw, 28px); }
  .rk-t .rk-bar { height: 5px; }
  .rk-m { font-size: 11.5px; line-height: 1.45; }
  .rk-m .rk-m-x { display: none; }
  .rk-r a { grid-template-columns: 22px 36px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; row-gap: 6px; padding: 9px 2px; }
  .rk-r .rk-no { grid-row: 1 / span 2; }
  .rk-r .rk-th { grid-row: 1 / span 2; }
  .rk-r .rk-bar { grid-column: 3; margin-right: 56px; }
}
@media (prefers-reduced-motion: reduce) { .rk-bar > i { transition: none; } }

/* ---------- 疊卡：一疊卡片，最上面那張自己隔幾秒飛走（放到最下面）；拖著丟、手指撥都可以；旁邊是接下來的幾張 ---------- */
.st { --cw: clamp(230px, 24vw, 300px); --fan: 34px; display: grid; grid-template-columns: auto minmax(0, 340px); justify-content: center; gap: clamp(32px, 7vw, 110px); align-items: center; }
.st-deck { position: relative; width: calc(var(--cw) + 3 * var(--fan) + 24px); max-width: 100%; height: calc(var(--cw) * 4 / 3 + 34px); margin-inline: auto; touch-action: pan-y; outline: none; -webkit-user-select: none; user-select: none; }
.st-deck:focus-visible { outline: 3px solid var(--honey-deep); outline-offset: 6px; border-radius: var(--r-lg); }
.stc { --p: 0; position: absolute; left: 0; top: 14px; width: var(--cw); aspect-ratio: 3 / 4; border-radius: var(--r-lg); overflow: hidden; background: #121214; color: #fff; text-decoration: none;
  transform: translate3d(calc(var(--p) * var(--fan)), 0, 0) rotate(calc(var(--p) * 3.2deg)) scale(calc(1 - var(--p) * .055)); transform-origin: 30% 100%;
  opacity: calc(1 - var(--p) * .16); filter: brightness(calc(1 - var(--p) * .12));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 22px 44px -26px rgba(40, 28, 8, .55);
  transition: transform .55s var(--ease-lift, ease-out), opacity .45s ease, filter .45s ease; -webkit-tap-highlight-color: transparent; -webkit-user-drag: none; }
.stc > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.stc .av { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .5); }
.stc.is-top { cursor: grab; }
.stc.is-deep { opacity: 0; pointer-events: none; }
.stc.is-drag { transition: none; cursor: grabbing; }
.stc.is-out { transform: translate3d(calc(var(--out, -1) * 118%), 3%, 0) rotate(calc(var(--out, -1) * 15deg)); opacity: 0; transition: transform .4s cubic-bezier(.45, 0, .7, .4), opacity .36s ease .04s; }
.stc.is-snap { transition: none !important; }
.stc-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, .25) 42%, transparent 62%); pointer-events: none; }
/* 後面那幾張只露出封面（字在最上面那張才出現） */
.stc-shade, .stc-cpa, .stc-b { transition: opacity .35s ease; }
.stc:not(.is-top) .stc-shade, .stc:not(.is-top) .stc-cpa, .stc:not(.is-top) .stc-b { opacity: 0; }
.stc-cpa { position: absolute; left: 12px; top: 12px; display: grid; padding: 6px 12px 7px; border-radius: 14px; background: rgba(10, 10, 12, .8); line-height: 1.1; }
.stc-cpa small { font-size: 11px; opacity: .78; }
.stc-cpa b { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: #F5E1B3; }
.stc-b { position: absolute; left: 14px; right: 14px; bottom: 14px; display: grid; gap: 4px; min-width: 0; }
.stc-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.stc-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
.stc-hook { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; opacity: .9; }
.stc-m { font-size: 12.5px; opacity: .82; }
.stc-m b { font-family: var(--font-num); font-weight: 800; }
.stc-vs { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; margin-top: 4px; }
.stc-vs i { position: relative; display: block; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .22); }
.stc-vs i::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--w) * 100%); min-width: 5px; border-radius: inherit; background: #F5E1B3; }
.stc-vs em { font-style: normal; font-size: 11.5px; font-weight: 700; color: #F5E1B3; }
:root[data-theme="dark"] .stc { box-shadow: 0 0 0 1px rgba(234, 208, 154, .14), 0 26px 50px -28px rgba(0, 0, 0, .9); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stc { box-shadow: 0 0 0 1px rgba(234, 208, 154, .14), 0 26px 50px -28px rgba(0, 0, 0, .9); } }
.st-side { display: grid; gap: 14px; align-content: center; min-width: 0; }
.st-ctl { display: flex; align-items: center; gap: 10px; }
.st-btn { display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); cursor: pointer; transition: background-color .2s, transform .15s; -webkit-tap-highlight-color: transparent; }
.st-btn .ico { width: 18px; height: 18px; stroke-width: 2.4; }
.st-btn:active { transform: scale(.92); }
.st-btn:focus-visible { outline: 3px solid var(--honey-deep); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .st-btn:hover { background: color-mix(in srgb, var(--ink) 15%, transparent); } }
.st-ctl .adw-play { margin-left: auto; }
.st-up-h { margin: 6px 0 0; font-size: 12.5px; font-weight: 700; color: var(--ink-faint); }
.st-up { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.st-up button { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px; width: 100%; padding: 6px; border: 0; border-radius: 12px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: background-color .2s; }
.st-up img { display: block; width: 40px; aspect-ratio: 3 / 4; border-radius: 8px; object-fit: cover; background: #121214; }
.st-up span { display: grid; min-width: 0; line-height: 1.4; }
.st-up b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.st-up small { font-size: 12.5px; color: var(--ink-soft); }
.st-up button:focus-visible { outline: 3px solid var(--honey-deep); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .st-up button:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); } }
.st-go { justify-self: start; }
@media (max-width: 860px) { .st { grid-template-columns: minmax(0, 1fr) minmax(0, 280px); } }
@media (max-width: 699px) {
  .st { --cw: min(64vw, 260px); --fan: 22px; grid-template-columns: 1fr; gap: 14px; }
  .st-deck { height: calc(var(--cw) * 4 / 3 + 26px); }
  .stc { top: 10px; border-radius: 18px; }
  .stc-cpa b { font-size: 25px; }
  .st-side { justify-items: center; gap: 10px; }
  .st-up-h, .st-up { display: none; }
  .st-ctl .adw-play { margin-left: 4px; }
  .st-go { justify-self: center; }
}
@media (prefers-reduced-motion: reduce) { .stc, .stc.is-out { transition: opacity .2s ease; } .sp-imgs img { transition: opacity .2s ease; transform: none; } .sp-body.is-in, .adw.is-swap { animation: none; } }

/* =====================================================================
   v18 廣告牆再加三個版型（照這 12 支廣告重新設計）：手機發表會 .ln／正在播放 .np／蜂巢牆 .hv
   ===================================================================== */
.adw-pick-l.is-old { color: var(--ink-faint); }

/* ---------- 手機發表會：黑色舞台、一支手機在滑連續短片、四周細線標出數字 ---------- */
.ln-stage { --pw: 220px; --gap: 104px; position: relative; isolation: isolate; display: grid; place-items: center; padding: 46px 24px 84px; border-radius: var(--r-xl); background: #000; color: #F5F5F7; overflow: hidden; box-shadow: 0 34px 70px -46px rgba(30, 20, 5, .7); }
.ln-glow { position: absolute; z-index: -1; left: 50%; top: -22%; width: min(920px, 130%); height: 96%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(234, 208, 154, .2), rgba(234, 208, 154, .06) 55%, transparent 74%); pointer-events: none; }
.ln-floor { position: absolute; z-index: -1; left: 50%; bottom: 50px; width: calc(var(--pw) * 2.2); height: 64px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(234, 208, 154, .3), rgba(234, 208, 154, .08) 60%, transparent); pointer-events: none; }
.ln.is-auto .ln-glow { animation: ln-breathe 7s ease-in-out infinite; }
@keyframes ln-breathe { 50% { opacity: .7; } }
.ln-phone { position: relative; z-index: 1; display: block; width: var(--pw); aspect-ratio: 9 / 19.5; padding: 8px; border-radius: calc(var(--pw) * .2); color: #fff; text-decoration: none; -webkit-tap-highlight-color: transparent;
  background: linear-gradient(155deg, #6e6554 0%, #24221f 11%, #0c0c0d 46%, #1b1a18 82%, #5f5747 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 0 0 1px #000, 0 50px 90px -40px #000, 0 0 90px -24px rgba(234, 208, 154, .28); }
.ln-phone::before, .ln-phone::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #5a5245, #1c1b19); }
.ln-phone::before { left: -3px; top: 21%; height: 8%; box-shadow: 0 calc(var(--pw) * .21) 0 #3a3630; }
.ln-phone::after { right: -3px; top: 27%; height: 13%; }
.ln-phone:focus-visible { outline: 3px solid #F5E1B3; outline-offset: 5px; }
.ln-screen { position: relative; display: block; height: 100%; border-radius: calc(var(--pw) * .2 - 8px); overflow: hidden; background: #0b0b0c; transform: translateZ(0); }
.ln-feed { position: absolute; inset: 0; display: flex; flex-direction: column; transform: translate3d(0, calc(var(--y, 0) * -100%), 0); transition: transform .85s cubic-bezier(.72, 0, .22, 1); }
.ln-feed.is-snap { transition: none; }
.ln-feed img { flex: none; display: block; width: 100%; height: 100%; object-fit: cover; }
.ln-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .32) 30%, transparent 48%), linear-gradient(to bottom, rgba(0, 0, 0, .45), transparent 18%); pointer-events: none; }
.ln-island { position: absolute; top: 8px; left: 50%; width: 31%; height: calc(var(--pw) * .1); max-height: 24px; transform: translateX(-50%); border-radius: 99px; background: #000; }
.ln-phone svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ln-phone svg.is-fill { fill: currentColor; stroke: none; }
.ln-top { position: absolute; top: calc(var(--pw) * .16); left: 14px; right: 13px; display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-weight: 800; letter-spacing: .02em; text-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.ln-top svg { width: 21px; height: 21px; }
.ln-rail { position: absolute; right: 9px; bottom: 96px; display: grid; justify-items: center; gap: 16px; }
.ln-rail svg { width: 23px; height: 23px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); }
.ln-cap { position: absolute; left: 12px; right: 44px; bottom: 54px; display: grid; gap: 6px; min-width: 0; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.ln-cap.is-in { animation: ln-cap .6s cubic-bezier(.22, 1, .36, 1); }
@keyframes ln-cap { from { opacity: 0; transform: translateY(12px); } }
.ln-who { display: flex; align-items: center; gap: 7px; min-width: 0; }
.ln-who .av { width: 24px; height: 24px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .75); }
.ln-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.ln-who small { flex: none; font-size: 10.5px; opacity: .82; }
.ln-hook { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; opacity: .92; }
.ln-cta { position: absolute; left: 10px; right: 10px; bottom: 12px; display: flex; align-items: center; justify-content: space-between; height: 32px; padding: 0 9px 0 12px; border-radius: 9px; background: rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 12.5px; font-weight: 700; }
.ln-cta .ico { width: 14px; height: 14px; stroke-width: 2.4; }
.ln-spec { --sv: clamp(30px, 3.4vw, 44px); --lt: calc(25px + var(--sv) / 2); position: absolute; z-index: 1; display: grid; gap: 7px; min-width: 0; }
.ln-spec > span { font-size: 13px; line-height: 18px; color: rgba(245, 245, 247, .6); white-space: nowrap; }
.ln-spec > b { font: 800 var(--sv)/1 var(--font-num); letter-spacing: -.02em; color: #F5E1B3; filter: var(--num-glow); white-space: nowrap; }
.ln-spec > .ln-ind { --sv: clamp(17px, 1.7vw, 22px); font: 700 var(--sv)/1.25 var(--font-body); letter-spacing: 0; color: #F5F5F7; filter: none; }
.ln-spec > b small { margin: 0 .12em; font: 700 calc(var(--sv) * .42) var(--font-body); letter-spacing: 0; color: rgba(245, 225, 179, .82); }
.ln-spec.is-r.is-2 { --sv: clamp(17px, 1.7vw, 22px); --lt: calc(25px + var(--sv) * .62); }
.ln-spec.is-l { right: calc(50% + var(--pw) / 2 + var(--gap)); justify-items: end; text-align: right; }
.ln-spec.is-r { left: calc(50% + var(--pw) / 2 + var(--gap)); }
.ln-spec.is-1 { top: 22%; }
.ln-spec.is-2 { top: 56%; }
/* 細線：從數字拉到手機邊，最後一個發光的小點貼在手機上 */
.ln-spec::after { content: ""; position: absolute; top: var(--lt); width: calc(var(--gap) - 24px); height: 1px; }
.ln-spec.is-l::after { left: calc(100% + 16px); background: linear-gradient(90deg, rgba(234, 208, 154, .06), rgba(234, 208, 154, .72)); }
.ln-spec.is-r::after { right: calc(100% + 16px); background: linear-gradient(270deg, rgba(234, 208, 154, .06), rgba(234, 208, 154, .72)); }
.ln-spec::before { content: ""; position: absolute; top: calc(var(--lt) - 2.5px); width: 5px; height: 5px; border-radius: 50%; background: #F5E1B3; box-shadow: 0 0 8px 2px rgba(234, 208, 154, .55); }
.ln-spec.is-l::before { left: calc(100% + var(--gap) - 10px); }
.ln-spec.is-r::before { right: calc(100% + var(--gap) - 10px); }
.ln-spec.is-in > span, .ln-spec.is-in > .ln-ind { animation: ln-fade .6s cubic-bezier(.22, 1, .36, 1); }
@keyframes ln-fade { from { opacity: 0; } }
.ln-bar { position: absolute; z-index: 1; left: 0; right: 0; bottom: 24px; display: flex; align-items: center; justify-content: center; gap: 14px; }
.ln-dots { display: flex; align-items: center; gap: 6px; }
.ln-dot { position: relative; width: 7px; height: 7px; padding: 0; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .26); overflow: hidden; cursor: pointer; transition: width .45s cubic-bezier(.22, 1, .36, 1), background-color .3s; -webkit-tap-highlight-color: transparent; }
.ln-dot::after { content: ""; position: absolute; inset: -9px -4px; }
.ln-dot.is-now { width: 30px; }
.ln-dot b { position: absolute; inset: 0; border-radius: inherit; background: #F5E1B3; transform: scaleX(0); transform-origin: 0 50%; }
.ln-dot.is-now b { transform: none; }
.ln.is-auto .ln-dot.is-now b { animation: sp-fill 5s linear both; }
.ln.is-auto.is-hold .ln-dot.is-now b { animation-play-state: paused; }
.ln-dot:focus-visible { outline: 2px solid #F5E1B3; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .ln-dot:not(.is-now):hover { background: rgba(255, 255, 255, .5); } }
.ln-bar .adr-n { color: rgba(245, 245, 247, .55); }
.ln-bar .adr-play { background: rgba(255, 255, 255, .12); color: #fff; }
@media (hover: hover) and (pointer: fine) { .ln-bar .adr-play:hover { background: rgba(255, 255, 255, .22); } }
@media (max-width: 1040px) { .ln-stage { --gap: 64px; } }
@media (max-width: 860px) {
  .ln-stage { --pw: 172px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 28px 14px 18px; border-radius: 24px; }
  .ln-phone { grid-column: 1 / -1; justify-self: center; margin-bottom: 14px; }
  .ln-floor { bottom: auto; top: calc(28px + var(--pw) * 2.1667 - 34px); }
  .ln-spec, .ln-spec.is-l { position: static; justify-self: stretch; justify-items: start; text-align: left; gap: 5px; padding: 11px 13px; border-radius: 14px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(234, 208, 154, .16); }
  .ln-spec::before, .ln-spec::after { display: none; }
  .ln-spec > span { font-size: 12px; }
  .ln-spec { --sv: 26px; }
  .ln-spec > .ln-ind, .ln-spec.is-r.is-2 { --sv: 15px; }
  .ln-bar { position: static; grid-column: 1 / -1; flex-wrap: wrap; gap: 10px 12px; margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) { .ln-feed { transition: none; } .ln-cap.is-in, .ln-spec.is-in > span, .ln-spec.is-in > .ln-ind { animation: none; } }

/* ---------- 正在播放：背景是現在這支廣告的封面霧化成的一片光，旁邊播放清單 ---------- */
.np { --np-dur: 6s; position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 232px) minmax(0, 1fr) minmax(0, 330px); align-items: center; gap: clamp(24px, 3.4vw, 44px); padding: clamp(24px, 3.2vw, 40px); border-radius: var(--r-xl); overflow: hidden; color: #fff; background: #1c1814; box-shadow: 0 34px 70px -46px rgba(30, 20, 5, .7); }
.np-bg { position: absolute; z-index: -2; inset: -16%; pointer-events: none; }
.np-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(64px) saturate(1.6) brightness(.8); opacity: 0; transition: opacity 1.4s ease; }
.np-bg img.is-on { opacity: 1; }
.np::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(105deg, rgba(0, 0, 0, .42), rgba(0, 0, 0, .14) 46%, rgba(0, 0, 0, .5)); pointer-events: none; }
.np-cover { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 18px; overflow: hidden; background: rgba(0, 0, 0, .3); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .14); -webkit-tap-highlight-color: transparent; }
.np-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .7s ease, transform 1.2s var(--ease-lift, ease-out); }
.np-cover img.is-on { opacity: 1; transform: none; }
.np-open { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: rgba(0, 0, 0, .42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transform: scale(.85); transition: opacity .3s, transform .3s; }
.np-open svg { width: 22px; height: 22px; fill: #fff; margin-left: 3px; }
@media (hover: hover) and (pointer: fine) { .np-cover:hover .np-open { opacity: 1; transform: none; } }
.np-cover:focus-visible { outline: 3px solid #F5E1B3; outline-offset: 3px; }
.np-info { display: grid; gap: 14px; min-width: 0; }
.np-k { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .06em; color: rgba(255, 255, 255, .8); }
.np-k .adr-n { margin-left: 4px; color: rgba(255, 255, 255, .55); }
.np-body { display: grid; gap: 6px; min-width: 0; }
.np-body.is-in { animation: adr-in .52s cubic-bezier(.22, 1, .36, 1); }
.np-name { margin: 0; font-size: clamp(20px, 2vw, 26px); font-weight: 800; line-height: 1.3; }
.np-hook { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; color: rgba(255, 255, 255, .76); }
.np-big { display: flex; align-items: baseline; gap: 10px; margin: 10px 0 0; }
.np-big small { font-size: 14px; color: rgba(255, 255, 255, .72); }
.np-big b { font: 800 clamp(52px, 6vw, 86px)/.95 var(--font-num); letter-spacing: -.04em; color: #F5E1B3; filter: var(--num-glow); }
.np-sum { margin: 0; font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, .84); }
.np-sum b { font-family: var(--font-num); font-weight: 800; color: #fff; }
.np-prog { position: relative; height: 3px; border-radius: 99px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.np-prog i { position: absolute; inset: 0; border-radius: inherit; background: #fff; transform: scaleX(0); transform-origin: 0 50%; }
.np.is-auto .np-prog.is-run i { animation: sp-fill var(--np-dur) linear both; }
.np.is-auto.is-hold .np-prog.is-run i { animation-play-state: paused; }
.np:not(.is-auto) .np-prog { display: none; }
.np-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.np-btn { display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; transition: background-color .2s, transform .15s; -webkit-tap-highlight-color: transparent; }
.np-btn .ico { width: 18px; height: 18px; stroke-width: 2.4; }
.np-btn:active, .np .adr-play:active { transform: scale(.92); }
.np .adr-play { width: 50px; height: 50px; background: #fff; color: #141210; }
.np .adr-play svg { width: 18px; height: 18px; }
.np-go { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 99px; background: rgba(255, 255, 255, .14); color: #fff; font-size: 13.5px; font-weight: 700; text-decoration: none; transition: background-color .2s; }
.np-go .ico { width: 14px; height: 14px; }
.np-btn:focus-visible, .np-go:focus-visible, .np .adr-play:focus-visible { outline: 2px solid #F5E1B3; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .np-btn:hover, .np-go:hover { background: rgba(255, 255, 255, .24); } }
.np-list { list-style: none; margin: 0; padding: 6px; display: grid; gap: 2px; max-height: 372px; overflow-y: auto; border-radius: 18px; background: rgba(0, 0, 0, .2); scrollbar-width: none; overscroll-behavior: contain; }
.np-list::-webkit-scrollbar { display: none; }
.np-row { display: grid; grid-template-columns: 24px 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 6px 12px 6px 6px; border: 0; border-radius: 12px; background: none; color: #fff; font: inherit; text-align: left; cursor: pointer; transition: background-color .25s; -webkit-tap-highlight-color: transparent; }
.np-row img { display: block; width: 34px; aspect-ratio: 3 / 4; border-radius: 6px; object-fit: cover; background: rgba(0, 0, 0, .3); }
.np-no { font-size: 12.5px; color: rgba(255, 255, 255, .5); text-align: center; }
.np-row .np-eq { display: none; justify-self: center; }
.np-row.is-on { background: rgba(255, 255, 255, .16); }
.np-row.is-on .np-no { display: none; }
.np-row.is-on .np-eq { display: inline-flex; }
.np-t { display: grid; min-width: 0; line-height: 1.35; }
.np-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.np-t small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: rgba(255, 255, 255, .6); }
.np-c { font-size: 14px; font-weight: 800; color: #F5E1B3; }
.np-row:focus-visible { outline: 2px solid #F5E1B3; outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { .np-row:not(.is-on):hover { background: rgba(255, 255, 255, .08); } }
/* 正在播放的音量條：四根細條上下跳 */
.np-eq { display: inline-flex; align-items: flex-end; justify-content: center; gap: 2px; width: 15px; height: 12px; }
.np-eq i { width: 2.5px; height: 100%; border-radius: 1px; background: #F5E1B3; transform-origin: 50% 100%; transform: scaleY(.45); }
.np.is-auto .np-eq i { animation: np-eq .9s ease-in-out infinite alternate; }
.np.is-auto .np-eq i:nth-child(2) { animation-duration: .7s; animation-delay: -.35s; }
.np.is-auto .np-eq i:nth-child(3) { animation-duration: 1.05s; animation-delay: -.6s; }
.np.is-auto .np-eq i:nth-child(4) { animation-duration: .8s; animation-delay: -.15s; }
.np.is-auto.is-hold .np-eq i { animation-play-state: paused; }
@keyframes np-eq { from { transform: scaleY(.22); } to { transform: none; } }
@media (max-width: 1040px) { .np { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); } .np-list { grid-column: 1 / -1; display: flex; max-height: none; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; } .np-list li { flex: none; width: 210px; scroll-snap-align: start; } }
@media (max-width: 699px) {
  .np { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 16px 14px; padding: 18px; border-radius: 24px; }
  .np-info { gap: 10px; }
  .np-k { font-size: 12px; letter-spacing: .03em; }
  .np-name { font-size: 16px; }
  .np-hook { font-size: 12.5px; }
  .np-big { margin-top: 4px; gap: 6px; flex-wrap: wrap; }
  .np-big small { font-size: 12px; }
  .np-big b { font-size: clamp(38px, 12vw, 52px); }
  .np-sum { font-size: 12px; line-height: 1.55; }
  .np-ctl { gap: 8px; }
  .np-btn { width: 34px; height: 34px; }
  .np .adr-play { width: 42px; height: 42px; }
  .np-go { display: none; }
  .np-list { padding: 4px; gap: 6px; border-radius: 14px; }
  .np-list li { width: 168px; }
  .np-row { grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 9px; row-gap: 0; padding: 6px; }
  .np-row img { grid-row: 1 / span 2; width: 30px; }
  .np-row .np-no, .np-row.is-on .np-eq, .np-row .np-eq { display: none; }
  .np-row .np-t small { display: none; }
  .np-row .np-c { grid-column: 2; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) { .np-bg img, .np-cover img { transition: opacity .2s ease; transform: none; } .np-body.is-in { animation: none; } }

/* ---------- 蜂巢牆：一排 2、3、4、3 格的蜂巢，一格一格慢慢亮起來，旁邊寫那一支的數字 ---------- */
:root { --hx-sh: rgba(40, 28, 8, .2); }
:root[data-theme="dark"] { --hx-sh: rgba(0, 0, 0, .7); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hx-sh: rgba(0, 0, 0, .7); } }
.hx { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 5vw, 72px); }
.hx-comb { --hw: clamp(96px, 9.6vw, 118px); --hh: calc(var(--hw) * 1.1547); --hs: calc(var(--hw) + 8px); --vs: calc(var(--hh) * .75 + 7px); position: relative; height: calc(var(--hh) + (var(--rows, 4) - 1) * var(--vs) + 24px); }
.hx-c { position: absolute; left: calc(50% + var(--cx) * var(--hs) - var(--hw) / 2); top: calc(var(--cy) * var(--vs) + 12px); width: var(--hw); height: var(--hh); color: #fff; text-decoration: none; -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 12px 14px var(--hx-sh)); transition: transform 1.2s cubic-bezier(.45, 0, .55, 1), filter 1.2s ease; }
.hx-c::before { content: ""; position: absolute; inset: -3px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(160deg, #F8EBCB, #DDBF83 52%, #F5E1B3); opacity: 0; transition: opacity 1.2s cubic-bezier(.45, 0, .55, 1); }
.hx-h { position: absolute; inset: 0; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); overflow: hidden; background: #121214; }
.hx-h img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.5) brightness(.78); transform: scale(1.08); transition: filter 1.2s cubic-bezier(.45, 0, .55, 1), transform 1.6s cubic-bezier(.22, 1, .36, 1); }
.hx-tag { position: absolute; left: 50%; bottom: 16%; transform: translateX(-50%); padding: 1px 8px; border-radius: 99px; background: rgba(10, 10, 12, .74); color: #fff; font-size: 11.5px; font-weight: 800; line-height: 1.5; white-space: nowrap; transition: background-color .9s, color .9s; }
.hx-c.is-on { z-index: 2; transform: scale(1.12); filter: drop-shadow(0 0 18px rgba(234, 208, 154, .55)) drop-shadow(0 18px 22px var(--hx-sh)); transition-duration: .9s; transition-timing-function: cubic-bezier(.22, 1, .36, 1); }
.hx-c.is-on::before { opacity: 1; transition-duration: .9s; }
.hx-c.is-on .hx-h img { filter: none; transform: none; transition-duration: .9s, 1.1s; }
.hx-c.is-on .hx-tag { background: linear-gradient(180deg, #F8EBCB, #DDBF83); color: var(--on-honey); }
.hx-c:focus-visible { outline: none; }
.hx-c:focus-visible::before { opacity: 1; }
.hx-info { display: grid; gap: 14px; align-content: center; min-width: 0; }
.hx-k { display: flex; align-items: center; gap: 12px; margin: 0; }
.hx-no { padding: 2px 11px; border-radius: 99px; background: var(--comb); color: var(--amber); font-size: 13px; font-weight: 800; line-height: 1.7; }
.hx-k .adr-play { margin-left: auto; }
.hx-body { display: grid; gap: 4px; min-width: 0; }
.hx-body.is-in { animation: adr-in .52s cubic-bezier(.22, 1, .36, 1); }
.hx-name { margin: 0; font-size: clamp(20px, 2vw, 26px); font-weight: 800; line-height: 1.3; }
.hx-ind { margin: 0; font-size: 14px; color: var(--ink-soft); }
.hx-big { display: flex; align-items: baseline; gap: 10px; margin: 12px 0 2px; }
.hx-big small { font-size: 14px; color: var(--ink-soft); }
.hx-big b { font: 800 clamp(56px, 6.4vw, 92px)/.95 var(--font-num); letter-spacing: -.04em; color: var(--amber); }
.hx-sum { margin: 0; font-size: 15px; line-height: 1.6; }
.hx-sum b { font-family: var(--font-num); font-weight: 800; color: var(--amber); }
.hx-hook { margin: 0; min-height: 1.6em; font-size: 14px; color: var(--ink-soft); }
.hx-go { justify-self: start; }
:root[data-theme="dark"] .hx-big b { filter: var(--num-glow); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hx-big b { filter: var(--num-glow); } }
@media (max-width: 860px) {
  .hx { grid-template-columns: 1fr; gap: 14px; }
  .hx-comb { --hw: min(84px, 20.5vw); }
  .hx-tag { font-size: 10px; padding: 0 6px; }
  .hx-k .adr-play { margin-left: 4px; }
  .hx-big b { font-size: clamp(44px, 13vw, 60px); }
}
@media (prefers-reduced-motion: reduce) { .hx-c, .hx-c::before, .hx-h img, .hx-tag { transition: none; } .hx-body.is-in { animation: none; } }

/* =====================================================================
   v14 官網：Apple Intelligence 那種大卡片輪播（interact.js 的 mgallery）
   一次一張大卡片置中、兩邊露出一點；卡片裡：左上文字、右下電腦畫面（瀏覽器視窗）、中間一支手機
   下面一顆膠囊：圓點（目前那張拉長、裡面跑進度）＋旁邊一顆播放／暫停
   ===================================================================== */
.mg { --mg-w: min(84vw, 1000px); --mg-dur: 5.2s; margin: 18px calc(50% - 50vw) 0; }
.mg-track { position: relative; display: flex; gap: 20px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; padding: 6px calc((100% - var(--mg-w)) / 2) 44px; margin-bottom: -18px; cursor: grab; }
.mg-track::-webkit-scrollbar { display: none; }
.mg-track.is-drag { cursor: grabbing; scroll-snap-type: none; }
.mg-track.is-drag .mg-item { pointer-events: none; }
.mg-item { position: relative; flex: 0 0 var(--mg-w); min-width: 0; aspect-ratio: 16 / 8.4; border-radius: 30px; overflow: hidden; scroll-snap-align: center; isolation: isolate; color: #F5F5F7; text-decoration: none; -webkit-tap-highlight-color: transparent;
  background: radial-gradient(70% 90% at 0% 0%, rgba(235, 200, 126, .16), transparent 62%), radial-gradient(60% 70% at 100% 100%, rgba(235, 200, 126, .1), transparent 60%), linear-gradient(160deg, #19191C, #09090A);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset, 0 22px 40px -26px rgba(0, 0, 0, .5); }
.mg-item:focus-visible { outline: 3px solid var(--honey-deep); outline-offset: 4px; }
.mg-cap { position: absolute; z-index: 3; left: clamp(26px, 4vw, 52px); top: clamp(26px, 4vw, 50px); display: grid; justify-items: start; gap: 7px; max-width: 32%; will-change: transform, opacity; }
.mg-cap small { font-size: 13.5px; color: #A1A1A6; }
.mg-cap b { font-size: clamp(25px, 3vw, 38px); font-weight: 800; line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; }
.mg-url { font: 700 14px var(--font-num); color: #F5D38A; }
.mg-go { display: inline-flex; align-items: center; gap: 2px; margin-top: 12px; padding: 8px 14px 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 700;
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .1)); box-shadow: inset 0 1px rgba(255, 255, 255, .05), 0 0 0 1px rgba(255, 255, 255, .22), inset 0 -1px rgba(0, 0, 0, .2); }
.mg-go .ico { width: 16px; height: 16px; }
.mg-win { position: absolute; z-index: 1; right: -2%; bottom: -9%; width: 60%; aspect-ratio: 4 / 3; border-radius: 14px 14px 0 0; overflow: hidden; background: #FFF; will-change: transform;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 30px 80px -24px rgba(0, 0, 0, .7), 0 0 60px -20px rgba(235, 200, 126, .25); }
.mg-bar { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px; background: #ECECEF; }
.mg-bar i { width: 9px; height: 9px; border-radius: 50%; background: #CFCFD4; }
.mg-win img { display: block; width: 100%; height: calc(100% - 26px); object-fit: cover; object-position: top; -webkit-user-drag: none; user-select: none; }
.mg-phone { position: absolute; z-index: 2; left: 33%; bottom: 7%; width: 15.5%; aspect-ratio: 1 / 2; border-radius: 18px; border: 5px solid #0E0E10; overflow: hidden; background: #0E0E10; will-change: transform;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 26px 50px -14px rgba(0, 0, 0, .7); }
.mg-phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; -webkit-user-drag: none; user-select: none; }
@media (hover: hover) and (pointer: fine) { .mg-item.is-cur:hover .mg-go { box-shadow: inset 0 1px rgba(255, 255, 255, .05), 0 0 0 1px rgba(255, 255, 255, .5), inset 0 -1px rgba(0, 0, 0, .2); } }
/* 下面那顆膠囊 */
.mg-ctl { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 2px; }
.mg-pill { display: flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.mg-dots { display: flex; align-items: center; gap: 8px; }
.mg-dot { --w: 0; position: relative; width: calc(8px + 40px * var(--w)); height: 8px; padding: 0; border: 0; border-radius: 8px; background: color-mix(in srgb, var(--ink) 28%, transparent); overflow: hidden; cursor: pointer; transition: background-color .2s; -webkit-tap-highlight-color: transparent; }
.mg-dot::before { content: ""; position: absolute; inset: -12px -4px; }
.mg-dot i { position: absolute; inset: 0; border-radius: inherit; background: var(--honey-deep); transform: scaleX(0); transform-origin: 0 50%; }
.mg-dot.is-cur i { animation: mg-prog var(--mg-dur) linear forwards; }
.mg.is-paused .mg-dot.is-cur i { animation-play-state: paused; }
@keyframes mg-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.mg-play { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); cursor: pointer; transition: background-color .2s, transform .15s; }
.mg-play svg { width: 18px; height: 18px; fill: currentColor; }
.mg-play:active { transform: scale(.92); }
@media (hover: hover) and (pointer: fine) { .mg-play:hover, .mg-dot:hover { background-color: color-mix(in srgb, var(--ink) 14%, transparent); } .mg-dot.is-cur:hover { background-color: color-mix(in srgb, var(--ink) 28%, transparent); } }
@media (max-width: 699px) {
  .mg { --mg-w: 84vw; }
  .mg-track { gap: 12px; padding-bottom: 18px; }
  .mg-item { aspect-ratio: 4 / 5.3; border-radius: 24px; }
  .mg-cap { left: 20px; right: 20px; top: 20px; max-width: none; gap: 5px; }
  .mg-cap b { font-size: 23px; }
  .mg-go { display: none; }
  .mg-win { width: 94%; right: -12%; bottom: -3%; }
  .mg-phone { left: 7%; bottom: 7%; width: 28%; border-width: 4px; border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) { .mg-dot.is-cur i { animation: none; transform: scaleX(1); } }

/* 舊版 Safari（16.2 以前）不認得 color-mix：圓點、膠囊、圓形箭頭、暫停鍵改用固定的半透明灰（深淺色主題都看得到） */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .rail-pill, .mg-pill, .mg-play, .adr-play { background: rgba(128, 128, 128, .14); }
  .rail-btn { background: rgba(128, 128, 128, .18); color: inherit; }
  .mg-dot { background: rgba(128, 128, 128, .45); }
}

/* ---------- v15：省多少像特價標籤 ----------
   同樣內容用個人版要付多少（紅線劃掉）→ 這個方案要付多少（大字）→ 現省多少。劃掉的是個人版的價格（旁邊寫「個人版」），不是原價 */
:root { --sale: #FF5A52; }
.was { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 2px 0 0; font-size: 13px; font-weight: 600; color: var(--ink-faint); }
.was s { font: 700 clamp(17px, 1.6vw, 20px)/1.1 var(--font-num); letter-spacing: -.01em; color: var(--ink-soft); text-decoration: line-through; text-decoration-color: var(--sale); text-decoration-thickness: 2px; }
.now { display: inline-block; padding: 2px 9px; border-radius: 6px; background: var(--honey); color: var(--on-honey); font: 800 13px/1.4 var(--font-body); font-style: normal; letter-spacing: .04em; }
.fee-read:not(.is-base) .fr-save { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.fee-read:not(.is-base) .fr-save > small { flex-basis: 100%; }
.qr-was { margin: 4px 0 -2px; color: var(--band-soft); }
.qr-was s { color: var(--band-soft); }
.qr-save.is-up .qr-sl { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; opacity: 1; }
.qr-save.is-up .qr-sl > span { font-size: 13.5px; font-weight: 600; opacity: .8; }
.qr-save.is-up .now { background: var(--on-honey); color: #F6D998; }

/* ---------- v15：報表最下面改成「半年下來提高多少」：每個月一根柱子，最後一個月亮起來（數字取自 Meta 廣告帳戶） ---------- */
.rp-half { padding: 14px 14px 12px; border: 1px solid var(--rule); border-radius: 16px; background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent); }
.rp-hc { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; height: 136px; margin-top: 4px; }
.rh { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; height: 100%; min-width: 0; }
.rh b { font: 700 12px/1 var(--font-num); color: var(--ink-soft); }
.rh i { display: block; width: 100%; max-width: 36px; height: calc(var(--h) * (100% - 40px)); border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg, #8E8E96, rgba(142, 142, 150, .18)); transform-origin: 50% 100%; transition: transform .9s var(--ease-out) calc(var(--k) * 70ms); }
.rh small { font: 500 11px/1 var(--font-mono); color: var(--ink-faint); white-space: nowrap; }
.rh.is-now b { color: var(--ink); font-size: 13px; }
.rh.is-now i { background: linear-gradient(180deg, #F6D998, var(--honey) 45%, rgba(235, 200, 126, .2)); box-shadow: 0 0 20px -4px color-mix(in srgb, var(--honey) 75%, transparent); }
.viz .rp:not(.is-on) .rh i { transform: scaleY(0); }
.rp-hs { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }
.rp-hs b { font-weight: 700; color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .rh i { transition: none; } }

/* =========================================================================
   v24
   ========================================================================= */
/* 1. 蜂巢跳出來的 logo：六角形的邊柔一點（用羽化的遮罩，不再一刀切），深色底上也不會太銳利 */
.hd-c .bw-l { clip-path: none; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 115.47' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='2.6'/%3E%3C/filter%3E%3Cpolygon filter='url(%23f)' points='50,4.5 96,31.1 96,84.4 50,111 4,84.4 4,31.1'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 115.47' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='2.6'/%3E%3C/filter%3E%3Cpolygon filter='url(%23f)' points='50,4.5 96,31.1 96,84.4 50,111 4,84.4 4,31.1'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }

/* 2. 拉桿：跟長條同一種感覺——粗一點、蜂蜜色從左邊亮、往圓鈕那頭慢慢淡（Framer 的發光長條），不是一條平平的色塊 */
.range { --rng-fill: linear-gradient(90deg, #FAEBC4 0%, var(--honey) 32%, color-mix(in srgb, var(--honey) 78%, transparent) 68%, color-mix(in srgb, var(--honey) 50%, transparent) 100%); }
.range::-webkit-slider-runnable-track { height: 8px; background: var(--rng-fill) 0 0 / var(--pct, 0%) 100% no-repeat, var(--band-3); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); }
.range.range-light::-webkit-slider-runnable-track { background: var(--rng-fill) 0 0 / var(--pct, 0%) 100% no-repeat, color-mix(in srgb, var(--ink) 10%, transparent); box-shadow: none; }
.range::-moz-range-track { height: 8px; }
.range::-moz-range-progress { height: 8px; background: var(--rng-fill); }
.range::-webkit-slider-thumb { margin-top: -9px; }

/* 3. 一圈會繞的光（AI 影音學院彈窗那種）：產生報價單那顆、改年繳視窗裡「年繳」那一列。
   ::before＝邊框上那一段亮光，一直沿著邊繞；::after＝外面跟著繞的一團淡淡金光 */
@property --beam { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.beam { position: relative; display: inline-flex; border-radius: 999px; isolation: isolate; }
.ya-row.is-a { position: relative; isolation: isolate; }
.beam::before, .ya-row.is-a::before { content: ""; position: absolute; inset: -2px; z-index: 1; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--beam), transparent 0 56%, rgba(255, 238, 198, .3) 66%, #FFF5DA 76%, var(--honey) 82%, transparent 93% 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: beam-spin 3.4s linear infinite; }
.ya-row.is-a::before { inset: -2.5px; padding: 2.5px; }
.beam::after, .ya-row.is-a::after { content: ""; position: absolute; inset: -7px; z-index: -1; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--beam), transparent 0 58%, rgba(235, 200, 126, .6) 78%, transparent 94%); filter: blur(10px); opacity: .75; animation: beam-spin 3.4s linear infinite; }
@keyframes beam-spin { to { --beam: 360deg; } }
/* 產生報價單：光掃過去更常、外面一圈呼吸更明顯 */
#qr-quote::after { animation-duration: 2.8s; }
#qr-quote.is-breath { animation: cta-call 2.6s ease-in-out infinite; }
@keyframes cta-call {
  0%, 100% { box-shadow: 0 0 0 1px rgba(246, 219, 161, .2), 0 0 18px rgba(235, 200, 126, .22), 0 6px 22px rgba(0, 0, 0, .14); }
  48% { box-shadow: 0 0 0 7px rgba(246, 219, 161, .16), 0 0 44px rgba(235, 200, 126, .62), 0 8px 26px rgba(203, 169, 100, .2); }
  72% { box-shadow: 0 0 0 11px rgba(246, 219, 161, 0), 0 0 26px rgba(235, 200, 126, .3), 0 6px 22px rgba(0, 0, 0, .14); }
}
@media (max-width: 420px) { .qr-cta .beam { flex: 1; } .qr-cta .beam .btn { flex: 1; } }
@media (prefers-reduced-motion: reduce) {
  .beam::before, .beam::after, .ya-row.is-a::before, .ya-row.is-a::after { animation: none; }
  #qr-quote.is-breath { animation: none; box-shadow: 0 0 22px rgba(235, 200, 126, .4); }
}

/* 4. 長條上的光（像「三年」那排蜂巢格子）：從左邊慢慢走到右邊、停一下再一次。
   首屏兩條（一般行情、蜂窩今年）用同一把尺：光走在同一個位置，長的短的一起亮過去 */
.hv-t { container-type: inline-size; }
.hv-row.is-us .hv-t i::before, .hv-row.is-them .hv-t i::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 26cqw; transform: translateX(-30cqw);
  background: linear-gradient(100deg, transparent 10%, rgba(255, 255, 255, .72) 50%, transparent 90%); }
.hv-row.is-them .hv-t i::before { background: linear-gradient(100deg, transparent 10%, rgba(255, 255, 255, .5) 50%, transparent 90%); }
.is-on .hv-row.is-us .hv-t i::before, .is-on .hv-row.is-them .hv-t i::before { animation: hv-glide 4.6s cubic-bezier(.5, 0, .3, 1) 1.6s infinite; }
@keyframes hv-glide { 0% { transform: translateX(-30cqw); } 46%, 100% { transform: translateX(104cqw); } }
/* 其他長條：原本只有亮的那一條有光，其他的也加一道淡一點的光 */
.ba:not(.is-after) .ba-t i::before, .hc-race li:not(.is-win) .hr-bar i::before, .hv:not(.is-win) .hv-bar i::before, .mb-row:not(.is-us) > i::before,
.rb:not(.is-us) i::before, .rp-bar:not(.is-curr) > i > i::before, .cbar:not(.is-hi):not(.is-best) .cb-t i::before, .eb-row .eb-lo::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 36%; pointer-events: none; transform: translateX(-130%);
  background: linear-gradient(100deg, transparent 10%, rgba(255, 255, 255, .34) 50%, transparent 90%); }
.eb-lo { overflow: hidden; }
.eb-row.is-me .eb-lo::before { background: linear-gradient(100deg, transparent 10%, rgba(255, 246, 214, .8) 50%, transparent 90%); }
.hw.is-live .ba:not(.is-after) .ba-t i::before, .hw.is-live .hc-race li:not(.is-win) .hr-bar i::before, .hw.is-live .hv:not(.is-win) .hv-bar i::before,
.hero-band.is-live.is-on .mb-row:not(.is-us) > i::before, .rp.is-live.is-on .rb:not(.is-us) i::before, .rp.is-live.is-on .rp-bar:not(.is-curr) > i > i::before,
.cbars.is-on .cbar:not(.is-hi):not(.is-best) .cb-t i::before, .est-chart .eb-lo::before { animation: bar-shine 4.6s cubic-bezier(.5, 0, .3, 1) 2.2s infinite; }
.vs-row.is-bm .vs-t i::before, .vs-row.is-img .vs-t i::before { display: block; opacity: .55; }
@media (prefers-reduced-motion: reduce) { .hv-t i::before, .eb-lo::before, .mb-row > i::before, .rb i::before, .rp-bar > i > i::before { animation: none !important; } }

/* 5. 底部的預估列（在「省多少」或試算動過之後一直在）：總共多少、每月找到幾位客人、每月成交大約多少，右邊一顆按鈕。
   手機：整條貼在最下面（取代原本的底部浮動列）；電腦：左下角一張浮起來的長條，寬度讓開「省多少」右邊黏住的面板 */
.xb { position: fixed; z-index: 56; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px;
  padding: 9px var(--gr) calc(9px + env(safe-area-inset-bottom, 0px)) var(--gl);
  background: var(--band-2);   /* 不透明：後面的字不會透出來 */
  color: var(--band-fg); border-top: 1px solid var(--band-rule); box-shadow: 0 -14px 30px -16px rgba(0, 0, 0, .5);
  transform: translateY(115%); visibility: hidden; transition: transform .45s var(--ease-out), visibility 0s linear .45s; }
.xb.is-on { transform: none; visibility: visible; transition: transform .45s var(--ease-out), visibility 0s; }
.xb p { margin: 0; }
.xb-src { display: none; }
.xb-f { display: grid; flex: 1 1 auto; min-width: 0; line-height: 1.25; }   /* 照數字自己的寬度分（三格一樣寬的話，手機上「100–330」會被切成「100–33…」） */
.xb-f small { font-size: 11px; color: var(--band-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xb-f b { font: 800 15px/1.3 var(--font-num); letter-spacing: -.01em; color: var(--band-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xb-f.is-rev b { color: var(--honey); filter: var(--num-glow); }
.xb-go { flex: none; min-height: 40px; padding: 0 14px; font-size: 13.5px; }
@media (min-width: 1081px) {
  .xb { left: max(24px, calc((100vw - var(--wrap)) / 2 + 16px)); right: auto; bottom: 20px; width: min(780px, calc(min(100vw, var(--wrap)) - 32px - 420px)); gap: 18px;
    padding: 10px 10px 10px 20px; border: 1px solid var(--band-rule); border-radius: 18px; box-shadow: 0 24px 50px -22px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .05);
    transform: translateY(calc(100% + 40px)); container-type: inline-size; }
  .xb-src { display: grid; flex: 0 1 auto; min-width: 0; max-width: 11em; line-height: 1.3; }
  .xb-src small { font-size: 11px; font-weight: 700; color: var(--honey); }
  .xb-src span { font-size: 12px; color: var(--band-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .xb-f b { font-size: 18px; }
  .xb-go { min-height: 44px; padding: 0 18px; font-size: 14.5px; }
}
@container (max-width: 640px) { .xb-src { display: none; } }
@media (min-width: 1081px) { body.has-xb .site-foot { padding-bottom: 104px; } }   /* 捲到最底：頁尾最後一行不會被預估列蓋住 */
@media (max-width: 430px) { .xb { gap: 10px; } .xb-f b { font-size: 14px; letter-spacing: -.02em; } .xb-go { padding: 0 12px; } }
@media (max-width: 360px) { .xb { gap: 8px; } .xb-f b { font-size: 13px; } .xb-go { padding: 0 10px; font-size: 12.5px; } }

/* v25：手機上卡片一律排成一排、左右滑（跟「四種方案，一眼比較」一樣）：篩選後的廣告、每月報表、做過的貼文、經營過的官方帳號；廣告牆只放一排 */
.ads-mq.is-one { display: none; }
@media (max-width: 699px) {
  .ad-wall > .ads-mq:not(.is-one) { display: none; }
  .ad-wall > .ads-mq.is-one { display: block; }
  .ad-grid, .rp-grid, .po-grid, .lx-shots { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gl)) calc(-1 * var(--gr)); padding: 4px var(--gr) 12px var(--gl); scroll-padding-inline: var(--gl) var(--gr); }
  .ad-grid::-webkit-scrollbar, .rp-grid::-webkit-scrollbar, .po-grid::-webkit-scrollbar, .lx-shots::-webkit-scrollbar { display: none; }
  .ad-grid > .ad { flex: 0 0 158px; width: auto; scroll-snap-align: start; }
  .rp-grid > .rp { flex: 0 0 86%; min-width: 0; scroll-snap-align: start; }
  .po-grid > .po { flex: 0 0 64%; scroll-snap-align: start; }
  .po-grid > .po.is-wide { flex-basis: 86%; }
  .lx-shots > * { flex: 0 0 68%; scroll-snap-align: start; }
}
/* v27：頁尾的「文章」連結 */
.foot-copy .foot-art { color: inherit; text-decoration: underline; text-decoration-color: var(--honey); text-underline-offset: 3px; }
.foot-copy .foot-art:hover { color: var(--band-fg); }