:root {
  --bg: #0b0d12; --bg-raise: #11141c; --line: #232938;
  --ink: #e8eaf0; --ink-2: #9aa3b5; --ink-3: #586074;
  --voice: #0A84FF; --subtitle: #BF5AF2; --player: #FF453A;
  --accent: #5ac8fa; /* hero/連結/發光主色 */
  --accent-bright: #7ed8ff; /* accent hover 提亮 */
  --ink-on-accent: #07121b; /* accent 底上的文字色 */
  /* glow 色基（RGB triplet，供 rgba(var(--x), a) 用）：
     hero 背景暈光走深藍夜色（voice 藍），字幕條發光走 accent 青 */
  --hero-glow: 10, 132, 255;
  --accent-glow: 90, 200, 250;
  --subtitle-glow: 191, 90, 242; /* --subtitle 紫的 RGB triplet */
  --player-glow: 255, 69, 58; /* --player 紅的 RGB triplet（錄音點暈光） */
  --scrim-rgb: 8, 10, 15; /* 深色遮罩基色（播放器字幕底、陰影） */
  --glass: rgba(255,255,255,.06); --glass-line: rgba(255,255,255,.12);
  --radius: 14px; --maxw: 1080px;
}
html { color-scheme: dark; scroll-behavior: smooth; }
body { margin:0; background:var(--bg); color:var(--ink);
       font-family:'Noto Sans TC',system-ui,sans-serif; line-height:1.7; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }

/* ---- layout ---- */
.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 32px);
}

/* ---- hero ---- */
#hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-block: clamp(84px, 14vh, 150px) clamp(64px, 10vh, 110px);
  background:
    radial-gradient(1100px 560px at 50% -180px, rgba(var(--hero-glow), .17), transparent 70%),
    radial-gradient(640px 360px at 82% 4%, rgba(var(--accent-glow), .07), transparent 70%),
    var(--bg);
}

#hero .brand {
  margin: 0 0 18px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent);
}

#hero h1 {
  margin: 0;
  font-size: clamp(2.2rem, 6vw, 4rem);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

#hero .sub {
  margin: 18px 0 0;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  color: var(--ink-2);
}

/* ---- subtitle strip (mimics the product's floating subtitle overlay) ---- */
.subtitle-strip {
  max-width: 640px;
  margin: 44px auto 40px;
  padding: 16px 22px 18px;
  text-align: left;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 14px 36px -22px rgba(var(--accent-glow), .5),
    inset 0 1px 0 var(--glass);
}

.strip-tag {
  display: inline-block;
  margin-bottom: 8px;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .03em;
  color: var(--accent);
}

.strip-line {
  margin: 0;
  min-height: 1.75em;
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  font-weight: 500;
  line-height: 1.75;
}

.strip-translation {
  color: var(--ink-2);
  font-weight: 400;
}

/* typewriter states (shared by hero strip + scenario mockups): only applied
   while the JS animation is active (.tw-active on the loop root), so
   no-JS / reduced-motion users always see the full static pair */
.tw-active .tw-tr {
  opacity: 0;
  transition: opacity .45s cubic-bezier(0.23, 1, 0.32, 1);
}
.tw-active .tw-tr.is-shown { opacity: 1; }

.tw-active .tw-line.is-typing::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 3px;
  vertical-align: -0.15em;
  background: var(--caret, var(--accent));
  animation: caret-blink 1s steps(1, end) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }

@media (max-width: 480px) {
  /* reserve worst-case wrapped height so the CTA row doesn't bounce mid-type */
  .subtitle-strip { min-height: 182px; }
}

/* ---- CTA ---- */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 28px;
  border-radius: 999px;
  font-size: 1.02rem;
  font-weight: 700;
  text-decoration: none;
  transition:
    background-color .18s cubic-bezier(0.23, 1, 0.32, 1),
    border-color .18s cubic-bezier(0.23, 1, 0.32, 1),
    color .18s cubic-bezier(0.23, 1, 0.32, 1),
    transform .18s cubic-bezier(0.23, 1, 0.32, 1);
}
.btn:active { transform: scale(.97); }
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.btn-primary {
  background: var(--accent);
  color: var(--ink-on-accent);
}

