/* CREW — 設計語言對齊 okara.ai(老闆指定:「跟我寄給你那個 reels 一樣的架構跟顏色」)。
 *
 * 2026-08-20 第三輪。老闆:「我不要看到格子,整個 set up 都很像 AI,他們廣告裡很專業很精緻」。
 * ⇒ 回去把那支 reel 的影格【逐張重看】,結論是:他們的精緻感來源不是背景裝飾,是三件事——
 *   ① 背景【什麼都沒有】:純 #FAFAF9,零格線零漸層零顆粒。裝飾越多越像 AI。
 *   ② 每一個鏡頭都是【真的產品 UI 在飄】:對話面板、campaign brief 卡、influencer 名單、
 *      Reddit 討論串、文章編輯器 —— 全是實際畫面,不是抽象色塊。
 *   ③ 每個 agent 配【該平台真正的彩色 logo】(Reddit 橘 / X 黑 / LinkedIn 藍 / Google 四色)。
 *      我原本用 ◎◈✎◇◉▲ 這種幾何 unicode 符號 —— 那正是 AI 產出的頭號 tell。
 *
 * 版面 token 是從活站 computed style 量的,不是想的:
 *   底 #FAFAF9 · 卡片 #FFF · 墨 #1A1919 · 次要 #726A5A · 細邊框 #E4DDCD(265 次,是他們的分隔語言)
 *   陰影:量到的 box-shadow 幾乎【全是 none】—— 他們用邊框分隔,不用陰影。
 *   圓角:藥丸 9999px(178 次)/ 卡片 12px / 小 8px / 極小 4px
 *   字體:標題 Sora 600 · 內文 DM Sans · 資料 JetBrains Mono
 *
 * ⚠️ 字體這件事要講清楚:老闆說「字體很像 AI」時我換成 Bricolage Grotesque,
 * 但量出來 okara 用的【就是 Sora + DM Sans】。他說 okara 精緻、說我像 AI,
 * 而我們用同一套字 ⇒ 問題從來不在字體,在上面那三件事。既然指令是「跟他們一樣」,
 * 字體就照他們的來,把力氣花在真正造成差距的地方。
 * ⚠️ 客戶 logo 跑馬燈【不照抄】:我們沒有客戶,放上去是假見證。
 */

:root {
  --bg:        #FAFAF9;   /* okara 實測值。不加暖、不加格線 —— 乾淨本身就是版面 */
  --surface:   #FFFFFF;
  --warm:      #F3F0EC;
  --warm-2:    #F5F5F4;
  --ink:       #1A1919;
  --ink-2:     #3B3835;
  --muted:     #726A5A;
  --line:      #E4DDCD;   /* okara 全站出現 265 次的暖沙細線 = 他們的分隔語言 */
  --line-2:    #D8CFBA;
  --dark:      #1A1919;
  --on-dark:   #FAFAF9;

  --miss:      #C2453A;
  --miss-soft: rgba(194, 69, 58, 0.09);
  --hit:       #3F7A55;
  --accent:    #726A5A;

  --font-display: "Sora", "Noto Sans TC", system-ui, sans-serif;
  --font-body:    "DM Sans", "Noto Sans TC", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;

  --r-pill: 9999px;
  --r-card: 12px;
  --r-sm:   8px;

  --container: 1180px;
  --pad: clamp(20px, 5vw, 48px);
  --sec: clamp(72px, 9vw, 130px);

  --dur: 160ms;
  --ease: cubic-bezier(.23, 1, .32, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: 16px; line-height: 1.62;
  -webkit-font-smoothing: antialiased; text-autospace: normal;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
[hidden] { display: none !important; }

.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; color: var(--ink); }

/* 背景 —— 老闆:「我不要看到格子」。
   格線 / 光暈 / 顆粒全部移除。okara 的底就是一片 #FAFAF9,什麼都沒有。
   ⚠️ 別再把裝飾加回來:前兩輪就是靠加裝飾想補救,結果越補越像 AI。
   版面的層次由「白卡片 + 暖沙細線 + 真實產品截圖」給,不是由背景給。 */

/* ⚠️ 2026-08-20 回補：上一次「刪掉格線背景」時,我砍的區間從 gridbg 一路吃到 .hero,
   把導覽列與所有按鈕的樣式(.topbar/.brandmark/.mark/.topnav/.ghost/.pill-dark)一起帶走了。
   頁面因此頂著一條瀏覽器預設的裸工具列,而我的驗收只查了溢出/console/opacity,
   從來沒有一條在問「這個元素到底有沒有被套到樣式」⇒ 全綠但版面是壞的。已補斷言。 */
.topbar { border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 30; }
.topbar .inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 72px; }
.brandmark { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display);
  font-weight: 600; font-size: 20px; color: var(--ink); text-decoration: none; letter-spacing: -.015em; }
