/* EarBook 視覺系統
 *
 * 依 Canva 設計稿還原。所有顏色集中在 :root，校準時只改這一區。
 * 目前色值是從設計稿截圖判讀的「暫定值」，拿到原始 PNG 後會逐點取樣校正。
 */

:root {
  /* ---- 色彩：從 design-refs/canva/landing.png 逐點取樣 ---- */
  --ink:        #ca652b;   /* 淺底上的標題（跟按鈕底色同一支橘） */
  --ink-soft:   #000000;   /* 淺底上的內文 */
  --ink-faint:  #8a8db3;   /* 註解、次要資訊 */

  --violet-900: #2f366c;   /* 深色區塊頂 */
  --violet-800: #303370;   /* 主視覺最深處 */
  --violet-700: #ca652b;   /* 按鈕 */
  /* 變數名還停在紫色時代（--violet-700 其實已經是橘的）。改名要動整份
     樣式表與八頁 HTML，所以先給一個名副其實的別名，新規則一律用這個。 */
  --accent:     #ca652b;
  --violet-600: #4f5dad;   /* 深色區塊底 */
  --violet-300: #8a8db3;   /* 主視覺底緣 */
  --periwinkle: #a2a3e4;   /* 頁尾亮部 */
  --lilac:      #cab7ca;   /* 主視覺粉紫亮部 */
  --blush:      #e0c8c6;

  --paper:      #fafafa;   /* 淺色區塊底 */
  --white:      #ffffff;

  /* 深色區塊上的文字 */
  --on-dark:        #ffffff;
  --on-dark-soft:   rgba(255, 255, 255, .78);
  --on-dark-faint:  rgba(255, 255, 255, .55);

  /* ---- 版面 ---- */
  --maxw: 1080px;
  --gutter: 24px;
  --radius: 20px;
  --radius-pill: 999px;

  /* ---- 字體 ----
   * 設計稿的字體名稱還沒拿到，中文先用系統 CJK 黑體、英文標題先用襯線系統字。
   * 拿到名稱後改成自架 webfont（PWA 要離線，不能吃 CDN；中文字型需子集化）。 */
  --font-cjk: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei",
              -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: Georgia, "Times New Roman", "Songti TC", "Noto Serif TC", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--font-cjk);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* --------------------------------------------------------------- 頁首 */
/* 設計稿沒有導覽列，只有置中的品牌名 */
.brandbar {
  padding: 26px 0 0;
  text-align: center;
  position: relative;
  z-index: 2;
}
.brandbar a {
  color: var(--on-dark);
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .16em;
}
.brandbar--onlight a { color: var(--ink); }

/* --------------------------------------------------------- 頁首導覽 */
/*
 * 品牌**絕對置中**（不是 flex 置中）：右邊的連結長度會變（有沒有 aria-current、
 * 中英字寬不同），用 space-between 的話品牌會跟著左右飄。絕對定位讓它永遠對齊
 * 頁面中線，右邊的連結愛多長就多長。
 */
@view-transition { navigation: auto; }

.topnav {
  position: relative;
  isolation: isolate;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  min-height: 34px;
}
.topnav__brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: .16em !important;
  text-decoration: none;
  color: var(--ink) !important;
  white-space: nowrap;
}
.hero .topnav__brand { color: var(--on-dark) !important; }
/* 滑塊直接長在「目前這一頁」那個連結身上（::before），**不用 JS 量位置**。
 *
 * 量位置那條路試過並且放棄了：版面寬度定案的時間比想像中晚（字體還在載、
 * 視窗還在調整），量到的是過渡中的數字，滑塊就停在錯的地方。
 * 偽元素貼著文字長，字多寬滑塊就多寬，改文案也不用回來改。
 *
 * `view-transition-name` 在每一頁都叫 navthumb，所以跨頁時瀏覽器會把它
 * 從舊位置補間到新位置——多頁網站的連續滑動感就是這樣來的。
 */
/* 只有右邊的連結需要改成 relative 讓滑塊貼著它長。
   **品牌不能動**——它是絕對定位置中的，一旦被改成 relative 就會掉回文字流，
   首頁的 EARBOOK 會從正中間跳到右邊那排去。 */
