/* =============================================================
   Source of truth for your design office — stylesheet
   Tokens are copied verbatim from design-spec.md §1. Do not
   introduce colour / size / spacing values outside these tokens.
   ============================================================= */

/* ---------- self-hosted fonts (GDPR: no Google Fonts CDN) ----------
   Charis SIL ships here as two static instances (Regular + Bold).
   Open Sans and Source Sans 3 are variable (100–900).
   Italic serif is synthesised by the browser — no italic file exists. */
@font-face{
  font-family:'Charis SIL'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/charis-sil-regular.woff2') format('woff2');
}
@font-face{
  font-family:'Charis SIL'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/charis-sil-bold.woff2') format('woff2');
}
@font-face{
  font-family:'Open Sans'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('fonts/open-sans-var.woff2') format('woff2');
}
@font-face{
  font-family:'Source Sans 3'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('fonts/source-sans-3-var.woff2') format('woff2');
}

:root{
  /* ---------- colour ---------- */
  --ground:#F5F1E8;        /* 頁面底色 */
  --surface:#FCF9F2;       /* 卡片底色 */
  --tint:#E8E1CF;          /* 次級面板／風險卡／Tool cost 段 */
  --panel:#EFEEEB;         /* 中性淺灰面板（Pay-off 卡） */
  --sheet-paper:#FFFDF6;   /* 圖紙白 */

  --ink:#28312C;           /* 主文字 */
  --dim:#61695C;           /* 次要文字（對 --surface 為 AA 合格） */
  --rule:#E1D9C6;          /* 髮絲線 */

  --brand:#3E5C50;         /* 品牌色：按鈕、正向資訊、圖表主色 */
  --brand-soft:rgba(62,92,80,.15);

  --second:#A8913D;        /* 對比色（芥末）：次要強調、時間軸中繼點 */
  --second-deep:#7E6C25;   /* 對比色深版：需要配白字時使用 */
  --second-soft:rgba(168,145,61,.17);

  --flag:#AF4B38;          /* 警示色：★只用於「被找出來的錯誤」★ */
  --flag-soft:rgba(175,75,56,.15);   /* highlighter 掃過的底色 */

  --col-v:#E7EEE7;         /* 正面欄底色（不透明，與品牌色同族） */

  /* ---------- type ---------- */
  --serif:'Charis SIL', Charter, Georgia, serif;
  --sans:'Open Sans', 'Segoe UI', system-ui, sans-serif;
  --label:'Source Sans 3', 'Segoe UI', sans-serif;
  --mono:'Cascadia Mono', Consolas, 'SF Mono', ui-monospace, monospace;

  /* ---------- geometry ---------- */
  --radius-card:16px;
  --radius-sub:12px;
  --radius-btn:10px;
  --radius-chip:999px;

  /* ---------- payback bar 專用（單一來源） ---------- */
  --break:26%;
  --year:78%;

  color-scheme:light;
}

/* ============================================================
   BASE
   ============================================================ */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:14.5px; line-height:1.6;
  margin:0; overflow-x:hidden;
}
img,svg{ max-width:100%; }
a{ color:inherit; }

.wrap{ max-width:900px; margin:0 auto; padding:0 20px 64px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--brand); color:#FFFDF8; padding:11px 22px;
  border-radius:0 0 var(--radius-btn) 0; font-weight:600;
}
.skip:focus{ left:0; }

:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:2px; }

/* ---- card system: mixed border mode (定案 7) ---- */
.card{
  background:var(--surface); border-radius:var(--radius-card); padding:26px;
  border:1px solid transparent; box-shadow:0 10px 30px rgba(60,60,45,.11);
}
.subcard{ border-radius:var(--radius-sub); border:1px solid var(--rule); box-shadow:none; }

/* ---- section furniture ---- */
section.blk{ margin-top:64px; }
.sec-label{
  display:inline-block; font-family:var(--label); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brand); background:var(--brand-soft);
  border-radius:var(--radius-chip); padding:4px 14px;
  margin:0 0 16px; font-weight:400; line-height:1.6;
}
h2.sec{
  font-family:var(--serif); font-weight:600; font-size:clamp(23px,4vw,31px);
  line-height:1.2; margin:0 0 10px; text-wrap:balance;
}
.sec-lead{ font-size:14.5px; color:var(--dim); margin:0 0 22px; max-width:60ch; }
.eyebrow{
  font-family:var(--label); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim); margin:0 0 10px;
}

