:root{
  /* ── Spec §1 配色。五個基色，其餘全部由佢哋 color-mix 推導 ──
     點解要推導：spec 五個值喺細字上面唔夠 WCAG AA ——
       金 #97814a 落紙  3.18:1（spec 話金用喺 9-11px 細標籤）
       朱砂 #a8503f 落墨 2.41:1（連大字 3:1 都唔夠）
     用 color-mix 由同一個色相調光暗，grep 唔到第六個 hex，
     §8 個「只准五個變數」照樣成立。 */
  --ink:#2c313b;
  --paper:#f1ebdf;
  --canvas:#eae5da;
  --cinnabar:#a8503f;
  --gold:#97814a;

  --ink-70:color-mix(in srgb,var(--ink) 70%,var(--paper));
  --ink-55:color-mix(in srgb,var(--ink) 70%,var(--paper));
  --ink-16:color-mix(in srgb,var(--ink) 16%,var(--paper));
  --paper-70:color-mix(in srgb,var(--paper) 70%,var(--ink));
  --paper-45:color-mix(in srgb,var(--paper) 70%,var(--ink));
  --paper-16:color-mix(in srgb,var(--paper) 16%,var(--ink));
  --ink-edge:color-mix(in srgb,var(--ink) 54%,var(--paper));
  --paper-edge:color-mix(in srgb,var(--paper) 39%,var(--ink));

  /* 同一個色相，按底色調光暗（括號內為實測對比度） */
  --gold-quiet:color-mix(in srgb,var(--gold) 65%,var(--ink));        /* 落紙細字 */
  --gold-lift:color-mix(in srgb,var(--gold) 50%,var(--paper));       /* 落墨細字 */
  --cinnabar-lift:color-mix(in srgb,var(--cinnabar) 55%,var(--paper)); /* 落墨細字 */

  --serif:"Noto Serif TC Variable","Noto Serif TC","Songti TC","STSong",serif;
  --sans:"Noto Sans TC Variable","Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  --t-display:clamp(50px,7vw,72px);
  --t-h2:clamp(38px,5vw,48px);   /* 加倍；hero 亦要跟住升先唔會被壓過 */
  --t-sec:24px;                  /* 段落標記，由 12px 加倍 */
  --t-body:16px;
  --t-xs:12px;              /* 微標籤下限，中英共用一個值 */

  --s1:6px; --s2:12px; --s3:20px; --s4:32px; --s5:52px; --s6:88px;
  /* 雕版欄線：1a 嘅版心紋理 */
  --colrule:repeating-linear-gradient(90deg,color-mix(in srgb,var(--ink) 5%,transparent) 0 1px,transparent 1px 26px);
}

/* 简体：唔好再用 Noto * TC。TC 缺簡體專用字（給／这／议），瀏覽器逐字 fallback，看起來有粗有幼。
   系統簡體字型先：Mac PingFang/Songti SC，Windows 微软雅黑，Android Noto SC。 */
html[lang="zh-CN"]{
  --serif:"Noto Serif SC Variable","Noto Serif SC","Source Han Serif SC","Songti SC","STSong","Microsoft YaHei",serif;
  --sans:"Noto Sans SC Variable","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--canvas);color:var(--ink);font-family:var(--sans);font-weight:400;
  min-height:100dvh;line-height:1.7;padding:0}
.wrap{max-width:1180px;margin:0 auto;background:var(--paper);
  border-left:1px solid var(--ink-16);border-right:1px solid var(--ink-16);
  padding:0 clamp(20px,4vw,54px) var(--s6)}
.mono{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.22em;color:var(--ink-70)}

/* ── 首屏：十二宮方格盤本身就係版面 ─────────────────── */
.hero{margin:0 calc(-1 * clamp(20px,4vw,54px)) var(--s5);padding:clamp(20px,4vw,54px);
  background:var(--colrule)}
.hero-grid{display:grid;grid-template-columns:repeat(4,1fr);
  grid-template-rows:.82fr 1.18fr 1.18fr .82fr;gap:1px;
  background:var(--ink-16);border:1px solid var(--ink-16);min-height:min(74vh,660px)}
.hp{background:var(--paper);padding:var(--s2) 14px;display:flex;flex-direction:column;
  justify-content:space-between;gap:var(--s2);cursor:default;
  transition:background .25s ease,border-color .25s ease;
  border:1px solid transparent;min-width:0;text-align:left;font:inherit;color:inherit}
.hp:hover,.hp:focus-visible,.hp.on{background:color-mix(in srgb,var(--cinnabar) 10%,transparent);border-color:var(--cinnabar);outline:none}
.hp .hp-en{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.16em;color:var(--gold-quiet)}
/* 兩者都係 inline span，要 block 先分到行（同 .t-label/.t-scope 一樣嘅陷阱） */
.hp .hp-name{display:block;font-family:var(--serif);font-weight:600;font-size:clamp(17px,1.9vw,24px);
  letter-spacing:.08em;line-height:1.15}
.hp .hp-tag{display:block;font-size:var(--t-xs);color:var(--ink-70);line-height:1.55;margin-top:5px}

/* 中宮：反白墨黑，同命盤中央呼應 */
.hero-core{grid-area:2/2/4/4;background:var(--ink);color:var(--paper);
  padding:clamp(20px,2.6vw,32px);display:flex;flex-direction:column;justify-content:space-between;gap:var(--s3)}
.hero-core .core-top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s3)}
.hero-core .wordmark{font-size:var(--t-xs);color:var(--gold-lift)}
/* .26em 淨係拉丁字母食得起，中文唔好加 */
.hero-core .wordmark .wm-latin{font-family:var(--mono);letter-spacing:.26em}
/* ── §3 品牌印記：2×2 朱砂實心方印 ─────────────────────
   尺寸全部由 --mark-size 等比推導（中文 30%、英文 11%、內距 9%），
   所以同一個 component 由 32px favicon 去到 206px hero 都用得。
   .mark--compact：細過 ~80px 嗰陣 DES/TIN 會細到讀唔到，
   索性收起淨返「譯命」——§8 要求 32px 仍然睇得出嘅就係呢兩個字。 */
.mark{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;
  width:var(--mark-size);height:var(--mark-size);flex:none;
  background:var(--cinnabar);padding:calc(var(--mark-size)*.09);place-items:center}
.mark span{font-family:var(--serif);font-weight:700;line-height:1;color:var(--paper)}
.mark .mk-han{font-size:calc(var(--mark-size)*.30)}
/* spec §3 寫 rgba(241,235,223,.72)，實測落朱砂得 2.59:1。
   改用全白紙色（4.55:1）；主次分別交返俾字級（11% vs 30%）同字距做。 */
.mark .mk-lat{font-size:calc(var(--mark-size)*.11);letter-spacing:.08em;color:var(--paper)}
.mark--compact{grid-template-rows:1fr}
.mark--compact .mk-lat{display:none}
.mark--compact .mk-han{font-size:calc(var(--mark-size)*.42)}
h1{font-family:var(--serif);font-weight:900;font-size:var(--t-display);line-height:1.22;
  letter-spacing:.03em;text-wrap:balance}
.hero-hint{font-size:var(--t-body);line-height:1.85;color:var(--paper-70);min-height:5.6em;
  font-weight:300;text-wrap:pretty}
.hero-cta{display:flex;gap:var(--s2) var(--s3);align-items:center;flex-wrap:wrap}
.hero-note{font-size:var(--t-xs);color:var(--paper-70)}

/* 睇報告嗰陣用嘅細品牌條，代替成屏首屏。
   點解：客人由 email 連結入嚟係為咗睇佢畀咗錢嗰份嘢，唔係再睇一次招牌；
   首屏高 min(74vh,660px)，唔收埋嘅話佢要碌成個畫面先見到報告。 */
.brandbar{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:var(--s4) 0 var(--s3);border-bottom:1px solid var(--ink-16);
  margin-bottom:var(--s5);font-size:var(--t-xs);color:var(--ink-70)}
.brandbar .wm-latin{font-family:var(--mono);letter-spacing:.26em;color:var(--ink)}
/* .brandbar 有 display:flex，會蓋過 UA 嘅 [hidden]，所以要明寫返 */
[hidden]{display:none !important}