.topnav__links a[aria-current="page"] { position: relative; }
.topnav a[aria-current="page"]::before {
  content: "";
  position: absolute;
  inset: -7px -14px;
  z-index: -1;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, .055);
  view-transition-name: navthumb;
}
.hero .topnav a[aria-current="page"]::before { background: rgba(255, 255, 255, .18); }

.topnav__links { display: flex; gap: 20px; }
.topnav__links a {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  color: #8a8a99 !important;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease;
}
.topnav__links a:hover,
.topnav__links a[aria-current="page"] { color: var(--ink) !important; }
.hero .topnav__links a { color: var(--on-dark-faint) !important; }
.hero .topnav__links a:hover,
.hero .topnav__links a[aria-current="page"] { color: var(--on-dark) !important; }

@media (max-width: 560px) {
  /* 窄螢幕：品牌讓位到左邊，連結靠右——擠在同一行還硬要置中會疊字 */
  .topnav { justify-content: space-between; }
  .topnav__brand { position: static; transform: none; }
  .topnav__links { gap: 14px; }
  .topnav__links a { font-size: 12px !important; }
}

/* 跨頁轉場。
 *
 * 頁首不動、滑塊自己滑過去，**只有內容區往左右滑**——這才像切分頁。
 * 預設的整頁淡入淡出看起來只是「換頁」，因為兩頁內容不一樣、長度也不一樣。
 * 方向由 nav.js 依「從哪一格到哪一格」寫進 <html data-vt>。
 */
.subhead, .hero { view-transition-name: pagehead; }
.pageview { view-transition-name: pagebody; }

/* 頁首整條不做動畫，維持釘住的感覺 */
::view-transition-old(pagehead), ::view-transition-new(pagehead) { animation: none; }

@keyframes vtOutLeft  { to { transform: translateX(-4%); opacity: 0; } }
@keyframes vtInRight  { from { transform: translateX(4%); opacity: 0; } }
@keyframes vtOutRight { to { transform: translateX(4%); opacity: 0; } }
@keyframes vtInLeft   { from { transform: translateX(-4%); opacity: 0; } }

html[data-vt="left"]::view-transition-old(pagebody) {
  animation: vtOutLeft .24s cubic-bezier(.4, 0, 1, 1) both;
}
html[data-vt="left"]::view-transition-new(pagebody) {
  animation: vtInRight .30s cubic-bezier(0, 0, .2, 1) both;
}
html[data-vt="right"]::view-transition-old(pagebody) {
  animation: vtOutRight .24s cubic-bezier(.4, 0, 1, 1) both;
}
html[data-vt="right"]::view-transition-new(pagebody) {
  animation: vtInLeft .30s cubic-bezier(0, 0, .2, 1) both;
}
/* 不是在切換鈕之間移動（例如從常見問題過來）就單純淡一下 */
::view-transition-old(pagebody), ::view-transition-new(pagebody) {
  animation-duration: .22s;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation: none !important;
  }
}

/* --------------------------------------------------- 內頁（非首頁）版型 */
/*
 * 價格與專屬音色頁刻意**不套主視覺與底圖**：那張圖是首頁的第一印象，
 * 內頁的人是來看內容的，再鋪一次整屏的圖只是擋路。
 * 這裡是乾淨的淺色版型，自己一套。
 */
/* 內頁頁首。**淺色**，標題用跟法務頁（常見問題）同一組顏色——
   同樣層級的頁面用同一種樣子，使用者才不會覺得跑到別的網站。 */
.subhead { background: var(--paper); padding-bottom: 8px; }
.subhead--bare { padding-bottom: 0; }
.subhead .brandbar { padding-top: 22px; }
.subhead__title {
  text-align: center;
  padding: 34px var(--gutter) 0;
}
.subhead__title h1 {
  color: var(--ink);
  font-size: clamp(30px, 5vw, 42px);
  line-height: 1.25;
  margin: 0 0 6px;
}
.subhead__title p {
  color: var(--ink-faint);
  font-size: 13px;
  margin: 0;
}

