/*
 * 投跡 Folio 官網樣式。共用骨架在 /bluebox/bluebox.css，這裡只放主色與產品專屬元件（前綴 fo-）。
 * 主色取自 App icon：深藍紙頁 #16305E、綠色走勢點 #4ADE9C。
 * 主色只用在勾選、焦點、選取；模擬畫面用 App 深色模式的實際色值（FolioApp/Theme.swift）。
 */
:root {
  --bb-accent: #4ade9c;
  --bb-accent-ink: #121110;
  --bb-accent-soft: rgba(74, 222, 156, 0.16);

  /* 模擬畫面：App 深色模式（Theme.swift 的 dark） */
  --fo-bg: #18181b;
  --fo-fg: #fafafa;
  --fo-card: #27272a;
  --fo-muted: #3f3f46;
  --fo-muted-fg: #a1a1aa;
  --fo-border: rgba(255, 255, 255, 0.12);
  --fo-input: rgba(255, 255, 255, 0.16);
  --fo-pos: #34d399;
  --fo-neg: #f87171;
  --fo-blue: #60a5fa;
  --fo-warn: #fbbf24;
  /* 圖表（App 的 marketColors） */
  --fo-tw: #10b981;
  --fo-us: #3b82f6;
  --fo-crypto: #f59e0b;
  /* 市場先生的門（App 的 FolioColors） */
  --fo-wall: #c9d6ea;
  --fo-frame: #16305e;
  --fo-door: #2b4c8c;
  --fo-panel: #23407a;
  --fo-knob: #4ade9c;
}

/* ---------- 導覽列 ---------- */
.fo-nav-soon { white-space: nowrap; margin-left: auto; }

/* ---------- 首屏 ---------- */
.fo-hero { padding-block: clamp(24px, 4vw, 56px) clamp(56px, 6vw, 96px); overflow: clip; }
.fo-hero__grid {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(32px, 6vw, 96px);
}
.fo-hero__copy .bb-h1 { max-width: 12em; }
.fo-hero .bb-h1 .fo-line { display: inline-block; }
.fo-hero__sub {
  margin: var(--bb-space-4) 0 0; font-size: clamp(1.25rem, 2.1vw, 1.75rem); line-height: 1.3;
  font-weight: 600; color: var(--bb-text); text-wrap: balance;
}
.fo-hero__sub + .bb-lede { margin-top: var(--bb-space-3); }
/* 首屏的副標與說明只在標點處換行（不把「市場先生」拆成兩行）；每一段都比手機寬度短 */
:lang(zh) .fo-hero__sub, :lang(zh) .fo-hero .bb-lede { word-break: keep-all; }
.fo-hero__cta { display: flex; flex-wrap: wrap; gap: var(--bb-space-3); margin-top: var(--bb-space-6); }
.fo-badges { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--bb-space-2) var(--bb-space-5); margin-top: var(--bb-space-5); font-size: var(--bb-fs-small); font-weight: 600; color: var(--bb-text); }
.fo-badges li { display: inline-flex; align-items: center; gap: 6px; }
.fo-badges .fo-ico { width: 18px; height: 18px; color: var(--bb-accent); stroke-width: 2.4; }
.fo-hero__req { margin-top: var(--bb-space-4); }
.fo-hero__device { display: grid; justify-items: center; --phone-w: clamp(280px, 25vw, 350px); }
.fo-hero__device .bb-phone { --phone-w: inherit; }
@media (max-width: 960px) {
  .fo-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--bb-space-7); }
  .fo-hero__device { --phone-w: min(310px, calc(100vw - 2 * var(--bb-gutter))); }
}
@media (max-width: 520px) {
  .fo-hero .bb-h1 { font-size: 2.125rem; }
  .fo-hero .bb-lede { margin-top: var(--bb-space-4); font-size: 1.0625rem; }
  .fo-hero__cta { margin-top: var(--bb-space-5); }
  .fo-hero__cta .bb-btn { padding: 0 16px; }
}