.btn-ghost {
  border: 1px solid var(--line);
  color: var(--ink);
  background: transparent;
}

/* hover 只給真的有游標的裝置——觸控點擊後不留殘影 hover 態 */
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--accent-bright); }
  .btn-ghost:hover {
    border-color: var(--glass-line);
    background: var(--glass);
  }
}

#hero .fine {
  margin: 22px 0 0;
  font-size: .88rem;
  color: var(--ink-2);
}

/* ---- scenario sections (shared scaffold) ---- */
.scene {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(36px, 6vw, 72px);
  align-items: center;
}

.kicker {
  margin: 0 0 12px;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .1em;
}

.scene h2 {
  margin: 0;
  font-size: clamp(1.65rem, 3.8vw, 2.45rem);
  font-weight: 900;
  line-height: 1.28;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.scene-lead {
  margin: 16px 0 0;
  font-size: clamp(.98rem, 2vw, 1.08rem);
  line-height: 1.85;
  color: var(--ink-2);
  text-wrap: pretty;
}

@media (max-width: 840px) {
  .scene { grid-template-columns: 1fr; gap: 34px; }
}

/* 鏡像版（圖左文右）：桌面才翻；行動版維持「文上圖下」與情境 1 一致 */
@media (min-width: 841px) {
  .scene--flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .scene--flip .scene-copy { order: 2; }
}

/* ---- 情境 1：即時字幕 ---- */
#subtitle-demo { padding-block: clamp(76px, 12vh, 130px); }
#subtitle-demo .kicker { color: var(--subtitle); }

/* 16:9 player mockup：深色框 + LIVE 標 + 底部雙行字幕 + 假進度條 */
.player-mock {
  --caret: var(--subtitle);
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background:
    radial-gradient(90% 120% at 75% 0%, rgba(var(--subtitle-glow), .15), transparent 62%),
    radial-gradient(70% 90% at 12% 88%, rgba(var(--hero-glow), .10), transparent 60%),
    linear-gradient(160deg, var(--bg-raise), var(--bg));
  box-shadow:
    0 32px 70px -42px rgba(var(--scrim-rgb), 1),
    0 22px 60px -34px rgba(var(--subtitle-glow), .35);
}

.mock-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--ink);
  background: rgba(var(--scrim-rgb), .55);
  border: 1px solid var(--glass-line);
}

.mock-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--player);
}
@media (prefers-reduced-motion: no-preference) {
  .mock-dot,
  .vm-rec-dot { animation: live-pulse 2s cubic-bezier(0.23, 1, 0.32, 1) infinite; }
}
@keyframes live-pulse { 50% { opacity: .35; } }

.mock-sub {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px; /* 進度條上方 */
  padding: 56px 16px 16px;
  text-align: center;
  background: linear-gradient(rgba(var(--scrim-rgb), 0), rgba(var(--scrim-rgb), .72));
}

.mock-line {
  margin: 0;
  font-size: clamp(.8rem, 2vw, 1.02rem);
  font-weight: 500;
  line-height: 1.6;
  min-height: 1.6em; /* 打字中也撐住高度，循環不跳動 */
  text-shadow: 0 1px 8px rgba(var(--scrim-rgb), .9);
}

.mock-tr {
  color: var(--ink-2);
  font-weight: 400;
}

.mock-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--glass-line);
}
.mock-progress::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 46%; /* 「看到一半」 */
  background: var(--subtitle);
}

/* ---- 情境 2：語音輸入 ---- */
#voice-demo { padding-block: clamp(76px, 12vh, 130px); }
#voice-demo .kicker { color: var(--voice); }

/* 輸入框 mockup：Alt 鍵帽 + 錄音標 + 文字框，暈光走 voice 藍 */
.voice-mock {
  position: relative;
  padding: clamp(22px, 4vw, 32px);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background:
    radial-gradient(90% 130% at 22% 0%, rgba(var(--hero-glow), .13), transparent 62%),
    linear-gradient(160deg, var(--bg-raise), var(--bg));
  box-shadow:
    0 32px 70px -42px rgba(var(--scrim-rgb), 1),
    0 22px 60px -34px rgba(var(--hero-glow), .35);
}

