/* ══════════════════════════════════════════════════════════════
   CHERRY SLIDES — LAYOUT LIBRARY
   ──────────────────────────────────────────────────────────────
   8 modular layouts + utilities.
   呢個 file 只負責結構，所有色 / 字 / 字級由 design-tokens.css 注入。

   Naming convention：`cs-` prefix（避免衝撞）
   Layout class：`cs-<type>-<variant>`，例：`cs-cover-1`、`cs-chapter-1`

   Usage（HTML）:
     <div class="cs-deck">
       <div class="cs-slides-viewport">
         <div class="cs-slides-track">
           <div class="cs-slide cs-cover-1"> ... </div>
           <div class="cs-slide cs-chapter-1"> ... </div>
           ...
         </div>
       </div>
     </div>
   ══════════════════════════════════════════════════════════════ */

/* ── Reset & root ───────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body {
  height:100%; width:100%;
  font-family: var(--cs-font-body-zh);
  background: var(--cs-color-bg);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* ── Deck / Viewport / Track ────────────────────────────────── */
.cs-deck { width:100vw; height:100vh; display:flex; flex-direction:column; }
.cs-slides-viewport { flex:1; overflow:hidden; position:relative; }
.cs-slides-track {
  display:flex; height:100%;
  transition: transform var(--cs-anim-duration) var(--cs-anim-easing);
  will-change: transform;
}

/* ── Base Slide ─────────────────────────────────────────────── */
.cs-slide {
  flex: 0 0 100vw;
  width: 100vw;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--cs-color-bg);
  color: var(--cs-color-body);
  padding: var(--cs-pad-y) var(--cs-pad-x) calc(var(--cs-pad-y) + 20px);
  /* Em-based responsive base — em scales the entire layout */
  font-size: clamp(10px, 1.667vw, 22px);
}
.cs-slide > * { position: relative; z-index: 1; }