/* ---- the one button (design-spec §2) ---- */
.btn{
  display:inline-block; padding:11px 22px; font:inherit; font-size:14px; font-weight:600;
  border-radius:var(--radius-btn); cursor:pointer; border:1px solid transparent;
  background:var(--brand); color:#FFFDF8; text-decoration:none; text-align:center;
  transition:background .25s ease;
}
.btn:hover{ background:#35503F; }
.btn-sm{ padding:8px 17px; font-size:13px; }
.btn-ghost{ background:transparent; color:var(--brand); border-color:var(--rule); }
.btn-ghost:hover{ background:var(--brand-soft); }

/* ============================================================
   HERO (定案 3)
   ============================================================ */
.marquee{
  margin:-26px -26px 0; overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
  cursor:grab; -webkit-overflow-scrolling:touch;
}
.marquee::-webkit-scrollbar{ display:none; }
.marquee.dragging{ cursor:grabbing; }
.mq-track{ display:flex; align-items:center; padding:26px 24px 22px; width:max-content; }
.mq-item{ flex:none; margin-left:-20px; }
.mq-item:first-child{ margin-left:0; }
.mq-item:nth-child(odd){ transform:rotate(-1.4deg) translateY(-7px); }
.mq-item:nth-child(even){ transform:rotate(1.2deg) translateY(7px); }
.mq-inner{
  background:var(--sheet-paper); border:1px solid var(--rule); border-radius:7px;
  box-shadow:0 6px 20px rgba(55,55,40,.13); padding:7px;
}
.mq-item.land{ width:206px; }
.mq-item.land svg{ display:block; width:100%; height:auto; }
@media (max-width:600px){ .mq-item.land{ width:168px; } }

.hero-body{ margin-top:22px; padding-top:22px; border-top:1px solid var(--rule); }
.hero-body h1{
  font-family:var(--serif); font-weight:600; letter-spacing:-0.01em;
  font-size:clamp(27px,5.4vw,44px); line-height:1.12; margin:0 0 12px;
}
/* 定案 3：降級數、降透明度、加斜體 —— 三者一起 */
.hero-sub{
  font-family:var(--serif); font-weight:400; font-style:italic;
  font-size:clamp(16px,2.4vw,18.5px); line-height:1.4;
  color:var(--brand); opacity:.88; margin:0 0 12px;
}
.hero-desc{ font-size:14.5px; color:var(--dim); margin:0; }
.hero-desc em{ color:var(--ink); }
.hero-cta{ margin-top:24px; }

/* Stats bar — v7 產品特性版（四項，無數字） */
.stats{
  display:flex; justify-content:space-between; gap:16px; margin-top:28px; padding-top:18px;
  border-top:1px solid var(--rule); text-align:center; flex-wrap:wrap;
}
.stat{ flex:1 1 170px; font-size:12.5px; color:var(--dim); }
.stat b{
  display:block; font-family:var(--serif); font-size:15.5px; font-weight:600;
  color:var(--ink); line-height:1.3; margin-bottom:2px;
}

/* Paper documents in the marquee (Stress report / Incoming inspection).
   aspect-ratio fixes the sheet to a true A4 proportion (210:297) so the
   paper can never grow tall-and-thin from its contents. */
.docmini{ width:132px; aspect-ratio:210/297; display:flex; flex-direction:column; gap:5px; padding:11px 12px; }
.docmini .dt{ font-size:8.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink); font-weight:700; }
.docmini .dn{ font-family:var(--mono); font-size:7.5px; color:var(--dim); margin-bottom:2px; }
.docmini .bar{ height:4px; border-radius:2px; background:var(--rule); }
.docmini .bar.w60{ width:60%; } .docmini .bar.w80{ width:80%; }
.docmini table{ border-collapse:collapse; width:100%; margin-top:3px; }
.docmini td{ border:1px solid var(--rule); font-family:var(--mono); font-size:6.8px; padding:2px 3px;
             color:var(--dim); white-space:nowrap; }
.docmini td.red{ color:var(--flag); background:var(--flag-soft); font-weight:700; }

/* highlighter sweep — the site's single motion concept (design-spec §4) */
.flag-text{ transition:fill .35s ease; }
.on .flag-text{ fill:var(--flag) !important; transition-delay:.4s; }
.hl-bar{ fill:var(--flag-soft); transform:scaleX(0); transform-origin:left center; transform-box:fill-box; }
.on .hl-bar{ transform:scaleX(1); transition:transform .5s cubic-bezier(.22,.9,.35,1) .2s; }

/* ============================================================
   WHAT IT SOLVES — zig-zag (定案 12)
   ============================================================ */
.zz{ margin:0; }
.zz-row{
  display:grid; grid-template-columns:220px 1fr; gap:26px; align-items:center;
  padding:22px 0; border-bottom:1px solid var(--rule);
}
.zz-row:first-child{ padding-top:8px; }
.zz-row:last-child{ border-bottom:0; padding-bottom:8px; }
/* Even rows mirror the columns as well as the order — swapping order alone
   would drop the 220px art into the 1fr column and blow it up. */
.zz-row:nth-child(even){ grid-template-columns:1fr 220px; }
.zz-row:nth-child(even) .zz-art{ order:2; }
.zz-art{
  background:var(--panel); border-radius:var(--radius-btn);
  display:flex; align-items:center; justify-content:center; padding:0;
}
.zz-art svg{ display:block; width:100%; height:auto; }
.zz-fact{ font-size:12.5px; color:var(--dim); margin:0 0 7px; }
.zz-q{
  font-family:var(--serif); font-size:19px; font-weight:600; line-height:1.35;
  color:var(--flag); margin:0;
}
@media (max-width:640px){
  .zz-row, .zz-row:nth-child(even){ grid-template-columns:1fr; gap:14px; }
  .zz-row:nth-child(even) .zz-art{ order:0; }   /* 手機取消交錯 */
  .zz-art{ max-width:260px; }
}
.zz-close{ margin:22px 0 0; font-size:14.5px; max-width:66ch; }
.zz-close + .zz-close{ margin-top:12px; color:var(--dim); }

