/* ============================================================
   /pricing 分頁 v3「一位賓客的餐費」｜pricing/pricing.css（2026-10-04）
   ------------------------------------------------------------
   概念：把價格做成一張看得見、算得出來的帳單。
     頁首  一張紙質收據（鋸齒撕邊、等寬數字、虛線分隔），中間一支人數滑桿，
           即時算出「每位賓客多少錢」，底下蓋一枚深綠蠟封「婚禮零出包保證」。
     01 方案  三張價目表卡（桌機等寬等高；主打卡只靠材質＋徽章＋大一號價格）
     02 保證  一張保證書（雙線細框、編號、蠟封會「蓋」上去）
     03 對照  左：一張扁平的圖寄出去之後的聊天室／右：手機裡的互動喜帖，下方編輯式對照表
     04 常見問題  五組、左欄 sticky 組名＋右欄題目，details 順滑展開

   所有 class 前綴 px-；共用骨架（.pv-*）在 shared/pages.css，這裡不改它。
   降級鐵則（DESIGN §9）：預設 CSS＝完成態。凡是「先藏再演」只寫在 html.pv-motion 底下；
   需要 JS 才會點亮的隱藏態另外再綁 html.px-js（pricing.js 一載入就掛），
   所以腳本沒載到時什麼都不會停在藏起來的狀態。
   ============================================================ */

html, body { overflow-x: clip; }
.px-main { display: block; }
.px-nw { white-space: nowrap; }
.px-main .pv-sub, .pv-end p { text-wrap: balance; }
.px-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.pv-ch-head { isolation: isolate; }   /* 巨型章碼 z-index:-1 要壓在標題後面、但在區塊底色之上 */
/* 區塊接縫不能看見「換紙」的直線：紙紋上下淡出、葉影不貼底緣 */
.px-main .atmo {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 20%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 20%, #000 78%, transparent 100%);
}
.px-main [id] { scroll-margin-top: calc(var(--sn-h) + 1rem); }

/* 鋸齒撕邊（收據、小單）：下緣一排朝下的三角齒，用 mask 切，所以陰影要掛在外層 */
.px-teeth {
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 18px 9px repeat-x;
  mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 18px 9px repeat-x;
}

/* ════════════════ 頁首 ════════════════ */
@media (min-width: 900px) {
  .px-hero .pv-hero-in { grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr); }
  .px-hero .pv-hero-copy { max-width: none; }
  /* 只動上限：900–1440 之間 h1 兩句各自不斷行（每句 8–9 字，欄寬 ≥ 字數 × 字級） */
  .px-hero .pv-h1 { font-size: clamp(2.1rem, 3.9vw, 3.4rem); }
}
@media (max-width: 899px) {
  .px-hero .pv-h1 { font-size: clamp(1.7rem, 8.4vw, 2.6rem); }
}
.px-h1a, .px-h1b { display: block; white-space: nowrap; }
.px-hero .pv-lead { max-width: 31em; }
.px-lead-more { display: none; }
@media (min-width: 900px) { .px-lead-more { display: inline; } }
.px-bot-hero { right: 1.5%; bottom: 5%; width: clamp(6rem, 8vw, 8.5rem); --bot-o: .7; }
@media (max-width: 1299px) { .px-bot-hero { display: none; } }

.px-obj {
  position: relative;
  display: grid;
  justify-items: center;
  padding: .5rem 0 1.8rem;
  /* 紙的柔影：吃的是 mask 之後的輪廓，所以放在外層。跟 --shadow-soft 同一個走向（大範圍、低透明）。 */
  filter: drop-shadow(0 22px 22px rgba(34, 39, 31, .13));
}

/* 壓在後面的小單：免費方案（裝飾） */
.px-slip {
  display: none;
  position: absolute;
  z-index: 0;
  right: calc(50% + min(50%, 12.25rem) - .5rem);
  top: 1.2rem;
  width: 10.4rem;
  padding: .95rem 1rem 1.5rem;
  background: var(--paper-raise);
  box-shadow: inset 0 0 0 1px var(--hairline);
  transform: rotate(-7deg);
  transform-origin: 70% 100%;
  color: var(--ink);
}
@media (min-width: 1200px) { .px-slip { display: block; } }
@media (max-width: 1199px) {
  .px-slip {
    display: block; z-index: 4; right: auto; width: 5.6rem; padding: .4rem .55rem .85rem;
    left: calc(50% - min(50%, 12.25rem) + .35rem); top: .4rem; transform: rotate(-6deg); transform-origin: 0 0;
  }
  .px-obj .px-slip-k { font-size: .66rem; letter-spacing: .14em; }
  .px-obj .px-slip-n { font-size: 1.4rem; margin-top: 0; }
}
.px-slip-k { font-size: var(--text-tiny); letter-spacing: .2em; color: var(--ink-soft); }
.px-slip-n { white-space: nowrap; margin-top: .2rem; font-family: var(--font-serif-latin); font-style: italic; font-size: 2.3rem; line-height: 1.1; color: var(--accent); }
.px-slip-t { margin-top: .15rem; font-size: .75rem; letter-spacing: .04em; color: var(--ink-soft); line-height: 1.5; }

/* ── 收據 ── */
.px-receipt {
  position: relative;
  z-index: 1;
  width: min(100%, 24.5rem);
  /* 上緣＝出紙口：紙從這條線往下「印」出來，線以上不畫（左右下給蠟封與撕邊留空） */
  clip-path: inset(0 -4rem -4rem -4rem);
}
.px-rc {
  position: relative;
  padding: 1.7rem 1.55rem 2.9rem;
  background: var(--paper-raise);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--hairline);
  font-variant-numeric: tabular-nums lining-nums;
}
.px-rc::before {   /* 紙纖維 */
  content: "";
  position: absolute;
  inset: 0;
  background: url(/landing/assets/hero-atmo.webp) center / cover no-repeat;
  mix-blend-mode: multiply;
  opacity: .05;
  pointer-events: none;
}
.px-rc > * { position: relative; }