/* ── Background patterns（utility，疊喺 .cs-slide）─────────── */
/* 微網格底（雷蒙 signature） */
.cs-bg-grid {
  background-color: var(--cs-color-bg);
  background-image:
    linear-gradient(rgba(108,92,231,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(108,92,231,.04) 1px, transparent 1px);
  background-size: 0.75em 0.75em;
}
/* 圓點底（v3 風格） */
.cs-bg-dot {
  background-color: var(--cs-color-bg);
  background-image: radial-gradient(circle, var(--cs-color-brand-10) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ── Animation engine ───────────────────────────────────────── */
@keyframes cs-fade-in-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cs-smoke-in {
  0%   { opacity: 0; filter: blur(10px); transform: translateY(8px); }
  100% { opacity: 1; filter: blur(0);    transform: translateY(0); }
}
.cs-anim {
  opacity: 0;
  animation: cs-fade-in-up var(--cs-anim-duration) ease-out forwards;
  animation-delay: calc(var(--i, 0) * var(--cs-anim-stagger));
}
.cs-cover-1 .cs-anim, .cs-cover-2 .cs-anim {
  animation-name: cs-smoke-in;
  animation-duration: .85s;
  animation-delay: calc(var(--i, 0) * .22s);
}

/* ── Typography utilities ───────────────────────────────────── */
.cs-h1 {
  font-family: var(--cs-font-heading);
  font-size: var(--cs-fs-h1);
  font-weight: var(--cs-fw-heading);
  line-height: 1.08;
  letter-spacing: -1px;
  color: var(--cs-color-text);
}
.cs-h2 {
  font-family: var(--cs-font-heading);
  font-size: var(--cs-fs-h2);
  font-weight: var(--cs-fw-heading);
  line-height: 1.12;
  letter-spacing: -.6px;
  color: var(--cs-color-text);
}
.cs-h1 em, .cs-h2 em { color: var(--cs-color-brand); font-style: normal; }

.cs-body {
  font-family: var(--cs-font-body-zh);
  font-size: var(--cs-fs-body);
  font-weight: var(--cs-fw-body);
  line-height: 1.6;
  color: var(--cs-color-body);
}
.cs-sub  { font-size: var(--cs-fs-aux); color: var(--cs-color-sub); line-height: 1.6; }
.cs-meta { font-family: var(--cs-font-body-en); font-size: var(--cs-fs-meta); color: var(--cs-color-sub); font-weight: var(--cs-fw-meta); }

/* Eyebrow label（UPPERCASE micro label） */
.cs-eyebrow {
  font-family: var(--cs-font-body-en);
  font-size: var(--cs-fs-ey);
  font-weight: var(--cs-fw-label);
  color: var(--cs-color-brand);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 0.8em;
}

/* Title rule */
.cs-rule {
  width: var(--cs-rule-width);
  height: var(--cs-rule-height);
  background: var(--cs-color-brand);
  border-radius: 2px;
  margin: 0.5em 0 1em;
}

/* Pill */
.cs-pill {
  display: inline-flex; align-items: center; gap: 0.4em;
  background: var(--cs-color-brand-08);
  color: var(--cs-color-brand);
  font-family: var(--cs-font-body-en);
  font-size: var(--cs-fs-meta);
  font-weight: var(--cs-fw-label);
  padding: 0.4em 1em;
  border-radius: var(--cs-radius-pill);
  border: 1.5px solid var(--cs-color-brand-18);
}
.cs-pill::before { content:''; width: 0.4em; height: 0.4em; border-radius:50%; background: var(--cs-color-brand); }

/* Watermark page number */
.cs-watermark {
  position: absolute;
  font-family: var(--cs-font-body-en);
  font-size: var(--cs-fs-watermark);
  font-weight: 900;
  color: var(--cs-color-watermark);
  pointer-events: none;
  user-select: none;
  line-height: 1;
  z-index: 0 !important;
}

/* Inline footer */
.cs-inline-footer {
  position: absolute;
  bottom: 16px; left: 0; right: 0;
  padding: 0 var(--cs-pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--cs-color-inline-footer);
  font-family: var(--cs-font-body-en);
  font-size: var(--cs-fs-meta);
  font-weight: var(--cs-fw-meta);
  z-index: 1;
}

/* Progress bar + Nav bar */
.cs-progress-bar {
  position: fixed; top: 0; left: 0;
  height: 3px;
  background: var(--cs-color-brand);
  z-index: 300;
  transition: width .36s ease;
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 12px var(--cs-color-brand-30);
}
.cs-nav-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 200;
  height: 52px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px;
  background: rgba(250,250,248,.93);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--cs-color-brand-10);
}
.cs-nav-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--cs-color-brand-18);
  background: var(--cs-color-card);
  color: var(--cs-color-brand);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.cs-nav-btn:hover  { background: var(--cs-color-brand); color: #fff; border-color: var(--cs-color-brand); }
.cs-nav-btn:active { transform: scale(.9); }
.cs-nav-btn:disabled { opacity: .25; pointer-events: none; }
.cs-nav-counter {
  font-family: var(--cs-font-body-en);
  font-size: 13px; font-weight: 600;
  color: var(--cs-color-sub);
}

/* ════════════════════════════════════════════════════════════
   LAYOUT 1: COVER-1（封面 — 左文右圖 + 頂部色條 + 標題旁直條）
   ════════════════════════════════════════════════════════════ */
.cs-cover-1 {
  padding: 0;
  justify-content: space-between;
  background: var(--cs-color-card);
}
.cs-cover-1 .cs-cover-top-bar {
  position: absolute; top: 0; left: 0; right: 0;
  height: 8px;
  background: var(--cs-color-brand);
  z-index: 2;
}
.cs-cover-1 .cs-cover-brand {
  position: absolute; top: 1.8em; left: 4em;
  color: var(--cs-color-sub);
  font-family: var(--cs-font-body-en);
  font-size: var(--cs-fs-meta);
  font-weight: var(--cs-fw-meta);
  letter-spacing: .1em;
  z-index: 2;
}
.cs-cover-1 .cs-cover-body {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 3em;
  padding: 6em 4em 4em;
}
.cs-cover-1 .cs-cover-left { flex: 1; display: flex; flex-direction: column; }
.cs-cover-1 .cs-cover-right { width: 14em; display: flex; flex-direction: column; align-items: center; gap: 1em; flex-shrink: 0; }
.cs-cover-1 .cs-cover-title-block { display: flex; align-items: stretch; gap: 1em; }
.cs-cover-1 .cs-cover-title-bar {
  width: 6px;
  background: var(--cs-color-brand);
  border-radius: 3px;
  flex-shrink: 0;
}
.cs-cover-1 .cs-cover-title {
  font-family: var(--cs-font-heading);
  font-size: var(--cs-fs-cover);
  font-weight: var(--cs-fw-heading);
  line-height: 1.05;
  letter-spacing: -2px;
  color: var(--cs-color-text);
}
.cs-cover-1 .cs-cover-title em { color: var(--cs-color-brand); font-style: normal; }
.cs-cover-1 .cs-cover-subtitle {
  margin-top: 1.2em;
  padding-left: calc(6px + 1em);
  color: var(--cs-color-sub);
  font-size: var(--cs-fs-aux);
  line-height: 1.6;
  max-width: 28em;
}
.cs-cover-1 .cs-cover-photo {
  width: 12em; height: 14em;
  border-radius: var(--cs-radius);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(108,92,231,.12);
}
.cs-cover-1 .cs-cover-photo img { width: 100%; height: 100%; object-fit: cover; }
.cs-cover-1 .cs-cover-author {
  color: var(--cs-color-text);
  font-size: var(--cs-fs-meta);
  font-weight: var(--cs-fw-label);
  display: flex; align-items: center; gap: .4em;
}
.cs-cover-1 .cs-cover-author::before {
  content:''; display: inline-block;
  width: 4px; height: 1em;
  background: var(--cs-color-brand);
  border-radius: 2px;
}
.cs-cover-1 .cs-cover-url {
  position: absolute; bottom: 3em; left: 4em;
  font-family: var(--cs-font-body-en);
  font-size: var(--cs-fs-aux);
  font-weight: var(--cs-fw-label);
  color: var(--cs-color-brand);
  text-decoration: none;
}

/* ════════════════════════════════════════════════════════════
   LAYOUT 2: CHAPTER-1（章節分隔 — 圓 badge + 主色 H1 + 網格底）
   ════════════════════════════════════════════════════════════ */
.cs-chapter-1 {
  background-color: var(--cs-color-card);
  background-image:
    linear-gradient(rgba(108,92,231,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(108,92,231,.04) 1px, transparent 1px);
  background-size: 0.75em 0.75em;
  justify-content: center;
}
.cs-chapter-1 .cs-chapter-badge {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  margin-bottom: 1em;
}
.cs-chapter-1 .cs-chapter-num {
  width: 1.75em; height: 1.75em;
  border-radius: 50%;
  background: var(--cs-color-brand);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--cs-font-body-en);
  font-weight: 700;
  font-size: var(--cs-fs-aux);
}
.cs-chapter-1 .cs-chapter-label {
  font-size: var(--cs-fs-aux);
  color: var(--cs-color-sub);
}
.cs-chapter-1 .cs-chapter-h1 {
  font-family: var(--cs-font-heading);
  font-size: var(--cs-fs-h1);
  font-weight: var(--cs-fw-heading);
  line-height: 1.1;
  letter-spacing: -1.5px;
  color: var(--cs-color-brand);
  max-width: 28em;
}
.cs-chapter-1 .cs-chapter-sub {
  margin-top: 1em;
  font-size: var(--cs-fs-aux);
  color: var(--cs-color-sub);
  line-height: 1.6;
  max-width: 28em;
}

/* ════════════════════════════════════════════════════════════
   LAYOUT 3: CONTENT-1（一般內容 — 標題 + rule + 條列）
   ════════════════════════════════════════════════════════════ */
.cs-content-1 .cs-content-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 100%;
}
.cs-content-1 .cs-bullets {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .8em;
}
.cs-content-1 .cs-bullet {
  display: flex;
  align-items: flex-start;
  gap: .8em;
  font-size: var(--cs-fs-body);
  color: var(--cs-color-body);
  line-height: 1.55;
}
.cs-content-1 .cs-bullet::before {
  content: '';
  flex-shrink: 0;
  width: .35em; height: .35em;
  border-radius: 50%;
  background: var(--cs-color-brand);
  margin-top: .7em;
}
.cs-content-1 .cs-bullet strong { color: var(--cs-color-brand); font-weight: 700; }