/* ============================================================
   FIND — needle-in-haystack card (定案 2)
   ============================================================ */
/* 定案 2 明文要求：桌機置中、約網站一半寬度 460px。
   這是 design-decisions 指定的容器寬度，非散文段落。 */
.halfcard{ max-width:460px; margin:0 auto 18px; }
.qline{ display:flex; align-items:center; gap:9px; margin-bottom:12px; }
.qline .qic{ width:16px; height:16px; color:var(--dim); flex:none; }
.qline .q-text{ font-size:14.5px; font-weight:600; }
.field{ display:grid; grid-template-columns:repeat(auto-fill,minmax(10px,1fr)); gap:3px; }
.nd{
  aspect-ratio:3/4; background:var(--tint); border:1px solid var(--rule); border-radius:1px;
  transition:background .25s ease, border-color .25s ease, transform .25s ease;
}
.nd.hit{ background:var(--flag); border-color:var(--flag); transform:scale(1.3); }
.findstats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px; padding-top:14px;
  border-top:1px solid var(--rule);
}
.sg{ display:flex; align-items:flex-start; gap:8px; min-width:0; }
.sg .sgic{ width:16px; height:16px; color:var(--dim); flex:none; margin-top:3px; }
.sg .sgv{
  font-family:var(--serif); font-size:18px; font-weight:600; line-height:1.15;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.sg .sgv.small{ font-size:15px; }
.sg .sgl{ font-size:11px; color:var(--dim); }
.sg.hot .sgic, .sg.hot .sgv{ color:var(--flag); }
.sg.live .sgic, .sg.live .sgv{ color:var(--brand); }
.pulsedot{
  display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--brand);
  margin-right:5px; vertical-align:1px;
}
.pulsedot.anim{ animation:pulse 2.2s ease-out infinite; }
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 var(--brand-soft); }
  70%{ box-shadow:0 0 0 7px transparent; }
  100%{ box-shadow:0 0 0 0 transparent; }
}

/* ============================================================
   MOVE — copy-paste vs auto-extract (定案 4)
   ============================================================ */
.mv{ display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:stretch; }
.mv-col{ display:flex; flex-direction:column; }
.mv-col .grow{ flex:1; display:flex; flex-direction:column; }
.mv-col .grow > *{ flex:1; display:flex; flex-direction:column; }
.mv-col .grow table{ flex:1; }
.mv-mid{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; color:var(--brand);
}
.mv-mid .auto{
  font-family:var(--label); font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; font-weight:700;
}
.mv-mid .autoic{ width:20px; height:20px; }
.mv-arrow{ width:34px; height:16px; }
@media (max-width:660px){
  .mv{ grid-template-columns:1fr; }
  .mv-mid{ flex-direction:row; gap:8px; }
  .mv-mid .mv-arrow{ transform:rotate(90deg); }
}
.panel-lbl{ display:flex; align-items:center; gap:7px; font-size:12px; margin-bottom:8px; font-weight:600; }
.panel-lbl .plic{ width:15px; height:15px; flex:none; }
.panel-lbl.manual{ color:var(--flag); }
.panel-lbl.autolbl{ color:var(--brand); }
.panel-foot{ display:flex; align-items:center; gap:7px; margin-top:9px; font-size:12px; }
.panel-foot.manual{ color:var(--dim); }
.panel-foot.autolbl{ color:var(--brand); font-weight:600; }
.panel-foot .pfic{ width:14px; height:14px; flex:none; }
.freshbars{ display:inline-flex; align-items:flex-end; gap:2px; height:13px; }
.freshbars i{ width:3px; border-radius:1px; background:var(--brand); display:block; }

