/*
  初學者友善提醒：
  - 你最常改的是 :root 的顏色與字體
  - 這份 CSS 目標是：乾淨、現代、適合展示型 landing page
*/

/* 使用專案內字體（不靠外網，Live Server 直接可預覽） */
@font-face {
  font-family: "LINESeedTW-Rg";
  src: url("./font/LINESeedTW_TTF_Rg.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LINESeedTW-Eb";
  src: url("./font/LINESeedTW_TTF_Eb.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "LINESeedTW-Bd";
  src: url("./font/LINESeedTW_TTF_Bd.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /*
    色彩鐵律（你指定）：
    - 只用兩個品牌色號當基準：紅 #e60012、米白 #f4e4d7
    - 不使用「相近色」去做漸層或偷調色（維持 one tone）
    - 其他顏色只允許：黑色透明度（用於陰影/描邊/可讀性）
  */
  --red: #e60012; /* Canva 匯出 SVG 內的主紅 */
  --cream: #f4e4d7;

  /* 全站基底：紅色 one tone（包含封面底） */
  --bg: var(--red);

  /* 文字：以米白為主（透明度做層級，不引入新色號） */
  --text: rgba(244, 228, 215, 0.94);
  --muted: rgba(244, 228, 215, 0.82);
  --faint: rgba(244, 228, 215, 0.68);

  /* 重點色：直接用品牌紅 */
  --brand: var(--red);

  --shadow: 0 18px 60px rgba(16, 12, 10, 0.14);
  --radius: 18px;
  --radius-sm: 12px;
  /* 按鈕藥丸形：兩端純圓，與訂閱方案圓形概念一致 */
  --radius-pill: 999px;
  --max: 1120px;
  /* 捲動定位偏移：避免 sticky header 蓋到標題（JS 會動態覆寫） */
  --scroll-offset: 96px;
}

/* 所有帶 id 的錨點：捲動到這裡時保留上方空間 */
[id] {
  scroll-margin-top: var(--scroll-offset);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family:
    "LINESeedTW-Rg",
    ui-sans-serif,
    system-ui,
    -apple-system,
    "PingFang TC",
    "Noto Sans TC",
    "Microsoft JhengHei",
    sans-serif;
  line-height: 1.6;
}

/*
  Epoxy 地板質感背景（紅色 one tone）
  - 不用圖片檔：全靠多層漸層堆疊
  - 不是「平均高斯」：用多顆不同大小/位置的光斑 + 局部模糊，做出不規則反光
  - 互動：搭配 script.js 動態更新 CSS 變數，捲動/滑鼠移動會讓反光微微改變
*/
body::before,
body::after {
  content: "";
  position: fixed;
  inset: -18vmax; /* 放大一點，避免移動時露出邊緣 */
  pointer-events: none;
  z-index: -1;
}

/* 底層：顆粒 + 不規則色塊（很淡，避免髒） */
body::before {
  background:
    /* 不規則雲霧（米白透明度） */
    radial-gradient(55vmax 40vmax at calc(18% + var(--epoxy-x, 0px)) calc(10% + var(--epoxy-y, 0px)), rgba(244, 228, 215, 0.14), transparent 60%),
    radial-gradient(40vmax 30vmax at calc(78% + var(--epoxy-x, 0px)) calc(22% + var(--epoxy-y, 0px)), rgba(244, 228, 215, 0.1), transparent 62%),
    radial-gradient(52vmax 36vmax at calc(55% + var(--epoxy-x, 0px)) calc(88% + var(--epoxy-y, 0px)), rgba(0, 0, 0, 0.14), transparent 62%),
    /* 顆粒（用重複線性漸層假裝微噪點） */
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.028) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(90deg, rgba(244, 228, 215, 0.02) 0 1px, transparent 1px 7px);
  filter: blur(0.3px);
  opacity: 1;
  transform: translate3d(calc(var(--epoxy-x, 0px) * 0.06), calc(var(--epoxy-y, 0px) * 0.06), 0);
}

/* 上層：反光膜（局部高斯模糊的光帶 + 亮斑） */
body::after {
  background:
    /* 斜向反光帶（像環氧樹脂的面光） */
    linear-gradient(
      calc(120deg + var(--epoxy-tilt, 0deg)),
      transparent 0%,
      rgba(244, 228, 215, 0.08) 22%,
      rgba(244, 228, 215, 0.18) 28%,
      rgba(244, 228, 215, 0.06) 36%,
      transparent 46%
    ),
    /* 亮斑（位置會跟著變，營造「你移動視角」的錯覺） */
    radial-gradient(18vmax 12vmax at calc(30% + var(--epoxy-shine-x, 0%)) calc(20% + var(--epoxy-shine-y, 0%)), rgba(244, 228, 215, 0.22), transparent 62%),
    radial-gradient(14vmax 10vmax at calc(76% + var(--epoxy-shine-x, 0%)) calc(58% + var(--epoxy-shine-y, 0%)), rgba(244, 228, 215, 0.14), transparent 65%),
    radial-gradient(22vmax 16vmax at calc(52% - var(--epoxy-shine-x, 0%)) calc(92% - var(--epoxy-shine-y, 0%)), rgba(244, 228, 215, 0.1), transparent 66%);
  filter: blur(10px);
  opacity: 0.95;
  transform:
    translate3d(calc(var(--epoxy-x, 0px) * 0.12), calc(var(--epoxy-y, 0px) * 0.12), 0)
    rotate(calc(var(--epoxy-rotate, 0deg)));
  transform-origin: center;
}

/* 主標統一用加粗字體，讓層級更清楚 */
.hero-title,
.section-title,
.plan-title,
.cta-title,
.card-title,
.feature-title,
.coffee-title,
.qa-q,
.review-title,
.step-title {
  font-family:
    "LINESeedTW-Eb",
    "LINESeedTW-Rg",
    ui-sans-serif,
    system-ui,
    -apple-system,
    "PingFang TC",
    "Noto Sans TC",
    "Microsoft JhengHei",
    sans-serif;
}

/* 依你的需求：首頁主標題指定用 Bd 粗體 */
.hero-title {
  font-family:
    "LINESeedTW-Bd",
    "LINESeedTW-Eb",
    "LINESeedTW-Rg",
    ui-sans-serif,
    system-ui,
    -apple-system,
    "PingFang TC",
    "Noto Sans TC",
    "Microsoft JhengHei",
    sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
}

/*
  淺色閱讀面（米白）上的文字要切回深色，否則會出現「米白底＋米白字」的可讀性問題。
  這裡只用黑色透明度做層級，不引入第三個色號。
*/
.card,
.plan-main,
.feature,
.coffee,
.qa,
.cta,
.step,
.review-card,
.checkout-card {
  color: rgba(0, 0, 0, 0.86);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 10px;
  padding: 10px 12px;
  background: #fff;
  color: #111;
  border-radius: 10px;
  z-index: 9999;
}
.skip-link:focus {
  left: 12px;
}

/* 頁面滑動進度條（不打擾內容的「看完感」） */
.scroll-progress {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  z-index: 60; /* 比 header 高一點，避免被蓋住 */
  /* 軌道用很淡的米白，讓「填滿段」的標準米白更明顯 */
  background: rgba(244, 228, 215, 0.16);
}
.scroll-progress-bar {
  height: 100%;
  /* 用 transform 做寬度感（比直接改 width 更不容易掉幀） */
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0% 50%;
  /* 用品牌標準米白當進度顏色（不另外發明新色號） */
  background: var(--cream);
  /* 不額外加灰/髒陰影：讓顏色乾淨、專注在閱讀進度 */
  box-shadow: none;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* 讓捲動時的進度更「絲滑」：避免一格一格的線性硬切 */
  transition: transform 140ms cubic-bezier(0.2, 0.85, 0.25, 1);
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
  background: rgba(230, 0, 18, 0.78);
  border-bottom: 1px solid rgba(244, 228, 215, 0.18);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  letter-spacing: 0.3px;
}
.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--cream);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  color: var(--red);
}
.nav {
  display: none;
  gap: 16px;
  align-items: center;
}
.nav-link {
  color: var(--muted);
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 12px;
}
.nav-link:hover {
  color: var(--text);
  background: rgba(26, 20, 16, 0.06);
}
.header-actions {
  display: flex;
  /* 外光暈（box-shadow）會比按鈕邊界更「寬」：左右並排時需要更大呼吸空間，避免壓到隔壁按鈕 */
  gap: 20px;
  align-items: center;
}

