/* ============================================================
   分頁 v3 共用層｜shared/pages.css（2026-10-04 立，分頁第二波）
   ------------------------------------------------------------
   服務四支行銷分頁：/features ／ /styles ／ /pricing（＋ /styles/custom/ 只吃
   lining-nums 與下一頁導覽）。載入順序：base.css → site.css → 本檔 → 該頁自己的 css。

   這一層只放「四頁都長一樣」的骨架（DESIGN.md §9「分頁 v3」）：
     ① .pv-hero      頁首＝一屏「封面跨頁」：左邊字、右邊一個該頁專屬的物件
                      （分頁不准再是「大標＋副標＋一朵花」——密度規則 1）
     ② .pv-folio     頁碼列：No. 02 · Features · 功能（雜誌的書眉，只在頁首出現一次）
     ③ .pv-rail      桌機左側的章節索引（≥1280px 才出現；IntersectionObserver 標目前章）
     ④ .pv-ch-head   章節頭：巨型斜體章碼壓在標題後面（同首頁 .lf-copy::before 的語彙）
     ⑤ .pv-phone     手機外框（同首頁 .lf-phone 的比例，寬度由 --pw 決定，內容一律 cqw）
     ⑥ .pv-next      頁末「下一頁」大字導覽：功能 → 風格 → 全客製 → 定價 → 功能
     ⑦ .pv-end       深綠收尾帶（同首頁 .sh-contact）

   紀律同 §9：只用 base.css token、唯一強調色 --accent、陰影只有 --shadow-soft、
   可點 ≥44px、input ≥16px。**預設 CSS＝完成態**；所有「先藏起來再演」的狀態一律寫在
   `html.pv-motion` 底下（pages.js 在非減少動態時才掛），腳本沒跑、RM 都是完整畫面。
   ============================================================ */

/* Cormorant 的舊式數字會讓「NT$ 0」讀成「NT$ o」（首頁 v3 同一條） */
body.pg-page { font-variant-numeric: lining-nums; }

