/* ══════════════════════════════════════════════════════════
   錄影課專區 — page-recorded.php 專用（.rz-*）
   版面：全頁同一組「側標」兩欄（左：節標題與導言，右：內容），讓每一節對齊同兩條線；
   只有 hero、學員心得、CTA 是滿版色帶。課程清單用自己的階梯列，不沿用 course-card。
   ══════════════════════════════════════════════════════════ */
.rz {
  --rz-night: #06252a;
  --rz-night-2: #0b3b3d;
  --rz-ink: #0a2a30;
  --rz-text: #33484c;
  --rz-muted: #5f7479;
  --rz-teal: #00a896;
  --rz-teal-deep: #0f766e;
  --rz-teal-soft: #5eead4;
  --rz-mist: #eaf6f5;
  --rz-line: #d6e8e5;
  --rz-line-soft: #e6f0ee;
  --rz-line-app: #06c755;
  --rz-amber: #b45309;
  --rz-amber-bg: #fff7e8;
  font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  font-size: 16px;
  line-height: 1.8;
  color: var(--rz-text);
  background: #fff;
}
.rz, .rz *, .rz *::before, .rz *::after { box-sizing: border-box; }
.rz a { color: var(--rz-teal-deep); text-underline-offset: 3px; }
.rz a:hover { color: var(--rz-ink); }
.rz :focus-visible { outline: 2px solid var(--rz-teal); outline-offset: 3px; border-radius: 6px; }
.rz [id] { scroll-margin-top: 96px; }

.rz-wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.rz-section { padding: clamp(56px, 7vw, 96px) 0; }
.rz-section + .rz-section { border-top: 1px solid var(--rz-line-soft); }

/* 側標兩欄：全頁共用 */
.rz-split { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 28px 64px; align-items: start; }
.rz-head h2,
.rz-stories-head h2 { margin: 0 0 14px; font-size: clamp(1.45rem, 2.4vw, 1.8rem); font-weight: 900; line-height: 1.35; color: var(--rz-ink); }
.rz-head p,
.rz-stories-head p { margin: 0; font-size: .95rem; line-height: 1.85; color: var(--rz-muted); }
.rz-head p + p { margin-top: 10px; }
/* 標題按詞組斷行：中文會在任意字之間換行，把詞組包成 inline-block，只在詞組之間斷 */
.rz-ph { display: inline-block; }