/* Buttons */
.btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: 10px 18px;
  cursor: pointer;
  font-weight: 800;
  color: var(--cream);
  background: rgba(244, 228, 215, 0.12);
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}
.btn:hover {
  transform: translateY(-1px);
  background: rgba(244, 228, 215, 0.16);
}
.btn:active {
  transform: translateY(0);
}
.btn:focus-visible {
  outline: 3px solid rgba(244, 228, 215, 0.35);
  outline-offset: 2px;
}
.btn-primary {
  /* 紅底頁面：主 CTA 用米白底＋紅字；邊框用品牌紅淡邊，避免米白邊在米白底上「看起來沒外框」 */
  background: var(--cream);
  border: 1px solid rgba(230, 0, 18, 0.35);
  color: var(--red);
  /* 避免出現偏灰/偏髒的落影（你回饋不喜歡） */
  box-shadow: none;
}
.btn-primary:hover {
  background: var(--cream);
  border-color: rgba(230, 0, 18, 0.45);
}
.btn-ghost {
  background: rgba(244, 228, 215, 0.08);
  border-color: rgba(244, 228, 215, 0.28);
}
.btn-link {
  background: transparent;
  border-color: transparent;
  padding: 8px 0;
  color: var(--muted);
}
.btn-link:hover {
  color: var(--text);
  background: transparent;
  transform: none;
}
.btn-lg {
  padding: 12px 22px;
  border-radius: var(--radius-pill);
}

/*
  付款 CTA（兩套統一風格）
  - `pay-hover--glow`：紅色外光暈（不引用灰/黑陰影）
  - `pay-hover--dot`：右側小圓點變大 + 不透明度變化（不引用任何陰影；只用 transform/opacity）
  - 行為仍由 script.js 的 data-open-checkout 處理
*/
.btn-primary.pay-hover {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateZ(0);
  will-change: transform, box-shadow;
  transition: transform 180ms ease, box-shadow 220ms ease, border-color 180ms ease;
}

.btn-primary.pay-hover:hover {
  /* 用更具體的 :hover 覆寫全站 .btn:hover 的落影/位移習慣，避免和你要的效果打架 */
  background: var(--cream);
  filter: none;
  transform: translateY(-1px);
}

.btn-primary.pay-hover--glow:hover {
  border-color: rgba(230, 0, 18, 0.6);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.55) inset,
    0 0 0 1px rgba(230, 0, 18, 0.22),
    0 0 0 10px rgba(230, 0, 18, 0.12),
    0 0 34px rgba(230, 0, 18, 0.32);
}

.btn-primary.pay-hover--dot {
  /* 右側要留空間放小圓點，避免和文字相碰 */
  padding-right: 34px;
}
.btn-primary.pay-hover--dot.btn-lg {
  padding-right: 42px;
}

.btn-primary.pay-hover--dot:hover {
  /* 你特別要求：小圓點回饋「不要陰影」 */
  box-shadow: none;
  border-color: rgba(230, 0, 18, 0.6);
  /* 這套回饋的重點是「小圓點變大」，不要額外往上浮（避免跟 glow 版手感混雜） */
  transform: none;
}

.btn-primary.pay-hover--dot::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  z-index: 1;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  /* 用標準紅當顏色來源，預設用很低的可見度，hover 再拉到 100% */
  background: var(--red);
  transform: translate3d(0, -50%, 0) scale(0.75);
  opacity: 0.12;
  /* 你要的「緩出」手感：一開始變化快、最後慢慢收斂（用 cubic-bezier 更絲滑） */
  transition:
    transform 360ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 320ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none; /* 避免遮住點按 */
}

.btn-primary.pay-hover--dot:hover::after {
  transform: translate3d(0, -50%, 0) scale(1.55);
  opacity: 1;
}

/*
  Hero「秒速下單」：重構成「容器 + 右側小點 div」
  - 容器：relative + overflow hidden，底色維持米色、字維持紅色
  - 小點：預設淡紅（小點），按下後用 transform: scale(n) 擴散填滿整顆圓角按鈕
  - n 由 JS 依按鈕寬高動態計算寫入 --hero-dot-scale，確保圓一定能蓋滿長方形
*/
.btn-primary.pay-hover--dot.hero-pay-tap {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* 預設縮放倍率（JS 會覆寫成更精準的值） */
  --hero-dot-scale: 60;
}

/* 這顆按鈕用「真實小點」當擴散源，不要再顯示 pay-hover--dot 原本的 ::after */
.btn-primary.pay-hover--dot.hero-pay-tap::after {
  display: none;
}

/* 擴散圓點（The Dot） */
.btn-primary.pay-hover--dot.hero-pay-tap .hero-pay-tap__dot {
  position: absolute;
  right: 19px; /* 依你的需求：再往左 3px（累計往左 5px） */
  top: 50%;
  z-index: 0;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--red);
  opacity: 0.18; /* 預設淡紅小點 */
  transform: translate3d(0, -50%, 0) scale(1);
  transform-origin: center;
  will-change: transform, opacity;
  /* 擴散用 ease-out，視覺更絲滑 */
  transition: transform 0.42s ease-out, opacity 0.2s ease-out;
  pointer-events: none; /* 避免擋到點按 */
}

/* 按下：小點擴散鋪滿 */
.btn-primary.pay-hover--dot.hero-pay-tap:active .hero-pay-tap__dot,
.btn-primary.pay-hover--dot.hero-pay-tap.is-pressed .hero-pay-tap__dot,
.btn-primary.pay-hover--dot.hero-pay-tap.is-pressed:hover .hero-pay-tap__dot {
  opacity: 1;
  transform: translate3d(0, -50%, 0) scale(var(--hero-dot-scale));
}

/* 文字在最上層，顏色平滑切換 */
.btn-primary.pay-hover--dot.hero-pay-tap .hero-pay-tap__text {
  position: relative;
  z-index: 2;
  transition: color 0.38s ease;
}

.btn-primary.pay-hover--dot.hero-pay-tap:active,
.btn-primary.pay-hover--dot.hero-pay-tap.is-pressed,
.btn-primary.pay-hover--dot.hero-pay-tap.is-pressed:hover {
  /* 背景仍是米色，但被擴散小點覆蓋成紅底；字改米色 */
  color: var(--cream) !important;
  border-color: rgba(244, 228, 215, 0.45) !important;
  box-shadow: none;
  transform: none;
}

/* 桌機：游標移上去就先全紅（只在真的有 hover 的裝置啟用，避免手機黏住 hover） */
@media (hover: hover) and (pointer: fine) {
  .btn-primary.pay-hover--dot.hero-pay-tap:hover .hero-pay-tap__dot {
    opacity: 1;
    transform: translate3d(0, -50%, 0) scale(var(--hero-dot-scale));
  }
  .btn-primary.pay-hover--dot.hero-pay-tap:hover {
    color: var(--cream);
    border-color: rgba(244, 228, 215, 0.45);
    box-shadow: none;
    transform: none;
  }
}