/* ── 通用元件 ─────────────────────────────────────── */
.sec-label{font-family:var(--serif);font-size:var(--t-sec);font-weight:700;letter-spacing:.08em;
  color:var(--ink-55);margin-bottom:var(--s3)}
.panel{margin-bottom:var(--s5)}
.grid-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:var(--s3) var(--s4)}
label{display:block;font-size:var(--t-xs);letter-spacing:.03em;color:var(--ink-70);margin-bottom:var(--s1)}
input,select,textarea{width:100%;background:transparent;color:var(--ink);border:none;
  border-bottom:1px solid var(--ink-edge);border-radius:0;padding:9px 2px;
  font-family:var(--sans);font-size:var(--t-body);transition:border-color .18s ease}
input:hover,select:hover,textarea:hover{border-bottom-color:var(--ink-55)}
input:focus,select:focus,textarea:focus{outline:none;border-bottom-color:var(--cinnabar)}
::placeholder{color:var(--ink-70)}
textarea{resize:vertical;min-height:62px;line-height:1.85}
.row-full{margin-top:var(--s4)}
.actions{margin-top:var(--s4);display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center}
button{font-family:var(--sans);font-size:var(--t-body);font-weight:500;letter-spacing:.14em;
  border:none;border-radius:0;padding:17px 30px;cursor:pointer;transition:opacity .2s ease,transform .2s ease,border-color .2s ease}
button:disabled{opacity:.35;cursor:not-allowed}
button:active:not(:disabled){transform:scale(.98)}
.btn-main{background:var(--ink);color:var(--paper)}
.btn-main:hover:not(:disabled){opacity:.88}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--ink-16)}
.btn-ghost:hover:not(:disabled){border-color:var(--ink)}
button:focus-visible{outline:2px solid var(--cinnabar);outline-offset:3px}
.hero-core .btn-main{background:var(--paper);color:var(--ink)}
.hero-core .btn-main:hover:not(:disabled){opacity:.88}
.hint{color:var(--ink-70);font-size:var(--t-body);margin-top:var(--s2);line-height:1.85}
.status{font-size:var(--t-body);color:var(--gold-quiet);font-weight:700}
.error{border-left:2px solid var(--cinnabar);background:color-mix(in srgb,var(--cinnabar) 10%,transparent);color:var(--cinnabar);
  padding:var(--s2) var(--s3);font-size:var(--t-body);margin:var(--s3) 0;line-height:1.8}

/* ── 命盤：印喺紙上，唔再係浮喺深底嘅卡 ─────────────── */
#chartSection{display:none}
.board-frame{position:relative;margin-bottom:var(--s5);padding:13px}
.board-frame::before,.board-frame::after{content:"";position:absolute;width:13px;height:13px;pointer-events:none}
.board-frame::before{top:0;left:0;border-top:1px solid var(--ink);border-left:1px solid var(--ink)}
.board-frame::after{bottom:0;right:0;border-bottom:1px solid var(--ink);border-right:1px solid var(--ink)}
.board{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,minmax(190px,auto));
  gap:1px;background:var(--ink-16);border:1px solid var(--ink);overflow:hidden}
.palace{background:var(--paper);color:var(--ink);padding:13px 14px 38px;position:relative;
  font-size:16px;line-height:1.6;min-width:0}
.palace .pname{font-family:var(--serif);font-weight:700;color:var(--cinnabar);font-size:18px;letter-spacing:.06em}
.palace .branch{position:absolute;bottom:10px;right:12px;font-family:var(--serif);color:var(--gold-quiet);font-size:15px;letter-spacing:.08em}
.palace .range{position:absolute;bottom:10px;left:14px;color:var(--ink-70);font-size:14px;font-variant-numeric:lining-nums tabular-nums}
.palace .majors{font-family:var(--serif);font-weight:700;font-size:18px;margin-top:4px;line-height:1.55}
.palace .minors{color:var(--ink-70);margin-top:2px}
.palace .misc{color:var(--ink-70);font-size:14px;margin-top:3px}
.mut{color:var(--cinnabar);font-weight:700}
.body-tag{display:inline-block;background:var(--cinnabar);color:var(--paper);font-size:13px;
  padding:1px 4px;margin-left:5px;vertical-align:1px;letter-spacing:.06em}
/* 中宮反白，同首屏中宮同一個手法 */
.center{grid-column:2/4;grid-row:2/4;background:var(--ink);color:var(--paper);
  display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:var(--s3);gap:var(--s1)}
.center .meta{font-size:17px;line-height:2;color:var(--paper-70);font-variant-numeric:lining-nums}
.center .meta b{color:var(--cinnabar-lift);font-weight:700}

/* ── 命宮白話預覽：排盤後顯示真實盤面資料 ─────────── */
.mingong-teaser{margin-bottom:var(--s5);padding:var(--s4);background:var(--canvas);border:1px solid var(--ink-16)}
.mingong-facts{font-family:var(--serif);font-size:clamp(18px,2.2vw,22px);font-weight:600;
  letter-spacing:.08em;color:var(--ink);margin-bottom:var(--s3);line-height:1.7}
.mingong-facts b{color:var(--cinnabar)}
.mingong-balance{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:var(--s3) 0;
  background:var(--ink-16);border:1px solid var(--ink-16)}
.mingong-balance>div{background:var(--paper);padding:var(--s3)}
.mingong-label{font-family:var(--sans);font-size:var(--t-xs);font-weight:700;
  letter-spacing:.14em;color:var(--gold-quiet);margin-bottom:var(--s1)}
.mingong-express .mingong-label{color:var(--gold-quiet)}
.mingong-pressure .mingong-label{color:var(--cinnabar)}
.mingong-balance p:last-child{font-size:var(--t-body);line-height:1.85;margin:0}
.mingong-basis{margin:var(--s3) 0;font-size:var(--t-xs);color:var(--ink-70)}
.mingong-basis summary{cursor:pointer;font-weight:600;letter-spacing:.08em;padding:var(--s2) 0}
.mingong-basis summary:hover{color:var(--ink)}
.mingong-basis p{padding:var(--s2) 0 0;line-height:1.9;border-top:1px solid var(--ink-16)}
.mingong-close{font-size:var(--t-body);color:var(--ink-70);line-height:1.85;margin-top:var(--s3);
  padding-top:var(--s3);border-top:1px solid var(--ink-16)}
@media (max-width:640px){.mingong-balance{grid-template-columns:1fr}}

/* ── 選項目：帳簿行 ───────────────────────────────── */
.menu-title{font-family:var(--serif);font-size:var(--t-h2);font-weight:700;letter-spacing:.05em;margin:0}

/* ── 選題：七枚印牌 + 兩張套餐橫幅（Claude Design 方案 2a）────── */
.catalog{background:var(--ink);color:var(--paper);padding:clamp(22px,3vw,44px);margin-bottom:var(--s4)}
.catalog-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s4);
  flex-wrap:wrap;border-bottom:1px solid var(--paper-16);padding-bottom:var(--s3);margin-bottom:var(--s4)}
.catalog-eyebrow{font-size:var(--t-xs);letter-spacing:.02em;color:var(--gold-lift);margin-bottom:var(--s1)}
.lat{font-family:var(--mono);letter-spacing:.24em}
.catalog-meta{font-size:var(--t-xs);color:var(--paper-70);text-align:right;line-height:1.9}
.was{font-family:var(--mono);text-decoration:line-through;color:var(--paper-45)}

.seal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.topic-list{display:contents}
.seal-card{position:relative;border:2px solid var(--paper-16);background:transparent;padding:18px;
  cursor:pointer;user-select:none;display:flex;flex-direction:column;gap:var(--s2);min-height:180px;
  transition:background .2s ease,border-color .2s ease}
.seal-card input{position:absolute;inset:0;width:100%;height:100%;margin:0;
  opacity:0;cursor:pointer;appearance:none;-webkit-appearance:none}