.mark { width: 30px; height: 30px; border-radius: 8px; background: var(--dark); color: var(--on-dark);
  display: grid; place-items: center; font-family: var(--font-mono); font-size: 13px; line-height: 1; }
.topnav { display: flex; align-items: center; gap: 8px; }
.ghost {
  background: none; border: 1px solid transparent; color: var(--muted); font-family: var(--font-body);
  font-size: 14px; padding: 8px 13px; border-radius: var(--r-pill); cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.ghost:hover { color: var(--ink); background: var(--warm); }
.ghost[aria-pressed="true"] { color: var(--ink); background: var(--warm); }
.pill-dark {
  background: var(--dark); color: var(--on-dark); border: 0; border-radius: var(--r-pill);
  font-family: var(--font-body); font-size: 14.5px; font-weight: 500; padding: 11px 20px;
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 7px;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.pill-dark:hover { opacity: .88; }
.pill-dark:active { transform: scale(.98); }
.pill-dark[disabled] { opacity: .4; cursor: not-allowed; }
.btn-solid { background: var(--dark); color: var(--on-dark); border: 0; border-radius: var(--r-pill);
  font: inherit; font-size: 14.5px; padding: 11px 20px; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px; }
.btn-solid:hover { opacity: .88; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.hero { padding: clamp(48px, 7vw, 92px) 0 clamp(36px, 5vw, 64px); text-align: center; }
.announce {
  display: inline-flex; align-items: center; gap: 9px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: 6px 15px 6px 7px;
  font-size: 13px; color: var(--muted); margin-bottom: 26px;
}
.announce .tagx { background: var(--warm); color: var(--ink); border-radius: var(--r-pill);
  font-size: 11px; padding: 3px 10px; font-family: var(--font-mono); }
.hero h1 {
  font-size: clamp(36px, 2rem + 2.8vw, 64px); line-height: 1.04; letter-spacing: -.035em;
  font-variation-settings: "opsz" 72; font-weight: 700;
  margin: 0 auto 16px; max-width: 19ch; text-wrap: balance;
}
.hero .deck { font-size: clamp(16px, 15px + .3vw, 19px); color: var(--muted);
  max-width: 56ch; margin: 0 auto 34px; }

/* 藥丸輸入框、按鈕嵌在裡面 —— okara 最有辨識度的元件 */
.order { max-width: 580px; margin: 0 auto; }
.order form {
  display: flex; align-items: center; gap: 6px; background: var(--surface);
  border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 6px 6px 6px 10px;
  transition: border-color var(--dur) var(--ease);
}
.order form:focus-within { border-color: var(--ink); }
.order input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none; color: var(--ink);
  font-family: var(--font-body); font-size: 16px; padding: 12px 10px;
}
.order input::placeholder { color: var(--muted); opacity: .75; }
.order .note { margin: 14px 0 0; font-size: 13px; color: var(--muted); }
.order .err { margin: 10px 0 0; font-size: 14px; color: var(--miss); min-height: 1.2em; }

/* 席位磚列 */
.tiles { margin-top: 48px; }
.tiles .cap { font-size: 13px; color: var(--muted); margin-bottom: 16px; }
.tilerow { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.tile { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.tile .ic { display: grid; place-items: center; width: 52px; height: 52px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 13px;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.tile:hover .ic { border-color: var(--line-2); transform: translateY(-2px); }
.tile .nm { font-size: 12px; color: var(--muted); }

/* 誠實跑馬燈:真實掃描中 AI 引用過的網域(不是客戶 logo) */
.marquee { margin-top: 54px; overflow: hidden; }
.marquee .cap { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.track { display: flex; gap: 10px; width: max-content; animation: slide 46s linear infinite; }
.track.b { animation-duration: 61s; animation-direction: reverse; margin-top: 10px; }
@keyframes slide { to { transform: translateX(-50%); } }
.chip { display: inline-flex; align-items: center; gap: 8px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: 8px 15px;
  font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.marquee:hover .track { animation-play-state: paused; }

/* ── Step 區塊 ─────────────────────────────────── */
section.step, section.band { padding: var(--sec) 0; border-top: 1px solid var(--line); }
section.band.tight { padding: clamp(44px, 6vw, 76px) 0; }
.steppill { display: inline-block; background: var(--warm); color: var(--ink-2);
  border-radius: var(--r-pill); padding: 7px 16px; font-size: 13px; margin-bottom: 22px; }
section.step h2, section.band > h2 {
  font-size: clamp(29px, 1.6rem + 2.1vw, 46px); line-height: 1.1; letter-spacing: -.03em;
  font-variation-settings: "opsz" 48; font-weight: 700;
  margin: 0 0 16px; max-width: 21ch; text-wrap: balance;
}
section.step .sub, section.band .sub { color: var(--muted); max-width: 62ch; margin: 0 0 40px; }
.duo { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
@media (min-width: 940px) { .duo { grid-template-columns: 1fr 1fr; gap: 64px; } }
.eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted); }

/* 白卡 —— okara 的主要容器語言 */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.card .ch { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 18px; border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); }
.card .cb { padding: 20px 18px 22px; }
.card .cf { border-top: 1px solid var(--line); padding: 11px 18px;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }

/* hero 卡:真實量測重播 */
.scope .cb { min-height: 316px; }
.scope .q { font-family: var(--font-display); font-size: 18px; color: var(--ink);
  line-height: 1.4; margin: 0 0 16px; font-weight: 600; min-height: 2.6em; text-align: left; }
.scope ul { list-style: none; margin: 0; padding: 0; }
.scope li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-family: var(--font-mono); font-size: 13px; color: var(--ink-2);
  padding: 10px 0; border-bottom: 1px solid var(--line); text-align: left;
  opacity: 0; transform: translateY(5px);
  transition: opacity 260ms var(--ease), transform 260ms var(--ease); }
.scope li.in { opacity: 1; transform: none; }
.scope li .tag { color: var(--muted); font-size: 11px; }
.scope .verdict-box {
  margin-top: 18px; display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--miss); background: var(--miss-soft); color: var(--miss);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  padding: 11px 14px; border-radius: var(--r-sm); opacity: 0; transition: opacity 260ms var(--ease);
}
.scope .verdict-box.in { opacity: 1; }

/* ── 帳本 ──────────────────────────────────────── */
.ledger { border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 48px 1fr; border-bottom: 1px solid var(--line); align-items: start; }
.row .num { font-family: var(--font-mono); font-size: 12px; color: var(--muted); padding: 22px 0; }
.row .body { padding: 22px 0; min-width: 0; }
.row .q { font-family: var(--font-display); font-size: 18px; font-weight: 600;
  color: var(--ink); line-height: 1.4; margin: 0 0 10px; }
.verdict { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: .07em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--r-pill);
  border: 1px solid currentColor; }
.verdict.miss { color: var(--miss); background: var(--miss-soft); }
.verdict.hit { color: var(--hit); background: rgba(63,122,85,.08); }
.verdict.dim { color: var(--muted); background: var(--warm); }
.engines { margin-top: 16px; display: flex; flex-direction: column; gap: 14px; }
.eng { background: var(--warm-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.eng-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.eng-n { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); }
.srcs { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.srcs li { display: grid; grid-template-columns: minmax(0, 190px) 1fr; gap: 12px; font-size: 13px; }
.srcs .d { font-family: var(--font-mono); color: var(--ink-2); }
.srcs a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.srcs a:hover { color: var(--ink); border-color: var(--ink); }

.steps { list-style: none; margin: 30px auto 0; padding: 0; max-width: 580px;
  border-top: 1px solid var(--line); text-align: left; }
.steps li { display: grid; grid-template-columns: 20px 1fr auto; gap: 12px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.steps li[data-state="done"], .steps li[data-state="active"] { color: var(--ink); }
.steps li[data-state="active"] .mark::after { content: "▸"; }
.steps li[data-state="done"] .mark::after { content: "✓"; color: var(--hit); }
.steps li[data-state="todo"] .mark::after { content: "·"; }

/* ── brief / seats / plans / cost ──────────────── */
.brief { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 26px 32px; }
.brief .k { margin-bottom: 10px; }
.brief .v { font-size: 14.5px; color: var(--ink-2); }
.brief ul { margin: 0; padding-left: 17px; }

.crew { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px; }
.seat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 22px; }
.seat .h { display: flex; align-items: center; gap: 11px; }
.seat .h .lg { display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  background: var(--warm-2); border: 1px solid var(--line); border-radius: 9px; }
.seat .h .lg svg { width: 18px; height: 18px; }
.seat .h .g { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.seat .h .n { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--ink); }
.seat .c { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin: 4px 0 0; }
.seat p { font-size: 14.5px; color: var(--muted); margin: 10px 0 0; }
.seat ol { margin: 12px 0 0; padding-left: 18px; }
.seat li { font-size: 14px; color: var(--ink-2); margin: 8px 0; }
.seat li b { display: block; color: var(--ink); font-weight: 600; font-family: var(--font-display); }

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px; }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 28px 26px; display: flex; flex-direction: column; gap: 10px; }
.plan.feature { background: var(--dark); border-color: var(--dark); }
.plan.feature .n { color: var(--on-dark); }
.plan.feature .p { color: rgba(250,250,249,.72); }
.plan.feature li { color: rgba(250,250,249,.84); }
.plan .n { font-family: var(--font-display); font-size: 21px; font-weight: 600; }
.plan .p { font-family: var(--font-mono); font-size: 17px; color: var(--muted); }
.plan ul { margin: 8px 0 0; padding-left: 17px; }
.plan li { font-size: 14px; color: var(--ink-2); margin: 7px 0; }

.cost { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.costscroll { overflow-x: auto; }
.cost table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 14.5px; }
.cost th, .cost td { text-align: left; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.cost th { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); font-weight: 400; background: var(--warm-2); }
.cost td.who { font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.cost td.mine { color: var(--hit); font-family: var(--font-mono); }
.cost tr:last-child td { border-bottom: 0; }

/* ── 表單 / 帳戶 ───────────────────────────────── */
.field { display: flex; align-items: center; gap: 6px; background: var(--surface);
  border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 5px 5px 5px 10px; max-width: 560px; }
.field:focus-within { border-color: var(--ink); }
.field input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  color: var(--ink); font-size: 15px; padding: 10px 8px; }
.field input::placeholder { color: var(--muted); opacity: .75; }
.linkish { background: none; border: 0; padding: 0; color: var(--ink); cursor: pointer;
  font-size: 14px; border-bottom: 1px solid var(--line-2); }
.linkish:hover { border-color: var(--ink); }
.btn-solid { background: var(--dark); color: var(--on-dark); border: 0; border-radius: var(--r-pill);
  font-size: 14px; font-weight: 500; padding: 11px 18px; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px; }
.btn-solid:hover { opacity: .88; }
.btn-solid[disabled] { opacity: .4; cursor: not-allowed; }
.hint { font-size: 14px; color: var(--muted); max-width: 66ch; }
.k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); padding-bottom: 7px; border-bottom: 1px solid var(--line); }
.sec { font-family: var(--font-mono); font-weight: 400; font-size: 11px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 20px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line); }
.acct-head { display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap;
  border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 22px; font-size: 14px; }