/* ════════════════════════════════════════════════════════════
   LAYOUT 4: QUOTE-1（引言 — 大引號 + 主色強調 + 分隔線）
   ════════════════════════════════════════════════════════════ */
.cs-quote-1 {
  justify-content: center;
  align-items: center;
  text-align: center;
}
.cs-quote-1 .cs-quote-mark {
  font-family: var(--cs-font-display);
  font-size: 7em;
  font-style: italic;
  color: var(--cs-color-brand-15);
  line-height: .8;
  margin-bottom: -.2em;
}
.cs-quote-1 .cs-quote-text {
  font-family: var(--cs-font-heading);
  font-size: var(--cs-fs-h2);
  font-weight: var(--cs-fw-heading);
  line-height: 1.5;
  color: var(--cs-color-text);
  max-width: 26em;
  margin-bottom: 1em;
}
.cs-quote-1 .cs-quote-text em { color: var(--cs-color-brand); font-style: normal; }
.cs-quote-1 .cs-quote-divider {
  width: 2em; height: 3px;
  background: var(--cs-color-brand);
  border-radius: 2px;
  margin: 0 auto 1em;
}
.cs-quote-1 .cs-quote-attr {
  font-size: var(--cs-fs-aux);
  color: var(--cs-color-sub);
}

/* ════════════════════════════════════════════════════════════
   LAYOUT 5: IMAGE-1（左圖右文 — 主視覺 + 說明）
   ════════════════════════════════════════════════════════════ */
.cs-image-1 .cs-image-body {
  flex: 1;
  display: grid;
  grid-template-columns: 5fr 4fr;
  gap: 3em;
  align-items: center;
}
.cs-image-1 .cs-image-frame {
  width: 100%;
  border-radius: var(--cs-radius-lg);
  overflow: hidden;
  box-shadow:
    0 0.25em 0.4em rgba(108,92,231,.06),
    0 0.6em 1.5em rgba(108,92,231,.10);
  border: 1.5px solid var(--cs-color-brand-08);
}
.cs-image-1 .cs-image-frame img { width: 100%; display: block; }
.cs-image-1 .cs-image-text { display: flex; flex-direction: column; gap: 1em; }
/* 變體：右圖左文 */
.cs-image-1.cs-reverse .cs-image-body { grid-template-columns: 4fr 5fr; }
.cs-image-1.cs-reverse .cs-image-frame { order: 2; }
.cs-image-1.cs-reverse .cs-image-text { order: 1; }

/* ════════════════════════════════════════════════════════════
   LAYOUT 6: COMPARE-1（對比 — Before/After 雙欄）
   ════════════════════════════════════════════════════════════ */