.btn-primary.pay-hover--dot.hero-pay-tap:active::after,
.btn-primary.pay-hover--dot.hero-pay-tap.is-pressed::after,
.btn-primary.pay-hover--dot.hero-pay-tap.is-pressed:hover::after {
  /* 已 display:none；保留 selector 以免舊規則殘留時干擾 */
}

/* Hero：建立堆疊脈絡，避免與他區在少數情況下層序錯亂；不影響兩欄文字排版 */
.hero {
  position: relative;
  z-index: 0;
  padding: 54px 0 28px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
}
/* 手機：主文案 → 商品圖 → 早鳥（閱讀順序自然） */
.hero-copy {
  order: 1;
}
.hero-showcase {
  order: 2;
}
.hero-earlybird {
  order: 3;
}
.badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(244, 228, 215, 0.12);
  border: 1px solid rgba(244, 228, 215, 0.22);
  color: var(--muted);
  font-weight: 800;
  font-size: 13px;
}

/* 僅螢幕閱讀器可見（跑馬燈完整訊息） */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 小工具：把一小段文字鎖在同一行，避免斷行把「排隊，」拆出去 */
.nowrap {
  white-space: nowrap;
}

/*
  首屏：店內電視牆風格 LED 跑馬燈
  - 寬度由 JS 依主標題字串（同字級、單行寬度）寫入 --hero-led-w
  - 高度約一行中文字：小字＋內距，外框模擬黑色邊框
*/
.hero-led {
  width: min(100%, var(--hero-led-w, 100%));
  max-width: 100%;
  margin: 0 0 12px;
  --led-fg: #f0f4f0;
}
.hero-led__bezel {
  padding: 4px;
  background: linear-gradient(180deg, #1c1c1c, #060606);
  border-radius: 2px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}
.hero-led__screen {
  position: relative;
  background: #000;
  border-radius: 1px;
  overflow: hidden;
}
.hero-led__vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse 120% 90% at 50% 45%, transparent 35%, rgba(0, 0, 0, 0.65) 100%);
}
.hero-led__grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.11;
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 3px);
}
.hero-led__mask {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* 上略少、下略多＋ flex 置中，讓字不會黏在條子頂端 */
  padding: 4px 8px 5px;
  min-height: 1.35em;
  font-size: 12px;
  line-height: 1.35;
}
.hero-led__track {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: none;
  white-space: nowrap;
  will-change: transform;
  /* 先提速 20%（÷1.2），再提速 30%（÷1.3）＝週期 55s÷1.56 */
  animation: hero-led-marquee calc(55s / 1.2 / 1.3) linear infinite;
  /* 與 keyframe 合併，避免只寫在這裡被動畫蓋掉；再略往下 2px */
  margin-top: 4px;
}
@keyframes hero-led-marquee {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-led__track {
    animation: none;
    display: flex;
    justify-content: center;
    width: 100% !important;
    max-width: 100%;
  }
  .hero-led__chunk + .hero-led__chunk {
    display: none;
  }
  .hero-led__mask {
    text-align: center;
  }
}
.hero-led__chunk {
  display: inline-block;
  flex: 0 0 auto;
  padding-right: 2.5em;
  /* 與內文同：LINE Seed Rg、常規字重（非粗體） */
  font-family:
    "LINESeedTW-Rg",
    "PingFang TC",
    "Noto Sans TC",
    "Microsoft JhengHei",
    sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--led-fg);
  /* 類 LED 光暈：略加一層，仍以筆畫清晰為主（不疊太多層以免糊） */
  text-shadow:
    0 0 1px rgba(255, 255, 255, 0.62),
    0 0 3px rgba(230, 255, 238, 0.28),
    0 0 8px rgba(200, 255, 220, 0.2),
    0 0 14px rgba(160, 240, 200, 0.12);
}

.hero-title {
  margin: 14px 0 8px;
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.4px;
}
.hero-title__line {
  display: inline;
}

/* 桌機原則：主標單行；小螢幕改由下方覆寫允許斷行（可讀性） */
@media (min-width: 820px) {
  .hero-title,
  .hero-title__line {
    white-space: nowrap;
  }
  .hero-title {
    /* 在限寬左欄內盡量維持單行不溢出；必要時字級微收 */
    font-size: clamp(22px, 2.2vw + 0.9rem, 52px);
  }
}
.hero-subtitle {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  /* 你指定：第一句要盡量同一行呈現，因此不要用偏窄的字元寬上限去強迫換行 */
  max-width: none;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.hero-points {
  margin: 18px 0 0;
  padding-left: 18px;
  color: var(--faint);
}
.hero-points li {
  margin: 6px 0;
}

.card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.72));
  border: 1px solid rgba(26, 20, 16, 0.12);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}