.px-rc-head { text-align: center; padding-bottom: 1.1rem; border-bottom: 1.5px dashed color-mix(in srgb, var(--ink) 32%, transparent); }
.px-rc-title { font-size: 1.25rem; font-weight: 700; letter-spacing: .38em; text-indent: .38em; }
.px-rc-sub {
  margin-top: .35rem;
  display: flex; justify-content: center; gap: .5rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft);
}
.px-rc-sub span + span::before { content: "·"; margin-right: .5rem; }

/* 收據頂端的方案切換（2026-11-01 兩級）：像收據上的兩個勾選格，不做成 App 式分段控制 */
.px-rc-plans { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin: 1rem 0 0; padding: 0; border: 0; min-width: 0; }
.px-rc-plans label { position: relative; display: block; cursor: pointer; }
.px-rc-plans input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.px-rc-plans span {
  display: grid; place-items: center; min-height: 44px;
  border-radius: .45rem;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 28%, transparent);
  font-size: var(--text-small); letter-spacing: .14em;
  transition: background .3s var(--ease-out), color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.px-rc-plans input:checked + span { background: var(--ink); color: var(--paper-raise); box-shadow: none; }
.px-rc-plans input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.px-rc-plans input:not(:checked):hover + span { box-shadow: inset 0 0 0 1px var(--ink); }
.px-rc-lines { margin-top: 1rem; display: grid; gap: .55rem; }
.px-rc-lines > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.px-rc-lines dt { font-size: var(--text-small); letter-spacing: .08em; }
.px-rc-lines dt small { display: block; font-size: .7rem; letter-spacing: .1em; color: var(--ink-soft); }
.px-rc-lines dd {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;
  font-size: .95rem; letter-spacing: .02em; white-space: nowrap;
}
.px-rc-lines output { font: inherit; }

/* 人數滑桿：原生 range，拇指有效點擊區 44px */
.px-range { margin-top: 1rem; }
.px-range label { display: block; font-size: var(--text-tiny); letter-spacing: .14em; color: var(--ink-soft); }
.px-range input {
  --f: .4286;                       /* 0–1：目前位置（JS 更新；預設＝200 位） */
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: 44px; margin: .1rem 0 0; background: transparent; cursor: pointer; touch-action: pan-y;
  border-radius: 22px;
}
.px-range input::-webkit-slider-runnable-track {
  height: 2px;
  background: linear-gradient(90deg, var(--accent) calc(22px + (100% - 44px) * var(--f)), color-mix(in srgb, var(--ink) 24%, transparent) 0);
}
.px-range input::-moz-range-track { height: 2px; background: color-mix(in srgb, var(--ink) 24%, transparent); }
.px-range input::-moz-range-progress { height: 2px; background: var(--accent); }
.px-range input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  box-sizing: border-box; width: 44px; height: 44px; margin-top: -21px;
  border: 10px solid transparent; border-radius: 50%;
  background: var(--accent) padding-box;
  transition: transform .35s var(--ease-out);
}
.px-range input::-moz-range-thumb {
  box-sizing: border-box; width: 44px; height: 44px;
  border: 10px solid transparent; border-radius: 50%;
  background: var(--accent) padding-box; background-clip: padding-box;
}
.px-range input:active::-webkit-slider-thumb { transform: scale(1.12); }
.px-range input:focus-visible { outline: none; }
.px-range input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--accent); outline-offset: -3px; }
.px-range input:focus-visible::-moz-range-thumb { outline: 2px solid var(--accent); outline-offset: -3px; }
.px-ticks { position: relative; height: 1.25rem; margin-top: .1rem; pointer-events: none; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .72rem; color: var(--ink-soft); letter-spacing: .04em; }
.px-ticks span { position: absolute; top: 0; left: calc(22px + (100% - 44px) * var(--t)); transform: translateX(-50%); }
.px-ticks span::before { content: ""; position: absolute; left: 50%; top: -.35rem; width: 1px; height: .3rem; background: currentColor; opacity: .5; }

.px-rc-total { margin-top: .9rem; padding-top: .95rem; border-top: 1.5px dashed color-mix(in srgb, var(--ink) 32%, transparent); text-align: center; }
.px-rc-k { font-size: var(--text-tiny); letter-spacing: .34em; text-indent: .34em; color: var(--ink-soft); }
.px-rc-big {
  display: flex; align-items: baseline; justify-content: center; gap: .35rem;
  margin-top: .1rem;
  font-family: var(--font-serif-latin); font-style: italic; font-weight: 500;
  color: var(--accent); line-height: 1.05;
}
.px-rc-big small { font-size: 1.35rem; letter-spacing: .06em; }
.px-rc-big span { font-size: clamp(4.4rem, 15vw, 5.6rem); letter-spacing: -.02em; min-width: 3.4ch; text-align: left; }
.px-rc-eq { margin-top: .2rem; font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace; font-size: .74rem; letter-spacing: .04em; color: var(--ink-soft); }
.px-rc-eq b { font-weight: 600; color: var(--ink); }

.px-rc-foot { margin-top: 1rem; text-align: center; font-size: var(--text-tiny); letter-spacing: .1em; color: var(--ink-soft); }
.px-rc-bar {
  height: 1.7rem; margin: .8rem auto 0; width: 62%;
  background: repeating-linear-gradient(90deg,
    var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px,
    var(--ink) 8px 11px, transparent 11px 12px, var(--ink) 12px 13px, transparent 13px 17px);
  opacity: .72;
}

/* 蠟封（收據與保證書共用） */
.px-seal {
  position: absolute;
  z-index: 3;
  width: 5.6rem;
  aspect-ratio: 1;
  right: 1.1rem;
  bottom: -1.7rem;
  transform: rotate(-12deg);
  pointer-events: none;
}
.px-seal svg { display: block; width: 100%; height: 100%; overflow: visible; }
.px-seal text { font-family: var(--font-serif-tc); }