/* ---------- 圖示 ---------- */
.fo-ico { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- 模擬畫面共用：以螢幕寬為單位，390 寬時 1 單位 = 1pt ---------- */
.fo-screen { container-type: inline-size; }
.fo-ui {
  --u: calc(100cqw / 390);
  position: absolute; inset: 0; overflow: hidden;
  background: var(--fo-bg); color: var(--fo-fg);
  font-size: calc(var(--u) * 15); line-height: 1.35;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
.fo-ui * { box-sizing: border-box; }
.fo-island { position: absolute; top: calc(var(--u) * 11); left: 50%; width: calc(var(--u) * 122); height: calc(var(--u) * 35); margin-left: calc(var(--u) * -61); border-radius: 999px; background: #000; z-index: 30; }
.fo-status { position: absolute; top: 0; left: 0; right: 0; height: calc(var(--u) * 54); padding: calc(var(--u) * 18) calc(var(--u) * 30) 0 calc(var(--u) * 46); display: flex; justify-content: space-between; font-size: calc(var(--u) * 16); font-weight: 600; z-index: 29; }
.fo-status__r { display: flex; gap: calc(var(--u) * 6); align-items: center; }
.fo-status__r i { display: block; width: calc(var(--u) * 17); height: calc(var(--u) * 11); border-radius: calc(var(--u) * 3); background: var(--fo-fg); }
.fo-status__r i + i { width: calc(var(--u) * 26); }
.fo-home { position: absolute; bottom: calc(var(--u) * 8); left: 50%; width: calc(var(--u) * 134); margin-left: calc(var(--u) * -67); height: calc(var(--u) * 5); border-radius: 999px; background: var(--fo-fg); z-index: 40; }
.fo-muted { color: var(--fo-muted-fg); }
.fo-pos { color: var(--fo-pos); }
.fo-neg { color: var(--fo-neg); }
.fo-warn { color: var(--fo-warn); }
.fo-small { font-size: calc(var(--u) * 12); line-height: 1.5; }
.fo-xs { font-size: calc(var(--u) * 11.5); }

/* 頁首右上角的玻璃按鈕（深淺色、設定） */
.fo-toolbar { position: absolute; top: calc(var(--u) * 58); right: calc(var(--u) * 16); display: flex; gap: calc(var(--u) * 18); padding: calc(var(--u) * 10) calc(var(--u) * 16); border-radius: 999px; background: rgba(60, 60, 64, 0.72); border: 1px solid rgba(255, 255, 255, 0.1); z-index: 5; }
.fo-toolbar .fo-ico { width: calc(var(--u) * 22); height: calc(var(--u) * 22); stroke-width: 1.8; }

/* 內容區 */
.fo-page { position: absolute; top: calc(var(--u) * 116); left: 0; right: 0; padding: 0 calc(var(--u) * 20); display: grid; gap: calc(var(--u) * 20); }
.fo-page--top { top: calc(var(--u) * 70); }
.fo-card { background: var(--fo-card); border: 1px solid var(--fo-border); border-radius: calc(var(--u) * 14); padding: calc(var(--u) * 16); }
.fo-label { font-size: calc(var(--u) * 13); color: var(--fo-muted-fg); display: flex; align-items: center; gap: calc(var(--u) * 8); }
.fo-label .fo-ico { width: calc(var(--u) * 17); height: calc(var(--u) * 17); }
.fo-total { font-size: calc(var(--u) * 38); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; margin-top: calc(var(--u) * 4); }
.fo-pnl { font-size: calc(var(--u) * 13); margin-top: calc(var(--u) * 4); }
.fo-between { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--u) * 10); }
.fo-chips { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 8); }
.fo-chip { border: 1px solid var(--fo-border); border-radius: 999px; padding: calc(var(--u) * 6) calc(var(--u) * 12); font-size: calc(var(--u) * 12); font-weight: 500; color: var(--fo-muted-fg); }
.fo-chip.on { border-color: var(--fo-fg); color: var(--fo-fg); }
.fo-sec { font-size: calc(var(--u) * 15); font-weight: 600; margin-bottom: calc(var(--u) * 4); }
.fo-value { font-size: calc(var(--u) * 15); font-weight: 600; margin-top: calc(var(--u) * 4); }
.fo-bars { display: grid; gap: calc(var(--u) * 10); }
.fo-bar { height: calc(var(--u) * 8); border-radius: 99px; background: var(--fo-muted); overflow: hidden; margin-top: calc(var(--u) * 5); }
.fo-bar i { display: block; height: 100%; border-radius: 99px; }
.fo-rows > div { min-height: calc(var(--u) * 64); display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--fo-border); font-size: calc(var(--u) * 14); font-weight: 500; }
.fo-rows > div:last-child { border-bottom: 0; }
.fo-rows .r { text-align: right; display: grid; gap: calc(var(--u) * 2); }