.card-title {
  margin: 0;
  font-size: 18px;
}
.card-desc {
  margin: 8px 0 0;
  color: var(--muted);
}
.card-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
}
.kpi {
  background: rgba(26, 20, 16, 0.04);
  border: 1px solid rgba(26, 20, 16, 0.1);
  border-radius: 16px;
  padding: 12px;
}
.kpi-num {
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
}
.kpi-text {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}
.card-actions {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.card-note {
  margin: 14px 0 0;
  color: var(--faint);
  font-size: 13px;
}

/* 倒數計時（早鳥優惠） */
.countdown {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.cd-item {
  border-radius: var(--radius-sm);
  border: 1px solid rgba(26, 20, 16, 0.1);
  background: rgba(244, 228, 215, 0.55);
  padding: 10px 8px;
  text-align: center;
}

.cd-num {
  font-family:
    "LINESeedTW-Bd",
    "LINESeedTW-Eb",
    "LINESeedTW-Rg",
    ui-sans-serif,
    system-ui,
    -apple-system,
    "PingFang TC",
    "Noto Sans TC",
    "Microsoft JhengHei",
    sans-serif;
  font-weight: 900;
  font-size: 22px;
  line-height: 1.1;
}

.cd-label {
  margin-top: 6px;
  color: rgba(26, 20, 16, 0.7);
  font-weight: 800;
  font-size: 12px;
}

.cd-meta {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cd-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(26, 20, 16, 0.12);
  background: rgba(26, 20, 16, 0.03);
  color: rgba(26, 20, 16, 0.86);
  font-weight: 900;
  font-size: 12px;
}

/*
  首屏右欄：動畫舞台
  - z-index 高於紅色底與 .hero-earlybird
  - 桌機：圖欄在「文案欄寬之後」立刻接續，不靠 fr 比把主標和圖分很遠（改由 .hero-grid 第一欄限寬）
*/
.hero-showcase {
  position: relative;
  z-index: 3; /* 高於 .hero-earlybird(1) 與全頁紅底 */
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  justify-self: stretch; /* 吃滿第二欄，圖在欄內可放大、貼近主文 */
  max-width: none;
}

/*
  視窗外層：桌機時撐滿左欄（主標＋早鳥）的垂直高度，讓主圖大致等於主標到倒數標題的區段。
  手機則保留適度下方留白，避免圖太貼下一區塊。
*/
.hero-showcase__viewport {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding-bottom: clamp(24px, 6vw, 48px);
  overflow: visible;
  height: 100%;
  display: flex;
  align-items: center;
  min-height: 220px;
}

@media (min-width: 820px) {
  .hero-showcase__viewport {
    max-width: none;
    margin: 0;
    padding-bottom: 0;
    min-height: 0;
    flex: 1 1 auto; /* 與左欄兩行等高，圖從主標到早鳥區的視覺帶寬度 */
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch; /* 讓 stage 能吃到欄的完整高度，避免 absolute 子層在父高 0 裡不畫圖 */
  }
  .hero-showcase__stage {
    flex: 1 1 auto; /* 撐滿與主標＋早鳥左欄等高的格線 */
    min-height: 0; /* 讓 flex 不溢出，與下一段 .hero-showcase__stage 的 min-height:240 合併生效 */
  }
  .hero-showcase__img {
    /* 參考稿：杯高約佔首屏可視帶 7～8 成；寬度跟右欄走、高度用 max-height 封頂 */
    max-width: min(100%, 520px);
    max-height: min(78vh, 820px);
  }
}

.hero-showcase__stage {
  /* 參考框：內層圖＋光暈用 absolute 疊圖，避免在巢狀 flex 裡被當成「沒內容」導致高度 0、圖不顯示 */
  position: relative;
  z-index: 0;
  width: 100%;
  flex: 1 1 auto;
  min-height: 240px;
  /* 與高欄並排時不鎖 16:9，改由父層高度決定，圖用 contain 置中 */
  aspect-ratio: auto;
  /* 依你的需求：不做「容器感」——讓圖片直接貼在紅底上 */
  border-radius: 18px;
  border: 0;
  background: transparent;
  /* 與裁切版二選一：要 vibe「穿出框」就 visible，溢出高度改由 .hero-showcase__viewport 預留 */
  overflow: visible;
  isolation: isolate;
}

/*
  咖啡杯＋卡：鋪滿 .hero-showcase__stage（同 absolute 的參考框用 flex 的父層高），
  內層用 flex 置中；勿用 relative+flex 參與行高導致與上層格線衝突。
*/
.hero-showcase__float {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center; /* 手機全寬一欄時置中；桌機在下方斷點改 flex-start 貼主標 */
  padding: 8px 12px;
  box-sizing: border-box;
  pointer-events: none; /* 避免透明區擋到左欄在窄螢幕的點按；圖上另開啟 */
  animation: hero-showcase-float 5.5s ease-in-out infinite;
}

.hero-showcase__img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  max-height: min(70vh, 640px);
  object-fit: contain;
  margin: 0;
  pointer-events: auto;
  filter: drop-shadow(0 20px 38px rgba(0, 0, 0, 0.26));
  /* 以圖心為基準整體 1.25 倍；translateZ(0) 幫部分 WebKit 在父層有 transform 動畫時仍正確合成圖層 */
  transform: scale(1.25) translateZ(0);
  transform-origin: 50% 50%;
}

@keyframes hero-showcase-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* 首屏下方：早鳥倒數橫條（與右欄動畫分離，較好聚焦） */
.hero-earlybird {
  position: relative;
  z-index: 1; /* 保險：若日後又關掉裁切，仍優先疊在首屏動畫之上、可點可讀 */
  margin-top: 18px;
  padding-bottom: 8px;
}

.hero-earlybird__inner {
  /* 略窄；左緣與首屏 .hero-copy（含「立即付款」按鈕）對齊同一條垂直線 */
  max-width: 440px;
  margin-left: 0;
  margin-right: auto;
  border-radius: var(--radius);
  border: 1px solid rgba(244, 228, 215, 0.22);
  background: rgba(0, 0, 0, 0.12);
  padding: 14px 16px;
}

.hero-earlybird__head {
  margin-bottom: 10px;
}

.hero-earlybird__title {
  margin: 0;
  font-size: 16px;
  color: rgba(244, 228, 215, 0.95);
}

.hero-earlybird__desc {
  margin: 6px 0 0;
  font-size: 13px;
  color: rgba(244, 228, 215, 0.72);
}

.hero-earlybird .countdown {
  margin-top: 0;
}

.hero-earlybird__meta {
  /* 讓兩行資訊 pills 和下方 CTA 的分界更明確一點（外光暈需要更多呼吸空間） */
  margin-top: 12px;
}

.hero-earlybird__actions {
  /* 外光暈會向上擴散：垂直距離要比一般「文字到按鈕」更大，才不會在視覺上貼到 pills */
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

/* 尊重使用者的「減少動態」偏好 */
@media (prefers-reduced-motion: reduce) {
  .hero-showcase__stage {
    transition: none;
  }
  .hero-showcase__float {
    animation: none;
  }
  .hero-showcase__img {
    transform: none;
  }
  .btn-primary.pay-hover,
  .btn-primary.pay-hover::after {
    transition: none;
  }
  .btn-primary.pay-hover:hover {
    transform: none; /* 減少動態：不要「浮起」 */
  }
  .btn-primary.pay-hover--dot:hover::after {
    /* 不播放漸變：直接顯示放大後的狀態 */
    background: var(--red);
    transform: translate3d(0, -50%, 0) scale(1.55);
    opacity: 1;
  }
  .btn-primary.pay-hover--dot.hero-pay-tap .hero-pay-tap__dot,
  .btn-primary.pay-hover--dot.hero-pay-tap .hero-pay-tap__text {
    transition: none;
  }
  .btn-primary.pay-hover--dot.hero-pay-tap:active .hero-pay-tap__dot,
  .btn-primary.pay-hover--dot.hero-pay-tap.is-pressed .hero-pay-tap__dot {
    transform: translate3d(0, -50%, 0) scale(var(--hero-dot-scale));
    opacity: 1;
  }

  /* 減少動態：typing 不閃、不輪播（由 JS 直接跳過）；游標也不閃 */
  .typing::after {
    animation: none;
    opacity: 0;
  }
}

/* Sections */
.section {
  padding: 44px 0;
}

/* 顧客觀點：導覽跳轉要「更乾脆」→ 減少上方留白，避免看起來像上一段還留邊 */
#reviews.section {
  padding-top: 22px;
}
.section-alt {
  /*
    讓整頁「一路滑順」的小技巧：
    - 不用硬邊框去切段（會出現你說的區塊線）
    - 改用非常淡的底色差，讓分區存在但不突兀
  */
  background: rgba(255, 255, 255, 0.18);
  border-top: 0;
  border-bottom: 0;
}
.section-head {
  margin-bottom: 18px;
}
.section-title {
  margin: 0;
  font-size: 24px;
  letter-spacing: -0.2px;
}
.section-desc {
  margin: 8px 0 0;
  color: var(--muted);
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 16px;
}
.feature {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(26, 20, 16, 0.1);
  border-radius: var(--radius);
  padding: 16px;
}
.feature-title {
  margin: 0;
  font-size: 16px;
}
.feature-desc {
  margin: 8px 0 0;
  color: var(--muted);
}

/* Plans（單一方案：展示區，而不是比較卡片） */
.plan-single {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 16px;
}

.plan-main {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(26, 20, 16, 0.1);
  border-radius: var(--radius);
  padding: 18px;
}

.plan-head {
  display: grid;
  gap: 10px;
}

.plan-pill {
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(230, 0, 18, 0.1);
  border: 1px solid rgba(230, 0, 18, 0.18);
  color: rgba(230, 0, 18, 0.95);
  font-weight: 900;
  font-size: 12px;
}

.plan-name {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.2px;
}

.plan-desc {
  margin: 0;
  color: var(--muted);
}

.plan-block {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed rgba(26, 20, 16, 0.14);
}

.plan-block-title {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.2px;
}

.plan-bullets {
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--muted);
}
.plan-bullets li {
  margin: 8px 0;
}

.plan-chips {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(26, 20, 16, 0.12);
  background: rgba(26, 20, 16, 0.03);
  color: rgba(26, 20, 16, 0.86);
  font-weight: 900;
  font-size: 12px;
}

.plan-mini-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.mini {
  padding: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(26, 20, 16, 0.1);
  background: rgba(244, 228, 215, 0.55);
}