.cs-compare-1 .cs-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5em;
  flex: 1;
  align-content: center;
}
.cs-compare-1 .cs-compare-card {
  border-radius: var(--cs-radius-lg);
  padding: 1.5em 1.4em;
  display: flex;
  flex-direction: column;
  gap: .8em;
}
.cs-compare-1 .cs-compare-card.cs-before {
  background: var(--cs-color-before-bg);
  border: 1.5px solid var(--cs-color-before-border);
}
.cs-compare-1 .cs-compare-card.cs-after {
  background: var(--cs-color-after-bg);
  border: 1.5px solid var(--cs-color-after-border);
}
.cs-compare-1 .cs-compare-label {
  font-family: var(--cs-font-body-en);
  font-size: var(--cs-fs-ey);
  font-weight: var(--cs-fw-label);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.cs-compare-1 .cs-before .cs-compare-label { color: var(--cs-color-sub); }
.cs-compare-1 .cs-after  .cs-compare-label { color: var(--cs-color-brand); }
.cs-compare-1 .cs-compare-title {
  font-size: var(--cs-fs-body);
  font-weight: 800;
  color: var(--cs-color-text);
  line-height: 1.2;
}
.cs-compare-1 .cs-after .cs-compare-title { color: var(--cs-color-brand); }
.cs-compare-1 .cs-compare-items {
  display: flex;
  flex-direction: column;
  gap: .5em;
}
.cs-compare-1 .cs-compare-item {
  font-size: var(--cs-fs-aux);
  color: var(--cs-color-body);
  line-height: 1.5;
  padding-left: 1em;
  position: relative;
}
.cs-compare-1 .cs-compare-item::before {
  content: '';
  position: absolute;
  left: 0; top: .55em;
  width: 5px; height: 5px;
  border-radius: 50%;
}
.cs-compare-1 .cs-before .cs-compare-item::before { background: var(--cs-color-muted); }
.cs-compare-1 .cs-after  .cs-compare-item::before { background: var(--cs-color-brand); }

/* ════════════════════════════════════════════════════════════
   LAYOUT 7: DATA-1（數據展示 — 大數字 + label）
   ════════════════════════════════════════════════════════════ */
.cs-data-1 .cs-data-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.cs-data-1 .cs-data-stats {
  display: flex;
  gap: 3em;
  margin: 1em 0;
  flex-wrap: wrap;
  justify-content: center;
}
.cs-data-1 .cs-data-stat { text-align: center; }
.cs-data-1 .cs-data-value {
  font-family: var(--cs-font-body-en);
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 900;
  color: var(--cs-color-brand);
  line-height: 1;
  letter-spacing: -2px;
}
.cs-data-1 .cs-data-label {
  font-size: var(--cs-fs-aux);
  color: var(--cs-color-sub);
  margin-top: .4em;
}
.cs-data-1 .cs-data-caption {
  margin-top: 1.5em;
  font-size: var(--cs-fs-body);
  font-weight: 700;
  color: var(--cs-color-brand);
  max-width: 32em;
}

/* ════════════════════════════════════════════════════════════
   LAYOUT 8: CTA-1（行動呼籲 — emoji + 標題 + 卡片 + QR）
   ════════════════════════════════════════════════════════════ */
.cs-cta-1 {
  justify-content: center;
  align-items: center;
  text-align: center;
}
.cs-cta-1 .cs-cta-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
}
.cs-cta-1 .cs-cta-emoji { font-size: clamp(44px, 5vw, 72px); }
.cs-cta-1 .cs-cta-h1 {
  font-family: var(--cs-font-heading);
  font-size: clamp(28px, 4vw, 56px);
  font-weight: var(--cs-fw-heading);
  letter-spacing: -1.5px;
  color: var(--cs-color-text);
  line-height: 1.1;
}
.cs-cta-1 .cs-cta-h1 em { color: var(--cs-color-brand); font-style: normal; }
.cs-cta-1 .cs-cta-sub {
  font-size: var(--cs-fs-aux);
  color: var(--cs-color-sub);
  line-height: 1.6;
  max-width: 28em;
}
.cs-cta-1 .cs-cta-cards {
  display: flex;
  gap: 1.5em;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1em;
}
.cs-cta-1 .cs-cta-card {
  background: var(--cs-color-card);
  border: 1.5px solid var(--cs-color-brand-18);
  border-radius: var(--cs-radius-lg);
  padding: 1.4em 1.8em;
  text-align: left;
  min-width: 12em;
}
.cs-cta-1 .cs-cta-card.cs-qr {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: .6em;
}
.cs-cta-1 .cs-cta-card-label {
  font-family: var(--cs-font-body-en);
  font-size: var(--cs-fs-ey);
  font-weight: var(--cs-fw-label);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cs-color-sub);
  margin-bottom: .4em;
}
.cs-cta-1 .cs-cta-card-value {
  font-size: var(--cs-fs-body);
  font-weight: 800;
  color: var(--cs-color-brand);
}

/* ════════════════════════════════════════════════════════════
   LAYOUT 9: COVER-2（封面變體 — 左文右漸層色塊）
   ════════════════════════════════════════════════════════════ */