.split2 { display: grid; grid-template-columns: 1fr; gap: 30px; }
@media (min-width: 860px) { .split2 { grid-template-columns: 1.15fr .85fr; gap: 56px; } }
.tracklist { list-style: none; margin: 12px 0 0; padding: 0; }
.tracklist li { font-family: var(--font-mono); font-size: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); }
#hist .hrow { border-bottom: 1px solid var(--line); padding: 12px 0; }
#hist .hrow .d { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
#hist .hrow .q { font-size: 14px; margin: 4px 0 0; }

/* 起草的一頁 */
.draftbar { margin-top: 14px; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.draft { margin: 14px 0 0; padding: 22px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-card); }
.draft .dmeta { font-family: var(--font-display); font-size: 18px; font-weight: 600;
  color: var(--ink); line-height: 1.35; margin-bottom: 5px; }
.draft .dmeta2 { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); margin: 0 0 16px; }
.draft .lede { font-size: 15.5px; color: var(--ink); margin: 0 0 14px; }
.draft h4 { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--ink); margin: 20px 0 6px; }
.draft p { font-size: 14.5px; color: var(--ink-2); margin: 0 0 10px; }
.draft .opnote { font-size: 13px; color: var(--muted); border-top: 1px solid var(--line);
  padding-top: 12px; margin-top: 16px; }

