/* 問卷的樣式（2026-08-27）
   ─────────────────────────────────────────────
   🔴 這份是唯一的一份：編輯器的即時預覽與公開站 hiform 共用同一支。
      公開站放的是部署複本，上線關卡（form-render-drift）比對一字不差。

   🔴 設計鐵律（使用者 2026-08-16 對名片頁當面指正，這裡照辦）：
      不用卡片、不用圓角白框、不用陰影。
      靠留白、字級對比、細線分段。
      —— 業務員可以在樣式面板自己加底色圓角，但**預設一定是這樣**，
         因為一百個人有九成會直接用預設。

   🔴 每一塊在手機上怎麼縮是寫死的。業務員在電腦上愛怎麼排都行，
      但客戶九成用手機開，不能讓他們排出爆版的東西。 */

.fm-root {
  --fm-accent: #8a6d3b;
  --fm-bg: #ffffff;
  --fm-tx: #262626;
  --fm-mute: #737373;
  --fm-line: #e5e5e5;
  --fm-width: 640px;
  --fm-font: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  font-family: var(--fm-font);
  background: var(--fm-bg);
  color: var(--fm-tx);
  line-height: 1.75;
  min-height: 100%;
  position: relative;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}
.fm-root.fm-font-serif { --fm-font: "Noto Serif TC", "Songti TC", serif; }
.fm-root.fm-font-kai   { --fm-font: "LXGW WenKai TC", "Kaiti TC", "BiauKai", serif; }
/* 圓體。🔴 沒有可靠的免費繁中圓體網路字型（jf 粉圓的 CDN 是死的、
   Google Fonts 只有日文的 Zen Maru Gothic，用它會有一半的字掉回黑體、更難看）。
   所以走**系統內建的圓體-繁**：iPhone 與 Mac 都有（實查 macOS 有 STYuanti-TC）。
   Android 沒有，會退回一般黑體 —— 這點有跟使用者講清楚。 */
.fm-root.fm-font-round { --fm-font: "Yuanti TC", "圓體-繁", "Yuanti SC", "PingFang TC", sans-serif; }

/* 紙材（沿用名片頁那三張，不另外找圖） */
.fm-tex { position: absolute; inset: 0; z-index: 0; opacity: .5; pointer-events: none;
          background-repeat: repeat; background-size: 360px; }

.fm-wrap {
  position: relative; z-index: 1;
  max-width: var(--fm-width);
  margin: 0 auto;
  padding: 40px 20px 72px;
  box-sizing: border-box;
}
/* 🔴 窄螢幕（大部分客戶都是手機）：按鈕換到下面整條，不要跟姓名擠在同一排
   —— 擠在一起的話姓名會被折成兩行，看起來很擠。 */

/* ── 送出之後 ─────────────────────────────────────────── */
.fm-done { padding: 80px 0; text-align: center; }
.fm-done h3 { font-size: 22px; margin: 0 0 10px; font-weight: 700; }
.fm-done p  { margin: 0; color: var(--fm-mute); }

/* ── 編輯器裡的預覽（只有 mode:'edit' 才會加這個 class）── */
.fm-root.fm-edit .fm-blk { position: relative; }
.fm-root.fm-edit .fm-blk.fm-sel { outline: 2px solid var(--fm-accent); outline-offset: 6px; }

@media (max-width: 480px) { .fm-wrap { padding: 28px 18px 56px; } }

/* ── 每一塊 ───────────────────────────────────────────── */
.fm-blk { margin: 0 0 26px; box-sizing: border-box; max-width: 100%; }
.fm-blk:last-child { margin-bottom: 0; }
.fm-blk.fm-pad-s { padding: 4px 0; }
.fm-blk.fm-pad-m { padding: 8px 0; }
.fm-blk.fm-pad-l { padding: 18px 0; }
.fm-blk.fm-al-center { text-align: center; }
.fm-blk.fm-al-right  { text-align: right; }
/* 有自己底色的那幾塊才需要內縮與圓角（沒底色時圓角看不出來，只會讓版面變髒） */
.fm-blk.fm-hasbg { padding-left: 16px; padding-right: 16px; }
.fm-blk.fm-r-s { border-radius: 4px; }
.fm-blk.fm-r-m { border-radius: 10px; }
.fm-blk.fm-r-l { border-radius: 20px; }

