/**
 * 貓董律師 2026 改版｜前台切版樣式
 *
 * 作用域規則：所有選擇器都收在 .fl-scope 底下，不會外溢影響既有頁面。
 * 設計 token 也掛在 .fl-scope（不用 :root），避免污染全站變數。
 *
 * 斷點對齊 Blocksy：desktop ≥1000px、tablet 690–999px、mobile ≤689px。
 * 設計稿只有 1600px 與 390px 兩種，中間段依這組斷點推斷。
 */

/* ==========================================================================
   1. Token
   ========================================================================== */

.fl-scope {
  --fl-brand: #315182;
  --fl-brand-deep: #1b2e46;
  --fl-accent: #a48636;
  --fl-text: #323338;
  --fl-text-default: #43341d;
  --fl-text-sec: #72747e;
  --fl-white: #ffffff;
  --fl-gray: #d8dce3;
  --fl-bg-01: #f7fafe;
  --fl-bg-02: #fefefe;
  --fl-bg-03: #f1eee8;
  --fl-stroke: #e8eef6;
  --fl-stroke-dark: #92aed3;
  --fl-shadow-02: 0 0 20px rgba(164, 134, 54, 0.1);
  --fl-shadow-card: 0 0 20px rgba(74, 100, 139, 0.1);

  --fl-container: 1280px;
  --fl-gutter: 24px;

  font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--fl-text);
  box-sizing: border-box;
}

.fl-scope *,
.fl-scope *::before,
.fl-scope *::after {
  box-sizing: inherit;
}

/* --------------------------------------------------------------------------
   margin reset（鐵則）

   佈景主題（Blocksy）、WP core 都會對 h1–h6 / p / list 注入預設 margin，
   且 .entry-content h2 的 specificity（0,0,1,1）會蓋過單一 class。
   用雙 class 拉高 specificity，不靠 !important。
   -------------------------------------------------------------------------- */

.fl-scope.fl-scope :is(h1, h2, h3, h4, h5, h6, p, ol, ul, blockquote, figure) {
  margin: 0;
  padding: 0;
}

.fl-scope.fl-scope :is(ol, ul) {
  list-style: none;
}

.fl-scope img,
.fl-scope svg {
  max-width: 100%;
  display: block;
}

/* 只在手機生效的斷行點（中文可在任意字元間折行，需明確指定才能照設計稿斷句） */
.fl-scope .fl-nl-sm {
  display: none;
}

/**
 * 滿版出血。
 *
 * 區塊切在頁面內容裡時，父層 .entry-content 是 WP 的 is-layout-constrained
 * layout，會用 `margin-left/right: auto !important` 把子元素夾在 content-size
 * （本站 1290px）內——負 margin 破不了 !important。
 *
 * WP 官方的破框機制是 .alignfull（constrained layout 的選擇器明確排除它），
 * shortcode 會一併輸出該 class；本站 .entry-content 本身已是滿版寬度，
 * 因此 .alignfull 就足以出血到視窗邊緣，且不會產生水平捲軸。
 *
 * .fl-bleed 保留為語意標記與 max-width 保險，實際破框交給 .alignfull。
 * 掛在 Blocksy hook（容器之外）時不需要，用 bleed="0" 關掉。
 */
.fl-scope.fl-bleed {
  max-width: none;
}

/**
 * section 之間必須緊貼。
 *
 * Blocksy／WP 會給 .entry-content 的每個直接子元素 24px 的 margin-bottom，
 * 設計稿的 section 則是一路連續、沒有縫隙——不清掉會讓整頁看起來鬆散斷裂。
 */
.fl-scope.fl-hero,
.fl-scope.fl-sec,
.fl-scope.fl-cta,
.fl-scope.fl-phead,
.fl-scope.fl-footer {
  margin-top: 0;
  margin-bottom: 0;
}

/* ==========================================================================
   2. 按鈕
   ========================================================================== */

.fl-scope .fl-btn {
  display: inline-flex;
  align-items: center;
  gap: 40px;
  height: 60px;
  padding: 16px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.48px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.fl-scope .fl-btn__icon {
  flex: none;
  width: 24px;
  height: 24px;
}

.fl-scope .fl-btn__icon svg {
  width: 24px;
  height: 24px;
}

.fl-scope .fl-btn--primary {
  background: var(--fl-accent);
  color: var(--fl-white);
}

.fl-scope .fl-btn--primary:hover,
.fl-scope .fl-btn--primary:focus-visible {
  background: #8d7330;
  color: var(--fl-white);
}

.fl-scope .fl-btn--ghost {
  background: transparent;
  border-color: var(--fl-accent);
  color: var(--fl-accent);
}

.fl-scope .fl-btn--ghost:hover,
.fl-scope .fl-btn--ghost:focus-visible {
  background: var(--fl-accent);
  color: var(--fl-white);
}

/* ==========================================================================
   3. 聯絡方式（CTA 與 Footer 共用）
   ========================================================================== */

.fl-scope .fl-contacts {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

.fl-scope .fl-contacts__link {
  display: flex;
  align-items: center;
  gap: 20px;
  text-decoration: none;
  color: inherit;
}

.fl-scope .fl-contacts__icon {
  flex: none;
  width: 24px;
  height: 24px;
}

.fl-scope .fl-contacts__icon svg {
  width: 24px;
  height: 24px;
}

.fl-scope .fl-contacts__text {
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: 13px;
  line-height: 1.8;
}

.fl-scope .fl-contacts__label {
  font-weight: 500;
  letter-spacing: 2px;
}

.fl-scope .fl-contacts__value {
  font-weight: 400;
  letter-spacing: 2px;
}

.fl-scope .fl-contacts--brand {
  color: var(--fl-brand);
}

.fl-scope .fl-contacts--light {
  color: var(--fl-gray);
}

.fl-scope .fl-contacts__link:hover .fl-contacts__value {
  text-decoration: underline;
}

/* 螢幕閱讀器專用（手機版文字收起後仍需可讀） */
.fl-scope .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   4. CTA 區塊
   ========================================================================== */

/**
 * 不能加 overflow: hidden —— 白卡靠負 margin 浮出區塊上緣，
 * 一旦裁切就會把卡片頂部（含標題）切掉。背景 ::before 用 inset: 0
 * 本來就不會外溢，不需要靠 overflow 收邊。
 */
.fl-scope.fl-cta {
  position: relative;
  display: block;
  background-color: var(--fl-brand);
  padding: 0 var(--fl-gutter) 124px;
}

/* 背景照片壓 20% 疊在品牌藍上 */
.fl-scope.fl-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/fl-cta-bg.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.2;
  pointer-events: none;
}

.fl-scope .fl-cta__card {
  position: relative;
  z-index: 1;
  max-width: var(--fl-container);
  margin: -100px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 49px;
  padding: 100px 240px;
  background: var(--fl-bg-02);
  box-shadow: var(--fl-shadow-card);
}

/* 上一個區塊不需要被卡片壓住時關掉負 margin */
.fl-scope.fl-cta--flush {
  padding-top: 100px;
}

.fl-scope.fl-cta--flush .fl-cta__card {
  margin-top: 0;
}

.fl-scope .fl-cta__title {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 1px;
  color: var(--fl-brand);
  text-align: center;
  /* 窄螢幕折成兩行時讓兩行長度平均，避免只有一個字掉到第二行 */
  text-wrap: balance;
}

.fl-scope .fl-cta__text {
  width: 100%;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 1px;
  color: var(--fl-text);
}

.fl-scope .fl-cta__actions {
  display: flex;
  align-items: center;
  gap: 17px;
}

.fl-scope .fl-cta__contacts {
  width: 100%;
  padding-top: 30px;
  border-top: 1px solid var(--fl-stroke);
}

.fl-scope .fl-cta__contacts .fl-contacts {
  justify-content: center;
  gap: 49px;
}

/* ==========================================================================
   5. Footer
   ========================================================================== */

.fl-scope.fl-footer {
  display: block;
  background: var(--fl-brand-deep);
  padding: 44px var(--fl-gutter);
}

.fl-scope .fl-footer__inner {
  max-width: var(--fl-container);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.fl-scope .fl-footer__logo {
  display: block;
  width: 169px;
  color: var(--fl-white);
}

.fl-scope .fl-footer__logo svg {
  width: 169px;
  height: 41px;
}

.fl-scope .fl-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.fl-scope .fl-footer__copyright {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 2px;
  color: var(--fl-gray);
  text-align: right;
}

/* ==========================================================================
   6. 版面骨架（所有 section 共用）

   設計稿畫布 1600px、section 左右留白 80px，因此內容最大寬 1440px。
   在 1440px 視窗下內容寬度自然收成 1280px，與 CTA 白卡同寬。
   ========================================================================== */

.fl-scope.fl-sec {
  --fl-sec-pad: 80px;
  position: relative;
  display: block;
  padding: 100px var(--fl-sec-pad);
  background: var(--fl-bg-02);
}

.fl-scope .fl-sec__inner {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
}

/* section 底色變體 */
.fl-scope.fl-sec--warm { background: var(--fl-bg-03); }
.fl-scope.fl-sec--cool { background: var(--fl-bg-01); }
.fl-scope.fl-sec--brand { background: var(--fl-brand); }

/* 標頭：英文小標 + 中文大標 + 說明 */
.fl-scope .fl-sec__head {
  display: flex;
  flex-direction: column;
  gap: 60px;
  max-width: 640px;
  margin-bottom: 80px;
}

.fl-scope .fl-sec__head--center {
  max-width: none;
  align-items: center;
  text-align: center;
}

.fl-scope .fl-sec__heading {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.fl-scope .fl-eyebrow {
  font-family: "Host Grotesk", "Noto Sans TC", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fl-text);
}

.fl-scope .fl-title {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 1px;
  color: var(--fl-text);
}

.fl-scope .fl-lead {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 1.5px;
  color: var(--fl-text);
}

/* section 內的裝飾浮水印（貓剪影等） */
.fl-scope .fl-watermark {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  color: var(--fl-white);
}

/* 貓剪影：設計稿放在痛點區右上，1600 畫布下 left 1191 / top 118 / 224×238 */
.fl-scope .fl-watermark--cat {
  top: 118px;
  right: 11.5%;
  width: 224px;
  height: 238px;
  background: var(--fl-white);
  opacity: 0.55;
  -webkit-mask: url("../img/fl-cat-mark.svg") no-repeat center / contain;
  mask: url("../img/fl-cat-mark.svg") no-repeat center / contain;
}

@media (max-width: 999px) {
  .fl-scope .fl-watermark--cat {
    width: 140px;
    height: 149px;
    top: 40px;
    right: 4%;
  }
}

/* ==========================================================================
   7. Hero
   ========================================================================== */

.fl-scope.fl-hero {
  position: relative;
  display: block;
  padding: 0;
  background: var(--fl-bg-03);
  overflow: hidden;
}

/* 設計稿的背景照片是 opacity 20% + blur 2px 疊在暖米底色上，少了這兩者色調會過重 */
.fl-scope .fl-hero__bg {
  position: absolute;
  inset: 0;
  background-image: url("../img/fl-hero-bg.jpg");
  background-size: cover;
  background-position: center top;
  opacity: 0.2;
  filter: blur(2px);
  pointer-events: none;
}

/**
 * 設計稿 hero 的文字起點在 x=161（1600 畫布），比其他 section 的 80px 更靠內，
 * 所以左右留白用 10% 而非固定值——換到任何視窗寬都維持設計稿的相對位置。
 */
.fl-scope .fl-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 1600px;
  min-height: 900px;
  margin: 0 auto;
  padding: 121px 10% 0;
  display: flex;
  align-items: flex-start;
}

.fl-scope .fl-hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  max-width: 768px;
}

/* 副標：左右各一個貓掌 */
.fl-scope .fl-hero__sub {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 3px;
  color: var(--fl-text-default);
}

.fl-scope .fl-hero__sub::before,
.fl-scope .fl-hero__sub::after {
  content: "";
  flex: none;
  width: 17px;
  height: 17px;
  background: currentColor;
  -webkit-mask: url("../img/fl-icon-paw.svg") no-repeat center / contain;
  mask: url("../img/fl-icon-paw.svg") no-repeat center / contain;
}

.fl-scope .fl-hero__title {
  max-width: 598px;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 2px;
  color: var(--fl-text);
}

.fl-scope .fl-hero__title .fl-hero__brand {
  display: block;
  color: var(--fl-brand);
}

.fl-scope .fl-hero__lead {
  max-width: 598px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 2px;
  color: var(--fl-text);
}

.fl-scope .fl-hero__actions {
  display: flex;
  align-items: center;
  gap: 17px;
}

.fl-scope .fl-hero__bottom {
  display: flex;
  align-items: center;
  gap: 56px;
  margin-top: 48px;
}

/* 三個圓形數據徽章（設計稿刻意互相重疊 5px） */
.fl-scope .fl-badges {
  display: flex;
  align-items: center;
}

.fl-scope .fl-badges__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(254, 254, 254, 0.72);
  box-shadow: var(--fl-shadow-02);
  text-align: center;
}

.fl-scope .fl-badges__item + .fl-badges__item {
  margin-left: -5px;
}

.fl-scope .fl-badges__crown {
  width: 24px;
  height: 24px;
  background: var(--fl-accent);
  -webkit-mask: url("../img/fl-icon-crown.svg") no-repeat center / contain;
  mask: url("../img/fl-icon-crown.svg") no-repeat center / contain;
}

.fl-scope .fl-badges__num {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 1px;
  color: var(--fl-text-default);
}

.fl-scope .fl-badges__num sup {
  font-size: 16px;
  font-weight: 500;
  vertical-align: super;
}

.fl-scope .fl-badges__label {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.5px;
  color: var(--fl-text-sec);
}

/* 律師署名（左右桂冠） */
.fl-scope .fl-credential {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 272px;
}

.fl-scope .fl-credential__name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--fl-accent);
}

.fl-scope .fl-credential__laurel {
  flex: none;
  width: 28px;
  height: 48px;
  background: currentColor;
  -webkit-mask: url("../img/fl-laurel.svg") no-repeat center / contain;
  mask: url("../img/fl-laurel.svg") no-repeat center / contain;
}

.fl-scope .fl-credential__laurel--right {
  transform: scaleX(-1);
}

.fl-scope .fl-credential__text {
  text-align: center;
  line-height: 1.4;
}

.fl-scope .fl-credential__brand {
  display: block;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--fl-accent);
}

.fl-scope .fl-credential__lawyer {
  display: block;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--fl-text-default);
}

.fl-scope .fl-credential__meta {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: 0.5px;
  color: var(--fl-text-sec);
  text-align: center;
}

/* 人像寬度用比例（設計稿 670/1600），不用固定 px——固定值在 1440 視窗會相對放大並壓到文字 */
.fl-scope .fl-hero__portrait {
  position: absolute;
  right: 4.4%;
  bottom: 0;
  z-index: 1;
  width: 41.9%;
  max-width: 670px;
  pointer-events: none;
}

.fl-scope .fl-hero__portrait img {
  width: 100%;
  height: auto;
}

/* ==========================================================================
   8. 卡片格線（痛點／服務等共用）
   ========================================================================== */

.fl-scope .fl-grid {
  display: grid;
  gap: 20px;
}

.fl-scope .fl-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fl-scope .fl-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fl-scope .fl-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.fl-scope .fl-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 40px 30px;
  background: var(--fl-bg-02);
}

.fl-scope .fl-card__media {
  flex: none;
  width: 160px;
  height: 160px;
  border-radius: 20px;
  overflow: hidden;
}

.fl-scope .fl-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fl-scope .fl-card__title {
  padding-bottom: 30px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 1px;
  color: var(--fl-brand);
  text-align: center;
}

.fl-scope .fl-card__text {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 2px;
  color: var(--fl-text-sec);
}

.fl-scope .fl-card__body {
  width: 100%;
}

/* ==========================================================================
   9. 詐騙手法（7 格 + 分隔線）
   ========================================================================== */

.fl-scope .fl-scams {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fl-scope .fl-scams__item {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 40px 30px;
  border-right: 1px solid var(--fl-stroke);
  border-bottom: 1px solid var(--fl-stroke);
}

/* 每列最後一格與最末列不畫線，避免外框變成完整方框 */
.fl-scope .fl-scams__item:nth-child(4n) { border-right: 0; }
.fl-scope .fl-scams__item:nth-last-child(-n + 4) { border-bottom: 0; }

.fl-scope .fl-scams__media {
  width: 120px;
  height: 120px;
}

.fl-scope .fl-scams__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.fl-scope .fl-scams__title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 1px;
  color: var(--fl-brand);
}

.fl-scope .fl-scams__text {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 1px;
  color: var(--fl-text-sec);
}

/* 天秤浮水印（同 hero 那張，壓到極淡） */
.fl-scope .fl-watermark--scale {
  inset: 0;
  width: auto;
  height: auto;
  background-image: url("../img/fl-hero-bg.jpg");
  background-size: cover;
  background-position: right center;
  opacity: 0.12;
  filter: blur(2px);
}

/* ==========================================================================
   10. 步驟流程（詐騙流程）
   ========================================================================== */

.fl-scope .fl-steps {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 80px;
  background: var(--fl-white);
}

/* 橫貫的虛線：由各步驟的底色蓋住，只在間隙露出 */
.fl-scope .fl-steps::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px dashed var(--fl-stroke-dark);
  transform: translateY(-50%);
}

.fl-scope .fl-steps__item {
  position: relative;
  z-index: 1;
  flex: 1 0 0;
  min-width: 0;
  min-height: 235px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: var(--fl-white);
  text-align: center;
}

.fl-scope .fl-steps__item--highlight {
  background: var(--fl-bg-01);
}

.fl-scope .fl-steps__icon {
  width: 64px;
  height: 64px;
}

.fl-scope .fl-steps__icon img {
  width: 100%;
  height: 100%;
}

.fl-scope .fl-steps__num {
  text-transform: uppercase;
  font-family: "Host Grotesk", "Noto Sans TC", sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.6px;
  color: var(--fl-brand);
}

.fl-scope .fl-steps__item--highlight .fl-steps__num {
  color: #b7c7dd;
}

.fl-scope .fl-steps__text {
  padding: 0 20px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1px;
  color: var(--fl-text);
}

.fl-scope .fl-steps__item--highlight .fl-steps__text {
  font-weight: 600;
  color: var(--fl-brand);
}

/* ==========================================================================
   11. 服務項目（深藍底 + 白卡 + 金色標籤）
   ========================================================================== */

.fl-scope.fl-sec--brand .fl-eyebrow,
.fl-scope.fl-sec--brand .fl-title,
.fl-scope.fl-sec--brand .fl-lead {
  color: var(--fl-white);
}

.fl-scope.fl-sec--brand .fl-sec__head {
  max-width: 640px;
}

/* 深色 section 的背景照片（與 CTA 共用同一張，壓到 20%） */
.fl-scope .fl-watermark--photo {
  inset: 0;
  width: auto;
  height: auto;
  background-image: url("../img/fl-services-bg.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.2;
}

.fl-scope .fl-svc {
  display: flex;
  align-items: stretch;
  gap: 20px;
}

.fl-scope .fl-svc__item {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--fl-bg-02);
  overflow: hidden;
}

.fl-scope .fl-svc__media {
  width: 100%;
  height: 200px;
  flex: none;
}

.fl-scope .fl-svc__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fl-scope .fl-svc__body {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: 30px;
  width: 100%;
}

/* 金色標籤：矩形 + 底部朝下的小尖角 */
.fl-scope .fl-svc__tag {
  position: relative;
  padding: 8px 20px;
  background: var(--fl-accent);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 1.5px;
  color: var(--fl-white);
  text-align: center;
}

.fl-scope .fl-svc__tag::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0;
  height: 0;
  border: 7px solid transparent;
  border-top-color: var(--fl-accent);
  transform: translateX(-50%);
}

.fl-scope .fl-svc__title {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 1.5px;
  color: var(--fl-brand);
  text-align: center;
}

.fl-scope .fl-svc__text {
  width: 100%;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 2px;
  color: var(--fl-text-sec);
}

/* 深底上的次要按鈕 */
.fl-scope .fl-btn--onbrand {
  border-color: var(--fl-stroke);
  color: var(--fl-stroke);
}

.fl-scope .fl-btn--onbrand:hover,
.fl-scope .fl-btn--onbrand:focus-visible {
  background: var(--fl-white);
  border-color: var(--fl-white);
  color: var(--fl-brand);
}

.fl-scope .fl-sec__foot {
  display: flex;
  justify-content: center;
  margin-top: 80px;
}

/* ==========================================================================
   12. 諮詢流程（編號 + 連接線）
   ========================================================================== */

/* 設計稿的流程區是水平置中（785px 寬，中心對齊版面中心），不是靠右。
   用 .fl-scope.fl-scope 提高 specificity——.fl-flow 是 <ol>，
   會被上面的 margin reset（0,0,2,1）蓋掉 margin: auto。 */
.fl-scope.fl-scope .fl-flow {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 785px;
  margin-left: auto;
  margin-right: auto;
}

.fl-scope .fl-flow__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 28px;
  padding-bottom: 32px;
}

.fl-scope .fl-flow__item:last-child { padding-bottom: 0; }

/* 編號之間的連接線 */
.fl-scope .fl-flow__item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 44px;
  bottom: -4px;
  width: 1px;
  background: var(--fl-stroke-dark);
}

.fl-scope .fl-flow__num {
  flex: none;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--fl-brand);
  font-family: "Host Grotesk", "Noto Sans TC", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--fl-white);
}

.fl-scope .fl-flow__title {
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 1px;
  color: var(--fl-brand);
}

.fl-scope .fl-flow__text {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 1px;
  color: var(--fl-text-sec);
}

/* ==========================================================================
   13. 關於貓董（左文右人像 + 資歷 + 客戶牆）
   ========================================================================== */

.fl-scope .fl-about {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 871px) minmax(0, 569px);
  gap: 0;
  /* 設計稿左欄在 866px 高的區塊裡上下各留 171px，是垂直置中而非貼底 */
  align-items: center;
}

.fl-scope .fl-about__main {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.fl-scope .fl-about__cols {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

.fl-scope .fl-about__block {
  min-width: 0;
}

/* 小標：左側貓掌 + 底線 */
.fl-scope .fl-about__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--fl-accent);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--fl-brand);
}

.fl-scope .fl-about__label::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  background: var(--fl-accent);
  -webkit-mask: url("../img/fl-icon-paw.svg") no-repeat center / contain;
  mask: url("../img/fl-icon-paw.svg") no-repeat center / contain;
}

.fl-scope .fl-about__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fl-scope .fl-about__list li {
  position: relative;
  padding-left: 16px;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 1px;
  color: var(--fl-text);
}

.fl-scope .fl-about__list li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: var(--fl-text-sec);
}

.fl-scope .fl-about__clients img {
  width: 100%;
  max-width: 871px;
  height: auto;
}

/**
 * 不能用 justify-self: end —— 那會讓 grid item 收縮到內容寬度，
 * 而裡面的 img 是 width: 100%（相對容器），兩者互相依賴後寬度算成 0，人像整個消失。
 * 讓 item 撐滿該欄，改由 img 自己的 max-width 控制尺寸。
 */
.fl-scope .fl-about__portrait {
  align-self: end;
  width: 100%;
}

.fl-scope .fl-about__portrait img {
  width: 100%;
  max-width: 569px;
  height: auto;
  margin-left: auto;
}

/* ==========================================================================
   14. 為什麼找貓董（三圓環）
   ========================================================================== */

.fl-scope .fl-ring {
  --fl-ring-r: 275px;
  --fl-ring-item: 190px;
  position: relative;
  width: calc(var(--fl-ring-r) * 2);
  height: calc(var(--fl-ring-r) * 2);
  margin: calc(var(--fl-ring-item) / 2) auto;
  border: 1px solid var(--fl-accent);
  border-radius: 50%;
}

.fl-scope .fl-ring__item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--fl-ring-item);
  height: var(--fl-ring-item);
  margin: calc(var(--fl-ring-item) / -2) 0 0 calc(var(--fl-ring-item) / -2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  border-radius: 50%;
  background: var(--fl-white);
  box-shadow: var(--fl-shadow-02);
  text-align: center;
}

/* 沿圓周擺放：先旋轉到角度、平移到圓周、再轉回來讓內容保持水平 */
.fl-scope .fl-ring__item--1 { transform: translateY(calc(var(--fl-ring-r) * -1)); }
/* 設計稿：02 在左下（240°）、03 在右下（120°） */
.fl-scope .fl-ring__item--2 { transform: rotate(240deg) translateY(calc(var(--fl-ring-r) * -1)) rotate(-240deg); }
.fl-scope .fl-ring__item--3 { transform: rotate(120deg) translateY(calc(var(--fl-ring-r) * -1)) rotate(-120deg); }

.fl-scope .fl-ring__num {
  font-family: "Host Grotesk", "Noto Sans TC", sans-serif;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--fl-text-sec);
}

.fl-scope .fl-ring__text {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.5px;
  color: var(--fl-text);
}

/* ==========================================================================
   15. 社會證明（成功案例文章卡 + 客戶回饋）
   ========================================================================== */

.fl-scope .fl-proof__sub {
  margin: 80px 0 40px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--fl-text);
  text-align: center;
}

.fl-scope .fl-posts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.fl-scope .fl-post {
  display: flex;
  flex-direction: column;
  background: var(--fl-bg-02);
  box-shadow: var(--fl-shadow-02);
}

/* 必須 display: block——這是 <a>，inline 元素吃不到 aspect-ratio，
   內部 img 的 height: 100% 會算成 0，圖就整個不見。 */
.fl-scope .fl-post__media {
  display: block;
  aspect-ratio: 440 / 250;
  overflow: hidden;
  background: var(--fl-bg-01);
}

.fl-scope .fl-post__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* 沒有特色圖的文章：品牌色底＋貓掌，維持卡片等高 */
.fl-scope .fl-post__media--empty {
  display: block;
  background-color: var(--fl-bg-01);
  background-image: url("../img/fl-icon-paw.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 48px;
  opacity: 0.9;
}

.fl-scope .fl-post__body {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  gap: 16px;
  padding: 24px 30px 30px;
}

.fl-scope .fl-post__date {
  font-family: "Host Grotesk", "Noto Sans TC", sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--fl-text-sec);
}

.fl-scope .fl-post__title {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1px;
  color: var(--fl-text);
  /* 卡片等高：標題最多 3 行 */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 主題會把 .entry-content 內的 a 染成品牌金，標題要維持設計稿的深色 */
.fl-scope .fl-post__title a {
  color: inherit;
  text-decoration: none;
}

.fl-scope .fl-post__title a:hover { color: var(--fl-brand); }

.fl-scope .fl-post__more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 16px;
  align-self: flex-end;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--fl-text-sec);
  text-decoration: none;
}

.fl-scope .fl-post__more svg {
  width: 20px;
  height: 20px;
}

.fl-scope .fl-post__more:hover { color: var(--fl-accent); }

/* 客戶回饋：桌機三欄，窄螢幕改成可橫向滑動 */
.fl-scope .fl-reviews {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.fl-scope .fl-review {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 40px;
  background: var(--fl-bg-02);
  box-shadow: 0 0 10px rgba(164, 134, 54, 0.1);
}

.fl-scope .fl-review__head {
  display: flex;
  align-items: center;
  gap: 30px;
}

.fl-scope .fl-review__avatar {
  flex: none;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--fl-accent);
}

.fl-scope .fl-review__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fl-scope .fl-review__name {
  font-family: "Host Grotesk", "Noto Sans TC", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 1px;
  color: var(--fl-accent);
}

.fl-scope .fl-review__text p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 1px;
  color: var(--fl-text);
}

.fl-scope .fl-review__text p + p { margin-top: 1.4em; }

/* ==========================================================================
   16. 內頁 Header（各內頁共用，設計稿 400px 高）
   ========================================================================== */

.fl-scope.fl-phead {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 160px 20px 80px;
  background-color: var(--fl-brand);
  text-align: center;
}

.fl-scope .fl-phead__bg {
  position: absolute;
  inset: 0;
  background-image: url("../img/fl-header-bg.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.2;
  pointer-events: none;
}

.fl-scope .fl-phead__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
}

.fl-scope .fl-phead__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.fl-scope .fl-phead__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Host Grotesk", "Noto Sans TC", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fl-accent);
}

.fl-scope .fl-phead__eyebrow::before,
.fl-scope .fl-phead__eyebrow::after {
  content: "";
  flex: none;
  width: 17px;
  height: 17px;
  background: currentColor;
  -webkit-mask: url("../img/fl-icon-paw.svg") no-repeat center / contain;
  mask: url("../img/fl-icon-paw.svg") no-repeat center / contain;
}

.fl-scope .fl-phead__title {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 1px;
  color: var(--fl-white);
}

.fl-scope .fl-phead__crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 1px;
}

.fl-scope .fl-phead__crumbs a {
  color: var(--fl-gray);
  text-decoration: none;
}

.fl-scope .fl-phead__crumbs a:hover { color: var(--fl-white); }
.fl-scope .fl-phead__sep { color: #b0b3ba; }
.fl-scope .fl-phead__current { color: var(--fl-white); }

/* ==========================================================================
   17. FAQ 手風琴（用原生 details／summary，不需要 JS）
   ========================================================================== */

.fl-scope .fl-faq {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1000px;
  margin: 0 auto;
}

.fl-scope .fl-faq__item {
  background: var(--fl-bg-02);
  box-shadow: var(--fl-shadow-02);
}

.fl-scope .fl-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 30px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1px;
  color: var(--fl-text);
  cursor: pointer;
  list-style: none;
}

.fl-scope .fl-faq__q::-webkit-details-marker { display: none; }

/* 右側 ＋／− 記號 */
.fl-scope .fl-faq__q::after {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background:
    linear-gradient(var(--fl-text-sec), var(--fl-text-sec)) center / 100% 1px no-repeat,
    linear-gradient(var(--fl-text-sec), var(--fl-text-sec)) center / 1px 100% no-repeat;
  transition: transform 0.2s ease;
}

.fl-scope .fl-faq__item[open] .fl-faq__q::after {
  background: linear-gradient(var(--fl-text-sec), var(--fl-text-sec)) center / 100% 1px no-repeat;
}

.fl-scope .fl-faq__a {
  padding: 0 30px 28px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 1px;
  color: var(--fl-text-sec);
}

/* ==========================================================================
   18. 平板（690–999px）
   ========================================================================== */

@media (max-width: 999px) {
  .fl-scope.fl-sec {
    --fl-sec-pad: 40px;
    padding: 72px var(--fl-sec-pad);
  }

  .fl-scope .fl-sec__head {
    gap: 36px;
    margin-bottom: 56px;
  }

  .fl-scope .fl-title { font-size: 30px; }
  .fl-scope .fl-eyebrow { font-size: 14px; }

  /* hero 改直向：人像回到文字下方 */
  .fl-scope .fl-hero__inner {
    flex-direction: column;
    min-height: 0;
    padding: 72px 40px 0;
  }

  .fl-scope .fl-hero__title { font-size: 36px; }

  .fl-scope .fl-hero__bottom {
    flex-wrap: wrap;
    gap: 32px;
    margin-top: 48px;
  }

  .fl-scope .fl-hero__portrait {
    position: relative;
    right: auto;
    width: 100%;
    max-width: 420px;
    margin: 24px auto 0;
  }

  .fl-scope .fl-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fl-scope .fl-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* 詐騙手法收成 2 欄後重算分隔線 */
  .fl-scope .fl-scams { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fl-scope .fl-scams__item { padding: 32px 24px; }
  .fl-scope .fl-scams__item:nth-child(4n) { border-right: 1px solid var(--fl-stroke); }
  .fl-scope .fl-scams__item:nth-child(2n) { border-right: 0; }
  .fl-scope .fl-scams__item:nth-last-child(-n + 4) { border-bottom: 1px solid var(--fl-stroke); }
  .fl-scope .fl-scams__item:nth-last-child(-n + 2) { border-bottom: 0; }

  /* 步驟改 2×2，橫向虛線失去意義先收起 */
  .fl-scope .fl-steps {
    flex-wrap: wrap;
    gap: 32px;
  }

  .fl-scope .fl-steps::before { display: none; }

  .fl-scope .fl-steps__item {
    flex: 1 0 calc(50% - 16px);
    min-height: 200px;
  }

  .fl-scope .fl-steps__text { font-size: 16px; }

  /* 服務卡改 2 欄 */
  .fl-scope .fl-svc {
    flex-wrap: wrap;
  }

  .fl-scope .fl-svc__item {
    flex: 1 0 calc(50% - 10px);
  }

  .fl-scope .fl-svc__title { font-size: 21px; }
  .fl-scope .fl-sec__foot { margin-top: 56px; }

  .fl-scope.fl-scope .fl-flow { max-width: none; }

  /* 關於：人像移到文字下方 */
  .fl-scope .fl-about { grid-template-columns: minmax(0, 1fr); }
  .fl-scope .fl-about__main { padding-bottom: 0; gap: 40px; }
  .fl-scope .fl-about__portrait {
    justify-self: center;
    max-width: 420px;
    margin-top: 32px;
  }

  /* 圓環縮小 */
  .fl-scope .fl-ring {
    --fl-ring-r: 200px;
    --fl-ring-item: 150px;
  }
  .fl-scope .fl-ring__num { font-size: 22px; }
  .fl-scope .fl-ring__text { font-size: 12px; }

  .fl-scope .fl-posts,
  .fl-scope .fl-reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fl-scope .fl-review { padding: 28px; gap: 20px; }
  .fl-scope .fl-review__head { gap: 16px; }
  .fl-scope .fl-proof__sub { margin: 56px 0 32px; font-size: 21px; }

  .fl-scope.fl-phead { padding: 110px 24px 60px; }
  .fl-scope .fl-phead__title { font-size: 32px; }
  .fl-scope .fl-phead__inner { gap: 32px; }
  .fl-scope .fl-phead__group { gap: 20px; }

  .fl-scope .fl-cta__card {
    padding: 64px 48px;
    gap: 36px;
  }

  .fl-scope .fl-cta__title {
    font-size: 30px;
  }

  .fl-scope .fl-cta__contacts .fl-contacts {
    gap: 32px;
  }

  .fl-scope .fl-contacts__text {
    font-size: 12px;
  }

  .fl-scope .fl-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .fl-scope .fl-footer__copyright {
    text-align: left;
  }
}

/* ==========================================================================
   7. 手機（≤689px）

   依 Mobile 390px 設計稿：CTA 白卡近滿版、按鈕改全寬堆疊、
   聯絡方式只留 icon（文字收起，語意留給 screen-reader-text）；
   Footer 全部置中。
   ========================================================================== */

@media (max-width: 689px) {
  .fl-scope {
    --fl-gutter: 20px;
  }

  .fl-scope .fl-nl-sm {
    display: inline;
  }

  .fl-scope.fl-sec {
    --fl-sec-pad: 20px;
    padding: 56px var(--fl-sec-pad);
  }

  .fl-scope .fl-sec__head {
    gap: 24px;
    margin-bottom: 40px;
  }

  .fl-scope .fl-title { font-size: 24px; line-height: 1.6; }
  .fl-scope .fl-eyebrow { font-size: 13px; letter-spacing: 1.5px; }
  .fl-scope .fl-lead { font-size: 15px; letter-spacing: 0.5px; }

  .fl-scope .fl-hero__inner { padding: 48px 20px 0; }
  .fl-scope .fl-hero__title { font-size: 28px; letter-spacing: 1px; }
  .fl-scope .fl-hero__lead { font-size: 15px; letter-spacing: 0.5px; }
  .fl-scope .fl-hero__sub { font-size: 12px; letter-spacing: 1.5px; }

  .fl-scope .fl-hero__actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .fl-scope .fl-hero__bottom {
    flex-direction: column;
    align-items: center;
    gap: 32px;
    width: 100%;
  }

  .fl-scope .fl-badges__item {
    width: 112px;
    height: 112px;
  }

  .fl-scope .fl-badges__num { font-size: 24px; }
  .fl-scope .fl-badges__label { font-size: 10px; }

  .fl-scope .fl-grid--4,
  .fl-scope .fl-grid--3,
  .fl-scope .fl-grid--2 { grid-template-columns: minmax(0, 1fr); }

  .fl-scope .fl-card { padding: 32px 24px; gap: 24px; }
  .fl-scope .fl-card__title { font-size: 18px; padding-bottom: 20px; }
  .fl-scope .fl-card__text { font-size: 15px; letter-spacing: 1px; }

  .fl-scope .fl-scams { grid-template-columns: minmax(0, 1fr); }
  .fl-scope .fl-scams__item {
    padding: 28px 4px;
    border-bottom: 1px solid var(--fl-stroke);
  }
  /* 用與平板段同樣的 specificity 重設，才蓋得掉上面的 nth-child 規則 */
  .fl-scope .fl-scams__item:nth-child(4n),
  .fl-scope .fl-scams__item:nth-child(2n) { border-right: 0; }
  .fl-scope .fl-scams__item:nth-last-child(-n + 4),
  .fl-scope .fl-scams__item:nth-last-child(-n + 2) { border-bottom: 1px solid var(--fl-stroke); }
  .fl-scope .fl-scams__item:last-child { border-bottom: 0; }
  .fl-scope .fl-scams__media { width: 96px; height: 96px; }
  .fl-scope .fl-scams__title { font-size: 17px; }

  .fl-scope .fl-steps__item {
    flex: 1 0 100%;
    min-height: 0;
    padding: 24px 0;
  }

  .fl-scope .fl-steps { gap: 16px; }
  .fl-scope .fl-steps__text { font-size: 15px; padding: 0 8px; }

  .fl-scope .fl-svc__item { flex: 1 0 100%; }
  .fl-scope .fl-svc__body { padding: 24px 20px; gap: 24px; }
  .fl-scope .fl-svc__title { font-size: 20px; }
  .fl-scope .fl-svc__text { font-size: 15px; letter-spacing: 1px; }
  .fl-scope .fl-sec__foot { margin-top: 40px; }

  .fl-scope .fl-flow__item { gap: 16px; padding-bottom: 24px; }
  .fl-scope .fl-flow__num { width: 32px; height: 32px; font-size: 14px; }
  .fl-scope .fl-flow__item:not(:last-child)::before { left: 16px; top: 38px; }
  .fl-scope .fl-flow__title { font-size: 16px; }
  .fl-scope .fl-flow__text { font-size: 15px; }

  .fl-scope .fl-about__cols { flex-direction: column; gap: 32px; }
  .fl-scope .fl-about__portrait { max-width: 300px; }

  /* 手機放不下圓環，改直向卡片列 */
  .fl-scope .fl-ring {
    width: 100%;
    height: auto;
    margin: 0;
    border: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .fl-scope .fl-ring__item {
    position: static;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 24px 20px;
    border-radius: 16px;
    transform: none;
    border: 1px solid var(--fl-stroke);
  }

  .fl-scope .fl-ring__text { font-size: 15px; }

  .fl-scope .fl-posts,
  .fl-scope .fl-reviews { grid-template-columns: minmax(0, 1fr); }
  .fl-scope .fl-review { padding: 24px 20px; }
  .fl-scope .fl-review__avatar { width: 52px; height: 52px; }
  .fl-scope .fl-review__text p { font-size: 15px; }
  .fl-scope .fl-post__body { padding: 20px; }
  .fl-scope .fl-proof__sub { margin: 40px 0 24px; font-size: 19px; }

  .fl-scope.fl-phead { padding: 90px 20px 48px; }
  .fl-scope .fl-phead__title { font-size: 26px; }
  .fl-scope .fl-phead__eyebrow { font-size: 14px; }
  .fl-scope .fl-phead__crumbs { font-size: 13px; }
  .fl-scope .fl-faq__q { padding: 20px; font-size: 15px; gap: 16px; }
  .fl-scope .fl-faq__a { padding: 0 20px 22px; font-size: 14px; }

  .fl-scope.fl-cta {
    padding-bottom: 64px;
  }

  .fl-scope .fl-cta__card {
    margin-top: -60px;
    padding: 40px 24px;
    gap: 28px;
  }

  .fl-scope.fl-cta--flush {
    padding-top: 64px;
  }

  .fl-scope .fl-cta__title {
    font-size: 24px;
    line-height: 1.5;
  }

  .fl-scope .fl-cta__text {
    font-size: 15px;
    letter-spacing: 0.5px;
  }

  .fl-scope .fl-cta__actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .fl-scope .fl-btn {
    justify-content: space-between;
    gap: 16px;
    height: 56px;
  }

  .fl-scope .fl-cta__contacts {
    padding-top: 24px;
  }

  /* 手機版只留 icon */
  .fl-scope .fl-contacts__text {
    display: none;
  }

  .fl-scope .fl-contacts {
    justify-content: center;
    gap: 40px;
  }

  .fl-scope .fl-cta__contacts .fl-contacts {
    gap: 40px;
  }

  .fl-scope.fl-footer {
    padding: 32px var(--fl-gutter);
  }

  .fl-scope .fl-footer__inner {
    align-items: center;
    gap: 28px;
  }

  .fl-scope .fl-footer__logo {
    width: 120px;
  }

  .fl-scope .fl-footer__logo svg {
    width: 120px;
    height: auto;
  }

  .fl-scope .fl-footer__bottom {
    flex-direction: column;
    align-items: center;
    gap: 28px;
    width: 100%;
  }

  .fl-scope .fl-footer__copyright {
    font-size: 11px;
    letter-spacing: 1px;
    text-align: center;
  }
}

/* ==========================================================================
   19. 文章單篇（2026 模板，僅套用於標記過的文章）
   ========================================================================== */

.fl-scope.fl-single .fl-sec__inner {
  max-width: 800px;
}

.fl-scope .fl-single__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--fl-stroke);
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--fl-text-sec);
}

.fl-scope .fl-single__meta a {
  color: var(--fl-brand);
  text-decoration: none;
}

.fl-scope .fl-single__body {
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 1px;
  color: var(--fl-text);
}

/* 單篇內文是編輯器產生的內容，需要把上面 reset 掉的間距補回來 */
.fl-scope.fl-single .fl-single__body :is(p, ul, ol, blockquote, figure, table) {
  margin: 0 0 1.6em;
}

.fl-scope.fl-single .fl-single__body :is(h2, h3, h4) {
  margin: 2em 0 0.8em;
  font-weight: 700;
  line-height: 1.6;
  color: var(--fl-brand);
}

.fl-scope.fl-single .fl-single__body h2 { font-size: 26px; }
.fl-scope.fl-single .fl-single__body h3 { font-size: 21px; }
.fl-scope.fl-single .fl-single__body h4 { font-size: 18px; }

.fl-scope.fl-single .fl-single__body :is(ul, ol) {
  padding-left: 1.4em;
  list-style: revert;
}

.fl-scope.fl-single .fl-single__body img {
  max-width: 100%;
  height: auto;
}

.fl-scope.fl-single .fl-single__body a {
  color: var(--fl-brand);
  text-decoration: underline;
}