.vm-keyrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 鍵帽：底緣 4px 陰影＝鍵程；按下時下沉 3px、陰影縮為 1px */
.vm-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 9px 18px;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink);
  border-radius: 10px;
  border: 1px solid var(--glass-line);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  box-shadow:
    0 4px 0 rgba(var(--scrim-rgb), .9),
    0 12px 20px -10px rgba(var(--scrim-rgb), .8),
    inset 0 1px 0 rgba(255,255,255,.10);
  transition:
    transform .09s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow .09s cubic-bezier(0.23, 1, 0.32, 1);
}
.vm-key.is-down {
  transform: translateY(3px);
  box-shadow:
    0 1px 0 rgba(var(--scrim-rgb), .9),
    0 5px 12px -8px rgba(var(--scrim-rgb), .8),
    inset 0 1px 0 rgba(255,255,255,.05);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}

/* 錄音標：預設隱藏（無 JS / reduced-motion 顯示靜態完成狀態），JS 錄音時淡入 */
.vm-rec {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .05em;
  color: var(--ink-2);
  opacity: 0;
}

.vm-rec-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--player);
  box-shadow: 0 0 10px rgba(var(--player-glow), .7);
}

.vm-box {
  position: relative;
  overflow: hidden;
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(var(--scrim-rgb), .45);
}

/* 清理瞬間的藍光一閃（JS 控 opacity） */
.vm-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(120deg, transparent 8%, rgba(var(--hero-glow), .3), transparent 92%);
}

/* 原始句與乾淨句疊同一格：高度恆為兩者較高者，循環不跳版面；
   預留兩行＝像個 textarea，原始句換行也不撐高 */
.vm-textwrap {
  display: grid;
  min-height: 3.6em;
}

.vm-text {
  grid-area: 1 / 1;
  margin: 0;
  font-size: clamp(.95rem, 2vw, 1.05rem);
  font-weight: 500;
  line-height: 1.8;
}

.vm-text-raw { opacity: 0; } /* 動畫中才出現；靜態後備只看到乾淨句 */

/* 打字游標（class 只由 JS 加，reduced-motion 下不會出現） */
.vm-text-raw.is-typing::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 3px;
  vertical-align: -0.15em;
  background: var(--voice);
  animation: caret-blink 1s steps(1, end) infinite;
}

/* ---- 情境 3：媒體播放器（雙讀頭時間軸） ----
   進度全靠 --ps（字幕讀頭）/ --pp（播放讀頭）兩個變數驅動：
   填色條 scaleX、讀頭圓點 left%、中間量測標注 left/width 全吃同一組值。
   CSS 預設 .7 / .45 ＝ 無 JS、reduced-motion 的靜態後備畫面。 */
#player-demo { padding-block: clamp(76px, 12vh, 130px); }
#player-demo .kicker { color: var(--player); }

.timeline-mock {
  --ps: .7;  /* 字幕讀頭進度 */
  --pp: .45; /* 播放讀頭進度 */
  position: relative;
  padding: clamp(22px, 4vw, 30px) clamp(20px, 3.5vw, 30px) clamp(24px, 4vw, 32px);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background:
    radial-gradient(90% 130% at 80% 0%, rgba(var(--player-glow), .12), transparent 62%),
    radial-gradient(70% 90% at 8% 100%, rgba(var(--subtitle-glow), .09), transparent 60%),
    linear-gradient(160deg, var(--bg-raise), var(--bg));
  box-shadow:
    0 32px 70px -42px rgba(var(--scrim-rgb), 1),
    0 22px 60px -34px rgba(var(--player-glow), .3);
}

/* 網址列：呼應「丟一個連結進來」 */
.tm-url {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(22px, 3.5vw, 30px);
  padding: 9px 14px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: rgba(var(--scrim-rgb), .45);
  font-size: .82rem;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
}

.tm-play-ico { /* 播放三角 */
  flex: none;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent var(--player);
}