.subpage { padding: 56px 0 72px; background: var(--paper); }
.subpage .wrap { max-width: 860px; }
.subpage section + section { margin-top: 44px; }
.subpage h2 {
  font-size: clamp(20px, 3vw, 26px);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.subpage h3 { color: var(--ink-soft); font-size: 16px; margin: 22px 0 8px; }
.subpage .fine { color: #6b6b7a; }

/* 內頁的方案卡：淺底、有邊框，不用深色區塊那一套 */
.plancards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  margin: 24px 0 8px;
}
.plancard {
  position: relative;
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, .10);
  border-radius: 16px;
  padding: 24px 20px;
  text-align: center;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.plancard:hover {
  border-color: var(--ink);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .07);
  transform: translateY(-2px);
}
.plancard--featured { border-color: var(--ink); border-width: 2px; }

/* 可點選的方案（價格頁）。hover 已經有回饋了，選到的那張要更明確——
   只加粗邊框不夠，兩張並排時分不出來，所以再加一層外圈。 */
.plancard[data-plan], .buyrow .buy-item[data-plan] { cursor: pointer; }
.plancard[data-plan]:focus-visible, .buy-item[data-plan]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* 選到的只用邊框與外圈表示，不加文字——加了「✓ 已選」會把卡片撐高，
   一排卡片高度不齊看起來像壞掉。 */
.plancard.picked, .buyrow .buy-item.picked {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(202, 101, 43, .18);
}
.plancard .credits { font-size: 14px; color: #6b6b7a; margin-bottom: 6px; }
.plancard .amount {
  font-size: 30px; font-weight: 700; color: var(--ink);
  line-height: 1.2; margin-bottom: 6px;
}
.plancard .note { font-size: 12.5px; color: #6b6b7a; margin: 0 0 4px; }
.plancard .per { font-size: 12.5px; color: #8a8a99; margin: 0; }
.plancard .badge {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff;
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  padding: 3px 12px; border-radius: 999px; white-space: nowrap;
}

.buyrow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin: 20px 0 8px;
}
.buyrow .buy-item {
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, .10);
  border-radius: 12px;
  padding: 16px 10px;
  text-align: center;
  transition: border-color .2s ease;
}
.buyrow .buy-item:hover { border-color: var(--ink); }
/* 後面深色區塊那組 `.buy-item .b-amt { color: white }` 分數一樣但排在後面，
   會贏。多加一層 .subpage 提高分數，否則白卡上是白字，整排看不見。 */
.subpage .buyrow .b-amt { font-size: 19px; font-weight: 700; color: var(--ink); }
.subpage .buyrow .b-cr { font-size: 13px; color: #6b6b7a; margin-top: 2px; }

.subpage .callout {
  margin: 18px 0;
  padding: 16px 20px;
  border-left: 3px solid var(--ink);
  background: rgba(202, 101, 43, .06);
  border-radius: 0 10px 10px 0;
  line-height: 1.95;
}

/* --------------------------------------------------------------- 區塊 */
.band { padding: 88px 0; }
.band--paper { background: var(--paper); }
.band--deep {
  /* 彩色底圖 + 輕暗遮罩，讓白色標題與價格卡在鮮豔背景上仍可讀 */
  background-color: var(--violet-800);
  background-image: linear-gradient(rgba(20, 18, 45, .42), rgba(20, 18, 45, .42)), url("./img/band-deep.jpg");
  background-size: cover;
  background-position: center;
  color: var(--on-dark);
}
.band--deep h2, .band--deep h3 { color: var(--on-dark); }
.band--deep p { color: var(--on-dark-soft); }

/* --------------------------------------------------------------- 主視覺 */
.hero {
  position: relative;
  min-height: 82vh;
  display: flex;
  flex-direction: column;
  color: var(--on-dark);
  isolation: isolate;               /* 讓 difference 只跟 hero 內部混合 */
  /* 圖載入前的佔位底色。取自主視覺圖的平均色，
     所以圖載入前後幾乎無縫，白色標題在這半秒內也讀得到。
     （原本是深紫藍 #2b2b6f，會在首次載入時閃一下深色。） */
  background-color: #f38958;
  background-image: url("./img/hero-mobile.jpg");
  background-size: cover;
  background-position: center;
}
@media (min-width: 641px) {
  .hero { background-image: url("./img/hero-desktop.jpg"); }
}

/* 標題用白字＋陰影（反相色留給試聽面板就好，標題用反相顯得廉價）。 */
.hero h1 {
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .42), 0 0 4px rgba(0, 0, 0, .35);
}
.hero__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 40px var(--gutter) 72px;
}
.hero h1 {
  font-size: clamp(44px, 9vw, 92px);
  line-height: 1.14;
  font-weight: 700;
  letter-spacing: .04em;
  margin: 0 0 28px;
  color: var(--white);
}
.hero p.lede {
  color: #fff;
  font-size: clamp(15px, 2vw, 18px);
  max-width: 34ch;
  margin: 0 0 36px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .5), 0 0 3px rgba(0, 0, 0, .4);
}
.hero .brandbar a { text-shadow: 0 1px 10px rgba(0, 0, 0, .45); }
.hero .btn--ghost {
  border-color: rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .14);
  backdrop-filter: blur(4px);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .4);
}
.hero .scrollcue {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--on-dark-faint);
  font-size: 20px;
  line-height: 1;
  animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }
@media (prefers-reduced-motion: reduce) { .hero .scrollcue { animation: none; } }

/* --------------------------------------------------------------- 文字 */
h1, h2, h3 { color: var(--ink); font-weight: 700; letter-spacing: .02em; }
h2 { font-size: clamp(26px, 4vw, 38px); line-height: 1.32; margin: 0 0 20px; }
h3 { font-size: 18px; line-height: 1.6; margin: 0 0 10px; }
h2.serif, h1.serif { font-family: var(--font-serif); font-weight: 400; letter-spacing: 0; }

p { margin: 0 0 16px; }
.lede { font-size: 17px; }
.fine { font-size: 13px; color: var(--ink-faint); line-height: 1.8; }
.band--deep .fine { color: var(--on-dark-faint); }
a { color: var(--violet-700); }
.band--deep a { color: var(--white); }

ul, ol { margin: 0 0 16px; padding-left: 1.4em; }
li { margin-bottom: 8px; }

/* --------------------------------------------------------------- 按鈕 */
.btn {
  display: inline-block;
  background: var(--violet-700);
  color: var(--white);
  padding: 13px 30px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
  border: 1px solid transparent;
  transition: background .18s ease, transform .18s ease;
}
/* hover 一律「換色不換形」：底色與字色對調，邊框補上原本的底色，
   所以按鈕的尺寸與位置在 hover 前後完全一樣，只有顏色翻過來。
   三種按鈕各自的翻法（2026-08-17 站長指定）：

     橘底白字      → 白底橘字 ＋ 橘框
     白底橘字      → 橘底白字 ＋ 白框
     透明底白框白字 → 白底橘字

   最後一種原本要求「白底透明字」，但透明字在白底上等於看不見，
   改成橘字——那是這一套唯一的重點色，讀得到又不換色系。 */

/* 一、橘底白字（預設） */
.btn:hover {
  background: var(--white);
  color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-1px);
}

/* 二、白底橘字：深色區塊與主視覺裡的實心按鈕 */
.band--deep .btn,
.hero .btn:not(.btn--ghost) { background: var(--white); color: var(--accent); }
.band--deep .btn:hover,
.hero .btn:not(.btn--ghost):hover {
  background: var(--accent);
  color: var(--white);
  border-color: var(--white);
}

/* 三、透明底白框白字 */
.btn--ghost { background: transparent; border-color: currentColor; color: var(--accent); }
.band--deep .btn--ghost,
.hero .btn--ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.85); }
.btn--ghost:hover,
.band--deep .btn--ghost:hover,
.hero .btn--ghost:hover {
  background: var(--white);
  color: var(--accent);
  border-color: var(--white);
  transform: translateY(-1px);
}
.btnrow { display: flex; gap: 12px; flex-wrap: wrap; }
.hero .btnrow { justify-content: center; }