footer.site { border-top: 1px solid var(--line); padding: 40px 0 72px; font-size: 13px; color: var(--muted); }
footer.site p { margin: 5px 0; }

/* 動畫不准把內容藏起來:只有 JS 接手時才隱藏,且有兜底 */
.reveal { opacity: 1; }
.js .reveal { opacity: 0; transform: translateY(12px); }
.js .reveal.in { opacity: 1; transform: none; transition: opacity 480ms var(--ease), transform 480ms var(--ease); }

@media (max-width: 640px) {
  .row { grid-template-columns: 34px 1fr; }
  .srcs li { grid-template-columns: 1fr; gap: 1px; }
  .tile { width: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .track { animation: none; }
  .js .reveal, .js .reveal.in, .scope li, .scope .verdict-box {
    transition: none !important; opacity: 1 !important; transform: none !important; }
}


/* ── reel 逐格重看後補上的兩個裝置 ────────────────────────────────────
   ① 兩色陳述句:okara 每個轉場都是一句大字,前半墨色、尾字灰 ——
      「Everything a marketing team does, handled for you.」
      這是他們最省力也最有辨識度的排版動作,而且不需要任何背景裝飾。
   ② 真實產品截圖飄浮:他們每一個鏡頭都是實際 app 畫面疊在白底上。
      我們用【自己報告頁的真截圖】,不是抽象色塊,也不是 stock。 */

.stmt {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(26px, 1.2rem + 2.4vw, 46px); line-height: 1.14; letter-spacing: -.03em;
  color: var(--ink); max-width: 20ch; text-wrap: balance; margin: 0 0 18px;
}
.stmt .fade { color: var(--muted); }

/* 產品截圖:白卡 + 暖沙細線 + 頂端假視窗列(和報告頁真的長一樣) */
.shot { border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden;
  background: var(--surface); }
.shot .bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px;
  border-bottom: 1px solid var(--line); background: var(--warm-2); }
