/* ============ tokens — 整份抄自 web/src/styles/tokens.css ============ */
:root {
  --teal: #35a8a0;
  --teal-deep: #2b867f;
  --orange: #ef8e33;
  --orange-deep: #d96a26;
  --cream: #fbf3dc;
  --ink: #3b211a;
  --blush: #f2a9ac;
  --warn: #c74a3f;
  --bg: #fbf6ec;
  --strength: #7c6bb3;
  --track: #efe7d2;
  --ink-60: rgba(59, 33, 26, 0.6);
  --ink-70: rgba(59, 33, 26, 0.72);
  --bd: 2.5px solid var(--ink);
  --bd2: 2px solid var(--ink);
  --sh: 4px 4px 0 var(--ink);
  --sh5: 5px 5px 0 var(--ink);
  --r-card: 22px;
  --r-el: 14px;
  --r-pill: 999px;
  --font: 'Noto Sans TC', system-ui, sans-serif;
  /* site 專用衍生色 */
  --teal-tint: #e3f2f0;
  --orange-tint: #fdeedd;
  --ease-pop: cubic-bezier(.34,1.56,.64,1);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  text-wrap:pretty;
  overflow-x:hidden;
}
img, video { max-width:100%; display:block; }
a { color:inherit; }

/* ============ 進場動效：squash & stretch 彈入，全站共用 ============ */
.pop {
  opacity:0;
  transform:translateY(26px) scale(.92,1.05);
}
.pop.in {
  animation:popIn .55s var(--ease-pop) forwards;
}
@keyframes popIn {
  0%   { opacity:0; transform:translateY(26px) scale(.92,1.05); }
  60%  { opacity:1; transform:translateY(-4px) scale(1.03,.97); }
  100% { opacity:1; transform:translateY(0) scale(1,1); }
}
@media (prefers-reduced-motion: reduce) {
  .pop { transform:none; transition:opacity .4s ease; }
  .pop.in { animation:none; opacity:1; }
  * { animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}

/* ============ 共用元件 ============ */
.wrap { max-width:1120px; margin:0 auto; padding:0 20px; }
.card {
  background:#fff;
  border:var(--bd);
  border-radius:var(--r-card);
  box-shadow:var(--sh);
  transition:transform .18s var(--ease-pop), box-shadow .18s var(--ease-pop);
}
.card:hover { transform:translateY(-2px); box-shadow:6px 6px 0 var(--ink); }
.btn {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font); font-weight:900; font-size:18px;
  color:#fff; background:var(--teal);
  border:var(--bd); border-radius:var(--r-pill);
  box-shadow:var(--sh); padding:14px 30px;
  cursor:pointer; text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover { background:var(--teal-deep); }
.btn:active { transform:translate(4px,4px); box-shadow:0 0 0 var(--ink); }
.btn.orange { background:var(--orange); }
.btn.orange:hover { background:var(--orange-deep); }
.btn.ghost { background:#fff; color:var(--ink); font-weight:700; }
.btn.ghost:hover { background:var(--cream); }
.kicker {
  display:inline-block; font-weight:900; font-size:14px; letter-spacing:.12em;
  color:#fff; background:var(--ink); border-radius:var(--r-pill);
  padding:5px 16px; margin-bottom:14px;
}
.sec-title { font-size:clamp(28px,4.5vw,44px); font-weight:900; line-height:1.25; letter-spacing:.01em; }
.sec-sub { font-size:17px; color:var(--ink-70); margin-top:12px; max-width:560px; }
section { padding:96px 0; position:relative; }

/* ============ header ============ */
header {
  position:sticky; top:0; z-index:50;
  background:rgba(251,246,236,.92); backdrop-filter:blur(8px);
  border-bottom:var(--bd2);
}
.nav { display:flex; align-items:center; gap:28px; height:64px; }
.nav .logo { display:flex; align-items:center; gap:10px; font-weight:900; font-size:20px; text-decoration:none; margin-right:auto; }
.nav .logo img { width:36px; height:36px; }
.nav a.link { text-decoration:none; font-weight:700; font-size:15px; color:var(--ink-70); }
.nav a.link:hover { color:var(--ink); }
.nav .btn { padding:9px 20px; font-size:15px; }
@media (max-width:720px){ .nav a.link { display:none; } }

/* ============ Hero：活的 LINE 對話 ============ */
.hero { padding:72px 0 96px; overflow:hidden; }
.hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
@media (max-width:900px){ .hero-grid { grid-template-columns:1fr; gap:40px; } }
.hero h1 { font-size:clamp(34px,5vw,54px); font-weight:900; line-height:1.2; }
.hero h1 .hl { color:var(--teal); }
.hero p.lead { font-size:19px; color:var(--ink-70); margin:18px 0 30px; max-width:440px; }
.hero .cta-row { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.hero .trust { margin-top:22px; font-size:14px; color:var(--ink-60); font-weight:500; }

/* 漂浮貼紙背景 */
.float-sticker { position:absolute; width:88px; opacity:.9; pointer-events:none; animation:floaty 7s ease-in-out infinite; filter:drop-shadow(2px 3px 0 rgba(59,33,26,.15)); }
@keyframes floaty { 0%,100%{ transform:translateY(0) rotate(var(--rot,0deg)); } 50%{ transform:translateY(-14px) rotate(var(--rot,0deg)); } }
/* 單欄版面沒有裝飾的安全空間，窄版收掉漂浮貼紙 */
@media (max-width:960px){ .float-sticker { display:none; } }

/* 對話畫布 */
.chat {
  background:var(--teal-tint);
  border:var(--bd); border-radius:var(--r-card); box-shadow:var(--sh5);
  padding:26px 20px 20px; height:560px; overflow:hidden;
  display:flex; flex-direction:column; gap:14px; position:relative;
}
@media (max-width:480px){ .chat { height:600px; } }
.chat-head { display:flex; align-items:center; gap:10px; padding-bottom:12px; border-bottom:var(--bd2); margin-bottom:4px; }
.chat-head img { width:34px; height:34px; border-radius:50%; border:var(--bd2); background:#fff; }
.chat-head .name { font-weight:900; font-size:15px; }
.chat-head .stat { font-size:12px; color:var(--teal-deep); font-weight:700; }
.bubble { max-width:82%; padding:12px 16px; border:var(--bd2); border-radius:18px; font-size:15px; line-height:1.55; opacity:0; transform:scale(.7,1.2); }
.bubble.show { animation:bubblePop .4s var(--ease-pop) forwards; }
@keyframes bubblePop {
  0%{ opacity:0; transform:scale(.7,1.2) translateY(10px); }
  65%{ opacity:1; transform:scale(1.06,.94) translateY(-2px); }
  100%{ opacity:1; transform:scale(1,1) translateY(0); }
}
.bubble.user { align-self:flex-end; background:var(--teal); color:#fff; border-bottom-right-radius:6px; font-weight:700; }
.bubble.neko { align-self:flex-start; background:#fff; border-bottom-left-radius:6px; }
.typing { align-self:flex-start; display:none; gap:5px; padding:12px 18px; background:#fff; border:var(--bd2); border-radius:18px; border-bottom-left-radius:6px; }
.typing.show { display:inline-flex; }
.typing i { width:8px; height:8px; border-radius:50%; background:var(--ink-60); animation:blink 1s infinite; }
.typing i:nth-child(2){ animation-delay:.18s; } .typing i:nth-child(3){ animation-delay:.36s; }
@keyframes blink { 0%,80%,100%{ opacity:.25; transform:translateY(0);} 40%{ opacity:1; transform:translateY(-3px);} }

/* 熱量卡片（組裝式） */
.kcal-card { align-self:flex-start; width:min(320px,90%); background:#fff; border:var(--bd); border-radius:var(--r-el); box-shadow:var(--sh); padding:16px 16px 40px; opacity:0; transform:scale(.7,1.2); position:relative; }
.kcal-card.show { animation:bubblePop .45s var(--ease-pop) forwards; }
.kcal-card .row { font-size:14px; margin-bottom:4px; color:var(--ink-70); }
.kcal-card .total { font-size:15px; font-weight:900; margin:10px 0 12px; }
.kcal-card .total b { font-size:26px; color:var(--orange-deep); font-variant-numeric:tabular-nums; }
.macro { display:grid; grid-template-columns:52px 1fr 44px; align-items:center; gap:8px; font-size:12.5px; font-weight:700; margin-bottom:7px; }
.macro .bar { height:12px; background:var(--track); border:var(--bd2); border-radius:var(--r-pill); overflow:hidden; }
.macro .bar i { display:block; height:100%; width:0; border-radius:var(--r-pill); transition:width .7s var(--ease-pop); }
.macro.p .bar i { background:var(--teal); } .macro.c .bar i { background:var(--orange); } .macro.f .bar i { background:var(--blush); }
.stamp { position:absolute; right:-14px; bottom:-16px; width:84px; opacity:0; transform:scale(2.2) rotate(-18deg); }
.stamp.show { animation:stampIn .35s cubic-bezier(.3,1.4,.5,1) forwards; }
@keyframes stampIn { 0%{ opacity:0; transform:scale(2.2) rotate(-18deg);} 100%{ opacity:1; transform:scale(1) rotate(-8deg);} }
.chat-dots { position:absolute; right:16px; bottom:12px; display:flex; gap:8px; }
.chat-dots button { width:12px; height:12px; border-radius:50%; border:var(--bd2); background:#fff; cursor:pointer; padding:0; }
.chat-dots button.on { background:var(--orange); }

/* ============ 區段底色節奏 ============ */
.band-cream { background:var(--bg); }
.band-teal { background:var(--teal-tint); border-top:var(--bd); border-bottom:var(--bd); }
.band-orange { background:var(--orange-tint); border-top:var(--bd); border-bottom:var(--bd); }

/* ============ 功能區 ============ */
.feat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px; }
@media (max-width:860px){ .feat-grid { grid-template-columns:1fr; } }
.feat { padding:26px; }
.feat .icon { width:88px; height:88px; margin-bottom:14px; }
.feat h3 { font-size:20px; font-weight:900; margin-bottom:8px; }
.feat p { font-size:15px; color:var(--ink-70); }
.feat .demo-bubble { margin-top:16px; background:var(--cream); border:var(--bd2); border-radius:14px; padding:10px 14px; font-size:13.5px; color:var(--ink-70); }
.feat .demo-bubble b { color:var(--ink); }

/* 台灣在地：貼紙陣列 */
.local-strip { display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin-top:40px; }
.local-strip img { width:110px; }
.local-tags { display:flex; gap:12px; flex-wrap:wrap; margin-top:32px; justify-content:center; }
.local-tags span { background:#fff; border:var(--bd2); border-radius:var(--r-pill); box-shadow:3px 3px 0 var(--ink); padding:8px 18px; font-weight:700; font-size:14.5px; }

/* 喵教練：訊息卡（讓教練說的話自己展示價值） */
.coach-wrap { position:relative; margin-top:64px; }
.coach-cat { position:absolute; top:-58px; right:14px; height:104px; width:auto; transform:rotate(6deg); z-index:1; filter:drop-shadow(2px 3px 0 rgba(59,33,26,.18)); }
@media (max-width:860px){ .coach-cat { height:84px; top:-48px; right:6px; } }
.coach-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
@media (max-width:860px){ .coach-grid { grid-template-columns:1fr; } }
.coach-card { padding:22px; }
.coach-card .label { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:900; color:var(--teal-deep); letter-spacing:.06em; margin-bottom:14px; }
.coach-card .label::before { content:""; width:10px; height:10px; border-radius:50%; background:var(--teal); border:2px solid var(--ink); }
.coach-msg { background:var(--cream); border:var(--bd2); border-radius:16px; border-top-left-radius:6px; padding:14px 16px; font-size:14.5px; line-height:1.7; }
.coach-msg + .coach-msg { margin-top:10px; }
.coach-msg.from-user { background:var(--teal); color:#fff; border-radius:16px; border-bottom-right-radius:6px; font-weight:700; margin-left:auto; width:fit-content; max-width:85%; }
.coach-msg .num { font-weight:900; color:var(--orange-deep); }
.coach-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:12px; }
.coach-stats .st { background:#fff; border:var(--bd2); border-radius:12px; padding:10px 6px; text-align:center; }
.coach-stats .st b { display:block; font-size:19px; font-weight:900; font-variant-numeric:tabular-nums; }
.coach-stats .st.up b { color:var(--teal-deep); }
.coach-stats .st span { font-size:11.5px; color:var(--ink-60); font-weight:700; }
.coach-card .note { font-size:13.5px; color:var(--ink-60); margin-top:12px; }

/* 運動與體重 */
.split { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:stretch; margin-top:44px; }
@media (max-width:900px){ .split { grid-template-columns:1fr; } }
/* LIFF Trends 畫面複刻（樣式抄 web/src/screens/Trends.module.css + SegmentedControl.module.css） */
.phone { width:min(350px,100%); margin:0 auto; background:var(--bg); border:var(--bd); border-radius:32px; box-shadow:var(--sh5); overflow:hidden; display:flex; flex-direction:column; }
.phone .linebar { display:flex; align-items:center; justify-content:space-between; padding:10px 16px; background:#fff; border-bottom:var(--bd2); font-weight:900; font-size:12.5px; color:var(--ink-60); }
.phone .screen { padding:12px 16px 22px; flex:1; display:flex; flex-direction:column; }
.phone .screen .liff-card + .liff-card { margin-top:14px; }
.liff-legend .sw { display:inline-block; width:10px; height:10px; border-radius:3px; border:1.5px solid var(--ink); }
.liff-legend .sw.ok { background:var(--teal); }
.liff-legend .sw.over { background:var(--warn); }
#kchart .bar { stroke:var(--ink); stroke-width:1.5; }
#kchart .bar.ok { fill:var(--teal); }
#kchart .bar.over { fill:var(--warn); }
.liff-topbar { display:flex; align-items:center; gap:10px; padding:2px 0 10px; }
.liff-back { width:34px; height:34px; border:var(--bd2); border-radius:var(--r-pill); background:#fff; box-shadow:3px 3px 0 var(--ink); display:grid; place-items:center; font-weight:900; font-size:15px; }
.liff-h1 { font-weight:900; font-size:19px; }
.liff-seg { display:flex; background:var(--cream); border:var(--bd2); border-radius:var(--r-pill); padding:4px; box-shadow:var(--sh); margin-bottom:14px; }
.liff-seg span { flex:1; text-align:center; font-weight:900; font-size:12.5px; padding:7px 0; color:rgba(59,33,26,.55); border-radius:var(--r-pill); }
.liff-seg span.on { background:var(--teal); color:#fff; border:var(--bd2); box-shadow:2px 2px 0 var(--ink); padding:5px 0; }
.liff-card { background:#fff; border:var(--bd); border-radius:20px; box-shadow:var(--sh5); padding:14px 14px 10px; }
.liff-cardhead { display:flex; align-items:baseline; justify-content:space-between; }
.liff-cardtitle { font-weight:900; font-size:14px; }
.liff-logbtn { font-weight:900; font-size:11.5px; padding:5px 12px; border:var(--bd2); border-radius:var(--r-pill); background:var(--teal); color:#fff; box-shadow:2px 2px 0 var(--ink); }
.liff-bignum { display:flex; align-items:baseline; gap:8px; margin:8px 2px 2px; }
.liff-bignum .n { font-weight:900; font-size:28px; line-height:1; }
.liff-bignum .u { font-weight:900; font-size:12px; color:rgba(59,33,26,.55); }
.liff-delta { font-weight:900; font-size:10.5px; border:2px solid var(--ink); border-radius:var(--r-pill); padding:2px 9px; box-shadow:2px 2px 0 var(--ink); background:var(--teal); color:#fff; }
.liff-legend { display:flex; gap:12px; margin:6px 4px; }
.liff-legend span { display:flex; align-items:center; gap:5px; font-weight:900; font-size:10px; color:var(--ink-60); }
.lg-w { display:inline-block; width:16px; border-top:3px solid var(--teal); border-radius:2px; }
.lg-g { display:inline-block; width:16px; border-top:2.5px dashed var(--orange); }
#wchart .axis { font-weight:900; font-size:9.5px; fill:rgba(59,33,26,.45); }
#wchart .gridline { stroke:rgba(59,33,26,.1); stroke-width:1; }
#wchart path.line { stroke:var(--teal); stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:420; stroke-dashoffset:420; }
#wchart.draw path.line { transition:stroke-dashoffset 1.6s ease-out; stroke-dashoffset:0; }
#wchart circle { fill:var(--teal); stroke:var(--ink); stroke-width:2; opacity:0; transition:opacity .3s ease 1.3s; }
#wchart.draw circle { opacity:1; }
.check-list { list-style:none; margin-top:20px; }
.check-list li { display:flex; gap:12px; margin-bottom:16px; font-size:16px; }
.check-list li b { display:block; font-size:16.5px; }
.check-list li span.small { font-size:14px; color:var(--ink-70); font-weight:400; }
.check-list .dot { flex:none; width:26px; height:26px; border-radius:50%; border:var(--bd2); background:var(--orange); color:#fff; font-weight:900; font-size:14px; display:flex; align-items:center; justify-content:center; margin-top:2px; }

/* 成就圖鑑：神秘牆 */
.wall { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:44px auto 0; max-width:720px; }
@media (max-width:720px){ .wall { grid-template-columns:repeat(2,1fr); max-width:420px; } }
.wall .tile { border:var(--bd); border-radius:var(--r-el); box-shadow:var(--sh); overflow:hidden; background:#fff; opacity:0; transform:scale(.6) rotate(0deg); position:relative; }
.wall .tile.slam { animation:slam .4s var(--ease-pop) forwards; }
@keyframes slam { 0%{ opacity:0; transform:scale(1.5) rotate(0);} 100%{ opacity:1; transform:scale(1) rotate(var(--tilt));} }
.wall video { width:100%; aspect-ratio:1; object-fit:cover; }
.wall .tile .badge { position:absolute; left:50%; bottom:10px; transform:translateX(-50%); background:var(--orange); color:#fff; font-size:12px; font-weight:900; border:var(--bd2); border-radius:var(--r-pill); padding:3px 12px; white-space:nowrap; }
.wall .tile.mystery { background:var(--cream); display:flex; align-items:center; justify-content:center; aspect-ratio:1; cursor:default; }
.wall .tile.mystery img { width:72%; opacity:.16; transition:transform .3s var(--ease-pop); }
.wall .tile.mystery .q { position:absolute; font-size:clamp(34px,4vw,48px); font-weight:900; color:var(--ink); opacity:.85; text-shadow:2px 2px 0 var(--cream); }
.wall .tile.mystery:hover img { transform:rotate(-4deg) scale(1.06); }

/* 定價：免費 vs 教練 PASS 對照表 × 票卡（視覺語彙自 web/mockups/purchase-v3.html） */
.pass-grid { display:grid; grid-template-columns:1.15fr 1fr; gap:32px; margin-top:44px; align-items:start; }
@media (max-width:900px){ .pass-grid { grid-template-columns:1fr; } }
/* 對照表 */
.cmp { background:#fff; border:var(--bd); border-radius:var(--r-card); box-shadow:var(--sh); overflow:hidden; text-align:left; }
.cmp .hd { display:grid; grid-template-columns:1fr 96px 130px; border-bottom:var(--bd2); }
.cmp .hd div { padding:12px 8px; font-weight:900; font-size:14.5px; display:flex; align-items:center; justify-content:center; }
.cmp .hd .fn { justify-content:flex-start; padding-left:18px; }
.cmp .hd .free { border-left:1.5px solid rgba(59,33,26,.2); color:var(--ink-60); }
.cmp .hd .pro { border-left:var(--bd2); background:var(--teal); color:#fff; }
.cmp .rw { display:grid; grid-template-columns:1fr 96px 130px; border-bottom:1.5px solid rgba(59,33,26,.13); }
.cmp .rw:last-child { border-bottom:none; }
.cmp .rw > div { padding:12px 8px; display:flex; align-items:center; justify-content:center; text-align:center; }
.cmp .gp { grid-column:1/-1; background:var(--cream); padding:7px 18px; font-weight:900; font-size:13px; color:var(--ink-70); justify-content:flex-start; letter-spacing:.5px; }
.cmp .fn2 { justify-content:flex-start; text-align:left; padding-left:18px; font-weight:900; font-size:14.5px; flex-direction:column; align-items:flex-start; gap:2px; }
.cmp .fn2 small { font-weight:700; font-size:11.5px; color:var(--ink-60); }
.cmp .free2 { border-left:1.5px solid rgba(59,33,26,.2); font-weight:900; font-size:13px; color:var(--ink-60); }
.cmp .pro2 { border-left:var(--bd2); background:#eaf7f5; font-weight:900; font-size:13px; color:var(--teal-deep); }
.cmp .no { color:rgba(59,33,26,.28); }
/* 安撫條 */
.keep { display:flex; align-items:center; gap:10px; background:var(--cream); border:1.5px dashed var(--ink); border-radius:var(--r-el); padding:12px 16px; font-weight:700; font-size:14px; color:var(--ink-70); margin-top:16px; text-align:left; }
.keep b { color:var(--ink); font-weight:900; }
/* 票卡 */
.tix { display:flex; flex-direction:column; gap:16px; }
.tix .brand-row { text-align:center; }
.pass-brand { display:inline-block; font-weight:900; font-size:12px; letter-spacing:2px; color:var(--teal-deep); background:#fff; border:var(--bd2); border-radius:var(--r-pill); padding:3px 12px; box-shadow:2px 2px 0 var(--ink); }
.tk { position:relative; display:flex; background:#fff; border:var(--bd2); border-radius:16px; box-shadow:var(--sh); text-align:left; text-decoration:none; transition:transform .15s var(--ease-pop), box-shadow .15s var(--ease-pop); }
.tk:hover { transform:translateY(-2px); box-shadow:6px 6px 0 var(--ink); }
.tk .clip { flex:1; display:flex; border-radius:13px; overflow:hidden; position:relative; }
.tk .clip::before, .tk .clip::after { content:""; position:absolute; left:104px; width:18px; height:18px; background:var(--bg); border:2px solid var(--ink); border-radius:var(--r-pill); z-index:2; }
.tk .clip::before { top:-10px; }
.tk .clip::after { bottom:-10px; }
.tk .stub { flex:0 0 113px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:16px 8px; background:var(--cream); border-right:2px dashed rgba(59,33,26,.45); }
.tk .stub .n { font-weight:900; font-size:21px; }
.tk .stub .u { font-weight:900; font-size:11.5px; color:var(--ink-60); letter-spacing:.5px; }
.tk .bodyy { flex:1; padding:14px 34px 14px 18px; display:flex; flex-direction:column; justify-content:center; gap:2px; }
.tk .pr { font-weight:900; font-size:21px; color:var(--teal-deep); }
.tk .per { font-weight:700; font-size:12.5px; color:var(--ink-60); }
.tk .save { align-self:flex-start; margin-top:4px; font-weight:900; font-size:11px; color:#fff; background:var(--orange); border:2px solid var(--ink); border-radius:var(--r-pill); padding:1px 9px; box-shadow:1.5px 1.5px 0 var(--ink); }
.tk .bar { position:absolute; right:11px; top:13px; bottom:13px; width:14px; background:repeating-linear-gradient(90deg,rgba(59,33,26,.5) 0 1.5px,transparent 1.5px 4.5px); }
.tk .ser { position:absolute; right:30px; bottom:4px; font-weight:900; font-size:8.5px; letter-spacing:1.5px; color:rgba(59,33,26,.38); }
.tk.sel { border:var(--bd); border-color:var(--teal-deep); box-shadow:var(--sh), 0 0 0 2.5px var(--teal) inset; background:#f2fbfa; }
.tk.sel .stub { background:#ddf1ee; border-right-color:rgba(43,134,127,.6); }
.tk .ribbon { position:absolute; top:-12px; right:12px; background:var(--orange); color:#fff; border:var(--bd2); border-radius:var(--r-pill); padding:2px 12px; font-weight:900; font-size:12px; box-shadow:2px 2px 0 var(--ink); z-index:3; }
.tix .btn { justify-content:center; margin-top:6px; }
.can-note { display:flex; gap:18px; align-items:center; margin-top:36px; padding:20px 24px; }
.can-note img { width:72px; flex:none; }
.can-note p { font-size:14.5px; color:var(--ink-70); }
.can-note b { color:var(--ink); }

/* FAQ */
.faq { max-width:720px; margin:44px auto 0; }
.faq details { background:#fff; border:var(--bd2); border-radius:var(--r-el); box-shadow:var(--sh); margin-bottom:14px; overflow:hidden; }
.faq summary { cursor:pointer; font-weight:900; font-size:16px; padding:18px 22px; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.faq summary::after { content:"+"; font-size:22px; font-weight:900; color:var(--teal-deep); }
.faq details[open] summary::after { content:"−"; }
.faq .a { padding:0 22px 18px; font-size:14.5px; color:var(--ink-70); }

/* 尾段 CTA */
.final { text-align:center; padding:110px 0 120px; }
.final .cat { width:min(280px,60vw); margin:0 auto 8px; position:relative; }
.final .cat img { width:100%; transition:opacity .15s ease; }
.final .cat img.sparkle { position:absolute; inset:0; opacity:0; }
.final .cat:hover img.sparkle { opacity:1; animation:hop .5s var(--ease-pop); }
.final .cat:hover img.wave { opacity:0; }
@keyframes hop { 0%{transform:translateY(0) scale(1,1);} 35%{transform:translateY(-12px) scale(.96,1.06);} 70%{transform:translateY(0) scale(1.05,.95);} 100%{transform:scale(1,1);} }
.final h2 { font-size:clamp(30px,4.5vw,44px); font-weight:900; margin-bottom:14px; }
.final p { color:var(--ink-70); font-size:17px; margin-bottom:30px; }
.qr-box { width:132px; height:132px; margin:28px auto 0; background:#fff; border:var(--bd2); border-radius:var(--r-el); box-shadow:var(--sh); display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--ink-60); font-weight:700; }

/* footer */
footer { border-top:var(--bd); background:var(--cream); padding:40px 0 48px; }
.foot { display:flex; flex-wrap:wrap; gap:28px; align-items:center; justify-content:space-between; }
.foot .brand { display:flex; align-items:center; gap:10px; font-weight:900; }
.foot .brand img { width:30px; }
.foot nav { display:flex; gap:22px; flex-wrap:wrap; font-size:14px; }
.foot nav a { color:var(--ink-70); text-decoration:none; font-weight:500; }
.foot nav a:hover { color:var(--ink); text-decoration:underline; }
.foot .copy { width:100%; font-size:12.5px; color:var(--ink-60); }

/* ============ 法務/資訊頁:quiet 版型,無動效 ============ */
.legal { max-width:720px; margin:0 auto; padding:48px 20px 96px; }
.legal h1 { font-size:clamp(26px,4vw,36px); font-weight:900; margin-bottom:8px; }
.legal .updated { font-size:13px; color:var(--ink-60); margin-bottom:32px; }
.legal h2 { font-size:19px; font-weight:900; margin:32px 0 10px; }
.legal p, .legal li { font-size:15px; color:var(--ink-70); line-height:1.9; }
.legal ul, .legal ol { padding-left:22px; margin:8px 0; }
.legal .pop { opacity:1; transform:none; animation:none; }