/* 頁首入場（純 CSS 動畫：不依賴 JS，演完就是完成態）：紙從出紙口往下印、蠟封最後蓋上去 */
html.pv-motion .px-rc { animation: px-print 1.7s cubic-bezier(.28, .78, .24, 1) .35s both; }
html.pv-motion .px-receipt .px-seal { animation: px-stamp .7s cubic-bezier(.2, .9, .3, 1.15) 1.85s both; }
@keyframes px-print { from { transform: translateY(-101%); } to { transform: none; } }
@keyframes px-stamp {
  from { opacity: 0; transform: rotate(-34deg) scale(1.9); }
  42%  { opacity: 1; transform: rotate(-12deg) scale(.88); }
  64%  { transform: rotate(-12deg) scale(1.07); }
  82%  { transform: rotate(-12deg) scale(.98); }
  to   { opacity: 1; transform: rotate(-12deg) scale(1); }
}

@media (max-width: 899px) {
  .px-hero { min-height: 0; padding-top: 1.3rem; padding-bottom: 2rem; }
  .px-hero .pv-hero-in { gap: 1.3rem; }
  .px-hero .pv-lead { margin-top: .8rem; }
  .px-hero .pv-act { margin-top: 1rem; }
  .px-hero .pv-act .pg-quiet { display: none; }
  .px-hero .btn { padding-block: .7rem; }
  .px-obj { padding-top: 0; padding-bottom: 2.4rem; }
  .px-rc { padding-top: 1.3rem; }
  .px-rc-head { padding-bottom: .8rem; }
  .px-rc-sub { display: none; }
  .px-rc-lines { margin-top: .75rem; gap: .35rem; }
  .px-receipt { width: min(100%, 23.5rem); }
}

/* ════════════════ 01 方案 ════════════════ */
.px-bot-plans { right: 1.5%; bottom: 5%; width: clamp(6rem, 8vw, 8.5rem); --bot-o: .7; }
@media (max-width: 1299px) { .px-bot-plans { display: none; } }

.px-cards {
  position: relative;
  display: grid;
  gap: 1.1rem;
  margin: clamp(2rem, 5vw, 3.2rem) auto 0;
  max-width: min(100%, 40rem);
}
/* DOM 順序＝視覺順序＝免費→基礎版→進階版（桌機左中右、手機上到下、鍵盤一致，不用 order 換位）；
   全客製是三欄下面的獨立寬卡（.px-bespoke），不在這個 grid 裡 */
@media (min-width: 1180px) {
  .px-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; gap: 1.25rem; align-items: stretch; }
}
/* 手機：方案錨點小膠囊（可點、≥44px），桌機不需要 */
.px-jump {
  position: sticky; top: calc(var(--sn-h) + .4rem); z-index: 6;
  display: flex; gap: .5rem; margin: clamp(1.2rem, 4vw, 1.8rem) auto 0; max-width: min(100%, 40rem); padding: .35rem; border-radius: 999px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--hairline), 0 6px 14px -8px rgba(34, 39, 31, .25);
}
.px-jump small { margin-left: .2em; font-family: var(--font-serif-tc); font-style: normal; font-size: .62em; letter-spacing: .06em; }
.px-jump + .px-cards { margin-top: .9rem; }
.px-jump a {
  flex: 1 1 0; min-width: 0; min-height: 44px; display: grid; place-content: center; justify-items: center;
  padding: .3rem .4rem; border-radius: 999px; text-decoration: none; text-align: center;
  box-shadow: inset 0 0 0 1px var(--hairline); line-height: 1.25;
  transition: box-shadow .35s var(--ease-out);
}
.px-jump a:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.px-jump b { font-size: .8rem; font-weight: 600; letter-spacing: .08em; }
.px-jump span { font-family: var(--font-serif-latin); font-style: italic; font-size: .9rem; color: var(--ink-soft); }
.px-jump a[aria-current="true"] { background: var(--accent); box-shadow: none; color: var(--accent-ink); }
.px-jump a[aria-current="true"] span { color: var(--accent-ink); }
@media (min-width: 1180px) { .px-jump { display: none; } }

/* 基礎版／進階版清單：手機預設每組前 1 條＋「展開全部」（JS 才加 .is-collapsible；RM／無 JS 全展開） */
.px-groups.is-collapsible:not(.is-open) .px-list li:nth-child(n+2) { display: none; }
.px-free-body.is-collapsible:not(.is-open) > .px-list li:nth-child(n+4),
.px-free-body.is-collapsible:not(.is-open) > .px-covers { display: none; }
.px-card-free .px-more,
.px-card-basic .px-more { color: var(--ink); box-shadow: inset 0 0 0 1px var(--hairline); }
.px-more {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; min-height: 44px; margin-top: 1rem; border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(242, 241, 236, .5);
  color: var(--accent-ink); font-size: var(--text-small); letter-spacing: .12em;
}
.px-more i { width: .7rem; height: .7rem; position: relative; flex: none; }
.px-more i::before, .px-more i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; transition: transform .45s var(--ease-out); }
.px-more i::after { transform: rotate(90deg); }
.px-more[aria-expanded="true"] i::after { transform: rotate(0); }
.px-fine { margin-top: .5rem; font-size: var(--text-tiny); letter-spacing: .08em; color: var(--ink-soft); }

.px-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.9rem 1.7rem 1.7rem;
  border-radius: var(--radius);
  background: var(--paper-raise);
  box-shadow: inset 0 0 0 1px var(--hairline);
  overflow: clip;
  min-width: 0;
}
.px-card > * { position: relative; z-index: 1; }
.px-card-k {
  display: flex; align-items: baseline; gap: .7rem;
  font-family: var(--font-serif-latin); font-style: italic; font-size: 1rem; letter-spacing: .12em; color: var(--accent);
}
.px-card-k span { font-size: .78rem; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-soft); font-style: normal; }
.px-card h3 { margin-top: .3rem; font-size: var(--text-h3); font-weight: 600; letter-spacing: .14em; line-height: 1.4; }