.seal-card:hover{border-color:var(--paper-45)}
.seal-card:focus-within{outline:2px solid var(--gold-lift);outline-offset:2px}
.sc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s2)}
/* 印：一個方框刻住「本」或「流」，選中就填實，等於蓋咗印 */
.sc-mark{width:30px;height:30px;flex:none;border:1px solid;display:grid;place-items:center;
  font-family:var(--serif);font-weight:700;font-size:15px;line-height:1;transition:background .2s ease,color .2s ease}
.sc-en{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.12em;color:var(--paper-45);text-align:right;
  margin-left:auto;padding-right:4px}
/* Top-right 印框: empty double-line square off, filled chop on. Not a Material checkbox. */
.sc-tick,.bundle-tick{position:relative;width:22px;height:22px;flex:none;color:var(--paper-45);
  border:1px solid currentColor;box-shadow:inset 0 0 0 3px var(--ink),inset 0 0 0 4px currentColor;
  pointer-events:none}
.sc-tick::after,.bundle-tick::after{content:"";position:absolute;left:6px;top:2px;
  width:6px;height:12px;border:solid transparent;border-width:0 2px 2px 0;transform:rotate(40deg)}
.sc-body{display:flex;flex-direction:column;gap:var(--s1);margin-top:auto}
.sc-label{font-family:var(--serif);font-weight:600;font-size:21px;line-height:1.25;
  letter-spacing:.05em;color:var(--paper)}
.sc-scope{font-size:15px;line-height:1.75;color:var(--paper-70)}
.sc-price{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.06em}
.sc-chars{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.06em;color:var(--paper-45)}
.seal-card.on .sc-label{color:var(--paper)}
/* 本命同自由提問行朱砂，流年行金 —— 一眼分到 needsYear 兩類 */
.seal-card.is-life .sc-mark,.seal-card.is-custom .sc-mark{border-color:var(--cinnabar-lift);color:var(--cinnabar-lift)}
.seal-card.is-life .sc-tick,.seal-card.is-custom .sc-tick{color:var(--cinnabar-lift)}
.seal-card.is-life .sc-price,.seal-card.is-custom .sc-price{color:var(--cinnabar-lift)}
.seal-card.is-life.on,.seal-card.is-custom.on{background:color-mix(in srgb,var(--cinnabar) 28%,transparent);border-color:var(--cinnabar)}
.seal-card.is-life.on .sc-mark,.seal-card.is-custom.on .sc-mark{background:var(--cinnabar);color:var(--paper);border-color:var(--cinnabar)}
.seal-card.is-life.on .sc-tick,.seal-card.is-custom.on .sc-tick{background:var(--cinnabar);color:var(--paper);
  border-color:var(--cinnabar);box-shadow:inset 0 0 0 3px var(--cinnabar),inset 0 0 0 4px var(--paper)}
.seal-card.is-life.on .sc-tick::after,.seal-card.is-custom.on .sc-tick::after{border-color:var(--paper)}
.seal-card.is-year .sc-mark{border-color:var(--gold-lift);color:var(--gold-lift)}
.seal-card.is-year .sc-tick{color:var(--gold-lift)}
.seal-card.is-year .sc-price{color:var(--gold-lift)}
.seal-card.is-year.on{background:color-mix(in srgb,var(--gold) 28%,transparent);border-color:var(--gold-lift)}
.seal-card.is-year.on .sc-mark{background:var(--gold-lift);color:var(--ink);border-color:var(--gold-lift)}
.seal-card.is-year.on .sc-tick{background:var(--gold-lift);color:var(--ink);
  border-color:var(--gold-lift);box-shadow:inset 0 0 0 3px var(--gold-lift),inset 0 0 0 4px var(--ink)}
.seal-card.is-year.on .sc-tick::after{border-color:var(--ink)}
/* 自由提問＝未寫定嘅一題，用虛線邊 */
.seal-card.is-custom{border-style:dashed}

.bundles{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.bundle{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:22px 52px 22px 24px;cursor:pointer;text-align:left;font:inherit;border:2px solid;border-radius:0;
  transition:background .2s ease,border-color .2s ease}
.bundle-tick{position:absolute;top:14px;right:14px;color:var(--gold-lift)}
/* 以下全部係 inline span：唔明示排版就會黐晒埋一行 */
.bundle-body{display:flex;flex-direction:column;min-width:0}
.bundle-eyebrow{display:block;font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.2em}
.bundle-name{display:block;font-family:var(--serif);font-weight:600;font-size:clamp(20px,2.2vw,27px);
  letter-spacing:.06em;line-height:1.2;margin:var(--s1) 0}
.bundle-sub{display:block;font-size:15px;line-height:1.75}
.bundle-fig{text-align:right;flex:none}
.bundle-price{display:block;font-family:var(--serif);font-weight:600;font-size:clamp(20px,2vw,26px);line-height:1}
.bundle-was{display:block;font-family:var(--mono);font-size:var(--t-xs);text-decoration:line-through;margin-top:4px}
.bundle-chars{display:block;font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.06em;margin-top:6px}
.bundle:focus-visible{outline:2px solid var(--gold-lift);outline-offset:3px}
/* 流年套餐留喺墨底行金線 */
.bundle-year{background:color-mix(in srgb,var(--paper) 4%,transparent);border-color:var(--gold-lift);color:var(--paper)}
.bundle-year .bundle-eyebrow{color:var(--gold-lift)}
.bundle-year .bundle-sub,.bundle-year .bundle-was,.bundle-year .bundle-chars{color:var(--paper-70)}
.bundle-year.on{background:color-mix(in srgb,var(--gold) 28%,transparent);border-color:var(--gold-lift)}
.bundle-year.on .bundle-tick{background:var(--gold-lift);color:var(--ink);
  border-color:var(--gold-lift);box-shadow:inset 0 0 0 3px var(--gold-lift),inset 0 0 0 4px var(--ink)}
.bundle-year.on .bundle-tick::after{border-color:var(--ink)}
/* 全盤精解反白做米白實心：成個墨底入面唯一嘅大面積亮塊，自然最重 */
.bundle-full{background:var(--paper);border-color:var(--cinnabar);color:var(--ink)}
.bundle-full .bundle-eyebrow{color:var(--cinnabar)}
.bundle-full .bundle-sub,.bundle-full .bundle-was,.bundle-full .bundle-chars{color:var(--ink-70)}
.bundle-full .bundle-tick{color:var(--cinnabar);
  box-shadow:inset 0 0 0 3px var(--paper),inset 0 0 0 4px currentColor}
.bundle-full.on{background:var(--cinnabar);color:var(--paper);border-color:var(--cinnabar)}
.bundle-full.on .bundle-eyebrow,.bundle-full.on .bundle-sub,.bundle-full.on .bundle-was,.bundle-full.on .bundle-chars{color:var(--paper-70)}
.bundle-full.on .bundle-tick{background:var(--paper);color:var(--cinnabar);
  border-color:var(--paper);box-shadow:inset 0 0 0 3px var(--paper),inset 0 0 0 4px var(--cinnabar)}
.bundle-full.on .bundle-tick::after{border-color:var(--cinnabar)}

/* 墨底入面嘅表單控件要反白 */
.catalog label{color:var(--paper-70)}
.catalog input,.catalog textarea{color:var(--paper);border-bottom-color:var(--paper-edge)}
.catalog input:hover,.catalog textarea:hover{border-bottom-color:var(--paper-45)}
.catalog input:focus,.catalog textarea:focus{border-bottom-color:var(--gold-lift)}
.catalog ::placeholder{color:var(--paper-45)}
.catalog .hint{color:var(--paper-70)}
.year-input{margin-top:var(--s4)}
/* These labels are standalone questions (which year / what to ask),
   same rank as a section title, so they use 24px serif. */
.year-input label{font-family:var(--serif);font-size:var(--t-sec);font-weight:700;
  letter-spacing:.04em;margin-bottom:var(--s2)}
.catalog .year-input label{color:var(--paper-70)}

/* 自由提問界線沿用 design branch 色板；內容由 catalog.js 提供。 */
.guide{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:var(--s3) var(--s4);margin-top:var(--s3);
  border-top:1px solid var(--paper-16);padding-top:var(--s3)}
.guide h4{font-size:17px;letter-spacing:.1em;font-weight:700;margin-bottom:var(--s2)}
.guide .g-can h4{color:var(--gold-lift)}
.guide .g-cant h4{color:var(--cinnabar-lift)}
.guide ul{list-style:none;display:flex;flex-direction:column;gap:var(--s2)}
.guide li{font-size:15px;line-height:1.85;color:var(--paper-70);
  padding-left:22px;position:relative}
.guide .g-can li::before{content:"＋";position:absolute;left:0;color:var(--gold-lift)}
.guide .g-cant li::before{content:"−";position:absolute;left:0;color:var(--cinnabar-lift)}

/* ── 付款 ─────────────────────────────────────────── */
.paybox{border-top:1px solid var(--ink-16);padding-top:var(--s4)}
.paybox h2{font-family:var(--serif);font-size:var(--t-h2);font-weight:700;letter-spacing:.05em}
/* Required 流年 year: ink-on-canvas, not a faint label on the catalog slate. */
.paybox-year{margin:var(--s4) 0 0;padding:var(--s3) var(--s4);background:var(--canvas);
  border:2px solid var(--ink)}
.paybox-year-kicker{font-size:var(--t-xs);letter-spacing:.16em;font-weight:700;
  color:var(--cinnabar);margin:0 0 var(--s1)}
.paybox-year label{color:var(--ink);font-family:var(--serif);font-size:var(--t-sec);
  font-weight:700;letter-spacing:.04em;margin-bottom:var(--s2)}
.paybox-year .req{color:var(--cinnabar);font-family:var(--sans);font-size:var(--t-xs);
  letter-spacing:.14em;margin-left:8px;vertical-align:3px}
.paybox-year input{font-family:var(--serif);font-size:clamp(32px,5vw,44px);font-weight:700;
  color:var(--ink);border-bottom:2px solid var(--ink);padding:10px 2px 8px}
.paybox-year input:focus{border-bottom-color:var(--cinnabar)}
.paybox-year .hint{color:var(--ink);margin-top:var(--s2)}
.paybox-year.is-invalid{border-color:var(--cinnabar)}
.paybox-year.is-invalid input{border-bottom-color:var(--cinnabar)}
.pay-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin-top:var(--s3)}
.pay-why{margin:0;max-width:18em;color:var(--cinnabar);font-size:var(--t-body);font-weight:700;
  line-height:1.5}