.shot .bar i { width: 9px; height: 9px; border-radius: 50%; background: #DCD5C4; display: block; }
.shot .bar .u { margin-left: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.shot img { width: 100%; height: auto; display: block; }
/* 只露出截圖上緣一段,像鏡頭切過去 —— 完整長圖塞進版面反而變成截圖牆 */
.shot.crop { max-height: 340px; }
.shot.crop img { object-fit: cover; object-position: top; }

/* 疊放:第二張稍微偏移,做出 reel 裡那種桌面拼貼感。不用陰影,用細線分層。 */
.stack { position: relative; }
.stack .shot + .shot { position: absolute; right: -18px; bottom: -26px; width: 62%;
  max-height: 210px; }
@media (max-width: 900px) {
  .stack .shot + .shot { position: static; width: 100%; margin-top: 14px; }
}

/* ── 逐格看 okara 段落節奏後補的四個裝置 ──────────────────────────────
   (前一輪只搬了顏色與字,沒搬「段落怎麼接」——那才是它讀起來像一份東西的原因) */

/* ① Hero 主視覺托盤:一張大的真產品截圖,被一圈暖色托盤框住。
      這是「這是真的產品不是 landing page」最強的訊號,我原本完全沒有。 */
.tray { margin: 56px 0 0; padding: clamp(10px, 1.4vw, 18px); background: var(--warm);
  border: 1px solid var(--line); border-radius: 20px; }
.tray .shot { border-radius: 13px; }
.tray .shot img { max-height: 560px; object-fit: cover; object-position: top; }

/* ② 段落之間的箭頭接點:細線往下 + 箭頭,把 Step 1→2→3 串成一條動線。
      沒有它,三個 section 只是三塊各自為政的內容。 */
.connect { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 8px 0 0; }
.connect .ln { width: 1px; height: 56px; background: linear-gradient(var(--line), var(--line-2)); }
.connect .ar { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 7px solid var(--line-2); margin-top: -1px; }

/* ③ 交接卡:置中小卡,說明「每個席位動工前都先讀同一份簡報」,
      底下是那份簡報【真正的欄位名】(不是我編的檔名)。 */
.handoff { max-width: 560px; margin: 0 auto; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-card); padding: 26px 24px; text-align: center; }
.handoff .eyebrow { display: block; margin-bottom: 10px; }
.handoff p { margin: 0 0 16px; font-family: var(--font-display); font-weight: 600;
  font-size: 17px; color: var(--ink); }
.handoff .files { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.handoff .files span { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted);
  background: var(--warm-2); border: 1px solid var(--line); border-radius: 6px; padding: 5px 10px; }

/* ④ 置中段落頭:Step 2/3 的 pill + 標題 + 導言置中(okara 就是這樣分節)。
      Step 1 維持左右對照,節奏才不會三段一模一樣。 */
section.step.mid { text-align: center; }
section.step.mid h2, section.step.mid .sub, section.step.mid .stmt { margin-left: auto; margin-right: auto; }
section.step.mid .sub { max-width: 56ch; }
section.step.mid .crew, section.step.mid .shot { text-align: left; }

/* 席位卡右上角的淡格紋 —— okara 每張 agent 卡都有,是它們的卡片質地。
   注意:這是【卡片內的小面積質地】,不是我先前被打槍的整頁背景格線。 */
.seat { position: relative; overflow: hidden; }
.seat::after {
  content: ""; position: absolute; top: 0; right: 0; width: 84px; height: 62px; pointer-events: none;
  background-image:
    linear-gradient(rgba(114,106,90,.07), rgba(114,106,90,.07)),
    linear-gradient(rgba(114,106,90,.05), rgba(114,106,90,.05));
  background-size: 26px 26px, 26px 26px;
  background-position: 32px 0, 0 26px;
  background-repeat: no-repeat;
}
.seat > * { position: relative; }

/* 真正的頁尾(原本只有兩行小字) */
footer.site .cols { display: grid; gap: 26px; grid-template-columns: 1fr; margin-bottom: 30px; }
@media (min-width: 760px) { footer.site .cols { grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; } }
footer.site .cols h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 12px; font-weight: 400; }
footer.site .cols a { display: block; color: var(--ink-2); text-decoration: none; margin: 7px 0;
  font-size: 14px; }