/* 價格塊：上說明／價格／下說明，三張卡同一個骨架，清單才會齊頭起跑 */
.px-pb { margin-top: 1.1rem; }
.px-pre { min-height: 1.5rem; font-size: var(--text-small); letter-spacing: .1em; color: var(--ink-soft); }
/* 三張卡的價格基線要齊：數字的 line-height 取 (ascent−descent)≈.64，基線就落在行盒底，
   不同字級的數字貼同一條底線；容器固定高度、整行靠底。 */
.px-price {
  display: flex; flex-wrap: wrap; align-items: baseline; align-content: flex-end; gap: 0 .4rem;
  height: 5.6rem;
  font-family: var(--font-serif-latin); font-style: italic; line-height: 1;
  color: var(--ink);
}
.px-cur { font-size: 1.15rem; letter-spacing: .08em; color: var(--ink-soft); }
.px-amt { font-size: 3.5rem; font-weight: 500; letter-spacing: -.015em; line-height: .64; }
.px-price small { margin-left: .25rem; font-family: var(--font-serif-tc); font-style: normal; font-size: .95rem; letter-spacing: .1em; color: var(--ink-soft); }
.px-terms { margin-top: .7rem; }
.px-post { font-size: var(--text-tiny); letter-spacing: .05em; line-height: 1.6; color: var(--ink-soft); }

.px-list { margin-top: 1.1rem; border-top: 1px solid var(--hairline); }
.px-list li { padding: .72rem 0; border-bottom: 1px solid var(--hairline); font-size: var(--text-small); line-height: 1.7; color: var(--ink-soft); }
.px-list strong { color: var(--ink); font-weight: 600; }
/* 免費卡的物件：六種風格的真封面（版面空出來的地方要有展品） */
.px-covers { margin-top: 1.4rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem .6rem; }
.px-covers li { display: grid; gap: .3rem; justify-items: center; }
.px-covers img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: .45rem; box-shadow: inset 0 0 0 1px var(--hairline); background: var(--paper); }
.px-covers span { font-size: .66rem; letter-spacing: .06em; line-height: 1.3; color: var(--ink-soft); text-align: center; }
/* 全客製卡的物件：三款作品扇形疊著 */
.px-strip { width: 100%; margin: 1.5rem 0 .6rem; display: flex; justify-content: center; padding-inline: .2rem; }
.px-strip img { width: 38%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: .5rem; box-shadow: var(--shadow-soft); }
.px-strip img:nth-child(1) { transform: rotate(-6deg) translateY(.35rem); }
.px-strip img:nth-child(2) { position: relative; z-index: 1; margin-inline: -1.1rem; transform: translateY(-.35rem); }
.px-strip img:nth-child(3) { transform: rotate(6deg) translateY(.35rem); }
.px-fill { margin-top: 1.6rem; }
.px-card-custom .px-cta { margin-top: auto; padding-top: 1.4rem; }
.px-free-body { display: flex; flex-direction: column; flex: 1 1 auto; }
.px-free-body > .px-covers { margin-top: auto; padding-top: 1.4rem; }
.px-steps-k { font-size: var(--text-tiny); letter-spacing: .26em; color: var(--ink-soft); }
.px-steps { margin-top: .6rem; display: grid; gap: 0; }
.px-steps li { position: relative; display: flex; align-items: baseline; gap: .8rem; padding: .32rem 0 .32rem 1.15rem; font-size: var(--text-small); letter-spacing: .08em; }
.px-steps li::before { content: ""; position: absolute; left: 0; top: 50%; width: .42rem; height: .42rem; margin-top: -.21rem; border-radius: 50%; background: var(--accent); }
.px-steps li:not(:last-child)::after { content: ""; position: absolute; left: calc(.21rem - .5px); top: calc(50% + .3rem); height: 100%; width: 1px; background: var(--hairline); }
.px-steps i { font-family: var(--font-serif-latin); font-style: italic; font-size: 1.05rem; letter-spacing: 0; color: var(--accent); }
.px-works { align-self: flex-start; margin-top: .2rem; }
.px-cta { margin-top: auto; padding-top: 1.6rem; }
.px-cta .btn { width: 100%; min-height: 3.1rem; padding-inline: .9rem; letter-spacing: .02em; font-size: .93rem; text-align: center; line-height: 1.45; text-wrap: balance; }