/* 分頁列（Liquid Glass） */
.fo-tabs { position: absolute; left: calc(var(--u) * 20); right: calc(var(--u) * 20); bottom: calc(var(--u) * 24); height: calc(var(--u) * 64); border-radius: 999px; background: rgba(50, 50, 54, 0.82); border: 1px solid rgba(255, 255, 255, 0.1); display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; padding: 0 calc(var(--u) * 4); z-index: 20; }
.fo-tab { display: grid; justify-items: center; gap: calc(var(--u) * 2); font-size: calc(var(--u) * 10); font-weight: 500; color: var(--fo-fg); position: relative; padding: calc(var(--u) * 7) 0; border-radius: 999px; }
.fo-tab.on { background: rgba(255, 255, 255, 0.1); }
.fo-tab .fo-ico { width: calc(var(--u) * 24); height: calc(var(--u) * 24); stroke-width: 1.8; }
.fo-tab__avatar { width: calc(var(--u) * 24); height: calc(var(--u) * 24); border-radius: 50%; opacity: 0.6; }
.fo-tab__dot { position: absolute; top: calc(var(--u) * 3); left: 56%; width: calc(var(--u) * 12); height: calc(var(--u) * 12); border-radius: 50%; background: var(--fo-neg); }

/* ---------- 市場先生的門（App 的 DoorView：牆、門框、門板、門把、腳踏墊；門後是他的頭像） ---------- */
.fo-door { --dw: 58; position: relative; width: calc(var(--u) * var(--dw)); aspect-ratio: 160 / 200; flex: none; --s: calc(var(--u) * var(--dw) / 160); }
.fo-door__wall { position: absolute; inset: 0; border-radius: calc(var(--s) * 20); background: var(--fo-wall); }
.fo-door__frame { position: absolute; left: calc(var(--s) * 34); top: calc(var(--s) * 22); width: calc(var(--s) * 92); height: calc(var(--s) * 166); border-radius: calc(var(--s) * 6); background: var(--fo-frame); }
.fo-door__mat { position: absolute; left: calc(var(--s) * 44); top: calc(var(--s) * 186); width: calc(var(--s) * 72); height: calc(var(--s) * 8); border-radius: 99px; background: var(--fo-knob); }
.fo-door__hole { position: absolute; left: calc(var(--s) * 42); top: calc(var(--s) * 30); width: calc(var(--s) * 76); height: calc(var(--s) * 154); background: var(--fo-frame); perspective: calc(var(--s) * 500); }
.fo-door__who { position: absolute; inset: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding-top: calc(var(--s) * 25); background: #dbe4f3; opacity: 0; transition: opacity 120ms; }
.fo-door__who img { width: 100%; aspect-ratio: 1; flex: none; }
.fo-door__who i { display: block; width: 66%; flex: 1; background: var(--fo-frame); }
.fo-door__panel { position: absolute; inset: calc(var(--s) * -1); background: var(--fo-door); border-radius: calc(var(--s) * 3); transform-origin: left center; transition: transform 480ms cubic-bezier(0.33, 1, 0.68, 1); }
.fo-door__panel::before, .fo-door__panel::after { content: ""; position: absolute; left: 13%; width: 74%; background: var(--fo-panel); border-radius: calc(var(--s) * 4); }
.fo-door__panel::before { top: 8%; height: 35%; }
.fo-door__panel::after { top: 51%; height: 41%; }
.fo-door__panel b { position: absolute; right: 10%; top: 50%; width: calc(var(--s) * 10); height: calc(var(--s) * 10); border-radius: 50%; background: var(--fo-knob); z-index: 1; }
.fo-door.is-knock .fo-door__panel { animation: fo-knock 0.4s linear; }
.fo-door.is-open .fo-door__panel { transform: rotateY(-78deg); }
.fo-door.is-open .fo-door__who { opacity: 1; }
@keyframes fo-knock {
  0%, 100% { translate: 0; }
  11% { translate: calc(var(--s) * -6); }
  25% { translate: calc(var(--s) * 6); }
  36%, 64% { translate: 0; }
  75% { translate: calc(var(--s) * -6); }
  89% { translate: calc(var(--s) * 6); }
}
.fo-mcard { display: flex; align-items: center; gap: calc(var(--u) * 14); padding: calc(var(--u) * 12) calc(var(--u) * 16); transition: opacity 160ms; }
.fo-mcard__text { flex: 1; min-width: 0; display: grid; gap: calc(var(--u) * 3); }
.fo-mcard__title { font-size: calc(var(--u) * 15); font-weight: 600; }
.fo-mcard > .fo-ico { width: calc(var(--u) * 14); height: calc(var(--u) * 14); color: var(--fo-muted-fg); }
.fo-mcard.is-press { opacity: 0.75; }

/* ---------- 對話（彈出的 sheet） ---------- */
.fo-sheet { position: absolute; left: 0; right: 0; top: calc(var(--u) * 60); bottom: 0; display: flex; flex-direction: column; background: var(--fo-bg); border-radius: calc(var(--u) * 34) calc(var(--u) * 34) 0 0; box-shadow: 0 -1px 0 var(--fo-border), 0 -20px 40px rgba(0, 0, 0, 0.35); z-index: 25; transform: translateY(105%); transition: transform 420ms cubic-bezier(0.32, 0.72, 0, 1); }
.fo-sheet.is-up { transform: translateY(0); }
.fo-sheet__bar { flex: none; height: calc(var(--u) * 64); display: grid; grid-template-columns: calc(var(--u) * 44) 1fr calc(var(--u) * 44); align-items: center; padding: 0 calc(var(--u) * 16); font-size: calc(var(--u) * 17); font-weight: 600; text-align: center; }
.fo-sheet__close { width: calc(var(--u) * 44); height: calc(var(--u) * 44); border-radius: 50%; background: rgba(60, 60, 64, 0.8); display: grid; place-items: center; }
.fo-sheet__close .fo-ico { width: calc(var(--u) * 18); height: calc(var(--u) * 18); stroke-width: 2.2; }
.fo-thread { flex: 1; min-height: 0; overflow: hidden; padding: calc(var(--u) * 4) calc(var(--u) * 16) calc(var(--u) * 16); display: flex; flex-direction: column; gap: calc(var(--u) * 10); }
.fo-date { text-align: center; font-size: calc(var(--u) * 12); font-weight: 500; color: var(--fo-muted-fg); margin-bottom: calc(var(--u) * 4); }
.fo-msg { display: flex; align-items: flex-end; gap: calc(var(--u) * 8); padding-right: calc(var(--u) * 40); }
.fo-msg--me { justify-content: flex-end; padding: 0 0 0 calc(var(--u) * 60); }
.fo-av { width: calc(var(--u) * 30); height: calc(var(--u) * 30); border-radius: 50%; flex: none; }
.fo-av--space { visibility: hidden; }
.fo-bubble { background: var(--fo-muted); border-radius: calc(var(--u) * 18) calc(var(--u) * 18) calc(var(--u) * 18) calc(var(--u) * 6); padding: calc(var(--u) * 10) calc(var(--u) * 14); font-size: calc(var(--u) * 15); line-height: 1.45; }
.fo-msg--me .fo-bubble { background: var(--fo-fg); color: var(--fo-bg); border-radius: calc(var(--u) * 18) calc(var(--u) * 18) calc(var(--u) * 6) calc(var(--u) * 18); }
.fo-bubble--card { background: var(--fo-card); border: 1px solid var(--fo-border); border-radius: calc(var(--u) * 18); padding: calc(var(--u) * 12) calc(var(--u) * 14); flex: 1; display: grid; gap: calc(var(--u) * 4); }
.fo-bubble--card b { font-weight: 500; font-size: calc(var(--u) * 12); color: var(--fo-muted-fg); }
.fo-typing { display: inline-flex; gap: calc(var(--u) * 5); padding: calc(var(--u) * 14); }
.fo-typing i { width: calc(var(--u) * 7); height: calc(var(--u) * 7); border-radius: 50%; background: var(--fo-muted-fg); animation: fo-dot 0.6s ease-in-out infinite alternate; }
.fo-typing i:nth-child(2) { animation-delay: 0.15s; }
.fo-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes fo-dot { from { opacity: 0.3; } to { opacity: 1; } }
.fo-dock { flex: none; padding: calc(var(--u) * 12) calc(var(--u) * 16) calc(var(--u) * 34); border-top: 1px solid var(--fo-border); background: var(--fo-bg); display: grid; gap: calc(var(--u) * 8); }
.fo-dock__row { display: flex; gap: calc(var(--u) * 8); }
.fo-choice { flex: 1; min-height: calc(var(--u) * 44); border: 1.5px solid var(--fo-fg); border-radius: 999px; display: grid; place-items: center; padding: 0 calc(var(--u) * 10); font-size: calc(var(--u) * 14); font-weight: 600; text-align: center; transition: background 160ms, color 160ms; }
.fo-choice.is-press { background: var(--fo-fg); color: var(--fo-bg); }

/* 首屏動畫：依時間出現的元素（JS 加 is-on）。沒有 JS 或 reduced-motion 時，標了 fo-rest 的那幾個照常顯示 */
.fo-anim .fo-step { display: none; }
.fo-anim .fo-step.is-on { display: flex; animation: fo-in 220ms ease-out; }
.fo-anim .fo-dock.fo-step.is-on { display: grid; }
.fo-anim .fo-step.is-on.fo-step--block { display: block; }
@keyframes fo-in { from { opacity: 0; translate: 0 calc(var(--u) * 10); } to { opacity: 1; translate: 0 0; } }

/* ---------- 功能列的模擬畫面 ---------- */
.fo-feat-h { font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem); }
.fo-fp { --phone-w: clamp(240px, 62cqw, 330px); width: 100%; display: grid; justify-items: center; }
.fo-fp .bb-phone { --phone-w: inherit; }
.fo-fp__crop {
  height: calc(var(--phone-w) * var(--crop, 1.5));
  display: flex; justify-content: center; align-items: flex-start; overflow: hidden;
  padding-inline: var(--bb-gutter); margin-inline: calc(-1 * var(--bb-gutter)); width: calc(100% + 2 * var(--bb-gutter));
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent);
  mask-image: linear-gradient(to bottom, #000 80%, transparent);
}
.fo-fp__cap { margin-top: var(--bb-space-3); text-align: center; font-size: var(--bb-fs-small); font-weight: 600; color: var(--bb-text-2); text-wrap: balance; }