.pay-why:empty{display:none}
.pay-why.is-year-hint,.pay-why.is-field-hint{cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.btn-main.is-blocked{opacity:.45;cursor:pointer}
.btn-main.is-blocked:hover{opacity:.45}
.quote-lines{margin-top:var(--s3);font-size:var(--t-body);color:var(--ink);line-height:1.7}
.ql{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);max-width:34em;
  font-family:var(--serif);font-size:var(--t-sec);font-weight:700;letter-spacing:.04em;color:var(--ink)}
.ql-save{color:var(--cinnabar);font-size:var(--t-body);font-weight:700;margin-top:6px}
.quote-chars{margin:var(--s2) 0 0;font-family:var(--mono);font-size:14px;letter-spacing:.06em;color:var(--ink-70)}
/* Chapter preview: two-column numbered catalog, not cramped 999px pills. */
.report-outline{margin-top:var(--s3);border:1px solid var(--ink-16);padding:var(--s3)}
.report-outline-label{font-family:var(--serif);font-size:var(--t-sec);font-weight:700;
  letter-spacing:.08em;color:var(--ink);margin:0 0 var(--s3)}
.report-outline ol,.structure-spine ol{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px var(--s4);counter-reset:ch}
.report-outline li,.structure-spine li{counter-increment:ch;font-size:var(--t-body);color:var(--ink);
  border:none;border-bottom:1px solid var(--ink-16);padding:10px 16px;border-radius:0;line-height:1.6}
.report-outline li::before,.structure-spine li::before{content:counter(ch,cjk-ideographic) "、";color:var(--cinnabar);
  font-family:var(--serif);font-weight:700;margin-right:4px}
.paybox .price{font-family:var(--serif);font-size:clamp(38px,6vw,54px);font-weight:900;color:var(--ink);
  margin:var(--s2) 0 var(--s4);line-height:1;font-variant-numeric:lining-nums tabular-nums}
.paybox-email{margin:var(--s3) 0 0;padding:var(--s3) var(--s4);background:var(--canvas);
  border:1px solid var(--ink-16)}
.paybox-email-kicker{font-size:var(--t-xs);letter-spacing:.16em;font-weight:700;
  color:var(--cinnabar);margin:0 0 var(--s1)}
.paybox-email label{color:var(--ink);font-family:var(--serif);font-size:var(--t-sec);
  font-weight:700;letter-spacing:.04em;margin-bottom:var(--s2)}
.paybox-email .req{color:var(--cinnabar);font-family:var(--sans);font-size:var(--t-xs);
  letter-spacing:.14em;margin-left:8px;vertical-align:3px}
.paybox-email input{color:var(--ink);border-bottom:1px solid var(--ink-edge)}
.paybox-email input:focus{border-bottom-color:var(--cinnabar)}
.paybox-email .hint{color:var(--ink-70);margin-top:var(--s2)}
.paybox-email.is-invalid{border-color:var(--cinnabar)}
.paybox-email.is-invalid input{border-bottom-color:var(--cinnabar)}

/* 前往付款前：確認命書語言。closed native dialog 係 display:none，唔好喺未 open 時 set flex。 */
dialog.lang-confirm{
  width:min(92vw,420px);max-width:420px;padding:clamp(22px,5vw,36px);
  border:1px solid var(--ink-16);background:var(--paper);color:var(--ink);
  box-shadow:none}
dialog.lang-confirm[open]{display:flex;flex-direction:column}
dialog.lang-confirm::backdrop{
  background:color-mix(in srgb,var(--ink) 46%,transparent)}
.lang-confirm-kicker{font-size:var(--t-xs);letter-spacing:.16em;font-weight:700;
  color:var(--gold-quiet);margin:0 0 var(--s1)}
.lang-confirm h2{font-family:var(--serif);font-size:clamp(22px,4vw,28px);font-weight:700;
  letter-spacing:.04em;margin:0 0 var(--s3);color:var(--ink)}
.lang-confirm-lead{color:var(--ink-70);margin:0 0 var(--s3);line-height:1.75}
.lang-confirm-opts{display:flex;flex-direction:column;gap:var(--s2);margin:0 0 var(--s4)}
.lang-confirm-opt{
  font-family:var(--serif);font-weight:700;letter-spacing:.08em;font-size:var(--t-sec);
  border:1px solid var(--cinnabar);background:transparent;color:var(--cinnabar);
  padding:14px 18px;text-align:left;cursor:pointer}
.lang-confirm-opt[aria-pressed="true"],.lang-confirm-opt.is-on{
  background:var(--cinnabar);color:var(--paper)}
.lang-confirm-actions{display:flex;gap:var(--s3);flex-wrap:wrap;justify-content:flex-end}
@media (max-width:420px){
  .lang-confirm-actions{flex-direction:column-reverse}
  .lang-confirm-actions .btn-main,.lang-confirm-actions .btn-ghost{width:100%}
}

/* ── 報告：卷冊 ───────────────────────────────────── */
#reportSection{display:none}
.report{background:var(--paper);color:var(--ink);border:1px solid var(--ink-16);
  padding:clamp(28px,6vw,72px) clamp(22px,6vw,64px);font-family:var(--serif);font-size:17px;line-height:2.1}
.report>*:first-child{margin-top:0}
.report h1{font-size:clamp(26px,4.4vw,34px);font-weight:900;letter-spacing:.04em;line-height:1.4;
  color:var(--ink);margin:0 0 var(--s4);padding-bottom:var(--s3);border-bottom:2px solid var(--cinnabar);text-wrap:balance}