/* 主打卡：實色深森林綠＋骨白膠囊徽章＋大一號價格。不准 scale／translate（DESIGN §9 定價三卡）。 */
.px-card.is-featured { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.px-card.is-featured::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(70% 90% at 6% 0%, color-mix(in srgb, var(--accent-ink) 7%, transparent), transparent 66%);
}
.px-card.is-featured .px-card-k,
.px-card.is-featured .px-card-k span { color: var(--accent-ink); }
.px-flag {
  position: absolute !important;
  top: 1.55rem; right: 1.5rem;
  padding: .28rem .85rem;
  border-radius: var(--radius-pill);
  background: var(--accent-ink); color: var(--accent);
  font-size: var(--text-tiny); font-weight: 600; letter-spacing: .14em; line-height: 1.5;
}
.px-card.is-featured .px-pre,
.px-card.is-featured .px-post,
.px-card.is-featured .px-terms,
.px-card.is-featured .px-fine,
.px-card.is-featured .px-cur,
.px-card.is-featured .px-price small { color: color-mix(in srgb, var(--accent-ink) 92%, transparent); }
.px-card.is-featured .px-price { color: var(--accent-ink); }
.px-card.is-featured .px-amt { font-size: clamp(4.3rem, 5.8vw, 5rem); }
.px-card.is-featured .price-was { text-decoration-thickness: 1px; color: var(--accent-ink); }
.px-card.is-featured .px-list { border-top: 0; margin-top: .45rem; }
.px-card.is-featured .px-list li { border-bottom: 0; border-top: 1px solid rgba(242, 241, 236, .17); color: color-mix(in srgb, var(--accent-ink) 94%, transparent); padding-block: .5rem; }
.px-card.is-featured .px-list li:first-child { border-top: 0; padding-top: .3rem; }
.px-groups { margin-top: 1.3rem; border-top: 1px solid rgba(242, 241, 236, .3); }
.px-grp { padding-top: .95rem; }
.px-grp h4 {
  display: grid; gap: .08rem;
  font-size: .82rem; font-weight: 600; letter-spacing: .22em; color: var(--accent-ink);
}
.px-grp h4 span { font-size: .78rem; font-weight: 400; letter-spacing: .04em; color: color-mix(in srgb, var(--accent-ink) 90%, transparent); }
.px-card.is-featured .px-cta { padding-top: 1.7rem; }
/* 基礎版卡（2026-11-01 從主角卡退成紙卡）：分組結構照舊，顏色改回紙面語彙 */
.px-card-basic .px-groups { border-top-color: var(--hairline); }
.px-card-basic .px-grp h4 { color: var(--ink); }
.px-card-basic .px-grp h4 span { color: var(--ink-soft); }
.px-card-basic .px-list { border-top: 0; margin-top: .45rem; }
.px-card-basic .px-list li { border-bottom: 0; border-top: 1px solid var(--hairline); padding-block: .5rem; }
.px-card-basic .px-list li:first-child { border-top: 0; padding-top: .3rem; }

/* 全客製獨立寬卡：桌機左右兩欄（左＝價格與內容、右＝作品扇形＋怎麼進行），手機上下疊 */
.px-bespoke { margin: 1.25rem auto 0; max-width: min(100%, 40rem); }
.px-bsp-main { display: flex; flex-direction: column; }
.px-bsp-side { display: flex; flex-direction: column; }
.px-bespoke .px-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.4rem; }
.px-bespoke .px-cta .btn { width: auto; min-width: 11rem; }
.px-bespoke .px-works { margin-top: 0; }
@media (min-width: 1180px) {
  .px-bespoke {
    max-width: none;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(2rem, 4vw, 4rem);
    padding: 2.2rem 2.4rem 2.2rem;
  }
  .px-bespoke .px-price { height: auto; min-height: 4rem; }
  .px-bsp-side { justify-content: center; }
  .px-bsp-side .px-strip { margin-top: 0; }
}

.px-note { margin: 1.6rem auto 0; max-width: min(100%, 40rem); font-size: var(--text-small); letter-spacing: .04em; color: var(--ink-soft); }
.px-note span { color: var(--accent); margin-right: .5em; }
@media (min-width: 1180px) { .px-note { max-width: none; } }

/* 手機／平板：怎麼進行＝一行五個圓點（01 聊聊→05 交件），省下一半高度 */
@media (max-width: 1179px) {
  .px-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin-top: .9rem; }
  .px-steps li { white-space: nowrap; display: grid; justify-items: center; align-content: start; gap: .15rem; padding: 1.1rem .1rem 0; text-align: center; font-size: .68rem; letter-spacing: 0; line-height: 1.4; }
  .px-steps li::before { left: 50%; top: 0; margin: 0 0 0 -.21rem; }
  .px-steps li:not(:last-child)::after { left: 50%; top: calc(.21rem - .5px); width: 100%; height: 1px; }
  .px-steps i { font-size: .95rem; }
}
@media (max-width: 380px) {
  .px-steps li { font-size: .62rem; }
  .px-fill { margin-top: 1.2rem; }
}

