/* 宿寫 InnPen：首頁的品牌動畫（.intro）與三個步驟的動態手機（.walk）
   沒有 JavaScript 或「減少動態效果」時，看到的是動畫最後一格；動畫由 /js/home-brand.js、/js/home-steps.js 播放。
   顏色一律用 brand.css 的語意化變數，亮色／暗色兩套主題才會一起正確。 */

/* ========== 品牌動畫：入住 → 拍照 → 放進紙 → 寫滿字 → 轉成速寫 → 宿寫 → InnPen ========== */
.intro .stage { position: relative; aspect-ratio: 640 / 330; container-type: inline-size; color: var(--text); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.intro .art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.intro .ln { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.intro .win { fill: transparent; }
.intro .flash { fill: none; stroke: var(--primary); stroke-width: 3; opacity: 0; }
.intro .photo, .intro .paper, .intro .penbody { fill: var(--bg); }

/* 線條畫面只在播放時出現；平常（最後一格）只看得到「宿寫 InnPen」 */
.intro .art > * { opacity: 0; }
.intro.is-playing #ib-ground, .intro.is-playing #ib-house, .intro.is-playing #ib-man { opacity: 1; }
.intro.is-playing #ib-sheet { opacity: 1; }
.intro.is-playing #ib-sheet .ph, .intro.is-playing #ib-paper, .intro.is-playing #ib-pen, .intro.is-playing #ib-cam { opacity: 0; }

/* 字：草稿階段用系統粗體；之後換成設計師的向量字 */
/* 最後一格的「宿寫」放大到約佔滿左欄，左緣對齊下面的標題與說明；
   裡面的墨點、速度線、InnPen 都用 em（跟著字的大小），只要改這裡的字級就會一起縮放 */
.intro .word { position: absolute; left: 0; top: 0; display: flex; font: 900 38cqw/1 "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif; letter-spacing: .02em; }
.intro .ch { position: relative; display: inline-block; }
.intro .ch > span { display: block; }
.intro .su { opacity: 0; }
.intro .su-top, .intro .su-bot { position: absolute; inset: 0; color: var(--primary); }
.intro .su-top { clip-path: inset(0 0 68% 0); }
.intro .su-bot { clip-path: inset(32% 0 0 0); }
.intro .speed { position: absolute; left: -.08em; top: 30%; width: .43em; height: 40%; opacity: 0; }
.intro .speed i { position: absolute; right: 0; height: .024em; border-radius: 99px; background: currentColor; }
.intro .speed i:nth-child(1) { top: 10%; width: 70%; }
.intro .speed i:nth-child(2) { top: 45%; width: 100%; }
.intro .speed i:nth-child(3) { top: 80%; width: 55%; }
.intro .dot { position: absolute; width: .1em; height: .1em; border-radius: 50%; background: var(--primary); right: -.12em; bottom: 8%; }
/* 宿＝Inn、寫＝Pen：播放時各自出現在中文下面再靠攏；最後一格是置中的 InnPen */
.intro .en { position: absolute; left: 50%; top: 100%; margin-top: .1em; transform: translateX(-50%); font-weight: 700; font-size: .21em; line-height: 1; font-family: var(--font-body); letter-spacing: .14em; color: var(--text-muted); white-space: nowrap; opacity: 0; }
.intro .en-all { position: absolute; left: 50%; top: 100%; margin-top: .1em; transform: translateX(-50%); font-weight: 700; font-size: .21em; line-height: 1; font-family: var(--font-body); letter-spacing: .14em; white-space: nowrap; }

/* 播放時的起始樣子（動畫用 forwards 停在最後；這裡只管開始前） */
.intro.is-playing .word, .intro.is-playing .su-top, .intro.is-playing .su-bot, .intro.is-playing .en-all { opacity: 0; }
.intro.is-playing .su { opacity: 1; }
.intro.is-playing .dot { transform: scale(0); }
.intro.is-playing h1 { opacity: 0; }

/* ========== 三個步驟：左邊手機固定，右邊文字跟著捲 ========== */
/* 每一步換一個淡淡的底色（橘、藍、青），用品牌色混進背景，深淺主題都適用 */
.walk { --tint: color-mix(in srgb, var(--primary) 7%, var(--bg)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; margin-top: 28px; padding: 24px; border-radius: 28px; background: var(--tint); transition: background-color .5s; }
.walk[data-step="2"] { --tint: color-mix(in srgb, var(--secondary) 8%, var(--bg)); }
.walk[data-step="3"] { --tint: color-mix(in srgb, var(--accent) 10%, var(--bg)); }
.walk .phone-col { position: relative; }
.walk .phone-sticky { position: sticky; top: 4vh; display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* 步驟列：1 2 3 加進度條，完成的打勾 */
.stepper { width: 100%; max-width: 380px; display: grid; gap: 10px; }
.stepper .chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.stepper button { font: inherit; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 6px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; white-space: nowrap; min-height: 44px; transition: background .3s, color .3s, border-color .3s; }
.stepper .num { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12px; background: var(--surface-2); color: var(--text-muted); flex: none; }
/* 小字白字要 4.5 倍對比：品牌橘再加深一點當底色 */
.stepper button[aria-current="step"] { --on: color-mix(in srgb, var(--primary-fill) 80%, #000); background: var(--on); border-color: var(--on); color: #fff; }
.stepper button[aria-current="step"] .num { background: rgba(255, 255, 255, .25); color: #fff; }
.stepper button.done .num { background: var(--accent); color: #fff; font-size: 0; }
.stepper button.done .num::before { content: "✓"; font-size: 12px; }
.stepper .prog { height: 4px; border-radius: 99px; background: var(--border); overflow: hidden; }
.stepper .prog i { display: block; height: 100%; width: 100%; background: var(--primary); border-radius: 99px; transition: width .45s; }

/* 手機下方的標題與一句話：只在手機寬度出現 */
.walk .caption { display: none; text-align: center; max-width: 340px; }
/* 標題字型（Noto Serif TC）只收了各頁主標題的字，這裡用內文字型，字才不會一半襯線一半黑體 */
.walk .caption b { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; font: 800 1.3rem/1.3 var(--font-body); }
.walk .caption small { font: 700 12px var(--font-body); padding: 3px 10px; border-radius: 99px; background: var(--surface-2); color: var(--text-muted); }
.walk .caption span { display: block; margin-top: 4px; font-size: 1rem; }
.walk .caption em { display: block; margin-top: 8px; font-style: normal; font-weight: 700; color: var(--link); }
.walk .caption em.done { color: color-mix(in srgb, var(--accent) 70%, var(--text)); }
.walk .stops { list-style: none; margin: 0; padding: 0; }
.walk .stops li { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; opacity: .3; transition: opacity .35s; }
.walk .stops li.on { opacity: 1; }
.walk .stops .n { font-weight: 700; font-size: 13px; color: var(--link); letter-spacing: .08em; }
.walk .stops .n::after { content: ""; display: block; width: 36px; height: 2px; background: currentColor; margin-top: 6px; }
.walk .stops h3 { font-size: 1.6rem; margin: 14px 0 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.walk .stops h3 small { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 99px; background: var(--surface-2); color: var(--text-muted); }
.walk .stops p { color: var(--text-muted); margin: 0; max-width: 26em; font-size: 1.05rem; }
/* 沒有 JavaScript：三段文字都清楚顯示，手機停在第 3 步的最後畫面 */
.walk:not(.is-live) .stops li { opacity: 1; min-height: 0; padding: 18px 0; }

/* 手機外框：固定 280×576 的設計尺寸，螢幕小時整支等比例縮小（home-steps.js），裡面的字才不會擠到換行 */
.walk .dp-wrap { display: flex; justify-content: center; }
.dphone { width: 280px; height: 576px; flex: none; transform-origin: top center; border-radius: 42px; border: 10px solid #1d1d1f; background: var(--surface); box-shadow: 0 30px 80px rgba(0, 0, 0, .22); position: relative; overflow: hidden; }
.dphone::before { content: ""; position: absolute; top: 10px; left: 50%; width: 32%; height: 24px; transform: translateX(-50%); background: #1d1d1f; border-radius: 99px; z-index: 5; }
.dphone .screen { position: absolute; inset: 0; padding: 46px 14px 14px; font-size: 12px; line-height: 1.5; color: var(--text); display: flex; flex-direction: column; gap: 8px; opacity: 0; transition: opacity .3s; }
.dphone .screen.on { opacity: 1; }
.dphone .bar { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12px; padding-bottom: 8px; border-bottom: 1px dashed var(--border-dashed); }
.dphone .bar img { width: 16px; }
.dphone .bar .r { margin-left: auto; color: var(--text-muted); font-weight: 400; font-size: 11px; }
.dphone .t { font: 800 16px/1.35 var(--font-body); margin: 2px 0 0; }
.dphone .t.sm { font-size: 15px; }
.dphone .muted { color: var(--text-muted); font-size: 11px; }
.dphone .btnp { background: var(--primary-fill); color: #fff; font-weight: 700; text-align: center; border-radius: 99px; padding: 8px; font-size: 13px; }
.dphone .btnp.off { opacity: .4; }
.dphone .btno { border: 1px solid var(--border); text-align: center; border-radius: 99px; padding: 7px; font-size: 12px; font-weight: 700; }
.dphone .stack { display: grid; gap: 8px; }
.dphone .col { display: flex; flex-direction: column; gap: 8px; }
.dphone .grow { flex: 1; }
.dphone .hide { display: none !important; }
.dphone .pop { animation: dp-pop .35s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes dp-pop { from { opacity: 0; transform: translateY(8px) scale(.96); } }

/* 手指點一下 */
.dphone .tap { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: rgba(249, 115, 22, .35); border: 2px solid var(--primary); pointer-events: none; opacity: 0; z-index: 6; }
.dphone .tap.go { animation: dp-tap .6s ease-out; }
@keyframes dp-tap { 0% { opacity: 0; transform: scale(1.6); } 30% { opacity: 1; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.2); } }

/* 照片：插畫色塊（不放真實照片） */
.dphone .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dphone .tile { aspect-ratio: 1; border-radius: 10px; position: relative; overflow: hidden; }
.dphone .tile .pb { position: absolute; left: 6px; right: 6px; bottom: 6px; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .4); transition: opacity .3s; }
.dphone .tile .pb i { display: block; height: 100%; width: 0; border-radius: 99px; background: #fff; transition: width .9s ease-out; }
.dphone .tile .no { position: absolute; left: 6px; top: 5px; color: #fff; font-weight: 700; font-size: 10px; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.dphone .tile .cover { position: absolute; right: 5px; top: 5px; background: var(--primary-fill); color: #fff; font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 99px; }
.dphone .il1 { background: linear-gradient(#9fd3d4 0 55%, #6aa77a 55%); }
.dphone .il2 { background: radial-gradient(circle at 70% 30%, #f7d37a 0 12%, transparent 13%), linear-gradient(#f2c9a0 0 60%, #c98b5a 60%); }
.dphone .il3 { background: linear-gradient(135deg, #e9e2d3 0 50%, #b9a58a 50%); }
.dphone .il4 { background: radial-gradient(circle at 30% 70%, #f2a65a 0 18%, transparent 19%), linear-gradient(#3d4e6b 0 70%, #26324a 70%); }
.dphone .il5 { background: linear-gradient(#cfe5f0 0 40%, #4f9fbf 40% 70%, #e8d6a8 70%); }
.dphone .total { display: grid; gap: 4px; }
.dphone .track { height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.dphone .track i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .4s; }
.dphone .search { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; min-height: 34px; }
.dphone .caret::after { content: "|"; animation: dp-blink 1s steps(1) infinite; color: var(--primary); }
@keyframes dp-blink { 50% { opacity: 0; } }
.dphone .card { border: 1px solid var(--border); border-radius: 12px; padding: 9px 10px; display: flex; align-items: center; gap: 8px; }
.dphone .card.box { display: block; }
.dphone .card.sel { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(249, 115, 22, .2); }
.dphone .tag { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: var(--accent-soft); white-space: nowrap; }

/* 步驟 2：主題卡、問答、文章 */
.dphone .topic { border: 1px solid var(--border); border-radius: 12px; padding: 8px 10px; font-weight: 700; font-size: 12px; }
.dphone .topic small { display: block; font-weight: 400; color: var(--text-muted); }
.dphone .topic.sel { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(249, 115, 22, .2); }
.dphone .q { align-self: flex-start; background: var(--surface-2); border-radius: 12px 12px 12px 4px; padding: 8px 10px; max-width: 85%; }
.dphone .a { align-self: flex-end; background: var(--secondary); color: #fff; border-radius: 12px 12px 4px 12px; padding: 8px 10px; max-width: 85%; min-height: 34px; }
.dphone .art p { margin: 0 0 6px; line-height: 1.6; font-size: 11px; }
.dphone .art .h { font-weight: 700; font-size: 12px; margin: 4px 0; }
.dphone .art .ph { height: 54px; border-radius: 8px; margin: 4px 0 6px; }
.dphone .verify { background: rgba(249, 115, 22, .18); border-bottom: 2px solid var(--primary); font-weight: 700; padding: 0 2px; }
.dphone .typing::after { content: "▍"; color: var(--accent); animation: dp-blink .8s steps(1) infinite; }

/* 步驟 3：清單、讀者畫面、分享、數據 */
.dphone .todo { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; border-bottom: 1px dashed var(--border-dashed); transition: opacity .3s; }
.dphone .todo .c { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border-dashed); flex: none; margin-top: 1px; transition: all .25s; }
.dphone .todo.done { opacity: .45; }
.dphone .todo.done .c { background: var(--accent); border-color: var(--accent); }
.dphone .big { font: 800 24px var(--font-body); }
.dphone .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.dphone .cover-ph { height: 70px; border-radius: 10px; }
.dphone .store { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.dphone .store .hd { padding: 8px 10px; font-weight: 700; display: flex; justify-content: space-between; gap: 6px; }
.dphone .store .bd { padding: 0 10px 10px; display: grid; gap: 6px; }
.dphone .code { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.dphone .code b { border: 2px dashed currentColor; border-radius: 4px; padding: 1px 6px; letter-spacing: .1em; }
.dphone .sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--surface); border-top: 1px solid var(--border); border-radius: 18px 18px 0 0; padding: 12px 14px 18px; transform: translateY(100%); transition: transform .35s cubic-bezier(.2, .8, .2, 1); box-shadow: 0 -10px 30px rgba(0, 0, 0, .15); z-index: 4; }
.dphone .sheet.up { transform: none; }
.dphone .apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; text-align: center; font-size: 10px; }
.dphone .apps i { display: block; width: 36px; height: 36px; border-radius: 10px; margin: 0 auto 3px; background: var(--surface-2); }
.dphone .apps .line i { background: #06c755; }
.dphone .apps .fb i { background: #1877f2; }
.dphone .apps .ig i { background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af); }
.dphone .toast { position: absolute; left: 50%; bottom: 18px; transform: translate(-50%, 20px); background: var(--text); color: var(--bg); font-size: 11px; font-weight: 700; padding: 7px 12px; border-radius: 99px; opacity: 0; transition: all .3s; z-index: 7; white-space: nowrap; }
.dphone .toast.on { opacity: 1; transform: translate(-50%, 0); }
.dphone .stamp { position: absolute; right: 16px; top: 54px; transform: rotate(-12deg) scale(1.8); border: 3px solid var(--primary); color: var(--primary); font: 800 15px var(--font-body); padding: 2px 8px; border-radius: 8px; opacity: 0; transition: all .35s cubic-bezier(.2, 1.4, .4, 1); z-index: 3; }
.dphone .stamp.on { opacity: 1; transform: rotate(-12deg) scale(1); }

/* 手機寬度：一欄，手機固定在上半部，文字在下面捲 */
@media (max-width: 860px) {
  .walk { grid-template-columns: 1fr; gap: 0; padding: 12px 10px; margin-inline: -8px; border-radius: 24px; }
  /* 步驟列＋手機＋一句話整組固定在畫面上，右邊那份長段落改當捲動的觸發點（文字只留給螢幕閱讀器） */
  .walk.is-live .phone-col { position: sticky; top: 0; z-index: 2; padding: 8px 0 12px; background: var(--tint); transition: background-color .5s; }
  .walk .phone-sticky { position: static; gap: 12px; }
  .walk.is-live .caption { display: block; }
  .walk.is-live .stops li { min-height: 80vh; padding: 0; }
  .walk.is-live .stops li > * { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .walk .stops h3 { font-size: 1.3rem; }
  .stepper button { font-size: 13px; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .dphone .pop, .dphone .tap.go { animation: none; }
  .dphone .caret::after, .dphone .typing::after { animation: none; }
}

/* 主標題「拍照，就能發文。」：動畫的「宿寫 InnPen」是主角，標題縮小接在下面 */
.hero .intro h1 { font-size: clamp(1.7rem, 4.6vw, 2.6rem); line-height: 1.2; margin: 6px 0 18px; }
/* 沒有 JavaScript 時第 3 步停在數據統計的最後畫面 */
.dphone #s3line { width: 62%; }
.dphone #s3google { width: 28%; }

/* ========== 文章會幫你賺旅費：每一步配一張示意卡片，捲到這段時依序出現 ========== */
.earn-vis { margin-top: 12px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: 0 10px 30px rgba(0, 0, 0, .08); }
/* ① 文章：主圖、標題、幾行字、底部的店家與優惠代碼 */
.ev-article { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 10px; max-width: 400px; }
/* 主圖：森山寫照授權的官方照片（人客多合作住宿），裁成方塊 */
.ev-article .cover { display: block; width: 100%; height: 100%; min-height: 104px; object-fit: cover; object-position: 60% 50%; border-radius: 10px; background: var(--surface-2); }
.ev-article .body { display: grid; gap: 6px; align-content: start; }
.ev-article .body b { font-size: 14px; line-height: 1.4; }
.ev-article .body i { display: block; height: 6px; border-radius: 99px; background: var(--surface-2); }
.ev-article .body i.short { width: 60%; }
.ev-article .store-chip { margin-top: 2px; font-size: 12px; color: var(--text-muted); }
.ev-article .store-chip em { font-style: normal; font-weight: 700; color: var(--text); border: 2px dashed currentColor; border-radius: 4px; padding: 0 6px; letter-spacing: .08em; }
/* ② 優惠券：左邊橘色票根、右邊說明，中間剪票虛線 */
.ev-ticket { display: grid; grid-template-columns: auto 1fr; max-width: 340px; overflow: hidden; }
.ev-ticket .stub { background: color-mix(in srgb, var(--primary-fill) 80%, #000); color: #fff; padding: 12px 16px; display: grid; place-content: center; text-align: center; position: relative; }
.ev-ticket .stub::after { content: ""; position: absolute; right: -1px; top: 8px; bottom: 8px; border-right: 2px dashed var(--surface); }
.ev-ticket .stub small { font-size: 12px; }
.ev-ticket .stub strong { font-size: 1.15rem; letter-spacing: .06em; }
.ev-ticket .info { padding: 12px 14px; display: grid; align-content: center; gap: 2px; }
.ev-ticket .info b { font-size: 15px; }
.ev-ticket .info span { font-size: 13px; color: var(--text-muted); }
/* ③ 分潤通知：像手機推播，旁邊冒出金幣；不寫金額 */
.ev-notice { position: relative; display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center; padding: 10px 14px; max-width: 360px; border-radius: 18px; }
.ev-notice img { width: 36px; height: 36px; border-radius: 10px; background: var(--surface-2); padding: 6px; }
.ev-notice small { display: block; font-size: 12px; color: var(--text-muted); }
.ev-notice b { display: block; font-size: 14px; }
.ev-notice div > span { font-size: 13px; font-weight: 700; color: color-mix(in srgb, var(--accent) 70%, var(--text)); }
.ev-notice .coins { position: absolute; right: 18px; top: -6px; width: 30px; height: 40px; }
.ev-notice .coins i { position: absolute; bottom: 0; width: 14px; height: 14px; border-radius: 50%; background: #f2b84b; border: 2px solid #d99a26; opacity: 0; }
.ev-notice .coins i:nth-child(2) { left: 10px; }
.ev-notice .coins i:nth-child(3) { left: 18px; }
/* ④ 本月分潤：數字模糊，加入後才看得到 */
.ev-total { padding: 12px 16px; max-width: 360px; display: grid; gap: 2px; }
.ev-total small { font-size: 12px; color: var(--text-muted); }
.ev-total strong { font-size: 1.6rem; }
.ev-total .blur { filter: blur(6px); user-select: none; }
.ev-total > span { font-size: 13px; color: var(--text-muted); }

/* 有 JavaScript 時先藏起來，捲到這段再依序出現（home-earn.js）；沒有 JavaScript 就一直是顯示的 */
.flow.is-pre .earn-vis { opacity: 0; transform: translateY(14px); }
.flow.is-in .earn-vis { opacity: 1; transform: none; transition: opacity .5s, transform .5s cubic-bezier(.2, .8, .2, 1); }
.flow.is-in li:nth-child(1) .earn-vis { transition-delay: .1s; }
.flow.is-in li:nth-child(2) .earn-vis { transition-delay: .7s; }
.flow.is-in li:nth-child(3) .ev-notice { transition-delay: 1.3s; }
.flow.is-in li:nth-child(3) .ev-total { transition-delay: 1.8s; }
.flow.is-in .ev-ticket { animation: ev-tilt .6s 1.2s ease-in-out; }
.flow.is-in .ev-notice .coins i { animation: ev-coin 1.2s ease-out 1.7s 2; }
.flow.is-in .ev-notice .coins i:nth-child(2) { animation-delay: 1.9s; }
.flow.is-in .ev-notice .coins i:nth-child(3) { animation-delay: 2.1s; }
@keyframes ev-tilt { 40% { transform: rotate(-3deg) translateX(6px); } }
@keyframes ev-coin { 0% { opacity: 0; transform: translateY(10px) scale(.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-34px) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .flow.is-pre .earn-vis { opacity: 1; transform: none; }
  .flow.is-in .ev-ticket, .flow.is-in .ev-notice .coins i { animation: none; }
}

/* 方案標題旁的「邀請制」：說明為什麼沒有直接購買，也帶一點 VIP 感 */
.invite-tag { display: inline-block; vertical-align: middle; margin-left: 8px; font: 700 13px/1 var(--font-body); padding: 6px 12px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); letter-spacing: .06em; }