/* ============================================================
   行銷站共用層｜shared/site.css（2026-09-16 立）
   ------------------------------------------------------------
   只服務對外行銷頁（landing／features／styles／pricing／blog／guide／
   changelog／about／legal／404）。**喜帖模板與賓客頁不載這一支**——
   所以這裡的規則永遠碰不到已發布的喜帖，改它的風險等級遠低於 base.css。

   放什麼：
     ① 全站統一導覽 .site-nav（over／solid 兩主題＋全螢幕覆蓋選單）
     ② 展示廳模式的排版 token（--text-showcase 等，見 DESIGN.md §9）
     ③ 頁尾的無障礙微調（base.css 的 .site-footer 規則一行不動）

   紀律（DESIGN.md §0／§9）：
     - 只用 base.css 的 token，**不寫死色碼**；深色底上的文字一律 --accent-ink
     - 唯一強調色＝深森林綠 --accent；陰影只有 --shadow-soft
     - 可點元素 ≥44px；input 字級 ≥16px
   ============================================================ */

:root {
  /* ---- 展示廳字級：字級比 >6:1 是電影感的來源（巨字配極小寬字距小字）----
     ⚠ 2026-09-17（S8c）桌機整體縮一階（Jacob 第三次 preview 裁決 #1：
     「桌機版本看很多首字都很大，要縮小一點」）。**只動 clamp 的上限**，
     下限與 vw 中項一字不改 ⇒ 390px 實量完全不變（那裡吃的是下限）。
     桌機新上限：showcase 92.8px（原 112）／display 46.4（原 54.4）／
     section 35.2（原 41.6）。字級比仍守 >6:1——92.8 ÷ --text-small 14px
     ＝ 6.6:1，配 --text-micro 11.2px 是 8.3:1。 */
  --text-showcase: clamp(2.8rem, 9vw, 5.8rem);   /* 滿版首屏與章節的巨型襯線字 */
  --text-display:  clamp(1.9rem, 5.5vw, 2.9rem); /* 次一階：章節宣言 */
  /* 章節大標的單一真相：首頁 .section-title／.shs-head h2 與三分頁 .pg-title
     以前各寫一份同樣的 clamp，縮字級時很容易只改到其中一份。 */
  --text-section:  clamp(1.7rem, 5vw, 2.2rem);
  --text-micro:    .7rem;                       /* 壓圖小字／眉標，配 .28em 字距 */
  --tracking-micro: .34em;

  /* ---- 導覽尺寸（錨點捲動的落點靠它算）---- */
  --sn-h: 60px;

  /* ---- 壓圖遮罩：base.css 的 --scrim 太淡，首屏壓巨字需要更深的一支 ---- */
  --scrim-deep: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ink) 34%, transparent) 0%,
    color-mix(in srgb, var(--ink) 6%, transparent) 24%,
    color-mix(in srgb, var(--ink) 46%, transparent) 55%,
    color-mix(in srgb, var(--ink) 74%, transparent) 76%,
    color-mix(in srgb, var(--ink) 88%, transparent) 100%
  );
}
@media (min-width: 900px) {
  :root { --sn-h: 68px; }
}
/* 沒有 color-mix 的舊瀏覽器：退回 base.css 那支較淡但一定有的 scrim */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  :root { --scrim-deep: var(--scrim); }
}

/* 錨點落點預留 fixed 導覽高度（原生捲動用；fx 模式由 Lenis 自己 offset） */
html { scroll-padding-top: calc(var(--sn-h) + 1rem); }

/* ════════════════ 全站導覽 .site-nav ════════════════
   取代首頁舊的 .lp-nav 與 34 頁的 .lg-nav。兩個主題：
     data-nav="solid"（預設，所有內容頁）＝骨白底、髮絲線收邊
     data-nav="over"（只有首頁）＝透明壓在滿版影像上，捲過首屏由
       site-nav.js 的哨兵加 .is-solid 換成 solid 樣貌
   無 JS 時：over 也讀得到（有 text-shadow 保底），覆蓋選單維持 [hidden]
   但連結本來就在 DOM 裡，爬蟲與螢幕閱讀器不受影響。 */
.site-nav {
  /* solid＝sticky：它在文件流裡佔掉自己的高度，所以內容頁不必另外補
     padding-top（S4 要批次換 34 頁，能少一條機械規則就少一條）。
     over＝fixed：首頁要讓滿版影像從視窗最頂開始。 */
  position: sticky;
  top: 0; left: 0; right: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 2.5vw, 1.5rem);
  min-height: var(--sn-h);
  padding-inline: var(--gutter);
  padding-block: .5rem;
  transition: background-color .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.site-nav > * { position: relative; z-index: 1; }

/* 底色與毛玻璃走 ::before，**不寫在 .site-nav 自己身上**：
   backdrop-filter 會讓元素成為 position:fixed 子孫的 containing block，
   寫在本體上會把全螢幕覆蓋選單縮進導覽那一列的 60px 裡（2026-09-16 實測）。 */
.site-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 -1px 0 var(--hairline);
  transition: opacity .5s var(--ease-out);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .site-nav::before { background: var(--paper); }
}
.site-nav[data-nav="solid"]::before,
.site-nav.is-solid::before,
.site-nav.is-open::before { opacity: 1; }

.site-nav[data-nav="over"] { position: fixed; }

/* 品牌字：寬字距的小字，是「極小寬字距小字」語彙的第一個落點 */
.sn-brand {
  margin-right: auto;
  font-family: var(--font-serif-tc);
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: .3em;
  text-indent: .3em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  /* 觸控目標靠 padding 撐滿 44px，版面高度不變 */
  padding-block: calc((44px - 1.5em) / 2);
  line-height: 1.5;
}

.sn-links {
  display: none;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.6rem);
}
@media (min-width: 1024px) { .sn-links { display: flex; } }
.sn-link {
  position: relative;
  font-size: var(--text-small);
  letter-spacing: .16em;
  color: var(--ink);
  opacity: .8;
  text-decoration: none;
  white-space: nowrap;
  padding-block: calc((44px - 1.5em) / 2);
  line-height: 1.5;
  transition: opacity .3s var(--ease-out), color .3s var(--ease-out);
}
.sn-link:hover { opacity: 1; color: var(--accent); }
/* 目前所在區：貼字底線（editorial 的細線語言，不用色塊） */
.sn-link[aria-current="page"] { opacity: 1; color: var(--accent); }
.sn-link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: .16em;
  bottom: calc((44px - 1.5em) / 2 - 3px);
  height: 1px;
  background: currentColor;
}

.sn-act { display: flex; align-items: center; gap: clamp(.55rem, 2vw, 1rem); }

.sn-login {
  display: none;
  font-size: var(--text-small);
  letter-spacing: .15em;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
  padding-block: calc((44px - 1.5em) / 2);
  line-height: 1.5;
  border-bottom: 1px solid currentColor;
}
@media (min-width: 560px) { .sn-login { display: inline-block; } }

.sn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .4rem 1.15rem;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--text-small);
  letter-spacing: .14em;
  text-indent: .14em;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.sn-cta:hover  { opacity: .9; }
.sn-cta:active { transform: scale(.98); }

/* 漢堡：兩條髮絲線，開啟時收成叉。**只在手機／平板出現**。
   2026-09-17（S8c）Jacob 第三次 preview 裁決 #2：「桌機版右上角有漢堡選單，
   那應該是手機才要有的，用電腦看不應該存在」——推翻 2026-09-16 立的
   「桌機也保留」。斷點綁 .sn-links 的 1024px（連結列一露出來，漢堡就退場），
   `display:none` 而不是 visibility／opacity ⇒ 鍵盤 Tab 不會停在它上面。
   覆蓋選單獨有的四條（看示範／更新日誌／關於／聯絡）在桌機全部走頁尾，
   已逐條核對 .site-footer 都有。 */
.sn-burger {
  display: grid;
  place-items: center;
  gap: 6px;
  width: 44px; height: 44px;
  margin-right: calc(var(--gutter) * -.35);
  border-radius: var(--radius-pill);
  color: var(--ink);
}
.sn-burger span {
  display: block;
  width: 20px; height: 1.5px;
  background: currentColor;
  transition: transform .4s var(--ease-out), opacity .3s var(--ease-out);
}
/* 收成叉：兩條線各自移回容器中線（列高 1.5px＋gap 6px ⇒ 中心相距 7.5px），
   位移寫死 3.75px，與上面的 gap 綁在一起，改 gap 要同步改這裡。 */