/* ════════════════ 02 保證書 ════════════════ */
.px-guar { padding-bottom: calc(var(--section-y) + 1.4rem); }
.px-cert {
  position: relative;
  margin: clamp(2rem, 5vw, 3rem) auto 0;
  max-width: 54rem;
  padding: clamp(2.2rem, 5.5vw, 3.6rem) clamp(1.5rem, 5.5vw, 3.8rem) clamp(2.4rem, 5vw, 3.2rem);
  background: var(--paper-raise);
  box-shadow: inset 0 0 0 1px var(--hairline), var(--shadow-soft);
  text-align: center;
}
.px-cert::before, .px-cert::after { content: ""; position: absolute; pointer-events: none; }
.px-cert::before { inset: .65rem; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.px-cert::after { inset: .9rem; border: 1px solid var(--hairline); }
.px-cert > * { position: relative; z-index: 1; }
.px-cert-k { display: flex; justify-content: center; align-items: baseline; gap: .8rem; font-family: var(--font-serif-latin); font-style: italic; font-size: 1.05rem; letter-spacing: .34em; color: var(--accent); }
.px-cert-k span { font-family: var(--font-serif-tc); font-style: normal; font-size: var(--text-tiny); letter-spacing: .3em; color: var(--ink-soft); }
.px-cert-t { margin-top: .7rem; font-size: clamp(1.9rem, 5vw, 2.6rem); font-weight: 700; letter-spacing: .24em; text-indent: .24em; line-height: 1.3; }
.px-cert-items { margin-top: clamp(1.6rem, 4vw, 2.4rem); display: grid; gap: 1.6rem; text-align: left; }
@media (min-width: 760px) {
  .px-cert-items { grid-template-columns: 1fr 1fr; gap: 0; }
  .px-cert-it { padding-inline: clamp(1.2rem, 3vw, 2.2rem); }
  .px-cert-it:first-child { padding-left: 0; border-right: 1px solid var(--hairline); }
  .px-cert-it:last-child { padding-right: 0; }
}
.px-cert-it p { font-size: var(--text-body); line-height: 1.95; color: var(--ink-soft); }
.px-cert-it strong { display: block; margin-bottom: .35rem; font-size: 1.1rem; letter-spacing: .1em; color: var(--ink); }
.px-cert-no { display: block; margin-bottom: .55rem; font-family: var(--font-serif-latin); font-style: italic; font-size: 1.5rem; line-height: 1; color: var(--accent); opacity: .85; }
.px-cert-foot { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; padding-right: 6.6rem; }
.px-cert-sign { font-size: var(--text-small); letter-spacing: .3em; color: var(--ink-soft); white-space: nowrap; }
.px-cert-rule { flex: 1; height: 1px; background: var(--hairline); }
.px-cert > .px-seal-cert { position: absolute; right: clamp(1.3rem, 4vw, 2.6rem); bottom: -1.9rem; width: 6.4rem; }

/* 蓋章：進視窗才演（需要 JS 點亮，所以綁 px-js；腳本沒載到＝一直是完成態） */
html.pv-motion.px-js .px-cert .px-seal { opacity: 0; transform: rotate(-34deg) scale(1.9); }
html.pv-motion.px-js .px-cert.is-stamped .px-seal { animation: px-stamp .75s cubic-bezier(.2, .9, .3, 1.15) both; }
/* 章落下那一瞬間（約 .35s）紙面微微下壓 120ms */
html.pv-motion.px-js .px-cert.is-stamped { animation: px-press .3s ease-in-out .26s both; }
@keyframes px-press { 45% { transform: translateY(5px) scale(.99); } }

/* ════════════════ 03 對照 ════════════════ */
.px-bot-vs { right: 1.5%; top: 7%; width: clamp(6rem, 8.5vw, 9rem); --bot-o: .7; }
@media (max-width: 899px) { .px-bot-vs { display: none; } }

.px-pair {
  display: grid;
  justify-items: center;
  gap: 1.2rem;
  margin-top: clamp(2.2rem, 5vw, 3.4rem);
}
@media (min-width: 900px) {
  .px-pair { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: clamp(1.5rem, 5vw, 5rem); }
  .px-fig-flat { justify-self: end; }
  .px-fig-live { justify-self: start; }
}
.px-fig { display: grid; gap: 1.1rem; justify-items: center; margin: 0; }
.px-fig figcaption {
  display: grid; gap: .15rem; justify-items: center; text-align: center;
  font-size: var(--text-small); font-weight: 600; letter-spacing: .14em; color: var(--ink);
}
.px-fig figcaption em { font-style: normal; font-weight: 400; font-size: var(--text-tiny); letter-spacing: .06em; color: var(--ink-soft); }
.px-fig-live figcaption { color: var(--accent); }
.px-vs-mark { align-self: center; font-family: var(--font-serif-latin); font-style: italic; font-size: clamp(2.2rem, 5vw, 3.4rem); color: var(--ink-soft); opacity: .6; line-height: 1; }

/* 左：扁平圖片＋聊天室（灰、平、一直在被追問） */
.px-chat {
  width: min(100%, 21rem);
  padding: 1rem 1rem 1.1rem;
  border-radius: 1.4rem;
  background: color-mix(in srgb, var(--ink) 6%, var(--paper));
  box-shadow: inset 0 0 0 1px var(--hairline);
  display: grid;
  gap: .5rem;
}
.px-flat {
  position: relative;
  padding: 1.5rem .9rem 1.15rem;
  text-align: center;
  background: #ece9e1;
  border: 1px solid rgba(34, 39, 31, .16);
  filter: grayscale(.4) contrast(.94);
}
.px-flat-tag { position: absolute; top: .4rem; right: .5rem; padding: .05rem .45rem; border-radius: 3px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .62rem; letter-spacing: .08em; background: rgba(34, 39, 31, .1); color: var(--ink-soft); }
.px-flat-k { font-family: var(--font-serif-latin); font-style: italic; font-size: .85rem; letter-spacing: .1em; color: var(--ink-soft); }
.px-flat-n { margin-top: .2rem; font-family: var(--font-serif-latin); font-style: italic; font-size: 2rem; line-height: 1.15; color: var(--ink); }
.px-flat-d { margin-top: .3rem; font-size: .74rem; letter-spacing: .3em; color: var(--ink-soft); }
.px-bub {
  justify-self: start;
  max-width: 82%;
  padding: .45rem .8rem;
  border-radius: 1.1rem 1.1rem 1.1rem .3rem;
  background: var(--paper-raise);
  font-size: .82rem; line-height: 1.5; letter-spacing: .03em; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.px-bub-r { justify-self: end; border-radius: 1.1rem 1.1rem .3rem 1.1rem; background: color-mix(in srgb, var(--accent) 14%, var(--paper-raise)); }

/* 右：手機裡的互動喜帖（內容一律 cqw；按鈕下限 44px） */
.px-phone { --pw: 18.5rem; }
.px-ps {
  display: flex; flex-direction: column; justify-content: center;
  padding: 14cqw 7cqw 9cqw;
  background: var(--paper-raise);
  font-size: 4.2cqw;
  text-align: center;
}
.px-ps-k { font-size: 3.3cqw; letter-spacing: .5em; text-indent: .5em; color: var(--ink-soft); }
.px-ps-hi { margin-top: 4cqw; font-size: 5.4cqw; letter-spacing: .1em; }
.px-ps-hi b { display: block; font-size: 19cqw; font-weight: 700; line-height: 1.2; letter-spacing: .12em; text-indent: .12em; color: var(--accent); }
.px-ps-names { margin-top: 4.5cqw; font-family: var(--font-serif-latin); font-style: italic; font-size: 7.8cqw; letter-spacing: .06em; }
.px-ps-date { margin-top: 4.5cqw; display: grid; gap: .5cqw; }
.px-ps-date i { font-family: var(--font-serif-latin); font-style: italic; font-size: 16cqw; line-height: 1; color: var(--accent); }
.px-ps-date span { font-size: 3cqw; letter-spacing: .4em; text-indent: .4em; text-transform: uppercase; color: var(--ink-soft); }
.px-ps-rsvp { margin-top: 2.5cqw; display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; }
.px-ps-btn {
  min-height: 44px; padding: 0 .4rem;
  border-radius: var(--radius-pill);
  font-size: max(16px, 4.2cqw); font-weight: 600; letter-spacing: .08em;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--accent);
  transition: background .4s var(--ease-out), color .4s var(--ease-out), transform .3s var(--ease-out);
}
.px-ps-btn:first-child { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.px-ps-btn:hover { transform: translateY(-1px); }
.px-ps-btn:active { transform: scale(.97); }
.px-ps-btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.px-ps-btn[aria-pressed="true"]::before {
  content: ""; display: inline-block; width: .5em; height: .9em; margin: -.25em .55em 0 0;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(40deg) scale(.8); vertical-align: middle;
}
.px-ps-hint { margin-top: 6cqw; text-align: center; }
.px-ps-hint span { display: inline-block; font-size: 3.4cqw; letter-spacing: .34em; text-indent: .34em; color: var(--accent); }
.px-ps-hint span::after { content: ""; display: block; width: 1px; height: 3.2cqw; margin: 1.2cqw auto 0; background: currentColor; opacity: .6; }
html.pv-motion .px-ps-hint span { animation: px-nudge 2.4s ease-in-out infinite; }
@keyframes px-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(1.6cqw); } }
.px-ps.is-done .px-ps-hint { visibility: hidden; }
/* 後台統計卡：點之前是淡色（0／0），點之後變深綠並更新數字 */
.px-ps-stat {
  margin-top: 8cqw; padding: 3cqw 4cqw;
  border-radius: 4cqw; text-align: left;
  background: color-mix(in srgb, var(--accent) 7%, var(--paper-raise)); color: var(--ink-soft);
  box-shadow: inset 0 0 0 1px var(--hairline);
  transition: background .6s var(--ease-out), color .6s var(--ease-out), box-shadow .6s var(--ease-out);
  pointer-events: none;
}
.px-ps-stat-k { font-size: 3cqw; letter-spacing: .3em; }
.px-ps-stat-v { margin-top: 1cqw; display: flex; justify-content: space-between; font-size: 4.4cqw; letter-spacing: .08em; }
.px-ps-stat b { font-family: var(--font-serif-latin); font-style: italic; font-size: 1.5em; font-weight: 500; }
.px-ps-rsvp.is-done ~ .px-ps-stat { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.px-ps-rsvp.is-done .px-ps-btn:not([aria-pressed="true"]) { background: transparent; color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--hairline); }
.px-ps-chips { margin-top: 6cqw; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6cqw; }
.px-ps-chips span { padding: 1cqw 3cqw; border-radius: 999px; font-size: 3.2cqw; letter-spacing: .06em; color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--hairline); }
.px-tally { min-height: 1.6em; color: var(--ink-soft); transition: color .4s var(--ease-out); }
.px-tally.is-on { color: var(--accent); font-weight: 600; }