/* 持倉：甜甜圈圖（比例照示範資料：台股 20.3%、美股 38.7%、加密 41.0%） */
.fo-seg { display: flex; background: rgba(118, 118, 128, 0.24); border-radius: calc(var(--u) * 9); padding: calc(var(--u) * 2); font-size: calc(var(--u) * 13); font-weight: 500; }
.fo-seg span { flex: 1; text-align: center; padding: calc(var(--u) * 6) 0; border-radius: calc(var(--u) * 7); }
.fo-seg span.on { background: #636366; }
.fo-donut { width: calc(var(--u) * 176); aspect-ratio: 1; border-radius: 50%; margin: 0 auto; display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--fo-tw) 0 20.3%, var(--fo-us) 0 59%, var(--fo-crypto) 0 100%); }
.fo-donut::before { content: ""; position: absolute; inset: calc(var(--u) * 22); border-radius: 50%; background: var(--fo-bg); }
.fo-donut span { position: relative; text-align: center; font-size: calc(var(--u) * 15); font-weight: 600; line-height: 1.3; }
.fo-donut small { display: block; font-size: calc(var(--u) * 11); font-weight: 400; color: var(--fo-muted-fg); }
.fo-legend { display: flex; justify-content: center; gap: calc(var(--u) * 14); font-size: calc(var(--u) * 11); margin-top: calc(var(--u) * 14); }
.fo-legend span { display: inline-flex; align-items: center; gap: calc(var(--u) * 5); }
.fo-legend i { width: calc(var(--u) * 8); height: calc(var(--u) * 8); border-radius: 50%; }
.fo-hcard { display: grid; gap: calc(var(--u) * 9); padding: calc(var(--u) * 15); font-size: calc(var(--u) * 11.5); }
.fo-hcard .sym { font-size: calc(var(--u) * 14); font-weight: 600; }
.fo-hcard .val { font-size: calc(var(--u) * 13); font-weight: 600; }
.fo-badge { display: inline-block; border: 1px solid var(--fo-border); border-radius: calc(var(--u) * 5); padding: calc(var(--u) * 2) calc(var(--u) * 6); font-size: calc(var(--u) * 10); color: var(--fo-muted-fg); margin-right: calc(var(--u) * 6); }
.fo-note { display: flex; align-items: center; gap: calc(var(--u) * 8); border-top: 1px solid var(--fo-border); padding-top: calc(var(--u) * 10); color: var(--fo-muted-fg); }
.fo-note img { width: calc(var(--u) * 22); height: calc(var(--u) * 22); border-radius: 50%; }