.report h2{font-size:clamp(21px,3vw,25px);font-weight:700;color:var(--cinnabar);margin:var(--s5) 0 var(--s2);letter-spacing:.04em;text-wrap:balance}
.report h3{font-size:20px;font-weight:700;margin:var(--s4) 0 var(--s1);letter-spacing:.03em}
.report p{margin:var(--s2) 0;max-width:38em}
.report ul{margin:var(--s2) 0 var(--s2) 1.4em;max-width:38em}
.report li{margin:var(--s1) 0;padding-left:.2em}
.report li::marker{color:var(--gold-quiet)}
.report strong{color:var(--cinnabar);font-weight:700;font-size:inherit}
.report em{font-style:normal;box-shadow:inset 0 -.38em 0 color-mix(in srgb,var(--gold) 28%,transparent);padding:0 .1em}
.report hr{border:none;border-top:1px solid var(--ink-16);margin:var(--s5) 0}
.report table{width:100%;border-collapse:collapse;margin:var(--s3) 0;font-size:var(--t-body);line-height:1.75}
.report th,.report td{border:none;border-bottom:1px solid var(--ink-16);padding:10px 14px 10px 0;text-align:left;vertical-align:top}
.report th{font-family:var(--mono);font-weight:400;color:var(--gold-quiet);font-size:var(--t-xs);
  letter-spacing:.18em;border-bottom:1px solid var(--gold);padding-bottom:var(--s1)}
.table-scroll{overflow-x:auto;margin:var(--s3) 0}
.disclaimer{color:var(--ink-70);font-size:var(--t-xs);line-height:1.95;margin-top:var(--s4);max-width:34em}
.report-reorder{max-width:var(--report-col);margin:var(--s5) auto 0;padding:0 clamp(22px,6vw,64px);text-align:center}
.btn-reorder{background:transparent;color:var(--cinnabar);border:1px solid var(--cinnabar)}
.btn-reorder:hover:not(:disabled){background:color-mix(in srgb,var(--cinnabar) 12%,transparent)}
.report-reorder .hint{margin:var(--s2) auto 0;max-width:28em}

/* ── §6 落印動畫：只播一次，唔 loop ─────────────────── */
@media (prefers-reduced-motion:no-preference){
  @keyframes sealIn{
    0%{transform:translateY(-40px) rotate(-14deg) scale(1.5);opacity:0}
    60%{transform:translateY(6px) rotate(-5deg) scale(.96);opacity:1}
    100%{transform:translateY(0) rotate(-5deg) scale(1);opacity:1}
  }
  .sealIn{animation:sealIn .9s cubic-bezier(.2,.9,.3,1) both}
}
/* reduce 模式：唔郁，但印章仍然要見到（§8） */
@media (prefers-reduced-motion:reduce){.sealIn{transform:rotate(-5deg)}}

/* 印章脈動，取代通用轉圈 */
.spinner{display:inline-block;width:9px;height:9px;background:currentColor;
  animation:seal 1.15s ease-in-out infinite;vertical-align:0;margin-right:9px}
@keyframes seal{0%,100%{opacity:.22;transform:scale(.7) rotate(45deg)}50%{opacity:1;transform:scale(1) rotate(45deg)}}

@media (max-width:900px){
  .seal-grid{grid-template-columns:repeat(2,1fr)}
  .bundles{grid-template-columns:1fr}
  .catalog-head{align-items:flex-start}
  .catalog-meta{text-align:left}
  .hero-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:none;min-height:0}
  .hp{grid-area:auto !important;min-height:104px}
  .hero-core{grid-area:auto;order:-1;grid-column:1/3}
  .hero-hint{min-height:0}
}
@media (max-width:720px){
  .wrap{border:none}
  .seal-grid{grid-template-columns:1fr}
  .board{grid-template-columns:repeat(2,1fr);grid-template-rows:none}
  .center{grid-column:1/3;grid-row:auto;order:99}
  .palace{min-height:180px}
  .report{font-size:16px;line-height:2}
  .ql{max-width:none}
  .report-outline ol,.structure-spine ol{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.spinner{animation:none;opacity:.75}}

/* ── 同意閘（預設分支新增） ─────────────────────────── */
a{color:var(--cinnabar)}
a:hover{color:var(--ink)}
.consent{max-width:none;margin:var(--s4) 0 0;text-align:left;background:transparent;
  border:none;border-top:1px solid var(--ink-16);border-radius:0;padding:var(--s3) 0 0}
.consent-check{display:flex;gap:11px;align-items:flex-start;font-size:var(--t-xs);
  line-height:1.75;cursor:pointer;color:var(--ink-70)}
.consent-check input{width:16px;height:16px;margin-top:2px;flex:none;accent-color:var(--cinnabar);cursor:pointer}
.consent-check a{color:var(--cinnabar);text-decoration:underline;text-underline-offset:2px}

/* ── 等待畫面：版心同 masthead 條線齊，唔好突出去 ───── */
#waiting{display:none;max-width:var(--report-col);margin:0 auto;padding:0;
  border:none;background:transparent;text-align:center}
.waiting-copy{padding:var(--s3) clamp(22px,6vw,64px) var(--s4)}
.waiting-title{font-family:var(--serif);font-size:var(--t-h2);font-weight:700;
  letter-spacing:.05em;color:var(--ink);margin-bottom:var(--s2)}
.waiting-status{font-family:var(--serif);font-size:var(--t-sec);font-weight:600;
  letter-spacing:.04em;line-height:1.55;color:var(--gold-quiet);
  min-height:1.55em;margin:0 0 var(--s3)}
.waiting-body{font-size:var(--t-body);line-height:2;color:var(--ink-70);
  text-align:left;max-width:36em;margin:0 auto}
.waiting-body p+p{margin-top:var(--s3)}
.waiting-elapsed{font-size:var(--t-xs);color:var(--ink-70);margin-top:var(--s4);
  font-family:var(--mono);font-variant-numeric:tabular-nums}
.waiting-chart{text-align:left;margin-top:var(--s3)}
.waiting-chart-kicker{font-size:var(--t-xs);letter-spacing:.16em;font-weight:700;
  color:var(--cinnabar);margin:0 0 var(--s2);text-align:center}
.waiting-chart .board-frame{margin-bottom:0}
.page-start .wrap>.disclaimer{text-align:center;margin-left:auto;margin-right:auto}
#emailNote{color:var(--gold-quiet) !important;font-size:var(--t-body)}
.disclaimer a{color:var(--ink-70);text-decoration:underline;text-underline-offset:2px}
.disclaimer a:hover{color:var(--ink)}

/* ══ §4 品牌頁面（/ 同 /reading）════════════════════════
   兩頁都係一屏定稿：唔捲動、唔堆 section。app 喺 /start。 */

html{scroll-padding-top:80px}

/* ── 導航：66px 單行，唔准斷行（spec §4.1）───────────── */
.nav{height:66px;display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);padding:0 clamp(20px,4vw,54px);border-bottom:1px solid var(--ink-16);
  background:var(--paper);position:sticky;top:0;z-index:50}
.nav--ink{background:var(--ink);border-bottom-color:var(--paper-16)}
.nav-brand{display:flex;align-items:center;gap:var(--s2);text-decoration:none;flex:none}
.nav-wordmark{font-family:var(--serif);font-weight:900;font-size:19px;letter-spacing:-.02em;color:var(--ink)}
.nav--ink .nav-wordmark{color:var(--paper)}
.nav-links{display:flex;align-items:center;gap:clamp(14px,2vw,28px);white-space:nowrap}
.nav-links a{font-size:var(--t-body);color:var(--ink-70);text-decoration:none;white-space:nowrap}
.nav-links a:hover{color:var(--ink)}
.nav--ink .nav-links a{color:var(--paper-70)}
.nav--ink .nav-links a:hover{color:var(--paper)}
.nav-cta{background:var(--ink);color:var(--paper) !important;padding:11px 20px;letter-spacing:.08em}
.nav-cta:hover{opacity:.88}
.nav--ink .nav-cta{background:var(--paper);color:var(--ink) !important}
.nav-end{display:flex;align-items:center;gap:clamp(10px,2vw,24px);min-width:0}
.lang-switch{display:flex;align-items:center;flex:none;user-select:none}
.lang-switch .lang-opt{
  font-family:var(--serif);font-weight:700;font-size:14px;letter-spacing:.14em;
  min-width:32px;height:32px;padding:0 8px;border:1px solid var(--cinnabar);
  background:transparent;color:var(--cinnabar);cursor:pointer;line-height:1;
  transition:background .15s ease,color .15s ease}