/* --------------------------------------------------------------- 圖文並排 */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.split--flip .split__text { order: 2; }
.split__text > :last-child { margin-bottom: 0; }
.split__text .btnrow { margin-top: 28px; }

/* 音色試聽面板：亂流漸層 + 顆粒雜訊，點擊播放對應音色。 */
.visual {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  border: 0;
  padding: 0;
  width: 100%;
  cursor: pointer;
  display: grid;
  place-items: center;
  isolation: isolate;
  font: inherit;
  color: var(--white);
  background-color: var(--violet-700);       /* 圖載入前的底色 */
  background-image: url("./img/panel-cool.jpg");
  background-size: cover;
  background-position: center;
  transition: transform .3s ease, box-shadow .3s ease;
}
.visual--warm { background-image: url("./img/panel-warm.jpg"); }

/* 波形用反相色，在任何底色上都保證可讀 */
.visual__wave {
  position: relative;
  z-index: 2;
  width: 42%;
  height: auto;
  mix-blend-mode: difference;
}
.visual__wave g, .visual__wave rect { fill: #fff; }
.visual__wave rect { transform-box: fill-box; transform-origin: center; }

/* 播放提示 */
.visual__hint {
  position: absolute;
  z-index: 3;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .32);
  backdrop-filter: blur(6px);
  font-size: 12px;
  letter-spacing: .05em;
  white-space: nowrap;
  transition: background .2s ease, opacity .2s ease;
}
.visual:hover .visual__hint,
.visual:focus-visible .visual__hint { background: rgba(255, 255, 255, .3); }
.visual:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(47, 54, 108, .28); }
.visual:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

/* 播放中：波形跟著動 */
.visual.is-playing .visual__wave rect { animation: bars 1.1s ease-in-out infinite; }
.visual.is-playing .visual__wave rect:nth-child(2) { animation-delay: .12s; }
.visual.is-playing .visual__wave rect:nth-child(3) { animation-delay: .24s; }
.visual.is-playing .visual__wave rect:nth-child(4) { animation-delay: .36s; }
.visual.is-playing .visual__wave rect:nth-child(5) { animation-delay: .48s; }
.visual.is-playing .visual__wave rect:nth-child(6) { animation-delay: .6s; }
@keyframes bars {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(1.55); }
}
@media (prefers-reduced-motion: reduce) {
  .visual.is-playing .visual__wave rect { animation: none; }
  .visual:hover { transform: none; }
}

/* --------------------------------------------------------------- 卡片 */
.cards {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.card {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius);
  padding: 26px 24px;
}
.band--paper .card {
  background: var(--white);
  border-color: rgba(43, 43, 111, .1);
  box-shadow: 0 2px 20px rgba(43, 43, 111, .05);
}
.card > :last-child { margin-bottom: 0; }

/* 兩個試聽面板並排 */
.audition-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 720px;
  margin: 40px auto 0;
}
@media (max-width: 620px) {
  .audition-pair { grid-template-columns: 1fr; max-width: 340px; gap: 20px; }
}

/* 單次購買的小卡列 */
.buy-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 20px;
}
.buy-item {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  padding: 14px 12px;
  text-align: center;
}
.buy-item .b-amt { font-size: 17px; font-weight: 700; color: var(--white); font-variant-numeric: tabular-nums; }
.buy-item .b-cr { font-size: 12px; color: var(--on-dark-faint); margin-top: 3px; }

.plan-badge {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .1em;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .28);
  margin-bottom: 12px;
}
.plan--featured { outline: 2px solid rgba(255, 255, 255, .5); outline-offset: -1px; }
.plan .per { font-size: 12px; color: var(--on-dark-faint); margin-top: 8px; }

/* CTA 收尾區 */
/* 收尾行動呼籲：刻意不用底圖。這一塊緊接著頁尾，底圖跟頁尾的深色接在一起
   會出現一道突兀的分界，改成淺底讓視線平順地收到頁尾。
   因為底變淺了，文字與按鈕要從 .band--deep 的白色系覆寫回深色系。 */
.cta { text-align: center; }
.cta h2 { margin-bottom: 12px; }
.cta p { max-width: 44ch; margin-inline: auto; }