/* 對照表：編輯式雙欄 */
.px-vs {
  --c1: 11.5rem;
  position: relative;
  margin-top: clamp(2.6rem, 6vw, 4rem);
  border-top: 1px solid var(--ink);
}
.px-vs-head > [role="row"], .px-vs-row { display: grid; grid-template-columns: var(--c1) minmax(0, 1fr) minmax(0, 1fr); }
.px-vs-head {
  position: sticky; top: var(--sn-h); z-index: 4;
  background: var(--paper);
  box-shadow: inset 0 -1px 0 var(--hairline);
}
.px-vs-head [role="columnheader"] { padding: .85rem 1.5rem; font-size: var(--text-small); font-weight: 600; letter-spacing: .16em; color: var(--ink-soft); }
.px-vs-head .is-us { color: var(--accent); }
.px-vs-row { position: relative; z-index: 1; border-bottom: 1px solid var(--hairline); transition: background .4s var(--ease-out); }
.px-vs-row:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.px-vs-aspect { display: flex; align-items: baseline; gap: .7rem; padding: 1.25rem 0 1.25rem .2rem; font-size: var(--text-small); font-weight: 600; letter-spacing: .1em; line-height: 1.6; }
.px-vs-aspect i { font-family: var(--font-serif-latin); font-style: italic; font-weight: 500; font-size: 1.4rem; letter-spacing: 0; color: var(--accent); opacity: .8; }
.px-vs-cell { padding: 1.25rem 1.5rem; font-size: var(--text-body); line-height: 1.8; color: var(--ink-soft); }
.px-vs-cell.is-us { color: var(--ink); font-weight: 600; }
/* 「我們」那一欄的整條色帶 */
@media (min-width: 720px) {
  .px-vs::before {
    content: ""; position: absolute; z-index: 0; top: 0; bottom: 0; right: 0;
    width: calc((100% - var(--c1)) / 2);
    background: color-mix(in srgb, var(--accent) 4.5%, transparent);
    box-shadow: inset 1px 0 0 color-mix(in srgb, var(--accent) 22%, transparent);
    pointer-events: none;
  }
  .px-vs-head, .px-vs-head > [role="row"] { background-clip: padding-box; }
  .px-vs-cell:not(.is-us) { text-decoration: none; }
}
@media (max-width: 719px) {
  .px-vs { border-top: 1px solid var(--ink); }
  .px-vs-head { display: none; }
  .px-vs-row { display: block; padding: 1.15rem 0 1.2rem; }
  .px-vs-aspect { padding: 0 0 .55rem; }
  .px-vs-cell { display: flex; gap: .7rem; padding: .3rem 0; font-size: var(--text-small); }
  .px-vs-cell::before {
    content: attr(data-who); flex: none; width: 2.6em; padding-top: .12em;
    font-size: var(--text-tiny); font-weight: 600; letter-spacing: .14em; color: var(--ink-soft);
  }
  .px-vs-cell.is-us { color: var(--ink); }
  .px-vs-cell.is-us::before { color: var(--accent); }
}