.lang-switch .lang-opt[aria-pressed="true"]{
  background:var(--cinnabar);color:var(--paper)}
.lang-switch .lang-opt:focus-visible{outline:2px solid var(--cinnabar);outline-offset:3px}
.lang-sep{color:var(--cinnabar);opacity:.45;padding:0 5px;font-family:var(--serif);font-weight:600}
.nav--ink .lang-switch .lang-opt{border-color:var(--cinnabar-lift);color:var(--cinnabar-lift)}
.nav--ink .lang-switch .lang-opt[aria-pressed="true"]{
  background:var(--cinnabar);color:var(--paper);border-color:var(--cinnabar)}
.nav--ink .lang-sep{color:var(--cinnabar-lift)}
.nav--ink .lang-switch .lang-opt:focus-visible{outline-color:var(--paper)}

/* ── /　品牌落地 ─────────────────────────────────────── */
.page-landing,.page-reading{background:var(--canvas)}
.landing{display:grid;grid-template-columns:1.35fr 1fr;min-height:calc(100dvh - 66px)}
.landing-say{background:var(--paper);display:flex;flex-direction:column;justify-content:center;
  gap:var(--s3);padding:clamp(28px,5vw,72px)}
.landing-say h1{font-family:var(--serif);font-weight:900;font-size:clamp(38px,5.6vw,78px);
  line-height:1.16;letter-spacing:-.01em}
.landing-kicker{margin:0;color:var(--cinnabar);font-size:var(--t-xs);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase}
.comma{color:var(--cinnabar)}
.landing-sub{font-size:var(--t-body);color:var(--ink);max-width:36ch;line-height:1.85}
.landing-cta{display:flex;gap:var(--s3);flex-wrap:wrap}
.btn-cta{display:inline-block;background:var(--cinnabar);color:var(--paper);text-decoration:none;
  font-size:var(--t-body);font-weight:500;letter-spacing:.1em;padding:17px 30px;white-space:nowrap;
  transition:opacity .2s ease,transform .2s ease}
.btn-cta:hover{opacity:.88;color:var(--paper)}
.btn-cta:active{transform:scale(.98)}
.btn-cta--quiet{background:transparent;color:var(--ink);border:1px solid var(--ink-55)}
.btn-cta--quiet:hover{color:var(--ink)}
.landing-price{
  font-size:14px;
  letter-spacing:.08em;
  margin-top:var(--s2);
  font-weight:700;
  color:var(--gold-quiet);
  background-image:linear-gradient(
    105deg,
    var(--gold-quiet) 0%,
    var(--gold-quiet) 28%,
    var(--gold-lift) 42%,
    color-mix(in srgb,var(--gold-lift) 70%,var(--paper)) 50%,
    var(--gold-lift) 58%,
    var(--gold-quiet) 72%,
    var(--gold-quiet) 100%
  );
  background-size:240% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:landing-price-shimmer 5.2s ease-in-out infinite;
}
@keyframes landing-price-shimmer{
  0%,100%{background-position:100% 50%}
  50%{background-position:0% 50%}
}
@media (prefers-reduced-motion:reduce){
  .landing-price{
    animation:none;
    background:none;
    -webkit-text-fill-color:var(--gold-quiet);
    color:var(--gold-quiet);
  }
}
.landing-recover{margin-top:var(--s2)}
.recover-link{font-size:14px;color:var(--ink);letter-spacing:.04em;line-height:1.55;
  text-decoration:underline;text-underline-offset:3px}
.recover-link:hover{color:var(--ink)}
.recover-link--on-ink{color:var(--paper-70)}
.recover-link--on-ink:hover{color:var(--paper)}
.paybox-recover{margin:var(--s3) 0 0}
.reading-recover{margin-top:var(--s3)}

/* 右欄：淨係印章。唔擺插圖、唔砌假 UI（spec §4.1） */
.landing-seal{background:var(--ink);position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s5);
  padding:clamp(24px,4vw,48px);
  background-image:radial-gradient(circle at 62% 34%,color-mix(in srgb,var(--gold) 22%,transparent),transparent 62%)}
.landing-watermark{position:absolute;inset:auto;font-family:var(--serif);font-weight:900;
  font-size:460px;line-height:.8;color:color-mix(in srgb,var(--paper) 5%,transparent);
  pointer-events:none;user-select:none}
.landing-seal .mark{position:relative}
.landing-seal-foot{position:relative;font-family:var(--serif);font-size:var(--t-body);
  letter-spacing:.42em;color:var(--paper-70)}

/* ── /reading　落印開卷 ──────────────────────────────── */
.reading{display:grid;grid-template-columns:1fr 300px;min-height:calc(100dvh - 66px);background:var(--ink)}
.reading-say{position:relative;overflow:hidden;display:flex;flex-direction:column;
  justify-content:space-between;gap:var(--s4);padding:clamp(28px,5vw,64px);color:var(--paper)}
.reading-watermark{position:absolute;right:-.12em;top:-.18em;font-family:var(--serif);font-weight:900;
  font-size:min(620px,58vw);line-height:.8;color:color-mix(in srgb,var(--paper) 5%,transparent);
  pointer-events:none;user-select:none}
.reading-eyebrow{position:relative;font-size:var(--t-xs);letter-spacing:.04em;color:var(--gold-lift)}
.reading-eyebrow .lat{font-family:var(--mono);letter-spacing:.26em}
.reading-say>div{position:relative}
.reading-say h1{font-family:var(--serif);font-weight:900;font-size:clamp(40px,6.4vw,82px);
  line-height:1.2;letter-spacing:-.01em}
.reading-sub{font-size:var(--t-body);color:var(--paper-70);line-height:1.9;margin-top:var(--s3);max-width:34ch}
.reading-stamp{position:relative;display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
/* 印章本身就係個掣 */
.stamp{border:none;padding:calc(var(--mark-size)*.09);cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease}
.stamp--on{transform:rotate(-6deg) scale(.94);
  box-shadow:0 0 0 10px color-mix(in srgb,var(--cinnabar) 14%,transparent)}
.stamp-title{font-family:var(--serif);font-weight:600;font-size:20px;letter-spacing:.06em}
.stamp-sub{font-size:var(--t-xs);color:var(--paper-70);line-height:1.7;max-width:34ch;margin-top:var(--s1)}

/* 書脊：直排術語 + 界行紋 */
.reading-spine{background:var(--paper);position:relative;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--s4);padding:var(--s4) 0;
  background-image:repeating-linear-gradient(0deg,color-mix(in srgb,var(--ink) 4%,transparent) 0 1px,transparent 1px 24px);
  border-left:1px solid var(--gold)}
.spine-seal{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--cinnabar);
  font-family:var(--serif);font-weight:700;font-size:14px;color:var(--cinnabar);flex:none}
.spine-text{writing-mode:vertical-rl;font-family:var(--serif);font-weight:600;font-size:27px;
  line-height:2;letter-spacing:.3em;color:var(--ink)}
.spine-text span{font-weight:400;font-size:15px;color:var(--ink-70);letter-spacing:.22em}
.spine-foot{writing-mode:vertical-rl;font-size:var(--t-xs);letter-spacing:.2em;color:var(--ink-55)}
.spine-foot .lat{font-family:var(--mono)}

@media (max-width:768px){
  .landing{grid-template-columns:1fr}
  .landing-seal{order:-1;min-height:320px;gap:var(--s4)}
  .landing-watermark{font-size:300px}
  .landing-say h1{font-size:clamp(38px,9vw,54px)}
  .reading{grid-template-columns:1fr}
  .reading-spine{order:-1;flex-direction:row;min-height:132px;border-left:none;
    border-bottom:1px solid var(--gold)}
  .spine-text{writing-mode:horizontal-tb;font-size:19px;line-height:1.9;letter-spacing:.12em;text-align:center}
  .spine-foot{writing-mode:horizontal-tb}
  .nav-links a:not(.nav-cta){display:none}
  .nav-wordmark{display:none}
  .lang-switch .lang-opt{min-width:28px;height:28px;font-size:13px;padding:0 6px;letter-spacing:.08em}
}