.oldweb{
  border:1px solid #9A9A9A; border-radius:4px; overflow:hidden; background:#FFF;
  font-family:'Times New Roman',Times,serif;
}
.oldweb .ob{
  background:#DDE3EC; border-bottom:1px solid #9A9A9A; padding:3px 6px;
  display:flex; gap:5px; align-items:center; flex:none;
}
.oldweb .oaddr{
  flex:1; background:#FFF; border:1px inset #AAA; font-family:var(--mono); font-size:7.5px;
  color:#333; padding:1px 4px; white-space:nowrap; overflow:hidden;
}
.oldweb .obtn{
  width:12px; height:11px; background:#E4E4E4; border:1px outset #BBB;
  display:flex; align-items:center; justify-content:center;
}
.oldweb .obtn svg{ width:5px; height:7px; display:block; color:#333; }
.oldweb .ohead{ background:#2A3F6B; color:#FFF; font-size:10.5px; font-weight:700; padding:4px 8px; flex:none; }
.oldweb .onav{
  background:#EDEFF3; border-bottom:1px solid #C4C4C4; font-size:8px; color:#00309C;
  padding:3px 8px; display:flex; gap:9px; flex:none;
}
.oldweb .onav span{ text-decoration:underline; }
.oldweb .obody{ padding:7px 8px 9px; position:relative; flex:1; display:flex; flex-direction:column; }
.oldweb .otitle{ font-size:9.5px; font-weight:700; color:#2A3F6B; margin-bottom:4px; flex:none; }
.oldweb table{ border-collapse:collapse; width:100%; }
.oldweb th{
  background:#C7D2E4; border:1px solid #9AA7BC; font-family:Verdana,Arial,sans-serif;
  font-size:6.8px; padding:3.5px 4px; color:#1A2A4A; text-align:left;
}
.oldweb td{
  border:1px solid #C0C0C0; font-family:Verdana,Arial,sans-serif; font-size:6.8px;
  padding:3.5px 4px; color:#333; white-space:nowrap; position:relative;
}
.oldweb tr:nth-child(even) td{ background:#F2F4F8; }
.oldweb td.picked::after{
  content:""; position:absolute; inset:0; background:var(--flag-soft); border:1px solid var(--flag);
}
.cp-layer{ position:absolute; inset:0; pointer-events:none; }
.cp-cursor{
  position:absolute; width:15px; height:15px; color:var(--ink);
  transition:transform .55s cubic-bezier(.4,.1,.25,1); transform:translate(0,0);
}
.cp-chip{
  position:absolute; font-family:var(--sans); font-size:7.5px; font-weight:700;
  color:#FFFDF8; background:var(--flag); border-radius:4px; padding:2px 6px;
  opacity:0; transition:opacity .2s ease; transform:translate(12px,-2px); white-space:nowrap;
}
.cp-chip.show{ opacity:1; }

.gsheet{ background:#FFF; border:1px solid var(--rule); border-radius:6px; overflow:hidden; position:relative; }
.gsheet table{ border-collapse:collapse; width:100%; height:100%; }
.gsheet td, .gsheet th{
  border:1px solid #E6E6DF; font-family:var(--mono); font-size:8.5px;
  padding:4px 5px; color:#444; white-space:nowrap;
}
.gsheet th{ background:#F1F0EA; color:#777; font-weight:600; text-align:center; width:22px; }
.gsheet td.hd{ background:#F7F6F1; color:#333; font-weight:700; font-family:var(--sans); font-size:8.5px; }
.gsheet td.livecell{ background:var(--brand-soft); color:var(--brand); font-weight:700; }
.gsheet.refresh::after{
  content:""; position:absolute; inset:0; border-radius:6px; pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,var(--brand-soft) 47%,var(--brand-soft) 53%,transparent 62%);
  background-size:260% 100%; animation:sweep 4s ease-in-out infinite;
}
@keyframes sweep{
  0%{ background-position:130% 0; box-shadow:inset 0 0 0 0 transparent; }
  18%{ box-shadow:inset 0 0 0 1.5px var(--brand); }
  45%{ background-position:-30% 0; box-shadow:inset 0 0 0 0 transparent; }
  100%{ background-position:-30% 0; }
}

/* ============================================================
   REGULATION RUNWAY (定案 5) — 單一 grid，圖示與說明同欄
   ============================================================ */
/* 定案 5 明文要求：最大寬度 560px 置中。 */
.runway{
  max-width:560px; margin:6px auto 0;
  display:grid; grid-template-columns:104px 1fr 104px 1fr 104px;
  justify-items:center; align-items:center; row-gap:8px;
}
.rw-ic{ height:52px; display:flex; align-items:center; justify-content:center; color:var(--dim); }
.rw-ic svg{ width:34px; height:34px; }
.rw-ic .flagsvg{ width:26px; height:32px; }
.rw-arrow{ width:100%; color:#C9C4B4; }
.rw-arrow svg{ display:block; width:100%; height:14px; }
.calleaf{
  width:84px; border:1.5px solid var(--ink); border-radius:9px; overflow:hidden;
  text-align:center; background:var(--sheet-paper);
}
.calleaf .cm{
  background:var(--flag); color:#FFFDF8; font-size:8px; font-weight:700; line-height:1.2;
  padding:3px 3px 4px;
}
.calleaf .cy{ font-family:var(--serif); font-size:22px; font-weight:600; padding:4px 0 6px; }
.rw-cap{ text-align:center; font-size:12px; line-height:1.4; align-self:start; }
.rw-cap .y{ font-weight:600; }
.rw-cap .hit b{ color:var(--flag); }
.rw-cap .sub{ color:var(--dim); font-size:11.5px; }
@media (max-width:620px){
  .runway{
    grid-template-columns:52px 1fr; justify-items:start;
    row-gap:0; column-gap:14px; max-width:none;
  }
  .rw-arrow{ width:14px; justify-self:center; }
  .rw-arrow svg{ width:14px; height:30px; }
  .rw-cap{ text-align:left; align-self:center; padding:2px 0 10px; }
  .rw-ic{ height:42px; }
  .rw-blank{ display:none; }
}

/* ============================================================
   WHAT THE DELIVERABLE IS (定案 13)
   ============================================================ */
.quote{ margin:0 0 34px; }
.qcard{
  background:#FFFDF8; border-radius:14px; padding:18px 22px 18px 52px; position:relative;
  box-shadow:0 4px 16px rgba(60,60,45,.10);
}
.qcard::before{
  content:"\201C"; position:absolute; left:18px; top:8px; font-size:40px;
  line-height:1; color:var(--rule); font-family:var(--serif); font-style:normal;
}
.qcard::after{
  content:""; position:absolute; left:34px; bottom:-10px; width:0; height:0;
  border:10px solid transparent; border-top-color:#FFFDF8; border-bottom:0;
  filter:drop-shadow(0 3px 2px rgba(60,60,45,.06));
}
.qt{
  font-family:var(--serif); font-style:italic; color:var(--dim);
  font-size:clamp(16px,2.4vw,18.5px); line-height:1.5; margin:0;
}
.qt::after{
  content:"\201D"; font-family:var(--serif); font-style:normal; color:var(--rule);
  font-size:1.9em; line-height:0; vertical-align:-.28em; margin-left:.1em;
}
.answer{
  font-family:var(--serif); font-size:clamp(26px,4.6vw,36px); font-weight:600;
  line-height:1.15; margin:0 0 12px;
}
.answer em{ color:var(--brand); font-style:normal; }
.intro{ font-size:15px; margin:0 0 24px; max-width:64ch; }
.intro b{ font-weight:600; }

.list{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border-radius:var(--radius-sub); overflow:hidden;
  background:linear-gradient(90deg,transparent 0 50%,var(--col-v) 50%);   /* 只有正面那一欄上色 */
}
.pair{ display:contents; }
.x, .v{ display:flex; gap:10px; align-items:flex-start; padding:12px 20px; }
.x{ font-size:13.5px; color:var(--dim); }
.v{ font-size:14px; }
.list .txt{ flex:1; }
.mk{ flex:none; width:19px; height:19px; margin-top:2px; }
.list .pair:first-child .x, .list .pair:first-child .v{ padding-top:18px; }
.list .pair:last-child .x, .list .pair:last-child .v{ padding-bottom:18px; }
@media (max-width:700px){
  .list{ grid-template-columns:1fr; background:none; }
  .pair{ display:block; padding:12px 0; }
  .pair + .pair{ border-top:1px solid var(--rule); }
  .x, .v{ padding:2px 0; }
  .v{ font-size:14.5px; }
  .v .txt{ font-weight:600; }
}
.ai{
  display:flex; gap:11px; align-items:flex-start; margin-top:22px; padding-top:16px;
  border-top:1px solid var(--rule); font-size:13.5px; color:var(--dim);
}
.ai svg{ flex:none; width:17px; height:17px; color:var(--brand); margin-top:3px; }
.ai .txt b{ color:var(--ink); }
@media (max-width:700px){
  .ai{
    background:var(--brand-soft); border-radius:var(--radius-sub); padding:14px 16px;
    border-top:none; margin-top:20px; font-size:14px; color:var(--ink);
  }
  .ai .txt b{ color:var(--brand); }
}

/* ============================================================
   OWNERSHIP (定案 1)
   ============================================================ */
.own-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.own-item{ padding:16px; display:flex; flex-direction:column; }
.own-ic{ width:26px; height:26px; color:var(--dim); margin-bottom:9px; }
.own-t{ font-family:var(--serif); font-weight:600; font-size:18.5px; line-height:1.25; margin:0 0 5px; }
.own-s{ font-size:12.5px; color:var(--dim); margin:0; }
@media (max-width:640px){
  .own-grid{ grid-template-columns:1fr; gap:10px; }
  .own-item{ flex-direction:row; gap:14px; align-items:flex-start; }
  .own-ic{ flex:none; width:30px; height:30px; margin:2px 0 0; }
  .own-t{ font-size:17px; }
}

/* ============================================================
   ABOUT (定案 8)
   ============================================================ */
.about{ display:grid; grid-template-columns:180px 1px 1fr; gap:26px; align-items:start; }
@media (max-width:680px){ .about{ grid-template-columns:1fr; } .about-div{ display:none; } }
.about-div{ background:var(--brand); opacity:.35; align-self:stretch; border-radius:2px; min-height:200px; }
.about-left{ text-align:center; }
.photo{
  aspect-ratio:4/5; background:var(--tint); border-radius:var(--radius-sub);
  display:flex; align-items:center; justify-content:center;
  color:var(--dim); font-size:12px; overflow:hidden;
}
.photo img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:680px){ .photo{ max-width:210px; margin:0 auto; } }
.about-name{ font-family:var(--serif); font-size:20px; font-weight:600; margin:12px 0 10px; }
.about-body p{ margin:0 0 12px; font-size:14.5px; max-width:58ch; }

.cardzone{ margin-top:22px; padding-top:18px; border-top:1px solid var(--rule); }
.statgrid{ display:grid; gap:10px; align-items:stretch; grid-template-columns:repeat(4,1fr); }
@media (max-width:820px){ .statgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:430px){ .statgrid{ grid-template-columns:1fr; } }
.sc{ padding:14px 14px 16px; text-align:center; display:flex; flex-direction:column; height:100%; }
.sc-cap{
  font-family:var(--label); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim); padding-bottom:9px; margin-bottom:14px; border-bottom:1px solid var(--rule);
}
.sc-art{ height:74px; flex:none; display:flex; align-items:center; justify-content:center; }
.sc-foot{ margin-top:14px; }
.sc-num{
  font-family:var(--serif); font-size:20px; font-weight:600; line-height:1.2;
  font-variant-numeric:tabular-nums;
}
.sc-lbl{ font-size:11px; color:var(--dim); margin-top:3px; }
.scale{ display:flex; align-items:flex-end; gap:14px; }
.sgroup{ text-align:center; }
.sbars{ display:flex; align-items:flex-end; gap:2px; justify-content:center; }
.sbars i{ display:block; width:3.5px; border-radius:2px; background:var(--brand); }
.sgroup .sw{ font-size:9px; color:var(--dim); margin-top:6px; }
.grid-mini{ display:grid; grid-template-columns:repeat(9,1fr); gap:2px; width:96px; }
.grid-mini span{ aspect-ratio:3/4; background:var(--tint); border-radius:1px; }
.grid-mini span.hot{ background:var(--flag); }
.rings{ position:relative; width:66px; height:66px; }
.rings i{
  position:absolute; border:1.4px solid var(--brand); border-radius:50%; opacity:.5;
  left:50%; top:50%; transform:translate(-50%,-50%);
}
.rings i:last-child{ opacity:1; background:var(--brand-soft); }
.modules{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; width:104px; }
.modules span{ aspect-ratio:1/1; border-radius:4px; background:var(--tint); border:1px solid var(--rule); }
.modules span.on{ background:var(--brand-soft); border-color:var(--brand); }
.modules span.ghost{ background:transparent; border-style:dashed; }

/* ============================================================
   PRICING + ROI (定案 6)
   ============================================================ */
.roi-split{ display:grid; grid-template-columns:200px 1fr; gap:24px; align-items:start; }
@media (max-width:680px){ .roi-split{ grid-template-columns:1fr; } }
.roi-img{
  aspect-ratio:1/1; background:var(--tint); border-radius:var(--radius-sub); display:flex;
  align-items:center; justify-content:center; color:var(--dim); font-size:12px; overflow:hidden;
}
.roi-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.roi-eyebrow{ font-size:13px; color:var(--dim); margin:0 0 6px; }
.roi-h{
  font-family:var(--serif); font-size:clamp(18px,2.9vw,22px); font-weight:600; line-height:1.3;
  margin:0 0 8px; text-wrap:balance;
}
.roi-note{ font-size:13px; color:var(--dim); margin:0; max-width:52ch; }
.paypill{ margin-top:22px; background:var(--panel); border-radius:14px; padding:16px 18px 18px; }
.pay-q{ display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; margin:0 0 12px; }
.pay-q .qic{ width:17px; height:17px; color:var(--dim); flex:none; }
.led-row{ display:flex; align-items:baseline; font-size:13.5px; padding:5px 0; }
.led-row .l{ flex:0 1 auto; }
.led-row .d{ flex:1 0 20px; border-bottom:2px dotted var(--rule); margin:0 8px; transform:translateY(-4px); }
.led-row .v{ font-family:var(--mono); font-size:12.5px; font-variant-numeric:tabular-nums; white-space:nowrap; }
@media (max-width:420px){
  .led-row{ flex-wrap:wrap; }
  .led-row .d{ display:none; }
  .led-row .l{ flex:1 1 100%; color:var(--dim); font-size:12.5px; }
  .led-row .v{ font-size:14px; }
}
.bx{ margin-top:20px; }
.bx-axis{ position:relative; height:16px; font-size:11px; color:var(--dim); }
.bx-axis span{ position:absolute; top:0; white-space:nowrap; }
.bx-axis .a0{ left:0; }
.bx-axis .a12{ left:var(--year); transform:translateX(-50%); }
.bx-track{
  position:relative; height:30px; border-radius:8px; overflow:hidden;
  background:linear-gradient(90deg,
    var(--tint) 0, var(--tint) var(--break),
    var(--brand-soft) var(--break), var(--brand-soft) var(--year),
    transparent 100%);
}
.bx-track .seg{
  position:absolute; top:0; height:100%; display:flex; align-items:center;
  justify-content:center; font-size:11.5px;
}
.bx-track .s-cost{ left:0; width:var(--break); color:var(--dim); }
.bx-track .s-gain{ left:var(--break); width:calc(var(--year) - var(--break)); color:var(--brand); font-weight:600; }
.bx-track .divider{
  position:absolute; top:0; bottom:0; left:var(--break); width:0;
  border-left:1.5px dashed var(--brand); opacity:.6;
}
.bx-marks{ position:relative; height:74px; }
.bx-mk{ position:absolute; top:0; }
.bx-mk .stem{ width:1.5px; height:15px; background:var(--brand); margin:0 auto; }
.bx-mk .dot{ width:9px; height:9px; border-radius:50%; background:var(--brand); margin:-1px auto 0; }
.bx-mk.left{ left:var(--break); transform:translateX(-50%); text-align:center; }
.bx-mk.right{ left:var(--year); transform:translateX(-50%); text-align:center; }
.bx-pill{
  display:inline-flex; align-items:center; gap:7px; background:var(--brand); color:#FFFDF8;
  border-radius:9px; padding:6px 13px; font-family:var(--serif); font-size:15px; font-weight:600;
  white-space:nowrap; margin-top:5px;
}
.bx-pill svg{ width:14px; height:14px; }
.bx-when{
  font-family:var(--serif); font-size:12.5px; font-style:italic; color:var(--dim);
  margin-top:2px; white-space:nowrap;
}
.bx-when b{ color:var(--ink); font-style:normal; font-weight:600; }
.bx-val{
  font-family:var(--serif); font-size:clamp(19px,3.2vw,25px); font-weight:600; color:var(--brand);
  line-height:1.1; white-space:nowrap; margin-top:5px;
}
.bx-vlbl{ font-size:11.5px; color:var(--dim); white-space:nowrap; }
@media (max-width:560px){
  .bx-marks{ position:static; height:auto; display:flex; flex-direction:column; gap:12px; margin-top:12px; }
  .bx-mk, .bx-mk.left, .bx-mk.right{ position:static; transform:none; text-align:left; }
  .bx-mk .stem, .bx-mk .dot{ display:none; }
}
.prevent{ margin-top:26px; border-top:1px solid var(--rule); padding-top:18px; }
.pv-title{ font-size:14px; font-weight:600; margin:0 0 12px; }
.pv-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:620px){ .pv-cards{ grid-template-columns:1fr; } }
.pv-card{ background:var(--tint); padding:13px 15px; }
.pv-what{ font-size:13px; font-weight:600; }
.pv-amt{
  font-family:var(--serif); font-size:19px; font-weight:600; color:var(--flag);
  font-variant-numeric:tabular-nums; text-align:right; line-height:1.2; margin-top:6px;
}
.pv-plus{ font-size:11.5px; color:var(--flag); opacity:.72; text-align:right; }
.quiet{
  font-family:var(--serif); font-style:italic; font-weight:400; font-size:16.5px;
  line-height:1.5; margin:18px 0 0; padding-top:14px; border-top:1px solid var(--rule);
}

/* ============================================================
   FAQ (定案 9)
   ============================================================ */
.faq{ display:flex; flex-direction:column; gap:8px; }
.qa{ border-radius:var(--radius-btn); background:var(--surface); overflow:hidden; }
.qa > summary{
  list-style:none; cursor:pointer; background:var(--panel); border-radius:var(--radius-btn);
  padding:14px 16px; font-size:15px; font-weight:600; line-height:1.4;
  display:flex; align-items:flex-start; gap:14px;
}
.qa > summary::-webkit-details-marker{ display:none; }
.qa > summary .qtext{ flex:1; }
/* 展開記號：18px 方塊內兩條偽元素疊成 ＋；展開時只有直線 scaleY(0) */
.qmark{ position:relative; flex:none; width:18px; height:18px; margin-top:2px; }
.qmark::before, .qmark::after{
  content:""; position:absolute; left:50%; top:50%; background:var(--dim); border-radius:1px;
}
.qmark::before{ width:12px; height:1.6px; transform:translate(-50%,-50%); }
.qmark::after{
  width:1.6px; height:12px; transform:translate(-50%,-50%) scaleY(1);
  transition:transform .25s cubic-bezier(.22,.9,.35,1);
}
.qa[open] .qmark::after{ transform:translate(-50%,-50%) scaleY(0); }
.qa[open] > summary{ border-radius:var(--radius-btn) var(--radius-btn) 0 0; border-bottom:1px solid var(--rule); }
.qa .ans{ padding:2px 46px 16px 16px; font-size:14px; color:var(--dim); }
.qa .ans p{ margin:12px 0 0; }
@media (max-width:480px){ .qa .ans{ padding-right:16px; } }

/* ============================================================
   CTA (定案 11 — V2)
   ============================================================ */
.cta{
  background:var(--panel); border-radius:var(--radius-card); padding:32px 30px;
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:center;
}
.cta::before{
  content:""; position:absolute; left:0; top:0; bottom:0;
  width:4px; background:var(--brand);
}
@media (max-width:780px){ .cta{ grid-template-columns:1fr; padding:28px 22px; } }
.cta-h{
  font-family:var(--serif); font-weight:600; font-size:clamp(23px,4vw,31px);
  line-height:1.2; margin:0 0 10px; text-wrap:balance;
}
.cta-lead{ font-size:14.5px; color:var(--dim); margin:0; max-width:46ch; }
.cta-acts{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:560px){ .cta-acts{ grid-template-columns:1fr; } }
.act{
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius-sub);
  padding:20px 18px; text-align:center;
  display:flex; flex-direction:column; height:100%;
}
.act-t{ font-family:var(--serif); font-size:18.5px; font-weight:600; margin:0 0 6px; }
/* ★ 按鈕對齊機制：說明 flex:1，按鈕永遠貼齊卡片底部 */
.act-s{ font-size:12.5px; color:var(--dim); margin:0 0 14px; flex:1; }
.act .btn{ width:100%; }

/* ============================================================
   FOOTER (定案 10)
   ============================================================ */
.site-foot{
  border-top:1px solid var(--rule); padding-top:20px; margin-top:64px;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  flex-wrap:wrap; font-size:13px; color:var(--dim);
}
.foot-left{ display:flex; align-items:center; gap:10px; }
.foot-li{
  width:26px; height:26px; border-radius:50%; background:var(--tint); color:var(--dim);
  display:inline-flex; align-items:center; justify-content:center;
  border-bottom:none; transition:background .2s ease, color .2s ease;
}
.foot-li svg{ width:14px; height:14px; display:block; }
.foot-li:hover{ background:var(--rule); color:var(--ink); }
.foot-links{ display:flex; gap:20px; flex-wrap:wrap; align-items:center; }
.foot-links a{ color:var(--dim); text-decoration:none; border-bottom:1px solid var(--rule); }
.foot-links a:hover{ color:var(--ink); border-bottom-color:var(--dim); }
/* footer 中唯一有顏色差異的元素 —— 唯一「使用者主動想找」的連結 */
.foot-links a.contact{ color:var(--ink); font-weight:600; border-bottom-color:var(--dim); }
@media (max-width:560px){
  .site-foot{ flex-direction:column; align-items:flex-start; gap:14px; }
  .foot-links{ gap:14px 20px; }
}

/* ============================================================
   LEGAL PAGES (Impressum / Datenschutz)
   ============================================================ */
.legal{ padding-top:46px; }
.legal h1{
  font-family:var(--serif); font-weight:600; font-size:clamp(27px,5vw,38px);
  line-height:1.15; margin:0 0 8px;
}
.legal h2{
  font-family:var(--serif); font-weight:600; font-size:clamp(19px,3vw,23px);
  line-height:1.25; margin:32px 0 8px;
}
.legal h3{ font-size:14.5px; font-weight:600; margin:22px 0 6px; }
.legal p{ margin:0 0 12px; max-width:70ch; }
.legal ul{ margin:0 0 12px; padding-left:20px; }
.legal li{ margin-bottom:6px; max-width:70ch; }
.legal address{ font-style:normal; margin:0 0 12px; }
.legal a{ color:var(--brand); }
.legal .back{ display:inline-block; margin-bottom:22px; font-size:13px; color:var(--dim); }
.legal .todo{
  background:var(--second-soft); border-radius:var(--radius-sub);
  padding:14px 16px; font-size:13.5px; margin:0 0 26px;
}
.legal .todo b{ color:var(--second-deep); }

/* ============================================================
   REDUCED MOTION — 全部關閉，終態直接呈現
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .hl-bar{ transform:scaleX(1) !important; }
  .flag-text{ fill:var(--flag) !important; }
  .gsheet.refresh::after{ display:none; }
  /* The copy-paste cursor is only meaningful while it moves; with motion off
     the JS never positions it, so it would sit parked in the panel corner. */
  .cp-layer{ display:none; }
}

/* ---- zig-zag scenario diagrams (定案 12 視覺語法) ---- */
.zz-art text{ font-family:var(--label); letter-spacing:.06em; }
.zz-art .t-lbl{ font-size:9px; fill:var(--dim); }
.zz-art .t-val{ font-size:12px; font-weight:600; fill:var(--ink); letter-spacing:0; }
.zz-art .t-flag{ fill:var(--flag); }
.zz-art .g-line{ stroke:var(--dim); stroke-width:1.6; stroke-linecap:round; opacity:.4; }
.zz-art .g-panel{ fill:none; stroke:var(--dim); stroke-width:1.6; }
.zz-art .g-part{ fill:var(--dim); opacity:.3; }
.zz-art .g-link{ stroke:var(--flag); stroke-width:1.6; stroke-dasharray:3 4; fill:none; }
.zz-art .g-miss{ stroke:var(--flag); stroke-width:1.6; fill:none; }

/* Inline arrow glyph. The embedded latin subsets have no U+2192 / U+2190,
   so every arrow in running text is drawn, never typed. (HANDOFF §5.0c) */
.arw{ width:1.15em; height:.62em; vertical-align:-.02em; margin:0 .1em; }

/* ============================================================
   設計旋鈕 —— 由 ?dev=1 控制台驅動，預設值＝目前的設計
   ============================================================ */
:root{ --site-w:900px; }
.wrap{ max-width:var(--site-w); }

/* 容器：卡片 / 無框 / 色帶（滿版底色用 box-shadow 外擴，避免 100vw 造成橫向捲動） */
section.blk[data-box="plain"] > .card,
section.blk[data-box="band"] > .card{
  background:transparent; box-shadow:none; border-color:transparent; padding:0;
}
section.blk[data-box="band"]{
  background:var(--tint); box-shadow:0 0 0 100vmax var(--tint);
  clip-path:inset(0 -100vmax); padding:46px 0; margin-top:46px;
}

/* 欄數：只在桌機生效，手機仍走各元件原本的堆疊斷點 */
@media (min-width:900px){
  section.blk[data-cols="1"] :is(.own-grid,.statgrid,.pv-cards){ grid-template-columns:1fr; }
  section.blk[data-cols="2"] :is(.own-grid,.statgrid,.pv-cards){ grid-template-columns:repeat(2,1fr); }
  section.blk[data-cols="3"] :is(.own-grid,.statgrid,.pv-cards){ grid-template-columns:repeat(3,1fr); }
  section.blk[data-cols="4"] :is(.own-grid,.statgrid,.pv-cards){ grid-template-columns:repeat(4,1fr); }
}