.tm-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: .78rem;
  line-height: 1.4;
}
.tm-row:first-of-type { margin-bottom: 9px; }
.tm-row:last-of-type { margin-top: 9px; }

.tm-label {
  font-weight: 700;
  letter-spacing: .05em;
}
.tm-label--scout { color: var(--subtitle); }
.tm-label--play { color: var(--player); }

.tm-time {
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

.tm-bar {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: var(--glass-line);
}

.tm-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform-origin: left center;
}
.tm-bar--scout .tm-fill {
  transform: scaleX(var(--ps));
  background: var(--subtitle);
  box-shadow: 0 0 14px rgba(var(--subtitle-glow), .5);
}
.tm-bar--play .tm-fill {
  transform: scaleX(var(--pp));
  background: var(--player);
  box-shadow: 0 0 14px rgba(var(--player-glow), .45);
}

.tm-head {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--bg-raise);
  transform: translate(-50%, -50%);
}
.tm-bar--scout .tm-head {
  left: calc(var(--ps) * 100%);
  background: var(--subtitle);
  box-shadow: 0 0 0 3px rgba(var(--subtitle-glow), .22), 0 0 14px rgba(var(--subtitle-glow), .7);
}
.tm-bar--play .tm-head {
  left: calc(var(--pp) * 100%);
  background: var(--player);
  box-shadow: 0 0 0 3px rgba(var(--player-glow), .22), 0 0 14px rgba(var(--player-glow), .7);
}

/* 兩條之間的量測帶：左緣對齊播放讀頭、右緣對齊字幕讀頭，
   寬度＝兩讀頭的落差，一眼看出「字幕跑在前面多少」 */
.tm-gap {
  position: relative;
  height: clamp(44px, 7vw, 56px);
}

.tm-lead {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: calc(var(--pp) * 100%);
  width: calc((var(--ps) - var(--pp)) * 100%);
  border-left: 1px dashed rgba(var(--player-glow), .55);
  border-right: 1px dashed rgba(var(--subtitle-glow), .6);
}
.tm-lead::before { /* 讀頭間距的橫向量測線 */
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px dashed var(--ink-3);
}

.tm-lead-tag {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 3px 12px;
  white-space: nowrap;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--subtitle);
  background: var(--bg-raise); /* 蓋住身後的量測線 */
  border: 1px solid var(--line);
  border-radius: 999px;
}

/* ---- 收尾段共用：置中標題 + 副標 ---- */
.section-h {
  margin: 0;
  text-align: center;
  font-size: clamp(1.65rem, 3.8vw, 2.45rem);
  font-weight: 900;
  line-height: 1.28;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.section-lead {
  max-width: 560px;
  margin: 14px auto 0;
  text-align: center;
  font-size: clamp(.98rem, 2vw, 1.08rem);
  line-height: 1.85;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* ---- 引擎對照：兩張並排卡（行動版直疊），不發光——光留給定價卡 ---- */
#engines { padding-block: clamp(76px, 12vh, 130px); }

.engine-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  max-width: 860px;
  margin: 44px auto 0;
}

.engine-card {
  padding: clamp(24px, 3.5vw, 30px) clamp(22px, 3.5vw, 30px) clamp(26px, 3.5vw, 32px);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--bg-raise), var(--bg));
}

.engine-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.engine-head h3 {
  margin: 0;
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.4;
}

.engine-tag {
  flex: none;
  padding: 3px 11px;
  border-radius: 999px;
  border: 1px solid var(--glass-line);
  background: var(--glass);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ink-2);
  white-space: nowrap;
}

.engine-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}

.engine-list li {
  position: relative;
  margin-top: 11px;
  padding-left: 26px;
  line-height: 1.75;
  color: var(--ink-2);
}

.engine-list li::before { /* 勾號 */
  content: '';
  position: absolute;
  left: 1px;
  top: .56em;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

@media (max-width: 720px) {
  .engine-grid { grid-template-columns: 1fr; }
}

/* ---- 定價：單卡置中，全頁唯一的玻璃發光卡＝視覺焦點 ---- */
#pricing { padding-block: clamp(76px, 12vh, 130px); }

.price-card {
  max-width: 420px;
  margin: 44px auto 0;
  padding: clamp(34px, 5vw, 44px) clamp(26px, 5vw, 40px) clamp(28px, 4vw, 34px);
  text-align: center;
  border-radius: var(--radius);
  border: 1px solid rgba(var(--accent-glow), .38);
  background:
    radial-gradient(130% 90% at 50% 0%, rgba(var(--accent-glow), .13), transparent 62%),
    linear-gradient(160deg, var(--bg-raise), var(--bg));
  box-shadow:
    0 34px 80px -44px rgba(var(--scrim-rgb), 1),
    0 26px 70px -36px rgba(var(--accent-glow), .45);
}

.price-amount {
  margin: 0;
  font-size: clamp(2.8rem, 8vw, 3.6rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.price-curr {
  margin-right: 2px;
  font-size: .42em;
  font-weight: 700;
  color: var(--ink-2);
  letter-spacing: 0;
  vertical-align: .52em;
}

.price-once {
  margin: 10px 0 0;
  font-size: .95rem;
  font-weight: 500;
  color: var(--accent);
}

.price-list {
  display: inline-block;
  list-style: none;
  margin: 24px auto 28px;
  padding: 0;
  text-align: left;
}

.price-list li {
  position: relative;
  margin-top: 10px;
  padding-left: 26px;
  line-height: 1.75;
}
.price-list li:first-child { margin-top: 0; }

.price-list li::before { /* 勾號（與引擎卡同語言） */
  content: '';
  position: absolute;
  left: 1px;
  top: .56em;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

.price-cta {
  width: 100%;
  box-sizing: border-box; /* .btn 的左右 padding 算進 100% 內，行動版才不破版 */
}

.price-fine {
  margin: 14px 0 0;
  font-size: .82rem;
  color: var(--ink-2);
}

/* ---- FAQ：原生 details，hairline 分隔，不做卡片 ---- */
#faq { padding-block: clamp(76px, 12vh, 130px); }

.faq-wrap { max-width: 720px; }

.faq-wrap .section-h { margin-bottom: 28px; }

.faq-item { border-bottom: 1px solid var(--line); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 19px 6px;
  font-size: 1.04rem;
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
  list-style: none; /* 拿掉預設三角，用自家箭頭 */
  border-radius: 8px;
}
.faq-item summary::-webkit-details-marker { display: none; }

@media (hover: hover) and (pointer: fine) {
  .faq-item summary:hover { color: var(--accent-bright); }
}

.faq-item summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.faq-item summary::after { /* 展開指示箭頭 */
  content: '';
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border-right: 2px solid var(--ink-2);
  border-bottom: 2px solid var(--ink-2);
  transform: translateY(-2px) rotate(45deg); /* 朝下 */
}
.faq-item[open] summary::after {
  transform: translateY(2px) rotate(-135deg); /* 朝上 */
}

.faq-a {
  margin: 0 6px 22px;
  max-width: 62ch;
  line-height: 1.9;
  color: var(--ink-2);
  text-wrap: pretty;
}

@media (prefers-reduced-motion: no-preference) {
  .faq-item summary { transition: color .18s cubic-bezier(0.23, 1, 0.32, 1); }
  .faq-item summary::after {
    transition: transform .24s cubic-bezier(0.23, 1, 0.32, 1);
  }
  .faq-item[open] .faq-a { animation: faq-in .3s cubic-bezier(0.23, 1, 0.32, 1); }
}
@keyframes faq-in {
  from { opacity: 0; transform: translateY(-4px); }
}

/* ---- footer ---- */
#site-footer {
  padding: 38px 0 46px;
  border-top: 1px solid var(--line);
  text-align: center;
}

#site-footer p {
  margin: 0;
  font-size: .88rem;
  color: var(--ink-2);
}

#site-footer a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--ink-3);
}
@media (hover: hover) and (pointer: fine) {
  #site-footer a:hover {
    color: var(--accent-bright);
    text-decoration-color: currentColor;
  }
}
#site-footer a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}