.sn-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
.sn-burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); }
@media (min-width: 1024px) { .sn-burger { display: none; } }
.sn-burger:focus-visible,
.sn-brand:focus-visible,
.sn-link:focus-visible,
.sn-login:focus-visible,
.sn-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---- over 主題：白字壓在影像上（未捲動時）---- */
/* 2026-09-18（S8d）：首屏從「深色婚紗照壓白字」換成「米白靜物壓深色字」之後，
   壓在它上面的導覽也跟著翻面——骨白字＋深色 text-shadow 原本是為了在暗照片上
   讀得出來，鋪到米白亞麻上就是白字配白底加一圈髒陰影。
   現在 over 與 solid 的**文字顏色一樣**，差別只剩「有沒有底色與髮絲線」。
   ⚠ 不改成 `data-nav="solid"` 了事：solid 是 sticky（佔掉文件流的高度），
     首屏就不再從視窗最頂開始，滿版靜物照當場少一截。 */
.site-nav[data-nav="over"]:not(.is-solid) .sn-brand,
.site-nav[data-nav="over"]:not(.is-solid) .sn-link,
.site-nav[data-nav="over"]:not(.is-solid) .sn-login,
.site-nav[data-nav="over"]:not(.is-solid) .sn-burger {
  color: var(--ink);
  text-shadow: none;
}
.site-nav[data-nav="over"]:not(.is-solid) .sn-cta {
  background: var(--accent);
  color: var(--accent-ink);
  text-shadow: none;
}
/* 選單開著時一律用 solid 的配色（覆蓋層是骨白底） */
.site-nav.is-open[data-nav="over"] .sn-brand,
.site-nav.is-open[data-nav="over"] .sn-burger { color: var(--ink); text-shadow: none; }
.site-nav.is-open[data-nav="over"] .sn-cta { background: var(--accent); color: var(--accent-ink); }

/* ---- 全螢幕覆蓋選單 ---- */
/* 顯示綁 [hidden]：不綁的話下面的 display:grid 會蓋掉 hidden，選單永遠關不掉
   （同 base.css 的 [hidden]{display:none!important} 與付費牆 dialog 的教訓）。 */
.sn-sheet[hidden] { display: none; }
.sn-sheet {
  position: fixed;
  inset: 0;
  z-index: -1;                  /* 壓在 .site-nav 自己的列之下，漢堡永遠點得到 */
  display: grid;
  align-content: center;
  gap: clamp(1.5rem, 5vw, 2.5rem);
  padding: calc(var(--sn-h) + 2rem) var(--gutter) clamp(2rem, 8vh, 4rem);
  background: var(--paper);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.fx .sn-sheet { animation: sn-sheet-in .5s var(--ease-out) both; }
@keyframes sn-sheet-in { from { opacity: 0; } to { opacity: 1; } }

.sn-sheet-nav { display: grid; gap: clamp(.1rem, 1.5vw, .4rem); }
.sn-sheet-nav a {
  display: block;
  width: fit-content;
  max-width: 100%;
  font-family: var(--font-serif-tc);
  font-size: clamp(1.9rem, 8vw, 3.4rem);
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.5;
  color: var(--ink);
  text-decoration: none;
  transition: color .35s var(--ease-out), transform .45s var(--ease-out);
}
.sn-sheet-nav a:hover { color: var(--accent); transform: translateX(.35rem); }
.sn-sheet-nav a em {
  font-family: var(--font-serif-latin);
  font-style: italic;
  font-size: .42em;
  letter-spacing: .12em;
  color: var(--accent);
  margin-left: .8em;
  vertical-align: .45em;
}
.sn-sheet-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* 次要列：小字寬字距，與巨字形成 >6:1 的字級比 */
.sn-sheet-more {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem clamp(1.2rem, 4vw, 2.2rem);
  padding-top: clamp(1.2rem, 4vw, 2rem);
  border-top: 1px solid var(--hairline);
}
.sn-sheet-more a {
  font-size: var(--text-small);
  letter-spacing: .18em;
  color: var(--ink-soft);
  text-decoration: none;
  padding-block: calc((44px - 1.5em) / 2);
  line-height: 1.5;
  transition: color .3s var(--ease-out);
}
.sn-sheet-more a:hover { color: var(--accent); }
.sn-sheet-more a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* 選單開啟時鎖背景捲動（class 由 site-nav.js 掛在 <html>） */
html.nav-open, html.nav-open body { overflow: hidden; }

/* 桌機的覆蓋選單一起退場（2026-09-17，S8c）。
   ⚠ 必須寫在上面 `.sn-sheet { display: grid }` **之後**：兩者特異性相同，
   靠來源順序決勝；寫在前面會被 grid 蓋掉，整條規則靜默失效。
   為什麼還要這一條（漢堡都 none 了，選單理論上開不起來）：視窗從手機拉寬
   到桌機時是 site-nav.js 在 close()，JS 沒載成功的話開著的選單會整片留在
   桌機蓋住頁面。這條讓那個失敗模式不存在。 */
@media (min-width: 1024px) { .sn-sheet { display: none; } }

/* ════════════════ 頁尾微調 ════════════════
   base.css 的 .site-footer 規則一行不動，這裡只補鍵盤焦點可見性
   （原本的 a 沒有任何 focus 樣式，Tab 過去看不出停在哪）。 */
.site-footer a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* ════════════════════════════════════════════════════════════
   行銷站三分頁：/features ／ /styles ／ /pricing（2026-09-16 立，S3）
   ------------------------------------------------------------
   展示廳模式的「內容頁」半邊：零 GSAP、零 Lenis，動效只有 base.css 的
   `.reveal` 淡入（DESIGN.md §9 的動態預算把三分頁的動效上限訂在這裡）。

   全部規則都掛在 `body.pg-page` 或 `.pg-features` ／ `.pg-styles` ／
   `.pg-pricing` 命名空間底下。**這很重要**：site.css 同時服務 blog、guide、
   legal、about、404，沒有命名空間的 `.section-title` 之類的選擇器會跨頁污染。
   首頁不掛 `.pg-page`，所以這一整段對 landing 也是完全無作用的。

   紀律同 §9：只用 base.css 的 token、唯一強調色 --accent、陰影只有
   --shadow-soft、可點元素 ≥44px、input 字級 ≥16px。
   ════════════════════════════════════════════════════════════ */

body.pg-page {
  /* 行銷站節奏（2026-09-17，S8）：base.css 的 --section-y 是 5→9rem，
     那是喜帖單欄敘事的呼吸；行銷站四頁一屏要看得到東西，級距縮一半。
     只覆寫在 body 上 ⇒ 喜帖模板與賓客頁完全不受影響。 */
  --section-y: clamp(3rem, 5.5vw, 5rem);
  font-family: var(--font-serif-tc);
  font-size: var(--text-body);
  background: var(--paper);
  color: var(--ink);
  /* 滿版區塊（100vw）不含捲軸寬，會撐出橫向溢位 */
  overflow-x: clip;
}
.pg-page {
  /* 分頁標題比首屏巨字縮一階：首屏是唯一該用 --text-showcase 的地方。
     2026-09-17（S8c）上限 4.6rem → 3.8rem（桌機 73.6px → 60.8px）。 */
  --text-page: clamp(2.2rem, 7vw, 3.8rem);
}

/* ---------- 頁首 ---------- */
.pg-hero {
  max-width: var(--wide-max);
  margin-inline: auto;
  padding: clamp(3rem, 9vw, 5.5rem) var(--gutter) clamp(2.5rem, 7vw, 4rem);
  border-bottom: 1px solid var(--hairline);
}
.pg-kicker {
  font-family: var(--font-serif-latin);
  font-style: italic;
  font-size: var(--text-small);
  letter-spacing: .28em;
  text-indent: .28em;
  color: var(--accent);
}
.pg-h1 {
  margin-top: .9rem;
  font-size: var(--text-page);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.22;
  text-wrap: balance;
}
.pg-h1 em { font-style: normal; color: var(--accent); }
@media (min-width: 900px) { .pg-h1 em { display: block; } }
.pg-lead {
  margin-top: clamp(1rem, 3vw, 1.5rem);
  color: var(--ink-soft);
  max-width: 34em;
}
.pg-hero-act {
  margin-top: clamp(1.6rem, 4vw, 2.2rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem clamp(1.2rem, 4vw, 2rem);
}
/* 次動作：安靜的底線小字，視覺重量刻意低主 CTA 一階 */
.pg-quiet {
  color: var(--accent);
  font-size: var(--text-small);
  letter-spacing: .14em;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-block: calc((44px - 1.5em) / 2);
  line-height: 1.5;
  transition: opacity .3s var(--ease-out);
}
.pg-quiet:hover { opacity: .75; }

/* ---------- 共用排版 ---------- */
.pg-title {
  font-size: var(--text-section);
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1.45;
  text-wrap: balance;
}
.pg-sub { color: var(--ink-soft); margin-top: .9rem; max-width: 34em; }
/* 次要動作連結：小字寬字距＋箭頭（同首頁的 .sh-more 語彙） */
.pg-more {
  display: inline-block;
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--accent);
  text-decoration: none;
  padding-block: calc((44px - 1.5em) / 2);
  line-height: 1.5;
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease-out);
}
.pg-more:hover { border-bottom-color: currentColor; }
.pg-page a:focus-visible,
.pg-page button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* CTA 帶（同首頁 .cta-band，命名空間限定在 .pg-page 內） */
.pg-page .cta-band {
  max-width: var(--wide-max);
  margin: 0 auto;
  padding: clamp(2.2rem, 6vw, 3rem) var(--gutter);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  display: grid;
  gap: 1.3rem;
  justify-items: center;
  text-align: center;
}
.pg-page .cb-line { font-size: clamp(1.15rem, 3.2vw, 1.5rem); letter-spacing: .1em; }
.pg-page .cb-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.pg-page .cb-note { font-size: var(--text-small); color: var(--ink-soft); max-width: 34em; }

