/* 汽車維修頁:學汽車改裝品牌的設計語言。深石墨、細線、寬體英文數字、等寬標號;
   信號黃只用在主按鈕與重點數字。直角、沒有陰影與卡片框。 */
body.ind-auto {
  --black: #0e0f10;
  --graphite: #1c1e21;
  --paper: #f3f2ee;
  --grey: #8a8f94;
  --rule: #2e3236;
  --rule-light: #d6d4ce;
  --signal: #f5b700;
  --bg: var(--black);
  --ink: #f3f2ee;
  --ink-2: #c4c7ca;
  --muted: var(--grey);
  --line: var(--rule);
  --brand: var(--signal);
  --brand-ink: #0e0f10;
  --mark-line: #0e0f10;
  --wide: "Archivo", "Noto Sans TC", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --font: "Noto Sans TC", -apple-system, "PingFang TC", "Microsoft JhengHei", sans-serif;
  font-family: var(--font);
  font-size: 17px; line-height: 1.7;
}
.ind-auto .wrap { max-width: 1280px; }
.ind-auto .brand-mark { color: var(--paper); }

/* 共用小件 */
.au-no { font-family: var(--mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); }
.au-h2 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 900; line-height: 1.25; letter-spacing: .01em; }
.au-sec { padding: 128px 0; }
.au-light { background: var(--paper); color: #0e0f10; --line: var(--rule-light); }
.au-light .au-no { color: #6a6e72; }
.au-graphite { background: var(--graphite); }
.au-head { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; margin-bottom: 64px; }
.au-head .au-no { grid-column: 1 / span 3; padding-top: 10px; }
.au-head .au-h2 { grid-column: 4 / span 8; }
@media (max-width: 860px) {
  .au-sec { padding: 72px 0; }
  .au-head { grid-template-columns: 1fr; gap: 12px; margin-bottom: 40px; }
  .au-head .au-no, .au-head .au-h2 { grid-column: 1; padding-top: 0; }
}

.au-btn { display: inline-flex; align-items: center; gap: 12px; height: 52px; padding: 0 24px; font-weight: 700; font-size: 16px; text-decoration: none; letter-spacing: .02em; border-radius: 0; }
.au-btn-main { background: var(--signal); color: #0e0f10; }
.au-btn-main:hover { background: #ffc61a; }
.au-btn-sub { border: 1px solid currentColor; color: inherit; }
.au-btn-sub:hover { background: rgba(255, 255, 255, .06); }
.au-btn[aria-disabled="true"] { border: 1px solid var(--line); color: var(--grey); cursor: not-allowed; font-weight: 400; }

/* ---------- 首屏:滿版畫面壓暗,標題壓左下 ---------- */
.au-hero { position: relative; min-height: min(88vh, 820px); overflow: hidden; display: flex; align-items: flex-end; background: var(--black); }
.au-hero .bg { position: absolute; inset: 0; }
.au-hero .bg img { width: 100%; height: 100%; object-fit: cover; object-position: left top; filter: grayscale(.5) brightness(.3) contrast(1.1) blur(1.5px); animation: au-zoom 8s ease-out forwards; transform-origin: 30% 20%; }
@keyframes au-zoom { from { transform: scale(1); } to { transform: scale(1.05); } }
.au-hero .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14, 15, 16, .96) 18%, rgba(14, 15, 16, .35) 70%, rgba(14, 15, 16, .6)); }
.au-hero .wrap { position: relative; width: 100%; padding-bottom: 80px; padding-top: 160px; }
.au-hero .crumbwrap { position: absolute; top: 24px; left: 0; right: 0; z-index: 1; }
.au-hero .crumb { font-size: 14px; }
.au-hero .crumb a { color: var(--grey); text-decoration: none; }
.au-hero .crumb a:hover { color: var(--paper); text-decoration: underline; }
.au-hero .au-no { margin-bottom: 20px; display: block; }
.au-hero h1 { font-size: clamp(36px, 5.6vw, 72px); font-weight: 900; line-height: 1.12; letter-spacing: .005em; max-width: 13em; }
.au-hero h1 .nw { white-space: nowrap; }
.au-hero .lead { margin-top: 24px; max-width: 38em; color: var(--ink-2); font-size: 18px; }
.au-hero .act { margin-top: 36px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.au-hero .meta { font-family: var(--mono); font-size: 13px; color: var(--grey); letter-spacing: .04em; }
.au-hero .shot-note { position: absolute; right: 40px; bottom: 24px; font-family: var(--mono); font-size: 11px; color: #5a5f64; letter-spacing: .08em; }
@media (max-width: 600px) {
  .au-hero { min-height: 640px; }
  .au-hero h1 .nw { white-space: normal; }
  .au-hero .shot-note { right: 20px; }
}

/* ---------- 三問:Q 在左、答在右 ---------- */
.au-qa { border-top: 1px solid var(--line); }
.au-qa > div { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; padding: 32px 0; border-bottom: 1px solid var(--line); }
.au-qa .q { grid-column: 1 / span 4; font-size: 17px; color: var(--grey); }
.au-qa .q span { font-family: var(--wide); font-stretch: 125%; font-weight: 800; color: var(--paper); margin-right: 14px; }
.au-qa h3 { grid-column: 5 / span 3; font-size: 22px; font-weight: 900; }
.au-qa p { grid-column: 8 / span 5; color: var(--ink-2); }
@media (max-width: 860px) { .au-qa > div { grid-template-columns: 1fr; gap: 6px; } .au-qa .q, .au-qa h3, .au-qa p { grid-column: 1; } }

/* ---------- 和老系統比 ---------- */
.au-table { width: 100%; border-collapse: collapse; font-size: 17px; }
.au-table th, .au-table td { text-align: left; padding: 22px 16px 22px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.au-table thead th { font-family: var(--mono); font-size: 12.5px; font-weight: 400; letter-spacing: .12em; color: #6a6e72; border-bottom-color: #0e0f10; }
.au-table td:first-child { width: 18%; color: #6a6e72; }
.au-table td.old { width: 38%; color: #55595d; }
.au-table td.new { font-weight: 900; }
.au-foot { margin-top: 20px; font-size: 13.5px; color: #6a6e72; }
@media (max-width: 700px) {
  .au-table thead { display: none; }
  .au-table, .au-table tbody, .au-table tr, .au-table td { display: block; width: 100% !important; }
  .au-table tr { padding: 18px 0; border-bottom: 1px solid var(--line); }
  .au-table td { border: 0; padding: 2px 0; }
  .au-table td.old::before { content: "老系統常見："; }
  .au-table td.new::before { content: "這套："; font-weight: 400; }
}

/* ---------- 流程:橫向時間軸 ---------- */
.au-line { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); }
.au-line li { padding: 28px 24px 0 0; position: relative; }
.au-line li::before { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; background: var(--paper); }
.au-line li:last-child::before { background: var(--signal); }
.au-line .n { font-family: var(--mono); font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.au-line li:last-child .n { color: var(--signal); }
.au-line h3 { font-size: 20px; font-weight: 900; margin-top: 18px; }
.au-line p { color: var(--ink-2); margin-top: 6px; font-size: 15.5px; }
@media (max-width: 900px) {
  .au-line { grid-template-columns: 1fr; border-top: 0; border-left: 1px solid var(--line); }
  .au-line li { padding: 0 0 36px 28px; }
  .au-line li::before { top: 8px; left: -4px; }
  .au-line .n { font-size: 32px; }
}

/* ---------- 功能:大圖配文字,左右交錯 ---------- */
.au-feature { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: center; padding: 56px 0; border-top: 1px solid var(--line); }
.au-feature:first-of-type { border-top: 0; padding-top: 0; }
.au-feature figure { margin: 0; grid-column: 1 / span 7; }
.au-feature .txt { grid-column: 9 / span 4; }
.au-feature.flip figure { grid-column: 6 / span 7; order: 2; }
.au-feature.flip .txt { grid-column: 1 / span 4; order: 1; }
.au-feature figure img { width: 100%; border: 1px solid var(--rule-light); background: #fff; }
.au-feature figcaption { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; color: #6a6e72; margin-top: 10px; }
.au-feature .txt .au-no { display: block; margin-bottom: 14px; }
.au-feature h3 { font-size: 26px; font-weight: 900; line-height: 1.35; }
.au-feature p { margin-top: 14px; color: #3b3f43; }
.au-list { margin: 72px 0 0; border-top: 1px solid #0e0f10; display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; list-style: none; padding: 0; }
.au-list li { padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 16px; display: grid; grid-template-columns: 56px 1fr; }
.au-list li b { font-family: var(--mono); font-weight: 400; font-size: 12.5px; color: #6a6e72; padding-top: 4px; }
.au-list li.soon { color: #6a6e72; }
.au-list li.soon em { font-style: normal; font-size: 13px; margin-left: 10px; }
@media (max-width: 860px) {
  .au-feature, .au-feature.flip { grid-template-columns: 1fr; gap: 20px; padding: 40px 0; }
  .au-feature figure, .au-feature .txt, .au-feature.flip figure, .au-feature.flip .txt { grid-column: 1; order: 0; }
  .au-list { grid-template-columns: 1fr; }
}

/* ---------- 搬家:深色大編號 ---------- */
.au-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.au-steps li { border-top: 1px solid var(--line); padding-top: 24px; }
.au-steps .n { font-family: var(--wide); font-stretch: 125%; font-weight: 800; font-size: 72px; line-height: 1; color: var(--paper); }
.au-steps p { margin-top: 20px; color: var(--ink-2); }
@media (max-width: 860px) { .au-steps { grid-template-columns: 1fr; } .au-steps .n { font-size: 52px; } }

/* ---------- 價格:兩欄一條直線 ---------- */
.au-price { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #0e0f10; }
.au-price > div { padding: 40px 48px 8px 0; }
.au-price > div + div { border-left: 1px solid var(--line); padding-left: 48px; padding-right: 0; }
.au-price h3 { font-size: 28px; font-weight: 900; }
.au-price .st { font-family: var(--mono); font-size: 12.5px; letter-spacing: .1em; margin-left: 14px; vertical-align: middle; color: #6a6e72; }
.au-price .st.now { color: #0e0f10; background: var(--signal); padding: 2px 8px; }
.au-price p { margin-top: 12px; color: #3b3f43; }
.au-price ul { margin: 20px 0 0; padding: 0; list-style: none; }
.au-price li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.au-price .amt { margin-top: 28px; font-size: 15px; color: #55595d; }
.au-price .amt strong { font-family: var(--mono); font-size: 22px; color: #0e0f10; margin-left: 8px; }
.au-price .how { margin-top: 8px; font-size: 14.5px; color: #55595d; }
.au-price .act { margin-top: 28px; }
.au-price .soon h3, .au-price .soon p, .au-price .soon li { color: #6a6e72; }
@media (max-width: 860px) {
  .au-price { grid-template-columns: 1fr; }
  .au-price > div, .au-price > div + div { padding: 32px 0; border-left: 0; }
  .au-price > div + div { border-top: 1px solid var(--line); }
}

/* ---------- 常見問題 ---------- */
.au-faq { border-top: 1px solid #0e0f10; max-width: 920px; }
.au-faq details { border-bottom: 1px solid var(--line); }
.au-faq summary { cursor: pointer; list-style: none; padding: 22px 0; font-size: 18px; font-weight: 900; display: flex; justify-content: space-between; gap: 20px; }
.au-faq summary::-webkit-details-marker { display: none; }
.au-faq summary::after { content: "+"; font-family: var(--mono); font-weight: 400; color: #6a6e72; }
.au-faq details[open] summary::after { content: "−"; }
.au-faq details p { padding: 0 0 24px; color: #3b3f43; max-width: 44em; }

/* ---------- 結尾 ---------- */
.au-end .wrap { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.au-end h2 { font-size: clamp(28px, 3.6vw, 48px); font-weight: 900; line-height: 1.2; }
.au-end p { margin-top: 12px; color: var(--ink-2); }

/* 套文案後補的小件 */
.au-head .au-htxt { grid-column: 4 / span 8; }
.au-sub { margin-top: 12px; font-size: 18px; color: var(--ink-2); }
.au-light .au-sub { color: #3b3f43; }
.au-body { margin-top: 8px; color: var(--grey); max-width: 40em; }
.au-light .au-body { color: #55595d; }
.au-hero .lead b { color: var(--paper); font-weight: 900; }
.au-line p.s, .au-steps p.s { color: var(--paper); font-weight: 700; margin-top: 4px; font-size: 15.5px; }
.au-steps h3 { font-size: 20px; font-weight: 900; margin-top: 20px; }
.au-steps p.s + p { margin-top: 6px; }
.au-feature .au-sub { font-size: 16px; margin-top: 8px; font-weight: 700; }
.au-ph { aspect-ratio: 16 / 10; border: 1px dashed #b9b6ae; display: grid; place-content: center; text-align: center; color: #6a6e72; font-size: 15px; background: #ebe9e3; }
.au-ph span { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; margin-bottom: 6px; }
.au-list li .dim { color: #55595d; font-size: 15px; }
.au-inline { color: var(--signal); text-decoration: none; font-weight: 700; white-space: nowrap; }
.au-inline:hover { text-decoration: underline; }
.au-inline.dark { color: #0e0f10; text-decoration: underline; text-underline-offset: 4px; }
.au-faq details p b { display: inline-block; margin-bottom: 4px; }
.faq-link { display: inline-block; margin-left: 8px; font-weight: 700; color: #0e0f10; }
@media (max-width: 860px) { .au-head .au-htxt { grid-column: 1; } }

/* GPT 功能示意圖:整寬主視覺,網頁只留一句短說明(圖上已有標題,不重複) */
.au-show { margin: 56px 0; padding-top: 56px; border-top: 1px solid var(--line); }
.au-show img { width: 100%; height: auto; }
.au-show figcaption { margin-top: 14px; font-size: 15.5px; color: #3b3f43; display: grid; grid-template-columns: 56px 1fr; }
.au-show figcaption::before { content: "—"; font-family: var(--mono); color: #6a6e72; }
.au-show.dark { border-top-color: var(--rule); margin-top: 72px; padding-top: 0; border-top: 0; }
.au-show.dark figcaption { color: var(--ink-2); }
.au-feature img.mkt { border: 0; background: none; }
@media (max-width: 860px) { .au-show { margin: 32px 0; padding-top: 32px; } .au-show figcaption { grid-template-columns: 28px 1fr; } }
.au-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 56px 0; padding-top: 56px; border-top: 1px solid var(--line); }
.au-pair figure { margin: 0; }
.au-pair img { width: 100%; height: auto; }
.au-pair figcaption { margin-top: 12px; font-size: 15px; color: #3b3f43; }
.au-grp { margin: 96px 0 -24px; font-family: var(--mono); font-size: 13px; letter-spacing: .12em; color: #6a6e72; }
@media (max-width: 860px) { .au-pair { grid-template-columns: 1fr; margin: 32px 0; padding-top: 32px; } .au-grp { margin-top: 56px; } }
.au-grp-note { margin: 32px 0 -24px; font-size: 16px; color: #3b3f43; max-width: 40em; }

/* ================= 互動區塊 ================= */
.au-ctrl { font: inherit; cursor: pointer; }
.au-flip button, .au-roles button, .au-tabs button, .au-scan button, .au-ask button { font: inherit; cursor: pointer; }

/* 1. 捲動敘事 */
.au-story { background: var(--black); padding: 96px 0 40px; border-top: 1px solid var(--rule); }
.au-story-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.au-story .steps { grid-column: 1 / span 4; }
.au-story .steps > .au-no { margin-bottom: 24px; display: block; }
.au-story .st { min-height: 62vh; padding: 24px 0; border-top: 1px solid var(--rule); opacity: .35; transition: opacity .35s ease; }
.au-story .st.on { opacity: 1; }
.au-story .st .n { font-family: var(--mono); font-size: 13px; color: var(--grey); }
.au-story .st.on .n { color: var(--signal); }
.au-story .st h3 { font-size: 30px; font-weight: 900; margin-top: 8px; }
.au-story .st p { margin-top: 10px; color: var(--ink-2); max-width: 20em; }
.au-story .st img.inline { display: none; }
.au-story .stage { grid-column: 6 / span 7; }
.au-story .stick { position: sticky; top: calc(50vh - 260px); }
.au-story .device { background: #2a2d31; border-radius: 14px; padding: 14px 14px 18px; border: 1px solid #3a3e43; position: relative; }
.au-story .device .cam { width: 8px; height: 8px; border-radius: 50%; background: #111; margin: 0 auto 10px; }
.au-story .screen { position: relative; aspect-ratio: 16 / 10; background: #f3f2ee; overflow: hidden; border-radius: 4px; }
.au-story .screen .shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: scale(1.02); transition: opacity .5s ease, transform .6s ease; }
.au-story .screen .shot.on { opacity: 1; transform: none; }
.au-story .bar, .au-tabs .fl-bar { height: 3px; background: var(--rule); margin-top: 18px; }
.au-story .bar i, .au-tabs .fl-bar i { display: block; height: 100%; width: 20%; background: var(--signal); transition: width .4s ease; }
.au-story .count { margin-top: 10px; font-family: var(--mono); font-size: 13px; color: var(--paper); letter-spacing: .04em; }
@media (max-width: 900px) {
  .au-story { padding: 64px 0 24px; }
  .au-story-grid { grid-template-columns: 1fr; }
  .au-story .steps { grid-column: 1; }
  .au-story .stage { display: none; }
  .au-story .st { min-height: 0; opacity: 1; padding: 28px 0; }
  .au-story .st img.inline { display: block; margin-top: 16px; width: 100%; background: #f3f2ee; border-radius: 4px; }
}

/* 2. 五站流程分頁 */
.au-tabs .fl-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.au-tabs .fl-count { font-family: var(--mono); font-size: 13px; color: var(--paper); }
.au-tabs .fl-play { background: none; border: 1px solid var(--rule); color: var(--paper); padding: 6px 14px; font-size: 13px; }
.au-tabs .fl-bar { margin: 12px 0 0; }
.fl-list { display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid var(--rule); }
.fl-list [role="tab"] { text-align: left; background: none; border: 0; border-top: 3px solid transparent; color: var(--grey); padding: 20px 16px 20px 0; display: grid; gap: 4px; }
.fl-list [role="tab"] .n { font-family: var(--mono); font-size: 30px; font-weight: 700; line-height: 1; }
.fl-list [role="tab"] .t { font-size: 18px; font-weight: 900; color: var(--ink-2); }
.fl-list [role="tab"] .s { font-size: 13.5px; }
.fl-list [role="tab"][aria-selected="true"] { color: var(--paper); border-top-color: var(--signal); }
.fl-list [role="tab"][aria-selected="true"] .n { color: var(--signal); }
.fl-list [role="tab"][aria-selected="true"] .t { color: var(--paper); text-decoration: underline; text-underline-offset: 6px; }
.fl-panels { padding-top: 32px; }
.fl-panels figure { margin: 0; background: #f3f2ee; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; }
.fl-panels img { max-width: 100%; max-height: 100%; object-fit: contain; animation: fl-in .45s ease; }
@keyframes fl-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fl-panels p { margin-top: 16px; color: var(--ink-2); }
.fl-panels p b { color: var(--paper); }
@media (max-width: 760px) {
  .fl-list { grid-template-columns: repeat(5, minmax(88px, 1fr)); overflow-x: auto; }
  .fl-list [role="tab"] .s { display: none; }
  .fl-list [role="tab"] .n { font-size: 22px; }
  .fl-list [role="tab"] .t { font-size: 15px; }
}

/* 3. 三種身分 */
.au-roles { margin: 40px 0 56px; border-top: 1px solid var(--line); padding-top: 32px; }
.rl-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.rl-btns { display: flex; border: 1px solid #0e0f10; }
.rl-btns button { background: #fff; border: 0; padding: 10px 22px; font-weight: 700; color: #0e0f10; }
.rl-btns button + button { border-left: 1px solid #0e0f10; }
.rl-btns button[aria-pressed="true"] { background: #0e0f10; color: var(--signal); }
.rl-btns button[aria-pressed="true"]::before { content: "● "; }
.rl-card { margin-top: 20px; background: #fff; border: 1px solid var(--rule-light); padding: 20px 24px; }
.rl-order { font-size: 15px; color: #3b3f43; }
.rl-order .mono, .au-ask .mono { font-family: var(--mono); }
.rl-scroll { overflow-x: auto; }
.rl-card table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 15px; min-width: 560px; }
.rl-card th, .rl-card td { text-align: left; padding: 12px 10px 12px 0; border-bottom: 1px solid var(--rule-light); transition: color .3s ease, background-color .3s ease; }
.rl-card th { font-weight: 400; font-size: 13px; color: #6a6e72; }
.rl-card td.c-sale, .rl-card td.c-cost, .rl-card td.c-margin { font-family: var(--mono); }
.rl-card table[data-view="tech"] td.c-pay, .rl-card table[data-view="tech"] td.c-cost, .rl-card table[data-view="tech"] td.c-margin,
.rl-card table[data-view="desk"] td.c-cost, .rl-card table[data-view="desk"] td.c-margin { font-size: 0; background: repeating-linear-gradient(-45deg, #f1f0ec 0 6px, #e6e4de 6px 12px); }
.rl-card table[data-view="tech"] td.c-pay::after, .rl-card table[data-view="tech"] td.c-cost::after, .rl-card table[data-view="tech"] td.c-margin::after,
.rl-card table[data-view="desk"] td.c-cost::after, .rl-card table[data-view="desk"] td.c-margin::after { content: "無權限"; font-size: 13px; font-family: var(--font); color: #55595d; }
.rl-note { margin-top: 14px; font-weight: 700; font-size: 15.5px; }
.rl-foot { margin-top: 10px; font-size: 13.5px; color: #6a6e72; }

/* 4. 逐列翻開 */
.au-flip .fp-top { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.au-flip .fp-all, .fp-row > button { background: none; border: 1px solid #0e0f10; padding: 8px 14px; font-size: 14px; font-weight: 700; color: #0e0f10; }
.fp-row { display: grid; grid-template-columns: 18% 1fr auto; gap: 16px; align-items: center; padding: 18px 0; border-top: 1px solid var(--line); }
.fp-row:last-child { border-bottom: 1px solid var(--line); }
.fp-row .k { color: #6a6e72; }
.fp-card { position: relative; perspective: 800px; min-height: 52px; }
.fp-old, .fp-new { position: absolute; inset: 0; display: flex; align-items: center; gap: 14px; backface-visibility: hidden; transition: transform .55s ease; padding: 0 4px; }
.fp-old { color: #55595d; }
.fp-new { font-weight: 900; transform: rotateX(-180deg); }
.fp-row.open .fp-old { transform: rotateX(180deg); }
.fp-row.open .fp-new { transform: none; }
.fp-card .lab { font-family: var(--mono); font-size: 11.5px; font-weight: 400; letter-spacing: .06em; border: 1px solid currentColor; padding: 1px 6px; white-space: nowrap; }
.fp-new .lab { background: var(--signal); border-color: var(--signal); color: #0e0f10; }
@media (max-width: 760px) {
  .fp-row { grid-template-columns: 1fr; gap: 8px; }
  .fp-card { min-height: 64px; }
  .fp-row > button { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .fp-card { min-height: 0; display: grid; gap: 6px; }
  .fp-old, .fp-new { position: static; transform: none !important; }
}

/* 5. 拍照辨識示範 */
.au-scan { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin: 56px 0; padding-top: 56px; border-top: 1px solid var(--line); align-items: start; }
.sc-paper { position: relative; background: #fbfaf6; border: 1px solid #d6d4ce; padding: 28px; transform: rotate(-1.5deg); overflow: hidden; font-family: "Noto Sans TC", sans-serif; }
.sc-paper .t { font-size: 18px; font-weight: 900; text-align: center; }
.sc-paper table, .sc-form table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 15px; }
.sc-paper td, .sc-paper th { border: 1px solid #b9b6ae; padding: 6px 8px; }
.sc-paper .sum { margin-top: 10px; text-align: right; font-weight: 700; }
.sc-paper .line { position: absolute; left: 0; right: 0; top: -10%; height: 3px; background: var(--signal); box-shadow: 0 0 18px 6px rgba(245, 183, 0, .35); opacity: 0; }
.au-scan.run .sc-paper .line { animation: sc-sweep 1.8s ease-in-out 1; }
@keyframes sc-sweep { 0% { top: 0; opacity: 1; } 100% { top: 100%; opacity: 1; } }
.sc-form { background: #fff; border: 1px solid var(--rule-light); padding: 24px; }
.sc-form .row { display: grid; grid-template-columns: 64px 1fr; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--rule-light); }
.sc-form .k { color: #6a6e72; font-size: 14px; }
.sc-form th { font-weight: 400; font-size: 13px; color: #6a6e72; text-align: left; padding: 6px 0; border-bottom: 1px solid var(--rule-light); }
.sc-form td { padding: 8px 0; border-bottom: 1px solid var(--rule-light); height: 40px; }
[data-fill] { display: inline-block; min-width: 3em; min-height: 1.4em; border-bottom: 1px dashed #b9b6ae; }
[data-fill].in { border-bottom-color: transparent; background: #fff4cc; animation: sc-pop .35s ease; }
@keyframes sc-pop { from { background: var(--signal); } to { background: #fff4cc; } }
.sc-state { margin-top: 14px; font-size: 14.5px; font-weight: 700; }
.sc-state .ok { display: none; }
.au-scan.done .sc-state .wait { display: none; }
.au-scan.done .sc-state .ok { display: inline; }
.au-scan.done .sc-state .ok::before { content: "✓ "; }
.sc-replay, .as-replay { margin-top: 14px; background: none; border: 1px solid #0e0f10; padding: 6px 14px; font-size: 13.5px; }
@media (max-width: 760px) { .au-scan { grid-template-columns: 1fr; } }

/* 6. 小幫手示範 */
.au-ask { margin: 56px 0; padding-top: 32px; border-top: 1px solid var(--line); max-width: 760px; }
.as-input { margin-top: 12px; background: #fff; border: 1px solid #0e0f10; padding: 14px 16px; font-size: 18px; min-height: 58px; display: flex; align-items: center; }
.as-input .caret { width: 2px; height: 22px; background: #0e0f10; margin-left: 2px; animation: as-blink 1s steps(1) infinite; }
@keyframes as-blink { 50% { opacity: 0; } }
.au-ask.done .caret { display: none; }
.as-result { margin-top: 12px; background: #fff; border: 1px solid var(--rule-light); padding: 16px; animation: fl-in .4s ease; }
.as-title { font-weight: 900; }
.as-title .chip { font-weight: 700; font-size: 13.5px; background: #fff4cc; border: 1px solid #0e0f10; padding: 2px 8px; margin-left: 8px; }
.as-result table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14.5px; }
.as-result td { padding: 8px 8px 8px 0; border-top: 1px solid var(--rule-light); }

/* 7. 小算盤 */
.au-calc { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 56px 0; border: 1px solid #0e0f10; }
.cc-in { padding: 28px; display: grid; gap: 14px; background: #fff; }
.cc-in label { display: grid; gap: 6px; font-size: 15px; font-weight: 700; }
.cc-in input { font: 20px var(--mono); padding: 10px 12px; border: 1px solid #0e0f10; width: 100%; max-width: 220px; background: #fff; color: #0e0f10; }
.cc-hint { font-size: 13.5px; color: #6a6e72; }
.cc-res { background: #0e0f10; color: var(--paper); padding: 28px; display: flex; flex-direction: column; justify-content: center; }
.cc-out { font-size: 18px; }
.cc-out strong { font-family: var(--mono); font-size: clamp(32px, 4vw, 48px); color: var(--signal); font-weight: 700; line-height: 1.2; }
.cc-detail { margin-top: 10px; font-family: var(--mono); font-size: 13.5px; color: var(--grey); }
.cc-note { margin-top: 18px; font-size: 13.5px; color: var(--grey); }
@media (max-width: 760px) { .au-calc { grid-template-columns: 1fr; } }

/* 8. 功能示意圖滑過:輕微放大、出現重點標籤 */
.au-show, .au-pair figure { position: relative; }
.au-show img, .au-pair img { transition: transform .45s ease; }
.au-show, .au-pair figure { overflow: hidden; }
.au-show::after, .au-pair figure::after { content: attr(data-tag); position: absolute; left: 16px; top: 72px; background: #0e0f10; color: var(--signal); font: 700 13px var(--font); padding: 6px 12px; opacity: 0; transform: translateY(-6px); transition: opacity .3s ease, transform .3s ease; pointer-events: none; }
.au-pair figure::after { top: 16px; }
.au-show:hover img, .au-pair figure:hover img { transform: scale(1.02); }
.au-show:hover::after, .au-pair figure:hover::after { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .au-story .screen .shot, .fl-panels img, .au-show img, .au-pair img { transition: none; animation: none; }
}
.fl-panels figure { max-height: 72vh; }
.au-story .note { margin-top: 4px; font-size: 12px; color: var(--grey); }