/* VibeCode PRO 落地頁：雜誌編輯風，獨立視覺，不引用官網 CSS。
   色值與對比門檻依 docs/superpowers/specs/2026-09-24-vibecode-pro-landing-page-design.md「視覺系統」。 */
:root {
  --ink: #1f2d30;
  --ink-soft: #3f4b4d;
  --deep: #203e37;
  --btn: #2e614b;
  --btn-hover: #234b3a;
  --link: #2e614b;
  --paper: #f4f2ee;
  --tint: #ebe6dd;
  --card: #fbfaf7;
  --card-shadow: 0 1px 2px rgba(40, 36, 28, .06), 0 10px 28px rgba(40, 36, 28, .08);
  --rule: #c9d6d1;
  --accent: #41c064;
  --disabled: #767f86;
  --serif: "Noto Serif TC", "Songti TC", "PMingLiU", serif;
  --sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  /* 首屏以下大標題的縮放單位：與首屏 --u 同算法，但上限 1px，1920×1080 以上維持原尺寸；內文不套用 */
  --hu: max(min(1px, calc(100vw / 1672), calc((100svh - 68px) / 864)), .72px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--sans); font-size: 15px; line-height: 1.85; color: var(--ink); background: var(--paper); }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--link); }
a:focus-visible, .btn:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--serif); color: var(--ink); margin: 0; }
p { margin: 0 0 14px; }
code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: .9em; background: var(--tint); padding: 1px 5px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 32px; }
.wrap.narrow { max-width: 820px; }