footer.site .cols a:hover { text-decoration: underline; text-underline-offset: 3px; }
footer.site .lede { font-family: var(--font-display); font-weight: 600; font-size: 17px;
  color: var(--ink); margin: 0 0 10px; max-width: 30ch; }
footer.site .fine { border-top: 1px solid var(--line); padding-top: 22px; }

/* 390px:回補後的導覽列變寬了 18px 溢出。真因是 .topnav 四個項目擠不下,
   不是「頁面有東西太寬」⇒ 收掉導覽列的 CTA(hero 正下方就是同一個表單,不會少一條路),
   語言鈕縮排。絕不用 body{overflow-x:hidden} 遮症狀。 */
@media (max-width: 560px) {
  .topbar .inner { height: 62px; gap: 10px; }
  .topbar .pill-dark { display: none; }
  .topnav { gap: 2px; }
  .topnav .ghost { padding: 7px 9px; font-size: 13px; }
  .brandmark { font-size: 18px; }
  .tray { margin-top: 40px; border-radius: 16px; }
  .handoff { padding: 22px 18px; }
}

/* 幣別切換(台幣 / 美金兩軌) */
.trackswitch { display: inline-flex; gap: 2px; background: var(--warm); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 3px; margin: 6px 0 4px; }
.trackswitch button { background: none; border: 0; border-radius: var(--r-pill); cursor: pointer;
  font: inherit; font-size: 13px; color: var(--muted); padding: 7px 15px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.trackswitch button[aria-pressed="true"] { background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); }

