/* ==========================================================================
   明曜居家長照機構｜全站設計系統（2026-11 改版）
   ----------------------------------------------------------------------------
   設計方向：參考青松健康，安靜、留白、以真實照片為主角。
   色彩取自 Logo（深石板青、霧鋼藍、暖炭灰），搭配暖米白紙色。
   不用漸層、光暈、波浪與粗黑字；標題細、字距寬，英文小標用斜體襯線字。
   本檔不依賴 Tailwind：Tailwind 頁與 style.css 頁（長照知識）共用。
   元件一律以 mx- 開頭，避免與 Tailwind 或 style.css 的類名衝突。
   ========================================================================== */

:root {
  /* 色彩（對比度已驗算：文字色在白底與 --mx-paper 上皆 ≥ 4.5） */
  --mx-ink:      #1d353b;   /* 標題、深色文字（Logo 深青） */
  --mx-text:     #3f3b38;   /* 內文（Logo 屋頂暖炭灰） */
  --mx-muted:    #67615a;   /* 次要文字 */
  --mx-line:     #e2ddd4;   /* 細線 */
  --mx-paper:    #f4f1eb;   /* 暖米白區塊底色 */
  --mx-paper-2:  #ebe6dc;   /* 較深米色（照片後的色塊） */
  --mx-teal:     #24525a;   /* 主色：按鈕、強調（Logo 石板青） */
  --mx-teal-dk:  #1c3a40;   /* 頁尾、諮詢區塊 */
  --mx-steel:    #36659a;   /* 輔色：英文小標、連結（Logo 底線霧鋼藍） */
  --mx-steel-lt: #e4ebf2;

  --mx-serif: 'Noto Serif TC', 'Songti TC', serif;
  --mx-latin: 'Cormorant Garamond', 'Noto Serif TC', serif;
  --mx-sans:  'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;

  --mx-radius: 14px;
  --mx-radius-lg: 22px;
  --mx-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 基礎排版 ---------- */
body {
  color: var(--mx-text);
  letter-spacing: .03em;
  font-family: var(--mx-sans);
}
::selection { background: var(--mx-steel-lt); color: var(--mx-ink); }

/* 舊版大量使用 font-black（900）：改版後標題不再用粗黑字。
   用「元素＋類名」提高權重，蓋過 Tailwind 的 .font-black */
h1.font-black, h2.font-black, h3.font-black { font-weight: 500; letter-spacing: .06em; }
body .font-black { font-weight: 700; }

/* 短文字（各區說明、頁首說明、主視覺說明、諮詢區塊）：只在標點與空格處換行，
   避免「滿／足」「專業／復能」這種把詞切開的斷行。
   萬一整段沒有標點又放不下，overflow-wrap 仍允許換行，不會超出版面。
   長的內文段落維持一般換行，否則右側會參差不齊。 */
.mx-lead, .mx-page-lead, .mx-hero-lead, .mx-cta p, .mx-diagram figcaption, .mx-hero-checks li {
  word-break: keep-all; overflow-wrap: anywhere;
  /* 依序填滿：pretty 為了讓最後一行不要太短，會把「A、B、C 完整長照服務，」整段搬到下一行；
     這裡的斷點只有標點與空格，不會產生孤字，填滿後自然在逗號處換行 */
  text-wrap: wrap;
}
/* 全站：只在詞與詞之間換行。詞間的斷點由 _build/zh_linebreak.py 預先插入 <wbr/>（jieba 斷詞），
   keep-all 讓瀏覽器不在詞的中間換行；break-word 是保險，整段放不下時仍會換行、不會撐破版面。 */
body { word-break: keep-all; overflow-wrap: break-word; }
/* 電話號碼、「A、B、C」等整組不換行 */
.nw { white-space: nowrap; }

/* ---------- 版面 ---------- */
.mx-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 1024px) { .mx-wrap { padding: 0 40px; } }

.mx-sec { padding: 80px 0; background: #fff; position: relative; }
@media (min-width: 1024px) { .mx-sec { padding: 120px 0; } }
.mx-sec.is-paper { background: var(--mx-paper); }
.mx-sec.is-tight { padding-top: 0; }

/* ---------- 章節標題：英文斜體小標＋細字中文大標，說明放右側 ---------- */
.mx-head { margin-bottom: 48px; }
@media (min-width: 1024px) {
  .mx-head { margin-bottom: 64px; }
  .mx-head.is-solo { display: block; }
}
.mx-head.is-center { text-align: center; display: block; }
.mx-head.is-center .mx-lead { margin-left: auto; margin-right: auto; }

.mx-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mx-latin); font-style: italic; font-weight: 500;
  font-size: 1.25rem; line-height: 1.2; letter-spacing: .02em;
  color: var(--mx-steel); margin: 0 0 14px;
}
/* Logo 的屋頂線，作為全站的小記號 */
.mx-eyebrow::before {
  content: ''; width: 22px; height: 11px; flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 11'%3E%3Cpath d='M1 10 11 1.5 21 10' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 11'%3E%3Cpath d='M1 10 11 1.5 21 10' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mx-eyebrow.is-light { color: #b9cbe0; }

.mx-title {
  margin: 0; color: var(--mx-ink);
  font-weight: 500; letter-spacing: .08em; line-height: 1.5;
  font-size: clamp(1.75rem, 1.25rem + 1.6vw, 2.5rem);
}
/* 窄手機：字距收小，避免「夥伴」的「伴」、「工作」的「作」單獨掉到下一行 */
@media (max-width: 419.98px) { .mx-title { letter-spacing: .04em; } }
.mx-lead { margin: 16px 0 0; max-width: 34em; color: var(--mx-muted); font-size: 1rem; line-height: 1.95; }
/* 標題＋說明同一行：「長照知識懶人包 — 搞懂長照申請…」。
   說明接在大標後面、對齊大標最後一行的文字基線；放不下時自動換到下一行。手機改為上下排、不顯示破折號 */
@media (min-width: 768px) {
  /* 說明與大標「中線對齊」：兩者底部先對齊，說明再往上推（大標行高 − 說明行高）÷ 2。
     大標字級 clamp(1.75rem, 1.25rem + 1.6vw, 2.5rem)、行高 1.5；說明字級 1rem、行高 1.95 */
  .mx-head:not(.is-center):not(.is-solo) { display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: 24px; row-gap: 10px; }
  .mx-head:not(.is-center):not(.is-solo) .mx-lead {
    margin: 0 0 calc((clamp(1.75rem, 1.25rem + 1.6vw, 2.5rem) * 1.5 - 1.95rem) / 2);
    flex: 0 1 auto; max-width: 36em;
  }
  .mx-head:not(.is-center):not(.is-solo) .mx-lead::before { content: '—'; margin-right: .7em; color: #b9b2a7; }
}

/* ---------- 按鈕 ---------- */
.mx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 30px; border-radius: 999px;
  font-size: .95rem; font-weight: 500; letter-spacing: .1em; line-height: 1.3;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background-color .25s var(--mx-ease), color .25s var(--mx-ease), border-color .25s var(--mx-ease);
}
.mx-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.mx-btn .mx-arrow { transition: transform .25s var(--mx-ease); }
.mx-btn:hover .mx-arrow { transform: translateX(4px); }
.mx-btn.is-solid { background: var(--mx-teal); color: #fff; }
.mx-btn.is-solid:hover { background: var(--mx-teal-dk); }
.mx-btn.is-ghost { border-color: #b9b2a7; color: var(--mx-ink); background: transparent; }
.mx-btn.is-ghost:hover { border-color: var(--mx-ink); }
.mx-btn.is-white { background: #fff; color: var(--mx-teal-dk); }
.mx-btn.is-white:hover { background: var(--mx-paper); }
.mx-btn.is-line { border-color: rgba(255, 255, 255, .45); color: #fff; }
.mx-btn.is-line:hover { border-color: #fff; background: rgba(255, 255, 255, .06); }
.mx-btn:focus-visible, .mx-link:focus-visible { outline: 2px solid var(--mx-steel); outline-offset: 3px; }

/* 文字連結（了解更多 →） */
.mx-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--mx-teal); font-size: .9rem; font-weight: 500; letter-spacing: .1em;
  text-decoration: none; padding-bottom: 3px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .35s var(--mx-ease);
}
.mx-link svg { width: 16px; height: 16px; }
a:hover .mx-link, .mx-link:hover { background-size: 100% 1px; }

/* ---------- 首頁主視覺 ---------- */
.mx-hero { position: relative; background: #fff; overflow: hidden; padding: 40px 0 72px; }
@media (min-width: 1024px) { .mx-hero { padding: 72px 0 112px; } }
/* 右側米色色塊：照片疊在上面（青松式的層次） */
.mx-hero::before {
  content: ''; position: absolute; z-index: 0; background: var(--mx-paper);
  top: 0; right: 0; width: 100%; height: 46%;
}
@media (min-width: 1024px) { .mx-hero::before { width: 46%; height: 78%; border-bottom-left-radius: 48px; } }
.mx-hero-grid { position: relative; z-index: 1; display: grid; gap: 48px; }
@media (min-width: 1024px) { .mx-hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: center; } }
.mx-hero-text { order: 2; }
@media (min-width: 1024px) { .mx-hero-text { order: 1; } }
.mx-hero-tag {
  display: inline-flex; align-items: center; gap: 12px; margin: 0 0 28px;
  font-size: .85rem; letter-spacing: .16em; color: var(--mx-teal);
}
.mx-hero-tag::before { content: ''; width: 32px; height: 1px; background: currentColor; }
.mx-hero-title {
  margin: 0 0 28px; color: var(--mx-ink);
  font-family: var(--mx-serif); font-weight: 600;
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.6rem); line-height: 1.38; letter-spacing: .08em;
}
.mx-hero-title em { font-style: normal; color: var(--mx-teal); }
.mx-hero-lead { margin: 0 0 40px; max-width: 30em; color: var(--mx-muted); font-size: 1.02rem; line-height: 2; }
.mx-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 36px; }
.mx-hero-checks { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; padding: 0; list-style: none; font-size: .85rem; color: var(--mx-muted); letter-spacing: .08em; }
.mx-hero-checks li { display: inline-flex; align-items: center; gap: 8px; }
.mx-hero-checks li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--mx-steel); }

.mx-hero-media { order: 1; position: relative; padding: 0 0 0 0; }
@media (min-width: 1024px) { .mx-hero-media { order: 2; padding: 0 112px 56px 0; } }
.mx-hero-photo { margin: 0; overflow: hidden; border-radius: var(--mx-radius-lg); background: var(--mx-paper-2); }
.mx-hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mx-hero-photo.is-main { aspect-ratio: 4 / 3; }
@media (min-width: 1024px) { .mx-hero-photo.is-main { aspect-ratio: 5 / 6; max-height: 640px; margin-left: auto; } }
.mx-hero-photo.is-sub { display: none; }
@media (min-width: 1024px) {
  .mx-hero-photo.is-sub {
    display: block; position: absolute; left: -64px; bottom: 0; width: 42%; aspect-ratio: 4 / 5;
    border: 8px solid #fff; border-radius: 20px;
  }
}
/* 直排引言：貼在照片右側 */
.mx-hero-quote { display: none; margin: 0; }
@media (min-width: 1024px) {
  .mx-hero-quote {
    display: block; position: absolute; top: 24px; right: 0;
    writing-mode: vertical-rl; font-family: var(--mx-serif); font-weight: 500;
    font-size: 1.2rem; line-height: 2; letter-spacing: .3em; color: var(--mx-ink);
  }
  .mx-hero-quote cite {
    display: block; margin-top: 1.2em; font-style: normal; font-family: var(--mx-sans);
    font-size: .78rem; letter-spacing: .3em; color: var(--mx-muted);
  }
}

/* ---------- 首頁主視覺：8 格實拍照片背景版 ----------
   2026-11-10 使用者指定保留舊版的照片格背景；配色、字體沿用新版。
   舊版是藍→青漸層＋毛玻璃引言卡，這裡改為 Logo 深石板青單色覆蓋（左深右淺）＋白色直排引言。 */
.mx-hero.is-tiles { padding: 0; background: var(--mx-teal-dk); color: #fff; }
.mx-hero.is-tiles::before { display: none; }          /* 取消淺色版的米色色塊 */
.mx-hero-tiles {
  position: absolute; inset: 0; display: grid; gap: 3px;
  grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr));
}
@media (min-width: 768px) {
  .mx-hero-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
}
.mx-hero-tiles img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 覆蓋層：手機整片同深度；電腦左側（文字區）較深、右側透出照片 */
.mx-hero.is-tiles::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(22, 46, 51, .84);
}
@media (min-width: 1024px) {
  .mx-hero.is-tiles::after {
    background: linear-gradient(90deg, rgba(22, 46, 51, .95) 0%, rgba(22, 46, 51, .88) 44%, rgba(28, 58, 64, .7) 74%, rgba(28, 58, 64, .62) 100%);
  }
}
.mx-hero-inner { position: relative; z-index: 2; display: grid; align-items: center; padding-top: 64px; padding-bottom: 72px; }
@media (min-width: 1024px) {
  .mx-hero-inner { grid-template-columns: minmax(0, 1fr) auto; gap: 64px; min-height: 620px; padding-top: 88px; padding-bottom: 96px; }
}
.is-tiles .mx-hero-text { order: 0; max-width: 620px; }
.is-tiles .mx-hero-tag { color: #cfe0ea; }
.is-tiles .mx-hero-title { color: #fff; }
.is-tiles .mx-hero-title em { color: #b9cbe0; }
.is-tiles .mx-hero-lead { color: rgba(255, 255, 255, .86); }
.is-tiles .mx-hero-checks { color: rgba(255, 255, 255, .8); }
.is-tiles .mx-hero-checks li::before { background: #b9cbe0; }
@media (min-width: 1024px) {
  .is-tiles .mx-hero-quote {
    position: static; align-self: center; margin-right: 8px; color: #fff;
    text-shadow: 0 1px 14px rgba(10, 24, 28, .45);
  }
  .is-tiles .mx-hero-quote cite { color: rgba(255, 255, 255, .72); }
}

/* ---------- 內頁頁首（取代舊版藍色漸層橫幅） ---------- */
.mx-page-hero { position: relative; overflow: hidden; background: var(--mx-paper); padding: 56px 0 64px; }
@media (min-width: 1024px) { .mx-page-hero { padding: 96px 0 104px; } }
/* 右側屋頂線紋路（取自 Logo） */
.mx-page-hero::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 46%; pointer-events: none; opacity: .14;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='36' viewBox='0 0 56 36'%3E%3Cpath d='M4 30 28 8 52 30' fill='none' stroke='%2324525a' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / 56px 36px;
  -webkit-mask: linear-gradient(90deg, transparent, #000 70%); mask: linear-gradient(90deg, transparent, #000 70%);
}
.mx-page-hero .mx-wrap { position: relative; z-index: 1; }
/* 長照知識頁的導覽列是 position: fixed（不佔版面），頁首多讓出 64px */
.mx-page-hero.is-fixed-nav { padding-top: 120px; }
@media (min-width: 1024px) { .mx-page-hero.is-fixed-nav { padding-top: 160px; } }
.mx-page-title {
  margin: 0 0 20px; color: var(--mx-ink); font-family: var(--mx-serif); font-weight: 600;
  font-size: clamp(2rem, 1.45rem + 2.3vw, 3.25rem); line-height: 1.42; letter-spacing: .1em;
}
.mx-page-title em { font-style: normal; color: var(--mx-teal); }
.mx-page-lead { margin: 0; max-width: 36em; color: var(--mx-muted); font-size: 1rem; line-height: 2; }
.mx-page-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
/* 窄手機：頁首大標同樣收字距（須寫在 .mx-page-title 之後才蓋得過） */
@media (max-width: 419.98px) { .mx-page-title { font-size: 1.85rem; letter-spacing: .04em; } }

/* ---------- 數據列 ---------- */
.mx-stats { background: #fff; border-top: 1px solid var(--mx-line); border-bottom: 1px solid var(--mx-line); }
.mx-stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .mx-stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mx-stat { padding: 32px 12px; text-align: center; }
.mx-stats-grid .mx-stat + .mx-stat { border-left: 1px solid var(--mx-line); }
@media (max-width: 767.98px) {
  .mx-stats-grid .mx-stat:nth-child(3) { border-left: 0; }
  .mx-stats-grid .mx-stat:nth-child(n+3) { border-top: 1px solid var(--mx-line); }
}
.mx-stat-num {
  font-family: var(--mx-latin); font-weight: 500; color: var(--mx-ink);
  font-size: clamp(2.4rem, 1.8rem + 2vw, 3.4rem); line-height: 1; letter-spacing: .02em;
  font-variant-numeric: lining-nums tabular-nums;
}
.mx-stat-label { margin-top: 10px; font-size: .85rem; color: var(--mx-muted); letter-spacing: .14em; }

/* ---------- 引言（襯線大字） ---------- */
.mx-pull {
  margin: 0 0 24px; padding-left: 20px; border-left: 2px solid var(--mx-steel);
  font-family: var(--mx-serif); font-weight: 500; color: var(--mx-ink);
  font-size: 1.2rem; line-height: 1.9; letter-spacing: .06em;
}
.mx-body { color: var(--mx-text); line-height: 2; margin: 0 0 16px; }

/* 照片＋後方色塊（關於明曜） */
.mx-photo-stack { position: relative; padding: 0 0 28px 28px; }
.mx-photo-stack::before { content: ''; position: absolute; left: 0; bottom: 0; width: 70%; height: 70%; background: var(--mx-paper-2); border-radius: var(--mx-radius-lg); }
.mx-photo-stack > * { position: relative; }

/* 關於明曜（首頁＋關於我們）：左側霧青色塊（屋頂線紋）＋右側米色，圖卡跨在色塊邊界上 */
.mx-about-split { background: var(--mx-paper); overflow: hidden; }
.mx-about-split::before {
  content: ''; position: absolute; left: 0; top: 0; right: 0; height: 380px; pointer-events: none;
  /* 邊緣柔化：色塊由上往下淡出到米色，不留硬切線 */
  -webkit-mask: radial-gradient(ellipse 130% 100% at 50% 0%, #000 45%, transparent 100%);
          mask: radial-gradient(ellipse 130% 100% at 50% 0%, #000 45%, transparent 100%);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='36' viewBox='0 0 56 36'%3E%3Cpath d='M4 30 28 8 52 30' fill='none' stroke='%2324525a' stroke-opacity='.13' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / 56px 36px,
    linear-gradient(160deg, #e9f0ef 0%, #d7e4e3 100%);
}
.mx-about-split .mx-wrap { position: relative; z-index: 1; }
@media (min-width: 1024px) {
  .mx-about-split::before { right: auto; bottom: 0; height: auto; width: calc(50% + 40px);
    -webkit-mask: radial-gradient(ellipse 100% 95% at 0% 50%, #000 50%, transparent 100%);
            mask: radial-gradient(ellipse 100% 95% at 0% 50%, #000 50%, transparent 100%); }
}
.mx-about-frame { position: relative; padding: 14px; }
.mx-about-frame::before { content: ''; position: absolute; inset: 0; border: 1px solid rgba(36, 82, 90, .22); border-radius: 30px; pointer-events: none; }
.mx-about-frame::after { content: ''; position: absolute; z-index: 2; right: 44px; bottom: 6px; width: 72px; height: 4px; border-radius: 2px; background: var(--mx-steel); }
.mx-about-frame > * { box-shadow: 0 30px 60px -36px rgba(29, 53, 59, .4); }
.mx-about-logo { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; border-radius: 22px;
  /* 霧面暖白玻璃：讓底下的霧青與屋頂紋淡淡透出，不是一塊死白 */
  background: linear-gradient(150deg, rgba(252, 251, 248, .82) 0%, rgba(244, 241, 235, .7) 100%);
  -webkit-backdrop-filter: blur(6px) saturate(1.1); backdrop-filter: blur(6px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, .75); }
.mx-about-frame > .mx-about-logo { box-shadow: 0 24px 50px -34px rgba(29, 53, 59, .3), inset 0 1px 0 rgba(255, 255, 255, .9); }
.mx-about-logo img { width: 72%; max-width: 400px; height: auto; }
.mx-about-cap { margin: 22px 0 0; text-align: center; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 1.15rem; letter-spacing: .08em; color: var(--mx-teal); }
.mx-about-cap span { display: block; margin-top: 2px; font-family: 'Noto Sans TC', sans-serif; font-style: normal; font-size: .7rem; letter-spacing: .32em; color: var(--mx-muted); }
@media (min-width: 1024px) {
  .mx-about-cap { text-align: left; margin-left: 18px; }
  .mx-about-split .mx-badge-row { box-shadow: 0 14px 30px -22px rgba(29, 53, 59, .3); border-color: transparent; }
}


/* 三格數字（成立年份等） */
.mx-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 36px 0 28px; }
.mx-figure { border-top: 1px solid var(--mx-ink); padding-top: 16px; }
.mx-figure-num { font-family: var(--mx-latin); font-weight: 500; font-size: clamp(2rem, 1.5rem + 1.8vw, 2.8rem); line-height: 1; color: var(--mx-ink); font-variant-numeric: lining-nums; }
.mx-figure-label { margin-top: 10px; font-size: .9rem; color: var(--mx-ink); letter-spacing: .1em; }
.mx-figure-sub { margin-top: 2px; font-size: .78rem; color: var(--mx-muted); letter-spacing: .06em; }

/* 政府特約一行 */
.mx-badge-row { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid var(--mx-line); border-radius: var(--mx-radius); background: #fff; }
.mx-badge-row svg { width: 36px; height: 36px; color: var(--mx-teal); flex-shrink: 0; }
.mx-badge-row strong { display: block; color: var(--mx-ink); font-weight: 500; letter-spacing: .1em; font-size: 1.05rem; }
.mx-badge-row span { display: block; margin-top: 2px; font-size: .82rem; color: var(--mx-muted); letter-spacing: .06em; }

/* ---------- 編號條列（理念、選擇明曜） ---------- */
.mx-points { display: grid; gap: 40px 48px; }
@media (min-width: 768px) { .mx-points.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mx-points.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .mx-points.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 640px) and (max-width: 1023.98px) { .mx-points.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mx-point { border-top: 1px solid var(--mx-line); padding-top: 24px; }
.mx-point-no { display: block; font-family: var(--mx-latin); font-style: italic; font-size: 1.1rem; color: var(--mx-steel); margin-bottom: 14px; }
.mx-point h3 { margin: 0 0 10px; color: var(--mx-ink); font-size: 1.12rem; font-weight: 500; letter-spacing: .1em; line-height: 1.6; }
.mx-point p { margin: 0; color: var(--mx-muted); font-size: .92rem; line-height: 1.95; }

/* ---------- 同心照護圖 ---------- */
.mx-diagram { max-width: 760px; margin: 0 auto 64px; }
.mx-diagram svg { display: block; width: 100%; height: auto; }
/* 手機上整張圖會縮到約 45%，圈內字改大，實際顯示約 12px */
@media (max-width: 639.98px) {
  .mx-diagram .mx-dg-ring { font-size: 26px; letter-spacing: 1px; }
  .mx-diagram .mx-dg-core { font-size: 44px; }
  .mx-diagram .mx-dg-sub  { font-size: 22px; letter-spacing: 1px; }
}
.mx-diagram figcaption { margin-top: 18px; text-align: center; font-size: .85rem; color: var(--mx-muted); letter-spacing: .12em; }

/* ---------- 三單位 ---------- */
.mx-units { display: grid; gap: 48px; }
@media (min-width: 768px) { .mx-units { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
.mx-unit-img { aspect-ratio: 16 / 10; border-radius: var(--mx-radius); overflow: hidden; background: var(--mx-paper-2); margin-bottom: 24px; }
.mx-unit-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mx-unit-key { display: flex; align-items: baseline; gap: 14px; margin-bottom: 10px; }
.mx-unit-letter { font-family: var(--mx-latin); font-size: 2.6rem; line-height: 1; color: var(--mx-steel); font-weight: 500; }
.mx-unit-kind { font-size: .8rem; letter-spacing: .16em; color: var(--mx-muted); }
.mx-unit h3 { margin: 0 0 12px; font-size: 1.25rem; font-weight: 500; letter-spacing: .1em; color: var(--mx-ink); }
.mx-unit p { margin: 0 0 20px; color: var(--mx-muted); font-size: .92rem; line-height: 1.95; }
.mx-unit-areas { border-top: 1px solid var(--mx-line); padding-top: 14px; font-size: .85rem; color: var(--mx-text); letter-spacing: .06em; line-height: 1.9; }
.mx-unit-areas span { display: block; margin-bottom: 4px; color: var(--mx-muted); font-size: .8rem; letter-spacing: .14em; }   /* 「服務區域」獨立一行，下方列區名 */

/* ---------- 申請步驟 ---------- */
.mx-steps { display: grid; gap: 0; counter-reset: step; list-style: none; margin: 0; padding: 0; }
@media (min-width: 768px) { .mx-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mx-step { position: relative; padding: 0 0 36px 64px; }
@media (min-width: 768px) { .mx-step { padding: 72px 28px 0 0; } }
/* 連接線：手機直線、電腦橫線 */
.mx-step::before { content: ''; position: absolute; background: var(--mx-line); left: 21px; top: 44px; bottom: 0; width: 1px; }
.mx-step:last-child::before { display: none; }
@media (min-width: 768px) { .mx-step::before { left: 44px; right: 0; top: 22px; bottom: auto; width: auto; height: 1px; } .mx-step:last-child::before { display: block; right: 50%; opacity: 0; } }
.mx-step-no {
  position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--mx-ink); background: #fff; color: var(--mx-ink);
  font-family: var(--mx-latin); font-size: 1.15rem; font-weight: 500;
}
.mx-sec.is-paper .mx-step-no { background: var(--mx-paper); }
.mx-step:last-child .mx-step-no { background: var(--mx-teal); border-color: var(--mx-teal); color: #fff; }
.mx-step h3 { margin: 6px 0 10px; font-size: 1.12rem; font-weight: 500; letter-spacing: .12em; color: var(--mx-ink); }
@media (min-width: 768px) { .mx-step h3 { margin-top: 0; } }
.mx-step p { margin: 0; color: var(--mx-muted); font-size: .92rem; line-height: 1.95; }
.mx-step p a { color: inherit; text-decoration: none; }
.mx-note { margin: 40px 0 0; font-size: .82rem; color: var(--mx-muted); letter-spacing: .04em; line-height: 1.9; }

/* ---------- 專業團隊 ---------- */
.mx-team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 16px; }
@media (min-width: 640px) { .mx-team { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .mx-team { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 56px 24px; } }
.mx-member { text-align: center; }
/* 職種頭像：內圈白（或米色）細縫＋外圈彩色環。顏色取低彩度、與 Logo 配色協調，各自呼應插圖主色 */
.mx-member { --ring: var(--mx-steel); --gap: #fff; }
.mx-sec.is-paper .mx-member { --gap: var(--mx-paper); }
.mx-member-img { width: 104px; height: 104px; margin: 0 auto 18px; border-radius: 50%; overflow: hidden; background: var(--mx-paper-2);
  box-shadow: 0 0 0 4px var(--gap), 0 0 0 7px var(--ring); }
.mx-member-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mx-member:nth-child(1)  { --ring: #36659a; }  /* 個案管理員：霧鋼藍 */
.mx-member:nth-child(2)  { --ring: #3f7f86; }  /* 照顧服務員：青綠 */
.mx-member:nth-child(3)  { --ring: #a8823f; }  /* 居服督導：赭金 */
.mx-member:nth-child(4)  { --ring: #b5655a; }  /* 護理師：陶土紅 */
.mx-member:nth-child(5)  { --ring: #5f8a6a; }  /* 物理治療師：鼠尾草綠 */
.mx-member:nth-child(6)  { --ring: #8a6a4a; }  /* 職能治療師：胡桃棕 */
.mx-member:nth-child(7)  { --ring: #c27a5c; }  /* 語言治療師：赤陶 */
.mx-member:nth-child(8)  { --ring: #6f8f3e; }  /* 營養師：橄欖綠 */
.mx-member:nth-child(9)  { --ring: #7d6aa0; }  /* 社工師：灰紫 */
.mx-member:nth-child(10) { --ring: #a8667e; }  /* 心理師：乾燥玫瑰 */
.mx-member-name { margin-top: 2px; font-size: 1rem; color: var(--mx-ink); letter-spacing: .12em; }

/* ---------- 地圖等大圖 ---------- */
.mx-frame { border-radius: var(--mx-radius-lg); overflow: hidden; border: 1px solid var(--mx-line); background: #fff; }
.mx-frame img { display: block; width: 100%; height: auto; }

/* ---------- 連結卡（長照知識、媒體） ---------- */
.mx-cards { display: grid; gap: 48px; }
@media (min-width: 768px) { .mx-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
.mx-card { display: block; color: inherit; text-decoration: none; }
.mx-card-img { aspect-ratio: 4 / 3; border-radius: var(--mx-radius); overflow: hidden; background: var(--mx-paper); margin-bottom: 22px; display: flex; align-items: center; justify-content: center; }
.mx-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--mx-ease); }
.mx-card-img.is-contain img { object-fit: contain; width: 82%; height: 82%; }
/* 插圖（長照知識）：底色與插圖本身的米白一致，邊緣才不會露出色差 */
.mx-card-img.is-illus { background: #fcf8f5; }
.mx-card-img.is-illus img { object-fit: contain; }
a.mx-card:hover .mx-card-img img { transform: scale(1.03); }
.mx-card-tag { display: block; font-size: .78rem; letter-spacing: .16em; color: var(--mx-steel); margin-bottom: 10px; }
.mx-card h3 { margin: 0 0 10px; font-size: 1.15rem; font-weight: 500; letter-spacing: .1em; line-height: 1.6; color: var(--mx-ink); }
.mx-card p { margin: 0 0 16px; font-size: .92rem; color: var(--mx-muted); line-height: 1.95; }
a.mx-card:focus-visible { outline: 2px solid var(--mx-steel); outline-offset: 6px; border-radius: var(--mx-radius); }

/* 文字卡（長照知識）：不用插圖，以編號與文字為主 */
.mx-topic {
  display: flex; flex-direction: column; padding: 36px 32px 32px; border-radius: var(--mx-radius);
  background: var(--mx-paper); color: inherit; text-decoration: none; min-height: 300px;
  transition: background-color .3s var(--mx-ease);
}
.mx-topic:hover { background: var(--mx-paper-2); }
.mx-topic:focus-visible { outline: 2px solid var(--mx-steel); outline-offset: 4px; }
.mx-topic-no { font-family: var(--mx-latin); font-style: italic; font-size: 2.8rem; line-height: 1; color: var(--mx-steel); margin-bottom: 32px; }
.mx-topic h3 { margin: 0 0 12px; font-size: 1.2rem; font-weight: 500; letter-spacing: .1em; line-height: 1.6; color: var(--mx-ink); }
.mx-topic p { margin: 0 0 28px; font-size: .92rem; color: var(--mx-muted); line-height: 1.95; }
.mx-topic .mx-link { margin-top: auto; align-self: flex-start; }

/* ---------- 常見問題 ---------- */
.mx-faq-wrap { display: grid; gap: 40px; }
@media (min-width: 1024px) { .mx-faq-wrap { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; } .mx-faq-wrap .mx-head { margin-bottom: 0; display: block; }
  .mx-faq-wrap .mx-head .mx-lead { margin: 16px 0 0; }
  .mx-faq-wrap .mx-head .mx-lead::before { content: none; } }
.mx-faq { border-top: 1px solid var(--mx-ink); }
.mx-faq details { border-bottom: 1px solid var(--mx-line); }
.mx-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px 4px; cursor: pointer; list-style: none;
  font-size: 1.02rem; color: var(--mx-ink); letter-spacing: .08em; line-height: 1.7;
}
.mx-faq summary::-webkit-details-marker { display: none; }
.mx-faq summary::after {
  content: ''; width: 14px; height: 14px; flex-shrink: 0;
  background: linear-gradient(var(--mx-ink), var(--mx-ink)) center / 14px 1px no-repeat,
              linear-gradient(var(--mx-ink), var(--mx-ink)) center / 1px 14px no-repeat;
  transition: transform .3s var(--mx-ease);
}
.mx-faq details[open] summary::after { transform: rotate(45deg); }
.mx-faq summary:focus-visible { outline: 2px solid var(--mx-steel); outline-offset: -2px; }
.mx-faq-a { padding: 0 48px 28px 4px; color: var(--mx-muted); font-size: .95rem; line-height: 2; }

/* ---------- 認證 ---------- */
.mx-certs { margin-top: 72px; padding: 40px 24px; border-radius: var(--mx-radius-lg); background: var(--mx-paper); }
@media (min-width: 768px) { .mx-certs { padding: 56px 48px; } }
.mx-certs-title { text-align: center; margin: 0 0 36px; font-size: .9rem; letter-spacing: .3em; color: var(--mx-muted); }
.mx-certs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mx-cert { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 0 6px; text-align: center; }
.mx-cert + .mx-cert { border-left: 1px solid var(--mx-line); }
.mx-cert img { width: 100%; max-width: 150px; height: auto; }
.mx-cert-name { font-size: .78rem; line-height: 1.7; color: var(--mx-ink); letter-spacing: .06em; }
@media (min-width: 640px) { .mx-cert-name { font-size: .95rem; letter-spacing: .1em; } }
.mx-cert-tag { display: inline-block; margin-left: 4px; padding: 0 8px; border: 1px solid var(--mx-steel); border-radius: 999px; color: var(--mx-steel); font-size: .72rem; letter-spacing: .1em; vertical-align: 2px; }
/* 首頁媒體區（米色底）：認證框改白底、留白縮小，三張徽章同高對齊 */
.mx-sec.is-paper .mx-certs { margin-top: 48px; padding: 32px 20px; background: #fff; box-shadow: 0 14px 34px -26px rgba(29, 53, 59, .3); }
@media (min-width: 768px) { .mx-sec.is-paper .mx-certs { padding: 36px 40px 32px; } }
.mx-sec.is-paper .mx-certs-title { margin-bottom: 24px; }
.mx-sec.is-paper .mx-cert { justify-content: flex-start; gap: 12px; }
.mx-sec.is-paper .mx-cert img { width: auto; height: 120px; max-width: 100%; object-fit: contain; }
#media.mx-sec { padding-bottom: 64px; }
@media (min-width: 1024px) { #media.mx-sec { padding-bottom: 80px; } }

/* ---------- 諮詢區塊（深青底） ---------- */
.mx-cta { position: relative; overflow: hidden; background: var(--mx-teal-dk); color: #fff; padding: 56px 0 40px; }
@media (min-width: 1024px) { .mx-cta { padding: 72px 0 44px; } }
/* 諮詢區與頁尾同色：頁尾上方留白縮小，整塊不顯得空 */
.mx-cta + .mx-footer .mx-footer-top { padding-top: 48px; }
/* 右側屋頂線紋路（取自 Logo），取代舊版光暈 */
.mx-cta::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 44%; pointer-events: none; opacity: .09;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='36' viewBox='0 0 56 36'%3E%3Cpath d='M4 30 28 8 52 30' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / 56px 36px;
  -webkit-mask: linear-gradient(90deg, transparent, #000 60%); mask: linear-gradient(90deg, transparent, #000 60%);
}
.mx-cta-inner { position: relative; z-index: 1; display: grid; gap: 28px; }
/* 電話按鈕緊跟在標題文字右側，不再推到最右邊 */
@media (min-width: 1024px) { .mx-cta-inner { grid-template-columns: auto auto; justify-content: start; align-items: center; gap: 32px 72px; } }
.mx-cta h2 { margin: 0 0 12px; font-family: var(--mx-serif); font-weight: 500; font-size: clamp(1.9rem, 1.4rem + 2vw, 2.9rem); letter-spacing: .1em; line-height: 1.45; }
.mx-cta p { margin: 0; color: rgba(255, 255, 255, .78); line-height: 2; max-width: 32em; }
.mx-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.mx-cta-info { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; padding: 24px 0 0; border-top: 1px solid rgba(255, 255, 255, .16); list-style: none; font-size: .88rem; color: rgba(255, 255, 255, .72); letter-spacing: .06em; grid-column: 1 / -1; }
.mx-cta-info li { display: inline-flex; align-items: center; gap: 8px; }
.mx-cta-info svg { width: 16px; height: 16px; opacity: .8; }

/* ---------- 頁尾 ---------- */
.mx-footer { background: var(--mx-teal-dk); color: rgba(255, 255, 255, .68); font-size: .9rem; padding: 0 0 32px; }
.mx-footer a { color: inherit; text-decoration: none; transition: color .2s; }
.mx-footer a:hover { color: #fff; }
.mx-footer-top { display: grid; gap: 40px; padding: 64px 0 48px; border-top: 1px solid rgba(255, 255, 255, .12); }
@media (min-width: 640px) { .mx-footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .mx-footer-top { grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3fr) minmax(0, 4fr); gap: 48px; } }
.mx-footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; color: #fff; }
.mx-footer-brand img { height: 40px; width: auto; filter: brightness(0) invert(1); opacity: .92; }
.mx-footer-brand span { font-size: 1rem; letter-spacing: .14em; }
.mx-footer p { margin: 0 0 12px; line-height: 1.95; }
.mx-footer-tax { font-size: .8rem; letter-spacing: .08em; }
.mx-footer h4 { margin: 0 0 18px; color: #fff; font-size: .82rem; font-weight: 500; letter-spacing: .24em; }
.mx-footer ul { margin: 0; padding: 0; list-style: none; }
.mx-footer li { line-height: 1.8; }
.mx-footer li + li { margin-top: 8px; }
.mx-footer-links { columns: 2; column-gap: 24px; }
.mx-footer-links li { break-inside: avoid; }
.mx-footer-contact li { display: flex; align-items: flex-start; gap: 10px; }
.mx-footer-contact svg { width: 16px; height: 16px; margin-top: 5px; flex-shrink: 0; color: #9fb6cf; }
.mx-footer-mail { overflow-wrap: anywhere; }
.mx-cta-info a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .25); transition: color .2s, border-color .2s; }
.mx-cta-info a:hover { color: #fff; border-color: #fff; }

/* 社群圖示（頁尾）：細線圓框，滑過填白 */
.mx-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.mx-footer .mx-social-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .24); color: #cfdbe6; transition: background .25s, color .25s, border-color .25s, transform .25s; }
.mx-social-btn svg { width: 17px; height: 17px; }
.mx-social-btn.is-line svg { width: 19px; height: 19px; }
.mx-footer .mx-social-btn:hover { background: #fff; border-color: #fff; color: var(--mx-teal-dk); transform: translateY(-2px); }
.mx-footer .mx-social-btn.is-line:hover { color: #06c755; }
.mx-footer .mx-social-btn.is-fb:hover { color: #1877f2; }
.mx-footer .mx-social-btn.is-ig:hover { color: #d62976; }
.mx-social-btn:focus-visible, .mx-social-pill:focus-visible { outline: 2px solid #9fb6cf; outline-offset: 3px; }

/* 社群列（聯絡頁） */
.mx-social-row { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--mx-line); text-align: center; }
.mx-social-title { margin: 0 0 22px; color: var(--mx-ink); font-size: 1.05rem; letter-spacing: .16em; }
.mx-social-title span { display: block; margin-bottom: 4px; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 1rem; letter-spacing: .08em; color: var(--mx-steel); }
.mx-social-pills { display: grid; gap: 14px; max-width: 960px; margin: 0 auto; }
@media (min-width: 1024px) { .mx-social-pills { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mx-social-pill { display: flex; align-items: center; gap: 14px; padding: 14px 18px 14px 14px; border: 1px solid var(--mx-line); border-radius: 999px; background: #fff; color: var(--mx-text); text-align: left; text-decoration: none; transition: border-color .25s, box-shadow .25s, transform .25s; }
.mx-social-pill > span:nth-child(2) { flex: 1; min-width: 0; }
.mx-social-pill strong { display: block; color: var(--mx-ink); font-size: .95rem; font-weight: 600; letter-spacing: .04em; }
.mx-social-pill small { display: block; color: var(--mx-muted); font-size: .78rem; letter-spacing: .04em; overflow-wrap: anywhere; }
.mx-social-ico { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--mx-paper); color: var(--mx-teal); transition: background .25s, color .25s; }
.mx-social-ico svg { width: 20px; height: 20px; }
.mx-social-arrow { width: 18px; height: 18px; flex-shrink: 0; color: #b9b2a7; transition: color .25s, transform .25s; }
.mx-social-pill:hover { border-color: transparent; box-shadow: 0 10px 28px -12px rgba(29, 53, 59, .28); transform: translateY(-2px); }
.mx-social-pill:hover .mx-social-arrow { color: var(--mx-teal); transform: translate(2px, -2px); }
.mx-social-pill.is-fb:hover .mx-social-ico { background: #1877f2; color: #fff; }
.mx-social-pill.is-ig:hover .mx-social-ico { background: linear-gradient(45deg, #feda75, #fa7e1e 30%, #d62976 60%, #962fbf 85%, #4f5bd5); color: #fff; }
.mx-social-pill.is-lt:hover .mx-social-ico { background: var(--mx-teal); color: #fff; }
.mx-footer-bottom { display: flex; flex-direction: column; gap: 8px; justify-content: space-between; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .78rem; letter-spacing: .08em; }
@media (min-width: 640px) { .mx-footer-bottom { flex-direction: row; } }
.mx-footer-bottom strong { color: #fff; font-weight: 500; }

/* ---------- 導覽列微調（Tailwind 頁） ---------- */
.mx-nav { box-shadow: none !important; border-bottom-color: var(--mx-line) !important; }
.mx-nav .lg\:flex a { letter-spacing: .1em; }

/* ---------- 進場淡入（只在 JS 確認可用時啟用，見 js/main 內的觀察器） ---------- */
.mx-reveal-on .mx-reveal { opacity: 0; transform: translateY(16px); transition: opacity .9s var(--mx-ease), transform .9s var(--mx-ease); }
.mx-reveal-on .mx-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .mx-reveal-on .mx-reveal { opacity: 1; transform: none; transition: none; } }

@media print { .mx-cta::after { display: none; } }

/* 人才招募：薪資亮點（大數字＋標籤垂直置中，說明文字以細線分隔、上下置中） */
.mx-pay { display: flex; flex-wrap: wrap; align-items: center; row-gap: 12px; }
.mx-pay-main { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mx-pay-main > span:first-child { line-height: 1.1; }
.mx-pay-main > span:last-child { line-height: 1.4; letter-spacing: .06em; }
.mx-pay-note { flex-basis: 100%; padding-top: 12px; border-top: 1px solid rgba(29, 53, 59, .12); color: var(--mx-muted); font-size: .8rem; line-height: 1.8; letter-spacing: .04em; }
@media (min-width: 640px) {
  .mx-pay-note { flex: 1 1 220px; margin-left: 28px; padding: 2px 0 2px 28px; border-top: 0; border-left: 1px solid rgba(29, 53, 59, .14); }
}