/* 深色收尾區（同首頁 .sh-contact 的語彙，不加第二強調色） */
.pg-end {
  background: var(--accent);
  color: var(--accent-ink);
  text-align: center;
}
.pg-end .pg-title { color: var(--accent-ink); }
.pg-end p { opacity: .85; margin-top: .75rem; max-width: 30em; margin-inline: auto; }
.pg-end .pg-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 2rem; }

/* ════════════════ /features ════════════════ */

/* 三幕的幕首（site-check 會數 .act-head ×3） */
.pg-features .act-head { max-width: 46rem; }
.pg-features .act-head .pg-title { margin-top: .6rem; }
.pg-features .act-rule {
  display: block;
  width: 3.5rem;
  height: 1px;
  margin-top: clamp(1.4rem, 4vw, 2rem);
  background: var(--accent);
  opacity: .5;
}

.pg-features .showcase {
  display: grid;
  gap: clamp(3.5rem, 10vw, 6.5rem);
  margin-top: clamp(2.5rem, 7vw, 4rem);
}
/* 一格＝一個功能：手機單欄（視覺在上），桌機左右分割並左右交錯 */
.pg-features .showcase-row {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: center;
}
@media (min-width: 880px) {
  .pg-features .showcase-row { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); }
  .pg-features .showcase-row:nth-child(even) .showcase-visual { order: 2; }
}
.pg-features .showcase-text { display: grid; align-content: start; gap: .85rem; }
.pg-features .sc-num {
  font-family: var(--font-serif-latin);
  font-style: italic;
  font-size: clamp(2.2rem, 6vw, 3rem);
  line-height: 1;
  color: var(--accent);
  opacity: .5;
}
.pg-features .showcase-text h3 {
  font-size: var(--text-h3);
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.6;
}
.pg-features .showcase-text > p { color: var(--ink-soft); }
.pg-features .sc-tag {
  display: inline-block;
  margin-left: .6em;
  padding: .12rem .6rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-tiny);
  font-weight: 400;
  letter-spacing: .1em;
  vertical-align: .18em;
  color: var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
  white-space: nowrap;
}
@supports not (box-shadow: inset 0 0 0 1px color-mix(in srgb, red 50%, transparent)) {
  .pg-features .sc-tag { box-shadow: inset 0 0 0 1px var(--hairline); }
}
.pg-features .sc-tag.is-paid { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.pg-features .sc-tag.is-inline { margin-left: .4em; }
.pg-features .sc-points { display: grid; gap: .45rem; font-size: var(--text-small); color: var(--ink-soft); }
.pg-features .sc-points li { padding-left: 1.4em; position: relative; }
.pg-features .sc-points li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 600; }
.pg-features .sc-points b { color: var(--ink); font-weight: 600; }
.pg-features .sc-link {
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-block: calc((44px - 1.5em) / 2);
  line-height: 1.5;
  width: fit-content;
  transition: border-color .3s var(--ease-out);
}
.pg-features .sc-link:hover { border-bottom-color: currentColor; }
.pg-features .sc-anchor {
  font-size: var(--text-small);
  color: var(--ink-soft);
  padding-left: .9rem;
  border-left: 2px solid var(--hairline);
}

/* ---- 共用的「示意畫面」外殼：所有 mock 都長在這張紙上 ---- */
:is(.pg-features, .sh-features) .mock,
.pg-features .scene {
  border-radius: var(--radius);
  background: var(--paper-raise);
  box-shadow: var(--shadow-soft), inset 0 0 0 1px var(--hairline);
  overflow: hidden;
}
:is(.pg-features, .sh-features) .mock-bar {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--hairline);
  background: var(--paper);
}
:is(.pg-features, .sh-features) .mock-bar i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--hairline);
}
:is(.pg-features, .sh-features) .mock-bar span {
  margin-left: .5rem;
  font-size: var(--text-tiny);
  letter-spacing: .16em;
  color: var(--ink-soft);
}

/* 01 專屬稱呼：喜帖卡片＋三張飄出的稱呼籤（靜態示意，互動版在首頁） */
.pg-features .invite-scene { position: relative; padding: clamp(1.2rem, 4vw, 1.8rem); }
.pg-features .invite-card {
  border-radius: calc(var(--radius) * .8);
  overflow: hidden;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--hairline);
  max-width: 22rem;
}
.pg-features .invite-card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.pg-features .ic-body { padding: 1.1rem 1.2rem 1.4rem; text-align: center; }
.pg-features .pi-eyebrow {
  font-family: var(--font-serif-latin);
  font-style: italic;
  font-size: var(--text-tiny);
  letter-spacing: .24em;
  color: var(--accent);
}
.pg-features .ic-greet { margin-top: .5rem; font-size: 1.15rem; letter-spacing: .06em; }
.pg-features .ic-greet em { font-style: normal; font-weight: 600; color: var(--accent); }
.pg-features .ic-line { margin-top: .2rem; font-size: var(--text-small); color: var(--ink-soft); }
:is(.pg-features, .sh-features) .chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
:is(.pg-features, .sh-features) .chip {
  padding: .35rem .85rem;
  border-radius: var(--radius-pill);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--hairline);
  font-size: var(--text-tiny);
  letter-spacing: .08em;
  color: var(--ink-soft);
}
:is(.pg-features, .sh-features) .chip em { font-style: normal; font-weight: 600; color: var(--ink); }

/* 02 AR 開場：主手機＋兩張備選開場 */
.pg-features .ar-scene {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  align-items: center;
  gap: clamp(.8rem, 2.5vw, 1.4rem);
  padding: clamp(1.2rem, 4vw, 1.8rem);
}
.pg-features .ar-phone {
  border-radius: 1.2rem;
  overflow: hidden;
  background: var(--ink);
  padding: .3rem;
  box-shadow: var(--shadow-soft);
}
.pg-features .ar-phone img { width: 100%; height: auto; border-radius: 1rem; }
.pg-features .ar-alts { display: grid; gap: clamp(.6rem, 2vw, 1rem); }
.pg-features .ar-alt { display: grid; gap: .35rem; }
.pg-features .ar-alt img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: calc(var(--radius) * .6);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.pg-features .ar-alt figcaption {
  font-size: var(--text-tiny);
  letter-spacing: .12em;
  color: var(--ink-soft);
  text-align: center;
}

