/*
 * 說拍 SayCam 官網樣式。共用骨架在 /bluebox/bluebox.css，這裡只放主色與產品專屬元件（前綴 sc-）。
 * 主色取自 App icon：觀景框近黑 #1A191D、錄影點 #FF4A2E。
 * 主色只用在勾選、焦點、選取；紅色只出現在模擬畫面裡 App 真的有的紅（錄影鈕、錄影計時、結束、刪除）。
 */
:root {
  --bb-accent: #ff4a2e;
  --bb-accent-ink: #121110;
  --bb-accent-soft: rgba(255, 74, 46, 0.16);

  /* 模擬畫面：照 App 的實際色值（CameraRecordButtonFace、CameraHeader） */
  --sc-rec: #ff5945;      /* 拍攝鈕 */
  --sc-timer: #ff333b;    /* 錄影計時底色 */
  --sc-ios-bg: #000;
  --sc-ios-sheet: #1c1c1e;
  --sc-ios-row: #2c2c2e;
  --sc-ios-line: rgba(255, 255, 255, 0.12);
  --sc-ios-text: #fff;
  --sc-ios-text-2: rgba(235, 235, 245, 0.6);
  --sc-ios-blue: #0a84ff;
}

/* ---------- 導覽列 ---------- */
.sc-nav-soon { white-space: nowrap; }
@media (max-width: 520px) { .sc-nav-soon { display: none; } }

/* ---------- 首屏 ---------- */
.sc-hero { padding-block: clamp(24px, 4vw, 56px) clamp(56px, 6vw, 96px); overflow: clip; }
.sc-hero__grid {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(32px, 6vw, 96px);
}
.sc-hero__copy .bb-h1 { max-width: 11em; }
.sc-hero .bb-h1 .sc-line { display: inline-block; }
.sc-hero__sub {
  margin: var(--bb-space-4) 0 0; font-size: clamp(1.25rem, 2.1vw, 1.75rem); line-height: 1.3;
  font-weight: 600; letter-spacing: -0.01em; color: var(--bb-text); text-wrap: balance;
}
.sc-hero__sub + .bb-lede { margin-top: var(--bb-space-3); }
.sc-hero__cta { display: flex; flex-wrap: wrap; gap: var(--bb-space-3); margin-top: var(--bb-space-6); }
.sc-badges { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--bb-space-2) var(--bb-space-5); margin-top: var(--bb-space-5); font-size: var(--bb-fs-small); font-weight: 600; color: var(--bb-text); }
.sc-badges li { display: inline-flex; align-items: center; gap: 6px; }
.sc-badges .sc-ico { width: 18px; height: 18px; color: var(--bb-accent); stroke-width: 2.4; }
.sc-hero__req { margin-top: var(--bb-space-4); }
.sc-hero__device { display: grid; justify-items: center; --phone-w: clamp(280px, 24vw, 340px); }
.sc-hero__device .bb-phone { --phone-w: inherit; }
@media (max-width: 960px) {
  .sc-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--bb-space-7); }
  .sc-hero__device { --phone-w: min(300px, calc(100vw - 2 * var(--bb-gutter))); }
}
@media (max-width: 520px) {
  .sc-hero .bb-h1 { font-size: 2.25rem; }
  .sc-hero .bb-lede { margin-top: var(--bb-space-4); font-size: 1.0625rem; }
  .sc-hero__cta { margin-top: var(--bb-space-5); }
  .sc-hero__cta .bb-btn { padding: 0 16px; }
}