.cs-cover-2 {
  padding: 0;
  background: var(--cs-color-text);
  color: #fff;
  flex-direction: row;
  align-items: stretch;
}
.cs-cover-2 .cs-cover-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4em 5em;
  z-index: 2;
  position: relative;
  max-width: 60%;
}
.cs-cover-2 .cs-cover-2-gradient {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 45%;
  background: linear-gradient(135deg, var(--cs-color-brand) 0%, #A78BFA 100%);
  opacity: .85;
  z-index: 1;
}
.cs-cover-2 .cs-cover-2-title {
  font-family: var(--cs-font-heading);
  font-size: var(--cs-fs-cover);
  font-weight: var(--cs-fw-heading);
  line-height: 1.05;
  letter-spacing: -2px;
  margin-bottom: .8em;
}
.cs-cover-2 .cs-cover-2-title em { color: #A78BFA; font-style: normal; }
.cs-cover-2 .cs-cover-2-sub {
  font-size: var(--cs-fs-aux);
  color: rgba(255,255,255,.7);
  line-height: 1.6;
  max-width: 24em;
}

/* ════════════════════════════════════════════════════════════
   LAYOUT 10: COVER-3（封面變體 — 全圖背景 + 暗層）
   ════════════════════════════════════════════════════════════ */
.cs-cover-3 {
  padding: 0;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}
.cs-cover-3 .cs-cover-3-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.cs-cover-3 .cs-cover-3-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,18,40,.55) 0%, rgba(20,18,40,.85) 100%);
  z-index: 1;
}
.cs-cover-3 .cs-cover-3-content {
  position: relative; z-index: 2;
  padding: 4em 3em;
  max-width: 36em;
}
.cs-cover-3 .cs-cover-3-title {
  font-family: var(--cs-font-heading);
  font-size: var(--cs-fs-cover);
  font-weight: var(--cs-fw-heading);
  line-height: 1.05;
  letter-spacing: -2px;
  margin-bottom: .6em;
}
.cs-cover-3 .cs-cover-3-title em { color: #A78BFA; font-style: normal; }
.cs-cover-3 .cs-cover-3-sub {
  font-size: var(--cs-fs-aux);
  color: rgba(255,255,255,.75);
  line-height: 1.6;
}

/* ════════════════════════════════════════════════════════════
   LAYOUT 11: CHAPTER-2（章節變體 — 主色滿版居中）
   ════════════════════════════════════════════════════════════ */
.cs-chapter-2 {
  background: var(--cs-color-brand);
  color: #fff;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.cs-chapter-2 .cs-chapter-2-num {
  font-family: var(--cs-font-body-en);
  font-size: clamp(80px, 12vw, 200px);
  font-weight: 900;
  line-height: 1;
  color: rgba(255,255,255,.25);
  margin-bottom: -.1em;
  letter-spacing: -.05em;
}
.cs-chapter-2 .cs-chapter-2-h1 {
  font-family: var(--cs-font-heading);
  font-size: clamp(40px, 5vw, 72px);
  font-weight: var(--cs-fw-heading);
  letter-spacing: -2px;
  line-height: 1.1;
}
.cs-chapter-2 .cs-chapter-2-sub {
  margin-top: 1em;
  font-size: var(--cs-fs-body);
  color: rgba(255,255,255,.75);
  max-width: 32em;
}

/* ════════════════════════════════════════════════════════════
   LAYOUT 12: CHAPTER-3（章節變體 — 照片遮罩背景）
   ════════════════════════════════════════════════════════════ */
.cs-chapter-3 {
  padding: 0;
  position: relative;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}
.cs-chapter-3 .cs-chapter-3-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.cs-chapter-3 .cs-chapter-3-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.7);
  z-index: 1;
}
.cs-chapter-3 .cs-chapter-3-content {
  position: relative; z-index: 2;
  padding: 4em 3em;
  max-width: 36em;
}
.cs-chapter-3 .cs-chapter-3-h2 {
  font-family: var(--cs-font-heading);
  font-size: var(--cs-fs-h1);
  font-weight: var(--cs-fw-heading);
  letter-spacing: -1.5px;
  line-height: 1.15;
}
.cs-chapter-3 .cs-chapter-3-divider {
  width: 60px; height: 3px;
  background: var(--cs-color-brand);
  margin: 1em auto;
}
.cs-chapter-3 .cs-chapter-3-p {
  font-size: var(--cs-fs-body);
  color: rgba(255,255,255,.85);
  line-height: 1.6;
}
.cs-chapter-3 .cs-chapter-3-p em { color: var(--cs-color-brand); font-style: normal; }

/* ════════════════════════════════════════════════════════════
   LAYOUT 13: CONTENT-2（內容變體 — 2 欄文字）
   ════════════════════════════════════════════════════════════ */
.cs-content-2 .cs-content-2-cols {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3em;
  align-content: center;
}
.cs-content-2 .cs-col-h3 {
  font-family: var(--cs-font-heading);
  font-size: var(--cs-fs-h3);
  font-weight: var(--cs-fw-heading);
  color: var(--cs-color-brand);
  margin-bottom: .6em;
}
.cs-content-2 .cs-col-p {
  font-size: var(--cs-fs-body);
  color: var(--cs-color-body);
  line-height: 1.6;
}

/* ════════════════════════════════════════════════════════════
   LAYOUT 14: CONTENT-3（內容變體 — 3 欄卡片 grid）
   ════════════════════════════════════════════════════════════ */
.cs-content-3 .cs-content-3-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2em;
  align-content: center;
}
.cs-content-3 .cs-grid-card {
  background: var(--cs-color-card);
  border: 1.5px solid var(--cs-color-brand-10);
  border-radius: var(--cs-radius-lg);
  padding: 1.4em 1.2em;
  display: flex;
  flex-direction: column;
  gap: .5em;
}
.cs-content-3 .cs-grid-icon { font-size: clamp(28px, 2.6vw, 40px); margin-bottom: .3em; }
.cs-content-3 .cs-grid-title {
  font-family: var(--cs-font-heading);
  font-size: var(--cs-fs-aux);
  font-weight: 800;
  color: var(--cs-color-text);
}
.cs-content-3 .cs-grid-desc {
  font-size: var(--cs-fs-meta);
  color: var(--cs-color-sub);
  line-height: 1.55;
}