.mini-title {
  font-weight: 900;
  font-size: 14px;
  line-height: 1.35;
}
.mini-desc {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.plan-side-card {
  border-radius: var(--radius);
  border: 1px solid rgba(26, 20, 16, 0.12);
  background:
    radial-gradient(680px 180px at 15% 0%, rgba(230, 0, 18, 0.12), transparent 60%),
    rgba(255, 255, 255, 0.78);
  box-shadow: var(--shadow);
  padding: 16px;
}

.plan-side-row {
  display: grid;
  gap: 8px;
}

.plan-side-label {
  color: var(--muted);
  font-weight: 900;
  font-size: 13px;
}

.plan-side-price {
  font-weight: 900;
  /* 字級交給新價（1990）當主角，其他（NT$ / 原價 / 單位）維持小字 */
  font-size: 16px;
  letter-spacing: -0.1px;
  display: flex;
  /* 你指定：全部「向下」對齊（字體大小不同也要底部對齊） */
  align-items: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.plan-currency {
  color: rgba(0, 0, 0, 0.52);
  display: inline-flex;
  align-items: flex-end;
  line-height: 1;
}

.plan-old-price {
  /* 你指定：2400 縮小 4px */
  font-size: 12px;
  font-weight: 900;
  color: rgba(0, 0, 0, 0.58);
  opacity: 1;
  /* 你指定：不要膠囊/灰底，避免視覺歪斜 */
  background: transparent;
  padding: 0;
  border-radius: 0;
  /* 2400 與 1990 行距（左右距離）只留 1-2px */
  margin-right: 2px;
  display: inline-flex;
  align-items: flex-end;
  line-height: 1;
  transform: translateY(-0.5px);
}
.plan-old-price del {
  text-decoration-thickness: 3px;
  /* 參考圖概念：灰字＋紅色槓線 */
  text-decoration-color: var(--red);
  display: inline-block;
  line-height: 1;
}
.plan-new-price {
  color: var(--red);
  font-size: 34px; /* 大字主角 */
  letter-spacing: -0.3px;
  /* 以 NT$ 底部為基準對齊 */
  display: inline-flex;
  align-items: flex-end;
  line-height: 1;
  /* 你指定：與 /30 天 一起向下約 2px */
  transform: translateY(2px);
}

.plan-unit {
  font-size: 14px;
  font-weight: 900;
  color: rgba(0, 0, 0, 0.52);
  /* 以 NT$ 底部為基準對齊 */
  display: inline-flex;
  align-items: flex-end;
  line-height: 1;
  /* 你指定：整體向下 2px 後，再把「／30 天」往上 1px（等於 +1px） */
  transform: translateY(1px);
}

.plan-side-cta {
  width: 100%;
  margin-top: 14px;
}

.plan-side-trust {
  margin-top: 14px;
  display: grid;
  gap: 10px;
}

.trust-item {
  border-radius: var(--radius-sm);
  border: 1px solid rgba(26, 20, 16, 0.1);
  background: rgba(244, 228, 215, 0.55);
  padding: 12px;
}

.trust-title {
  font-weight: 900;
}

.trust-cta {
  margin-top: 10px;
  width: 100%;
}

.plan-side-note {
  margin: 12px 0 0;
  color: var(--faint);
  font-size: 13px;
}

/*
  方案區易讀性（兩色基準：紅 #e60012、米 #f4e4d7）
  先前 .plan-desc / .plan-bullets 等用了 var(--muted)，那是「寫在紅底上」的米白字色；
  在淺色/米白卡上會變成淺底淺字。這裡改回：卡上內文一律以品牌紅顯示，層次用不透明度表現，不另偷加色。
*/
#plans .section-head .section-title {
  color: var(--text);
}
#plans .section-head .section-desc {
  color: var(--muted);
}

#plans .plan-main,
#plans .plan-side-card,
#plans .plan-side-trust .trust-item,
#plans .plan-mini-grid .mini {
  background: var(--cream);
  color: var(--red);
  border-color: rgba(230, 0, 18, 0.2);
}
#plans .plan-name,
#plans .plan-block-title,
#plans .mini-title,
#plans .trust-title,
#plans .plan-side-price {
  color: var(--red);
}

/* 價格行：新價紅、舊價灰底、單位灰（避免整行都被 #plans .plan-side-price 蓋成紅色） */
#plans .plan-currency,
#plans .plan-unit {
  color: rgba(0,  0, 0, 0.52);
}
#plans .plan-old-price {
  color: rgba(0, 0, 0, 0.58);
}
#plans .plan-new-price {
  color: var(--red);
}
#plans .plan-pill {
  color: var(--red);
  background: rgba(230, 0, 18, 0.1);
  border-color: rgba(230, 0, 18, 0.28);
}
#plans .plan-desc,
#plans .plan-bullets,
#plans .plan-bullets li,
#plans .mini-desc,
#plans .plan-side-label,
#plans .plan-unit,
#plans .plan-side-note {
  color: var(--red);
  opacity: 0.9;
}
#plans .plan-side-note {
  opacity: 0.86;
  font-size: 13px;
}
#plans .plan-side-cta.btn-primary {
  /* 小卡內 CTA 維持：米白底＋紅字（同全站主按鈕） */
  background: var(--cream);
  color: var(--red);
  border-color: rgba(230, 0, 18, 0.3);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.06);
}
#plans .trust-cta {
  color: var(--red);
  background: rgba(230, 0, 18, 0.05);
  border: 1px solid rgba(230, 0, 18, 0.3);
}
#plans .plan-chips .chip {
  color: var(--red);
  background: rgba(230, 0, 18, 0.05);
  border: 1px solid rgba(230, 0, 18, 0.2);
}
#plans .plan-block {
  border-top-color: rgba(230, 0, 18, 0.18);
}

/*
  其餘內容區：與 #plans 同一套「紅底標題＋米白底紅字卡」
  避免淺色卡上仍用 var(--muted)（寫給紅底用的米白字）導致淺底淺字。
*/
#how .section-head .section-title,
#reviews .section-head .section-title,
#coffee .section-head .section-title,
#ta .section-head .section-title,
#faq .section-head .section-title {
  color: var(--text);
}
#how .section-head .section-desc,
#reviews .section-head .section-desc,
#coffee .section-head .section-desc,
#ta .section-head .section-desc,
#faq .section-head .section-desc {
  color: var(--muted);
}

/* 怎麼用 */
#how .step {
  background: var(--cream);
  color: var(--red);
  border: 1px solid rgba(230, 0, 18, 0.2);
}
#how .step-num {
  /* 兩色基準：不另外用漸層近色 */
  color: var(--cream);
  background: var(--red);
}
#how .step-title {
  color: var(--red);
}
#how .step-desc {
  color: var(--red);
  opacity: 0.9;
}
#how .step-desc strong {
  opacity: 1;
}

/* Google 評價 */
#reviews .review-card {
  background: var(--cream);
  color: var(--red);
  border: 1px solid rgba(230, 0, 18, 0.2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
#reviews .review-title,
#reviews .review-meta,
#reviews .review-desc,
#reviews .review-text {
  color: var(--red);
  opacity: 0.9;
}
#reviews .review-title,
#reviews .review-meta {
  opacity: 1;
}
#reviews .stars {
  color: var(--red);
  opacity: 0.9;
}
#reviews .btn-ghost {
  color: var(--red);
  background: rgba(230, 0, 18, 0.05);
  border: 1px solid rgba(230, 0, 18, 0.3);
}

/* 咖啡豆 */
#coffee .coffee {
  background: var(--cream);
  color: var(--red);
  border: 1px solid rgba(230, 0, 18, 0.2);
}
#coffee .coffee-title {
  color: var(--red);
}
#coffee .coffee-desc {
  color: var(--red);
  opacity: 0.9;
}
#coffee .coffee-desc strong {
  opacity: 1;
}
#coffee .coffee-tags li {
  color: var(--red);
  background: rgba(230, 0, 18, 0.05);
  border: 1px solid rgba(230, 0, 18, 0.2);
}

/* 適合誰 */
#ta .feature {
  background: var(--cream);
  color: var(--red);
  border: 1px solid rgba(230, 0, 18, 0.2);
}
#ta .feature-title {
  color: var(--red);
}
#ta .feature-desc {
  color: var(--red);
  opacity: 0.9;
}