.band--deep.cta {
  background-image: none;
  background-color: var(--paper);
  color: var(--ink-soft);
}
.band--deep.cta h2, .band--deep.cta h3 { color: var(--ink); }
.band--deep.cta p { color: var(--ink-soft); }
.band--deep.cta .fine { color: var(--ink-faint); }
.band--deep.cta a { color: var(--violet-700); }
/* CTA 區塊雖然掛 band--deep，實際是淺底，所以按鈕是橘底白字那一種，
   hover 要跟著第一條規則翻成白底橘字（原本翻成 --violet-600 那支舊紫色）。 */
.band--deep.cta .btn { background: var(--accent); color: var(--white); }
.band--deep.cta .btn:hover {
  background: var(--white);
  color: var(--accent);
  border-color: var(--accent);
}

/* 價格卡 */
.plan { text-align: center; }
.plan .credits { font-size: 15px; letter-spacing: .04em; margin-bottom: 6px; }
.plan .amount {
  font-family: var(--font-serif);
  font-size: 40px;
  line-height: 1.1;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--on-dark);
  margin: 6px 0 10px;
}
.plan .note { font-size: 13px; color: var(--on-dark-faint); margin: 0; }

/* --------------------------------------------------------------- 法務頁 */
.legal { padding: 64px 0 88px; }
.legal h1 { font-size: clamp(30px, 5vw, 42px); margin: 0 0 6px; }
.legal .updated { color: var(--ink-faint); font-size: 13px; margin-bottom: 40px; }
.legal h2 { font-size: 21px; margin: 44px 0 14px; }
.callout {
  background: var(--white);
  border-left: 3px solid var(--violet-700);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 20px 24px;
  margin: 26px 0;
  box-shadow: 0 2px 20px rgba(43, 43, 111, .05);
}
.callout > :last-child { margin-bottom: 0; }

table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 15px; }
th, td { text-align: left; padding: 13px 14px; border-bottom: 1px solid rgba(43,43,111,.12); vertical-align: top; }
th { color: var(--ink-faint); font-weight: 600; font-size: 13px; letter-spacing: .04em; }
.tablewrap { overflow-x: auto; }