/* ════════════════════════════════════════════════════════════
   LAYOUT 15: CONTENT-4（內容變體 — Step pills 編號流程）
   ════════════════════════════════════════════════════════════ */
.cs-content-4 .cs-content-4-steps {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .8em;
  justify-content: center;
}
.cs-content-4 .cs-step-row {
  display: flex;
  align-items: flex-start;
  gap: 1em;
  background: var(--cs-color-card);
  border: 1.5px solid var(--cs-color-sep);
  border-radius: 14px;
  padding: 1.2em 1.4em;
}
.cs-content-4 .cs-step-num {
  flex-shrink: 0;
  width: 2.4em; height: 2.4em;
  border-radius: 50%;
  background: var(--cs-color-brand);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--cs-font-body-en);
  font-weight: 800;
  font-size: var(--cs-fs-meta);
}
.cs-content-4 .cs-step-title {
  font-size: var(--cs-fs-aux);
  font-weight: 700;
  color: var(--cs-color-text);
  margin-bottom: .25em;
}
.cs-content-4 .cs-step-desc {
  font-size: var(--cs-fs-meta);
  color: var(--cs-color-sub);
  line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════
   LAYOUT 16: QUOTE-2（引言變體 — 背景圖 + 深色遮罩）
   ════════════════════════════════════════════════════════════ */
.cs-quote-2 {
  padding: 0;
  position: relative;
  color: #fff;
}
.cs-quote-2 .cs-quote-2-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.cs-quote-2 .cs-quote-2-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.75);
  z-index: 1;
}
.cs-quote-2 .cs-quote-2-content {
  position: relative; z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--cs-pad-y) var(--cs-pad-x);
  max-width: 38em;
}
.cs-quote-2 .cs-quote-2-text {
  font-family: var(--cs-font-heading);
  font-size: clamp(24px, 3vw, 44px);
  font-weight: var(--cs-fw-heading);
  line-height: 1.4;
  letter-spacing: -.5px;
}
.cs-quote-2 .cs-quote-2-text em { color: var(--cs-color-brand); font-style: normal; }
.cs-quote-2 .cs-quote-2-attr {
  margin-top: 1.5em;
  font-family: var(--cs-font-body-en);
  font-size: var(--cs-fs-meta);
  color: rgba(255,255,255,.55);
  letter-spacing: .1em;
}

/* ════════════════════════════════════════════════════════════
   LAYOUT 17: QUOTE-3（引言變體 — 深色 + 漸層豎條 + 大引號）
   ════════════════════════════════════════════════════════════ */