/* FAQ */
#faq .qa {
  background: var(--cream);
  color: var(--red);
  border: 1px solid rgba(230, 0, 18, 0.2);
}
#faq .qa-q {
  color: var(--red);
}
#faq .qa-a {
  color: var(--red);
  opacity: 0.9;
}
#faq .qa-a p {
  color: inherit;
}

/* 底部導購 CTA 條（有 .cta 的區段） */
main > section:has(> .container > .cta) .cta {
  /* 同方案小卡：米白面＋紅字，拿掉多層疊在淺底上的紅霧 */
  background: var(--cream);
  border: 1px solid rgba(230, 0, 18, 0.2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
main > section:has(> .container > .cta) .cta-title {
  color: var(--red);
}
main > section:has(> .container > .cta) .cta-desc {
  color: var(--red);
  opacity: 0.9;
}
main > section:has(> .container > .cta) .btn-ghost {
  color: var(--red);
  background: rgba(230, 0, 18, 0.05);
  border: 1px solid rgba(230, 0, 18, 0.3);
}

/* 首屏早鳥＋倒數：改為與方案相同的米白底＋紅色資訊（在紅底上仍清楚） */
.hero-earlybird__inner {
  border: 1px solid rgba(230, 0, 18, 0.2);
  background: var(--cream);
}
.hero-earlybird__title,
.hero-earlybird__desc {
  color: var(--red);
}
.hero-earlybird__desc {
  opacity: 0.88;
}
.countdown .cd-item {
  border: 1px solid rgba(230, 0, 18, 0.2);
  background: rgba(230, 0, 18, 0.05);
}
.countdown .cd-num {
  color: var(--red);
}
.countdown .cd-label {
  color: var(--red);
  opacity: 0.85;
}
.countdown .cd-pill {
  color: var(--red);
  background: rgba(230, 0, 18, 0.05);
  border: 1px solid rgba(230, 0, 18, 0.2);
}

/* Coffee */
.coffee-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 16px;
}
.coffee {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(26, 20, 16, 0.1);
  border-radius: var(--radius);
  padding: 16px;
}
.coffee-title {
  margin: 0;
  font-size: 16px;
}
.coffee-desc {
  margin: 8px 0 0;
  color: var(--muted);
}
.coffee-tags {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.coffee-tags li {
  font-size: 12px;
  font-weight: 800;
  color: rgba(26, 20, 16, 0.82);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(26, 20, 16, 0.12);
  background: rgba(26, 20, 16, 0.03);
}

/* FAQ */
.faq {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 16px;
}
.qa {
  border-radius: var(--radius);
  border: 1px solid rgba(26, 20, 16, 0.1);
  background: rgba(255, 255, 255, 0.75);
  padding: 10px 12px;
}
.qa-q {
  cursor: pointer;
  font-weight: 900;
  color: rgba(26, 20, 16, 0.9);
  list-style: none;
}
.qa-q::-webkit-details-marker {
  display: none;
}
.qa-a {
  margin-top: 10px;
  color: var(--muted);
}
.qa-a p {
  margin: 0;
}

/* CTA */
.cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid rgba(26, 20, 16, 0.12);
  background:
    radial-gradient(620px 180px at 10% 0%, rgba(230, 0, 18, 0.16), transparent 60%),
    radial-gradient(580px 170px at 90% 0%, rgba(230, 0, 18, 0.08), transparent 60%),
    rgba(255, 255, 255, 0.78);
}
.cta-title {
  margin: 0;
  font-size: 22px;
}
.typing {
  display: inline-block;
  position: relative;
  padding-right: 10px; /* 讓游標不貼字 */
}
.typing::after {
  content: "";
  position: absolute;
  right: 0;
  top: 12%;
  bottom: 12%;
  width: 2px;
  border-radius: 2px;
  background: currentColor; /* 文字是紅就紅、是米就米 */
  animation: typing-caret 0.9s step-end infinite;
  opacity: 0.9;
}

@keyframes typing-caret {
  0%,
  49% {
    opacity: 0.9;
  }
  50%,
  100% {
    opacity: 0;
  }
}
.cta-desc {
  margin: 8px 0 0;
  color: var(--muted);
}
.cta-actions {
  display: flex;
  /* 同 header：避免 glow 在「立即付款」與右側次 CTA 並排時互撞 */
  gap: 18px;
  flex-wrap: wrap;
}

/* Footer：紅底上維持米白字層級（與全站兩色策略一致） */
.site-footer {
  padding: 22px 0 34px;
  color: var(--faint);
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(244, 228, 215, 0.2);
  padding-top: 18px;
}
.footer-brand {
  color: var(--text);
  font-weight: 900;
}
.footer-note {
  margin-top: 6px;
  font-size: 13px;
}
.footer-right {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.footer-link {
  color: var(--faint);
  padding: 8px 10px;
  border-radius: 12px;
}
.footer-link:hover {
  color: var(--text);
  background: rgba(244, 228, 215, 0.12);
}
.as-button {
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
}

/* Steps（怎麼用） */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 16px;
}
.step {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(26, 20, 16, 0.1);
  border-radius: var(--radius);
  padding: 16px;
}
.step-num {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 900;
  color: var(--cream);
  background: var(--red);
}
.step-title {
  margin: 12px 0 0;
  font-size: 16px;
}
.step-desc {
  margin: 8px 0 0;
  color: var(--muted);
}

/* 怎麼用：備註小字（例如第一次到店領卡） */
.step-desc .note {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
  opacity: 0.85;
}

/* Reviews（Google 評價） */
.review-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid rgba(26, 20, 16, 0.1);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 10px 30px rgba(16, 12, 10, 0.08);
}
.review-title {
  font-weight: 900;
  font-size: 16px;
}
.review-meta {
  margin-top: 8px;
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font-weight: 800;
}
.stars {
  position: relative;
  display: inline-block;
  letter-spacing: 1px;
  line-height: 1;
}

/* 以「底層淡星 + 上層填滿」做 4.5 顆星（不需要外部圖示） */
.stars::before {
  content: "★★★★★";
  color: rgba(230, 0, 18, 0.22);
}
.stars::after {
  content: "★★★★★";
  position: absolute;
  left: 0;
  top: 0;
  width: var(--star-fill, 100%);
  overflow: hidden;
  color: rgba(230, 0, 18, 0.92);
}
.stars--45 {
  --star-fill: 90%;
}