/* ── 文字 ─────────────────────────────────────────────── */
.fm-text { font-size: 16px; }
.fm-text h3 { font-size: 24px; line-height: 1.45; margin: 0 0 12px; font-weight: 700; letter-spacing: .01em; }
.fm-text h4 { font-size: 19px; line-height: 1.5; margin: 0 0 10px; font-weight: 600; }
.fm-text p  { margin: 0 0 10px; }
.fm-text p:last-child { margin-bottom: 0; }
.fm-text ul, .fm-text ol { margin: 0 0 10px; padding-left: 1.4em; }
.fm-text a { color: var(--fm-accent); text-decoration: underline; text-underline-offset: 3px; }
.fm-text blockquote { margin: 0 0 10px; padding-left: 14px; border-left: 2px solid var(--fm-line); color: var(--fm-mute); }

/* ── 圖片 ─────────────────────────────────────────────── */
.fm-img { display: block; width: 100%; height: auto; max-width: 100%; }
.fm-img.fm-ratio-1-1  { aspect-ratio: 1 / 1;  object-fit: cover; }
.fm-img.fm-ratio-4-5  { aspect-ratio: 4 / 5;  object-fit: cover; }
.fm-img.fm-ratio-16-9 { aspect-ratio: 16 / 9; object-fit: cover; }

/* ── 分段（細線，不是卡片邊框）───────────────────────── */
.fm-hr { border: 0; border-top: 1px solid var(--fm-line); margin: 0; }
.fm-blk[data-blk="divider"].fm-gap-s { margin-bottom: 14px; }
.fm-blk[data-blk="divider"].fm-gap-l { margin-bottom: 42px; }

/* ── 題目 ─────────────────────────────────────────────── */
.fm-q-title { font-size: 17px; font-weight: 600; line-height: 1.6; margin: 0 0 4px; }
.fm-q-note  { font-size: 13px; color: var(--fm-mute); margin: 0 0 12px; }
.fm-req { color: var(--fm-accent); margin-left: 4px; font-weight: 700; }

.fm-opts { border-top: 1px solid var(--fm-line); }
.fm-opt {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 2px;                 /* 手指點得到：連同行高約 46 點 */
  border-bottom: 1px solid var(--fm-line);
  cursor: pointer; font-size: 16px; line-height: 1.5;
}
.fm-opt input { margin: 4px 0 0; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--fm-accent); }
/* 🔴 主色原本只看得出「送出鈕變色」（2026-08-28 使用者回報）。
   原因是它只用在按鈕、連結、必填星號、還有選項那顆原生圓鈕（很細微）。
   現在讓它落在**看得到的面積**上：選項整條、題目標題下的短線、輸入框。 */
.fm-opt { border: 1px solid transparent; border-radius: 10px; padding: 7px 10px; margin: 0 -10px; transition: background .12s, border-color .12s; }
.fm-opt:hover { background: color-mix(in srgb, var(--fm-accent) 6%, transparent); }
.fm-opt.on { background: color-mix(in srgb, var(--fm-accent) 10%, transparent);
             border-color: color-mix(in srgb, var(--fm-accent) 35%, transparent); }
.fm-q-title::after { content: ""; display: block; width: 26px; height: 2px; margin: 7px 0 0;
                     border-radius: 2px; background: var(--fm-accent); opacity: .55; }
.fm-input, .fm-area { border-bottom-color: color-mix(in srgb, var(--fm-accent) 28%, var(--fm-line)); }
.fm-opt span { flex: 1 1 auto; min-width: 0; word-break: break-word; }