/* ── 成品(每一席真的交出來的東西)────────────────────────────────
   一種成品一種形狀:推文串 / 可貼程式碼 / 前後對照 / 信件序列 / 分鏡表。
   用同一個模板套全部會把成品壓成散文,那就退回「建議」了。 */
.mkbar { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; }
.mk-btn[disabled] { opacity: .45; cursor: not-allowed; }
.mk-out:not(:empty) { margin: 12px 0 4px; }
.seat ol > li { margin-bottom: 18px; }

.pastebox { white-space: pre-wrap; background: var(--warm-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 13px 15px; font-size: 14px; line-height: 1.7; margin: 8px 0; }
.codeout { background: #1A1919; color: #E9E5DC; border-radius: var(--r-sm); padding: 14px 16px;
  overflow-x: auto; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.65; margin: 10px 0; }
.codeout code { white-space: pre; }

.tweets { list-style: none; margin: 8px 0; padding: 0; counter-reset: tw; }
.tweets li { position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 12px 54px 12px 14px; margin: 8px 0; font-size: 14.5px;
  line-height: 1.65; white-space: pre-wrap; }
.tweets .cc { position: absolute; top: 10px; right: 12px; font-size: 11px; color: var(--muted); }

.discl { font-size: 13px; color: var(--muted); border-left: 2px solid var(--line-2);
  padding-left: 11px; margin: 8px 0; }

.faq { margin: 12px 0 0; }
.faq dt { font-weight: 600; font-family: var(--font-display); margin-top: 12px; }
.faq dd { margin: 5px 0 0; color: var(--ink-2); font-size: 14.5px; }

.ba { display: grid; gap: 12px; margin: 8px 0; }
@media (min-width: 720px) { .ba { grid-template-columns: 1fr 1fr; } }
.ba > div { background: var(--warm-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; }
.ba > div:last-child { background: var(--surface); border-color: var(--ink); }
.ba span.mono { font-size: 10.5px; letter-spacing: .1em; color: var(--muted); }
.ba p { margin: 6px 0 0; font-size: 14.5px; }

.mail { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
.mail span.mono { font-size: 11px; color: var(--muted); margin-right: 8px; }
.adv { border-top: 1px solid var(--line); padding-top: 11px; margin-top: 11px; }
.adv span.mono { font-size: 11px; color: var(--muted); }
.adv b { display: block; font-family: var(--font-display); margin: 3px 0; }

.shots { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13.5px; }
.shots td { border-top: 1px solid var(--line); padding: 9px 10px 9px 0; vertical-align: top; }
.shots td.mono { color: var(--muted); font-size: 11.5px; white-space: nowrap; }

.md { white-space: pre-wrap; font-size: 15px; line-height: 1.8; color: var(--ink-2); margin-top: 10px; }

/* 合規旗標:放在成品旁邊,顏色要看得見但不要像系統錯誤 */
.cflag { border: 1px solid var(--miss); background: var(--miss-soft); border-radius: var(--r-sm);
  padding: 12px 14px; margin: 14px 0 0; }
.cflag b { font-family: var(--font-display); font-size: 14px; color: var(--miss); }
.cflag ul { margin: 8px 0 0; padding-left: 18px; }
.cflag li { font-size: 13.5px; color: var(--ink-2); margin: 5px 0; }
.cflag .mono { background: var(--surface); border: 1px solid var(--line); border-radius: 4px;
  padding: 1px 6px; font-size: 12px; }
.cflag .fkind { font-size: 11.5px; color: var(--muted); font-style: italic; margin: 0 4px; }

/* 目的地連線 */
.connlist { display: grid; gap: 8px; margin-bottom: 14px; }
.connrow { display: flex; align-items: center; gap: 12px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 11px 14px; flex-wrap: wrap; }
.connrow .kind { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); }
.connrow .lb { font-weight: 500; }
.connrow .hint { margin-left: auto; }
.connform { display: grid; gap: 10px; max-width: 560px; }
.connform select, .connform input { background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-pill); color: var(--ink); padding: 11px 16px; outline: none; font: inherit; }
.connform #conn-fields { display: grid; gap: 8px; }
.connform button { justify-self: start; }
.pubbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px;
  border-top: 1px solid var(--line); padding-top: 12px; }