/* 03 拆信儀式＋背景音樂 */
.pg-features .ritual-scene { display: grid; gap: 1rem; padding: clamp(1.2rem, 4vw, 1.8rem); }
.pg-features .ritual-card {
  display: grid;
  place-items: center;
  gap: .6rem;
  padding: clamp(1.6rem, 6vw, 2.4rem);
  border-radius: calc(var(--radius) * .8);
  background: var(--accent);
  color: var(--accent-ink);
}
.pg-features .rc-seal {
  display: grid;
  place-items: center;
  width: 3.4rem; height: 3.4rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent-ink) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-ink) 45%, transparent);
  font-size: 1.5rem;
  letter-spacing: 0;
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .pg-features .rc-seal { background: rgba(242, 241, 236, .16); box-shadow: inset 0 0 0 1px rgba(242, 241, 236, .45); }
}
.pg-features .rc-hint { font-size: var(--text-tiny); letter-spacing: .3em; text-indent: .3em; opacity: .85; }
.pg-features .ritual-list { display: grid; gap: .45rem; }
.pg-features .rt-item { font-size: var(--text-small); color: var(--ink-soft); }
.pg-features .rt-item i { font-style: normal; color: var(--accent); margin-right: .5em; }
.pg-features .ritual-bgm {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .9rem;
  border-radius: var(--radius-pill);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--hairline);
  font-family: var(--font-serif-latin);
  font-style: italic;
  font-size: var(--text-small);
  color: var(--ink-soft);
  width: fit-content;
}
.pg-features .eq { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.pg-features .eq b {
  display: block;
  width: 3px;
  background: var(--accent);
  border-radius: 1px;
  animation: pg-eq 1.1s ease-in-out infinite alternate;
}
.pg-features .eq b:nth-child(1) { height: 40%; animation-delay: 0s; }
.pg-features .eq b:nth-child(2) { height: 90%; animation-delay: .18s; }
.pg-features .eq b:nth-child(3) { height: 60%; animation-delay: .36s; }
.pg-features .eq b:nth-child(4) { height: 80%; animation-delay: .1s; }
@keyframes pg-eq { from { transform: scaleY(.45); } to { transform: scaleY(1); } }

/* 04 出席統計後台 */
:is(.pg-features, .sh-features) .mock-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
  padding: 1.1rem 1rem;
  text-align: center;
}
:is(.pg-features, .sh-features) .mock-stats b {
  display: block;
  font-family: var(--font-serif-latin);
  font-size: clamp(1.4rem, 4.5vw, 1.9rem);
  font-weight: 500;
  color: var(--accent);
  line-height: 1.2;
}
:is(.pg-features, .sh-features) .mock-stats span { font-size: var(--text-tiny); color: var(--ink-soft); letter-spacing: .06em; }
:is(.pg-features, .sh-features) .mock-chart { display: grid; gap: .55rem; padding: 0 1rem 1rem; }
:is(.pg-features, .sh-features) .mc-row {
  display: grid;
  grid-template-columns: 4.5rem 1fr 2.6rem;
  align-items: center;
  gap: .6rem;
  font-size: var(--text-tiny);
  color: var(--ink-soft);
}
:is(.pg-features, .sh-features) .bar {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: var(--hairline);
  overflow: hidden;
}
/* 進場填滿：預設就是完成寬度（無 JS ／ RM 下直接是對的），
   .is-arm 由 features.js 在進視窗前掛上才會從 0 長出來。 */
:is(.pg-features, .sh-features) .bar-fill {
  display: block;
  height: 100%;
  width: calc(var(--w, 1) * 100%);
  background: var(--accent);
  border-radius: 3px;
}
:is(.pg-features, .sh-features) .bar-fill.is-arm { width: 0; }
:is(.pg-features, .sh-features) .bar-fill.is-arm.is-run { width: calc(var(--w, 1) * 100%); transition: width 1.1s var(--ease-out); }
:is(.pg-features, .sh-features) .mc-row em { font-style: normal; text-align: right; color: var(--accent); }
:is(.pg-features, .sh-features) .mock-rows { border-top: 1px solid var(--hairline); }
:is(.pg-features, .sh-features) .mock-rows > div {
  display: grid;
  grid-template-columns: 4.6rem 1fr auto;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--hairline);
  font-size: var(--text-tiny);
}
:is(.pg-features, .sh-features) .mock-rows > div:last-child { border-bottom: none; }
:is(.pg-features, .sh-features) .r-note { color: var(--ink-soft); }
:is(.pg-features, .sh-features) .r-tag, :is(.pg-features, .sh-features) .mg-tag {
  padding: .15rem .6rem;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-ink);
  letter-spacing: .08em;
  white-space: nowrap;
}
:is(.pg-features, .sh-features) .r-tag.is-no,
:is(.pg-features, .sh-features) .mg-tag.is-wait {
  background: transparent;
  color: var(--ink-soft);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

/* 05 賓客名單 */
.pg-features .mg-head,
.pg-features .mg-row {
  display: grid;
  grid-template-columns: 4.6rem 1fr 1.4rem 3.4rem;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1rem;
  font-size: var(--text-tiny);
  border-bottom: 1px solid var(--hairline);
}
.pg-features .mg-head { color: var(--ink-soft); letter-spacing: .12em; background: var(--paper); }
.pg-features .mg-row:last-child { border-bottom: none; }
.pg-features .mg-link {
  font-family: var(--font-serif-latin);
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pg-features .mg-qr {
  display: block;
  width: 1.1rem; height: 1.1rem;
  background:
    linear-gradient(var(--ink) 0 0) 0 0 / 40% 40% no-repeat,
    linear-gradient(var(--ink) 0 0) 100% 0 / 40% 40% no-repeat,
    linear-gradient(var(--ink) 0 0) 0 100% / 40% 40% no-repeat;
  opacity: .45;
}

/* 06 桌次分配 */
.pg-features .ms-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  padding: .8rem 1rem;
  font-size: var(--text-tiny);
  color: var(--ink-soft);
  border-bottom: 1px solid var(--hairline);
}
.pg-features .ms-top em { font-style: normal; font-weight: 600; color: var(--accent); }
.pg-features .ms-auto {
  padding: .25rem .7rem;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-ink);
  letter-spacing: .06em;
}
.pg-features .ms-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .6rem;
  padding: .9rem 1rem;
}
.pg-features .ms-table {
  display: grid;
  gap: .3rem;
  padding: .7rem .8rem;
  border-radius: calc(var(--radius) * .5);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--hairline);
  font-size: var(--text-tiny);
}
.pg-features .ms-head { display: flex; justify-content: space-between; gap: .4rem; align-items: baseline; }
.pg-features .ms-head b { letter-spacing: .08em; }
.pg-features .ms-zone { color: var(--ink-soft); }
.pg-features .ms-count em { font-style: normal; font-weight: 600; color: var(--accent); margin-right: .2em; }
.pg-features .ms-bar {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: var(--hairline);
  overflow: hidden;
}
.pg-features .ms-meta { color: var(--ink-soft); }
.pg-features .ms-pool {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .6rem;
  padding: .8rem 1rem 1rem;
  border-top: 1px solid var(--hairline);
  font-size: var(--text-tiny);
  color: var(--ink-soft);
}
.pg-features .ms-pool b {
  font-weight: 400;
  padding: .2rem .6rem;
  border-radius: var(--radius-pill);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--hairline);
  color: var(--ink);
}