.review-rating {
  color: rgba(230, 0, 18, 0.92);
  font-weight: 900;
}
.review-desc {
  margin: 10px 0 0;
  color: var(--muted);
  max-width: 70ch;
}
.review-right {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* -------------------------
   顧客觀點：會動的評論牆（跑馬燈）
   - 兩段相同內容：CSS 以 translateX(-50%) 做無接縫循環
   - 尊重 prefers-reduced-motion：動態變靜態（避免讓人頭暈）
   ------------------------- */
.review-hero {
  /* 復原：左右兩欄同一行（左資訊、右按鈕） */
  display: flex;
  align-items: center; /* 你要的「往下」：讓按鈕群組不要偏上，視覺上更置中 */
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(26, 20, 16, 0.1);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.review-hero__left {
  min-width: min(100%, 52ch);
}

.review-hero__right {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
}

.review-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  opacity: 0.9;
}

.review-wall {
  /* 讓跑馬燈的動畫周期可被 JS 寫入（避免太快/太慢） */
  --review-marquee-sec: 40s;
  --review-bubble-w: 280px;
  position: relative;
  margin-top: 14px;
  padding: 2px 0 6px;
}

.review-wall__mask {
  position: relative;
  overflow: hidden;
  /*
    你不喜歡「漸層過渡」：
    - 這裡改回乾淨硬邊，不做任何 fade/mask
    - 用兩側安全內距避免卡片貼邊，看起來就不會粗糙
  */
  padding: 0 14px;
  /*
    你要的「遮罩感」是：進出視窗本身變窄（左右各內收 20px）
    - 這樣評論牆會和上面的匡做出明確差別，看起來更乾脆
    - 不是把線移進來，而是「可視範圍」本身縮進來
  */
  clip-path: inset(0 30px);
}

/* 你要的是「乾脆的切」：只用 clip-path 裁切，不加任何縱線/裝飾 */
.review-wall__mask::before,
.review-wall__mask::after {
  display: none;
}

.review-wall__fade {
  /* 舊版：用整塊漸層覆蓋（容易產生「髒邊/壓字」的體感）。保留節點以不破版，但實作改由 mask 收邊。 */
  display: none;
}

.review-wall__track {
  position: relative;
  z-index: 0;
  display: flex;
  width: max-content;
  gap: 10px;
  will-change: transform;
  /* 速度用 JS 寫入 --review-marquee-sec */
  animation: review-wall-marquee var(--review-marquee-sec) linear infinite;
  transform: translate3d(0, 0, 0);
}

/* 滑到評論牆上先暫停，方便閱讀（不影響可點擊的按鈕區，因為在外層） */
.review-wall:hover .review-wall__track,
.review-wall:focus-within .review-wall__track {
  animation-play-state: paused;
}

.review-wall__chunk {
  display: flex;
  gap: 10px;
  padding-right: 10px; /* 讓兩段之間也有呼吸感 */
  flex: 0 0 auto;
}

.review-bubble {
  width: var(--review-bubble-w);
  max-width: min(72vw, var(--review-bubble-w));
  margin: 0;
  padding: 12px 12px 10px;
  border-radius: 16px;
  border: 1px solid rgba(230, 0, 18, 0.2);
  background: var(--cream);
  color: var(--red);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.review-bubble__q {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  font-weight: 800;
}

.review-bubble__a {
  margin: 8px 0 0;
  color: var(--red);
  opacity: 0.8;
  font-size: 12px;
  font-weight: 900;
}

@media (min-width: 720px) {
  .review-wall {
    --review-bubble-w: 320px;
  }
}

@media (min-width: 1024px) {
  .review-wall {
    --review-bubble-w: 360px;
  }
}

@keyframes review-wall-marquee {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

/* 如果使用者已開啟減少動態：不播放跑馬燈，改成可讀的橫向排版 */
@media (prefers-reduced-motion: reduce) {
  .review-wall__track {
    animation: none;
    width: 100% !important;
    max-width: 100%;
    flex-wrap: wrap;
    white-space: normal;
    row-gap: 10px;
  }
  .review-wall__chunk + .review-wall__chunk {
    display: none; /* 第二段只用來接縫，減少動態時不顯示 */
  }
}

/* 紅色閱讀面：讓新元件沿用 #reviews 的米白＋紅字策略 */
#reviews .review-title,
#reviews .review-meta,
#reviews .review-text,
#reviews .review-note {
  color: var(--red);
}
#reviews .review-hero,
#reviews .review-bubble {
  background: var(--cream);
  color: var(--red);
  border-color: rgba(230, 0, 18, 0.2);
}
#reviews .review-hero {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border-color: rgba(230, 0, 18, 0.2);
}
#reviews .review-bubble__a {
  color: var(--red);
  opacity: 0.86;
}

/* RWD */
@media (min-width: 820px) {
  .nav {
    display: inline-flex;
  }
  .hero-grid {
    /*
      關鍵：第一欄用「內文合理寬」上限，勿用超大 fr 把兩欄中線推向螢幕右側
      第二欄 1fr 從主文右緣之後就開始 → 圖與主標變成鄰接感（如同你參考圖右側）
    */
    /* 左欄加寬一點：讓 Hero 副標第一句更容易同一行呈現 */
    grid-template-columns: minmax(320px, min(56%, 640px)) minmax(220px, 1fr);
    grid-template-rows: auto auto;
    gap: 22px 20px;
    align-items: stretch;
  }
  /* 讓主文案＋早鳥都落在限寬第一欄內，右側不會在欄內出現一大條紅帶 */
  .hero-copy,
  .hero-earlybird {
    max-width: 100%;
  }
  .hero-copy {
    grid-column: 1;
    grid-row: 1;
    order: unset;
  }
  .hero-earlybird {
    grid-column: 1;
    grid-row: 2;
    order: unset;
    width: 100%;
    max-width: 100%;
    margin-top: 0; /* 與主稿間距改由 .hero-grid 的 row-gap 控制 */
  }
  .hero-showcase {
    grid-column: 2;
    grid-row: 1 / span 2;
    order: unset;
    align-self: stretch;
    position: relative;
    z-index: 3;
    min-height: min(50vh, 420px);
    min-width: 0;
    display: flex;
    flex-direction: column;
  }
  .hero-showcase__float {
    /* 圖在第二欄內微左偏即可；太寬的 padding 會在窄欄上把圖整張推出可視右側、像不見一樣 */
    justify-content: flex-start;
    align-items: center;
    padding: 8px 0 8px clamp(12px, 4vw, 56px);
  }
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .plan-single {
    grid-template-columns: 1.25fr 0.75fr;
    align-items: start;
  }
  .plan-side {
    position: sticky;
    top: 86px;
  }
  .plan-mini-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .coffee-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* -------------------------
   手機版（獨立頁）專用樣式
   重要：全部都用 .mobile 範圍限制，確保桌機版不會被影響
   ------------------------- */
.mobile {
  /* 底部有 Sticky CTA，必須預留空間，避免擋到最後一段內容 */
  --m-sticky-h: 76px;
  padding-bottom: calc(var(--m-sticky-h) + 18px);
}

/* 手機版 header：保留品牌 + 2 個 CTA，縮小間距避免擠爆 */
.mobile .mobile-header .header-inner {
  gap: 10px;
}
.mobile .mobile-header .header-actions {
  gap: 10px;
}
.mobile .mobile-header .btn {
  padding: 10px 14px;
  font-size: 14px;
}

/* 手機版 section 節奏：比桌機更「拆」，上下留白更穩 */
.mobile .m-section.section,
.mobile .section.m-section {
  padding: 56px 0;
}

/* 手機版 Hero */
.mobile .m-hero {
  padding: 26px 0 24px;
}
.mobile .m-hero-inner {
  display: grid;
  gap: 14px;
}
.mobile .m-kicker {
  margin: 0;
  display: inline-flex;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(244, 228, 215, 0.12);
  border: 1px solid rgba(244, 228, 215, 0.22);
  color: var(--muted);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.2px;
}
.mobile .m-title {
  margin: 0;
  font-family:
    "LINESeedTW-Bd",
    "LINESeedTW-Eb",
    "LINESeedTW-Rg",
    ui-sans-serif,
    system-ui,
    -apple-system,
    "PingFang TC",
    "Noto Sans TC",
    "Microsoft JhengHei",
    sans-serif;
  font-size: clamp(32px, 7.2vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.3px;
  color: var(--text);
}
.mobile .m-subtitle {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

.mobile .m-hero-media {
  margin-top: 4px;
  display: grid;
  place-items: center;
}
.mobile .m-hero-img {
  width: min(92%, 420px);
  height: auto;
  max-height: min(54vh, 520px);
  object-fit: contain;
  filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.22));
  transform: translateZ(0) scale(1.06);
}

.mobile .m-cta {
  display: grid;
  gap: 10px;
  margin-top: 2px;
}
.mobile .m-cta .btn {
  width: 100%;
  min-height: 52px; /* 手指操作：點擊高度要夠 */
}

.mobile .m-points {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--faint);
}
.mobile .m-points li {
  margin: 8px 0;
}
.mobile .m-points strong {
  color: var(--text);
}