/* ════════════════ ① 頁首：封面跨頁 ════════════════ */
.pv-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: calc(100svh - var(--sn-h));
  display: grid;
  align-items: center;
  padding: clamp(2.2rem, 7vw, 4rem) 0 clamp(3rem, 7vw, 4.5rem);
  border-bottom: 1px solid var(--hairline);
}
@media (min-width: 900px) {
  .pv-hero { min-height: min(calc(100svh - var(--sn-h)), 58rem); padding-block: 3rem 4.5rem; }
}
/* 窗光：跟首屏同一道午後斜光（葉影＋一束暖光），這樣從首頁點進來是同一個房間 */
.pv-light {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* 下緣 22% 漸隱回紙色：頁首被 overflow:clip 切掉的地方不能留一條硬線（評審 2026-10-05） */
  -webkit-mask-image: linear-gradient(#000 78%, transparent);
  mask-image: linear-gradient(#000 78%, transparent);
  /* 暖紙色：首屏靜物照的米白偏暖（≈#f3ece0），分頁頁首跟它同一道午後光，
     不再用 accent 的綠暈（評審 2026-10-04：灰綠霧跟首頁不是同一個暖色世界） */
  background:
    linear-gradient(118deg, transparent 16%, color-mix(in srgb, #fff 58%, transparent) 33%, transparent 50%),
    radial-gradient(64% 78% at 76% 46%, color-mix(in srgb, #ecdcc2 46%, transparent), transparent 72%),
    radial-gradient(90% 70% at 10% 100%, color-mix(in srgb, #efe4d2 40%, transparent), transparent 70%),
    var(--paper);
}
.pv-light::before {
  content: "";
  position: absolute;
  right: -10%;
  top: -14%;
  width: min(78vw, 1040px);
  aspect-ratio: 1280 / 714;
  background: url(/landing/assets/leaf-shadow-v2.webp) center / cover no-repeat;
  mix-blend-mode: multiply;
  opacity: .36;
  transform: rotate(-8deg) scaleX(-1);
  /* 羽化到完全看不見邊：任何寬度都不能出現矩形邊（評審：768 寬有硬邊長條） */
  -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 35%, transparent 100%);
}
@media (max-width: 899px) { .pv-light::before { right: -30%; top: auto; bottom: -6%; width: 120vw; opacity: .26; } }
@media (min-width: 900px) and (max-width: 1199px) { .pv-light::before { opacity: .22; } }

@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .pv-light { background: linear-gradient(118deg, transparent 18%, rgba(255,255,255,.5) 34%, transparent 52%), var(--paper); }
}

.pv-hero-in {
  width: 100%;
  max-width: var(--wide-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  gap: clamp(2rem, 6vw, 3rem);
  align-items: center;
}
@media (min-width: 900px) {
  .pv-hero-in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(2.5rem, 5vw, 5rem);
  }
}
.pv-hero-copy { position: relative; z-index: 2; max-width: 34rem; }
.pv-hero-obj { position: relative; z-index: 1; min-width: 0; }

/* ② 頁碼列 */
.pv-folio {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .9rem;
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-micro);
  color: var(--ink-soft);
  text-transform: uppercase;
}
.pv-folio i {
  font-family: var(--font-serif-latin);
  font-style: italic;
  font-size: 1.9em;
  letter-spacing: 0;
  color: var(--accent);
  text-transform: none;
  line-height: 1;
}
.pv-folio span + span::before { content: "·"; margin-right: .9rem; opacity: .6; }

.pv-h1 {
  margin-top: clamp(.9rem, 2.5vw, 1.4rem);
  font-size: var(--text-page);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.2;
  text-wrap: balance;
}
/* 後半句一律自成一行：手機上不准斷成「聯絡我們，回／你的是真人」這種詞中斷 */
.pv-h1 em { font-style: normal; color: var(--accent); display: block; }
.pv-lead {
  margin-top: clamp(1rem, 3vw, 1.5rem);
  color: color-mix(in srgb, var(--ink-soft) 78%, var(--ink));   /* 壓在窗光上，比內文的 ink-soft 再深一階 */
  max-width: 30em;
}
.pv-act {
  margin-top: clamp(1.5rem, 4vw, 2.2rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem clamp(1.2rem, 4vw, 2rem);
}
.pv-act .btn { font-weight: 600; }
.pv-act .pg-quiet { display: inline-block; }

/* 捲動提示：同首屏 .sh-cue 的極小寬字距＋一條會走的線 */
.pv-cue {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: .5rem;
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-micro);
  text-indent: var(--tracking-micro);
  color: var(--ink-soft);
  pointer-events: none;
}
.pv-cue i { display: block; width: 1px; height: 2.2rem; background: currentColor; opacity: .5; transform-origin: top; }
html.pv-motion .pv-cue i { animation: pv-cue 2.4s var(--ease-out) infinite; }
@keyframes pv-cue { 0% { transform: scaleY(0); } 55% { transform: scaleY(1); transform-origin: top; } 56% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (max-width: 899px), (max-height: 700px) { .pv-cue { display: none; } }

/* 頁首入場（只在 pv-motion：一次性過場，RM 不演、腳本沒跑也不藏） */
html.pv-motion .pv-hero [data-in] {
  opacity: 0;
  transform: translateY(18px);
  animation: pv-in 1.1s var(--ease-out) forwards;
  animation-delay: calc(var(--d, 0) * 1s + .1s);
}
@keyframes pv-in { to { opacity: 1; transform: none; } }

/* ════════════════ ③ 章節索引（桌機左側） ════════════════ */
.pv-rail {
  position: fixed;
  z-index: 40;   /* 高於各頁的 CTA 帶與舞台（評審：被 /features 的 CTA 帶切掉一角），低於導覽 */
  left: max(1.4rem, calc((100vw - var(--wide-max)) / 2 - 10.5rem));
  top: 50%;
  transform: translateY(-50%);
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: opacity .5s var(--ease-out), visibility .5s, background-color .3s var(--ease-out);
}
@media (min-width: 1400px) {
  .pv-rail {
    display: grid;
    gap: 0;
    padding: .5rem 1rem .5rem .8rem;
    border-radius: 16px;
    background: color-mix(in srgb, var(--paper) 84%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}
.pv-rail.is-hidden { opacity: 0; visibility: hidden; }
/* 鍵盤使用者 Tab 進來時強制現身（頁首時它是收起來的） */
.pv-rail:focus-within { opacity: 1; visibility: visible; }
.pv-rail a {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  min-height: 44px;
  align-items: center;
  font-size: var(--text-tiny);
  letter-spacing: .22em;
  color: var(--ink-soft);
  text-decoration: none;
  opacity: .8;
  transition: opacity .35s var(--ease-out), color .35s var(--ease-out);
}
.pv-rail a i {
  font-family: var(--font-serif-latin);
  font-style: italic;
  font-size: 1.15rem;
  letter-spacing: 0;
  min-width: 1.6rem;
}
.pv-rail a::after {
  content: "";
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width .5s var(--ease-out);
}
.pv-rail a:hover { opacity: 1; }
.pv-rail a[aria-current="true"] { opacity: 1; color: var(--accent); }
.pv-rail a[aria-current="true"]::after { width: 1.6rem; }
/* 深色舞台經過時（例如 /styles 的星夜那一幕）由該頁把 .pv-rail 加 .is-on-dark */
.pv-rail.is-on-dark { background: color-mix(in srgb, #10141c 62%, transparent); }
.pv-rail.is-on-dark a { color: color-mix(in srgb, #fff 86%, transparent); }
.pv-rail.is-on-dark a[aria-current="true"] { color: #fff; }

/* ════════════════ ④ 章節頭 ════════════════ */
.pv-ch { position: relative; overflow: clip; scroll-margin-top: var(--sn-h); }
.pv-ch-head { position: relative; max-width: 40rem; }
.pv-ch-no {
  position: absolute;
  z-index: -1;
  left: -.08em;
  top: -.5em;
  font-family: var(--font-serif-latin);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(7rem, 20vw, 15rem);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--accent);
  opacity: .06;
  pointer-events: none;
  user-select: none;
}
.pv-kicker {
  font-family: var(--font-serif-latin);
  font-style: italic;
  font-size: var(--text-small);
  letter-spacing: .28em;
  color: var(--accent);
}
.pv-title {
  margin-top: .7rem;
  font-size: var(--text-section);
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.42;
  text-wrap: balance;
}
.pv-display {
  margin-top: .7rem;
  font-size: var(--text-display);
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.3;
  text-wrap: balance;
}
.pv-sub { margin-top: .9rem; color: var(--ink-soft); max-width: 34em; }

/* 描邊小標：免費版就有／基本款（同首頁 .lf-tag，描邊文字不是實心膠囊） */
.pv-tag {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: var(--text-tiny);
  letter-spacing: .16em;
  color: var(--ink-soft);
}
.pv-tag::before {
  content: "";
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  border: 1.5px solid currentColor;
}
.pv-tag.is-paid { color: var(--accent); }
.pv-tag.is-paid::before { background: currentColor; }

/* ════════════════ ⑤ 手機外框 ════════════════ */
.pv-phone {
  --pw: 17rem;
  position: relative;
  width: var(--pw);
  aspect-ratio: 9 / 19;
  padding: calc(var(--pw) * .024);   /* % 會吃父層寬，不是手機自己的寬 */
  border-radius: 13% / 6.2%;
  background: #1d1f1b;
  box-shadow: var(--shadow-soft), inset 0 0 0 1.5px rgba(255, 255, 255, .08);
  container-type: inline-size;
  flex: none;
}
.pv-phone::before {   /* 動態島 */
  content: "";
  position: absolute;
  z-index: 3;
  top: 3.5%;
  left: 50%;
  width: 28%;
  height: 3.3%;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #1d1f1b;
}
.pv-screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 11.2% / 5.2%;
  background: var(--paper);
  font-size: 4.2cqw;
  line-height: 1.5;
}
.pv-screen > img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ════════════════ ⑥ 下一頁 ════════════════ */
.pv-next {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: .4rem 2rem;
  max-width: var(--wide-max);
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 5.5rem) var(--gutter);
  color: var(--ink);
  text-decoration: none;
  border-top: 1px solid var(--hairline);
}
.pv-next-k {
  grid-column: 1 / -1;
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-micro);
  color: var(--ink-soft);
  text-transform: uppercase;
}
.pv-next-t {
  font-size: clamp(2.4rem, 9vw, 5.2rem);
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.1;
}
.pv-next-t em {
  display: block;
  margin-top: .5rem;
  font-family: var(--font-serif-latin);
  font-style: italic;
  font-weight: 400;
  font-size: .32em;
  letter-spacing: .12em;
  color: var(--ink-soft);
}
.pv-next-d { grid-column: 1; color: var(--ink-soft); max-width: 30em; font-size: var(--text-small); }
.pv-next-arrow {
  grid-column: 2;
  grid-row: 2 / span 2;
  align-self: center;
  display: grid;
  place-items: center;
  width: clamp(3.6rem, 9vw, 5.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  color: var(--accent);
  transition: background .45s var(--ease-out), color .45s var(--ease-out), transform .45s var(--ease-out), border-color .45s;
}
.pv-next::after {   /* 底線從左掃過來 */
  content: "";
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: clamp(2rem, 6vw, 3.8rem);
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .8s var(--ease-out);
}
.pv-next:hover::after, .pv-next:focus-visible::after { transform: scaleX(1); }
.pv-next:hover .pv-next-arrow, .pv-next:focus-visible .pv-next-arrow {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  transform: translateX(.4rem);
}

/* ════════════════ ⑦ 深綠收尾帶 ════════════════ */
.pv-end {
  position: relative;
  overflow: hidden;
  background: var(--accent);
  color: var(--accent-ink);
  text-align: center;
  padding-block: clamp(4.5rem, 10vw, 7.5rem);
}
.pv-end::before {
  content: "";
  position: absolute;
  inset: -25%;
  background: radial-gradient(42% 42% at 50% 58%, rgba(242, 241, 236, .12), transparent 70%);
  pointer-events: none;
}
.pv-end > * { position: relative; }
.pv-end-big {
  font-size: clamp(2rem, 7vw, 3.6rem);
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.3;
  text-wrap: balance;
}
.pv-end h2 { margin-top: .8rem; font-size: var(--text-h3); font-weight: 600; letter-spacing: .12em; }
.pv-end h2.pv-end-big { margin-top: 0; font-size: clamp(2rem, 7vw, 3.6rem); font-weight: 700; letter-spacing: .06em; }
/* ⚠ 不能吃到 .pv-end-act：按鈕被 .88 透明度混成死灰會像 disabled（評審 2026-10-05） */
.pv-end p:not(.pv-end-big):not(.pv-end-act) { opacity: .88; margin-top: .75rem; max-width: 30em; margin-inline: auto; }
.pv-end-act { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 2rem; }
.pv-end .btn:not(.btn-ghost) { background: var(--accent-ink); color: var(--accent); font-weight: 600; }
.pv-end .btn-ghost { color: var(--accent-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-ink) 60%, transparent); }
@media (max-width: 420px) { .pv-end-act { flex-direction: column; align-items: center; } .pv-end-act .btn { min-width: 14rem; } }

/* 一般區塊的節奏與容器（跟 .section 同一套 --section-y） */
.pv-sec { position: relative; overflow: clip; padding-block: var(--section-y); }
.pv-sec > .container-wide, .pv-sec > .container { position: relative; z-index: 1; }
.pv-wrap { max-width: var(--wide-max); margin-inline: auto; padding-inline: var(--gutter); position: relative; z-index: 1; }

/* ════════════════ 深色面上的鍵盤焦點環（2026-10-05 評審 P0）════════════════
   site.css 的 .pg-page :focus-visible 是 2px 深森林綠——在深綠收尾帶、主打方案卡、
   星夜房這些深色面上等於隱形（WCAG 2.4.7／1.4.11）。深色容器內一律改骨白雙環。 */
.pv-end :focus-visible,
.pg-page .on-dark :focus-visible,
.pg-page [data-dark] :focus-visible {
  outline: 2px solid var(--accent-ink) !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 70%, transparent);
}