/* 07 LINE 婚禮頻道（照示範頻道的真實畫面做） */
:is(.pg-features, .sh-features) .mock-chat {
  display: grid;
  gap: .6rem;
  padding: 1rem 1rem 0;
  background: #7b96ab;   /* LINE 聊天室底：這是「螢幕內容」不是品牌色，不受單一主色紀律管 */
}
:is(.pg-features, .sh-features) .chat-card {
  border-radius: .9rem;
  overflow: hidden;
  background: var(--paper-raise);
  max-width: 17rem;
}
:is(.pg-features, .sh-features) .chat-card img { width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; }
:is(.pg-features, .sh-features) .cc-body { display: grid; gap: .2rem; padding: .8rem .9rem 1rem; }
:is(.pg-features, .sh-features) .cc-kicker {
  font-family: var(--font-serif-latin);
  font-style: italic;
  font-size: var(--text-tiny);
  letter-spacing: .2em;
  color: var(--accent);
}
:is(.pg-features, .sh-features) .cc-body b { font-size: var(--text-small); letter-spacing: .1em; }
:is(.pg-features, .sh-features) .cc-body span { font-size: var(--text-tiny); color: var(--ink-soft); }
:is(.pg-features, .sh-features) .cc-btn {
  margin-top: .5rem;
  padding: .45rem;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-style: normal;
  font-size: var(--text-tiny);
  letter-spacing: .12em;
  text-align: center;
}
:is(.pg-features, .sh-features) .chat-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
:is(.pg-features, .sh-features) .chat-chips span {
  padding: .3rem .7rem;
  border-radius: var(--radius-pill);
  background: var(--paper-raise);
  font-size: var(--text-tiny);
  color: var(--ink);
}
:is(.pg-features, .sh-features) .chat-reply {
  justify-self: end;
  padding: .45rem .85rem;
  border-radius: .9rem;
  background: #b3e07a;   /* LINE 自己的訊息泡泡色，同上：螢幕內容 */
  font-size: var(--text-tiny);
  color: #1d2a12;
}
:is(.pg-features, .sh-features) .chat-seat {
  display: grid;
  gap: .15rem;
  padding: .85rem .95rem;
  border-radius: .9rem;
  background: var(--paper-raise);
  max-width: 15rem;
  font-size: var(--text-tiny);
}
:is(.pg-features, .sh-features) .chat-seat em {
  font-family: var(--font-serif-latin);
  font-style: italic;
  letter-spacing: .18em;
  color: var(--accent);
}
:is(.pg-features, .sh-features) .chat-seat b { font-size: 1.15rem; letter-spacing: .08em; color: var(--accent); }
:is(.pg-features, .sh-features) .chat-seat dl { display: grid; grid-template-columns: 2.6rem 1fr; gap: .1rem .4rem; color: var(--ink-soft); margin-top: .3rem; }
:is(.pg-features, .sh-features) .chat-menu { width: 100%; height: auto; margin-top: .4rem; display: block; }
.pg-features .sc-line-cta {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.pg-features .sc-line-qr {
  width: 6rem; height: 6rem;
  border-radius: calc(var(--radius) * .4);
  box-shadow: inset 0 0 0 1px var(--hairline);
  display: none;
}
@media (min-width: 880px) { .pg-features .sc-line-qr { display: block; } }
.pg-features .sc-line-body { display: grid; gap: .5rem; flex: 1 1 14rem; }
.pg-features .sc-line-hint { font-size: var(--text-tiny); color: var(--ink-soft); }
.pg-features .sc-line-desk { display: none; font-weight: 400; }
@media (min-width: 880px) { .pg-features .sc-line-desk { display: inline; } }

/* 08 共同編輯 */
.pg-features .duo-scene {
  display: grid;
  gap: .8rem;
  padding: clamp(1.4rem, 5vw, 2.2rem);
  justify-items: center;
  text-align: center;
}
.pg-features .duo-card {
  width: 100%;
  max-width: 17rem;
  padding: .9rem 1rem;
  border-radius: calc(var(--radius) * .7);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.pg-features .duo-who {
  font-size: var(--text-tiny);
  letter-spacing: .2em;
  color: var(--accent);
}
.pg-features .duo-act { margin-top: .25rem; letter-spacing: .06em; }
.pg-features .duo-sync {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--text-tiny);
  letter-spacing: .18em;
  color: var(--ink-soft);
}
.pg-features .duo-sync i { display: block; width: 2.2rem; height: 1px; background: var(--accent); opacity: .5; }
.pg-features .duo-note { margin-top: .4rem; font-size: var(--text-tiny); color: var(--ink-soft); letter-spacing: .1em; }

/* 09 配色 */
.pg-features .palette-scene { display: grid; gap: .9rem; padding: clamp(1.4rem, 5vw, 2.2rem); }
.pg-features .pal-group { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; }
.pg-features .pal-label {
  flex: 0 0 6.5rem;
  font-size: var(--text-tiny);
  letter-spacing: .1em;
  color: var(--ink-soft);
}
.pg-features .pal-dot {
  display: block;
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  background: var(--c, var(--accent));
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.pg-features .pal-dot.is-rainbow {
  background: conic-gradient(#3f4d3a, #a98e6f, #a8332e, #d4b483, #4e2e56, #3f4d3a);
}
.pg-features .pal-custom {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding-top: .8rem;
  border-top: 1px solid var(--hairline);
  font-size: var(--text-tiny);
  color: var(--ink-soft);
}

/* ---- 次要功能牆 ---- */
.pg-features .more-grid {
  display: grid;
  gap: clamp(1.4rem, 4vw, 2rem);
  margin-top: clamp(2rem, 6vw, 3rem);
}
@media (min-width: 640px)  { .pg-features .more-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pg-features .more-grid { grid-template-columns: repeat(3, 1fr); } }
.pg-features .more-item { border-top: 1px solid var(--hairline); padding-top: 1.1rem; }
.pg-features .more-item h3 { font-size: var(--text-body); font-weight: 600; letter-spacing: .08em; margin-bottom: .4rem; }
.pg-features .more-item p { font-size: var(--text-small); color: var(--ink-soft); }
.pg-features .more-item a { color: var(--accent); white-space: nowrap; }

/* ---- 製作流程三步驟 ---- */
.pg-features .step-grid {
  display: grid;
  gap: clamp(2rem, 6vw, 3rem);
  margin-top: clamp(2rem, 6vw, 3rem);
  counter-reset: pgstep;
}
@media (min-width: 880px) { .pg-features .step-grid { grid-template-columns: repeat(3, 1fr); } }
.pg-features .step { display: grid; align-content: start; gap: .6rem; }
.pg-features .step h3 {
  font-size: var(--text-h3);
  font-weight: 600;
  letter-spacing: .1em;
  counter-increment: pgstep;
}
.pg-features .step h3::before {
  content: "0" counter(pgstep);
  font-family: var(--font-serif-latin);
  font-style: italic;
  font-size: .8em;
  color: var(--accent);
  margin-right: .6em;
}
.pg-features .step p { font-size: var(--text-small); color: var(--ink-soft); }
.pg-features .step-visual {
  border-radius: var(--radius);
  background: var(--paper-raise);
  box-shadow: inset 0 0 0 1px var(--hairline);
  padding: 1rem;
  display: grid;
  gap: .8rem;
  min-height: 12rem;
  align-content: center;
}
.pg-features .sv-card { position: relative; border-radius: calc(var(--radius) * .7); overflow: hidden; background: var(--paper); }
.pg-features .sv-card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 25%; }
.pg-features .sv-swatch {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: linear-gradient(115deg, var(--c, var(--accent)) 0 52%, var(--paper) 52% 100%);
}
.pg-features .sv-body { padding: .7rem .8rem .9rem; text-align: center; }
.pg-features .sv-eyebrow { font-size: var(--text-tiny); letter-spacing: .2em; color: var(--c, var(--accent)); }
.pg-features .sv-names { display: block; margin-top: .2rem; letter-spacing: .1em; }
.pg-features .sv-names i { font-style: italic; font-family: var(--font-serif-latin); color: var(--c, var(--accent)); }
.pg-features .sv-chips { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; }
.pg-features .sv-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 44px;
  padding: .3rem .7rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-tiny);
  letter-spacing: .08em;
  color: var(--ink-soft);
  box-shadow: inset 0 0 0 1px var(--hairline);
  transition: color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.pg-features .sv-chip i { display: block; width: .7rem; height: .7rem; border-radius: 50%; background: var(--c, var(--accent)); }
.pg-features .sv-chip[aria-pressed="true"] { color: var(--ink); box-shadow: inset 0 0 0 1px var(--c, var(--accent)); }
.pg-features .sv-url {
  font-family: var(--font-serif-latin);
  font-size: var(--text-small);
  text-align: center;
  color: var(--ink-soft);
  word-break: break-all;
}
.pg-features .sv-url em { font-style: normal; color: var(--accent); font-weight: 600; }
.pg-features .sv-badge {
  justify-self: center;
  padding: .3rem .9rem;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--text-tiny);
  letter-spacing: .1em;
}
.pg-features .sv-bubble {
  padding: .7rem .9rem;
  border-radius: .9rem;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--hairline);
  font-size: var(--text-small);
}
.pg-features .sv-bubble em { display: block; font-style: normal; font-size: var(--text-tiny); color: var(--ink-soft); margin-top: .2rem; }
.pg-features .sv-stat { display: flex; align-items: baseline; justify-content: center; gap: .4rem; font-size: var(--text-tiny); color: var(--ink-soft); }
.pg-features .sv-stat b {
  font-family: var(--font-serif-latin);
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--accent);
}

/* ════════════════ /styles ════════════════ */