/* ══ /start 品牌延續與報告閱讀版心 ═══════════════════════
   /start 同品牌頁共用同一個導覽；報告保留原內容，只重整可讀層級。 */
.page-start{background:var(--canvas);--report-col:900px}
.page-start .wrap{min-height:calc(100dvh - 66px)}
.nav--app{gap:var(--s3)}
.nav--app .nav-links{gap:clamp(12px,2vw,26px)}
.nav-wordmark{font-size:clamp(22px,2.2vw,26px);letter-spacing:.01em}
.nav a:focus-visible{outline:2px solid var(--cinnabar);outline-offset:4px}

.brandbar.report-masthead{display:block;max-width:var(--report-col);margin:0 auto var(--s3);
  padding:clamp(28px,5vw,48px) clamp(22px,6vw,64px) var(--s4);
  border-bottom:1px solid var(--ink-16);font-size:inherit;color:var(--ink)}
.report-kicker{font-family:var(--sans);font-size:var(--t-xs);font-weight:600;
  letter-spacing:.12em;color:var(--gold-quiet);margin-bottom:var(--s2)}
.report-kicker .lat{letter-spacing:.24em}
.report-masthead-line{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--s3);flex-wrap:wrap}
.report-masthead-title{font-family:var(--serif);font-size:clamp(34px,5.4vw,54px);
  font-weight:900;line-height:1.2;letter-spacing:.04em}
.report-masthead-note{font-size:var(--t-xs);color:var(--ink-70);
  letter-spacing:.08em;padding-bottom:7px}

#reportSection{max-width:var(--report-col);margin:0 auto}
.report-identity{max-width:var(--report-col);margin:0 auto 14px;padding:22px clamp(22px,5vw,44px);
  background:var(--ink);color:var(--paper);border-left:4px solid var(--cinnabar)}
.report-identity-kicker{font-family:var(--sans);font-size:13px;font-weight:600;
  letter-spacing:.12em;color:var(--gold-lift);margin:0 0 8px}
.report-identity-title{font-family:var(--serif);font-size:clamp(25px,4vw,36px);
  font-weight:800;line-height:1.4;letter-spacing:.03em;margin:0}
.report-identity-items{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 var(--s4);margin:18px 0 0;padding:0;border-top:1px solid var(--paper-16)}
.report-identity-items li{padding:10px 0;border-bottom:1px solid var(--paper-16);
  font-size:15px;line-height:1.7;color:var(--paper-70)}
.report-identity-question{margin-top:18px;padding-top:14px;border-top:1px solid var(--paper-16)}
.report-identity-question>span{display:block;font-size:13px;letter-spacing:.1em;
  color:var(--gold-lift);margin-bottom:5px}
.report-identity-question p{font-family:var(--serif);font-size:17px;line-height:1.8;margin:0}
.report-natal{max-width:var(--report-col);margin:0 auto 10px;
  padding:0 clamp(22px,5vw,44px)}
.report-natal-kicker{font-size:var(--t-xs);letter-spacing:.16em;font-weight:700;
  color:var(--cinnabar);margin:0 0 var(--s2);text-align:center}
.report-natal-clock{font-family:var(--serif);font-size:clamp(16px,2vw,20px);
  font-weight:600;line-height:1.7;letter-spacing:.04em;text-align:center;
  margin:0 0 var(--s1);color:var(--ink)}
.report-natal #reportNatalHint{text-align:center;margin:0 0 var(--s2)}
.report-natal .board-frame{margin-bottom:0;padding:8px}
.report-natal .board{grid-template-rows:repeat(4,minmax(132px,auto))}
.report-natal .palace{padding:10px 12px 30px}
.report{max-width:var(--report-col);margin:0 auto;border-color:var(--ink-16);
  padding:clamp(24px,4vw,48px) clamp(22px,5vw,48px);
  font-size:clamp(16px,1.7vw,18px);line-height:2.05}
.report>:first-child{margin-top:0}
.report h1,.report h2,.report h3,.report p,.report ul,.report ol,
.report blockquote,.report hr,.report .table-scroll,.report>table{
  width:100%;max-width:44rem;margin-left:auto;margin-right:auto}
.report h1{font-size:clamp(38px,6vw,58px);line-height:1.28;
  letter-spacing:.02em;margin-bottom:var(--s5);padding-bottom:var(--s3);
  border-bottom:1px solid var(--cinnabar)}
.report h2{font-size:clamp(26px,3.6vw,34px);line-height:1.38;font-weight:800;
  color:var(--cinnabar);margin-top:clamp(40px,5vw,72px);margin-bottom:var(--s3)}
.report h3{font-size:clamp(18px,2.2vw,22px);line-height:1.45;font-weight:800;
  color:var(--ink);margin-top:var(--s4);margin-bottom:var(--s2)}
.report p{max-width:44rem;margin-top:14px;margin-bottom:14px;font-size:inherit;
  font-weight:400;color:var(--ink)}
.report strong{font-size:inherit}
.report ul,.report ol{max-width:44rem;margin-top:var(--s2);margin-bottom:var(--s3);
  padding-left:1.45em}
.report table{margin-left:auto;margin-right:auto}
.report+.disclaimer,#reportSection>.disclaimer{margin-left:auto;margin-right:auto;text-align:center}

@media (max-width:720px){
  .nav--app{padding-left:16px;padding-right:16px}
  .nav--app .nav-wordmark{font-size:20px}
  .nav--app .nav-cta{padding:10px 14px}
  .brandbar.report-masthead{padding:28px 20px 24px;margin-bottom:12px}
  .report-masthead-line{display:block}
  .report-masthead-note{display:block;margin-top:8px;padding:0}
  .report-identity{margin:0 0 10px;padding:20px;border-left-width:3px}
  .report-identity-items{grid-template-columns:1fr}
  .report-natal{margin:0 0 12px;padding:0 20px}
  .report{border-left:0;border-right:0;padding:34px 20px;font-size:16px;line-height:2}
  .report h1{font-size:clamp(34px,10vw,44px)}
  .report h2{font-size:clamp(24px,7.6vw,29px)}
}


/* ══ /reading 命書樣本展開內容 ══════════════════════════
   印章展開一段明確標示嘅靜態節錄，唔冒充訪客專屬生成結果。 */
.reading-sample{scroll-margin-top:80px;max-width:1040px;margin:0 auto;
  padding:clamp(56px,8vw,96px) clamp(20px,5vw,56px) var(--s6);
  background:var(--paper);border-left:1px solid var(--ink-16);
  border-right:1px solid var(--ink-16)}
.reading-sample:focus{outline:none}
.reading-sample-head{max-width:44rem;margin:0 auto var(--s4)}
.reading-sample-head h2{font-family:var(--serif);font-size:clamp(36px,5vw,54px);
  font-weight:900;line-height:1.28;letter-spacing:.03em;margin:var(--s2) 0 var(--s3);
  text-wrap:balance}
.reading-sample-disclosure{color:var(--ink-70);font-size:14px;line-height:1.9;
  padding-left:14px;border-left:2px solid var(--cinnabar)}
.reading-sample-paper{max-width:48rem;margin:0 auto;padding:clamp(30px,6vw,64px);
  border:1px solid var(--ink-16);background:var(--paper);
  box-shadow:12px 12px 0 var(--canvas);font-family:var(--serif)}
.reading-sample-chapter,.reading-sample-label{font-family:var(--serif);
  font-size:var(--t-sec);font-weight:700;letter-spacing:.08em;color:var(--ink)}
.reading-sample-paper h3{font-size:clamp(28px,4vw,40px);line-height:1.4;
  letter-spacing:.035em;margin:var(--s2) 0 var(--s4)}
.reading-sample-paper>p:not(.reading-sample-chapter){font-size:clamp(16px,1.8vw,18px);
  line-height:2.05;margin:0 0 var(--s3)}
.reading-sample-balance{display:grid;grid-template-columns:1fr 1fr;gap:1px;
  margin:var(--s4) 0;background:var(--ink-16);border:1px solid var(--ink-16)}
