/* ============================================================
   購館捐款感恩名錄（淺色版）— 樣式表
   全部 scope 在 .hrl 之下；JSX 以 className 套用。
   仍以 inline style 保留的只有「JS 計算值」：
     - 蜂巢每格的 left/top/width/height/font-size（依視窗寬度演算，無法用 class 表示）
     - 各級別金屬色盤，改以 CSS 變數注入：--rim --face --glow --text --label --chip --bar-text
   ============================================================ */

/* 級距列跳至上方名單時的平滑捲動（使用者關閉動效則不套用） */
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

.hrl{
  background:#f4eedc; color:#3a2a14;
  font-family:"Noto Serif TC","Songti TC",serif;
  min-height:100vh; overflow-x:hidden; position:relative;
}
.hrl *{ box-sizing:border-box; }

@keyframes hrl-spin{ to{ transform:rotate(360deg); } }

/* 共用：蜂巢六邊形剪裁 + 等寬小標 + 金色漸層文字 */
.hrl-hex-glow,.hrl-hex-rim,.hrl-hex-face,.hrl-hex-gloss{
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
}
.hrl-kicker{
  font-family:ui-monospace,monospace; font-size:12px; letter-spacing:.4em;
  color:#a8780a; font-weight:700; margin-bottom:16px;
}
.hrl-gold{
  background:linear-gradient(135deg,#a8780a 0%,#8c5c10 24%,#d9a531 50%,#8c5c10 76%,#6e4a08 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  display:inline-block; filter:drop-shadow(0 1px 1px rgba(110,74,8,.35));
}

/* ── 背景裝飾層 ────────────────────────────────────────────── */
.hrl-backdrop{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.hrl-backdrop-wash{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 18% 8%, rgba(255,242,205,.7) 0%, transparent 48%),
    radial-gradient(ellipse at 88% 78%, rgba(222,202,160,.45) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 120%, rgba(217,165,49,.12) 0%, transparent 50%),
    linear-gradient(180deg,#fbf5e4 0%,#f4eedc 45%,#ece3c8 100%);
}
.hrl-backdrop-veins{ position:absolute; inset:0; opacity:.4; }
.hrl-backdrop-hexes{ position:absolute; inset:0; }

/* 大面金牌浮水印（尺寸/位置/旋轉以 inline 帶入） */
.hrl-watermark{ position:absolute; pointer-events:none; z-index:0; filter:saturate(.7); }

/* ── 頂部導覽列 ────────────────────────────────────────────── */
.hrl-topbar{
  position:fixed; top:0; left:0; right:0; z-index:50;
  padding:20px 56px; display:flex; align-items:center; justify-content:space-between;
  background:transparent; backdrop-filter:none; border-bottom:1px solid transparent;
  transition:all .25s ease;
}
.hrl-topbar.is-scrolled{
  padding:12px 40px; background:rgba(244,238,220,.94);
  backdrop-filter:blur(14px); border-bottom:1px solid rgba(217,165,49,.25);
}
.hrl-brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:#3a2a14; }
.hrl-brand-text{ font-size:17px; font-weight:700; letter-spacing:.06em; font-family:"Noto Sans TC",system-ui,sans-serif; }
.hrl-brand-ni{ color:#a8780a; }
.hrl-brand-sub{ opacity:.65; font-size:13px; font-weight:500; }
.hrl-nav{ display:flex; gap:6px; align-items:center; font-family:"Noto Sans TC",system-ui,sans-serif; }
.hrl-navlink{ padding:7px 12px; font-size:13px; color:#3a2a14; text-decoration:none; border-radius:999px; opacity:.75; letter-spacing:.05em; }
.hrl-navlink:hover{ opacity:1; }
/* 會員專區／參訪新家：尺寸字級同 .hrl-navlink，僅以細框與淡金底做層次，不搶版面 */
.hrl-member{
  margin-left:6px; padding:6px 13px; color:#3a2a14; opacity:.85;
  border:1px solid rgba(168,120,10,.45); border-radius:999px;
  font-size:13px; font-weight:600; text-decoration:none; letter-spacing:.05em;
  white-space:nowrap; display:inline-flex; align-items:center; gap:6px;
  transition:opacity .15s, border-color .15s, color .15s;
}
.hrl-member:hover{ opacity:1; border-color:#a8780a; color:#a8780a; }
.hrl-cta{
  margin-left:6px; padding:6px 13px;
  background:rgba(217,165,49,.16); color:#a8780a;
  border:1px solid rgba(217,165,49,.5); border-radius:999px;
  font-size:13px; font-weight:700; text-decoration:none;
  letter-spacing:.05em; white-space:nowrap;
  transition:background .15s, color .15s;
}
.hrl-cta:hover{ background:#d9a531; color:#3a2a14; }

/* ── 漢堡選單（結構/動作同 landing 首頁；配色採 donors 淺金主題）── */
.lp-toggle{
  position:relative; width:44px; height:44px; border:1.5px solid currentColor; background:transparent;
  cursor:pointer; padding:0; display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; transition:transform .3s ease; border-radius:4px; color:#3a2a14; z-index:80;
}
.lp-toggle .bar{ display:block; width:22px; height:3px; border-radius:40px; background:currentColor;
  transition:width .3s ease, transform .3s ease, opacity .3s ease; }
.lp-toggle.is-active{ transform:rotate(90deg); }
.lp-toggle.is-active .bar:nth-child(1){ width:10px; }
.lp-toggle.is-active .bar:nth-child(2){ width:16px; }
.lp-toggle.is-active .bar:nth-child(3){ width:22px; }
.lp-mobile-menu{
  position:fixed; top:0; right:0; bottom:0; width:min(420px,100vw);
  background:rgba(246,243,236,.98); backdrop-filter:blur(18px);
  transform:translateX(100%); transition:transform .45s cubic-bezier(.5,.05,.2,1);
  z-index:60; padding:96px 32px 32px; overflow-y:auto; box-shadow:-20px 0 60px rgba(0,0,0,.18);
}
.lp-mobile-menu.is-open{ transform:translateX(0); }
.lp-mobile-menu .lp-mlink{
  display:block; padding:18px 6px; border-bottom:1px dashed rgba(58,42,20,.16);
  color:#3a2a14; text-decoration:none; font-size:22px; font-weight:800; letter-spacing:.05em;
  font-family:"Noto Sans TC",system-ui,sans-serif;
}
.lp-mobile-menu .lp-mlink small{
  display:block; font-family:ui-monospace,monospace; font-size:11px; font-weight:600;
  letter-spacing:.3em; color:#a8780a; margin-top:4px;
}
.lp-mobile-menu .lp-mlink:hover{ color:#a8780a; }
/* 會員專區（抽屜）：圖示與標題同一行，英文小標換行 */
.lp-mobile-menu .lp-mmember{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; color:#a8780a; }
.lp-mobile-menu .lp-mmember small{ flex:0 0 100%; color:#3a2a14; opacity:.55; }
.lp-mobile-menu .lp-mcta{
  display:block; margin-top:24px; padding:14px 20px;
  background:rgba(217,165,49,.16); color:#a8780a;
  border:1px solid rgba(217,165,49,.5); border-radius:6px;
  text-align:center; text-decoration:none;
  font-size:15px; font-weight:800; letter-spacing:.1em;
  font-family:"Noto Sans TC",system-ui,sans-serif;
}
.lp-mobile-menu .lp-mcta:hover{ background:#d9a531; color:#3a2a14; }
.lp-backdrop{ position:fixed; inset:0; z-index:55; background:rgba(22,20,15,.45); opacity:0; pointer-events:none; transition:opacity .3s; }
.lp-backdrop.is-open{ opacity:1; pointer-events:auto; }
@media (max-width:1100px){ .lp-desktop-nav{ display:none !important; } }
@media (min-width:1101px){ .lp-toggle, .lp-mobile-menu, .lp-backdrop{ display:none !important; } }

/* ── HERO ─────────────────────────────────────────────────── */
.hrl-hero{
  position:relative; min-height:96vh; padding:150px 7% 40px;
  display:flex; align-items:center; justify-content:space-between;
  gap:56px; flex-wrap:wrap; z-index:2;
}
.hrl-hero .hrl-kicker{ margin-bottom:26px; }
.hrl-hero-col{ flex:1 1 520px; position:relative; z-index:2; }
.hrl-hero-sub{ font-family:"Noto Sans TC",system-ui,sans-serif; font-size:15px; letter-spacing:.3em; opacity:.65; margin-bottom:16px; }
.hrl-hero-h1{
  margin:0; font-size:clamp(54px,8.5vw,142px); line-height:.9; font-weight:700;
  letter-spacing:.05em; font-family:"Noto Serif TC","Songti TC",serif; color:#3a2a14;
}
.hrl-hero-lead{
  margin-top:34px; font-size:18px; line-height:1.85; max-width:540px;
  color:rgba(58,42,20,.8); font-family:"Noto Sans TC",system-ui,sans-serif;
}
.hrl-stats{ margin-top:42px; display:flex; gap:30px; flex-wrap:wrap; }
.hrl-stat{ display:flex; flex-direction:column; gap:4px; }
.hrl-stat-l{ font-family:monospace; font-size:11px; letter-spacing:.3em; color:#a8780a; font-weight:700; }
.hrl-stat-v{
  font-size:44px; line-height:1; font-weight:700; font-family:"Noto Serif TC",serif;
  background:linear-gradient(135deg,#c9911d,#d9a531,#8c5c10);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.hrl-stat-u{ font-size:16px; margin-left:6px; opacity:.75; }
.hrl-hero-medal{ flex:0 1 460px; position:relative; min-height:420px; display:flex; justify-content:center; z-index:2; }

/* HERO 金牌 */
.hrl-medal-wrap{ position:relative; width:100%; max-width:440px; }
.hrl-medal-halo{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:116%; height:116%; border-radius:50%;
  background:radial-gradient(circle, rgba(255,213,108,.55) 0%, rgba(217,165,49,.18) 45%, transparent 70%);
  filter:blur(26px); pointer-events:none;
}
.hrl-medal-ring{ position:absolute; inset:-6%; width:112%; height:112%; animation:hrl-spin 60s linear infinite; opacity:.35; pointer-events:none; }
.hrl-medal-img{ position:relative; width:100%; height:auto; display:block; filter:drop-shadow(0 26px 44px rgba(58,42,20,.32)); z-index:1; }

/* ── 捐款榮譽級距 ─────────────────────────────────────────── */
.hrl-scale{ position:relative; padding:52px 7% 60px; z-index:2; }
.hrl-scale-inner{ max-width:1120px; margin:0 auto; position:relative; }
.hrl-scale-head{ text-align:center; margin-bottom:50px; }
.hrl-scale-h2{ margin:0; font-size:clamp(34px,5vw,64px); font-weight:700; letter-spacing:.12em; font-family:"Noto Serif TC",serif; }
.hrl-scale-sub{ margin-top:16px; font-size:16px; opacity:.7; font-family:"Noto Sans TC",sans-serif; }
.hrl-ladder{ display:flex; flex-direction:column; gap:10px; }
.hrl-scale-foot{ margin-top:22px; text-align:center; font-size:14px; opacity:.6; font-family:"Noto Sans TC",sans-serif; letter-spacing:.04em; }

.hrl-scale-row{
  position:relative; display:flex; align-items:center; gap:20px;
  padding:15px 26px; border-radius:6px; overflow:hidden;
  background:rgba(255,255,255,.55); border:1px solid rgba(217,165,49,.22);
  box-shadow:0 2px 8px rgba(58,42,20,.06);
  text-decoration:none; color:inherit; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
/* 整列為 <a>：hover 微浮起，並讓右側「共 N 位 ↑」提示變明顯 */
.hrl-scale-row:hover{
  transform:translateX(4px);
  background:rgba(255,255,255,.85);
  box-shadow:0 6px 18px rgba(58,42,20,.14);
}
.hrl-scale-row.is-top:hover{ background:var(--rim); box-shadow:0 14px 34px rgba(217,165,49,.45), inset 0 1px 0 rgba(255,255,255,.7); }
.hrl-scale-row:focus-visible{ outline:2px solid #d9a531; outline-offset:2px; }
.hrl-scale-jump{
  position:relative; flex:0 0 auto; margin-left:14px;
  font-family:"Noto Sans TC",sans-serif; font-size:13px; font-weight:500;
  color:var(--label); letter-spacing:.06em; white-space:nowrap; opacity:.55;
  transition:opacity .18s ease;
}
.hrl-scale-row:hover .hrl-scale-jump{ opacity:1; }
.hrl-scale-row.is-top .hrl-scale-jump{ color:var(--bar-text); opacity:.8; }
.hrl-scale-row.is-top{
  padding:20px 26px; background:var(--rim); border:none;
  box-shadow:0 10px 28px rgba(217,165,49,.35), inset 0 1px 0 rgba(255,255,255,.7);
}
.hrl-scale-shine{
  position:absolute; top:0; left:15%; right:55%; height:100%; pointer-events:none;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.6) 50%, transparent 70%);
}
.hrl-chip{
  position:relative; flex:0 0 auto; width:14px; height:14px; border-radius:50%;
  background:var(--chip); box-shadow:inset 0 -1px 2px rgba(0,0,0,.25), 0 0 0 3px rgba(255,255,255,.5);
}
.hrl-scale-amt{
  position:relative; flex:0 0 200px; font-family:"Noto Sans TC",sans-serif;
  font-size:17px; font-weight:700; color:#3a2a14; letter-spacing:.02em; white-space:nowrap;
}
.hrl-scale-row.is-top .hrl-scale-amt{ font-size:20px; color:var(--bar-text);
  text-shadow:.6px .6px 0 rgba(58,42,20,.55), -.6px .6px 0 rgba(58,42,20,.55), .6px -.6px 0 rgba(58,42,20,.55), -.6px -.6px 0 rgba(58,42,20,.55), 0 2px 3px rgba(0,0,0,.3); }
.hrl-scale-conn{ position:relative; flex:1; height:1px; border-top:1px dashed rgba(217,165,49,.4); }
.hrl-scale-row.is-top .hrl-scale-conn{ border-top:1px dashed rgba(255,255,255,.5); }
.hrl-scale-name{
  position:relative; flex:0 0 auto; display:flex; align-items:center; gap:10px;
  font-family:"Noto Serif TC",serif; font-size:19px; font-weight:700;
  color:var(--label); letter-spacing:.1em; white-space:nowrap;
}
.hrl-scale-row.is-top .hrl-scale-name{ font-size:24px; color:var(--bar-text);
  text-shadow:.6px .6px 0 rgba(58,42,20,.55), -.6px .6px 0 rgba(58,42,20,.55), .6px -.6px 0 rgba(58,42,20,.55), -.6px -.6px 0 rgba(58,42,20,.55), 0 2px 3px rgba(0,0,0,.3); }

/* ── 級別大標 + 蜂巢區 ────────────────────────────────────── */
/* scroll-margin-top：級距列 <a href="#tid"> 跳過來時，別被固定頂欄壓住 */
.hrl-tier{ position:relative; padding:34px 4% 28px; z-index:2; scroll-margin-top:88px; }
.hrl-tier-inner{ max-width:1560px; margin:0 auto; }
.hrl-bar{ position:relative; padding:0 3%; margin-bottom:16px; }
.hrl-bar-plate{
  position:relative; background:var(--rim); border-radius:4px; padding:18px 34px;
  box-shadow:0 8px 24px rgba(58,42,20,.18), 0 2px 4px rgba(58,42,20,.10), inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(0,0,0,.15);
  display:flex; align-items:center; justify-content:space-between; gap:18px; overflow:hidden;
}
.hrl-bar-shine{
  position:absolute; top:0; left:18%; right:58%; height:100%; pointer-events:none;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
}
.hrl-bar-mid{ position:relative; display:flex; align-items:center; gap:14px; flex:1; justify-content:center; }
.hrl-bar-h2{
  margin:0; font-size:clamp(22px,3.2vw,34px); font-weight:700; letter-spacing:.18em;
  color:var(--bar-text); font-family:"Noto Serif TC",serif; white-space:nowrap;
  /* 深色描邊：白字在淺色（銀／白金）金屬中央也清晰，金／銅級則更顯立體 */
  text-shadow:
    .6px .6px 0 rgba(58,42,20,.55), -.6px .6px 0 rgba(58,42,20,.55),
    .6px -.6px 0 rgba(58,42,20,.55), -.6px -.6px 0 rgba(58,42,20,.55),
    0 2px 3px rgba(0,0,0,.3);
}
.hrl-bar-sub{
  position:relative; font-family:monospace; font-size:clamp(10px,1.1vw,12px); letter-spacing:.25em;
  color:var(--bar-text); opacity:.75; white-space:nowrap;
  text-shadow:.5px .5px 0 rgba(58,42,20,.5), -.5px -.5px 0 rgba(58,42,20,.5), 0 1px 1px rgba(0,0,0,.3);
}
.hrl-bar-meta{ margin-top:12px; padding:0 6px; display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap; }
.hrl-bar-blurb{ font-size:14px; font-style:italic; color:rgba(58,42,20,.6); font-family:"Noto Sans TC",sans-serif; }
.hrl-bar-code{ font-family:ui-monospace,monospace; font-size:11px; letter-spacing:.25em; color:rgba(58,42,20,.55); white-space:nowrap; font-weight:600; }

.hrl-comb{ display:flex; justify-content:center; position:relative; padding:14px 0 10px; }
.hrl-comb-glow{
  position:absolute; inset:6% 4%; pointer-events:none; filter:blur(14px);
  background:radial-gradient(ellipse at 50% 50%, var(--glow) 0%, transparent 70%);
}
.hrl-wall{ position:relative; }            /* width/height inline（演算值）*/
.hrl-cell{ position:absolute; }            /* left/top/width/height inline（演算值）*/

/* 蜂巢單格（width/height/font-size/inset/gap 由 inline 帶入演算值） */
.hrl-hex{ position:relative; transition:transform .25s ease; cursor:default; }
.hrl-hex:hover{ transform:translateY(-5px); }
.hrl-hex-glow{ position:absolute; inset:-4px; background:var(--glow); filter:blur(16px); opacity:.5; transition:opacity .25s; }
.hrl-hex:hover .hrl-hex-glow{ opacity:.9; }
.hrl-hex-rim{ position:absolute; inset:0; background:var(--rim); filter:drop-shadow(0 6px 12px rgba(58,42,20,.25)) drop-shadow(0 2px 4px rgba(58,42,20,.15)); }
.hrl-hex-face{
  position:absolute; background:var(--face); color:var(--text); text-align:center;
  box-shadow:inset 0 2px 4px rgba(255,255,255,.6), inset 0 -2px 4px rgba(0,0,0,.04);
  display:flex; flex-direction:column; align-items:center; justify-content:center; padding:7% 17% 9%;
}
.hrl-hex-badge{ border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.hrl-hex-name{ line-height:1.05; font-weight:700; letter-spacing:.08em; font-family:"Noto Serif TC",serif; color:var(--text); white-space:nowrap; }
.hrl-hex-role{ line-height:1.2; opacity:.82; font-family:"Noto Sans TC",sans-serif; color:var(--label); font-weight:600; white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
/* role 含「／」時 JS 拆成多行，每行各自截斷 */
.hrl-hex-role > div{ max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.hrl-hex-co{ line-height:1.3; opacity:.6; font-family:"Noto Sans TC",sans-serif; color:var(--text); white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.hrl-hex-gloss{
  position:absolute; top:15%; left:25%; width:35%; height:20%; pointer-events:none; opacity:.55; filter:blur(4px);
  background:linear-gradient(120deg, rgba(255,255,255,.7), transparent 70%);
}
.hrl-stars{ display:flex; gap:1px; justify-content:center; }

/* ── 結語 ─────────────────────────────────────────────────── */
.hrl-closing{ position:relative; padding:60px 7% 72px; z-index:2; background:linear-gradient(180deg, transparent, rgba(217,165,49,.10)); }
.hrl-closing-inner{ max-width:1100px; margin:0 auto; text-align:center; position:relative; }
.hrl-closing-h{ font-size:36px; color:#a8780a; letter-spacing:.5em; margin-bottom:24px; font-family:"Noto Serif TC",serif; text-shadow:0 1px 0 rgba(255,255,255,.5); }
.hrl-closing-p{ font-size:17px; line-height:2; opacity:.8; max-width:720px; margin:0 auto; color:#3a2a14; font-family:"Noto Sans TC",sans-serif; }
.hrl-closing-actions{ margin-top:46px; display:flex; justify-content:center; gap:18px; flex-wrap:wrap; }
.hrl-btn{ padding:16px 32px; font-size:15px; letter-spacing:.2em; text-decoration:none; font-family:"Noto Sans TC",sans-serif; border-radius:2px; }
.hrl-btn-primary{ background:linear-gradient(135deg,#d9a531,#b78521); color:#fff; font-weight:700; border:1px solid #fff3b8; box-shadow:0 6px 16px rgba(217,165,49,.4), inset 0 1px 0 rgba(255,255,255,.5); }
.hrl-btn-secondary{ background:rgba(255,255,255,.6); color:#3a2a14; font-weight:600; border:1px solid rgba(58,42,20,.3); }

/* ── 頁尾 ─────────────────────────────────────────────────── */
.hrl-footer{ position:relative; padding:40px 7%; z-index:2; border-top:1px solid rgba(217,165,49,.25); background:rgba(244,238,220,.6); font-family:"Noto Sans TC",sans-serif; }
.hrl-footer-inner{ max-width:1560px; margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; font-size:13px; color:#3a2a14; opacity:.7; }
.hrl-footer-mono{ font-family:monospace; letter-spacing:.25em; }

/* ── 響應式：1:1 對應原 ScaleSection 的 useVP(mob) 判斷（≤720px）。
   原設計中 topbar/hero/closing 不隨寬度改變，故此處不另加，保持與原稿一致。
   蜂巢排版仍由 JS 依視窗寬度演算。 */
@media (max-width:720px){
  .hrl-scale{ padding:40px 5vw 44px; }
  .hrl-ladder{ gap:7px; }
  .hrl-scale-row{ gap:12px; padding:12px 16px; }
  .hrl-scale-row.is-top{ padding:14px 16px; }
  .hrl-chip{ width:11px; height:11px; }
  .hrl-scale-amt{ flex:1 1 auto; font-size:13.5px; }
  .hrl-scale-row.is-top .hrl-scale-amt{ font-size:15px; }
  .hrl-scale-conn{ display:none; }
  .hrl-scale-name{ gap:6px; font-size:14.5px; letter-spacing:.04em; }
  .hrl-scale-row.is-top .hrl-scale-name{ font-size:16px; }
  /* 手機：整列仍可點，但「共 N 位 ↑」文字省略避免擠壓 */
  .hrl-scale-jump{ display:none; }
  .hrl-scale-row:hover{ transform:none; }
  .hrl-tier{ scroll-margin-top:70px; }
  .hrl-scale-foot{ font-size:12.5px; }

  /* 級別色條：手機改直向堆疊 — 中文標題＋星星一排（不斷字），英文移到下方縮小 */
  .hrl-bar{ padding:0; margin-bottom:14px; }
  .hrl-bar-plate{ flex-direction:column; gap:6px; padding:14px 16px; text-align:center; }
  .hrl-bar-mid{ flex:none; gap:8px; flex-wrap:wrap; }
  .hrl-bar-h2{ font-size:20px; letter-spacing:.08em; }
  .hrl-bar-sub{ font-size:10px; }
  /* 色條下方導語／編號：置中堆疊，不左右散開 */
  .hrl-bar-meta{ flex-direction:column; align-items:center; text-align:center; gap:4px; margin-top:8px; }

  /* 手機整體更緊湊：縮小 Hero 內距與各區塊間距 */
  .hrl-hero .hrl-kicker{ margin-bottom:12px; }
  .hrl-hero-sub{ margin-bottom:8px; }
  .hrl-hero-lead{ margin-top:18px; font-size:15px; line-height:1.7; }
  .hrl-stats{ margin-top:22px; gap:18px; }
  .hrl-scale-head{ margin-bottom:24px; }
  .hrl-comb{ padding:12px 0 8px; }
}