/* 導言三件事 */
.pg-styles .pg-facts {
  display: grid;
  gap: clamp(1.4rem, 4vw, 2rem);
  margin-top: clamp(2rem, 5vw, 2.8rem);
}
@media (min-width: 620px) { .pg-styles .pg-facts { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); } }
.pg-styles .pg-fact { border-top: 1px solid var(--hairline); padding-top: 1.1rem; }
.pg-styles .pg-fact b {
  display: block;
  font-family: var(--font-serif-latin);
  font-style: italic;
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--accent);
}
.pg-styles .pg-fact span { display: block; margin-top: .5rem; font-size: var(--text-small); color: var(--ink-soft); }

/* 五風格大圖區：手機滿版直式照壓字，桌機編輯分割（照片與文字左右交錯） */
.pg-styles .st-set { display: grid; }
.pg-styles .st-item {
  position: relative;
  padding-block: clamp(2.5rem, 7vw, 4rem);
  border-top: 1px solid var(--hairline);
}
.pg-styles .st-in {
  max-width: var(--wide-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  gap: clamp(1.4rem, 4vw, 2.5rem);
  align-items: center;
}
@media (min-width: 880px) {
  .pg-styles .st-in { grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 4.5rem); }
  .pg-styles .st-item:nth-child(even) .st-photo { order: 2; }
}
.pg-styles .st-photo {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background: var(--paper-raise);
}
.pg-styles .st-photo img {
  width: 100%;
  /* height:auto 不能省：width/height 屬性等同 CSS height，會壓過 aspect-ratio */
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 22%;
}
.pg-styles .st-copy { display: grid; align-content: start; gap: .8rem; }
.pg-styles .st-no {
  font-family: var(--font-serif-latin);
  font-style: italic;
  font-size: var(--text-small);
  letter-spacing: .28em;
  color: var(--st-c, var(--accent));
}
.pg-styles .st-name {
  /* 2026-09-17（S8c）上限 3.4rem → 2.9rem（桌機 54.4px → 46.4px） */
  font-size: clamp(2.1rem, 7vw, 2.9rem);
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.25;
}
.pg-styles .st-desc { color: var(--ink-soft); max-width: 26em; }
.pg-styles .st-dots { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.pg-styles .st-dots .st-dots-label {
  font-size: var(--text-tiny);
  letter-spacing: .14em;
  color: var(--ink-soft);
  margin-right: .3rem;
}
.pg-styles .st-dot {
  display: block;
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.pg-styles .st-go {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  width: fit-content;
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--st-c, var(--accent));
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: opacity .3s var(--ease-out);
}
.pg-styles .st-go:hover { opacity: .75; }

/* 作品牆 */
.pg-styles .wall-grid {
  display: grid;
  gap: clamp(1.2rem, 3vw, 1.75rem);
  margin-top: clamp(2.2rem, 6vw, 3rem);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 900px) { .pg-styles .wall-grid { grid-template-columns: repeat(4, 1fr); } }
.pg-styles .wall-card { display: grid; gap: .5rem; text-decoration: none; color: inherit; align-content: start; }
.pg-styles .wall-photo {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.pg-styles .wall-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}
.pg-styles .wall-card:hover .wall-photo img { transform: scale(1.04); }
.pg-styles .wall-badge {
  position: absolute;
  top: .7rem; left: .7rem;
  z-index: 1;
  padding: .22rem .7rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--ink) 58%, transparent);
  color: var(--accent-ink);
  font-size: var(--text-tiny);
  letter-spacing: .16em;
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .pg-styles .wall-badge { background: rgba(34, 39, 31, .72); }
}
.pg-styles .wall-name { font-size: var(--text-small); font-weight: 600; letter-spacing: .08em; margin-top: .3rem; }
.pg-styles .wall-meta {
  font-family: var(--font-serif-latin);
  font-size: var(--text-small);
  color: var(--ink-soft);
}
.pg-styles .wall-desc { font-size: var(--text-tiny); color: var(--ink-soft); line-height: 1.8; }

/* ════════════════ /pricing ════════════════ */

.pg-pricing .pr-guarantee {
  margin-top: clamp(2rem, 5vw, 2.8rem);
  padding: clamp(1.4rem, 4vw, 2rem);
  border-radius: var(--radius);
  background: var(--paper-raise);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, var(--hairline));
}
@supports not (box-shadow: inset 0 0 0 1px color-mix(in srgb, red 50%, transparent)) {
  .pg-pricing .pr-guarantee { box-shadow: inset 0 0 0 1px var(--hairline); }
}
.pg-pricing .pg-name {
  font-family: var(--font-serif-latin);
  font-style: italic;
  font-size: var(--text-h3);
  letter-spacing: .1em;
  color: var(--accent);
}
.pg-pricing .pg-items { display: grid; gap: .8rem; margin-top: .8rem; }
@media (min-width: 760px) { .pg-pricing .pg-items { grid-template-columns: 1fr 1fr; gap: 1.6rem; } }
.pg-pricing .pg-items p { font-size: var(--text-small); color: var(--ink-soft); }
.pg-pricing .pg-items strong { color: var(--ink); }

.pg-pricing .price-grid {
  display: grid;
  gap: clamp(1.4rem, 4vw, 2rem);
  margin-top: clamp(2rem, 5vw, 3rem);
  align-items: start;
}
/* 三卡等寬（2026-09-17，S8c，Jacob 裁決 #3：「桌機版的定價三格卡片寬度要
   一樣，不需要讓 1280 的卡片特別大」）。原本是 1fr 1.45fr 1fr。 */
@media (min-width: 1000px) { .pg-pricing .price-grid { grid-template-columns: repeat(3, 1fr); } }

/* ════════ 三張方案卡（2026-09-17 重做，S8b Jacob 裁決 #3「主打卡要更突出」）
   主角靠「換材質」不是靠「加裝飾」：免費方案與全客製退成沒有底色的髮絲線框，
   中間的基本款整張換成實色深森林綠＋骨白字。三張卡不再是同一種材質的三個
   變體，而是「一張印刷品」對「兩張草稿」——單一強調色、單一陰影 token 全守住。
   2026-09-17（S8c）補：三卡等寬等高，主角**只**靠實色底＋徽章＋大價格，
   不再有任何幾何上的放大或上浮。 ════════ */