/* ---------- 模擬畫面共用：以螢幕寬為單位，390 寬時 1 單位 = 1pt ---------- */
.sc-screen { container-type: inline-size; }
.sc-ui {
  --u: calc(100cqw / 390);
  position: absolute; inset: 0; overflow: hidden;
  color: #fff; font-family: var(--bb-font); line-height: 1.25;
  font-size: calc(var(--u) * 15);
  letter-spacing: 0; text-wrap: nowrap;
  user-select: none;
}
.sc-ui svg { display: block; flex: none; }
.sc-ico { width: calc(var(--u) * 24); height: calc(var(--u) * 24); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* 狀態列與瀏海 */
.sc-island { position: absolute; top: calc(var(--u) * 11); left: 50%; width: calc(var(--u) * 120); height: calc(var(--u) * 34); margin-left: calc(var(--u) * -60); border-radius: 999px; background: #000; z-index: 3; }
.sc-status { position: absolute; top: calc(var(--u) * 18); left: calc(var(--u) * 34); right: calc(var(--u) * 30); display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: calc(var(--u) * 15); z-index: 2; }
.sc-status__r { display: flex; gap: calc(var(--u) * 5); align-items: center; }
.sc-status__r i { display: block; background: #fff; border-radius: calc(var(--u) * 2); }
.sc-status__r i:nth-child(1) { width: calc(var(--u) * 17); height: calc(var(--u) * 10); clip-path: polygon(0 100%, 0 70%, 25% 70%, 25% 100%, 37% 100%, 37% 45%, 62% 45%, 62% 100%, 75% 100%, 75% 15%, 100% 15%, 100% 100%); border-radius: 0; }
.sc-status__r i:nth-child(2) { width: calc(var(--u) * 24); height: calc(var(--u) * 12); border-radius: calc(var(--u) * 4); opacity: 0.9; }
.sc-status__r--air { gap: calc(var(--u) * 6); }
.sc-air { width: calc(var(--u) * 17); height: calc(var(--u) * 17); color: #fff; }
.sc-home { position: absolute; bottom: calc(var(--u) * 8); left: 50%; width: calc(var(--u) * 134); height: calc(var(--u) * 5); margin-left: calc(var(--u) * -67); border-radius: 999px; background: #fff; opacity: 0.85; z-index: 3; }

/* ---------- 拍攝畫面 ---------- */
/* 拍攝畫面背景：真實照片，上下加淡淡的暗角讓控制列與字幕讀得清楚 */
.sc-scene { position: absolute; inset: 0; background: #2a2621; overflow: hidden; }
.sc-photo, .sc-photo img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.sc-photo img { object-fit: cover; object-position: 50% 40%; filter: brightness(0.84) saturate(1.04); transform-origin: 50% 42%; }
.sc-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.38), transparent 20%, transparent 44%, rgba(0,0,0,0.36) 62%, rgba(0,0,0,0.58)); }
/* 錄影中：很輕微的手持晃動與緩慢推近；停止時靜止 */
@keyframes sc-handheld {
  0% { transform: scale(1) translate(0, 0); }
  30% { transform: scale(1.014) translate(-0.5%, 0.3%); }
  60% { transform: scale(1.024) translate(0.4%, -0.4%); }
  100% { transform: scale(1.032) translate(0.6%, 0.2%); }
}
#hero-cam.is-rec .sc-photo img { animation: sc-handheld 9s ease-in-out both; }
.sc-cam__top { position: absolute; top: calc(var(--u) * 62); left: 0; right: 0; height: calc(var(--u) * 48); padding-inline: calc(var(--u) * 16); display: flex; align-items: center; z-index: 2; }
.sc-cam__idle { display: flex; align-items: center; width: 100%; gap: calc(var(--u) * 8); }
.sc-cam__idle .sp { flex: 1; }
.sc-pill { height: calc(var(--u) * 32); border-radius: 999px; background: rgba(0, 0, 0, 0.12); backdrop-filter: blur(calc(var(--u) * 6)); display: flex; align-items: center; }
.sc-pill--metric { gap: calc(var(--u) * 8); padding-inline: calc(var(--u) * 8); }
.sc-metric { display: inline-flex; align-items: baseline; gap: calc(var(--u) * 2); font: 500 calc(var(--u) * 14) var(--bb-font); font-variant-numeric: tabular-nums; }
.sc-metric small { font-size: calc(var(--u) * 7); opacity: 0.65; position: relative; top: calc(var(--u) * -4); font-weight: 500; }
.sc-pill--lang { padding-left: calc(var(--u) * 11); gap: 0; font-size: calc(var(--u) * 12); font-weight: 500; }
.sc-pill--lang .sc-ico { width: calc(var(--u) * 20); height: calc(var(--u) * 20); margin-inline: calc(var(--u) * 12); }
.sc-pill--lang span { padding-right: calc(var(--u) * 2); }
.sc-timer { display: none; margin-inline: auto; padding: calc(var(--u) * 6) calc(var(--u) * 10); border-radius: calc(var(--u) * 9); background: var(--sc-timer); font: 500 calc(var(--u) * 17) ui-rounded, var(--bb-font); font-variant-numeric: tabular-nums; }
.sc-cam.is-rec .sc-cam__idle { display: none; }
.sc-cam.is-rec .sc-timer { display: block; }

.sc-caption {
  position: absolute; left: 50%; top: 62%; width: calc(var(--u) * 336); margin-left: calc(var(--u) * -168);
  text-align: center; font-weight: 600; font-size: calc(var(--u) * 21); line-height: 1.36;
  text-shadow: calc(var(--u) * 1.1) calc(var(--u) * 1.1) calc(var(--u) * 1.1) rgba(0, 0, 0, 0.45);
  text-wrap: balance; white-space: normal; overflow-wrap: anywhere; line-break: strict; word-break: keep-all;
  z-index: 2; min-height: calc(var(--u) * 58);
}
.sc-caption--top { top: 20%; }
.sc-cam__dock { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 24); z-index: 2; display: grid; justify-items: center; gap: calc(var(--u) * 14); text-shadow: 0 calc(var(--u)) calc(var(--u) * 3) rgba(0, 0, 0, 0.7); }
.sc-zoom { display: flex; gap: calc(var(--u) * 10); }
.sc-zoom span { min-width: calc(var(--u) * 38); height: calc(var(--u) * 38); display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, 0.2); font-size: calc(var(--u) * 12); font-weight: 700; }
.sc-zoom .on { color: #ffd60a; }
.sc-controls { display: flex; align-items: center; gap: calc(var(--u) * 18); }
.sc-controls__side { width: calc(var(--u) * 48); height: calc(var(--u) * 48); display: grid; place-items: center; }
.sc-controls__side .sc-ico { width: calc(var(--u) * 28); height: calc(var(--u) * 28); }
.sc-stop { display: none; flex-direction: column; align-items: center; gap: calc(var(--u) * 4); color: #ff453a; font-size: calc(var(--u) * 11); font-weight: 400; }
.sc-stop .sc-ico { width: calc(var(--u) * 22); height: calc(var(--u) * 22); fill: currentColor; stroke: none; }
.sc-cam.is-rec .sc-switch { display: none; }
.sc-cam.is-rec .sc-stop { display: flex; }
.sc-rb { width: calc(var(--u) * 92); height: calc(var(--u) * 92); display: grid; place-items: center; position: relative; transition: transform 160ms var(--bb-ease-out); }
.sc-rb::before { content: ""; position: absolute; width: calc(var(--u) * 76); height: calc(var(--u) * 76); border-radius: 50%; border: calc(var(--u) * 3) solid #fff; }
.sc-rb::after { content: ""; position: absolute; width: calc(var(--u) * 62); height: calc(var(--u) * 62); border-radius: 50%; background: var(--sc-rec); }
.sc-rb__face { position: relative; z-index: 1; display: grid; justify-items: center; gap: calc(var(--u) * 2); font-weight: 600; text-shadow: none; }
.sc-rb__face .pause { display: none; width: calc(var(--u) * 20); height: calc(var(--u) * 20); fill: #fff; stroke: none; }
.sc-rb__face b { display: none; font-size: calc(var(--u) * 9); font-weight: 600; }
.sc-cam.is-rec .sc-rb__face .pause, .sc-cam.is-rec .sc-rb__face b { display: block; }
.sc-rb.is-press { transform: scale(0.92); }
.sc-takebar { display: grid; justify-items: center; gap: calc(var(--u) * 7); font-size: calc(var(--u) * 15); font-weight: 600; color: #fff; }
.sc-takebar__segs { display: flex; gap: calc(var(--u) * 4); width: calc(var(--u) * 210); height: calc(var(--u) * 5); }
.sc-takebar__segs i { flex: 1; border-radius: 999px; background: rgba(255, 255, 255, 0.4); }
.sc-takebar__segs i.on { background: rgba(255, 255, 255, 0.9); }
.sc-takebar__segs i.gone { flex: 0; }
.sc-takeactions { display: flex; align-items: center; gap: calc(var(--u) * 10); height: calc(var(--u) * 44); font-size: calc(var(--u) * 16); }
.sc-takeactions span { display: inline-flex; align-items: center; gap: calc(var(--u) * 6); padding: calc(var(--u) * 8) calc(var(--u) * 14); border-radius: 999px; background: rgba(120, 120, 128, 0.36); }
.sc-takeactions .sc-ico { width: calc(var(--u) * 17); height: calc(var(--u) * 17); }
.sc-finish { background: #fff !important; color: #ff3b30; font-weight: 600; text-shadow: none; }
.sc-notice { display: inline-flex; align-items: center; gap: calc(var(--u) * 6); }
.sc-notice .sc-ico { width: calc(var(--u) * 15); height: calc(var(--u) * 15); }

/* ---------- iOS 深色面板類畫面（回看、歷史、設定） ---------- */
.sc-sheet { background: var(--sc-ios-bg); }
.sc-nb { position: absolute; top: calc(var(--u) * 58); left: 0; right: 0; height: calc(var(--u) * 52); padding-inline: calc(var(--u) * 16); display: flex; align-items: center; justify-content: space-between; font-size: calc(var(--u) * 17); }
.sc-nb strong { font-weight: 600; position: absolute; left: 0; right: 0; text-align: center; pointer-events: none; }
.sc-nb .blue { color: var(--sc-ios-blue); }
.sc-nb .sc-ico { width: calc(var(--u) * 22); height: calc(var(--u) * 22); }
.sc-body--flush { padding-inline: 0; }
.sc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 2); }
.sc-tile { position: relative; aspect-ratio: 1; overflow: hidden; background: #222; }
.sc-tile picture, .sc-tile img { display: block; width: 100%; height: 100%; }
.sc-tile img { object-fit: cover; opacity: 0.72; filter: saturate(0.85); }
.sc-tile.sel img { opacity: 1; filter: none; }
.sc-tile .d { position: absolute; left: calc(var(--u) * 5); bottom: calc(var(--u) * 4); display: inline-flex; align-items: center; gap: calc(var(--u) * 3); font-size: calc(var(--u) * 13); font-weight: 600; text-shadow: 0 0 calc(var(--u) * 3) rgba(0,0,0,.7); }
.sc-tile .d .sc-ico { width: calc(var(--u) * 13); height: calc(var(--u) * 13); fill: #fff; stroke: none; }
.sc-tile.sel { box-shadow: inset 0 0 0 calc(var(--u) * 4) var(--sc-ios-blue); }
.sc-tile .ck { position: absolute; top: calc(var(--u) * 6); right: calc(var(--u) * 6); width: calc(var(--u) * 22); height: calc(var(--u) * 22); border-radius: 50%; background: var(--sc-ios-blue); display: grid; place-items: center; }
.sc-tile .ck .sc-ico { width: calc(var(--u) * 14); height: calc(var(--u) * 14); stroke-width: 3; }
.sc-body { position: absolute; top: calc(var(--u) * 116); left: 0; right: 0; bottom: 0; padding-inline: calc(var(--u) * 16); }
.sc-btn-bordered { display: inline-flex; align-items: center; justify-content: center; min-height: calc(var(--u) * 44); padding-inline: calc(var(--u) * 18); border-radius: 999px; background: rgba(120, 120, 128, 0.32); font-size: calc(var(--u) * 17); color: var(--sc-ios-blue); }
.sc-trash { color: #ff453a; }
.sc-group { margin-top: calc(var(--u) * 14); border-radius: calc(var(--u) * 12); background: var(--sc-ios-sheet); overflow: hidden; }
.sc-row { display: flex; align-items: center; gap: calc(var(--u) * 12); padding: calc(var(--u) * 12) calc(var(--u) * 16); min-height: calc(var(--u) * 48); border-top: 1px solid var(--sc-ios-line); }
.sc-row:first-child { border-top: 0; }
.sc-row__main { flex: 1; min-width: 0; }
.sc-row__t { font-size: calc(var(--u) * 16); }
.sc-row__s { margin-top: calc(var(--u) * 2); font-size: calc(var(--u) * 12.5); color: var(--sc-ios-text-2); white-space: normal; line-height: 1.3; }
.sc-row .check { width: calc(var(--u) * 20); height: calc(var(--u) * 20); color: var(--bb-accent); stroke-width: 2.4; }
.sc-row .sc-ico { width: calc(var(--u) * 22); height: calc(var(--u) * 22); }
.sc-row__v { color: var(--sc-ios-text-2); font-size: calc(var(--u) * 15); }
.sc-grouphead { margin: calc(var(--u) * 22) calc(var(--u) * 16) calc(var(--u) * -6); font-size: calc(var(--u) * 12.5); color: var(--sc-ios-text-2); }
.sc-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: calc(var(--u) * 2); border-radius: calc(var(--u) * 9); background: rgba(118, 118, 128, 0.24); text-align: center; font-size: calc(var(--u) * 13); min-width: calc(var(--u) * 150); }
.sc-seg span { padding: calc(var(--u) * 5) 0; border-radius: calc(var(--u) * 7); }
.sc-seg span.on { background: #636366; font-weight: 600; }

/* 回看畫面 */
.sc-review__video { position: relative; margin: calc(var(--u) * 6) auto 0; width: calc(var(--u) * 200); height: calc(var(--u) * 356); border-radius: calc(var(--u) * 10); overflow: hidden; background: #000; }
.sc-review__video .sc-caption { top: auto; bottom: calc(var(--u) * 46); width: calc(var(--u) * 180); margin-left: calc(var(--u) * -90); font-size: calc(var(--u) * 12.5); min-height: 0; text-shadow: calc(var(--u) * 0.6) calc(var(--u) * 0.6) calc(var(--u) * 0.6) rgba(0, 0, 0, 0.45); }
.sc-cue { display: flex; gap: calc(var(--u) * 10); padding: calc(var(--u) * 11) calc(var(--u) * 16); border-top: 1px solid var(--sc-ios-line); align-items: flex-start; }
.sc-cue:first-child { border-top: 0; }
.sc-cue time { flex: none; width: calc(var(--u) * 40); font-size: calc(var(--u) * 12.5); color: var(--sc-ios-text-2); font-variant-numeric: tabular-nums; padding-top: calc(var(--u) * 2); }
.sc-cue p { flex: 1; white-space: normal; font-size: calc(var(--u) * 17); line-height: 1.35; }
.sc-cue.edit { background: rgba(10, 132, 255, 0.14); }
.sc-cue .fix { white-space: nowrap; font-size: 1.18em; }
.sc-cue del { color: var(--sc-ios-text-2); text-decoration: line-through; margin-right: calc(var(--u) * 3); }
.sc-cue ins { text-decoration: none; font-weight: 700; color: var(--bb-accent); box-shadow: inset 0 -3px 0 var(--bb-accent); }
.sc-exportbar { position: absolute; left: calc(var(--u) * 16); right: calc(var(--u) * 16); bottom: calc(var(--u) * 28); }
.sc-prominent { display: grid; place-items: center; min-height: calc(var(--u) * 50); border-radius: 999px; background: var(--sc-ios-blue); font-size: calc(var(--u) * 17); font-weight: 600; }
.sc-style { display: grid; gap: calc(var(--u) * 10); }

/* 輸出完成畫面：照 App 的輸出預覽（珊瑚色外框、「影片已完成」），加上回看頁的兩顆按鈕 */
.sc-exp { background: #000; }
.sc-exp__ring { position: absolute; inset: calc(var(--u) * 5); border-radius: calc(var(--u) * 50); border: calc(var(--u) * 4) solid var(--sc-rec); z-index: 3; pointer-events: none; }
.sc-exp__done { position: absolute; top: calc(var(--u) * 86); left: 0; right: 0; z-index: 2; display: flex; justify-content: center; align-items: center; gap: calc(var(--u) * 8); font-size: calc(var(--u) * 19); font-weight: 600; text-shadow: 0 calc(var(--u)) calc(var(--u) * 4) rgba(0, 0, 0, 0.6); }
.sc-exp__done .sc-ico { width: calc(var(--u) * 24); height: calc(var(--u) * 24); stroke-width: 2.6; color: #fff; }
.sc-exp__acts { position: absolute; left: calc(var(--u) * 20); right: calc(var(--u) * 20); bottom: calc(var(--u) * 34); z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 10); }
.sc-bordered2 { display: grid; place-items: center; min-height: calc(var(--u) * 50); border-radius: 999px; background: rgba(120, 120, 128, 0.5); backdrop-filter: blur(calc(var(--u) * 8)); font-size: calc(var(--u) * 17); font-weight: 600; }
.sc-exp .sc-prominent { font-size: calc(var(--u) * 17); }

/* ---------- 功能列：手機截取上半或下半 ---------- */
.sc-feat-h { font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem); }
.sc-fp { --phone-w: clamp(230px, 62cqw, 320px); width: 100%; display: grid; justify-items: center; }
.sc-fp__crop {
  width: 100%; height: calc(var(--phone-w) * var(--crop, 1.5));
  display: flex; justify-content: center; align-items: flex-start; overflow: hidden;
  padding-inline: var(--bb-gutter); margin-inline: calc(-1 * var(--bb-gutter)); width: calc(100% + 2 * var(--bb-gutter));
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent);
  mask-image: linear-gradient(to bottom, #000 80%, transparent);
}
.sc-fp__crop--end { align-items: flex-end; -webkit-mask-image: linear-gradient(to top, #000 80%, transparent); mask-image: linear-gradient(to top, #000 80%, transparent); }
.sc-fp .bb-phone { --phone-w: inherit; }
.sc-fp__crop--full { height: auto; -webkit-mask-image: none; mask-image: none; }
.sc-fp--full { --phone-w: clamp(230px, 56cqw, 290px); }
.sc-fp__cap { margin-top: var(--bb-space-3); text-align: center; font-size: var(--bb-fs-small); font-weight: 600; color: var(--bb-text-2); text-wrap: balance; }

/* 匯入：左「照片」挑選，右同一支影片已有字幕 */
.sc-fp--duo { --phone-w: clamp(150px, 41cqw, 235px); }
.sc-duo { display: grid; grid-template-columns: auto 28px auto; align-items: center; justify-content: center; gap: var(--bb-space-2); }
.sc-duo .sc-fp__crop { width: auto; margin: 0; padding: 0; }
.sc-duo__arrow { display: grid; place-items: center; color: var(--bb-text-2); }
.sc-duo__arrow .sc-ico { width: 22px; height: 22px; }
@media (max-width: 520px) {
  .sc-fp--duo { --phone-w: min(230px, calc(100vw - 2 * var(--bb-gutter) - 80px)); }
  .sc-duo { grid-template-columns: auto; justify-items: center; }
  .sc-duo__arrow { transform: rotate(90deg); }
}

/* ---------- 信任、FAQ ---------- */
.sc-trust-note { margin-top: var(--bb-space-6); max-width: 46rem; }
.sc-trust-note a { display: inline-block; padding-block: 10px; margin-block: -10px; color: var(--bb-text-2); }
.sc-faq-grid .bb-faq { max-width: none; }
.sc-faq__head { position: sticky; top: calc(var(--bb-nav-h) + var(--bb-space-5)); }
@media (max-width: 860px) { .sc-faq__head { position: static; } }
.bb-faq summary, .bb-faq details > div { min-width: 0; overflow-wrap: anywhere; }
.sc-langs { margin-top: var(--bb-space-3); color: var(--bb-text-3); font-size: var(--bb-fs-small); }

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

/* ---------- 動態與無障礙 ---------- */
@media (prefers-reduced-motion: reduce) {
  .sc-rb { transition: none; }
  #hero-cam.is-rec .sc-photo img { animation: none; }
}