/* 刊頭 */
.masthead { background: #21403a linear-gradient(112deg, transparent 0 24%, rgba(255,255,255,.045) 24% 31%, transparent 31% 35%, rgba(255,255,255,.03) 35% 39%, transparent 39%); position: sticky; top: 0; z-index: 10; }
/* 頁首內容寬度比照奧微官網：置中 974px，logo 與選單不分散到兩端 */
.masthead .wrap { max-width: none; width: min(974px, 100% - 64px); padding: 0; }
.masthead-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; flex-wrap: wrap; }
@supports (animation-timeline: scroll()) {
  @media (min-width: 601px) {
    .masthead { backdrop-filter: blur(0px); animation: head-glass linear both; animation-timeline: scroll(root); animation-range: 0 120px; }
    .masthead-inner { animation: head-shrink linear both; animation-timeline: scroll(root); animation-range: 0 120px; }
  }
}
@keyframes head-glass { to { background-color: rgba(33, 64, 58, .82); backdrop-filter: blur(12px) saturate(1.3); } }
@keyframes head-shrink { to { min-height: 52px; } }
/* 頁首字級比照奧微官網：logo 方塊約 30px、品牌字約 21px、選單 16px 一般粗細 */
.brand { color: #fff; text-decoration: none; font-weight: 600; font-size: 21px; letter-spacing: .01em; line-height: 1; min-height: 44px; display: inline-flex; align-items: center; gap: 10px; }
.brand img { height: 26px; width: auto; }
.nav { display: flex; align-items: center; flex-wrap: wrap; }
.nav a { color: #fff; text-decoration: none; font-size: 16px; font-weight: 400; letter-spacing: .3px; padding: 10px 18px; min-height: 44px; display: inline-flex; align-items: center; }
.nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.nav-sep { width: 1px; height: 24px; background: rgba(255,255,255,.45); margin: 0 28px 0 14px; }
.nav .nav-home { border: 1px solid rgba(255,255,255,.85); border-radius: 4px; min-height: 44px; padding: 0 22px; font-size: 16px; gap: 10px; }
.nav-home svg { width: 15px; height: 15px; }

/* 首屏：依使用者 2026-09-24 第二版設計圖（1672×941）逐項還原。
   桌機以 --u（設計圖 1px 對應的長度）等比例縮放，同時受寬與高限制，
   讓首屏（頁首 68px 以下）像設計圖一樣剛好是一個畫面。 */
.cover { --u: min(1.5px, calc(100vw / 1672), max(calc((100svh - 68px) / 864), .72px)); position: relative; height: calc(864 * var(--u)); background: #f7f5f0; overflow: hidden; }
/* 背景圖以同一個 --u 縮放並貼齊右側；視窗比設計圖寬時，左側露出的空間用淡出銜接紙面底色 */
.cover-bg { position: absolute; top: 0; right: 0; width: calc(1672 * var(--u)); height: 100%; object-fit: cover; --fade: clamp(0px, calc(100vw - 1672 * var(--u)), calc(160 * var(--u))); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade)); mask-image: linear-gradient(to right, transparent 0, #000 var(--fade)); }
.cover-card { display: none; }
/* 左下綠葉：從背景拆出的獨立圖層，固定貼齊畫面左下角，不隨背景圖往右移（原圖座標 x 0–560、y 300–864） */
.cover-leaves { position: absolute; left: 0; bottom: 0; width: calc(560 * var(--u)); height: calc(564 * var(--u)); background: url("images/cover-leaves.webp") 0 100% / 100% 100% no-repeat; pointer-events: none; }
/* 卡片方塊：從卡片左側散落處依序滑進右側版面格子，只播一次（Q28）。座標是背景圖 1672×864 設計座標，跟背景圖一起貼齊右側縮放 */
.cover-tiles { position: absolute; top: 0; right: 0; width: calc(1672 * var(--u)); height: 100%; pointer-events: none; }
.cover-tiles i { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); background: linear-gradient(135deg, rgba(255, 255, 255, .07), rgba(0, 0, 0, .05)), var(--c); border-radius: calc(2 * var(--u)); box-shadow: 0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(30, 40, 30, .22); animation: fade-in .35s ease-out both, tile-settle 1s cubic-bezier(.2, .8, .2, 1) calc(var(--i) * 45ms + .4s) both; }
@keyframes tile-settle { from { transform: translate(calc(var(--dx) * var(--u)), calc(var(--dy) * var(--u))) rotate(calc(var(--r) * 1deg)); } }
/* 葉影：沿用視覺產製的葉影層，放在文字右側、卡片上緣與牆面的淺色區，不經過文字；來回一次 10 秒 */
.cover-shade { position: absolute; top: 0; right: calc(-148 * var(--u)); width: calc(1000 * var(--u)); height: calc(417 * var(--u)); background: url("images/leaf-shadow.webp") 0 0 / 100% 100% no-repeat; mix-blend-mode: multiply; opacity: .45; pointer-events: none; transform-origin: 30% 20%; animation: leaf-sway 5s ease-in-out infinite alternate; }
@keyframes leaf-sway { to { transform: translate(calc(12 * var(--u)), calc(8 * var(--u))) rotate(2deg); } }
/* 卡片進度條：蓋住照片上的第一段，1.2 秒後由左往右跑滿 */
.cover-progress { position: absolute; right: calc(282 * var(--u)); top: calc(602 * var(--u)); width: calc(25.5 * var(--u)); height: calc(3.5 * var(--u)); border-radius: 2px; background: #b7bdb6; pointer-events: none; }
.cover-progress::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #003724; transform-origin: left; animation: grow-x 1.4s ease-in-out 1.2s both; }
/* 首屏進場，約 2 秒內跑完 */
.eyebrow { animation: fade-in .45s ease-out both; }
.eyebrow::before { transform-origin: left; animation: grow-x .5s ease-out both; }
.h1-line { display: block; font-size: .8em; line-height: 1.4; animation: rise .5s ease-out .1s both; }
.h1-break { animation: wipe .7s cubic-bezier(.4, 0, .2, 1) .5s both; }
.standfirst { animation: rise .5s ease-out .65s both; }
.cover-actions { animation: rise .5s ease-out .75s both; }
.cover-points { animation: fade-in .4s ease-out 1s both; }
.pt-icon svg * { stroke-dasharray: 1; animation: draw .8s ease-out both; animation-delay: 1.2s; }
.cover-points li:nth-child(2) .pt-icon svg * { animation-delay: 1.35s; }
.cover-points li:nth-child(3) .pt-icon svg * { animation-delay: 1.5s; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes grow-x { from { transform: scaleX(0); } }
@keyframes wipe { from { clip-path: inset(-.2em 100% -.2em 0); } to { clip-path: inset(-.2em 0 -.2em 0); } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.cover-inner { position: relative; width: calc(1424 * var(--u)); margin: 0 auto; padding: calc(140 * var(--u)) 0 calc(140 * var(--u)); }
.cover-text { max-width: calc(700 * var(--u)); }
.eyebrow { display: flex; align-items: center; gap: calc(22 * var(--u)); margin: 0; font-size: calc(13 * var(--u)); line-height: 1; letter-spacing: .34em; color: #5b6361; }
.eyebrow::before { content: ""; width: calc(67 * var(--u)); height: 2px; background: #355a4b; }
h1 { font-size: 52px; line-height: 1.28; font-weight: 900; letter-spacing: -.01em; }
.cover h1 { margin-top: calc(42 * var(--u)); font-size: calc(70 * var(--u)); line-height: calc(96 * var(--u)); letter-spacing: 0; color: #111; }
.h1-break { display: block; font-size: .9em; color: #1c4a3b; }
.standfirst { margin: calc(24 * var(--u)) 0 0; max-width: calc(660 * var(--u)); font-size: calc(20 * var(--u)); line-height: calc(38 * var(--u)); color: #3f3f3e; }
.cover-actions { display: flex; flex-wrap: wrap; gap: calc(23 * var(--u)); margin-top: calc(28 * var(--u)); }
.cover .btn-hero { min-height: calc(66 * var(--u)); padding: 0 calc(30 * var(--u)); font-size: calc(20 * var(--u)); border-radius: 4px; gap: calc(26 * var(--u)); }
.cover .btn-hero svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); flex: none; }
.cover .btn-primary { min-width: calc(287 * var(--u)); background: #225240; border-color: #225240; box-shadow: 0 6px 14px rgba(20, 50, 40, .22); }
.cover .btn-primary:hover { background: #1a4133; border-color: #1a4133; }
.cover .btn-ghost { min-width: calc(309 * var(--u)); background: rgba(255,255,255,.35); color: #1d4a3c; border: 1px solid #4f6b64; }
.cover .btn-ghost:hover { background: rgba(255,255,255,.7); }
.cover-points { list-style: none; display: flex; margin: calc(54 * var(--u)) 0 0; padding: 0; }
.cover-points li { display: flex; align-items: center; gap: calc(14 * var(--u)); padding: 0 calc(34 * var(--u)); border-left: 1px solid #d8d4ce; }
.cover-points li:first-child { padding-left: 0; border-left: 0; }
.pt-icon { width: calc(60 * var(--u)); height: calc(60 * var(--u)); flex: none; border-radius: 50%; background: #f3f0ea; border: 1px solid #dcd8d1; display: grid; place-items: center; color: #1f4a3d; }
.pt-icon svg { width: calc(36 * var(--u)); height: calc(36 * var(--u)); }
.pt-title, .pt-sub { white-space: nowrap; }
.pt-title { display: block; font-size: calc(18 * var(--u)); line-height: 1.4; font-weight: 700; color: #254038; }
.pt-sub { display: block; margin-top: calc(6 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1.4; color: #5f5f5d; }
.scroll-band { position: absolute; left: 0; right: 0; bottom: 0; height: calc(53 * var(--u)); background: rgba(230, 229, 223, .88); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: calc(13 * var(--u)); line-height: 1; letter-spacing: .2em; color: #555a59; text-decoration: none; }
.scroll-band::after { content: ""; width: 1px; height: calc(18 * var(--u)); margin-top: 2px; background: linear-gradient(to bottom, transparent, currentColor 50%, transparent) 0 0 / 1px calc(10 * var(--u)) no-repeat, rgba(85, 90, 89, .2); animation: flow-down 1.8s ease-in-out infinite; }
@keyframes flow-down { from { background-position: 0 calc(-10 * var(--u)), 0 0; } to { background-position: 0 calc(18 * var(--u)), 0 0; } }
figcaption { font-size: 14px; color: var(--ink-soft); border-top: 1px solid var(--rule); padding-top: 10px; margin-top: 12px; }

/* 按鈕與文字連結 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 50px; padding: 10px 24px; font-weight: 700; font-size: 15px; text-decoration: none; border-radius: 4px; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: #225240; color: #fff; border: 1px solid #225240; box-shadow: 0 6px 14px rgba(20, 50, 40, .2); }
.btn svg { transition: transform .25s ease; }
.btn:hover svg { transform: translateX(4px); }
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%); transform: translateX(-120%); pointer-events: none; }
.btn-primary:hover::after { transform: translateX(120%); transition: transform .7s ease; }
.btn-primary:hover { background: #1a4133; border-color: #1a4133; }
.btn-outline { background: rgba(255, 255, 255, .45); color: #1d4a3c; border: 1px solid #4f6b64; }
.btn-outline:hover { background: rgba(255, 255, 255, .85); }
.text-link { font-weight: 700; text-decoration: underline; text-underline-offset: 6px; min-height: 44px; display: inline-flex; align-items: center; }
/* 停用態（CEO 規範 §4.9）：文字即宣告狀態、無 hover、不可聚焦 */

/* 區塊 */
.section { padding: 88px 0; }
.section.tint { background: linear-gradient(to bottom, var(--paper), var(--tint) 96px, var(--tint) calc(100% - 96px), var(--paper)); }
.section-head { max-width: 760px; margin-bottom: 40px; }
.section-label { display: flex; align-items: center; gap: 14px; font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--link); margin-bottom: 12px; }
.section-label::before { content: ""; width: 40px; height: 2px; background: #355a4b; }
/* 首屏以下字級比照奧微官網：內文 15px、區塊標題 30px、小標 18px */
h2 { font-size: 30px; line-height: 1.35; font-weight: 700; }
h3 { font-size: 18px; line-height: 1.45; font-weight: 700; }
.section-dek { font-size: 16px; color: var(--ink-soft); margin-top: 16px; text-wrap: pretty; }

/* 編者按 */
.pullquote { margin: 0 0 56px; max-width: 900px; border-left: 4px solid var(--btn); padding-left: 28px; }
.pullquote p { font-family: var(--serif); font-size: 24px; line-height: 1.6; font-weight: 700; color: var(--ink); margin: 0; }
.columns-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.col-note { background: var(--card); border-top: 3px solid var(--nc, #2e6a4a); border-radius: 3px; padding: 26px 26px 20px; box-shadow: var(--card-shadow); transform: rotate(var(--nr, 0deg)); }
.col-note:nth-child(1) { --nr: -.6deg; --nc: #24574a; }
.col-note:nth-child(2) { --nr: .5deg; --nc: #4a7d5c; }
.col-note:nth-child(3) { --nr: -.3deg; --nc: #1d5041; }
.note-icon { float: right; width: 44px; height: 44px; border-radius: 50%; background: #f3f0ea; border: 1px solid #dcd8d1; display: grid; place-items: center; color: #1f4a3d; }
.note-icon svg { width: 24px; height: 24px; }
.note-num { font-family: var(--serif); font-size: 17px; font-style: italic; color: var(--link); margin-bottom: 6px; }
.col-note h3 { margin-bottom: 10px; }
.col-note p:last-child { color: var(--ink-soft); }
.col-note p + p { margin-top: 10px; }
.col-note p.note-tag { font-size: 14px; font-weight: 700; color: var(--link); }
.note-close { margin: 40px 0 0; max-width: 760px; font-size: 18px; font-weight: 700; color: var(--ink); }
.architect { margin-top: 64px; max-width: 760px; padding-top: 40px; border-top: 1px solid var(--rule); }
.architect h2 { margin-bottom: 16px; }
.architect p { color: var(--ink-soft); }
.architect .architect-punch { margin-top: 12px; font-family: var(--serif); font-size: 22px; font-weight: 700; color: var(--ink); }

/* 目錄表 */
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
caption { text-align: left; font-family: var(--serif); font-weight: 700; font-size: 18px; padding-bottom: 14px; color: var(--ink); }
.index-table th, .index-table td { padding: 22px 16px 22px 0; border-bottom: 1px solid var(--rule); vertical-align: top; text-align: left; line-height: 1.75; color: var(--ink); }
.index-table thead th { font-size: 13px; letter-spacing: .08em; border-bottom: 2px solid var(--ink); padding-top: 0; padding-bottom: 10px; }
.index-table tbody th { font-family: var(--serif); font-size: 17px; white-space: nowrap; width: 17%; }
.idx { display: block; font-size: 13px; color: var(--link); letter-spacing: .1em; margin-bottom: 2px; }

/* 流程 */
.timeline { position: relative; list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); }
/* 連接線穿過五個節點中心 */
.timeline::before { content: ""; position: absolute; left: 22px; right: calc(20% - 22px); top: 22px; height: 2px; background: linear-gradient(to right, #24574a, #4a7d5c); transform-origin: left; }
.timeline li { position: relative; padding: 0 20px 0 0; }
.t-step { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--paper); border: 2px solid #2e6a4a; font-family: var(--serif); font-size: 19px; font-weight: 900; color: #1d5041; line-height: 1; margin-bottom: 16px; position: relative; }
.timeline strong { display: block; margin-bottom: 4px; }
.t-text { display: block; font-size: 14px; color: var(--ink-soft); line-height: 1.7; }

/* 章節開頁（Q31）：STEP 進度、大編號＋章名、三個重點、底部進度線；圖片右下淡色大編號，左右交替 */
.chapter-open { position: relative; display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; margin-bottom: 104px; }
.chapter-open.reverse { grid-template-columns: 7fr 5fr; }
.chapter-open.reverse .chapter-title { order: 2; }
.chapter-step { display: flex; align-items: center; gap: 13px; margin: 0 0 27px; font-size: 13px; font-weight: 700; letter-spacing: .08em; line-height: 1; color: #5f6763; }
.chapter-step b { color: var(--deep); }
.chapter-step i { width: 3px; height: 3px; border-radius: 50%; background: #9aa39f; }
.step-label { color: #254038; letter-spacing: .12em; padding-bottom: 5px; border-bottom: 2px solid #254038; margin-top: 7px; }
.step-line { width: 86px; height: 2px; background: #254038; margin: 0 10px; }
.chapter-num { font-family: var(--serif); font-size: calc(108 * var(--hu)); font-weight: 900; line-height: .9; color: var(--deep); margin: 0 0 16px; }
.chapter .chapter-title h2 { font-size: calc(41 * var(--hu)); line-height: 1.25; font-weight: 900; color: #1c3a32; }
.chapter-points { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); margin: 29px 0 0; padding: 0; }
.chapter-points li { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 10px; border-left: 1px solid #d8d4ce; }
.chapter-points li:first-child { border-left: 0; }
.chapter-points .note-icon { float: none; width: 47px; height: 47px; margin-bottom: 11px; }
.chapter-points .note-icon svg { width: 22px; height: 22px; }
.chapter-points strong { font-size: 14px; line-height: 1.4; color: #254038; }
.chapter-points li > span:last-child { font-size: 12px; line-height: 1.5; margin-top: 4px; color: #5f5f5d; }
.chapter-foot { position: relative; margin: 36px 0 0; padding-top: 16px; border-top: 1px solid #cfd2cc; font-size: 11px; font-weight: 700; letter-spacing: .3em; color: #3f4b4d; }
/* 進度線：第幾章就填滿幾分之三 */
.chapter-foot::before { content: ""; position: absolute; left: 0; top: -2px; width: calc(var(--p) * 100% / 3); height: 3px; background: #254038; }
/* 圖片縮為欄寬九成，靠外側對齊，外緣仍與下方價格卡切齊 */
.chapter-figure { position: relative; z-index: 1; width: 90%; margin: 0; justify-self: end; }
.chapter-open.reverse .chapter-figure { justify-self: start; }
/* 窗光斜紋：只提亮底色，不壓暗文字 */
.chapter { position: relative; overflow: hidden; }
.chapter::before, .faq-section::before { content: ""; position: absolute; top: 0; left: -10%; width: 70%; height: 900px; background: linear-gradient(118deg, transparent 22%, rgba(255,255,255,.38) 22%, rgba(255,255,255,.38) 31%, transparent 31%, transparent 38%, rgba(255,255,255,.28) 38%, rgba(255,255,255,.28) 44%, transparent 44%); filter: blur(18px); pointer-events: none; }
.chapter > .wrap { position: relative; }
.price-statement p { text-wrap: pretty; }
.chapter-figure img { width: 100%; border-radius: 10px; box-shadow: var(--card-shadow); }
.chapter-mark { position: absolute; right: 0; bottom: -86px; display: flex; align-items: flex-end; gap: 22px; margin: 0; pointer-events: none; }
.chapter-mark b { font-family: var(--serif); font-size: calc(99 * var(--hu)); font-weight: 900; line-height: .8; color: rgba(32, 62, 55, .07); }
.chapter-mark span { position: relative; padding-left: 26px; font-size: 11px; font-weight: 700; letter-spacing: .3em; line-height: 1.7; color: #5f6763; }
.chapter-mark span::before { content: ""; position: absolute; left: -6px; bottom: -4px; width: 1px; height: 84px; background: #c3c7c2; transform: rotate(35deg); transform-origin: bottom; }
.chapter-open.reverse .chapter-mark { right: auto; left: 0; flex-direction: row-reverse; }

/* 價格：三欄以直線分隔 */
.price-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.price-col { background: var(--card); border-top: 4px solid var(--pc); border-radius: 3px; padding: 26px 26px 22px; box-shadow: var(--card-shadow); }
.price-col:nth-child(1) { --pc: #4a7d5c; }
.price-col:nth-child(2) { --pc: #2e6a4a; }
.price-col:nth-child(3) { --pc: #1d5041; }
.tier { font-weight: 700; margin-bottom: 6px; }
.amount { font-family: var(--serif); font-size: 32px; font-weight: 900; line-height: 1.2; color: var(--ink); margin: 0 0 10px; }
.unit { font-size: 17px; }
.tax { font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--link); margin-left: 10px; vertical-align: middle; }
.fit { color: var(--ink-soft); font-size: 14px; margin: 0; }

.order { display: grid; grid-template-columns: 3fr 2fr; gap: 0; margin-top: 32px; background: var(--card); border-radius: 4px; box-shadow: var(--card-shadow); border-left: 4px solid #225240; }
.order-free { padding: 32px; }
.order-free h3 { margin-bottom: 10px; }
.order-free p { color: var(--ink-soft); }
.order-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.order-pay { padding: 32px; border-left: 1px dashed var(--rule); }
.order-pay .btn { width: 100%; margin-bottom: 14px; }
.order-pay p { color: var(--ink-soft); font-size: 15px; margin: 0; }

.report { margin-top: 56px; max-width: 820px; }
.report h3 { margin-bottom: 14px; }
.report-lead { margin: 0 0 20px; font-size: 17px; color: var(--ink); }
.rule-list { list-style: none; padding: 0; margin: 0 0 24px; }
.rule-list li { padding: 12px 0 12px 40px; border-bottom: 1px solid var(--rule); position: relative; }
.rule-list li::before { content: ""; position: absolute; left: 0; top: 13px; width: 26px; height: 26px; border-radius: 50%; background: #f3f0ea url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e614b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9'/%3E%3C/svg%3E") center / 18px no-repeat; border: 1px solid #dcd8d1; }
.notice { font-size: 15px; color: var(--ink); }

/* 包含／不包含：兩欄同寬同字級同顏色 */
.scope-table th, .scope-table td { width: 50%; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; color: var(--ink); line-height: 1.7; }
.scope-table thead th { font-size: 15px; border-bottom: 2px solid var(--ink); }
.scope-table td:not(:empty) { padding-left: 38px; position: relative; }
.scope-table td:not(:empty)::before { content: ""; position: absolute; left: 0; top: 13px; width: 24px; height: 24px; border-radius: 50%; background: #f3f0ea url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e614b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9'/%3E%3C/svg%3E") center / 17px no-repeat; border: 1px solid #dcd8d1; }
.scope-table td:nth-child(2):not(:empty)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767f86' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E"); }

.price-statement { margin-top: 40px; max-width: 760px; }
.price-statement p:last-child { color: var(--ink-soft); }
.price-statement.tight { margin-top: 24px; }

/* 問與答 */
.qa-q { font-size: 28px; margin-bottom: 28px; }
.qa-a p { font-size: 16px; }
.qa-mark { font-family: var(--serif); font-weight: 900; color: var(--btn); font-size: 18px; margin-right: 10px; }

details { border-bottom: 1px solid var(--rule); }
details:first-of-type { border-top: 1px solid var(--rule); }
summary { cursor: pointer; padding: 18px 44px 18px 0; font-weight: 700; font-size: 15px; min-height: 44px; list-style: none; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; border: 1px solid #b9c3bd; background: linear-gradient(#2e614b, #2e614b) center / 11px 1.6px no-repeat, linear-gradient(#2e614b, #2e614b) center / 1.6px 11px no-repeat; transition: transform .25s ease; }
details[open] > summary::after { transform: rotate(45deg); }
details > p { color: var(--ink); padding: 0 0 6px; }
details > p:last-child { padding-bottom: 18px; margin-bottom: 0; }
.tech { margin-top: 40px; }
/* 常見問題（Q32）：每題一張圓角卡片，左側 CSS 自動編號＋分隔線，右側圓形＋號 */
.faq-section { position: relative; overflow: hidden; counter-reset: faq; }
.faq-section::after { content: ""; position: absolute; right: -620px; bottom: -560px; width: 1100px; height: 1100px; border-radius: 50%; background: rgba(255, 255, 255, .32); pointer-events: none; }
.faq-wrap { position: relative; z-index: 1; max-width: 944px; }
#faq .section-label { gap: 18px; font-size: 14px; font-weight: 500; letter-spacing: .32em; color: #5f6763; margin-bottom: 10px; }
#faq .section-label::before { width: 48px; }
#faq h2 { font-size: calc(40 * var(--hu)); font-weight: 900; line-height: 1.3; color: #1c3a32; }
#faq .section-dek { font-size: 16px; margin: 8px 0 32px; }
#faq details { background: rgba(251, 250, 247, .88); border: 1px solid #e4e0d8; border-radius: 10px; box-shadow: 0 1px 2px rgba(40, 36, 28, .04), 0 8px 20px rgba(40, 36, 28, .05); margin-bottom: 10px; counter-increment: faq; transition: background-color .2s ease; }
#faq details:hover, #faq details[open] { background: #eef0ea; border-color: #dde3db; }
#faq summary { display: grid; grid-template-columns: 84px 1fr; align-items: center; min-height: 58px; padding: 10px 68px 10px 0; font-size: 16px; line-height: 1.5; color: var(--ink); }
#faq summary::before { content: counter(faq, decimal-leading-zero); margin-right: 30px; border-right: 1px solid #d3cfc7; font-size: 17px; font-weight: 500; line-height: 30px; text-align: center; color: #3f5a51; }
#faq summary::after { right: 24px; width: 28px; height: 28px; margin-top: -14px; border: 1.5px solid #2b3d37; background: linear-gradient(#1f2d30, #1f2d30) center / 11px 1.6px no-repeat, linear-gradient(#1f2d30, #1f2d30) center / 1.6px 11px no-repeat; }
#faq details > p, #faq details > p:last-child { padding: 0 68px 18px 84px; margin: 0; }
.faq-script { position: absolute; top: 56px; right: max(32px, calc(50% - 800px)); margin: 0; font-family: "Nothing You Could Do", cursive; font-size: 24px; line-height: 1.15; color: #5f6763; transform: rotate(-12deg); pointer-events: none; }
.faq-script span { display: block; }
.faq-script span:nth-child(2) { margin-left: 1em; }
.faq-script span:nth-child(3) { margin-left: .9em; }
.faq-script span:nth-child(4) { margin-left: 1.7em; }
.faq-script::after { content: ""; position: absolute; left: .2em; right: -1.6em; bottom: -.9em; height: 1.5px; background: #6f7a75; border-radius: 2px; transform: rotate(-8deg); transform-origin: right; }
.faq-foot { position: absolute; left: max(32px, calc(50% - 750px)); bottom: 96px; margin: 0; font-size: 12px; font-weight: 500; letter-spacing: .3em; line-height: 2; color: #5f6763; pointer-events: none; }
.faq-foot::after { content: ""; display: block; width: 40px; height: 2px; margin-top: 18px; background: #5f6763; }
/* 左右下角沿用首屏的模糊葉子 */
.faq-leaves { position: absolute; left: -100px; bottom: 0; width: 400px; height: 403px; background: url("images/cover-leaves.webp") 0 100% / 100% 100% no-repeat; pointer-events: none; }
.faq-leaves.right { left: auto; right: -60px; width: 200px; height: 202px; transform: scaleX(-1); }
@media (max-width: 1299px) { .faq-script, .faq-foot, .faq-leaves { display: none; } }

/* 結語 */
.closing { text-align: left; overflow: hidden; }
.closing-inner { display: grid; grid-template-columns: 6fr 5fr; gap: 56px; align-items: center; }
.closing-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.closing-figure { position: relative; margin: 0; transform: rotate(-1.2deg); }
.closing-figure img { width: 100%; border-radius: 6px; box-shadow: 0 2px 4px rgba(40, 36, 28, .08), 0 24px 48px rgba(40, 36, 28, .16); }
/* 同首屏的葉影，疊在卡片上慢慢晃動 */
.closing-shade { position: absolute; inset: -10% -10% 30% 20%; background: url("images/leaf-shadow.webp") 0 0 / 100% 100% no-repeat; mix-blend-mode: multiply; opacity: .35; pointer-events: none; transform-origin: 30% 20%; animation: leaf-sway 5s ease-in-out infinite alternate; }
.closing h2 { font-size: 34px; max-width: 16em; margin-bottom: 14px; }
.closing p { color: var(--ink-soft); font-size: 16px; }

/* 版權頁 */
.colophon { background: var(--deep); color: #fff; padding: 44px 0; font-size: 14px; }
.colophon p { margin: 0 0 6px; }
.colophon a { color: #fff; }
.colophon-brand { font-family: var(--serif); font-weight: 700; font-size: 18px; }
.colophon-inner { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.colophon-links { display: flex; flex-direction: column; gap: 4px; }
.colophon-links a { min-height: 32px; display: inline-flex; align-items: center; }

@media (max-width: 960px) {
  .chapter-open { grid-template-columns: 1fr; gap: 36px; }
  .chapter-open.reverse { grid-template-columns: 1fr; }
  .chapter-open.reverse .chapter-title { order: 0; }
  .chapter-figure { width: 100%; }
  .chapter-open { margin-bottom: 56px; }
  .chapter-mark { display: none; }
  .columns-3, .price-row { grid-template-columns: 1fr; gap: 0; }
  .columns-3 { gap: 32px; }
  .price-col, .price-col + .price-col { border-left: 0; padding-left: 0; }
  .price-col + .price-col { border-top: 1px solid var(--rule); }
  .order { grid-template-columns: 1fr; }
  .order-pay { border-left: 0; border-top: 1px dashed var(--rule); }
  .price-row { gap: 16px; }
  .col-note { transform: none; }
  .closing-inner { grid-template-columns: 1fr; gap: 40px; }
  .timeline { grid-template-columns: 1fr; }
  .timeline::before { left: 21px; right: auto; top: 22px; bottom: 22px; width: 2px; height: auto; transform-origin: top; background: linear-gradient(#24574a, #4a7d5c); }
  .timeline li { display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; padding: 0 0 22px; }
  .timeline .t-step { grid-row: span 2; margin: 0; }
}
@media (max-width: 600px) {
  .masthead { position: static; }
  /* 手機頁首兩列：品牌一列，選單與奧微官網一列可橫向滑動 */
  .masthead-inner { gap: 0; padding: 6px 0 4px; }
  .nav { flex-wrap: nowrap; overflow-x: auto; width: calc(100% + 20px); margin-right: -20px; padding-bottom: 6px; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; padding: 8px 14px 8px 0; }
  .nav .nav-home { margin: 0 24px 0 4px; padding: 0 14px; }
  /* 目錄表在手機改為逐列堆疊，仍保留真 <table> 語意 */
  .index-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .index-table, .index-table tbody, .index-table tr, .index-table th, .index-table td { display: block; width: 100%; }
  .index-table tr { border-bottom: 1px solid var(--rule); padding: 18px 0; }
  .index-table th, .index-table td { border: 0; padding: 4px 0; }
  .index-table td::before { content: attr(data-label); display: block; font-size: 13px; font-weight: 700; color: var(--link); letter-spacing: .06em; }
  body { font-size: 15px; }
  .wrap { padding: 0 20px; }
  h2 { font-size: 24px; }
  .pullquote p { font-size: 20px; }
  .chapter-num { font-size: 72px; }
  .chapter .chapter-title h2 { font-size: 32px; }
  .step-line { width: 48px; }
  .chapter-points li { padding: 0 6px; }
  .chapter-points .note-icon { width: 44px; height: 44px; }
  .chapter-points strong { font-size: 14px; }
  .amount { font-size: 28px; }
  .closing h2 { font-size: 24px; }
  .qa-q { font-size: 24px; }
  #faq h2 { font-size: 30px; }
  #faq .section-dek { font-size: 16px; margin-bottom: 28px; }
  #faq summary { grid-template-columns: 52px 1fr; padding: 12px 60px 12px 0; font-size: 16px; }
  #faq summary::before { margin-right: 16px; font-size: 16px; }
  #faq summary::after { right: 16px; width: 30px; height: 30px; margin-top: -15px; }
  #faq details > p, #faq details > p:last-child { padding: 0 20px 18px 52px; }
  .section { padding: 56px 0; }
}

/* 首屏窄螢幕：桌景會蓋到文字，改為淡底＋紙板裁切圖置於文字下方；尺寸回到固定 px */
@media (max-width: 1199px) {
  .cover { --u: 1px; height: auto; }
  .cover-bg, .cover-leaves, .cover-tiles, .cover-shade, .cover-progress { display: none; }
  /* 窄螢幕首屏已顯示同一張卡片圖，結尾不再重複 */
  .closing-figure { display: none; }
  .cover-card { display: block; width: 100%; max-width: 760px; margin-top: 48px; }
  .cover-inner { width: min(974px, 100% - 64px); padding: 64px 0 110px; }
  .cover h1 { font-size: clamp(34px, 6vw, 64px); line-height: 1.33; }
}
@media (max-width: 900px) {
  .masthead .wrap { width: calc(100% - 40px); }
  .brand { font-size: 19px; }
  .brand img { height: 22px; }
  .nav a { padding: 8px 10px; font-size: 15px; }
  .nav-sep { display: none; }
  .nav .nav-home { min-height: 44px; padding: 0 16px; font-size: 15px; margin-left: 8px; }
}
@media (max-width: 600px) {
  .cover-inner { width: calc(100% - 40px); padding: 44px 0 96px; }
  .eyebrow { font-size: 11px; letter-spacing: .24em; gap: 14px; }
  .eyebrow::before { width: 40px; }
  .cover h1 { margin-top: 24px; font-size: 32px; }
  .standfirst { font-size: 17px; line-height: 1.95; }
  .cover-actions { flex-direction: column; gap: 14px; }
  .cover .btn-hero, .cover .btn-primary, .cover .btn-ghost { min-width: 0; width: 100%; min-height: 56px; font-size: 17px; justify-content: space-between; }
}
/* 三個重點橫排約需 650px，放不下時改直排，不擠壓文字換行 */
@media (max-width: 760px) {
  .cover-points { flex-direction: column; gap: 18px; margin-top: 40px; }
  .cover-points li { padding: 0; border-left: 0; }
}

/* 首屏以下捲動進場：捲進畫面時淡入上浮一次（Q30），流程線跟著畫出；不支援的瀏覽器直接顯示 */
@supports (animation-timeline: view()) {
  .section-head, .pullquote, .col-note, .table-scroll, .timeline li, .chapter-open > *, .price-col, .order, .report, .price-statement, .qa-a, #faq details, .closing-text, .closing-figure {
    animation: rise linear both; animation-timeline: view(); animation-range: entry 5% entry 45%;
  }
  .timeline::before { animation: grow-x linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
  .col-note:nth-child(2), .price-col:nth-child(2), .timeline li:nth-child(2) { animation-range: entry 12% entry 52%; }
  .col-note:nth-child(3), .price-col:nth-child(3), .timeline li:nth-child(3) { animation-range: entry 19% entry 59%; }
  .timeline li:nth-child(4) { animation-range: entry 26% entry 66%; }
  .timeline li:nth-child(5) { animation-range: entry 33% entry 73%; }
}
@media (max-width: 960px) { .timeline::before { animation-name: grow-y; } }
@keyframes grow-y { from { transform: scaleY(0); } }

/* 減少動態：所有進場與循環動畫關閉，直接顯示最終畫面 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  summary::after { transition: none !important; }
  .btn svg, .btn-primary::after { transition: none !important; }
  .btn-primary::after { display: none; }
}

/* 現在就開始：需求問答視窗（start.js） */
/* start.js 以 hidden 屬性切換顯示；.btn、.field、.contact-panel 自帶 display，需強制 hidden 生效 */
.start [hidden], .pay-notice[hidden] { display: none !important; }
.start { width: min(640px, 100% - 32px); max-height: min(760px, 100% - 32px); padding: 0; border: 0; border-radius: 10px; background: var(--card); color: var(--ink); box-shadow: 0 24px 60px rgba(20, 32, 28, .28); }
.start::backdrop { background: rgba(22, 36, 32, .55); }
.start-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 28px 0; }
.start-title { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .08em; color: #2e614b; }
.start-close { width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; font-size: 26px; line-height: 1; color: var(--ink-soft); cursor: pointer; }
.start-close:hover { background: var(--tint); }
.start-close:focus-visible, .start input:focus-visible, .start textarea:focus-visible, .start button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.progress { padding: 4px 28px 0; }
.progress-text { margin: 0 0 8px; font-size: 13px; color: var(--ink-soft); }
.progress-bar { display: block; height: 3px; background: var(--rule); border-radius: 2px; overflow: hidden; }
.progress-bar i { display: block; height: 100%; width: 10%; background: var(--btn); transition: width .3s ease; }
.step { margin: 0; padding: 26px 28px 24px; border: 0; min-width: 0; }
/* legend 預設壓在 fieldset 上框線、不吃 padding；float 讓它回到內容流 */
.step legend { float: left; width: 100%; display: flex; align-items: baseline; gap: 14px; padding: 0 0 18px; font-family: var(--serif); font-size: 23px; line-height: 1.45; font-weight: 700; color: var(--ink); }
.step-no { font-size: 30px; color: #5a7a6e; }
.step legend + * { clear: both; }
.step-hint { margin: -8px 0 16px; font-size: 14px; color: var(--ink-soft); }
.step-body { display: grid; gap: 10px; }
/* 選項 6 個以上（工具、語言、資料庫等）桌機改兩欄，避免視窗被撐高、按鈕捲出畫面 */
@media (min-width: 601px) {
  .start { width: min(760px, 100% - 32px); }
  .step-body:has(> .opt:nth-of-type(6)) { grid-template-columns: 1fr 1fr; gap: 8px 10px; }
  .step-body:has(> .opt:nth-of-type(6)) .opt { padding: 10px 14px; font-size: 14px; }
  .step-body .opt-other { grid-column: 1 / -1; }
}
.opt { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--rule); border-radius: 8px; background: #fff; font-size: 15px; line-height: 1.5; cursor: pointer; }
.opt:hover { border-color: #8fa9a0; }
.opt:has(input:checked) { border-color: var(--btn); background: #eef4f0; }
.opt input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--btn); }
.start textarea, .start input[type=text], .start input[type=email], .start input[type=tel] { width: 100%; padding: 11px 14px; border: 1px solid #8fa39c; border-radius: 8px; background: #fff; font: inherit; font-size: 15px; color: var(--ink); }
.start textarea { resize: vertical; }
.opt-other { display: none; }
.step-body:has([value="other"]:checked) .opt-other { display: block; }
.field { display: grid; gap: 6px; font-size: 14px; font-weight: 700; color: var(--ink-soft); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consent { display: flex; align-items: flex-start; gap: 10px; margin-top: 4px; font-size: 13px; line-height: 1.6; color: var(--ink-soft); cursor: pointer; }
.consent input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--btn); }
.ask-link { align-self: center; font-size: 14px; color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.step-error { min-height: 22px; margin: 12px 0 0; font-size: 14px; font-weight: 700; color: #a4332a; }
.step-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; }
.step-nav .btn { min-width: 128px; cursor: pointer; font-family: inherit; }
@media (max-width: 600px) {
  .start { width: 100%; max-width: none; height: 100%; max-height: none; border-radius: 0; }
  .start-head, .progress { padding-left: 20px; padding-right: 20px; }
  .step { padding: 22px 20px; }
  .step legend { font-size: 20px; gap: 10px; }
  .step-no { font-size: 24px; }
  .step-nav .btn { flex: 1; min-width: 0; }
  .step-nav { position: sticky; bottom: 0; margin: 8px -20px -22px; padding: 12px 20px 16px; background: var(--card); box-shadow: 0 -6px 12px rgba(40, 36, 28, .06); }
}
.start-result { padding: 22px 28px 26px; }
.result-title { font-size: 24px; line-height: 1.45; }
.result-lead { margin: 8px 0 0; color: var(--ink-soft); }
.result-error { margin-top: 10px; padding: 14px 16px; border-left: 3px solid #a4332a; background: #f8ecea; }
.result-error p { margin: 0 0 10px; color: #7a2a23; font-weight: 700; }
.result-error .btn { min-height: 42px; cursor: pointer; font-family: inherit; }
.summary { display: grid; grid-template-columns: minmax(0, 11em) 1fr; gap: 8px 18px; margin: 18px 0 0; padding: 16px 18px; border: 1px solid var(--rule); border-radius: 8px; background: #fff; font-size: 14px; line-height: 1.6; max-height: 260px; overflow: auto; }
.summary dt { color: var(--ink-soft); }
.summary dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; white-space: pre-wrap; }
.pay-box { margin-top: 18px; }
.pay-note { margin: 0 0 12px; font-size: 14px; color: var(--ink-soft); }
.pay-email { margin-bottom: 4px; }
.pay-box .step-error { margin-top: 4px; }
.start-result > .btn, .pay-box .btn { width: 100%; cursor: pointer; font-family: inherit; }
.pay-box .btn:disabled { background: transparent; color: #5f6763; border: 1px dashed #5f6763; box-shadow: none; cursor: not-allowed; }
.pay-box .btn:disabled::after { display: none; }
.result-contact { margin-top: 10px; }
.contact-panel { display: flex; gap: 18px; align-items: center; margin-top: 16px; padding: 16px; border: 1px solid var(--rule); border-radius: 8px; background: #fff; }
.contact-panel img { width: 112px; height: 112px; flex: none; }
.contact-panel p { margin: 0 0 12px; font-size: 14px; line-height: 1.6; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.contact-actions .btn { min-height: 44px; padding: 8px 18px; font-size: 14px; }
.pay-notice { margin: 0; padding: 12px 20px; background: #e4efe8; color: #1d4a3c; font-weight: 700; text-align: center; }
@media (max-width: 600px) {
  .start-result { padding: 20px; }
  .summary { grid-template-columns: 1fr; gap: 2px; max-height: none; }
  .summary dd { margin-bottom: 8px; }
  .contact-panel { flex-direction: column; align-items: flex-start; }
  .contact-actions .btn { flex: 1; }
}