.pg-pricing .price-card {
  display: grid;
  align-content: start;
  gap: .9rem;
  padding: clamp(1.4rem, 4vw, 2rem);
  border-radius: var(--radius);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.pg-pricing .price-card.is-featured {
  /* 深色卡的兩階文字色。--card-ink-soft 是「骨白 78%＋深綠」，實量 5.6:1，
     刻意不用 opacity 做次要文字——opacity 一路調下去很容易掉到 4.5 以下。 */
  --card-ink: var(--accent-ink);
  --card-ink-soft: color-mix(in srgb, var(--accent-ink) 78%, var(--accent));
  background: var(--accent);
  color: var(--card-ink);
  padding: clamp(1.7rem, 4.4vw, 2.5rem);
  box-shadow: var(--shadow-soft);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .pg-pricing .price-card.is-featured { --card-ink-soft: rgb(203, 205, 197); }
}
/* 2026-09-17（S8c）：這裡原本讓主打卡在 ≥1000px 放大 5%＋上浮 .9rem。
   Jacob 裁決 #3 拿掉整段——三卡等寬等高起跑，主打感全靠「換材質」：
   實色深森林綠底＋骨白徽章＋比另兩張大一號的價格數字。放大與上浮是
   「加裝飾」那一路，跟 9/17 重做這三張卡時立的原則本來就互相打架。 */
.pg-pricing .price-card h3 {
  font-size: var(--text-h3);
  font-weight: 600;
  letter-spacing: .12em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
}
/* 卡頂膠囊徽章（原本塞在 h3 裡，跟方案名擠成一行） */
.pg-pricing .price-flag {
  justify-self: start;
  padding: .3rem .95rem;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--text-tiny);
  font-weight: 400;
  letter-spacing: .16em;
  text-indent: .16em;
  line-height: 1.6;
}
.pg-pricing .is-featured .price-flag { background: var(--accent-ink); color: var(--accent); }
.pg-pricing .price-num {
  font-family: var(--font-serif-latin);
  font-style: italic;
  font-size: clamp(2.2rem, 6vw, 3rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--accent);
}
/* 主角卡的價格：拉丁襯線斜體超大字，整張卡的視覺重量都壓在這裡 */
.pg-pricing .is-featured .price-num {
  /* 2026-09-17 Jacob：「NT$ 1,280 被分成兩行，要在同一排」。三卡等寬後主打卡內寬 1440 只有 235px，
     8.5vw（70px）的「NT$ 1,280」量到 253px 就折行。改 3.9vw：1440→56px（文字 201px）、1080→41.6px（下限），
     並用 nowrap 兜底——寧可字小一點，價格永遠一行。 */
  font-size: clamp(2.6rem, 3.9vw, 3.75rem);
  white-space: nowrap;
  line-height: 1;
  color: var(--card-ink);
  margin-block: .1rem;
}
.pg-pricing .price-num small { font-size: .4em; font-style: normal; margin-left: .3em; color: var(--ink-soft); }
.pg-pricing .price-was {
  display: block;
  font-size: .4em;
  opacity: .55;
  text-decoration-thickness: 1px;
  line-height: 1.6;
}
.pg-pricing .price-deadline { font-size: var(--text-tiny); color: var(--ink-soft); letter-spacing: .04em; }
.pg-pricing .price-card ul { display: grid; gap: .5rem; font-size: var(--text-small); color: var(--ink-soft); }
.pg-pricing .price-card li { padding-left: 1.4em; position: relative; }
.pg-pricing .price-card li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 600; }
.pg-pricing .price-card strong { color: var(--ink); }
/* 深色主角卡的文字：兩階都實量過（骨白 7.9:1／--card-ink-soft 5.6:1） */
.pg-pricing .is-featured .price-was { opacity: .8; }
.pg-pricing .is-featured .price-deadline,
.pg-pricing .is-featured ul,
.pg-pricing .is-featured .price-group h4 span { color: var(--card-ink-soft); }
.pg-pricing .is-featured .price-group h4,
.pg-pricing .is-featured strong,
.pg-pricing .is-featured li::before { color: var(--card-ink); }
.pg-pricing .price-boundary {
  font-size: var(--text-tiny);
  color: var(--ink-soft);
  padding-top: .7rem;
  border-top: 1px solid var(--hairline);
}
.pg-pricing .price-groups { display: grid; gap: 1.1rem; }
.pg-pricing .price-group h4 {
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: .12em;
  margin-bottom: .5rem;
}
.pg-pricing .price-group h4 span {
  display: block;
  font-weight: 400;
  font-size: var(--text-tiny);
  letter-spacing: .04em;
  color: var(--ink-soft);
  margin-top: .2rem;
}
/* 方案卡的 CTA：滿欄寬。長文案（「先免費做，發完再決定要不要升級」）在
   1000px 三欄版一定會折行，text-wrap:balance 讓兩行長度接近，
   不會留下「級」單獨一行的孤兒字。 */
.pg-pricing .price-card .btn {
  margin-top: .4rem;
  justify-self: stretch;
  text-align: center;
  line-height: 1.5;
  text-wrap: balance;
}
.pg-pricing .price-note { margin-top: 1.4rem; font-size: var(--text-small); color: var(--ink-soft); }

/* 對比表：手機是兩欄的小表，桌機才拉開 */
.pg-pricing .vs-table {
  margin-top: clamp(2rem, 5vw, 3rem);
  border-top: 1px solid var(--hairline);
}
.pg-pricing .vs-head,
.pg-pricing .vs-row {
  display: grid;
  grid-template-columns: 5.5rem 1fr 1fr;
  gap: .5rem clamp(.6rem, 2vw, 1.2rem);
  padding: .85rem 0;
  border-bottom: 1px solid var(--hairline);
  font-size: var(--text-small);
  align-items: start;
}
@media (min-width: 720px) { .pg-pricing .vs-head, .pg-pricing .vs-row { grid-template-columns: 9rem 1fr 1fr; } }
.pg-pricing .vs-head {
  font-size: var(--text-tiny);
  letter-spacing: .14em;
  color: var(--ink-soft);
  position: sticky;
  top: var(--sn-h);
  background: var(--paper);
  z-index: 1;
}
.pg-pricing .vs-head .is-us { color: var(--accent); font-weight: 600; }
.pg-pricing .vs-aspect { font-size: var(--text-tiny); letter-spacing: .08em; color: var(--ink-soft); }
.pg-pricing .vs-cell { color: var(--ink-soft); }
.pg-pricing .vs-cell.is-us { color: var(--ink); }

/* FAQ */
.pg-pricing .faq-list { margin-top: clamp(2rem, 5vw, 3rem); border-top: 1px solid var(--hairline); }
.pg-pricing .faq-list details { border-bottom: 1px solid var(--hairline); }
.pg-pricing .faq-list summary {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  padding: 1.1rem 0;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  letter-spacing: .06em;
}
.pg-pricing .faq-list summary::-webkit-details-marker { display: none; }
.pg-pricing .faq-list summary::after {
  content: "＋";
  margin-left: auto;
  color: var(--accent);
  font-weight: 400;
  transition: transform .3s var(--ease-out);
}
.pg-pricing .faq-list details[open] summary::after { content: "－"; }
.pg-pricing .faq-list summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.pg-pricing .faq-body { padding: 0 0 1.3rem; }
.pg-pricing .faq-body p { font-size: var(--text-small); color: var(--ink-soft); }
.pg-pricing .faq-body a { color: var(--accent); }

/* ════════════════════════════════════════════════════════════
   氛圍層（2026-09-17 立，S8）
   ------------------------------------------------------------
   階段一把四頁做成「乾淨但空」——每屏只有字。四個參考站之所以不空，是
   每個 section 都被攝影填滿；我們的「攝影」＝婚紗照＋產品 UI 模擬，這一
   段補的是第三樣：**底紋、光影、植物**（Jacob 2026-08-23 裁決：純簡約會
   空洞、要底紋＋光影＋花草、裝飾要完整入畫不裁切）。

   三條紀律：
     ① 全部是裝飾層：`aria-hidden`、`pointer-events:none`、`z-index:0`；
        內容容器自己 `position:relative; z-index:1` 壓在上面。
     ② **不新增第二個強調色**：光暈是 --accent／--st-c 的極稀釋（≤10%），
        葉影用既有的 hero-atmo.webp／leaf-shadow.webp 兩張圖，靠 multiply
        融進紙色。深色元素一律暖褐墨階，不用純黑。
     ③ 植物走 **去背照片 webp ＋ multiply**（2026-09-18 S8 改，前兩版分別是
        CSS mask 與手繪 SVG sprite）：素材在 landing/assets/botanic/，跟氛圍層
        同一套手法（multiply＋radial mask），整站只剩「攝影」一種材質。
        改的理由與規格見下方 .bot 的註解與 shared/botanic-LICENSE.md。
        圖載不到時裝飾直接不顯示（它是 aria-hidden 的裝飾層，可降級）。
   ════════════════════════════════════════════════════════════ */