/* 手機版 早鳥小卡（放在首屏下方） */
.mobile .m-early {
  margin-top: 8px;
  border-radius: var(--radius);
  border: 1px solid rgba(230, 0, 18, 0.2);
  background: var(--cream);
  padding: 14px;
  color: var(--red);
}
.mobile .m-early-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.mobile .m-early-title {
  font-weight: 900;
  font-size: 14px;
}
.mobile .m-early-desc {
  margin-top: 6px;
  font-size: 13px;
  opacity: 0.9;
}
.mobile .m-early-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(230, 0, 18, 0.22);
  background: rgba(230, 0, 18, 0.06);
  color: var(--red);
  font-weight: 900;
  font-size: 12px;
}

/* 手機版痛點區 */
.mobile .m-pain {
  border-radius: var(--radius);
  border: 1px solid rgba(244, 228, 215, 0.22);
  background: rgba(0, 0, 0, 0.12);
  padding: 16px;
  color: var(--text);
}
.mobile .m-pain-lead {
  margin: 0;
  font-weight: 900;
  letter-spacing: -0.1px;
}
.mobile .m-pain-list {
  margin: 12px 0 0;
  padding-left: 18px;
  color: rgba(244, 228, 215, 0.86);
}
.mobile .m-pain-list li {
  margin: 8px 0;
}
.mobile .m-solution {
  margin: 12px 0 0;
  color: var(--text);
  font-weight: 900;
}

/* 手機版亮點卡片 */
.mobile .m-feature-grid {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}
.mobile .m-feature {
  border-radius: var(--radius);
  border: 1px solid rgba(230, 0, 18, 0.2);
  background: var(--cream);
  padding: 16px;
  color: var(--red);
}
.mobile .m-feature-icon {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--red);
  color: var(--cream);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.4px;
}
.mobile .m-feature-title {
  margin: 12px 0 0;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: -0.1px;
}
.mobile .m-feature-desc {
  margin: 8px 0 0;
  opacity: 0.9;
  line-height: 1.6;
}

/* 章節中的「中段 CTA」：手機端用滿版按鈕，更像下一步 */
.mobile .m-inline-cta {
  margin-top: 16px;
  display: grid;
  gap: 10px;
}
.mobile .m-inline-cta .btn {
  width: 100%;
  min-height: 52px;
}

/* 手機版 3 步驟：一條條列出，避免桌機卡片感太重 */
.mobile .m-steps {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.mobile .m-step {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: start;
  border-radius: var(--radius);
  border: 1px solid rgba(230, 0, 18, 0.2);
  background: var(--cream);
  padding: 14px 14px 14px 12px;
  color: var(--red);
}
.mobile .m-step-num {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--red);
  color: var(--cream);
  font-weight: 900;
}
.mobile .m-step-title {
  font-weight: 900;
}
.mobile .m-step-desc {
  margin-top: 6px;
  opacity: 0.9;
  font-size: 14px;
  line-height: 1.55;
}

/* 手機版評價 */
.mobile .m-review-top {
  margin-top: 10px;
  display: grid;
  gap: 10px;
  align-items: start;
}
.mobile .m-review-score {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  border: 1px solid rgba(230, 0, 18, 0.2);
  background: var(--cream);
  padding: 10px 12px;
  color: var(--red);
  font-weight: 900;
}
.mobile .m-review-score-text {
  opacity: 0.9;
  font-size: 14px;
}
.mobile .m-review-cards {
  margin-top: 14px;
  display: grid;
  gap: 10px;
}
.mobile .m-review {
  margin: 0;
  border-radius: 16px;
  border: 1px solid rgba(230, 0, 18, 0.2);
  background: var(--cream);
  padding: 14px;
  color: var(--red);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}
.mobile .m-review-q {
  margin: 0;
  font-weight: 900;
  font-size: 14px;
  line-height: 1.6;
}
.mobile .m-review-a {
  margin-top: 10px;
  opacity: 0.82;
  font-weight: 900;
  font-size: 12px;
}

/* 手機版方案大卡 */
.mobile .m-plan {
  border-radius: var(--radius);
  border: 1px solid rgba(230, 0, 18, 0.2);
  background: var(--cream);
  padding: 16px;
  color: var(--red);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.1);
}
.mobile .m-plan-pill {
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(230, 0, 18, 0.08);
  border: 1px solid rgba(230, 0, 18, 0.22);
  color: var(--red);
  font-weight: 900;
  font-size: 12px;
}
.mobile .m-plan-name {
  margin-top: 10px;
  font-family:
    "LINESeedTW-Eb",
    "LINESeedTW-Rg",
    ui-sans-serif,
    system-ui,
    -apple-system,
    "PingFang TC",
    "Noto Sans TC",
    "Microsoft JhengHei",
    sans-serif;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -0.1px;
}
.mobile .m-plan-price {
  margin-top: 10px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  letter-spacing: -0.1px;
}
.mobile .m-plan-old {
  color: rgba(0, 0, 0, 0.56);
  font-weight: 900;
  font-size: 12px;
}
.mobile .m-plan-old del {
  text-decoration-thickness: 3px;
  text-decoration-color: var(--red);
}
.mobile .m-plan-new {
  font-weight: 900;
  font-size: 38px;
  line-height: 1;
  color: var(--red);
}
.mobile .m-plan-unit {
  color: rgba(0, 0, 0, 0.52);
  font-weight: 900;
  font-size: 14px;
  transform: translateY(2px);
}
.mobile .m-plan-bullets {
  margin: 14px 0 0;
  padding-left: 18px;
  opacity: 0.92;
}
.mobile .m-plan-bullets li {
  margin: 10px 0;
  line-height: 1.55;
}
.mobile .m-plan-cta {
  margin-top: 14px;
  width: 100%;
  min-height: 54px;
}
.mobile .m-plan-note {
  margin: 12px 0 0;
  opacity: 0.85;
  font-size: 13px;
}

/* 手機版咖啡豆：三條短句 */
.mobile .m-coffee {
  margin-top: 14px;
  display: grid;
  gap: 10px;
}
.mobile .m-coffee-item {
  border-radius: var(--radius);
  border: 1px solid rgba(230, 0, 18, 0.2);
  background: var(--cream);
  padding: 14px;
  color: var(--red);
}
.mobile .m-coffee-title {
  font-weight: 900;
}
.mobile .m-coffee-desc {
  margin-top: 6px;
  opacity: 0.9;
  line-height: 1.55;
}

/* 最後導購 */
.mobile .m-final {
  border-radius: var(--radius);
  border: 1px solid rgba(230, 0, 18, 0.2);
  background: var(--cream);
  padding: 16px;
  color: var(--red);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.09);
}
.mobile .m-final-title {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.2px;
}
.mobile .m-final-desc {
  margin: 10px 0 0;
  opacity: 0.9;
  line-height: 1.6;
}
.mobile .m-final-actions {
  margin-top: 14px;
  display: grid;
  gap: 10px;
}
.mobile .m-final-actions .btn {
  width: 100%;
  min-height: 52px;
}

/* Sticky CTA（手機端底部固定） */
.mobile .m-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  height: var(--m-sticky-h);
  padding: 10px 12px max(10px, env(safe-area-inset-bottom));
  background: rgba(230, 0, 18, 0.82);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(244, 228, 215, 0.18);
}
.mobile .m-sticky-inner {
  width: min(var(--max), calc(100% - 0px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 10px;
  align-items: center;
}
.mobile .m-sticky .btn {
  min-height: 52px;
  font-size: 15px;
}
.mobile .m-sticky-pay {
  width: 100%;
}
.mobile .m-sticky-more {
  width: 100%;
}

/* 手機版 footer：底部有 sticky，所以 footer 下方不要太長 */
.mobile .mobile-footer {
  padding-bottom: calc(var(--m-sticky-h) + 22px);
}