/* ════════════════ 04 常見問題 ════════════════ */
.px-faq-tools { margin-top: 1.4rem; display: flex; }
.px-faq-all {
  display: inline-flex; align-items: center; gap: .7rem; min-height: 44px; padding: 0 1.2rem 0 1rem;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--hairline);
  font-size: var(--text-small); letter-spacing: .12em; color: var(--ink);
  transition: box-shadow .35s var(--ease-out), background .35s var(--ease-out);
}
.px-faq-all:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.px-faq-all i { position: relative; width: .9rem; height: .9rem; flex: none; }
.px-faq-all i::before, .px-faq-all i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; transition: transform .5s var(--ease-out); }
.px-faq-all i::after { transform: rotate(90deg); }
.px-faq-all[aria-pressed="true"] i::after { transform: rotate(0); }

.px-fgs { margin-top: clamp(1.4rem, 3vw, 2rem); border-bottom: 1px solid var(--hairline); }
.px-fg { display: grid; gap: .6rem 3rem; padding: clamp(1.6rem, 4vw, 2.4rem) 0 clamp(1rem, 3vw, 1.6rem); border-top: 1px solid var(--hairline); }
@media (min-width: 900px) { .px-fg { grid-template-columns: 14rem minmax(0, 1fr); } }
.px-fg-label { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; align-self: start; }
@media (min-width: 900px) {
  .px-fg-label { position: sticky; top: calc(var(--sn-h) + 1.6rem); display: grid; gap: .2rem; padding-top: .5rem; }
}
.px-fg-label i { font-family: var(--font-serif-latin); font-style: italic; font-size: 2.6rem; line-height: 1; color: var(--accent); opacity: .85; }
.px-fg-label h3 { font-size: var(--text-h3); font-weight: 600; letter-spacing: .12em; line-height: 1.45; }
.px-fg-label span { font-size: var(--text-tiny); letter-spacing: .24em; color: var(--ink-soft); }
.px-fg-list details { border-bottom: 1px solid var(--hairline); }
.px-fg-list details:last-child { border-bottom: 0; }

.px-fg-list summary {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
  min-height: 3.6rem; padding: 1rem 0;
  list-style: none; cursor: pointer;
  font-size: var(--text-body); font-weight: 600; letter-spacing: .06em; line-height: 1.6;
  transition: color .35s var(--ease-out);
}
.px-fg-list summary::-webkit-details-marker { display: none; }
.px-fg-list summary:hover { color: var(--accent); }
.px-fg-list summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* 加號 → 減號（直槓縮成 0、整個轉半圈） */
.px-fg-list summary::after {
  content: ""; flex: none; width: 1rem; height: 1rem;
  background:
    linear-gradient(var(--accent), var(--accent)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center / 1.5px 100% no-repeat;
  transition: transform .55s var(--ease-out), background-size .55s var(--ease-out);
}
.px-fg-list details[open] > summary::after { transform: rotate(180deg); background-size: 100% 1.5px, 1.5px 0; }

.px-fg-list .faq-body { padding: 0 0 1.4rem; }
.px-fg-list .faq-body p { max-width: 40rem; font-size: var(--text-small); line-height: 1.95; color: var(--ink-soft); }
.px-fg-list .faq-body strong { color: var(--ink); }
/* 行內連結的有效點擊區補到 44px（用 padding 撐、負 margin 抵銷，不推擠行距） */
.px-fg-list .faq-body a { display: inline-block; padding: 12px 2px; margin: -12px -2px; color: var(--accent); line-height: 20px; }

/* 順滑展開：支援 interpolate-size 的瀏覽器才有高度過場，其餘自然展開 */
@supports (interpolate-size: allow-keywords) {
  .px-fg-list details { interpolate-size: allow-keywords; }
  .px-fg-list details::details-content {
    block-size: 0; overflow: clip;
    transition: block-size .6s var(--ease-out), content-visibility .6s allow-discrete;
  }
  .px-fg-list details[open]::details-content { block-size: auto; }
}

/* ════════════════ 收尾 ════════════════ */
.pv-end .pv-end-big { margin-top: 0; font-size: clamp(2rem, 7vw, 3.6rem); font-weight: 700; letter-spacing: .06em; line-height: 1.3; text-wrap: balance; }

/* 手機／平板：為了對齊三卡才存在的高度全部歸零（⚠ 必須放在基礎規則之後，同特異度後寫的贏） */
@media (max-width: 1179px) {
  .px-pre { min-height: 0; }
  .px-pre:empty { display: none; }
  .px-pb { margin-top: .6rem; }
  .px-price { height: auto; margin-top: .2rem; }
  .px-amt { line-height: 1.05; }
  .px-card { scroll-margin-top: calc(var(--sn-h) + 4.6rem); }
}

/* ════════════════ 降級（RM／?fx=0／無 JS）════════════════
   這一頁所有「先藏再演」都寫在 html.pv-motion（＋px-js）底下，沒有任何降級專屬規則——
   拿掉旗標＝同樣的版面、同樣的裝飾、同一個位置，只少了「動」。 */

/* 全客製寬卡桌機：「怎麼進行」也改成一列五點（跟手機同一種讀法），不讓右欄底下空一大塊 */
@media (min-width: 1180px) {
  .px-bespoke .px-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin-top: .9rem; }
  .px-bespoke .px-steps li { white-space: nowrap; display: grid; justify-items: center; align-content: start; gap: .15rem; padding: 1.1rem .1rem 0; text-align: center; font-size: .78rem; letter-spacing: .04em; line-height: 1.4; }
  .px-bespoke .px-steps li::before { left: 50%; top: 0; margin: 0 0 0 -.21rem; }
  .px-bespoke .px-steps li:not(:last-child)::after { left: 50%; top: calc(.21rem - .5px); width: 100%; height: 1px; }
}