.fm-input, .fm-area {
  width: 100%; box-sizing: border-box;
  font-family: inherit; font-size: 16px;   /* 16 以下 iPhone 會自己放大整頁 */
  color: inherit; background: transparent;
  border: 0; border-bottom: 1px solid var(--fm-line);
  border-radius: 0;                        /* 不用圓角白框 */
  padding: 10px 2px; line-height: 1.6;
  -webkit-appearance: none; appearance: none;
}
.fm-area { resize: vertical; min-height: 84px; }
.fm-input:focus, .fm-area:focus { outline: none; border-bottom-color: var(--fm-accent); }
.fm-bad .fm-input, .fm-bad .fm-area { border-bottom-color: #dc2626; }

/* ── 連結按鈕 ─────────────────────────────────────────── */
.fm-btn {
  display: inline-block; max-width: 100%; box-sizing: border-box;
  padding: 14px 26px; font-size: 16px; font-weight: 600;
  background: var(--fm-accent); color: #fff; text-decoration: none;
  border: 0; cursor: pointer; font-family: inherit;
  word-break: break-word;
}
.fm-btn:active { transform: translateY(1px); }

/* 🔴 問卷中間的連結用「外框」，實心只留給最下面那顆送出。
   兩顆長得一樣的話，客戶會以為按中間那顆就是送出了 ——
   他點出去、沒填完就走了，業務員什麼都收不到。 */
.fm-btn-line {
  display: inline-block; max-width: 100%; box-sizing: border-box;
  padding: 13px 25px; font-size: 16px; font-weight: 600;
  background: transparent; color: var(--fm-accent); text-decoration: none;
  border: 1px solid var(--fm-accent); cursor: pointer; font-family: inherit;
  word-break: break-word;
}
.fm-btn-line:active { transform: translateY(1px); }
.fm-btn-text { color: var(--fm-accent); text-decoration: underline; text-underline-offset: 3px; }

/* ── 留聯絡方式 ───────────────────────────────────────── */
.fm-ct-note { font-size: 14px; color: var(--fm-mute); margin: 0 0 16px; }
.fm-field { margin: 0 0 18px; }
.fm-label { display: block; font-size: 13px; color: var(--fm-mute); margin: 0 0 2px; }
.fm-err { display: none; font-size: 13px; color: #dc2626; margin: 6px 0 0; }
.fm-bad .fm-err { display: block; }

.fm-send { margin-top: 26px; }
.fm-send .fm-btn { width: 100%; text-align: center; padding: 16px 20px; }

/* ── 名片卡 ───────────────────────────────────────────── */

/* ── 名片卡的六款樣式（2026-08-28）────────────────────────
   🔴 這一整段是 **codex 直接寫的**，我只做了三件事：
      ① 加命名空間（.card-X → .fm-cs-X，其餘掛在 .fm-card 底下）
      ② 把它的主色變數 --a 接到問卷自己的 --fm-accent
      ③ 修票券那款被拉太高的問題（見那一段的註解）
   **不要「順手美化」它** —— 前面好幾版就是我照著設計稿手刻、
   把撐起質感的東西（燙金線、深色、切面）省掉，出來就走味了。
   使用者原話：「你自己畫的都醜」。要改設計就再去問 codex。 */
/* 🔴 codex 那份 CSS 的版面是靠這兩行站著的（`* { box-sizing: border-box }` 與
   `margin: 0`），我第一次搬的時候把它們砍了，結果整張卡片的背景與尺寸全跑掉
   —— 而且**程式量到的樣式是對的、畫出來是白的**，看數字看不出來，是截圖才發現。
   只作用在卡片裡面，不影響問卷其他地方。 */
.fm-card, .fm-card *, .fm-card *::before, .fm-card *::after { box-sizing: border-box; }
.fm-card h1, .fm-card h2, .fm-card h3, .fm-card h4, .fm-card p { margin: 0; }

.fm-card {
  --a: var(--fm-accent);
  --a-deep: color-mix(in srgb, var(--a) 62%, #080b09);
  --a-dark: color-mix(in srgb, var(--a) 78%, #111);
  --a-mid:  color-mix(in srgb, var(--a) 72%, #fff);
  --a-soft: color-mix(in srgb, var(--a) 16%, #f7f5ef);
  --a-mist: color-mix(in srgb, var(--a) 7%, #f8f7f3);
  --a-line: color-mix(in srgb, var(--a) 24%, transparent);
  --ink:    color-mix(in srgb, var(--a) 15%, #171a18);
  --muted:  color-mix(in srgb, var(--a) 8%, #666b68);
  --paper:  #f5f2ea;
  --white:  #fff;
  --ease:   cubic-bezier(.2,.72,.22,1);
}

.fm-card .fm-cardbox {
      /* 🔴 一定要 display:block（2026-08-28）。codex 的卡片是 <article>（本來就是區塊），
         我把它做成整張可以點的 <a> —— **連結預設是行內元素，背景會沿著文字行畫**，
         結果整張卡片只剩幾條奇怪的色塊。
         🔴 這個坑量數字量不出來：背景色、寬高、命中的規則全都正確，
            只有截圖看得出來。 */
      display: block;
      text-decoration: none;
      color: inherit;
      position: relative;
      isolation: isolate;
      width: 100%;
      overflow: hidden;
      box-shadow: 0 22px 50px color-mix(in srgb, var(--a) 12%, rgba(12,18,14,.12));
    }

    .fm-card .avatar {
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      aspect-ratio: 1;
      border-radius: 50%;
      /* 🔴 頭像是 <img>，框是固定的正方形。沒有這一行的話，直式或橫式照片
         會被壓扁／拉長來填滿框（人臉會變形）。2026-08-29 codex 審查（信心 0.96）抓到。
         cover＝維持比例、裁掉多出來的邊；center＝從中間裁（人臉通常在中間）。 */
      object-fit: cover;
      object-position: center;
      font-family: "Songti TC", "STSong", "Noto Serif TC", serif;
      font-weight: 700;
      line-height: 1;
      user-select: none;
    }

    .fm-card .name {
      margin: 0;
      font-family: "Songti TC", "STSong", "Noto Serif TC", serif;
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: .1em;
      text-wrap: balance;
    }

    .fm-card .tagline {
      margin: 0;
      font-size: 13px;
      line-height: 1.72;
      letter-spacing: .035em;
      text-wrap: pretty;
    }

    .fm-card .cta {
      min-height: 44px;
      text-decoration: none;
      -webkit-tap-highlight-color: transparent;
      transition: transform .24s var(--ease), background-color .24s var(--ease),
        color .24s var(--ease), box-shadow .24s var(--ease);
    }

    .fm-card .cta:focus-visible {
      outline: 3px solid color-mix(in srgb, var(--a) 52%, white);
      outline-offset: 3px;
    }

    .cta:active { transform: translateY(1px) scale(.99); }

    /* 01 ── 深色漆面：像精品銀行的私人邀請卡 */
    .fm-cs-noir {
      min-height: 292px;
      padding: 25px 24px 22px;
      color: white;
      border-radius: 4px;
      background:
        linear-gradient(112deg, rgba(255,255,255,.055), transparent 27%, transparent 73%, rgba(255,255,255,.035)),
        repeating-linear-gradient(104deg, transparent 0 17px, rgba(255,255,255,.015) 18px 19px),
        var(--a-deep);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.12),
        inset 0 0 0 7px rgba(0,0,0,.1),
        0 25px 54px color-mix(in srgb, var(--a) 28%, rgba(0,0,0,.28));
    }

    .fm-cs-noir::before {
      content: "PRIVATE ADVISORY";
      position: absolute;
      top: 25px;
      right: 24px;
      color: color-mix(in srgb, var(--a) 30%, white);
      font-family: Georgia, serif;
      font-size: 8px;
      letter-spacing: .21em;
    }

    .fm-cs-noir::after {
      content: "";
      position: absolute;
      inset: 12px;
      border: 1px solid rgba(255,255,255,.08);
      pointer-events: none;
    }

    .fm-card .noir-top {
      display: flex;
      align-items: center;
      gap: 17px;
      margin-top: 36px;
    }

    .fm-cs-noir .avatar {
      width: 72px;
      color: var(--a-deep);
      background:
        linear-gradient(135deg,
          color-mix(in srgb, var(--a) 38%, white),
          color-mix(in srgb, var(--a) 12%, white) 48%,
          color-mix(in srgb, var(--a) 44%, white));
      border: 1px solid rgba(255,255,255,.62);
      box-shadow: 0 0 0 5px rgba(255,255,255,.06);
      font-size: 26px;
    }

    .fm-cs-noir .name {
      font-size: clamp(25px, 7vw, 29px);
      color: color-mix(in srgb, var(--a) 12%, white);
    }

    .fm-cs-noir .tagline {
      margin-top: 22px;
      max-width: 270px;
      color: rgba(255,255,255,.72);
    }

    .fm-card .noir-bottom {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-top: 21px;
    }

    .noir-rule { height: 1px; flex: 1; background: rgba(255,255,255,.18); }

    .fm-cs-noir .cta {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 0 4px 0 10px;
      color: color-mix(in srgb, var(--a) 14%, white);
      font-size: 13px;
      font-weight: 650;
      letter-spacing: .08em;
    }

    .fm-cs-noir .cta::after {
      content: "";
      width: 28px;
      height: 28px;
      border: 1px solid rgba(255,255,255,.42);
      border-radius: 50%;
      background: linear-gradient(45deg, transparent 46%, currentColor 47% 53%, transparent 54%) center / 10px 10px no-repeat;
      transition: transform .24s var(--ease), background-color .24s var(--ease);
    }

    .fm-cs-noir .cta:hover::after { transform: rotate(-45deg); background-color: rgba(255,255,255,.1); }

    /* 02 ── 紙張壓印：低調、溫暖、像高級棉紙名片 */
    .fm-cs-letterpress {
      min-height: 284px;
      padding: 26px 25px 23px;
      border: 1px solid color-mix(in srgb, var(--a) 15%, #d7d1c4);
      border-radius: 1px;
      background:
        radial-gradient(circle at 20% 30%, rgba(0,0,0,.022) 0 .7px, transparent .9px) 0 0 / 9px 9px,
        radial-gradient(circle at 70% 60%, rgba(255,255,255,.38) 0 .8px, transparent 1px) 0 0 / 11px 11px,
        var(--paper);
      box-shadow:
        0 1px 0 rgba(255,255,255,.8) inset,
        0 19px 38px rgba(47,52,48,.14),
        6px 7px 0 color-mix(in srgb, var(--a) 10%, #ddd8cc);
    }

    .fm-card .letter-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 16px;
    }

    .fm-card .letter-kicker {
      color: var(--a);
      font-family: Georgia, "Times New Roman", serif;
      font-size: 9px;
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: .22em;
      text-transform: uppercase;
    }

    .fm-cs-letterpress .avatar {
      width: 66px;
      color: var(--a);
      background: transparent;
      border: 1px solid var(--a);
      outline: 1px solid color-mix(in srgb, var(--a) 30%, transparent);
      outline-offset: 4px;
      box-shadow: inset 0 0 0 5px color-mix(in srgb, var(--a) 7%, transparent);
      font-size: 25px;
    }

    .fm-cs-letterpress .name {
      margin-top: 15px;
      color: var(--a-dark);
      font-size: clamp(28px, 8vw, 32px);
      text-shadow: 0 1px 0 rgba(255,255,255,.8), 0 -1px 0 color-mix(in srgb, var(--a) 10%, transparent);
    }

    .fm-cs-letterpress .tagline {
      margin-top: 10px;
      color: color-mix(in srgb, var(--a) 35%, #5a5c58);
    }

    .fm-card .letter-foot {
      display: flex;
      align-items: center;
      gap: 15px;
      margin-top: 20px;
      padding-top: 15px;
      border-top: 1px solid color-mix(in srgb, var(--a) 22%, transparent);
    }

    .fm-card .letter-mark {
      width: 7px;
      height: 7px;
      background: var(--a);
      transform: rotate(45deg);
    }

    .fm-cs-letterpress .cta {
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      flex: 1;
      color: var(--a-dark);
      font-family: "Songti TC", "STSong", serif;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: .08em;
    }

    .fm-cs-letterpress .cta::after { content: "→"; color: var(--a); font-family: Georgia, serif; font-size: 19px; }
    .fm-cs-letterpress .cta:hover { color: var(--a); }

    /* 03 ── 編輯式大字：強烈比例，不像一般 UI 卡片 */
    /* 🔴 這兩款是「左右兩欄」的版面，所以根元素要 display:grid。
       選擇器一定要寫成 `.fm-card .fm-cs-xxx`（兩層），不能只寫一層 ——
       因為上面 `.fm-card .fm-cardbox` 為了修「整張卡可以點」而寫了 display:block，
       那條是兩層、贏過一層的 display:grid。
       2026-08-29 處經理截圖才看到：兩欄變成上下疊，靠左突出的人像整顆掉到卡片外面。
       🔴 這個坑量數字量不出來（每條規則本身都是對的），只有截圖看得出來。 */
    .fm-card .fm-cs-editorial {
      display: grid;
      grid-template-columns: 36% 64%;
      min-height: 272px;
      border-radius: 0 24px 0 24px;
      background: #f8f8f5;
      box-shadow: 0 24px 46px color-mix(in srgb, var(--a) 15%, rgba(0,0,0,.16));
    }

    .fm-card .editor-slab {
      position: relative;
      display: flex;
      align-items: flex-end;
      overflow: hidden;
      padding: 18px 14px;
      color: white;
      background: var(--a);
    }

    .fm-card .editor-slab::before {
      content: attr(data-ch);   /* 本人姓名的第一個字，渲染器餵進來（不准寫死姓氏） */
      position: absolute;
      top: -26px;
      left: -17px;
      color: rgba(255,255,255,.15);
      font-family: "Songti TC", "STSong", serif;
      font-size: 162px;
      font-weight: 700;
      line-height: 1;
    }

    .fm-card .editor-slab small {
      position: relative;
      z-index: 1;
      font-family: Georgia, serif;
      font-size: 8px;
      line-height: 1.7;
      letter-spacing: .18em;
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      opacity: .78;
    }

    .fm-card .editor-main {
      position: relative;
      display: flex;
      flex-direction: column;
      min-width: 0;
      padding: 34px 20px 18px 38px;
    }

    .fm-cs-editorial .avatar {
      position: absolute;
      top: 23px;
      left: -31px;
      width: 63px;
      color: white;
      background: var(--a-deep);
      border: 5px solid #f8f8f5;
      font-size: 22px;
      box-shadow: 0 5px 18px rgba(0,0,0,.17);
    }

    .fm-card .editor-index {
      margin-left: auto;
      color: var(--a);
      font-family: Georgia, serif;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .16em;
    }

    .fm-cs-editorial .name {
      margin-top: 24px;
      color: var(--a-dark);
      font-size: clamp(26px, 7.5vw, 31px);
      letter-spacing: .04em;
    }

    .fm-cs-editorial .tagline {
      margin-top: 10px;
      color: #666b68;
      font-size: 12.5px;
    }

    .fm-cs-editorial .cta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      margin-top: auto;
      padding-top: 13px;
      border-top: 2px solid var(--a);
      color: var(--a-dark);
      font-size: 13px;
      font-weight: 750;
      letter-spacing: .07em;
    }

    .fm-cs-editorial .cta::after {
      content: "+";
      display: grid;
      place-items: center;
      width: 25px;
      height: 25px;
      color: white;
      background: var(--a);
      font-size: 18px;
      font-weight: 400;
      transition: transform .25s var(--ease);
    }

    .fm-cs-editorial .cta:hover::after { transform: rotate(90deg); }

    /* 04 ── 非對稱切面：有速度感，但保留專業穩定 */
    .fm-cs-facet {
      min-height: 300px;
      padding: 24px 23px 21px;
      border-radius: 34px 5px 34px 5px;
      color: var(--a-deep);
      background: var(--a-soft);
      box-shadow: 0 22px 52px color-mix(in srgb, var(--a) 19%, rgba(0,0,0,.15));
    }

    .fm-cs-facet::before {
      content: "";
      position: absolute;
      z-index: -1;
      inset: 0 43% 0 0;
      background: var(--a);
      clip-path: polygon(0 0, 100% 0, 76% 100%, 0 100%);
    }

    .fm-cs-facet::after {
      content: "";
      position: absolute;
      z-index: -1;
      top: 0;
      right: 0;
      width: 38%;
      height: 10px;
      background: var(--a);
    }

    .fm-card .facet-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 20px;
    }

    .fm-card .facet-monogram {
      color: rgba(255,255,255,.86);
      font-family: Georgia, serif;
      font-size: 9px;
      line-height: 1.6;
      letter-spacing: .2em;
    }

    .fm-cs-facet .avatar {
      width: 86px;
      color: white;
      background: var(--a-dark);
      border: 7px solid var(--a-soft);
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--a) 32%, transparent), 0 12px 24px rgba(0,0,0,.15);
      font-size: 29px;
    }

    .fm-card .facet-copy {
      width: 78%;
      margin: 20px 0 0 auto;
      padding: 18px 17px 15px;
      background: rgba(255,255,255,.9);
      border: 1px solid rgba(255,255,255,.72);
      box-shadow: 0 14px 30px color-mix(in srgb, var(--a) 13%, rgba(0,0,0,.1));
      backdrop-filter: blur(7px);
    }

    .fm-cs-facet .name {
      color: var(--a-dark);
      font-size: clamp(25px, 7vw, 29px);
      letter-spacing: .06em;
    }

    .fm-cs-facet .tagline { margin-top: 8px; color: #626965; font-size: 12.5px; }

    .fm-cs-facet .cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      margin-top: 13px;
      color: white;
      background: var(--a-dark);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .08em;
      box-shadow: 0 6px 14px color-mix(in srgb, var(--a) 22%, transparent);
    }

    .fm-cs-facet .cta:hover { background: var(--a); transform: translateY(-1px); }

    /* 05 ── 私人票券：把「點進名片」變成一張邀請憑證 */
    .fm-card .fm-cs-ticket {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 68px;
      min-height: 234px;
      overflow: visible;
      border: 1px solid color-mix(in srgb, var(--a) 42%, #cbcfc9);
      border-radius: 3px;
      background: #fbfbf8;
      box-shadow: 0 18px 38px rgba(40,46,42,.13);
    }

    .fm-card .ticket-main {
      position: relative;
      min-width: 0;
      padding: 22px 20px 18px;
      overflow: hidden;
    }

    .fm-card .ticket-main::after {
      /* 🔴 這裡本來是內部代號（codex 寫的），公開站不准出現，關卡當場擋下來。
         換成中性的字，視覺效果一樣。
         ⚠️ 連**註解裡**也不能寫那個代號 —— 關卡掃的是整個檔案，
            我第一次修的時候就是把它留在註解裡，照樣被擋。 */
      content: "ADVISOR";
      position: absolute;
      right: -9px;
      bottom: -18px;
      color: color-mix(in srgb, var(--a) 7%, transparent);
      font-family: Georgia, serif;
      font-size: 58px;
      font-weight: 700;
      letter-spacing: -.04em;
    }

    .fm-card .ticket-head {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .fm-cs-ticket .avatar {
      width: 58px;
      color: white;
      background: var(--a);
      font-size: 22px;
    }

    .fm-card .ticket-label {
      color: var(--a);
      font-family: Georgia, serif;
      font-size: 8px;
      font-weight: 700;
      line-height: 1.7;
      letter-spacing: .18em;
    }

    .fm-cs-ticket .name {
      margin-top: 4px;
      color: var(--a-dark);
      font-size: clamp(23px, 6.5vw, 27px);
      letter-spacing: .05em;
    }

    .fm-cs-ticket .tagline {
      position: relative;
      z-index: 1;
      margin-top: 16px;
      padding-top: 13px;
      border-top: 1px dashed color-mix(in srgb, var(--a) 28%, transparent);
      color: #646a66;
      font-size: 12.5px;
    }

    .fm-card .ticket-stub {
      position: relative;
      display: flex;
      align-items: stretch;
      justify-content: center;
      border-left: 1px dashed color-mix(in srgb, var(--a) 46%, transparent);
      background: var(--a-mist);
    }

    .ticket-stub::before,
    .fm-card .ticket-stub::after {
      content: "";
      position: absolute;
      left: -10px;
      width: 19px;
      height: 19px;
      border-radius: 50%;
      background: #e9ebe8;
      border: 1px solid color-mix(in srgb, var(--a) 32%, #d4d7d3);
    }

    .ticket-stub::before { top: -10px; }
    .ticket-stub::after { bottom: -10px; }

    .fm-cs-ticket .cta {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      /* 🔴 原本是 min-height:100%，配上直排文字會跟外層互相追著長高 ——
         實測整張卡片被撐到 1264px（其他款約 300px）。
         票根本來就靠 align-items:stretch 撐滿，這一行是多的。 */
      padding: 13px 0;
      color: var(--a-dark);
      font-size: 13px;
      font-weight: 750;
      letter-spacing: .12em;
      writing-mode: vertical-rl;
    }

    .fm-cs-ticket .cta::after { content: "→"; margin-top: 11px; color: var(--a); font-family: Georgia, serif; font-size: 20px; }
    .fm-cs-ticket .cta:hover { color: white; background: var(--a); }
    .fm-cs-ticket .cta:hover::after { color: white; }

    /* 06 ── 染色金屬：俐落、未來感，像精品會員卡 */
    .fm-cs-metal {
      min-height: 304px;
      padding: 24px;
      color: white;
      clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px));
      background:
        linear-gradient(125deg, rgba(255,255,255,.12), transparent 31%, rgba(0,0,0,.18) 67%, rgba(255,255,255,.06)),
        var(--a-dark);
      box-shadow: 0 26px 54px color-mix(in srgb, var(--a) 32%, rgba(0,0,0,.23));
    }

    .fm-cs-metal::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        linear-gradient(90deg, transparent 49.8%, rgba(255,255,255,.065) 50%, transparent 50.2%),
        linear-gradient(transparent 49.8%, rgba(255,255,255,.055) 50%, transparent 50.2%);
      background-size: 42px 42px;
      mask-image: linear-gradient(to bottom right, black, transparent 72%);
    }

    .fm-card .metal-orbit {
      position: absolute;
      top: -28px;
      right: -18px;
      width: 160px;
      height: 160px;
      border: 1px solid rgba(255,255,255,.13);
      border-radius: 50%;
    }

    .metal-orbit::before,
    .fm-card .metal-orbit::after {
      content: "";
      position: absolute;
      border: 1px solid rgba(255,255,255,.11);
      border-radius: 50%;
    }

    .metal-orbit::before { inset: 22px; }
    .metal-orbit::after { inset: 47px; background: rgba(255,255,255,.035); }

    .fm-card .metal-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 15px;
    }

    .fm-cs-metal .avatar {
      position: relative;
      z-index: 1;
      width: 74px;
      color: var(--a-deep);
      background: color-mix(in srgb, var(--a) 18%, white);
      border: 1px solid rgba(255,255,255,.72);
      box-shadow: 0 0 0 6px rgba(255,255,255,.055), 0 10px 25px rgba(0,0,0,.18);
      font-size: 26px;
    }

    .fm-card .metal-code {
      position: relative;
      z-index: 1;
      align-self: flex-start;
      color: rgba(255,255,255,.6);
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 8px;
      line-height: 1.7;
      letter-spacing: .12em;
      text-align: right;
    }

    .fm-cs-metal .name {
      margin-top: 28px;
      font-size: clamp(27px, 7.5vw, 31px);
      color: color-mix(in srgb, var(--a) 8%, white);
    }

    .fm-cs-metal .tagline {
      margin-top: 9px;
      max-width: 290px;
      color: rgba(255,255,255,.68);
    }

    .fm-cs-metal .cta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      margin-top: 21px;
      padding: 0 17px;
      border: 1px solid rgba(255,255,255,.25);
      color: white;
      background: rgba(255,255,255,.08);
      backdrop-filter: blur(8px);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .08em;
    }

    .fm-cs-metal .cta::after {
      content: "↗";
      color: color-mix(in srgb, var(--a) 20%, white);
      font-family: Georgia, serif;
      font-size: 18px;
    }

    .fm-cs-metal .cta:hover { background: rgba(255,255,255,.16); transform: translateY(-1px); }

    @media (max-width: 350px) {
      .phone-canvas { padding-inline: 14px; }
      .fm-cs-noir,
      .fm-cs-letterpress,
      .fm-cs-facet,
      .fm-cs-metal { padding-inline: 19px; }
      .fm-cs-noir::before { right: 19px; }
      .fm-cs-noir .avatar { width: 64px; }
      .editor-main { padding-right: 15px; padding-left: 35px; }
      .fm-cs-editorial .tagline,
      .fm-cs-facet .tagline,
      .fm-cs-ticket .tagline { font-size: 12px; }
      .facet-copy { width: 82%; }
      /* 跟著上面一起加一層，不然這條會輸給根規則、窄螢幕的欄寬不會生效 */
      .fm-card .fm-cs-ticket { grid-template-columns: minmax(0, 1fr) 58px; }
      .ticket-main { padding-inline: 16px; }
      .ticket-head { gap: 11px; }
      .fm-cs-ticket .avatar { width: 52px; }
      .fm-cs-ticket .name { font-size: 22px; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
    }