.pubbar select { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 7px 12px; font: inherit; font-size: 13px; color: var(--ink); }
.pubprev { background: var(--warm-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 12px 14px; margin-top: 10px; font-family: var(--font-mono); font-size: 12px;
  white-space: pre-wrap; overflow-x: auto; color: var(--ink-2); }

/* 確認簡報的閘門 —— 這是整條鏈上唯一能攔住錯誤的位置,版面要讓人真的想讀它 */
#gate .gateform { display: grid; gap: 10px; max-width: 720px; margin-bottom: 26px; }
.gaterow { display: grid; gap: 5px; }
.gaterow span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); }
.gaterow input, #gate-queries { background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); color: var(--ink); padding: 11px 14px; outline: none; font: inherit;
  font-size: 15px; width: 100%; }
.gaterow input:focus, #gate-queries:focus { border-color: var(--ink); }
#gate .gateq { max-width: 720px; margin-bottom: 26px; }
#gate-queries { font-family: var(--font-mono); font-size: 13.5px; line-height: 1.7; resize: vertical; }

/* 「打贏這一題」的版面 —— 順序是刻意的:
   先看我們讀了什麼(證據)→ 再看對手憑什麼(分析)→ 再看逐項對照(主張)
   → 最後是誠實欄位(不知道什麼、還缺什麼)。主張放在證據後面,不放前面。 */
.draft.beat { padding-top: 4px; }
.beatsec { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 18px; }
.beatsec:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.beath { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); font-weight: 400; margin: 0 0 12px; }
.fetched { list-style: none; margin: 0; padding: 0; }
.fetched li { display: flex; align-items: baseline; gap: 9px; font-size: 14px; margin: 6px 0; flex-wrap: wrap; }
.fetched .mono { color: var(--muted); }
.rival { border-left: 2px solid var(--line-2); padding-left: 14px; margin: 14px 0; }
.rival p { margin: 6px 0; font-size: 14.5px; color: var(--ink-2); }
table.score { width: 100%; border-collapse: collapse; font-size: 14px; }
table.score th { text-align: left; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 400;
  padding: 0 14px 8px 0; border-bottom: 1px solid var(--line); }
table.score td { padding: 11px 14px 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
table.score td.dim { font-weight: 600; font-family: var(--font-display); white-space: nowrap; }
table.score td.them { color: var(--muted); }
table.score td.us { color: var(--ink); }
.beatsec.honest { background: var(--warm-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 16px 18px; }
.beatsec.honest ul { margin: 0 0 12px; padding-left: 18px; }
.beatsec.honest li { font-size: 14px; color: var(--ink-2); margin: 5px 0; }
.draftbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }