/* ============================================================
   排桌入座｜行銷首頁（/）的區塊樣式（/assets/home.css）

   首屏大卡 → 功能九宮格 → 現場試玩（近黑整片）→ 使用情境跑馬燈 → 匯出成品 → 定價 → 常見問題 → 滿版黃頁尾。
   功能卡的產品縮影由 home.js 用 PZENGINE／PZVENUES 畫，這裡只管版面與動態。
   動態一律 transform／opacity；prefers-reduced-motion 直接停在完成態（site.css 最後一段）。
   ============================================================ */

.home main > section + section { margin-top: clamp(5rem, 8.5vw, 8.5rem); }
.home main > .hero + section { margin-top: clamp(4.5rem, 7vw, 6.5rem); }
.home main { padding-bottom: clamp(7rem, 12vw, 11rem); }

/* 區塊標題：左邊大標，右邊一句說明，底對齊 */
.sec-head { display: grid; gap: 1rem 3rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 60rem) { .sec-head { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; } }
.sec-head h2, .faq h2 {
  font-size: clamp(2rem, 1.1rem + 3.4vw, 4.25rem); font-weight: 900; line-height: 1.08; letter-spacing: -.04em; text-wrap: balance;
}
.sec-head p { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.65; max-width: 34rem; }
.sec-head p a { font-weight: 700; white-space: nowrap; }

/* ---------- ① 首屏大卡 ---------- */
.hero { padding-top: .5rem; }
.hero-card {
  position: relative; overflow: hidden; border-radius: 28px; background: var(--fill);
  height: clamp(30rem, calc(100svh - 68px - 9.5rem), 54rem);
}
.hero-pic, .hero-pic img { width: 100%; height: 100%; }
.hero-pic img { object-fit: cover; object-position: 30% 40%; }
/* 首屏下緣一條：這是什麼、三件事、開始排桌（不壓在插畫上） */
.hero-bar {
  display: grid; gap: 1rem 2.5rem; align-items: center; padding: 1.4rem clamp(.25rem, 1vw, .75rem) 0;
}
@media (min-width: 60rem) { .hero-bar { grid-template-columns: auto minmax(0, 1fr) auto; } }
.hero-what { font-size: clamp(1.25rem, 1rem + .7vw, 1.6rem); font-weight: 900; line-height: 1.35; letter-spacing: -.01em; }
.hero-points { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.75rem; }
.hero-points li { position: relative; padding-left: 1.5rem; font-size: clamp(1.05rem, .95rem + .3vw, 1.2rem); font-weight: 700; line-height: 1.45; }
.hero-points li::before { content: ""; position: absolute; left: 0; top: .5em; width: .62rem; height: .62rem; border-radius: 50%; background: var(--ink); }
.hero-acts { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.hero-acts .btn { min-height: 62px; padding: .7rem 2rem; font-size: 1.2rem; }
.hero-alt { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.hero-alt:hover { text-decoration-color: var(--ink-3); }
.hero-h {
  position: absolute; left: clamp(1rem, 2.2vw, 1.75rem); bottom: clamp(1rem, 2.2vw, 1.75rem); max-width: calc(100% - 2 * clamp(1rem, 2.2vw, 1.75rem));
  padding: .14em .34em .2em; border-radius: clamp(14px, 1.6vw, 24px); background: var(--ink); color: #fff;
  font-size: clamp(2.75rem, 5.5vw, 6.25rem); font-weight: 900; line-height: 1.12; letter-spacing: -.045em;
}
.hero-h br { display: none; }
/* 近黑底上的螢光筆：加高到整個字高、字改近黑（DESIGN §4.1） */
.hl-ink { color: var(--ink); }
.hl-ink::before { top: .1em; bottom: .02em; height: auto; left: -.08em; right: -.2em; transform-origin: left center; animation: hl-in .55s cubic-bezier(.2, .8, .2, 1) .15s both; }
@keyframes hl-in { from { transform: rotate(-1.5deg) scaleX(0); } to { transform: rotate(-1.5deg) scaleX(1); } }
/* 螢光筆還沒刷到之前字是白的，刷過去才變近黑：任何時刻都讀得到 */
.hero-h .hl-ink { animation: hl-ink .55s steps(1, end) .15s both; }
@keyframes hl-ink { from { color: #fff; } 60% { color: var(--ink); } to { color: var(--ink); } }

@media (max-width: 72rem) { .hero-h br { display: inline; } }
@media (max-width: 48rem) {
  .hero-card { height: auto; display: flex; flex-direction: column; background: var(--ink); border-radius: 22px; }
  .hero-pic { height: auto; aspect-ratio: 900 / 674; }
  .hero-pic img { object-position: 50% 50%; }
  .hero-h { position: static; max-width: none; border-radius: 0; padding: .45em .5em .5em; font-size: clamp(2.3rem, 10.6vw, 3.5rem); line-height: 1.14; }
  .hero-bar { padding-top: 1.1rem; }
  .hero-what { font-size: 1.15rem; }
  .hero-what br { display: none; }
  .hero-points { display: grid; gap: .4rem; }
  .hero-points li { font-size: 1rem; }
  .hero-acts .btn { flex: 1 1 100%; }
}

/* ---------- ② 功能九宮格 ---------- */
.feat-grid { display: grid; gap: clamp(.75rem, 1.4vw, 1.25rem); margin: 0; padding: 0; list-style: none; }
@media (min-width: 40rem) {
  .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feat-wide, .feat-big { grid-column: span 2; }
}
/* 桌機：不等大的 bento，平面圖最大（2×2），四張寬卡左圖右字 */
@media (min-width: 64rem) {
  .feat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; }
  .feat-big { grid-row: span 2; display: flex; flex-direction: column; }
  .feat-big .fx { flex: 1; aspect-ratio: auto; min-height: 22rem; }
  .feat-big h3 { font-size: 1.75rem; }
  .feat-wide { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; column-gap: .75rem; padding-bottom: .75rem; }
  .feat-wide .fx { grid-row: 1 / 3; aspect-ratio: auto; height: 100%; min-height: 14rem; }
  .feat-venues { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
  .feat-venues .fx { min-height: 17rem; }
  .feat-wide h3 { align-self: end; margin-top: 0; }
  .feat-wide p { align-self: start; margin-top: .4rem; }
}
/* 手機：橫向滑動，一張接一張，不要拉成十屏長 */
@media (max-width: 39.99rem) {
  .feat-grid {
    grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin: 0 calc(-1 * clamp(1rem, 3vw, 2rem)); padding: 0 clamp(1rem, 3vw, 2rem) .75rem; scroll-padding: 0 clamp(1rem, 3vw, 2rem);
    scrollbar-width: none;
  }
  .feat-grid::-webkit-scrollbar { display: none; }
  .feat { scroll-snap-align: start; }
}
.feat-count { display: none; }
@media (max-width: 39.99rem) {
  .feat-count { display: flex; align-items: center; gap: .75rem; margin-top: .9rem; font-weight: 700; }
  .feat-count .bar { flex: 1; height: 4px; border-radius: 2px; background: var(--line-2); overflow: hidden; }
  .feat-count .bar i { display: block; height: 100%; width: calc(100% / 9); background: var(--ink); transform: translateX(calc(var(--p, 0) * 100%)); transition: transform .2s; }
}
.feat { padding: .75rem .75rem 1.6rem; border-radius: var(--r-lg); background: var(--surface); transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.feat:hover { transform: translateY(-4px); }
.feat h3 { margin: 1.25rem .75rem .4rem; font-size: 1.35rem; font-weight: 900; letter-spacing: -.02em; }
.feat p { margin: 0 .75rem; font-size: 1rem; line-height: 1.65; }

/* 產品縮影：近黑底、白線，黃色只給「這裡」 */
.fx { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-md); background: var(--ink); overflow: hidden; color: #fff; }
.fx svg { width: 100%; height: 100%; font-family: var(--font); }
.fx .t { fill: #fff; font-size: 13px; font-weight: 700; }
.fx .t-ink { fill: var(--ink); }
.fx .t-dim { fill: rgba(255, 255, 255, .7); font-size: 12px; font-weight: 700; }
.fx .num { font-family: var(--font-num); }
.fx .ln { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fx .ln-dim { fill: none; stroke: rgba(255, 255, 255, .28); stroke-width: 1.4; }
.fx .tb { fill: var(--ink); stroke: #fff; stroke-width: 1.6; }
.fx .tb-vip { fill: #fff; stroke: #fff; stroke-width: 1.6; }
.fx .seat { fill: var(--ink); stroke: #fff; stroke-width: 1.3; }
.fx .seat-on { fill: #fff; stroke: #fff; stroke-width: 1.3; }
.fx .y { fill: var(--yellow); }
.fx .y-ln { stroke: var(--yellow); }
.fx .chipbg { fill: rgba(255, 255, 255, .1); }
.fx .grid-dot { fill: rgba(255, 255, 255, .22); }
.fx * { transform-box: fill-box; }

/* 縮影的動態：預設暫停，進畫面才播（home.js 加 .is-on），離開就停 */
.fx [class*="a-"] { animation-play-state: paused; }
.fx.is-on [class*="a-"] { animation-play-state: running; }

/* 1 貼上就分桌：名條飛進桌子 */
.a-fly { animation: fly 5.2s cubic-bezier(.2, .8, .2, 1) infinite; animation-delay: var(--d); transform-box: view-box; }
.a-fade { animation: fade-out 5.2s ease infinite; animation-delay: var(--d); }
@keyframes fly {
  0%, 12% { transform: translate(0, 0); }
  32%, 82% { transform: translate(var(--dx), var(--dy)); }
  94%, 100% { transform: translate(0, 0); }
}
@keyframes fade-out { 0%, 14% { opacity: 1; } 24%, 86% { opacity: .28; } 96%, 100% { opacity: 1; } }

/* 2 長官桌：長官桌先亮，其他桌接著出現 */
.a-pop { animation: pop 4.8s cubic-bezier(.2, .8, .2, 1) infinite; animation-delay: var(--d); }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 14%, 86% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }

/* 3 同桌規則：線畫出來 */
.a-draw { stroke-dasharray: 160; animation: draw 4.4s ease infinite; animation-delay: var(--d); }
@keyframes draw { 0% { stroke-dashoffset: 160; } 30%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 160; } }
.a-mark { animation: pop 4.4s ease infinite; animation-delay: var(--d); }

/* 4 平面圖：一張桌被拖過來，吸附到格線上 */
.a-snap { animation: snap 4.6s cubic-bezier(.2, .8, .2, 1) infinite; transform-box: view-box; }
@keyframes snap {
  0%, 10% { transform: translate(34px, 26px); }
  40% { transform: translate(5px, 4px); }
  48%, 88% { transform: translate(0, 0); }
  100% { transform: translate(34px, 26px); }
}
.a-ring { animation: ring 4.6s ease infinite; }
@keyframes ring { 0%, 44% { opacity: 1; } 52%, 100% { opacity: 0; } }

/* 5 場地輪播 */
.fx-venues { display: grid; place-items: center; background: var(--ink); }
.fx-venues figure { position: absolute; inset: 8px 8px 8px; margin: 0; opacity: 0; }
/* 場地縮圖是淺底的 PZVENUES.svg()，在近黑卡上反轉成深底白線，跟其他八張一致；色相轉回來，部門色不變色 */
.fx-venues img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: invert(1) hue-rotate(180deg) brightness(1.05); }
.fx-venues figcaption {
  position: absolute; left: 6px; bottom: 6px; padding: .2rem .7rem; border-radius: var(--r-pill);
  background: #fff; color: var(--ink); font-size: .875rem; font-weight: 700;
}
.a-cycle { animation: cycle 12s ease infinite; animation-delay: var(--d); }
@keyframes cycle { 0% { opacity: 0; transform: translateY(8px); } 4%, 23% { opacity: 1; transform: none; } 27%, 100% { opacity: 0; transform: translateY(-8px); } }

/* 6 逐座位：名字一個一個出現 */
.a-name { animation: name-in 6s ease infinite; animation-delay: var(--d); }
@keyframes name-in { 0% { opacity: 0; transform: scale(.85); } 6%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }

/* 7 素食：線連到結果、數字出現 */
.a-count { animation: name-in 5s ease infinite; animation-delay: var(--d); }

/* 8 鎖定：沒鎖的桌重排 */
.a-swapA { animation: swapA 5s ease infinite; }
.a-swapB { animation: swapB 5s ease infinite; }
@keyframes swapA { 0%, 42% { opacity: 1; } 50%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes swapB { 0%, 42% { opacity: 0; } 50%, 92% { opacity: 1; } 100% { opacity: 0; } }

/* 9 不上傳：小點往雲走，在叉叉前停下 */
.a-try { animation: try-up 3.6s cubic-bezier(.2, .8, .2, 1) infinite; transform-box: view-box; }
@keyframes try-up { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: 1; } 55%, 70% { transform: translate(24px, -8px); opacity: 1; } 85%, 100% { transform: translate(24px, -8px); opacity: 0; } }

/* ---------- ③ 現場試玩：近黑整片 ---------- */
.try { background: var(--ink); color: #fff; padding: clamp(3.5rem, 6vw, 5.5rem) 0; }
.try-in { display: grid; gap: 2.5rem; }
@media (max-width: 63.99rem) {
  .try-in { gap: 1.25rem; }
  .try-copy { display: contents; }
  .try h2 { order: 1; } .try-copy > p { order: 2; } .try-tabs { order: 3; margin-top: 0; } .try-stage { order: 4; margin-top: .25rem; }
  .try-copy > label { order: 5; } .try-text { order: 6; margin-top: .5rem; min-height: 10rem; } .try-acts { order: 7; margin-top: 0; }
}
@media (min-width: 64rem) { .try-in { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 4rem; align-items: center; } }
.try h2 { font-size: clamp(2rem, 1.1rem + 3.4vw, 3.75rem); text-wrap: balance; font-weight: 900; line-height: 1.08; letter-spacing: -.04em; }
.try-copy > p { margin-top: 1rem; font-size: 1.08rem; color: rgba(255, 255, 255, .86); max-width: 32rem; }
.try-text {
  display: block; width: 100%; margin-top: 1rem; padding: 1rem 1.1rem; resize: vertical; min-height: 13rem; max-height: 22rem;
  border: 0; border-radius: var(--r-md); background: #262624; color: #fff; font-size: 1rem; line-height: 1.6; tab-size: 8;
}
.try-text:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
/* 換場合：婚宴／尾牙／同學會三份假名單。選到的是白底（黃色留給「再自動分桌一次」） */
.try-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.try-tab {
  min-height: 44px; padding: .5rem 1.15rem; border-radius: var(--r-pill); border: 1.5px solid rgba(255, 255, 255, .42);
  background: transparent; color: #fff; font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer;
}
.try-tab:hover { border-color: #fff; }
.try-tab[aria-pressed="true"] { background: #fff; border-color: #fff; color: var(--ink); }
.try-acts { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.try .btn:not(.btn-go) { border-color: rgba(255, 255, 255, .5); color: #fff; }
.try .btn:not(.btn-go):hover { background: #fff; color: var(--ink); border-color: #fff; }
.try :focus-visible { outline-color: var(--yellow); }
.try-stage { margin: 0; padding: clamp(.75rem, 1.5vw, 1.25rem); border-radius: var(--r-lg); background: var(--paper); color: var(--ink); }
.try-floor svg { width: 100%; height: auto; max-height: min(70svh, 40rem); margin: 0 auto; }
.try-floor .nm { font-size: .62px; font-weight: 700; fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: .26px; stroke-linejoin: round; }
.try-floor .nm-new { animation: seat-in .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--d); transform-box: fill-box; transform-origin: center; }
@keyframes seat-in { from { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(.6); } to { opacity: 1; transform: none; } }
.try-sum { display: block; margin-top: .9rem; padding: 0 .25rem; font-size: 1rem; font-weight: 700; }
.try-moves { display: block; }
.try-floor .mv { fill: var(--yellow); }
.try-moves { margin-top: .4rem; padding: 0 .25rem; font-size: .95rem; }
.try-moves mark { background: var(--yellow); color: var(--ink); padding: 0 .2em; border-radius: 3px; font-weight: 700; }
.try-sum b { font-family: var(--font-num); font-stretch: 125%; font-weight: 800; }

/* ---------- ④ 使用情境跑馬燈 ---------- */
/* 帶位員拖著螢光筆跑過來：接住首屏那條黃線，從試玩區帶進使用情境 */
.scenes-art { display: flex; justify-content: flex-end; margin-top: calc(-1 * clamp(2rem, 4vw, 3.5rem)); margin-bottom: -1rem; }
.scenes-art img { width: min(100%, 56rem); height: auto; }
.home main > .try + .scenes { margin-top: clamp(1rem, 3vw, 2.5rem); }
.sec-head-row { margin-bottom: clamp(2rem, 4vw, 3rem); }
.marq { overflow: hidden; max-width: 90rem; margin: 0 auto; padding: .75rem 0 1.5rem; clip-path: inset(0 clamp(1rem, 3vw, 2rem) round var(--r-lg)); }
.marq-track { display: flex; gap: 1rem; width: max-content; margin: 0; padding: 0 clamp(1rem, 3vw, 2rem); list-style: none; }
.marq.is-run .marq-track { animation: marq 70s linear infinite; }
.marq:hover .marq-track { animation-play-state: paused; }
.marq.is-manual { overflow-x: auto; scrollbar-width: none; }
.marq.is-manual .marq-track { animation: none; }
.marq::-webkit-scrollbar { display: none; }
.marq-nav { display: flex; gap: .6rem; margin-top: 1.25rem; }
.marq-btn {
  display: inline-grid; place-items: center; width: 52px; height: 52px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1.5px solid var(--ink); background: transparent; color: var(--ink); transition: background .12s, color .12s;
}
.marq-btn:hover { background: var(--ink); color: #fff; }
.marq-btn:active { transform: translateY(1px); }
.marq-btn .i { width: 22px; height: 22px; }
/* 用鍵盤進來：停掉跑馬燈、改成一般的橫向捲動列，讓瀏覽器把有焦點的那張捲進畫面 */
.marq:focus-within { overflow-x: auto; scrollbar-width: none; }
.marq:focus-within .marq-track { animation: none; }
@keyframes marq { to { transform: translateX(calc(-50% - .5rem)); } }
.marq li a { display: grid; gap: .75rem; width: clamp(17rem, 28vw, 25rem); padding: .6rem .6rem 1rem; border-radius: var(--r-lg); background: var(--surface); text-decoration: none; transition: background .15s, transform .2s; }
.marq li a:hover { background: var(--yellow-soft); transform: translateY(-3px); }
.marq-plan { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--r-md); background: var(--fill); overflow: hidden; }
/* 整張平面圖放進框裡（不裁），直的場地左右留白 */
.marq-plan img { position: absolute; inset: .6rem; width: calc(100% - 1.2rem); height: calc(100% - 1.2rem); object-fit: contain; }
.marq-t { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; padding: 0 .4rem; }
.marq b { font-size: 1.4rem; font-weight: 900; letter-spacing: -.02em; }
.marq-go { display: inline-flex; align-items: center; gap: .3rem; flex: none; font-weight: 700; font-size: .95rem; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.marq-go .i { width: 16px; height: 16px; transition: transform .2s; }
.marq li a:hover .marq-go .i { transform: translateX(3px); }
.marq li a { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .marq { overflow-x: auto; } .marq.is-run .marq-track { animation: none; } }

/* ---------- ⑤ 匯出成品 ---------- */
.export { display: grid; gap: 3rem; }
@media (min-width: 64rem) { .export { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 4rem; align-items: center; } }
.export-copy h2 { font-size: clamp(2rem, 1.1rem + 3.4vw, 4.25rem); font-weight: 900; line-height: 1.08; letter-spacing: -.04em; }
.export-copy > p { margin-top: 1.25rem; font-size: 1.08rem; max-width: 34rem; }
.export-list { margin: 2rem 0 0; padding: 0; list-style: none; display: grid; gap: 1.25rem; max-width: 34rem; }
.export-list li { display: grid; gap: .2rem; padding-left: 1.25rem; box-shadow: inset 3px 0 0 var(--ink); }
.export-list b { font-size: 1.15rem; font-weight: 900; }
.export-art { position: relative; min-height: 40rem; padding: 2rem 0 7rem; border-radius: 28px; background: var(--fill); display: grid; place-items: center; overflow: hidden; }
.export-sheet { display: block; width: min(34rem, 86%); aspect-ratio: 900 / 940; overflow: hidden; border-radius: 6px; transform: rotate(-3deg) translateX(6%); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.export-sheet img { width: 100%; height: auto; }
.export-art:hover .export-sheet { transform: rotate(-1deg) translateX(6%); }
.export-xl {
  position: absolute; left: 6%; bottom: 2.25rem; width: min(30rem, 86%); margin: 0; border-radius: var(--r-md); overflow: hidden;
  background: #fff; transform: rotate(2.5deg); transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.export-art:hover .export-xl { transform: rotate(0); }
.export-xl figcaption { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .55rem .8rem; background: var(--ink); color: #fff; font-size: .875rem; font-weight: 700; }
.xl-file { display: inline-flex; align-items: center; gap: .45rem; }
.xl-file i { width: 12px; height: 12px; border-radius: 3px; background: var(--ok); }
.xl-tabs { display: flex; gap: .25rem; }
.xl-tabs span { padding: .05rem .45rem; border-radius: 4px; color: rgba(255, 255, 255, .8); font-weight: 400; }
.xl-tabs .is-on { background: #fff; color: var(--ink); font-weight: 700; }
.xl-scroll { overflow-x: auto; }
.xl { width: 100%; border-collapse: collapse; font-size: .95rem; font-variant-numeric: tabular-nums; }
.xl th, .xl td { padding: .38rem .6rem; border: 1px solid var(--line); text-align: left; white-space: nowrap; }
.xl th { background: var(--fill); font-weight: 700; }
.xl tr:last-child td { font-weight: 700; }
.xl td:nth-child(3) { font-family: var(--font-num); font-weight: 800; }
@media (max-width: 40rem) {
  .xl-tabs span:not(.is-on) { display: none; }
  .export-xl { left: 3%; width: 94%; transform: rotate(1.5deg); }
  .xl { font-size: .875rem; }
  .xl th:nth-child(4), .xl td:nth-child(4) { display: none; }
  .xl th, .xl td { padding: .35rem .45rem; }
  .export-art { min-height: 30rem; }
  .export-sheet { width: 84%; transform: rotate(-3deg) translateX(4%); }
}

/* ---------- ⑥ 定價（卡片樣式在 site.css，定價頁共用） ---------- */
.price-more { margin-top: 1.25rem; font-weight: 700; }

/* ---------- ⑦ 常見問題 ---------- */
.faq { display: grid; gap: 2rem; }
@media (min-width: 64rem) { .faq { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 4rem; align-items: start; } .faq-head { position: sticky; top: 110px; } }
.faq-head p { margin-top: 1.25rem; font-size: 1.08rem; max-width: 28rem; }
.faq-head p a { font-weight: 700; }
.faq-head .btn { margin-top: 1.5rem; }
.faq-list details { border-radius: var(--r-lg); background: var(--surface); }
.faq-list details + details { margin-top: .6rem; }
.faq-list summary {
  position: relative; display: block; padding: 1.25rem 3.5rem 1.25rem 1.5rem; cursor: pointer; list-style: none;
  font-size: clamp(1.08rem, 1rem + .3vw, 1.25rem); font-weight: 900; border-radius: var(--r-lg);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::before, .faq-list summary::after {
  content: ""; position: absolute; right: 1.5rem; top: 50%; width: 16px; height: 2.5px; margin-top: -1px; border-radius: 2px; background: var(--ink); transition: transform .2s;
}
.faq-list summary::after { transform: rotate(90deg); }
.faq-list details[open] summary::after { transform: rotate(0); }
.faq-list summary:hover { background: var(--fill); }
.faq-list details p { padding: 0 1.5rem 1.4rem; font-size: 1.04rem; max-width: 44rem; }
.faq-list a { font-weight: 700; }

/* 進場：區塊裡的標題、內文、圖錯開升上來（home.js 加 .is-in；沒有 JS 就直接顯示） */
.js .rv { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--rd, 0ms); }
.js .rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; }
  .fx [class*="a-"] { animation: none !important; }
  .a-fly { transform: translate(var(--dx), var(--dy)); }
  .a-fade { opacity: .28; }
  .a-cycle { animation: none; opacity: 0; }
  .a-cycle:first-child { opacity: 1; }
  .a-swapB, .a-ring { opacity: 0; }
}