/* --------------------------------------------------------------- 頁尾 */
.foot {
  background-color: var(--violet-700);
  background-image: linear-gradient(rgba(20, 18, 45, .4), rgba(20, 18, 45, .4)), url("./img/footer.jpg");
  background-size: cover;
  background-position: center;
  color: var(--on-dark-soft);
  text-align: center;
  padding: 56px 0 48px;
  font-size: 13px;
  line-height: 2;
}
.foot a { color: var(--on-dark-soft); text-decoration: none; }
.foot a:hover { color: var(--white); }
.foot nav { margin-top: 14px; display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.foot .biz { color: var(--on-dark-faint); margin-top: 18px; }

/* --------------------------------------------------------------- 響應式 */
@media (max-width: 820px) {
  .band { padding: 64px 0; }
  .split { grid-template-columns: 1fr; gap: 32px; }
  .split--flip .split__text { order: 0; }
  .visual { aspect-ratio: 16 / 10; }
  .visual svg { width: 28%; }
}
@media (max-width: 560px) {
  :root { --gutter: 20px; }
  .band { padding: 52px 0; }
  .hero { min-height: 84vh; }
  .legal { padding: 44px 0 64px; }
  .legal h2 { margin-top: 34px; }
}

/* --------------------------------------------------- 結帳前的承諾區塊 */
/*
 * 放在付款按鈕正上方。個人開發者最容易被懷疑的兩件事就是「偷資料去訓練」
 * 與「日後被追討版權」，這是在按下去之前把它們講清楚。
 *
 * **每一句都必須是真的**：商業授權寫進了服務條款、不訓練模型寫進了隱私權政策。
 * 承諾寫了做不到比不寫更糟。
 */
.promise {
  max-width: 620px;
  margin: 30px auto 0;
  padding: 18px 22px;
  background: #f2f9f3;
  border: 1px solid #cfe6d4;
  border-radius: 14px;
}
.promise p {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: #1f6b3a;
  line-height: 1.75;
}
.promise p:last-child { margin-bottom: 0; }
.promise__fine {
  font-size: 12.5px !important;
  font-weight: 400 !important;
  color: #4a6b55 !important;
  padding-top: 8px;
  border-top: 1px solid #d8ebdd;
}
.promise a { color: #1f6b3a; }

/* --------------------------------------------------- 首頁試聽滾輪 */
/*
 * iOS 計時器那種滾輪：沒有外框、沒有選中色塊，靠**位置**表示選了什麼——
 * 轉到中線的那一行就是選中的，其餘往上下淡出。轉停就播。
 *
 * 無限循環的做法：把清單重複五份，捲到頭尾附近時無聲地跳回中間那份。
 * 使用者感覺不到接縫，因為跳的距離剛好是一份的高度。
 *
 * 上下的漸層遮罩用 mask-image 而不是疊一層白色方塊——後者會蓋掉背景，
 * 這一區的背景色以後換了就會露餡。
 */
.picker {
  position: relative;
  display: grid;
  /* 左邊只放「女聲 1」四個字，其餘寬度全給句子——最長的句子 24 個字，
     欄位窄了就會被裁掉，而被裁掉的試聽等於沒有試聽。 */
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  /* 捲到才淡入。一進頁面就出現（甚至出聲）是最容易被關掉分頁的做法。 */
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s ease, transform .6s ease;
}
.picker--in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .picker { transition: none; }
}
.picker__wheel {
  /* 高度與上下留白都由這一個變數決定。留白要剛好是「半個視窗減半行」，
     第一項與最後一項才捲得到中線。
     **不要用 JS 算這個**——建構當下元素高度可能還沒定案（實測算成 176
     而不是 220），中線判定就整個偏掉。 */
  --wheel-h: 220px;
  --item-h: 44px;
  height: var(--wheel-h);
  padding-block: calc((var(--wheel-h) - var(--item-h)) / 2);
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  outline: none;
  /* 中線以外淡出。76px 是 (220 - 44*1.5) / 2 附近，剛好露出上下各一行半 */
  -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent);
          mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent);
}
.picker__wheel::-webkit-scrollbar { display: none; }
.picker__item {
  height: var(--item-h, 44px);
  display: flex;
  align-items: center;
  scroll-snap-align: center;
  font-size: 15px;
  line-height: 1.3;
  color: #b9b9c4;
  cursor: pointer;
  user-select: none;
  transition: color .18s ease, transform .18s ease, opacity .18s ease;
  opacity: .55;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.picker__wheel--voice .picker__item { justify-content: flex-end; padding-right: 16px; }
.picker__wheel--line  .picker__item {
  justify-content: flex-start;
  padding-left: 14px;
  padding-right: 6px;
}
/* 手機上句子放不下就降一級字，不要用 … 截斷——截掉的正是要給人聽的那句 */
@media (max-width: 620px) {
  .picker__wheel--line .picker__item { font-size: 13px; }
}
/* 選中的那一行：只放大與變色，不加底色方塊。
   **放大的原點要對準文字靠的那一邊**——預設 scale 從中心放大，
   靠右對齊的音色欄會往左溢出、靠左對齊的句子欄會往右溢出，
   而 overflow 是 hidden，溢出的部分就被裁掉了。 */
.picker__item[aria-selected="true"] {
  color: var(--ink-soft);
  opacity: 1;
  transform: scale(1.12);
  font-weight: 600;
}
.picker__wheel--voice .picker__item { transform-origin: right center; }
.picker__wheel--line  .picker__item { transform-origin: left center; }
.picker__wheel--voice .picker__item[aria-selected="true"] { color: var(--accent); }
/* 中線的兩條淡淡的參考線，指出「這裡是選中的位置」 */
.picker__bar {
  position: absolute;
  left: 10px; right: 10px;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
  border-top: 1px solid rgba(0, 0, 0, .07);
  border-bottom: 1px solid rgba(0, 0, 0, .07);
  pointer-events: none;
}
@media (max-width: 560px) {
  .picker { grid-template-columns: 84px minmax(0, 1fr); }
  .picker__wheel { --wheel-h: 176px; }
  .picker__item { font-size: 14px; }
}