.cs-quote-3 {
  background: var(--cs-color-text);
  color: #fff;
  position: relative;
  justify-content: center;
}
.cs-quote-3 .cs-q3-bar {
  position: absolute;
  left: 0; top: 20%;
  height: 60%; width: 5px;
  background: linear-gradient(180deg, var(--cs-color-brand), #A78BFA);
  border-radius: 0 3px 3px 0;
}
.cs-quote-3 .cs-q3-deco {
  position: absolute;
  top: .6em; right: .8em;
  font-family: var(--cs-font-display);
  font-size: 8em;
  color: rgba(255,255,255,.05);
  line-height: 1;
  pointer-events: none;
  font-style: italic;
}
.cs-quote-3 .cs-q3-body { padding-left: 1.5em; max-width: 36em; }
.cs-quote-3 .cs-q3-text {
  font-family: var(--cs-font-heading);
  font-size: clamp(22px, 2.8vw, 40px);
  font-weight: var(--cs-fw-heading);
  line-height: 1.4;
  letter-spacing: -.5px;
}
.cs-quote-3 .cs-q3-text em { color: var(--cs-color-brand); font-style: normal; }
.cs-quote-3 .cs-q3-author {
  margin-top: 1.5em;
  font-family: var(--cs-font-body-en);
  font-size: var(--cs-fs-meta);
  color: rgba(255,255,255,.45);
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════
   LAYOUT 18: IMAGE-2（圖文變體 — 主色底 + 右大圖）
   ════════════════════════════════════════════════════════════ */
.cs-image-2 {
  background: var(--cs-color-brand);
  color: #fff;
  flex-direction: row;
  align-items: center;
  gap: 2em;
  padding-right: 0;
}
.cs-image-2 .cs-image-2-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.cs-image-2 .cs-image-2-h2 {
  font-family: var(--cs-font-heading);
  font-size: var(--cs-fs-h2);
  font-weight: var(--cs-fw-heading);
  letter-spacing: -.6px;
  line-height: 1.15;
}
.cs-image-2 .cs-image-2-h2 em { color: #A78BFA; font-style: normal; }
.cs-image-2 .cs-image-2-p {
  font-size: var(--cs-fs-aux);
  color: rgba(255,255,255,.85);
  line-height: 1.6;
}
.cs-image-2 .cs-image-2-frame {
  width: 45%;
  align-self: stretch;
  border-radius: var(--cs-radius-lg) 0 0 var(--cs-radius-lg);
  overflow: hidden;
  box-shadow: 0 0.6em 1.5em rgba(0,0,0,.18);
}
.cs-image-2 .cs-image-2-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ════════════════════════════════════════════════════════════
   LAYOUT 19: IMAGE-3（圖文變體 — 全圖背景 + 底部 caption 條）
   ════════════════════════════════════════════════════════════ */
.cs-image-3 {
  padding: 0;
  position: relative;
}
.cs-image-3 .cs-image-3-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.cs-image-3 .cs-image-3-caption-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(8px);
  padding: 1.4em 2.5em;
  z-index: 1;
}
.cs-image-3 .cs-image-3-caption {
  color: #fff;
  font-size: var(--cs-fs-body);
  font-weight: 600;
  line-height: 1.4;
}
.cs-image-3 .cs-image-3-caption em { color: var(--cs-color-brand); font-style: normal; }
.cs-image-3 .cs-image-3-sub {
  margin-top: .3em;
  font-size: var(--cs-fs-meta);
  color: rgba(255,255,255,.7);
}

/* ════════════════════════════════════════════════════════════
   LAYOUT 20: COMPARE-2（對比變體 — 表格式）
   ════════════════════════════════════════════════════════════ */
.cs-compare-2 .cs-compare-2-table {
  flex: 1;
  align-self: center;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--cs-fs-aux);
}
.cs-compare-2 .cs-compare-2-table thead th {
  background: var(--cs-color-brand);
  color: #fff;
  padding: .9em 1em;
  text-align: left;
  font-weight: 700;
  font-size: var(--cs-fs-meta);
  letter-spacing: .05em;
}
.cs-compare-2 .cs-compare-2-table thead th:first-child { border-radius: 8px 0 0 0; }
.cs-compare-2 .cs-compare-2-table thead th:last-child  { border-radius: 0 8px 0 0; }
.cs-compare-2 .cs-compare-2-table tbody td {
  padding: .9em 1em;
  border-bottom: 1px solid var(--cs-color-sep);
  color: var(--cs-color-body);
}
.cs-compare-2 .cs-compare-2-table tbody tr:last-child td { border-bottom: none; }
.cs-compare-2 .cs-compare-2-table tbody td:first-child {
  font-weight: 700;
  color: var(--cs-color-text);
}
.cs-compare-2 .cs-compare-2-table .cs-hl { color: var(--cs-color-brand); font-weight: 700; }

/* ════════════════════════════════════════════════════════════
   LAYOUT 21: DATA-2（數據變體 — Bento grid）
   ════════════════════════════════════════════════════════════ */
.cs-data-2 .cs-bento-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: .8em;
  align-content: center;
  margin-top: 1em;
}
.cs-data-2 .cs-bento-card {
  background: linear-gradient(135deg, #fff 0%, #F8F7FF 100%);
  border: 1.5px solid var(--cs-color-brand-10);
  border-radius: var(--cs-radius-lg);
  padding: 1.2em 1em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 .2em .5em rgba(108,92,231,.05);
}
.cs-data-2 .cs-bento-icon {
  font-size: clamp(20px, 1.8vw, 26px);
  opacity: .5;
}
.cs-data-2 .cs-bento-value {
  font-family: var(--cs-font-body-en);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 900;
  color: var(--cs-color-brand);
  line-height: 1;
}
.cs-data-2 .cs-bento-label {
  font-size: var(--cs-fs-meta);
  color: var(--cs-color-sub);
  margin-top: .3em;
  line-height: 1.4;
}

/* ════════════════════════════════════════════════════════════
   LAYOUT 22: CTA-2（CTA 變體 — 主色底 + 大 QR 右側）
   ════════════════════════════════════════════════════════════ */
.cs-cta-2 {
  background: var(--cs-color-brand);
  color: #fff;
  padding: 0;
  flex-direction: row;
}
.cs-cta-2 .cs-cta-2-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1em;
  padding: 4em 4em 4em 5em;
}
.cs-cta-2 .cs-cta-2-eyebrow {
  font-family: var(--cs-font-body-en);
  font-size: var(--cs-fs-ey);
  font-weight: 700;
  color: rgba(255,255,255,.6);
  text-transform: uppercase;
  letter-spacing: 2px;
}
.cs-cta-2 .cs-cta-2-h1 {
  font-family: var(--cs-font-heading);
  font-size: clamp(28px, 4vw, 56px);
  font-weight: var(--cs-fw-heading);
  letter-spacing: -1.5px;
  line-height: 1.1;
}
.cs-cta-2 .cs-cta-2-h1 em { color: #FFD78E; font-style: normal; }
.cs-cta-2 .cs-cta-2-sub {
  font-size: var(--cs-fs-aux);
  color: rgba(255,255,255,.85);
  line-height: 1.6;
  max-width: 22em;
}
.cs-cta-2 .cs-cta-2-right {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.12);
}
.cs-cta-2 .cs-cta-2-qr {
  width: 70%;
  aspect-ratio: 1;
  background: #fff;
  padding: 1em;
  border-radius: var(--cs-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-cta-2 .cs-cta-2-qr img { width: 100%; height: 100%; object-fit: contain; }

/* ════════════════════════════════════════════════════════════
   LAYOUT 23: PROFILE-1（自介 — 左圖右 bio + stats）
   ════════════════════════════════════════════════════════════ */
.cs-profile-1 {
  padding: 0;
  flex-direction: row;
  background: var(--cs-color-card);
}
.cs-profile-1 .cs-p1-img {
  width: 55%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.cs-profile-1 .cs-p1-img img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.cs-profile-1 .cs-p1-img::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to right, transparent 0%, transparent 35%, var(--cs-color-card) 92%, var(--cs-color-card) 100%);
}
.cs-profile-1 .cs-p1-right {
  width: 45%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3em 4em 3em 0;
  gap: .8em;
}
.cs-profile-1 .cs-p1-name {
  font-family: var(--cs-font-heading);
  font-size: var(--cs-fs-h2);
  font-weight: var(--cs-fw-heading);
  color: var(--cs-color-text);
}
.cs-profile-1 .cs-p1-role {
  font-size: var(--cs-fs-aux);
  color: var(--cs-color-sub);
  margin-bottom: .5em;
}
.cs-profile-1 .cs-p1-bullets {
  list-style: none; padding: 0;
  display: flex; flex-direction: column; gap: .4em;
  font-size: var(--cs-fs-aux);
  color: var(--cs-color-body);
  line-height: 1.5;
}
.cs-profile-1 .cs-p1-bullets li strong { color: var(--cs-color-brand); font-weight: 700; }
.cs-profile-1 .cs-p1-stats {
  display: flex;
  gap: .6em;
  margin-top: .8em;
}
.cs-profile-1 .cs-p1-stat {
  flex: 1;
  border-radius: 10px;
  padding: .8em 1em;
  border: 2px solid var(--cs-color-brand-20);
  background: var(--cs-color-brand-08);
  text-align: center;
}
.cs-profile-1 .cs-p1-stat-val {
  font-size: var(--cs-fs-meta);
  font-weight: 800;
  color: var(--cs-color-text);
}
.cs-profile-1 .cs-p1-stat-label {
  font-size: var(--cs-fs-meta);
  color: var(--cs-color-sub);
  margin-top: .2em;
}

/* ════════════════════════════════════════════════════════════
   LAYOUT 24: SCREENSHOT-1（截圖 — 仿瀏覽器 chrome）
   ════════════════════════════════════════════════════════════ */
.cs-screenshot-1 .cs-ss-browser {
  width: 100%;
  margin: 1em 0;
  border-radius: var(--cs-radius-lg);
  overflow: hidden;
  box-shadow:
    0 0.25em 0.4em rgba(108,92,231,.06),
    0 0.6em 1.5em rgba(108,92,231,.12);
  border: 1.5px solid var(--cs-color-brand-10);
}
.cs-screenshot-1 .cs-ss-chrome {
  background: var(--cs-color-panel);
  padding: .7em 1em;
  display: flex;
  align-items: center;
  gap: .6em;
  border-bottom: 1px solid var(--cs-color-brand-10);
}
.cs-screenshot-1 .cs-ss-dots { display: flex; gap: .35em; }
.cs-screenshot-1 .cs-ss-dot { width: .75em; height: .75em; border-radius: 50%; }
.cs-screenshot-1 .cs-ss-dot.r { background: #FF5F56; }
.cs-screenshot-1 .cs-ss-dot.y { background: #FFBD2E; }
.cs-screenshot-1 .cs-ss-dot.g { background: #27C93F; }
.cs-screenshot-1 .cs-ss-url {
  flex: 1;
  background: var(--cs-color-card);
  border: 1px solid var(--cs-color-sep);
  border-radius: 6px;
  padding: .3em .8em;
  font-family: var(--cs-font-body-en);
  font-size: var(--cs-fs-meta);
  color: var(--cs-color-sub);
  text-align: center;
}
.cs-screenshot-1 .cs-ss-viewport {
  width: 100%;
  background: var(--cs-color-card);
}
.cs-screenshot-1 .cs-ss-viewport img { width: 100%; display: block; }
.cs-screenshot-1 .cs-ss-caption {
  text-align: center;
  font-size: var(--cs-fs-meta);
  color: var(--cs-color-sub);
  margin-top: .5em;
}

/* ════════════════════════════════════════════════════════════
   LAYOUT 25: FULLBLEED-1（全屏圖 — 無 padding）
   ════════════════════════════════════════════════════════════ */
.cs-fullbleed-1 {
  padding: 0;
}
.cs-fullbleed-1 img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.cs-fullbleed-1 .cs-fullbleed-caption {
  position: absolute;
  left: 2em; bottom: 2em;
  z-index: 2;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(8px);
  padding: .8em 1.4em;
  border-radius: var(--cs-radius);
  color: #fff;
  font-size: var(--cs-fs-meta);
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════
   PRINT support — 一張 slide 一頁 PDF
   ════════════════════════════════════════════════════════════ */
@page { margin: 0; size: landscape; }
@media print {
  html, body { height: auto; overflow: visible !important; background: #fff !important; margin: 0; padding: 0; }
  .cs-nav-bar, .cs-progress-bar { display: none !important; }
  .cs-deck { height: auto; overflow: visible !important; }
  .cs-slides-viewport, .cs-slides-track { display: block; overflow: visible !important; height: auto !important; }
  .cs-slide {
    page-break-after: always;
    break-after: page;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .cs-slide:last-child { page-break-after: auto; break-after: auto; }
  .cs-anim { opacity: 1 !important; animation: none !important; filter: none !important; transform: none !important; }
}