/* ── HERO ── */
.rz-hero {
  padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 7vw, 88px);
  color: #d7ecea;
  background:
    radial-gradient(110% 90% at 0% 0%, rgba(0,168,150,.24) 0%, transparent 55%),
    linear-gradient(160deg, var(--rz-night) 0%, var(--rz-night-2) 100%);
}
.rz-hero-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 44px 72px; align-items: end; }
.rz-hero-kicker { margin: 0 0 18px; font-size: .92rem; font-weight: 700; color: var(--rz-teal-soft); }
.rz-hero h1 { margin: 0 0 20px; font-size: clamp(2rem, 4.2vw, 2.75rem); font-weight: 900; line-height: 1.24; letter-spacing: .01em; color: #fff; }
.rz-hero-desc { margin: 0 0 30px; max-width: 34em; font-size: clamp(1rem, 1.6vw, 1.08rem); line-height: 1.9; color: rgba(215,236,234,.86); }
.rz-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.rz-btn-line {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 12px 26px;
  border-radius: 999px; background: var(--rz-line-app); color: #fff !important;
  font-size: 1rem; font-weight: 700; text-decoration: none; transition: background .15s;
}
.rz-btn-line:hover { background: #05a547; }
.rz-btn-line svg { flex-shrink: 0; }
.rz-link-light { color: #c5efe8 !important; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(197,239,232,.45); }
.rz-link-light:hover { color: #fff !important; }

.rz-spec { margin: 0; border-top: 1px solid rgba(94,234,212,.3); }
.rz-spec > div { display: grid; grid-template-columns: 6em minmax(0, 1fr); gap: 16px; padding: 13px 0; border-bottom: 1px solid rgba(94,234,212,.16); }
.rz-spec dt { font-size: .86rem; color: rgba(197,239,232,.72); }
.rz-spec dd { margin: 0; font-size: 1rem; font-weight: 700; color: #fff; }
.rz-spec b { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--rz-teal-soft); }

/* ── 錄影課包含什麼 ── */
.rz-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 40px; margin: 0; padding: 0; list-style: none; }
.rz-points li { padding-top: 18px; border-top: 2px solid var(--rz-ink); }
.rz-points h3 { margin: 0 0 8px; font-size: 1.08rem; font-weight: 800; line-height: 1.45; color: var(--rz-ink); }
.rz-points p { margin: 0; font-size: .95rem; line-height: 1.85; }

/* 一個上課日的學習循環（接在同一節底下，滿寬） */
.rz-cycle { margin-top: clamp(52px, 6vw, 76px); }
.rz-cycle-head { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); align-items: baseline; gap: 6px 64px; margin-bottom: 20px; }
.rz-cycle-head h3 { margin: 0; font-size: 1.22rem; font-weight: 900; color: var(--rz-ink); }
.rz-cycle-head p { margin: 0; font-size: .92rem; color: var(--rz-muted); }
.rz-cycle ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; margin: 0; padding: 0; list-style: none; counter-reset: rzcyc; }
.rz-cycle li { padding-top: 14px; border-top: 2px solid var(--rz-teal); counter-increment: rzcyc; }
.rz-cycle li::before { content: counter(rzcyc); display: block; margin-bottom: 4px; font-variant-numeric: tabular-nums; font-size: .9rem; font-weight: 700; color: var(--rz-teal-deep); }
.rz-cycle h4 { margin: 0 0 4px; font-size: 1.02rem; font-weight: 800; color: var(--rz-ink); }
.rz-cycle li p { margin: 0; font-size: .9rem; line-height: 1.8; }
.rz-pace { margin: 26px 0 0; padding: 14px 18px; border-radius: 12px; background: var(--rz-mist); font-size: .92rem; line-height: 1.8; color: var(--rz-ink); }

/* ── 學員心得：故事卡片（點開看全文） ── */
.rz-stories { padding: clamp(56px, 7vw, 96px) 0; background: var(--rz-mist); }
.rz-stories-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: 28px; }
.rz-track-nav { display: flex; gap: 8px; }
.rz-track-nav button {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rz-line); background: #fff;
  color: var(--rz-ink); font: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.rz-track-nav button:disabled { opacity: .35; cursor: default; }
.rz-track-nav[hidden] { display: none; }
/* 橫排卡片直向堆疊：新增心得就是多一列 */
.rz-story-track { display: grid; gap: 16px; margin: 0; padding: 0; }
/* 名人名言式橫排卡片：左＝頭像與讀全文｜中＝心得（主要彈性區）｜右＝學生資料
   三欄都用 grid area 指定，欄寬由 grid-template-columns 決定：
   左欄固定、中欄 minmax(0,1fr) 拿走剩餘寬度、右欄有上限，不會被內容長度撐開。 */
.rz-story {
  /* 男生藍、女生粉，跟官方頭像的底色呼應 */
  --rz-accent: #cfe2f7; --rz-chip-bg: #eaf3fd; --rz-chip-fg: #2d6aa8;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) minmax(180px, 240px);
  grid-template-areas:
    'portrait quote who'
    'portrait more  who';
  align-items: start; gap: 14px 28px;
  width: 100%; margin: 0; padding: 26px 28px;
  border: 1px solid transparent; border-radius: 20px; background: #fff; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
  box-shadow: 0 1px 0 rgba(10,42,48,.04), 0 14px 32px -20px rgba(10,42,48,.4);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.rz-story:hover { transform: translateY(-2px); border-color: var(--rz-line); box-shadow: 0 1px 0 rgba(10,42,48,.04), 0 20px 40px -22px rgba(10,42,48,.5); }
.rz-story--f { --rz-accent: #f7cfe0; --rz-chip-bg: #fdeaf3; --rz-chip-fg: #b04a7d; }
.rz-story-portrait {
  grid-area: portrait; justify-self: center; align-self: center;
  display: block; width: 112px; height: 112px; border-radius: 50%; overflow: hidden;
  background: var(--rz-mist); box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--rz-accent);
}
.rz-story-portrait img, .rz-dlg-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 中欄：min-width: 0 讓它可以正常收縮換行，不會被最長的那個字撐住 */
.rz-story-q { grid-area: quote; align-self: center; min-width: 0; margin: 0; font-size: 1.12rem; font-weight: 700; line-height: 1.95; color: var(--rz-ink); }
/* 前後呼應的裝飾引號，顏色跟著頭像走 */
.rz-story-q::before { content: '“'; margin-right: 5px; font-family: Georgia, 'Times New Roman', serif; font-size: 2.3rem; line-height: 0; vertical-align: -.32em; color: var(--rz-accent); }
.rz-story-q::after { content: '”'; display: block; margin-top: 8px; font-family: Georgia, 'Times New Roman', serif; font-size: 2.3rem; line-height: .3; text-align: right; color: var(--rz-accent); }
/* 右欄：姓名、學校、畢業年份 */
.rz-story-who { grid-area: who; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-left: 24px; border-left: 1px solid var(--rz-line-soft); }
.rz-story-name { font-size: 1.05rem; font-weight: 800; line-height: 1.5; color: var(--rz-ink); }
.rz-story-bg { display: flex; align-items: center; gap: 6px; font-size: .86rem; line-height: 1.6; color: var(--rz-muted); }
.rz-story-bg svg { flex-shrink: 0; }
.rz-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.rz-tags > li, .rz-tags > span { padding: 2px 10px; border-radius: 999px; background: var(--rz-mist); font-size: .76rem; font-weight: 700; line-height: 1.7; color: var(--rz-teal-deep); }
/* 課程紀錄在右欄內，跟著右欄的寬度上限換行；配色跟著頭像走 */
.rz-story .rz-tags { gap: 6px; margin: 4px 0 0; }
.rz-story .rz-tags > span { padding: 3px 12px; background: var(--rz-chip-bg); font-size: .78rem; color: var(--rz-chip-fg); }
.rz-story-dialog.rz-story--f .rz-tags > li { background: var(--rz-chip-bg); color: var(--rz-chip-fg); }
/* 讀全文：接在金句正下方、靠右收尾，讀完引言的下一眼就是打開的入口 */
.rz-story-more { grid-area: more; justify-self: end; display: flex; align-items: center; gap: 12px; margin-top: 4px; font-size: .9rem; font-weight: 700; line-height: 1.5; color: var(--rz-teal-deep); }
.rz-story-read { display: inline-flex; align-items: center; gap: 3px; }
.rz-story-read svg { margin-top: 1px; }
.rz-story-more small { padding-left: 12px; border-left: 1px solid var(--rz-line); font-variant-numeric: tabular-nums; font-size: .82rem; font-weight: 400; color: var(--rz-muted); }
.rz-story:hover .rz-story-read { text-decoration: underline; text-underline-offset: 3px; }
/* 蓋掉 Hello Elementor 的 button reset（white-space: nowrap、hover/focus 粉紅底 #c36） */
.rz button { white-space: normal; user-select: auto; text-transform: none; }
.rz .rz-story, .rz .rz-story:hover, .rz .rz-story:focus { background: #fff; color: inherit; }
.rz .rz-story { border: 1px solid transparent; }
.rz .rz-story:hover { border-color: var(--rz-line); }
.rz .rz-track-nav button:hover, .rz .rz-track-nav button:focus,
.rz .rz-dlg-foot button:hover, .rz .rz-dlg-foot button:focus { background: var(--rz-mist); color: var(--rz-ink); }
.rz .rz-dlg-close:hover, .rz .rz-dlg-close:focus { background: var(--rz-line); color: var(--rz-ink); }

.rz-story-dialog {
  width: min(720px, calc(100% - 32px)); max-height: min(88vh, 960px); padding: 0; border: 0; border-radius: 20px;
  background: #fff; color: var(--rz-text); box-shadow: 0 30px 80px rgba(6,37,42,.35); overflow: hidden;
  font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'PingFang TC', 'Microsoft JhengHei', sans-serif;
}
.rz-story-dialog[open] { display: flex; flex-direction: column; }
.rz-story-dialog::backdrop { background: rgba(6,37,42,.62); backdrop-filter: blur(3px); }
.rz-dlg-head { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: start; padding: 24px 70px 18px 26px; border-bottom: 1px solid var(--rz-line-soft); }
.rz-dlg-portrait { display: block; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--rz-mist); box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--rz-line); }
.rz-dlg-head h3 { margin: 0; font-size: 1.2rem; font-weight: 900; color: var(--rz-ink); }
.rz-dlg-head .rz-story-bg { margin-top: 2px; }
.rz-dlg-close {
  position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
  background: var(--rz-mist); color: var(--rz-ink); font: inherit; line-height: 0; cursor: pointer;
}
.rz-dlg-close svg { display: block; }
.rz-dlg-body { padding: 24px 30px 8px; overflow-y: auto; overscroll-behavior: contain; }
.rz-dlg-body p { margin: 0 0 1.1em; font-size: 1.02rem; line-height: 2; }
.rz-dlg-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--rz-line-soft); background: #f8fcfb; }
.rz-dlg-foot button {
  min-height: 40px; padding: 8px 16px; border: 1px solid var(--rz-line); border-radius: 999px; background: #fff;
  color: var(--rz-ink); font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer;
}
.rz-dlg-count { font-variant-numeric: tabular-nums; font-size: .85rem; color: var(--rz-muted); }
html:has(.rz-story-dialog[open]) { overflow: hidden; }

/* ── 適合誰 ── */
.rz-fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; }
.rz-fit h3 { margin: 0 0 10px; font-size: 1.04rem; font-weight: 800; }
.rz-fit-yes h3 { color: var(--rz-teal-deep); }
.rz-fit-no h3 { color: var(--rz-amber); }
.rz-fit ul { margin: 0; padding: 0; list-style: none; }
.rz-fit li { position: relative; padding: 11px 0 11px 26px; border-top: 1px solid var(--rz-line-soft); font-size: .95rem; line-height: 1.75; }
.rz-fit li::before { position: absolute; left: 2px; top: 11px; font-weight: 900; }
.rz-fit-yes li::before { content: '✓'; color: var(--rz-teal); }
.rz-fit-no li::before { content: '–'; color: var(--rz-amber); }
.rz-note { margin: 26px 0 0; padding: 14px 18px; border-radius: 12px; background: var(--rz-mist); font-size: .92rem; line-height: 1.8; color: var(--rz-ink); }

/* ── 課程清單：階梯列 ── */
.rz-courses-head { margin-bottom: 36px; }
.rz-policy { margin: 18px 0 0; padding: 14px 18px; border-left: 3px solid var(--rz-amber); border-radius: 0 10px 10px 0; background: var(--rz-amber-bg); font-size: .9rem; line-height: 1.85; color: #5b3a0a; }
.rz-policy p { margin: 0; }
.rz-policy p + p { margin-top: 6px; }
.rz .rz-policy a { color: #7c4a03; font-weight: 700; }
.rz-ladder { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--rz-ink); }
.rz-rung { border-bottom: 1px solid var(--rz-line); }
.rz-rung summary {
  display: grid; grid-template-columns: 7.5em minmax(0, 1fr) 6.5em 11.5em 30px; align-items: center; gap: 6px 24px;
  padding: 20px 10px; list-style: none; cursor: pointer; transition: background .15s;
}
.rz-rung summary::-webkit-details-marker { display: none; }
.rz-rung summary:hover { background: #f5faf9; }
.rz-rung-lv { font-variant-numeric: tabular-nums; font-size: .95rem; font-weight: 700; color: var(--rz-teal-deep); white-space: nowrap; }
.rz-rung-name { display: block; font-size: 1.1rem; font-weight: 800; line-height: 1.45; color: var(--rz-ink); }
.rz-rung-desc { display: block; font-size: .88rem; line-height: 1.6; color: var(--rz-muted); }
.rz-rung-hours { font-size: .86rem; color: var(--rz-muted); white-space: nowrap; }
.rz-rung-hours b, .rz-rung-fee b { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--rz-ink); }
.rz-rung-hours b { font-size: 1.05rem; }
.rz-rung-fee { font-size: .82rem; line-height: 1.55; color: var(--rz-muted); text-align: right; white-space: nowrap; }
.rz-rung-fee b { font-size: .98rem; }
.rz-rung-toggle { position: relative; width: 30px; height: 30px; border: 1px solid var(--rz-line); border-radius: 50%; background: #fff; }
.rz-rung-toggle::before, .rz-rung-toggle::after { content: ''; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--rz-ink); transition: transform .2s; }
.rz-rung-toggle::after { transform: rotate(90deg); }
.rz-rung details[open] .rz-rung-toggle::after { transform: rotate(0deg); }
.rz-rung details[open] summary { background: #f5faf9; }
.rz-rung-body { padding: 8px 10px 30px calc(7.5em + 34px); }
.rz-rung-info { margin: 0 0 16px; font-size: .88rem; color: var(--rz-muted); }
.rz-rung-outline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 32px; margin: 0 0 20px; padding: 0; list-style: none; counter-reset: rzol; }
.rz-rung-outline li { position: relative; padding-left: 28px; font-size: .94rem; line-height: 1.5; color: var(--rz-ink); counter-increment: rzol; }
.rz-rung-outline li::before { content: counter(rzol); position: absolute; left: 0; top: 2px; font-variant-numeric: tabular-nums; font-size: .78rem; color: var(--rz-teal-deep); }
.rz-rung-outline small { display: block; font-size: .78rem; color: var(--rz-muted); }
.rz-rung-ask { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; font-weight: 700; }

/* ── 從詢問到開始上課 ── */
.rz-steps { margin: 0; padding: 0; list-style: none; }
.rz-step { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 20px; padding-bottom: 36px; }
.rz-step:last-child { padding-bottom: 0; }
.rz-step::before { content: ''; position: absolute; left: 21px; top: 50px; bottom: 6px; width: 2px; background: var(--rz-line); }
.rz-step:last-child::before { display: none; }
.rz-step-num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--rz-ink); color: var(--rz-teal-soft); font-variant-numeric: tabular-nums; font-size: 1rem; font-weight: 700; }
.rz-step-who { display: block; margin: 0 0 2px; font-size: .84rem; font-weight: 700; color: var(--rz-teal-deep); }
.rz-step h3 { margin: 0 0 6px; font-size: 1.1rem; font-weight: 800; line-height: 1.45; color: var(--rz-ink); }
.rz-step p { margin: 0; font-size: .95rem; line-height: 1.85; }
.rz-step ol, .rz-step ul { margin: 8px 0 0; padding-left: 20px; font-size: .95rem; line-height: 1.8; }
.rz-step li + li { margin-top: 4px; }
.rz-tip { margin-top: 12px; padding: 10px 14px; border-left: 3px solid var(--rz-amber); border-radius: 0 8px 8px 0; background: var(--rz-amber-bg); font-size: .88rem; line-height: 1.75; color: #5b3a0a; }
.rz-tip--ok { border-left-color: var(--rz-teal); background: var(--rz-mist); color: var(--rz-ink); }

/* 課前通知信示意（放在左欄，桌機捲動時固定） */
.rz-mail-fig { margin: 30px 0 0; }
.rz-mail { overflow: hidden; border: 1px solid var(--rz-line); border-radius: 14px; background: #fff; box-shadow: 0 18px 40px -24px rgba(10,42,48,.45); font-size: .8rem; line-height: 1.6; color: #2c2c2c; }
.rz-mail-head { padding: 18px 16px; background: linear-gradient(135deg, #007a6e 0%, #00a896 55%, #26c6b8 100%); color: #fff; text-align: center; }
.rz-mail-head small { display: block; margin-bottom: 2px; font-size: .7rem; opacity: .9; }
.rz-mail-head b { font-size: .98rem; }
.rz-mail-body { padding: 14px 16px 16px; }
.rz-mail-body p { margin: 0 0 8px; }
.rz-mail-alert { margin: 0 0 12px; padding: 7px 10px; border-left: 3px solid #f0b429; border-radius: 4px; background: #fff8e6; font-size: .74rem; color: #7a5b00; }
.rz-mail-step { margin: 12px 0 6px; padding-left: 9px; border-left: 3px solid #00a896; }
.rz-mail-step small { display: block; font-size: .68rem; font-weight: 700; color: #00a896; }
.rz-mail-step b { font-size: .88rem; color: #1c1917; }
.rz-mail-btn { display: block; width: fit-content; margin: 8px auto 4px; padding: 7px 18px; border-radius: 7px; color: #fff; font-size: .76rem; font-weight: 700; }
.rz-mail-btn--g { background: #1a73e8; }
.rz-mail-btn--t { background: #00a896; }
.rz-mail-toc { display: grid; gap: 3px; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid #eef2f1; list-style: none; font-size: .74rem; color: #64748b; }
.rz-mail-fig figcaption { font-style: normal; margin-top: 14px; font-size: .86rem; line-height: 1.75; color: var(--rz-muted); }
.rz-mail-fig figcaption ul { margin: 6px 0 0; padding-left: 18px; }

/* ── 主題組合課程（規劃中） ── */
.rz-bundles { border-top: 1px dashed var(--rz-line); }
.rz-bundle { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 8px 28px; padding: 24px 0; border-bottom: 1px dashed var(--rz-line); }
.rz-bundle-goal { display: block; font-size: .84rem; color: var(--rz-muted); }
.rz-bundle h3 { margin: 2px 0 0; font-size: 1.06rem; font-weight: 800; line-height: 1.45; color: var(--rz-ink); }
.rz-bundle-tag { display: inline-block; margin-top: 8px; padding: 0 9px; border: 1px solid #f1cf97; border-radius: 999px; font-size: .75rem; font-weight: 700; line-height: 1.8; color: var(--rz-amber); }
.rz-bundle p { margin: 0 0 10px; font-size: .93rem; line-height: 1.8; }
.rz-bundle ul { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.rz-bundle li { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 12px; font-size: .88rem; line-height: 1.6; }
.rz-bundle li b { font-variant-numeric: tabular-nums; font-size: .82rem; font-weight: 700; color: var(--rz-teal-deep); }

/* ── FAQ ── */
.rz-faq { border-top: 2px solid var(--rz-ink); }
.rz-faq details { border-bottom: 1px solid var(--rz-line); }
.rz-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 4px; list-style: none; cursor: pointer; font-size: 1.02rem; font-weight: 800; line-height: 1.5; color: var(--rz-ink); }
.rz-faq summary::-webkit-details-marker { display: none; }
.rz-faq summary::after { content: '+'; flex-shrink: 0; font-variant-numeric: tabular-nums; font-size: 1.2rem; font-weight: 400; color: var(--rz-teal-deep); }
.rz-faq details[open] summary::after { content: '−'; }
.rz-faq-a { padding: 0 4px 20px; font-size: .95rem; line-height: 1.9; }
.rz-faq-a p { margin: 0; }

/* ── CTA ── */
.rz-cta { padding: clamp(56px, 7vw, 88px) 0; color: #d7ecea; background: linear-gradient(160deg, var(--rz-night) 0%, var(--rz-night-2) 100%); }
.rz-cta-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: center; }
.rz-cta h2 { margin: 0 0 10px; font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 900; line-height: 1.35; color: #fff; }
.rz-cta p { margin: 0; max-width: 40em; font-size: .98rem; line-height: 1.85; color: rgba(215,236,234,.85); }
.rz-cta .rz-hero-actions { justify-content: flex-end; }

/* ── Responsive ── */
@media (min-width: 981px) and (min-height: 940px) {
  .rz-sticky { position: sticky; top: 96px; }
}
@media (max-width: 980px) {
  .rz-split, .rz-hero-grid, .rz-cycle-head { grid-template-columns: minmax(0, 1fr); }
  .rz-hero-grid { align-items: start; }
  /* 平板：空間不夠三欄，學生資料整列移到心得下方 */
  .rz-story {
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-areas: 'portrait quote' 'portrait more' 'who who';
    gap: 12px 22px;
  }
  .rz-story-portrait { width: 96px; height: 96px; }
  .rz-story-who { padding-left: 0; border-left: 0; padding-top: 12px; border-top: 1px solid var(--rz-line-soft); }
  .rz-cycle ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .rz-rung summary { grid-template-columns: 7em minmax(0, 1fr) 30px; grid-template-areas: 'lv main tog' 'lv meta tog'; }
  .rz-rung-lv { grid-area: lv; align-self: start; padding-top: 3px; }
  .rz-rung-main { grid-area: main; }
  .rz-rung-hours { grid-area: meta; }
  .rz-rung-fee { grid-area: meta; justify-self: end; }
  .rz-rung-toggle { grid-area: tog; }
  .rz-rung-body { padding-left: calc(7em + 34px); }
  .rz-mail-fig { max-width: 420px; }
  .rz-cta-grid { grid-template-columns: minmax(0, 1fr); }
  .rz-cta .rz-hero-actions { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .rz-wrap { padding: 0 18px; }
  .rz-points, .rz-fit, .rz-cycle ol { grid-template-columns: minmax(0, 1fr); }
  /* 手機：不硬維持三欄，改成「頭像＋姓名學校／心得／課程／讀全文」上下排列 */
  .rz-story {
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-areas: 'portrait who' 'quote quote' 'more more';
    gap: 12px 14px; padding: 20px 18px;
  }
  .rz-story-portrait { width: 72px; height: 72px; }
  .rz-story-who { align-self: center; padding-top: 0; border-top: 0; }
  .rz-story-q { font-size: 1.05rem; }
  .rz-story-more { justify-self: stretch; gap: 10px; margin-top: 0; padding-top: 12px; border-top: 1px solid var(--rz-line-soft); }
  .rz-rung summary { grid-template-columns: minmax(0, 1fr) 30px; grid-template-areas: 'lv tog' 'main tog' 'meta meta'; gap: 4px 12px; padding: 18px 4px; }
  .rz-rung-lv { padding-top: 0; }
  .rz-rung-fee { text-align: right; }
  .rz-rung-body { padding: 6px 4px 26px; }
  .rz-rung-outline { grid-template-columns: minmax(0, 1fr); }
  .rz-bundle, .rz-bundle li { grid-template-columns: minmax(0, 1fr); }
  .rz-bundle li { gap: 0; }
  .rz-story-dialog { width: 100%; max-width: 100%; max-height: 92vh; margin: auto 0 0; border-radius: 20px 20px 0 0; }
  .rz-dlg-head { padding: 22px 64px 16px 22px; }
  .rz-dlg-body { padding: 20px 22px 6px; }
}
@media (prefers-reduced-motion: no-preference) {
  .rz-story-dialog[open] { animation: rzDlgIn .22s ease-out; }
  @keyframes rzDlgIn { from { opacity: 0; transform: translateY(14px); } }
}
@media (prefers-reduced-motion: reduce) {
  .rz-story, .rz-rung summary, .rz-rung-toggle::before, .rz-rung-toggle::after { transition: none; }
  .rz-story:hover { transform: none; }
}