/* 推播：鎖定畫面上的通訊類通知（左邊是市場先生的頭像，App 圖示縮在右下角） */
.fo-lock { position: absolute; inset: 0; background: linear-gradient(170deg, #22324f 0%, #15203a 45%, #0e1424 100%); }
.fo-lock__time { position: absolute; top: calc(var(--u) * 92); left: 0; right: 0; text-align: center; }
.fo-lock__time small { display: block; font-size: calc(var(--u) * 19); font-weight: 600; opacity: 0.9; }
.fo-lock__time b { display: block; font-size: calc(var(--u) * 96); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; }
.fo-notif { position: absolute; left: calc(var(--u) * 12); right: calc(var(--u) * 12); top: calc(var(--u) * 330); display: flex; gap: calc(var(--u) * 12); align-items: flex-start; padding: calc(var(--u) * 14); border-radius: calc(var(--u) * 24); background: rgba(70, 76, 92, 0.62); border: 1px solid rgba(255, 255, 255, 0.08); }
.fo-notif--2 { top: calc(var(--u) * 438); opacity: 0.55; transform: scale(0.96); }
.fo-notif__av { position: relative; flex: none; width: calc(var(--u) * 40); height: calc(var(--u) * 40); }
.fo-notif__av img:first-child { width: 100%; height: 100%; border-radius: 50%; }
.fo-notif__av img:last-child { position: absolute; right: calc(var(--u) * -4); bottom: calc(var(--u) * -4); width: calc(var(--u) * 18); height: calc(var(--u) * 18); border-radius: calc(var(--u) * 5); }
.fo-notif__text { flex: 1; min-width: 0; font-size: calc(var(--u) * 15); line-height: 1.35; }
.fo-notif__text b { display: flex; justify-content: space-between; gap: calc(var(--u) * 8); font-weight: 600; }
.fo-notif__text b span { font-weight: 400; font-size: calc(var(--u) * 13); opacity: 0.7; flex: none; }

/* 比誰猜得準 */
.fo-pk { display: grid; gap: calc(var(--u) * 10); }
.fo-pk__score { display: flex; justify-content: space-between; align-items: center; }
.fo-pk__score b { display: block; font-size: calc(var(--u) * 26); font-weight: 700; }
.fo-thesis { display: grid; gap: calc(var(--u) * 4); padding: calc(var(--u) * 8) 0; font-size: calc(var(--u) * 14); }

/* ---------- 運作方式：一張畫面＋三個步驟 ---------- */
.fo-how { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.fo-how__media { container: bb-media / inline-size; }
@media (max-width: 860px) { .fo-how { grid-template-columns: minmax(0, 1fr); } .fo-how__media { order: 2; } }
.fo-form { display: grid; gap: calc(var(--u) * 18); }
.fo-field { display: grid; gap: calc(var(--u) * 8); font-size: calc(var(--u) * 13); font-weight: 500; }
.fo-field > div { min-height: calc(var(--u) * 46); border: 1px solid var(--fo-input); border-radius: calc(var(--u) * 10); padding: calc(var(--u) * 12) calc(var(--u) * 13); font-size: calc(var(--u) * 14); font-weight: 400; }
.fo-field > div.tall { min-height: calc(var(--u) * 70); }
.fo-field em { font-style: normal; color: var(--fo-muted-fg); }
.fo-navtitle { position: absolute; top: calc(var(--u) * 60); left: 0; right: 0; height: calc(var(--u) * 52); display: grid; grid-template-columns: calc(var(--u) * 44) 1fr calc(var(--u) * 44); align-items: center; padding: 0 calc(var(--u) * 16); font-size: calc(var(--u) * 17); font-weight: 600; text-align: center; }

/* ---------- 文件頁（隱私權、404） ---------- */
.fo-doc { max-width: calc(44rem + var(--bb-gutter) * 2); padding-block: clamp(40px, 6vw, 80px) var(--bb-space-9); }
.fo-doc h1 { font-size: var(--bb-fs-h2); line-height: var(--bb-lh-heading); letter-spacing: var(--bb-tracking-heading); }
.fo-doc h2 { margin-top: var(--bb-space-8); font-size: 1.375rem; line-height: var(--bb-lh-heading); }
.fo-doc p, .fo-doc li { color: var(--bb-text-2); }
.fo-doc p { margin-top: var(--bb-space-3); }
.fo-doc ul { margin-top: var(--bb-space-3); padding-left: 1.25em; display: grid; gap: var(--bb-space-2); }
.fo-doc li::marker { color: var(--bb-text-3); }
.fo-doc .fo-doc__meta { margin-top: var(--bb-space-4); font-size: var(--bb-fs-small); color: var(--bb-text-3); }
.fo-doc a { color: var(--bb-text); display: inline-block; padding-block: 12px; margin-block: -12px; overflow-wrap: anywhere; }
:lang(zh) .fo-doc li { overflow-wrap: anywhere; line-break: strict; }

.fo-trust-note { margin-top: var(--bb-space-6); }
.fo-trust-note a { color: var(--bb-text); display: inline-block; padding-block: 12px; margin-block: -12px; }

/* ---------- 動態與無障礙 ---------- */
@media (prefers-reduced-motion: reduce) {
  .fo-door__panel, .fo-sheet, .fo-choice, .fo-door__who, .fo-mcard { transition: none; }
  .fo-door.is-knock .fo-door__panel, .fo-typing i, .fo-anim .fo-step.is-on { animation: none; }
}