/* 裝飾底層的共同外殼 */
.atmo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
/* 光暈：紙上的兩束斜光（單色，就是 accent 的極稀釋） */
.atmo-glow {
  background:
    radial-gradient(58% 46% at 16% 10%, color-mix(in srgb, var(--atmo-c, var(--accent)) 10%, transparent), transparent 70%),
    radial-gradient(46% 54% at 88% 82%, color-mix(in srgb, var(--atmo-c, var(--accent)) 7%, transparent), transparent 72%);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .atmo-glow {
    background:
      radial-gradient(58% 46% at 16% 10%, rgba(63, 77, 58, .1), transparent 70%),
      radial-gradient(46% 54% at 88% 82%, rgba(63, 77, 58, .07), transparent 72%);
  }
}
/* 紙紋：既有的骨白氛圍底圖，multiply 壓進紙色當紙的纖維與自然光 */
.atmo-paper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(/landing/assets/hero-atmo.webp) center / cover no-repeat;
  mix-blend-mode: multiply;
  opacity: .26;
  /* ⚠ 遮罩不能省：紙紋是一張有明暗的照片，貼滿 section 會在邊界留下一條
     肉眼看得見的直線（區塊下緣突然「換紙」）。四周淡出才是「紙」不是「一張圖」。 */
  -webkit-mask-image: radial-gradient(118% 104% at 42% 34%, #000 24%, transparent 82%);
  mask-image: radial-gradient(118% 104% at 42% 34%, #000 24%, transparent 82%);
}
/* 葉影：右下角極淡點綴。遮罩讓邊緣融進紙色，**不能看見圖的方框**（完整入畫） */
.atmo-leaf::after {
  content: "";
  position: absolute;
  right: -3%;
  bottom: -6%;
  width: min(48vw, 640px);
  aspect-ratio: 16 / 9;
  background: url(/landing/assets/leaf-shadow.webp) center / cover no-repeat;
  mix-blend-mode: multiply;
  opacity: .32;
  -webkit-mask-image: radial-gradient(130% 130% at 88% 92%, #000 26%, transparent 72%);
  mask-image: radial-gradient(130% 130% at 88% 92%, #000 26%, transparent 72%);
}
.atmo-leaf-left::after { right: auto; left: -3%; transform: scaleX(-1); }
@media (max-width: 899px) { .atmo-leaf::after { display: none; } }

/* 照片型植物裝飾：去背 webp ＋ multiply（2026-09-18 S8 取代 SVG 線稿）
   ------------------------------------------------------------
   HTML 端長這樣（形狀由 src 決定；外殼 class 只管定位）：
     <span class="bot bot-sprig" aria-hidden="true">
       <img src="/landing/assets/botanic/sprig-1.webp" alt=""
            width="600" height="1000" loading="lazy" decoding="async">
     </span>

   為什麼換掉手繪線稿（Jacob 第三次 preview 裁決 #4「花朵與裝飾很醜，不夠精緻」
   的第二次修正）：線稿版把三階線寬做出來了，但「手繪向量」這個材質本身跟
   首屏的電影感婚紗照、五風格的真實喜帖截圖不同語言——同一頁上一半是攝影、
   一半是插畫。改成真的乾燥花靜物照之後，整站只剩一種材質。

   素材：5 張去背 webp（尤加利 ×2／乾燥花 ×2／橫藤 ×1，米白紙底、柔焦低飽和），
   規格與授權見 shared/botanic-LICENSE.md，大小上限由 tools/site-check.mjs 的
   資產守衛把關（每檔 ≤120KB、RIFF/WEBP、VP8X alpha 位）。

   三件事讓照片融進紙底、不像「貼上去的一張圖」：
     ① mix-blend-mode: multiply —— 白底殘影乘進紙色，邊緣不會浮出來
     ② mask-image radial —— 四周化開，任何背景上都看不到圖的方框
        （DESIGN.md §9 密度規則 3，沿用 .atmo-leaf 已驗證的手法）
     ③ filter: saturate(.8) —— 收掉乾燥玫瑰的粉，不引入第二個強調色
   ⚠ --bot-o 從線稿時代的 .14–.3 調到 .5–.75：照片本身就柔，沿用舊數字等於
     看不見。每個落點的值是照截圖調的，不是同一個數字複製貼上。
   ⚠ 深色 stage（首頁五風格的星夜那一幕）要覆寫成 mix-blend-mode: normal，
     multiply 在深夜藍底上會把整枝壓成黑塊——覆寫寫在 landing.css。 */
.bot {
  display: block;
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: var(--bot-o, .6);
  mix-blend-mode: multiply;
  filter: saturate(.8);
  -webkit-mask-image: radial-gradient(ellipse 78% 78% at 50% 50%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 78% 78% at 50% 50%, #000 55%, transparent 100%);
}
/* aspect-ratio 留在外殼上：圖還沒載到時版面不會跳（裝飾層不佔流，
   但 .seam 那支是靠父層高度定位的）。 */
.bot-sprig, .bot-bloom { aspect-ratio: 3 / 5; }
.bot-vine { aspect-ratio: 1000 / 167; }
.bot img { display: block; width: 100%; height: auto; }
.bot-flip { transform: scaleX(-1); }

/* 區塊接縫的橫藤：把上下兩區牽起來（exhibit 的 ex-vine-h 本來就是幹這個的） */
.seam {
  position: relative;
  height: clamp(2.6rem, 7vw, 4.2rem);
  margin-inline: auto;
  max-width: var(--wide-max);
}
/* ⚠ 寬度不是「看得到多寬」：vine-1.webp 的可見主體只佔圖寬約 64%，兩側是
   透明留白（21:9 的原圖裁進 6:1 畫布時高度先撞頂，幾何上的必然）。線稿時代
   這裡是 min(74%, 30rem)＝480px 全都是藤；換成照片後要 480 / .64 ≈ 47rem
   才量得到同樣寬的可見主體。**改這個值要回去量可見主體，不要量外殼。** */
.seam .bot-vine {
  left: 50%;
  top: 50%;
  width: min(100%, 47rem);
  transform: translate(-50%, -50%);
  --bot-o: .55;
}
@media (max-width: 599px) { .seam { height: 2.2rem; } .seam .bot-vine { width: 100%; } }

/* ════════════════ 三分頁的氛圍層落點（2026-09-17，S8）════════════════
   ⚠ 一律 `overflow: clip` 不用 `hidden`：hidden 會讓元素變成捲動容器，
   /pricing 對比表的 `position: sticky` 表頭當場失效（clip 不會）。 */
.pg-page .section { position: relative; overflow: clip; }
.pg-page .section > .container-wide,
.pg-page .section > .container { position: relative; z-index: 1; }
.pg-page .pg-hero { position: relative; }

/* 分頁的植物落點：A＝右上、B＝左下，都留足邊距＝完整入畫不被裁 */
.pg-bot-a { right: 3%; top: 8%; width: clamp(5rem, 8vw, 8.5rem); --bot-o: .52; }
.pg-bot-b { left: 2%; bottom: 6%; width: clamp(5rem, 8vw, 9rem); --bot-o: .52; }
@media (max-width: 899px) { .pg-bot { display: none; } }

/* ---- /styles：五風格大圖區補紙色暈影＋植物，照片放大 ---- */
.pg-styles .st-item { overflow: clip; }
.pg-styles .st-in { position: relative; z-index: 1; }
/* 手撕紙／一灘光的有機色塊，掛在照片身上（同首頁五風格舞台的做法） */
.pg-styles .st-photo { overflow: visible; box-shadow: none; background: none; }
.pg-styles .st-photo img { border-radius: var(--radius); box-shadow: var(--shadow-soft); position: relative; z-index: 1; }
.pg-styles .st-photo::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: -6%;
  top: -4%;
  width: 96%;
  height: 92%;
  border-radius: 58% 42% 47% 53% / 44% 51% 49% 56%;
  background:
    radial-gradient(72% 72% at 32% 28%, color-mix(in srgb, var(--ink) 26%, transparent) 0%, transparent 74%),
    var(--st-c, var(--accent));
  opacity: .15;
  pointer-events: none;
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .pg-styles .st-photo::before { background: var(--st-c, var(--accent)); opacity: .12; }
}
.pg-styles .st-bot {
  right: 4%;
  bottom: 8%;
  width: clamp(5.5rem, 8vw, 9rem);
  --bot-o: .6;
}
/* 偶數格的照片在右，植物改掛左下才不會壓到照片 */
.pg-styles .st-item:nth-child(even) .st-bot { right: auto; left: 4%; }
@media (max-width: 879px) { .pg-styles .st-bot { display: none; } }

/* ---- /pricing：方案卡加一層自己的柔光（別讓它是浮在空紙上的白框） ---- */
.pg-pricing .price-card { position: relative; overflow: clip; }
.pg-pricing .price-card > * { position: relative; z-index: 1; }
/* 主角卡改成實色深綠之後，柔光要換成骨白的（原本那束深綠光在深綠底上等於不存在） */
.pg-pricing .price-card.is-featured::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(70% 110% at 6% 0%, color-mix(in srgb, var(--accent-ink) 13%, transparent), transparent 64%);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .pg-pricing .price-card.is-featured::before { background: radial-gradient(70% 110% at 6% 0%, rgba(242, 241, 236, .13), transparent 64%); }
}
.pg-pricing .pr-guarantee { position: relative; overflow: clip; }

/* 分頁頁首也要有材質：只有一個大標＋副標＋兩顆按鈕的一屏讀起來仍是空紙。
   ⚠ .pg-hero 鎖在 68rem 內，氛圍層要往兩側撐到視窗邊緣，否則會留下
   「換紙」的直線（同 §9 踩雷第六條）。 */
/* ⚠ 這裡不能加 overflow:clip：.pg-hero 鎖在 68rem 內，一裁就把出血的氛圍層
   收回 68rem，左右各留一條「換紙」的直線。裝飾層自己 inset 得住，不需要裁。 */
.pg-hero-atmo { inset: 0 calc(50% - 50vw); }
.pg-hero-bot { right: 4%; bottom: 10%; width: clamp(5rem, 8vw, 8.5rem); --bot-o: .56; }
@media (max-width: 899px) { .pg-hero-bot { display: none; } }