.reading-sample-balance>div{background:var(--paper);padding:var(--s3)}
.reading-sample-balance p:last-child{font-size:15px;line-height:1.9;margin-top:var(--s1)}
.reading-sample-paper blockquote{margin-top:var(--s4);padding:var(--s3);
  border-top:1px solid var(--cinnabar);border-bottom:1px solid var(--cinnabar);
  font-size:15px;line-height:1.95;color:var(--ink-70)}
.reading-sample-action{max-width:48rem;margin:var(--s4) auto 0;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.reading-sample-action p{max-width:32rem;color:var(--ink-70);font-size:14px;line-height:1.8}
.reading-sample-cta{display:inline-block;padding:15px 22px;text-decoration:none;
  letter-spacing:.08em;color:var(--paper)}
.reading-sample-cta:hover{color:var(--paper);opacity:.88}
.reading-sample-report{max-width:900px;margin:0 auto;border-color:var(--ink-16);
  box-shadow:12px 12px 0 var(--canvas)}
.reading-sample-report h1{font-size:clamp(32px,5vw,48px)}

/* ══ /reading 命書結構預覽 ═══════════════════════════
   章節、小節同字數由 /api/config 渲染，同落單頁、prompt 讀同一份 catalog。 */
.reading-structure{max-width:1040px;margin:0 auto;
  padding:clamp(48px,7vw,84px) clamp(20px,5vw,56px) var(--s6);
  background:var(--paper);border-left:1px solid var(--ink-16);
  border-right:1px solid var(--ink-16);border-top:1px solid var(--ink-16)}
.structure-spine{max-width:44rem;margin:0 auto var(--s5)}
.structure-subhead{max-width:44rem;margin:0 auto var(--s3);font-family:var(--serif);
  font-size:var(--t-sec);font-weight:700;letter-spacing:.08em;color:var(--ink)}
.structure-topics{max-width:60rem;margin:0 auto;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr))}
.structure-topic{border:1px solid var(--ink-16);background:var(--paper);
  padding:var(--s3);display:flex;flex-direction:column;gap:var(--s1)}
.structure-topic h4{font-family:var(--serif);font-weight:600;font-size:19px;
  letter-spacing:.05em;margin:0}
.structure-topic ul{list-style:none;margin:0;padding:0;font-size:14px;
  line-height:1.9;color:var(--ink-70)}
.structure-topic li{padding-left:14px;position:relative}
.structure-topic li::before{content:"·";position:absolute;left:2px;color:var(--cinnabar)}
.structure-topic-chars{margin-top:auto;padding-top:var(--s1);
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.06em;color:var(--gold-quiet)}
.structure-lengths{max-width:44rem;margin:var(--s5) auto 0}
.structure-lengths .structure-subhead{margin-left:0;margin-right:0}
.structure-length-row{display:flex;justify-content:space-between;gap:var(--s3);
  padding:var(--s2) 0;border-top:1px solid var(--ink-16);
  font-size:var(--t-body);color:var(--ink-70);line-height:1.75}
.structure-length-row span:last-child{font-family:var(--mono);font-size:var(--t-xs);
  color:var(--ink);white-space:nowrap;align-self:center}
.structure-note{margin-top:var(--s2);font-size:14px;line-height:1.8;color:var(--ink-70)}
.reading-structure .reading-sample-action{justify-content:center}

/* ══ 可索引內容頁 ═════════════════════════════════════
   沿用命書版式，搜尋頁只增加長文閱讀所需嘅節奏與比較元件。 */
.seo-hero .reading-say{justify-content:space-between}
.seo-hero .reading-say h1{max-width:11ch;font-size:clamp(42px,6vw,76px)}
.seo-hero .reading-stamp{margin-top:var(--s3)}
.seo-article{font-family:var(--sans)}
.seo-breadcrumb{max-width:48rem;margin:0 auto var(--s5);font-size:13px;color:var(--ink-70)}
.seo-breadcrumb a{color:inherit;text-underline-offset:4px}
.seo-breadcrumb span{padding:0 8px;color:var(--gold-quiet)}
.seo-article>section{max-width:48rem;margin:0 auto var(--s6)}
.seo-article>section h2{font-family:var(--serif);font-size:clamp(30px,4vw,44px);
  font-weight:900;line-height:1.35;letter-spacing:.03em;margin:var(--s2) 0 var(--s3)}
.seo-article>section>p:not(.reading-eyebrow){font-size:clamp(16px,1.8vw,18px);
  line-height:2.05;margin:0 0 var(--s3)}
.seo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  margin:var(--s4) 0;background:var(--ink-16);border:1px solid var(--ink-16)}
.seo-grid article,.seo-compare>div{background:var(--paper);padding:var(--s3)}
.seo-grid h3,.seo-compare h3{font-family:var(--serif);font-size:21px;margin-bottom:var(--s1)}
.seo-grid p,.seo-compare p{font-size:15px;line-height:1.9;color:var(--ink-70)}
.seo-compare{display:grid;grid-template-columns:1fr 1fr;gap:1px;
  margin:var(--s4) 0;background:var(--ink-16);border:1px solid var(--ink-16)}
.seo-note{max-width:48rem;margin:0 auto var(--s5);padding:var(--s3);
  border-top:1px solid var(--cinnabar);border-bottom:1px solid var(--cinnabar);
  font-size:14px;line-height:1.9;color:var(--ink-70)}

@media (max-width:640px){
  .reading-sample{border:0;padding-top:48px}
  .reading-sample-paper{padding:28px 20px;box-shadow:7px 7px 0 var(--canvas)}
  .reading-sample-balance{grid-template-columns:1fr}
  .reading-sample-action{align-items:stretch}
  .reading-sample-cta{width:100%;text-align:center}
  .reading-structure{border-left:0;border-right:0}
  .seo-grid,.seo-compare{grid-template-columns:1fr}
}

/* ══ /recover 用電郵搵返命書 ═══════════════════════════ */
.page-recover{background:var(--canvas);min-height:100dvh}
.recover-wrap{max-width:640px;margin:0 auto;padding:clamp(28px,5vw,64px) clamp(20px,4vw,40px) 80px;
  background:var(--paper);min-height:calc(100dvh - 66px);border-left:1px solid var(--ink-16);
  border-right:1px solid var(--ink-16)}
.recover-wrap h1{font-family:var(--serif);font-weight:900;font-size:clamp(32px,5vw,48px);
  letter-spacing:.02em;line-height:1.25;margin:0 0 var(--s4)}
.recover-panel{max-width:34em}
.recover-form label{display:block;font-family:var(--serif);font-size:var(--t-sec);font-weight:700;
  letter-spacing:.04em;color:var(--ink);margin:var(--s3) 0 var(--s2)}
.recover-form input{width:100%;color:var(--ink);border-bottom:1px solid var(--ink-edge);padding:8px 2px}
.recover-form input:focus{border-bottom-color:var(--cinnabar)}
.recover-status{min-height:1.5em;margin:var(--s2) 0;color:var(--cinnabar);font-size:var(--t-body);font-weight:700}
.recover-status:empty{display:none}
.recover-form .btn-main{margin-top:var(--s3)}
.recover-state{margin-top:var(--s2)}
.recover-sent-copy,.recover-expired-copy,.recover-empty-copy{font-size:var(--t-body);line-height:1.9;color:var(--ink)}
.recover-list-title{font-family:var(--serif);font-size:var(--t-sec);font-weight:700;
  letter-spacing:.08em;margin:0 0 var(--s3)}
.recover-orders{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s3)}
.recover-order{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s3);border:1px solid var(--ink-16);background:var(--canvas);flex-wrap:wrap}
.recover-order-title{font-family:var(--serif);font-size:var(--t-sec);font-weight:700;
  letter-spacing:.04em;line-height:1.45;margin:0}
.recover-order-date{font-size:var(--t-xs);color:var(--ink-70);margin-top:6px}
.recover-order-go{display:inline-block;text-decoration:none;padding:12px 18px;letter-spacing:.08em;
  white-space:nowrap}
.recover-order-go:hover{color:var(--paper);opacity:.88}
.recover-state .btn-ghost{margin-top:var(--s3)}
@media (max-width:640px){
  .recover-wrap{border-left:0;border-right:0}
}