/* ==========================================================================
   JGL 子頁元件庫 (Pattern Library)
   建立 2026-09-08 · 方案 B 完整設計版
   色票取自站上 style.css + 2026/07/27 Canva 設計稿實際取樣
   用法：view 內直接寫 class，不要在 view 裡寫 <style>
   ========================================================================== */

:root {
  --jgl-navy:        #000430;   /* 站上主色 */
  --jgl-navy-band:   #061125;   /* 設計稿深色區塊底 */
  --jgl-navy-card:   #131d30;   /* 深色區塊內的卡片 */
  --jgl-green:       #91c531;   /* 站上綠 */
  --jgl-green-vivid: #80cd29;   /* 設計稿強調綠 */
  --jgl-blue:        #00b1de;   /* 站上藍 */
  --jgl-blue-soft:   #33bed5;
  --jgl-orange:      #f0871f;
  --jgl-ink:         #1b2333;
  --jgl-muted:       #6b7583;
  --jgl-line:        #e3e7ec;
  --jgl-tint-blue:   #f2f7f8;   /* 淺灰藍區塊底 */
  --jgl-tint-green:  #ebf4ed;   /* 淺綠附註底 */
  --jgl-radius:      25px;   /* 2026-09-11 依設計稿放大 1.8×（原 14px）*/
  --jgl-radius-sm:   16px;  /* 同上（原 9px）*/
}

/* --------------------------------------------------------------------------
   1. 區塊 Band —— 圓角色塊，設計稿的分段單位
   -------------------------------------------------------------------------- */
.jgl-band {
  position: relative;
  border-radius: var(--jgl-radius);
  padding: 4.2rem 2.6rem;              /* 2026-09-10 加大，對齊設計稿留白 */
  margin: 3.4rem 0;
  overflow: hidden;
}
.jgl-band + .jgl-band { margin-top: 2.8rem; }

.jgl-band--navy  { background: var(--jgl-navy-band); color: #fff; }
.jgl-band--green { background: var(--jgl-green); color: var(--jgl-navy); }
.jgl-band--blue  { background: var(--jgl-blue); color: #fff; }
.jgl-band--tint  { background: var(--jgl-tint-blue); color: var(--jgl-ink); }
.jgl-band--plain { background: transparent; padding-left: 0; padding-right: 0; }

/* 頂部藍→綠漸層細線（設計稿深色區塊的招牌） */
.jgl-band--rule::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--jgl-blue) 0%, var(--jgl-green-vivid) 100%);
}

.jgl-band--navy  .jgl-h2,
.jgl-band--blue  .jgl-h2  { color: #fff; }
.jgl-band--navy  p,
.jgl-band--blue  p        { color: rgba(255,255,255,.86); }

/* --------------------------------------------------------------------------
   2. 標題群組
   -------------------------------------------------------------------------- */
.jgl-eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .8rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--jgl-blue);
  margin-bottom: 1rem;
}
.jgl-eyebrow::before {
  content: ""; width: 26px; height: 3px; border-radius: 2px;
  background: var(--jgl-green-vivid);
}
.jgl-band--tint .jgl-eyebrow,
.jgl-band--plain .jgl-eyebrow { color: var(--jgl-muted); }

.jgl-h2 {
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  font-weight: 800; line-height: 1.25; margin: 0 0 1rem;
  color: var(--jgl-navy);
}
.jgl-lead { font-size: 1.03rem; line-height: 1.7; margin-bottom: 1.25rem; }
.jgl-center { text-align: center; }
.jgl-center .jgl-eyebrow { justify-content: center; }

/* --------------------------------------------------------------------------
   3. 格線 Grid
   -------------------------------------------------------------------------- */
.jgl-grid { display: grid; gap: 1.1rem; }
.jgl-grid--2  { grid-template-columns: repeat(2, minmax(0,1fr)); }
.jgl-grid--3  { grid-template-columns: repeat(3, minmax(0,1fr)); }
.jgl-grid--4  { grid-template-columns: repeat(4, minmax(0,1fr)); }
.jgl-grid--split { grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; }

/* --------------------------------------------------------------------------
   4. 卡片 Card
   -------------------------------------------------------------------------- */
.jgl-card {
  background: #fff; border-radius: var(--jgl-radius-sm);
  padding: 1.4rem 1.5rem; border: 1px solid var(--jgl-line);
  height: 100%;
}
.jgl-card h5, .jgl-card h6 { margin-top: 0; }
.jgl-card p:last-child { margin-bottom: 0; }

.jgl-card--dark   { background: var(--jgl-navy-card); border-color: transparent; color: rgba(255,255,255,.82); }
.jgl-card--dark h5, .jgl-card--dark h6 { color: #fff; }

.jgl-card--accent { background: var(--jgl-green-vivid); border-color: transparent; color: var(--jgl-navy); }
.jgl-card--accent h5, .jgl-card--accent h6 { color: var(--jgl-navy); }

/* 左側彩條卡（設計稿 STEP 卡） */
.jgl-card--rail { border-left: 4px solid var(--jgl-blue); }
.jgl-rail-blue   { border-left-color: var(--jgl-blue) !important; }
.jgl-rail-teal   { border-left-color: var(--jgl-blue-soft) !important; }
.jgl-rail-green  { border-left-color: var(--jgl-green-vivid) !important; }
.jgl-rail-orange { border-left-color: var(--jgl-orange) !important; }

/* 描邊卡（Your Bridge 的橘/綠/藍框） */
.jgl-card--outline { background: #fff; border-width: 2px; }

/* --------------------------------------------------------------------------
   5. 步驟卡 Step
   -------------------------------------------------------------------------- */
.jgl-step__no {
  display: block; font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--jgl-muted); margin-bottom: .5rem;
}
.jgl-card--accent .jgl-step__no { color: rgba(0,4,48,.6); }
.jgl-step__title { font-size: 1.05rem; font-weight: 700; margin: 0 0 .5rem; }
.jgl-step__text  { font-size: .93rem; line-height: 1.6; margin: 0; }

/* --------------------------------------------------------------------------
   6. 藥丸標籤 Pill
   -------------------------------------------------------------------------- */
.jgl-pills { display: flex; flex-wrap: wrap; gap: .6rem; }
.jgl-pill {
  display: inline-block; padding: .45rem 1.1rem; border-radius: 999px;
  background: #fff; color: var(--jgl-navy);
  font-size: .92rem; font-weight: 600; border: 1px solid var(--jgl-line);
}
.jgl-pill--green { background: var(--jgl-green-vivid); border-color: transparent; }
.jgl-pill--blue  { background: var(--jgl-blue); border-color: transparent; color: #fff; }

/* --------------------------------------------------------------------------
   7. 附註框 Note
   -------------------------------------------------------------------------- */
.jgl-note {
  background: var(--jgl-tint-green); border-left: 4px solid var(--jgl-green-vivid);
  border-radius: 0 var(--jgl-radius-sm) var(--jgl-radius-sm) 0;
  padding: 1.1rem 1.25rem; margin: 1.25rem 0;
}
.jgl-note--blue { background: #eef7fb; border-left-color: var(--jgl-blue); }
.jgl-note p:last-child { margin-bottom: 0; }
.jgl-note__title { font-weight: 700; margin: 0 0 .35rem; color: var(--jgl-navy); }

/* --------------------------------------------------------------------------
   8. 圖片 Figure
   -------------------------------------------------------------------------- */
.jgl-figure { margin: 0; border-radius: var(--jgl-radius-sm); overflow: hidden; }
.jgl-figure img { display: block; width: 100%; height: auto; }
.jgl-figure--cover img { height: 100%; object-fit: cover; }
.jgl-figcaption { font-size: .82rem; color: var(--jgl-muted); margin-top: .5rem; }

/* --------------------------------------------------------------------------
   9. CTA 區
   -------------------------------------------------------------------------- */
.jgl-cta { text-align: center; }
.jgl-cta .jgl-h2 { margin-bottom: .6rem; }
.jgl-cta__actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 1.6rem; }
.jgl-btn {
  display: inline-block; padding: .8rem 2rem; border-radius: 999px;
  font-weight: 700; text-decoration: none; border: 2px solid transparent;
  transition: filter .15s ease;
}
.jgl-btn:hover { filter: brightness(1.08); text-decoration: none; }
.jgl-btn--blue    { background: var(--jgl-blue); color: #fff; }
.jgl-btn--green   { background: var(--jgl-green-vivid); color: var(--jgl-navy); }
.jgl-btn--outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }

/* --------------------------------------------------------------------------
   10. 資料表 Table
   -------------------------------------------------------------------------- */
.jgl-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.25rem 0; }
.jgl-table {
  width: 100%; border-collapse: collapse; background: #fff;
  font-size: .93rem; min-width: 540px;
}
.jgl-table th, .jgl-table td {
  border: 1px solid var(--jgl-line); padding: .7rem .85rem; text-align: left;
  vertical-align: middle;
}
.jgl-table thead th { background: #eef1f6; font-weight: 700; white-space: nowrap; }
.jgl-table tbody th { background: #fafbfc; font-weight: 700; white-space: nowrap; }
.jgl-table .jgl-tee { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.jgl-table .jgl-tee img { width: 34px; height: auto; }

/* --------------------------------------------------------------------------
   11. 手機版
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .jgl-grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 767.98px) {
  .jgl-band { padding: 2.1rem 1.25rem; margin: 1.75rem 0; border-radius: 20px; }
  .jgl-grid--2,
  .jgl-grid--3,
  .jgl-grid--4,
  .jgl-grid--split { grid-template-columns: 1fr; gap: .9rem; }
  .jgl-h2 { font-size: 1.35rem; }
  .jgl-cta__actions { flex-direction: column; }
  .jgl-btn { width: 100%; text-align: center; }
}

/* --------------------------------------------------------------------------
   12. Testimonials 專用（2026-09-10 依設計稿重寫）
        色票：#ecb866 橘黃底 · #ffb68b Case 卡 · #1a1a2e 文字
        設計稿全頁文案為斜體、下方段落為窄欄置中
   -------------------------------------------------------------------------- */
.jgl-band--amber { background: #ecb866; color: #1a1a2e; }
.jgl-band--amber .jgl-eyebrow { color: #7a4a12; }
.jgl-band--amber .jgl-h2 {
  color: #1a1a2e; font-style: italic; font-weight: 400;
  font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.28;
}

/* hero 兩欄：設計稿左標題約 38%、右 Case 卡約 58% */
/* 設計稿實測：Case 卡佔頁寬 62.6%，左緣自 35.3% 起 → 左欄 33 : 卡 62，間距 4% */
.jgl-band--bleed.jgl-testi-hero { padding-left: 3.2%; padding-right: 3.2%; }
.jgl-testi-grid { display: grid; grid-template-columns: 33fr 62fr; gap: 4%; align-items: start; }

.jgl-case {
  background: #ffb68b; border-radius: 36px; padding: 1.7rem 1.9rem;
  font-style: italic;
}
.jgl-case p { margin: 0 0 .3rem; line-height: 1.58; color: #1a1a2e !important; }
.jgl-case__tag   { font-weight: 700; margin-bottom: 1rem !important; }
.jgl-case__title { font-weight: 700; margin-top: 1.1rem !important; }
.jgl-case__label { margin-top: .7rem !important; }
.jgl-case__row   { padding-left: .2rem; }
.jgl-case__split { border: 0; border-top: 2px dashed #3aa88a; margin: 1.3rem 0 .2rem; }

/* 下方白區：窄欄置中、斜體 */
.jgl-testi-body { max-width: 780px; margin: 0 auto; text-align: center; font-style: italic; }
.jgl-testi-body p { font-size: 1.06rem; line-height: 1.72; margin-bottom: 1.5rem; }
.jgl-testi-h3 {
  font-size: clamp(1.3rem, 2.6vw, 1.85rem); font-weight: 700; color: var(--jgl-navy);
  text-decoration: underline; text-underline-offset: 6px; margin: 0 0 1.8rem;
}
.jgl-testi-contact { margin-top: 2.2rem !important; }
.jgl-testi-contact a { font-size: 1.06rem; }

/* 裝飾圓弧：設計稿在白區左側與右側各露一角（藍 / 綠） */
.jgl-testi-after { position: relative; }
.jgl-testi-after::before,
.jgl-testi-after::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none; z-index: -1;
}
/* 依設計稿實測：藍圓中心在白區 40% 高、露出 6.5% 頁寬；綠圓中心 70% 高、露出 9.2% */
.jgl-testi-after::before {
  left: -98px; top: 40%; transform: translateY(-50%);
  width: 209px; height: 209px; background: #3ac0d6;
}
.jgl-testi-after::after {
  right: -149px; top: 70%; transform: translateY(-50%);
  width: 310px; height: 310px; background: #9ecc60;
}
.jgl-testi-after > * { position: relative; z-index: 1; }

@media (max-width: 767.98px) {
  .jgl-testi-grid { grid-template-columns: 1fr; gap: 1.4rem; }
  .jgl-case { padding: 1.2rem 1.3rem; }
  .jgl-testi-after::before, .jgl-testi-after::after { display: none; }
}

/* --------------------------------------------------------------------------
   13. 手繪感外框 Sketchbox（Membership 設計稿的兩個框）
   -------------------------------------------------------------------------- */
/* 手繪外框改用設計稿實際筆畫（2026-09-10）
   —— CSS 描邊做不出歪斜與轉角重疊，改把設計稿的框摳成透明 PNG 當背景，
      內容仍為真實 HTML：文字可選取、會 RWD、SEO 正常 */
.jgl-sketchbox {
  position: relative; background: #fff;
  border: 0; border-radius: 0;
  padding: 2.6rem 2.4rem 2.8rem; height: 100%;
}
.jgl-sketchbox::after {
  content: ""; position: absolute; inset: 0;
  background: url("../img/subpages/frame-sketch-left.png") center / 100% 100% no-repeat;
  pointer-events: none;
}
.jgl-sketchbox--right::after {
  background-image: url("../img/subpages/frame-sketch-right.png");
}
.jgl-sketchbox > * { position: relative; z-index: 1; }
.jgl-sketchbox__eyebrow {
  display: inline-block; font-size: 1.05rem; font-weight: 800;
  color: var(--jgl-green); text-decoration: underline;
  text-underline-offset: 4px; margin-bottom: .3rem;
}
.jgl-sketchbox__title { font-size: 1.02rem; font-weight: 700; color: var(--jgl-navy); margin: 0 0 1rem; }
.jgl-sketchbox ol { padding-left: 1.3rem; margin-bottom: 1rem; }
.jgl-sketchbox ol li { margin-bottom: .5rem; line-height: 1.6; }
.jgl-sketchbox__links { margin-top: 1.1rem; }
.jgl-sketchbox__links a { display: block; margin-bottom: .5rem; font-weight: 600; }
.jgl-sketchbox__pending {
  font-size: .84rem; color: var(--jgl-muted); margin-top: .6rem;
}
@media (max-width: 767.98px) {
  .jgl-sketchbox { border-radius: 29px; padding: 1.2rem 1.25rem; }
  .jgl-sketchbox::before { inset: -5px -3px -3px -5px; }
}

/* --------------------------------------------------------------------------
   14. Camp 專用元件
        色票取樣自 2026/07/27 設計稿：綠 #9ecc60、淡藍 #a1cdc6、
        淡橘 #ffb68b、淡黃 #ffd08b、深綠鈕 #154314
   -------------------------------------------------------------------------- */

/* 14-1 滿版色塊（設計稿的綠 band 是齊邊直角，非圓角）
        ⚠️ 50vw 含捲軸寬 → 桌機會多出幾 px 橫向捲軸，
           故在頁面 wrapper 上加 overflow-x:hidden 防護（scoped，不動全站 body） */
.about-wrap { overflow-x: hidden; }
.jgl-band--bleed {
  border-radius: 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: max(1.25rem, calc(50vw - 50% + 1.25rem));
  padding-right: max(1.25rem, calc(50vw - 50% + 1.25rem));
  max-width: 100vw;
}
.jgl-band--camp { background: #9ecc60; color: var(--jgl-navy); }
.jgl-band--camp .jgl-h2 { color: var(--jgl-navy); }
.jgl-band--camp p { color: var(--jgl-navy); }

/* 14-2 偏移陰影卡（白卡 + 黑框，後方錯開一層亮綠） */
/* ⚠️ 原用 ::before + z-index:-1，會被有背景色的父層 band 蓋掉（2026-09-10 修）
      改用雙層 box-shadow 疊出「亮綠偏移層 + 黑框」，不涉及 stacking context */
.jgl-card--offset {
  position: relative; background: #fff;
  border: 2.5px solid #12131a; border-radius: 32px;
  padding: 1.7rem 1.5rem;
  box-shadow: -9px -9px 0 0 #b7e77a, -9px -9px 0 2.5px #12131a;
}
.jgl-card--offset > * { position: relative; }
.jgl-card--offset p { font-style: italic; font-weight: 700; margin: 0; line-height: 1.5; }

/* 14-3 虛線藥丸（The Real Value 五個賣點，錯落排列） */
.jgl-valuelist { display: flex; flex-direction: column; gap: .9rem; }
.jgl-vpill {
  position: relative; align-self: flex-start;
  padding: .85rem 2.2rem; border-radius: 999px;
  font-size: 1.02rem; color: var(--jgl-navy);
}
.jgl-vpill::after {                 /* 內縮虛線邊 */
  content: ""; position: absolute; inset: 5px;
  border: 2px dashed rgba(255,255,255,.9); border-radius: 999px;
  pointer-events: none;
}
.jgl-vpill--teal   { background: #a1cdc6; }
.jgl-vpill--peach  { background: #ffb68b; }
.jgl-vpill--amber  { background: #ffd08b; }
.jgl-vpill--i1 { margin-left: 6%; }
.jgl-vpill--i2 { margin-left: 12%; }
.jgl-vpill--i3 { margin-left: 9%; }
.jgl-vpill--i4 { margin-left: 3%; }

/* 14-4 圓形徽章（橘底 + 虛線內圈 + JGL logo） */
.jgl-circle-badge {
  position: relative; width: 100%; max-width: 260px; aspect-ratio: 1;
  border-radius: 50%; background: #ffd08b;
  display: flex; align-items: center; justify-content: center; margin: 0 auto;
}
.jgl-circle-badge::after {
  content: ""; position: absolute; inset: 14px;
  border: 2px dashed #fff; border-radius: 50%;
}
.jgl-circle-badge img { width: 58%; height: auto; position: relative; }

/* 14-5 箭頭按鈕（深綠膠囊 + 黃箭頭） */
.jgl-btn-arrow {
  display: inline-flex; align-items: center; gap: 1rem;
  background: #1a4a12; color: #fff; text-decoration: none;
  padding: 1.05rem 2rem; border-radius: 999px;
  font-size: 1.05rem; line-height: 1.4;
}
.jgl-btn-arrow:hover { color: #fff; text-decoration: none; filter: brightness(1.15); }
.jgl-btn-arrow::after {
  content: ""; flex: 0 0 34px; height: 20px;
  background: #f0b323;
  clip-path: polygon(0 42%, 66% 42%, 66% 20%, 100% 50%, 66% 80%, 66% 58%, 0 58%);
}

/* 14-6 大字浮水印（綠 band 上的淡色 JGL） */
.jgl-watermark { position: relative; overflow: hidden; }
.jgl-watermark::before {
  content: ""; position: absolute; right: 6%; top: 50%; transform: translateY(-50%);
  width: 46%; max-width: 420px; aspect-ratio: 1.1;
  background: url("../img/JGL_logo_black_1.png") right center / contain no-repeat;
  opacity: .13; pointer-events: none;
}
.jgl-watermark > * { position: relative; z-index: 1; }

@media (max-width: 767.98px) {
  .jgl-vpill { align-self: stretch; margin-left: 0 !important; padding: .75rem 1.4rem; font-size: .95rem; }
  .jgl-circle-badge { max-width: 190px; margin-bottom: 1.2rem; }
  .jgl-btn-arrow { max-width: 100%; }
  .jgl-watermark::before { display: none; }
}

/* 14-7 Camp 頁微調 */
.jgl-h2--blue { color: var(--jgl-blue) !important; }
.jgl-camp-hero .jgl-grid--split { align-items: center; }

/* --------------------------------------------------------------------------
   15. Rankings 專用元件
        取樣自 2026/07/27 設計稿：藍 band #1dafdd、引述綠 #b7ff7e、
        淺藍 #badff8、橘藥丸 #ff9c00、深藍 CTA #33395c、紅鈕 #ff443a
   -------------------------------------------------------------------------- */
.jgl-band--sky   { background: #1dafdd; color: var(--jgl-navy); }
.jgl-band--sky .jgl-h2, .jgl-band--sky p, .jgl-band--sky .jgl-eyebrow { color: var(--jgl-navy); }
.jgl-band--paleblue { background: #badff8; color: var(--jgl-navy); padding-top: 1.6rem; padding-bottom: 1.6rem; }
.jgl-band--slate { background: #33395c; color: #fff; }
.jgl-band--slate .jgl-h2 { color: #fff; }
.jgl-band--slate p { color: rgba(255,255,255,.9); }
.jgl-band--slate .jgl-eyebrow { color: #fff; }

/* 15-1 亮綠引述框（黑色 L 形括號裝飾） */
.jgl-quote {
  position: relative; background: #b7ff7e; color: var(--jgl-navy);
  padding: 1.5rem 1.7rem; margin: 1.8rem 0 1.2rem 1rem;
  font-size: 1.02rem; line-height: 1.6;
}
.jgl-quote::before, .jgl-quote::after {
  content: ""; position: absolute; width: 46%; height: 46%;
  border: 3px solid var(--jgl-navy);
}
.jgl-quote::before { top: -14px; left: -14px;  border-right: 0; border-bottom: 0; }
.jgl-quote::after  { bottom: -14px; right: -14px; border-left: 0; border-top: 0; }
.jgl-quote p:last-child { margin-bottom: 0; }

/* 15-2 橘色實心標籤 */
.jgl-tagpill {
  display: inline-block; background: #ff9c00; color: var(--jgl-navy);
  border-radius: 999px; padding: .6rem 1.5rem; font-weight: 700; white-space: nowrap;
}
.jgl-tagrow { display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; align-items: center; }

/* 15-3 紅色按鈕 */
.jgl-btn--red { background: #ff443a; color: #fff; }

/* 15-4 卡片內 icon */
.jgl-card__icon { width: 42px; height: auto; margin-bottom: .8rem; display: block; }
.jgl-card--offset .jgl-card__title {
  font-style: italic; font-weight: 800; font-size: 1.05rem;
  color: var(--jgl-navy); margin: 0 0 .7rem;
}
.jgl-card--offset .jgl-card__body { font-style: normal; font-weight: 400; font-size: .95rem; }

@media (max-width: 767.98px) {
  .jgl-tagrow { grid-template-columns: 1fr; gap: .8rem; }
  .jgl-quote { margin-left: .6rem; padding: 1.15rem 1.2rem; }
  .jgl-quote::before, .jgl-quote::after { width: 34%; height: 34%; }
}

/* --------------------------------------------------------------------------
   16. Your Bridge 專用元件
        取樣自 2026/07/27 設計稿：綠大卡 #8dc63f、淺綠小卡 #b7ff7e、
        淺藍卡 #badff8、藍鈕 #0075ad
   -------------------------------------------------------------------------- */

/* 16-1 綠底大卡（內含兩張淺綠小卡 + 黃綠分隔線） */
.jgl-partnerbox {
  background: #8dc63f; border-radius: 36px; padding: 1.4rem;
  display: flex; flex-direction: column; gap: 1rem;
}
.jgl-partnerbox__row {
  background: #b7ff7e; border-radius: 29px; padding: 1.1rem 1.2rem;
  display: grid; grid-template-columns: 118px 1fr; gap: 1rem; align-items: center;
}
.jgl-partnerbox__row img { width: 100%; height: auto; }
.jgl-partnerbox__row h5 { margin: 0 0 .4rem; font-size: 1.05rem; font-weight: 800; color: var(--jgl-navy); }
.jgl-partnerbox__row ul { margin: 0; padding-left: 1.1rem; font-size: .95rem; }
.jgl-partnerbox__row li { margin-bottom: .15rem; }
.jgl-partnerbox__rule { height: 4px; background: #ffd400; border-radius: 2px; margin: 0 2.2rem; }  /* 設計稿取樣 rgb(255,212,0) */

/* 16-2 偏移卡的彩框變體（橘 / 亮綠 / 深藍） */
.jgl-card--offset.jgl-off-orange { box-shadow: -9px -9px 0 0 #ff9c00, -9px -9px 0 2.5px #12131a; }
.jgl-card--offset.jgl-off-green  { box-shadow: -9px -9px 0 0 #b7ff7e, -9px -9px 0 2.5px #12131a; }
.jgl-card--offset.jgl-off-navy   { box-shadow: -9px -9px 0 0 #1565a8, -9px -9px 0 2.5px #12131a; }
.jgl-card--offset .jgl-card__h {
  font-size: 1.06rem; font-weight: 600; color: var(--jgl-navy); margin: 0 0 .7rem;
  font-style: normal;
}

/* 16-3 淺藍 logo 卡（Two halves of one path） */
.jgl-logocard {
  background: #badff8; border-radius: 40px; padding: 1.8rem 1.7rem; height: 100%;
}
.jgl-logocard img { width: 130px; height: auto; display: block; margin-bottom: 1.1rem; }
.jgl-logocard h5 { font-size: 1.2rem; font-weight: 800; color: var(--jgl-navy); margin: 0 0 1rem; }
.jgl-logocard ul { margin: 0; padding-left: 1.15rem; }
.jgl-logocard li { margin-bottom: .45rem; line-height: 1.5; }

/* 16-4 藍色按鈕（Schedule a time to talk） */
.jgl-btn--deepblue { background: #0075ad; color: #fff; }

.jgl-closing {
  text-align: center; font-size: clamp(1.05rem, 2.2vw, 1.45rem);
  font-weight: 700; margin: 2.2rem 0 0; color: var(--jgl-navy);
}
.jgl-closing span { color: #d9e64a; }

@media (max-width: 767.98px) {
  .jgl-partnerbox__row { grid-template-columns: 84px 1fr; gap: .8rem; padding: .9rem 1rem; }
  .jgl-logocard { padding: 1.3rem 1.2rem; }
  .jgl-logocard img { width: 100px; }
}

/* --------------------------------------------------------------------------
   17. Intro NCAA 專用元件
   -------------------------------------------------------------------------- */

/* 17-1 DI / DII / DIII 配對卡（左標籤框 + 右說明框，細黑邊透明底） */
.jgl-divlist { display: flex; flex-direction: column; gap: .9rem; }
.jgl-divrow  { display: grid; grid-template-columns: 96px 1fr; gap: .8rem; align-items: stretch; }
.jgl-divrow__tag,
.jgl-divrow__body {
  border: 1.5px solid var(--jgl-navy); border-radius: 29px;
  background: transparent; padding: .9rem 1rem;
}
.jgl-divrow__tag {
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem; font-weight: 800; color: var(--jgl-navy);
}
.jgl-divrow__body h6 { margin: 0 0 .25rem; font-size: .92rem; font-weight: 800; color: var(--jgl-navy); }
.jgl-divrow__body p  { margin: 0; font-size: .88rem; line-height: 1.45; }

/* 17-2 2×2 棋盤卡（白／藍交錯） */
.jgl-checkcard {
  border-radius: 36px; padding: 1.9rem 1.6rem; text-align: center; height: 100%;
  display: flex; flex-direction: column; justify-content: center;
}
.jgl-checkcard--light { background: #fff; border: 1.5px solid var(--jgl-navy); }
.jgl-checkcard--cyan  { background: #33bed5; border: 1.5px solid transparent; }
.jgl-checkcard h5 { font-size: 1.28rem; font-weight: 800; color: var(--jgl-navy); margin: 0 0 1rem; }
.jgl-checkcard p  { margin: 0; line-height: 1.9; color: var(--jgl-navy); }
.jgl-checkcard--light p { font-weight: 700; }

/* 17-3 教練評分卡（藍底大卡 + 內嵌深藍卡） */
.jgl-scorecard { background: #00b1de; border-radius: 40px; padding: 1.6rem 1.7rem; }
.jgl-scorecard .jgl-eyebrow { color: var(--jgl-navy); }
.jgl-scorecard h4 { font-size: 1.42rem; font-weight: 500; color: var(--jgl-navy); margin: .3rem 0 1.1rem; }
.jgl-scorecard ol { padding-left: 1.4rem; margin: 0 0 1.4rem; }
.jgl-scorecard ol li { margin-bottom: .6rem; font-size: 1.02rem; }
.jgl-scorecard__note {
  background: #3d4266; color: #fff; border-radius: 999px 999px 40px 40px;
  padding: 1.15rem 1.5rem; font-size: .95rem; line-height: 1.5;
}

/* 17-4 綠色描邊藥丸（Beyond the system） */
.jgl-outlinepills { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin: 2rem 0; }
.jgl-outlinepill {
  border: 2.5px solid #12a37a; border-radius: 999px;
  padding: .7rem 1.6rem; font-weight: 800; color: var(--jgl-navy);
  background: transparent; max-width: 340px; text-align: center; line-height: 1.35;
}

@media (max-width: 767.98px) {
  .jgl-divrow { grid-template-columns: 74px 1fr; gap: .6rem; }
  .jgl-divrow__tag { font-size: 1.1rem; }
  .jgl-checkcard { padding: 1.3rem 1.1rem; }
  .jgl-checkcard h5 { font-size: 1.1rem; }
  .jgl-outlinepill { max-width: 100%; }
}

/* --------------------------------------------------------------------------
   18. Rules & Format 專用元件
   -------------------------------------------------------------------------- */

/* 18-1 青色橫幅（左側亮綠條） */
.jgl-callout {
  background: #00b1de; color: var(--jgl-navy);
  border-left: 8px solid #b7ff7e; padding: 1.1rem 1.4rem;
  font-size: 1.05rem; line-height: 1.75; margin-top: 1.4rem;
}
.jgl-callout p { margin: 0; color: var(--jgl-navy) !important; }

/* 18-2 分級卡 DII / DI / INT */
.jgl-tiercard { border-radius: 40px; padding: 1.6rem 1.7rem; height: 100%; }
.jgl-tiercard--dii { background: #33bed5; color: var(--jgl-navy); }
.jgl-tiercard--di  { background: #061a3c; color: #fff; }
.jgl-tiercard--int { background: #8dc63f; color: var(--jgl-navy); }
.jgl-tiercard__tag {
  display: inline-block; border-radius: 999px; padding: .35rem 1.1rem;
  font-size: 1.02rem; font-weight: 600; margin-bottom: .9rem;
}
.jgl-tiercard--dii .jgl-tiercard__tag { background: #b5d94a; color: var(--jgl-navy); }
.jgl-tiercard--di  .jgl-tiercard__tag { background: #00b1de; color: var(--jgl-navy); }
.jgl-tiercard--int .jgl-tiercard__tag { background: #061a3c; color: #fff; }
.jgl-tiercard h5 { font-size: 1.35rem; font-weight: 500; margin: 0 0 .2rem; color: inherit; }
.jgl-tiercard__sub { font-size: 1rem; margin: 0 0 .9rem; opacity: .9; }
.jgl-tiercard ul { margin: 0; padding-left: 1.2rem; }
.jgl-tiercard li { margin-bottom: .45rem; line-height: 1.5; }
.jgl-tiercard__rule {
  border: 0; border-top: 1.5px solid currentColor; opacity: .45;
  margin: 1.3rem 0 .9rem;
}
.jgl-tiercard__foot { font-size: 1.15rem; font-weight: 700; margin: 0; }
.jgl-tiercard__foot small { display: block; font-size: .92rem; font-weight: 400; margin-top: .15rem; }

/* 18-3 規則條目（✕ / ✓ 圓形圖示） */
.jgl-rulebox { background: #061a3c; color: #fff; border-radius: 32px; padding: 1.6rem 1.7rem; height: 100%; }
.jgl-ruleitem { display: grid; grid-template-columns: 26px 1fr; gap: .85rem; padding: .9rem 0; }
.jgl-ruleitem + .jgl-ruleitem { border-top: 1px solid rgba(255,255,255,.15); }
.jgl-ruleitem__icon {
  width: 24px; height: 24px; border-radius: 50%; margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 700; color: #fff;
}
.jgl-ruleitem__icon--no  { background: #d9534f; }
.jgl-ruleitem__icon--yes { background: #4caf50; }
.jgl-ruleitem h6 { margin: 0 0 .25rem; font-size: 1rem; font-weight: 700; color: #fff; }
.jgl-ruleitem p  { margin: 0; font-size: .93rem; line-height: 1.55; color: rgba(255,255,255,.82); }

@media (max-width: 767.98px) {
  .jgl-tiercard { padding: 1.2rem 1.2rem; }
  .jgl-callout { padding: .9rem 1rem; font-size: .95rem; border-left-width: 6px; }
}

/* --------------------------------------------------------------------------
   19. Scoring System 專用元件
   -------------------------------------------------------------------------- */

/* 19-1 三分區卡（DII 青 / DI 淺藍 / INT 白） */
.jgl-divcard { border-radius: 40px; padding: 1.5rem 1.6rem; height: 100%; }
.jgl-divcard--dii { background: #00b1de; color: var(--jgl-navy); }
.jgl-divcard--di  { background: #badff8; color: var(--jgl-navy); }
.jgl-divcard--int { background: #fff;    color: var(--jgl-navy); }
.jgl-divcard__code { font-size: 1.65rem; font-weight: 400; letter-spacing: .06em; margin: 0; }
.jgl-divcard h6 { font-size: 1rem; font-weight: 800; margin: .1rem 0 .9rem; color: var(--jgl-navy); }
.jgl-divcard p  { margin: 0; line-height: 1.55; }

/* 19-2 Tee 對照表（4×4，含圖示） */
.jgl-teetable { min-width: 720px; }
.jgl-teetable thead th {
  background: #f3f5f7; font-size: .78rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--jgl-muted); font-weight: 700;
}
.jgl-teetable tbody th { background: #fff; }
.jgl-teetable tbody th small { display: block; font-weight: 400; color: var(--jgl-muted); font-size: .82rem; }
.jgl-teecell { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; font-size: .88rem; }
.jgl-teecell img { width: 30px; height: auto; flex: 0 0 30px; }
.jgl-tablenote {
  text-align: center; font-style: italic; font-weight: 700;
  color: #7cb342; font-size: .92rem; margin: 1.1rem auto 0; max-width: 780px;
}

/* 19-3 深藍區塊內的深色小卡 */
.jgl-darkcard {
  background: #0d1b34; border-radius: 25px; padding: 1.3rem 1.4rem; height: 100%;
}
.jgl-darkcard__code { color: #8dc63f; font-size: 1.3rem; font-weight: 800; margin: 0 0 .2rem; }
.jgl-darkcard h6 { color: #fff; font-size: 1rem; font-weight: 700; margin: 0 0 .5rem; }
.jgl-darkcard p  { color: rgba(255,255,255,.8); margin: 0; font-size: .93rem; line-height: 1.55; }

/* 19-4 編號卡（01~04） */
.jgl-numcard { background: #fff; border: 1px solid var(--jgl-line); border-radius: 22px; padding: 1.2rem 1.3rem; height: 100%; }
.jgl-numcard__no { color: #4aa3df; font-size: .82rem; font-weight: 700; letter-spacing: .06em; }
.jgl-numcard h6  { font-size: 1rem; font-weight: 800; color: var(--jgl-navy); margin: .35rem 0 .45rem; }
.jgl-numcard p   { margin: 0; font-size: .92rem; line-height: 1.55; color: #5b6472; }

/* 19-5 條列白卡（方形編號 + 文字） */
.jgl-listrow {
  background: #fff; border-radius: 22px; padding: 1rem 1.2rem; margin-bottom: .9rem;
  display: grid; grid-template-columns: 34px 1fr; gap: .9rem; align-items: start;
}
.jgl-listrow__no {
  width: 30px; height: 30px; border-radius: 8px; background: #0d1b34; color: #8dc63f;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .95rem;
}
.jgl-listrow p { margin: 0; font-size: .95rem; line-height: 1.6; color: #33404f; }

/* 19-6 Carry-over Policy 卡 */
.jgl-policy {
  background: linear-gradient(105deg, #eef7ea 0%, #edf4f6 100%);
  border-radius: 29px; padding: 1.5rem 1.6rem;
  display: grid; grid-template-columns: 56px 1fr; gap: 1.1rem; align-items: start;
}
.jgl-policy__icon {
  width: 46px; height: 46px; border-radius: 22px; background: #8dc63f; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
}
.jgl-policy h6 { font-size: 1.05rem; font-weight: 800; color: var(--jgl-navy); margin: 0 0 .5rem; }
.jgl-policy p  { margin: 0 0 .6rem; font-size: .94rem; line-height: 1.6; color: #40505f; }
.jgl-policy p:last-child { margin-bottom: 0; }

/* 19-7 EXAMPLE ONLY 標籤 */
.jgl-extag {
  display: inline-block; background: #fdf0d0; color: #8a6d3b; border: 1px solid #f0d9a0;
  border-radius: 999px; padding: .18rem .8rem; font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; margin-left: .7rem; vertical-align: middle;
}

@media (max-width: 767.98px) {
  .jgl-policy { grid-template-columns: 1fr; gap: .8rem; }
  .jgl-listrow { grid-template-columns: 30px 1fr; gap: .7rem; padding: .85rem 1rem; }
}

/* ==========================================================================
   20. 2026-09-10 設計還原度調校
        對照設計稿後發現：字級偏小、元件偏小、頁面頂端多出共用標題區
   ========================================================================== */

/* 20-1 內容區放寬 —— 設計稿內容寬約 1024px，原本被 col-xl-9 壓到 966px */
.static-page-content { max-width: 1120px; width: 100%; }

/* 20-2 字級對齊設計稿 */
.jgl-h2   { font-size: clamp(1.7rem, 3.6vw, 2.85rem); }
.jgl-band p, .jgl-band li { font-size: 1.08rem; line-height: 1.72; }
.jgl-lead { font-size: 1.16rem; }
.jgl-eyebrow { font-size: .86rem; }

/* 20-3 Camp：圓形徽章與藥丸放大到設計稿比例 */
.jgl-circle-badge { max-width: 360px; }
.jgl-vpill { padding: 1.05rem 2.6rem; font-size: 1.14rem; }

/* 20-4 偏移卡內文放大 */
.jgl-card--offset p { font-size: 1.06rem; }
.jgl-card--offset .jgl-card__title,
.jgl-card--offset .jgl-card__h { font-size: 1.15rem; }
.jgl-card--offset .jgl-card__body { font-size: 1rem; }

/* 20-5 CTA 區塊加高（設計稿的收尾區很有份量） */

/* 20-6 隱藏共用 partial 的頁面標題區
        設計稿一開頁就是 Hero，沒有「Pathway / Conference · Camp」這塊，
        由 controller 傳 $hide_page_heading = true 時套用 */
.jgl-nohead .page-title,
.jgl-nohead .page-subtitle { display: none !important; }
.jgl-nohead .article { padding-top: 1rem; }

/* 設計稿把網址完整印出（非隱藏式超連結），還原其呈現 */
.jgl-url { word-break: break-all; font-size: .92rem; margin: 0 0 .2rem; }
.jgl-url a { color: #29abe2; }
.jgl-sketchbox__links p { margin-bottom: .2rem; }

/* ==========================================================================
   21. 首屏貼齊 menubar（2026-09-10）
        設計稿的滿版 hero 直接貼在導覽列下方，站上原本有
        .article padding-top 16px + .jgl-band margin-top 3.4rem = 70px 空隙，
        白縫會露出站台自帶的裝飾色塊。
        僅在「隱藏標題區的頁面」且「首個區塊是滿版 band」時歸零。
        ⚠️ 本節刻意置於檔案最末 —— 元件庫依頁面分節累加，同權重後者勝，
           專用樣式若寫在前面會被後面的全域節覆蓋（已踩三次）。
   ========================================================================== */
/* ⚠️ 不能用 :first-child —— partial 一定會先輸出 <h4 class="page-subtitle">，
      band 實際是第二個子元素（subtitle 在 nohead 頁被 display:none 但仍佔位於 DOM）。
      band 皆為 div、subtitle 為 h4，故用 :first-of-type 精準命中首個 band。 */
.jgl-nohead .static-page-content > div.jgl-band--bleed:first-of-type { margin-top: 0; }
.jgl-nohead .article:has(.static-page-content > div.jgl-band--bleed:first-of-type) {
  padding-top: 0;
}
@supports not selector(:has(*)) {
  .jgl-nohead .static-page-content > div.jgl-band--bleed:first-of-type { margin-top: -16px; }
}

/* ==========================================================================
   22. Camp 頁比例校正（2026-09-10）
        對照設計稿後：偏移卡過扁、藥丸偏小且錯落不足、收尾綠底區高度不夠、
        末端綠底與 footer 之間有白縫。
        置於檔案最末以確保覆蓋前面各節。
   ========================================================================== */

/* 22-1 偏移卡：設計稿卡片高、文字上下留白大 */
.jgl-card--offset {
  min-height: 168px; padding: 2.1rem 1.8rem;
  display: flex; flex-direction: column; justify-content: center;
}

/* 22-2 The Real Value 藥丸：設計稿約佔頁寬 31%，錯落呈弧線外凸後回收 */
.jgl-vpill { padding: 1.15rem 2.4rem; font-size: 1.2rem; min-width: 400px; }
.jgl-vpill--i1 { margin-left: 5%; }
.jgl-vpill--i2 { margin-left: 7%; }
.jgl-vpill--i3 { margin-left: 5%; }
.jgl-vpill--i4 { margin-left: 0; }
.jgl-valuelist { gap: 1.15rem; }

/* 22-3 收尾綠底區：設計稿高度約為頁寬的 32%，大字四行 + 大浮水印 */
.jgl-watermark::before { width: 54%; max-width: 520px; opacity: .16; }

/* 22-4 末端滿版 band 直接接 footer（設計稿無白縫） */
.static-page-content > div.jgl-band--bleed:last-child { margin-bottom: 0; }
.jgl-nohead .article { padding-bottom: 0; }

/* 22-5 首個非滿版區塊：縮短與導覽列的距離（設計稿約 30px，站上原為 70px） */
.jgl-nohead .static-page-content > div.jgl-band:first-of-type { margin-top: .6rem; }

@media (max-width: 767.98px) {
  .jgl-card--offset { min-height: 0; padding: 1.4rem 1.3rem; }
  .jgl-vpill { min-width: 0; padding: .85rem 1.4rem; font-size: 1rem; }
}

/* ==========================================================================
   23. Camp · The Real Value 疊合版（依設計稿量測，2026-09-10）
        量測值（設計稿 997px 寬為基準）：
          圓徽章 直徑 26.5% 頁寬，垂直中心與藥丸群一致
          藥丸   統一寬 39% 頁寬，左緣在 34.8%／43.0% 之間錯落
          兩者水平重疊（圓右緣 39.9% > 藥丸左緣 34.8%）
   ========================================================================== */
.jgl-realvalue__title { text-align: center; margin-bottom: 2.4rem; }

.jgl-realvalue { position: relative; min-height: 420px; }

.jgl-realvalue .jgl-circle-badge {
  position: absolute; left: 4%; top: 50%; transform: translateY(-50%);
  width: 26.5%; max-width: none; aspect-ratio: 1; margin: 0;
}

.jgl-realvalue .jgl-valuelist {
  display: flex; flex-direction: column; gap: 1.1rem;
  align-items: flex-start; position: relative; z-index: 1;
}
.jgl-realvalue .jgl-vpill {
  width: 39%; min-width: 0; text-align: center;
  padding: 1.1rem 1.4rem; font-size: 1.14rem;
}
/* 左緣錯落：依設計稿量測 */
.jgl-realvalue .jgl-vpill--p1 { margin-left: 28%; }
.jgl-realvalue .jgl-vpill--p2 { margin-left: 36%; }
.jgl-realvalue .jgl-vpill--p3 { margin-left: 39%; }
.jgl-realvalue .jgl-vpill--p4 { margin-left: 36%; }
.jgl-realvalue .jgl-vpill--p5 { margin-left: 28%; }

/* 收尾綠底區：設計稿高度 = 頁寬的 17%（1280 → 約 218px） */

@media (max-width: 767.98px) {
  .jgl-realvalue { min-height: 0; }
  .jgl-realvalue .jgl-circle-badge {
    position: static; transform: none; width: 190px; margin: 0 auto 1.4rem;
  }
  .jgl-realvalue .jgl-vpill { width: 100%; margin-left: 0 !important; }
}

/* 23-b Camp Real Value 二次校正（2026-09-10）
       設計稿：標題靠左（非置中）、圓徽章 26.5%、藥丸 39%、藥丸文字靠左 */
.jgl-realvalue__title { text-align: left; }
.jgl-realvalue .jgl-circle-badge { width: 26.5%; left: 6%; }
.jgl-realvalue .jgl-vpill { width: 39%; text-align: left; padding: 1.1rem 1.6rem; }
.jgl-realvalue { min-height: 470px; }

/* CTA 文字：設計稿為四行大字，靠字級撐出而非收窄容器 */

/* 23-c 換算修正（2026-09-10）
   ⚠️ 兩個一直沒生效的原因：
      (1) .jgl-realvalue 內的 % 是相對「容器」(約 1040px) 而非視窗(1280)，
          設計稿的 26.5%／39% 頁寬 → 容器內需寫 32.6%／48%
      (2) .jgl-camp-cta__text 只有 (0,1,0)，被 .jgl-band p (0,1,1) 壓過，
          字級從未套用 → 加上 p. 前綴提高權重 */
.jgl-realvalue .jgl-circle-badge { width: 32.6%; }
.jgl-realvalue .jgl-vpill { width: 48%; }
.jgl-realvalue .jgl-vpill--p1 { margin-left: 26%; }
.jgl-realvalue .jgl-vpill--p2 { margin-left: 36%; }
.jgl-realvalue .jgl-vpill--p3 { margin-left: 40%; }
.jgl-realvalue .jgl-vpill--p4 { margin-left: 36%; }
.jgl-realvalue .jgl-vpill--p5 { margin-left: 26%; }


/* 23-d Camp 三張偏移卡放大（2026-09-10）
   設計稿量測：卡高 = 頁寬的 22.7%（1280 → 291px）、卡寬約 29% 頁寬（→ 371px）
   綠底 band 的內距原本把內容壓到 1040px，三卡只剩 25% 頁寬，故一併放寬。 */
.jgl-band--bleed.jgl-band--camp { padding-left: 5.5%; padding-right: 5.5%; }
/* 依刻度尺目視量測（2026-09-11）：設計稿 Camp 三卡 寬 27% 頁寬（1280→346px）、
   間距 4.5%（58px）、左緣起於 6%。原實作卡寬 389px、band 內距 3.5%，都偏寬。 */
.jgl-band--camp .jgl-grid--3 { gap: 58px; }

/* ⚠️ 2026-09-11 修正：以下原為全域 `.jgl-card--offset`，但那組尺寸／陰影是 Camp 專用。
      全域寫法造成 (1) Bridge 三卡被撐成 291px（設計稿只要 143px）
                   (2) Bridge 的橘/綠/深藍偏移色全被蓋成同一種綠。
      量測：Camp 卡 340×288、Bridge 卡 342×143（皆 1280 換算）。 */
.jgl-band--camp .jgl-card--offset {
  min-height: 288px; padding: 2.6rem 2.2rem;
  box-shadow: -12px -12px 0 0 #b7e77a, -12px -12px 0 3px #12131a;
  border-width: 3px; border-radius: 40px;
}
.jgl-band--camp .jgl-card--offset p { font-size: 1.24rem; line-height: 1.55; }

/* Bridge（藍底 band）三卡：矮卡 + 各自的偏移色 */
.jgl-band--sky .jgl-card--offset {
  min-height: 0; padding: 1.3rem 1.3rem;
  border-width: 3px; border-radius: 40px;
}
/* Bridge：設計稿卡高 181px（實作原 223px）→ 收緊標題間距與內文行高 */
.jgl-band--sky .jgl-card--offset .jgl-card__h { margin-bottom: .45rem; font-size: 1.1rem; }
.jgl-band--sky .jgl-card--offset .jgl-card__body { font-size: .92rem; line-height: 1.45; }
/* Rankings：卡內有 icon，設計稿卡高 290px，維持較寬鬆 */
.jgl-band--sky .jgl-card--offset:has(.jgl-card__icon) { min-height: 290px; padding: 1.5rem 1.4rem; }
.jgl-band--sky .jgl-card--offset:has(.jgl-card__icon) .jgl-card__body { font-size: 1rem; line-height: 1.55; }
.jgl-band--sky .jgl-card--offset.jgl-off-orange { box-shadow: -11px -11px 0 0 #ff9c00, -11px -11px 0 3px #12131a; }
.jgl-band--sky .jgl-card--offset.jgl-off-green  { box-shadow: -11px -11px 0 0 #b7ff7e, -11px -11px 0 3px #12131a; }
.jgl-band--sky .jgl-card--offset.jgl-off-navy   { box-shadow: -11px -11px 0 0 #1565a8, -11px -11px 0 3px #12131a; }

@media (max-width: 991.98px) {
  .jgl-band--camp .jgl-card--offset { min-height: 200px; padding: 1.8rem 1.5rem; }
  .jgl-band--camp .jgl-card--offset p { font-size: 1.08rem; }
  .jgl-band--sky  .jgl-card--offset { min-height: 0; }
}
@media (max-width: 767.98px) {
  .jgl-band--camp .jgl-card--offset {
    min-height: 0; padding: 1.4rem 1.3rem;
    box-shadow: -8px -8px 0 0 #b7e77a, -8px -8px 0 2.5px #12131a;
  }
  .jgl-band--sky .jgl-card--offset { min-height: 0; padding: 1.2rem 1.2rem; }
}

/* ==========================================================================
   24. 內文字級對齊設計稿（2026-09-10）
        量測：設計稿內文 ≈ 18px / 997 頁寬 = 1.80% 頁寬
              實作 17.28px / 1280 = 1.35% 頁寬 → 比設計稿小 33%
        1280 視窗換算應為 23px（1.44rem）。
        ⚠️ 選擇器需為 (0,1,1) 以上才蓋得過 .jgl-band p，故用 .jgl-band > p 等同權重
           並置於檔案最末（同權重後者勝）。
   ========================================================================== */
.jgl-band p, .jgl-band li { font-size: 1.44rem; line-height: 1.62; }
.jgl-lead { font-size: 1.56rem; }
.jgl-band h4, .jgl-band h5, .jgl-band h6 { font-size: 1.5rem; }

/* 已另行定義字級的元件不受影響（避免被一併放大） */
.jgl-case p            { font-size: 1.2rem; }
.jgl-card--offset p    { font-size: 1.24rem; }
.jgl-vpill             { font-size: 1.14rem; }
.jgl-step__text        { font-size: 1.02rem; }
.jgl-card__body        { font-size: 1.06rem; }
.jgl-table, .jgl-table td, .jgl-table th { font-size: 1rem; }
.jgl-numcard p, .jgl-listrow p, .jgl-policy p { font-size: 1.06rem; }
.jgl-darkcard p, .jgl-divrow__body p { font-size: 1rem; }
.jgl-testi-body p      { font-size: 1.18rem; }
.jgl-tablenote, .jgl-figcaption, .jgl-url { font-size: .95rem; }

@media (max-width: 991.98px) {
  .jgl-band p, .jgl-band li { font-size: 1.2rem; }
  .jgl-lead { font-size: 1.28rem; }
}
@media (max-width: 767.98px) {
  .jgl-band p, .jgl-band li { font-size: 1.06rem; }
  .jgl-lead { font-size: 1.12rem; }
  .jgl-band h4, .jgl-band h5, .jgl-band h6 { font-size: 1.16rem; }
}

/* 24-b 第 24 節造成的兩處回歸修正（2026-09-10）
   (1) .jgl-band p 放大後又蓋過 CTA 字級 → 提高權重
   (2) 藥丸放大後左緣壓進圓徽章中央，設計稿僅在圓右緣輕微重疊 */
.jgl-realvalue .jgl-vpill--p1 { margin-left: 33%; }
.jgl-realvalue .jgl-vpill--p2 { margin-left: 41%; }
.jgl-realvalue .jgl-vpill--p3 { margin-left: 44%; }
.jgl-realvalue .jgl-vpill--p4 { margin-left: 41%; }
.jgl-realvalue .jgl-vpill--p5 { margin-left: 33%; }

/* ==========================================================================
   25. Camp · 收尾 CTA 區（唯一權威定義，2026-09-10）
        ⚠️ 本節取代先前散落各處的 11 條 .jgl-camp-cta 覆寫。
           若要調整此元件，**只改這一節**，不要再往檔案後面追加。

        量測基準：客戶 2026/07/27 設計稿高解析截圖 760×1992
          綠底      y 68.1%–87.7% → 高 390px = 51.3% 頁寬（1280 → 657px）
          綠色      #86c13c（比上方 The Role 區的 #9ecc60 更深飽和）
          文字      x 27.6%–74.2% → 寬 46.6% 頁寬（1280 → 596px），置中
                    四行、行距約 1.95、字級約 2.9% 頁寬（1280 → 37px）
          按鈕      貼齊頁面左緣（x=0），寬 31.5% 頁寬（1280 → 403px）
                    高 11.1% 頁寬（1280 → 142px），左直角右圓角，內文三行
          浮水印    中央偏左，與文字重疊
   ========================================================================== */
.jgl-band--camp.jgl-camp-cta {
  background: #86c13c;
  padding: 4.6rem 3.5vw 0;
  display: flex; flex-direction: column; align-items: center;
  min-height: 657px;
}
.jgl-band p.jgl-camp-cta__text {
  font-size: clamp(1.5rem, 2.9vw, 2.3rem);
  line-height: 1.95; font-weight: 700; color: var(--jgl-navy);
  max-width: 596px; width: 100%; margin: 0 0 auto; text-align: left;
}
/* 按鈕貼齊頁面左緣：抵銷 band 的左內距 3.5% */
.jgl-camp-cta .jgl-btn-arrow {
  align-self: flex-start; margin-left: -3.5vw; margin-top: 2.6rem; margin-bottom: 3.4rem;
  width: 403px; max-width: 100%; min-height: 142px;
  display: flex; align-items: center; gap: 1.1rem;
  padding: 1.4rem 4.4rem 1.4rem 2.4rem;   /* 右內距預留箭頭位，逼出設計稿的三行 */
  background: #1a4a12; color: #fff; text-decoration: none;
  border-radius: 0 999px 999px 0;
  font-size: 1.43rem; line-height: 1.35; font-weight: 400;
}
/* 浮水印移到中央偏左（設計稿壓在文字上，非靠右） */
.jgl-camp-cta .jgl-btn-arrow::after { flex: 0 0 46px; height: 28px; }
/* 浮水印：設計稿用「堆疊式」logo（站上僅有白色版，已依設計稿取色重製深色版），
   顏色 rgb(120,176,64) 已烘進 PNG，故不再壓 opacity */
.jgl-camp-cta.jgl-watermark::before {
  right: auto; left: 30%; top: 60%;
  width: 32%; max-width: 410px; aspect-ratio: 1.35; opacity: 1;
  background-image: url("../img/subpages/jgl-watermark-stacked.png");
  background-position: center;
}

@media (max-width: 991.98px) {
  .jgl-camp-cta { min-height: 0; padding-top: 3.4rem; }
  .jgl-band p.jgl-camp-cta__text { line-height: 1.7; }
  .jgl-camp-cta .jgl-btn-arrow { min-height: 0; width: 340px; font-size: 1.1rem; }
}
@media (max-width: 767.98px) {
  .jgl-camp-cta { padding: 2.6rem 1.2rem 0; }
  .jgl-band p.jgl-camp-cta__text { font-size: 1.24rem; line-height: 1.65; }
  .jgl-camp-cta .jgl-btn-arrow {
    align-self: stretch; margin-left: -1.2rem; margin-right: -1.2rem;
    width: auto; border-radius: 0; font-size: 1rem; padding: 1.1rem 1.4rem;
  }
}

/* 25-b Camp · The Real Value 藥丸尺寸對齊設計稿（2026-09-10）
   量測：設計稿藥丸高 57–60px / 760 頁寬 = 7.5–7.9% → 1280 換算 96–101px
         字級約 2.15% 頁寬 → 1280 換算 27.5px（原實作僅 18.24px）
   徽章 logo 改用堆疊式（依設計稿；由 JGL_logo_white_2 保留彩點改深藍重製） */
.jgl-realvalue .jgl-vpill {
  font-size: 1.7rem; padding: 1.8rem 2rem; line-height: 1.4;
}
.jgl-realvalue .jgl-circle-badge img { width: 74%; }  /* 設計稿：logo 寬 = 徽章直徑的 73.8% */
@media (max-width: 991.98px) {
  .jgl-realvalue .jgl-vpill { font-size: 1.2rem; padding: 1.1rem 1.5rem; }
}
@media (max-width: 767.98px) {
  .jgl-realvalue .jgl-vpill { font-size: 1rem; padding: .8rem 1.3rem; }
}

/* ==========================================================================
   26. Eyebrow 對齊設計稿（全域，2026-09-10）
        設計稿五頁一致：`— Pathway · Rankings` / `— Rules · Format`
        → 破折號前綴、**一般大小寫**、灰色 rgb(135,135,135)、無綠色短線
        原實作的「綠短線 + 全大寫 + .18em 字距」是我自己加的，設計稿沒有。
        量測：墨跡高 1.30% 頁寬（1280 → 16.6px），故字級約 1.04rem。
   ========================================================================== */
.jgl-eyebrow {
  font-size: 1.04rem; font-weight: 400; letter-spacing: normal; word-spacing: normal;
  text-transform: none; color: #878787; gap: .45rem;
}
.jgl-eyebrow::before {
  content: "—"; width: auto; height: auto; border-radius: 0;
  background: none; color: inherit; font-weight: 400;
}
.jgl-band--tint .jgl-eyebrow,
.jgl-band--plain .jgl-eyebrow { color: #878787; }
.jgl-band--sky .jgl-eyebrow,
.jgl-band--camp .jgl-eyebrow { color: rgba(0,3,48,.62); }
.jgl-band--slate .jgl-eyebrow { color: rgba(255,255,255,.72); }
.jgl-band--amber .jgl-eyebrow { color: rgba(122,74,18,.8); }
@media (max-width: 767.98px) { .jgl-eyebrow { font-size: .92rem; } }

/* 26-b `.jgl-h2--light`：設計稿的「細字重 + 純黑」標題
        Rankings 前三個 H2 屬此型（最後深藍 CTA 仍為粗體白，不加此 class）。
        量測：墨跡高 3.41% 頁寬（原實作 3.83%，大 12%）；主色 rgb(0,0,0) */
.jgl-h2--light {
  font-weight: 400; color: #000; font-size: clamp(1.5rem, 3.2vw, 2.55rem);
  letter-spacing: -.005em;
}
.jgl-band--sky .jgl-h2--light { color: var(--jgl-navy); }

/* 26-c Rankings 深藍 CTA 的按鈕：設計稿為大型膠囊
        量測：紅鈕 329×114（1280 換算），實作僅 191×54 */
.jgl-cta .jgl-btn {
  min-width: 329px; min-height: 114px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.5rem; font-weight: 600; border-radius: 999px; padding: 0 2rem;
}
@media (max-width: 767.98px) {
  .jgl-cta .jgl-btn { min-width: 0; width: 100%; min-height: 68px; font-size: 1.1rem; }
}

/* ==========================================================================
   27. 兩處對齊設計稿（2026-09-11，客戶標註）
   ========================================================================== */

/* 27-a 綠色引言框的外框
        設計稿量測（Rankings 頁，760px 設計稿加刻度尺讀數）：
          綠塊  x 4.3%–50.7% 頁寬
          外框  與綠塊等大，向右下偏移 x +1.33% / y +1.53% 頁寬（1280 → 17px / 20px）
          線條  約 3px，且刻意斷開兩處：
                · 上緣只從框寬 22% 起（左上缺一段）
                · 右緣在框高 16%–38% 之間斷開
        原實作是「左上角 + 右下角兩個 L 型括號」，構造不同，已改為單一斷線矩形（SVG）。 */
.jgl-quote::before, .jgl-quote::after { content: none; }
/* 綠塊本身：設計稿 593×222（1280 換算），原實作 538×159 —— 內距少了一半，
   導致外框的上緣線落在第一行字上。文字左內距依設計稿 3.7% 頁寬 ≈ 47px。 */
.jgl-quote {
  margin: 1.8rem 0 2.6rem 0;
  padding: 3.4rem 2.9rem;          /* Rankings：設計稿上下內距 ~55px、左 47px */
}
/* Bridge 的引言框是兩段文字，設計稿改為「上下內距小、左內距大」(~21px / 55px)，
   與 Rankings 不同，故以段落數區分，避免共用同一組內距把它撐高。 */
.jgl-quote:has(p + p) { padding: 1.4rem 3.4rem 1.6rem; }
.jgl-quote::before {
  content: ""; position: absolute; inset: 20px -17px -20px 17px;
  width: auto; height: auto;        /* ⚠️ 必須覆寫舊規則的 width/height:46%，
                                       否則 absolute 定位下 width 會壓過 inset 的 right */
  border: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'>\
<g fill='none' stroke='%23000330' stroke-width='3' vector-effect='non-scaling-stroke'>\
<path d='M22 0 H100'/>\
<path d='M100 0 V16'/>\
<path d='M100 38 V100'/>\
<path d='M100 100 H0'/>\
<path d='M0 100 V18'/>\
</g></svg>");
  background-size: 100% 100%; background-repeat: no-repeat;
}

/* 27-b 連續滿版 band 之間不留白縫
        設計稿：「The next rung」淺藍條直接貼齊下方深藍 CTA，中間無白。
        原因：`.jgl-band + .jgl-band { margin-top: 2.8rem }` 對滿版 band 也生效。 */
.jgl-band--bleed + .jgl-band--bleed { margin-top: 0; }
/* ⚠️ 只清下方 band 的 margin-top 不夠 —— 相鄰邊界取兩者最大值，
      上方 band 的 margin-bottom(54.4px) 仍會撐出白縫，需一併清掉。 */
.jgl-band--bleed:has(+ .jgl-band--bleed) { margin-bottom: 0; }

/* ==========================================================================
   28. Intro NCAA 對齊設計稿（2026-09-11）
   ========================================================================== */

/* 28-a 05「Beyond the system」三顆外框藥丸
        設計稿量測（997px 設計稿加刻度尺）：
          寬 32.3%–34.7% 頁寬（1280 → 414–444px）、高 5.8% 頁寬（→ 74px）
          排列 2 + 1（每列兩顆、第二列置中），列間距約 3.7% 頁寬（→ 47px）
        原實作 max-width 340px，三顆擠成一列。 */
.jgl-outlinepills { gap: 47px 47px; }
.jgl-outlinepill {
  min-width: 414px; max-width: 444px;
  min-height: 74px; display: inline-flex; align-items: center; justify-content: center;
  padding: .7rem 1.8rem; font-size: 1.12rem;
}
@media (max-width: 991.98px) {
  .jgl-outlinepills { gap: 20px; }
  .jgl-outlinepill { min-width: 0; max-width: 100%; min-height: 0; font-size: 1rem; }
}

/* 28-b 02「Why the NCAA path matters」2×2 卡
        設計稿量測：卡 469×360（1280 換算）、欄距 24px、列距 26px、
                    整組跨頁寬 11.2%–86%（≈957px，置中）
        原實作 545×216 —— 太寬太扁。 */
.jgl-band--plain .jgl-grid--2:has(.jgl-checkcard) {
  max-width: 962px; margin-left: auto; margin-right: auto;
  gap: 26px 24px;
}
.jgl-checkcard { min-height: 360px; padding: 2.4rem 2rem; }
.jgl-checkcard h5 { font-size: 1.5rem; margin-bottom: 1.3rem; }
.jgl-checkcard p  { font-size: 1.12rem; line-height: 1.85; }

/* 28-c 03 教練評分卡
        設計稿量測：549×636（1280 換算），底部深藍註記塊**貼齊卡片左右下三邊**
        原實作 563×407，註記塊內縮。 */
.jgl-scorecard { min-height: 636px; padding: 2rem 2.2rem 0; display: flex; flex-direction: column; }
.jgl-scorecard h4 { font-size: 1.62rem; margin: .5rem 0 1.5rem; }
.jgl-scorecard ol { margin-bottom: auto; }
.jgl-scorecard ol li { font-size: 1.16rem; margin-bottom: 1rem; }
.jgl-scorecard__note {
  margin: auto -2.2rem 0;            /* 抵銷卡片左右內距 → 貼齊三邊；
                                        margin-top:auto 把它推到卡片底部
                                        （原寫在 ol 的 margin-bottom:auto 被既有規則壓過） */
  border-radius: 999px 999px 40px 40px;
  padding: 1.6rem 2.2rem; font-size: 1.06rem;
}
@media (max-width: 991.98px) {
  .jgl-checkcard { min-height: 0; padding: 1.6rem 1.4rem; }
  .jgl-checkcard h5 { font-size: 1.2rem; }
  .jgl-checkcard p  { font-size: 1rem; line-height: 1.6; }
  .jgl-scorecard { min-height: 0; padding: 1.6rem 1.7rem 0; }
  .jgl-scorecard ol li { font-size: 1rem; margin-bottom: .6rem; }
  .jgl-scorecard__note { margin: 1.2rem -1.7rem 0; padding: 1.15rem 1.7rem; font-size: .95rem; }
}

/* 28-d 03 評分卡內文字級 + 05 區結語
        設計稿量測（997px 設計稿加刻度尺）：
          評分卡標題 墨跡高 2.5% 頁寬（1280 → 32px，字級約 1.9rem）
          評分卡清單 墨跡高 2.0% 頁寬（1280 → 26px，字級約 1.5rem）
          05 結語     墨跡高 2.9% 頁寬（1280 → 37px，字級約 1.75rem，三行置中）
        原實作分別只有 1.62rem / 1.16rem / 1.25rem。 */
.jgl-scorecard h4 { font-size: 1.9rem; }
.jgl-scorecard ol li { font-size: 1.5rem; margin-bottom: 1.15rem; }
.jgl-scorecard__note { font-size: 1.14rem; }
.jgl-band p.jgl-ncaa-goal {     /* ⚠️ 需 (0,2,1) 才蓋得過第 24 節的 .jgl-band p */
  font-size: 1.75rem; line-height: 1.5; max-width: 700px; margin: 0 auto; text-align: center;
}
@media (max-width: 991.98px) {
  .jgl-scorecard h4 { font-size: 1.35rem; }
  .jgl-scorecard ol li { font-size: 1.05rem; margin-bottom: .6rem; }
  .jgl-band p.jgl-ncaa-goal { font-size: 1.2rem; }
}

/* ==========================================================================
   29. Rules 系列頁對齊設計稿（2026-09-11）
        🔴 重要發現：**設計稿各頁的內文字級並不一致**。
           第 24 節的 `.jgl-band p: 1.44rem` 是從 Camp 設計稿推出來的，
           但 Rules & Format 設計稿量測為：
             行距 2.3% 頁寬（1280 → 29px）、字級約 19.5px（≈1.22rem）
           套 1.44rem 會讓段落多一行，整頁比設計稿高 44%。
        因此改以頁面層 class（controller 傳入 $page_class）分別設定。
   ========================================================================== */
.jgl-page-format .jgl-band p,
.jgl-page-format .jgl-band li { font-size: 1.22rem; line-height: 1.52; }
.jgl-page-format .jgl-lead { font-size: 1.3rem; }

/* 設計稿本頁各區塊「直接相接、無間距」，且 band 內距約 36px（實作原為 margin 99px + padding 67px）。
   量測：設計稿 6 個區塊合計 3.214 頁寬 + footer 0.178 = 3.492；
         實作原為 3.878 + margin 0.464 + footer 0.27 = 4.61。 */
.jgl-page-format .jgl-band { margin-top: 0; margin-bottom: 0; padding: 1.5rem 2.6rem; }
.jgl-page-format .jgl-band .jgl-band { padding: 1.15rem 1.8rem; }  /* 內嵌 tint 區塊 */
/* H2：設計稿墨跡高 3.0% 頁寬（1280 → 38px），實作 clamp 上限 45.6px，
   導致「One leaderboard, fair tees」被迫斷成兩行、整段變高。 */
.jgl-page-format .jgl-h2 { font-size: clamp(1.5rem, 3vw, 2.4rem); }
/* 收尾 CTA 在設計稿留白較多（0.319 頁寬 = 408px；其餘區塊用 2.3rem 內距會只剩 300px） */
.jgl-page-format .jgl-cta { padding-top: 5.5rem; padding-bottom: 5.5rem; }

@media (max-width: 767.98px) {
  .jgl-page-format .jgl-band p,
  .jgl-page-format .jgl-band li { font-size: 1.02rem; }
}

/* ==========================================================================
   30. 深色底上的 h5/h6 文字顏色修正（2026-09-11）
        🔴 `_partials/static_page.php` 的 inline <style> 有一條
           `.static-page-content h5 { color: #000330 }`（h6 同）。
           它與元件庫的 `.jgl-tiercard h5 { color: inherit }` 同權重 (0,1,1)，
           但 inline style 在外部樣式表之後載入 → 勝出，
           導致所有深色卡片的小標變成「深藍字壓深藍底」，實際上看不見。
        以 (0,2,1) 以上的選擇器覆寫（與載入順序無關）。
   ========================================================================== */
/* ⚠️ 需 `.static-page-content` 前綴才到 (0,2,1)：
      `.jgl-tiercard--di h5` 只有 (0,1,1)，與 inline 規則同權重、載入較早會輸。 */
.static-page-content .jgl-tiercard--di h5,
.static-page-content .jgl-tiercard--di h6,
.static-page-content .jgl-rulebox h5,
.static-page-content .jgl-rulebox h6,
.static-page-content .jgl-card--dark h5,
.static-page-content .jgl-card--dark h6,
.static-page-content .jgl-darkcard h5,
.static-page-content .jgl-darkcard h6,
.static-page-content .jgl-band--navy h5,
.static-page-content .jgl-band--navy h6,
.static-page-content .jgl-band--slate h5,
.static-page-content .jgl-band--slate h6 { color: #fff; }

/* Path Up 第四步是亮綠底 rgb(128,205,41)，原用 rgba(255,255,255,.86) 白字，
   對比僅 1.97；設計稿為深色字。 */
.static-page-content .jgl-card--accent .jgl-step__title,
.static-page-content .jgl-card--accent .jgl-step__text,
.static-page-content .jgl-card--accent p,
.static-page-content .jgl-card--accent h5,
.static-page-content .jgl-card--accent h6 { color: #0b2412; }

/* 30-b 03 評分卡底部註記：設計稿是「長條圓」而非上圓下方（2026-09-11 客戶指出）
        高解析設計稿逐欄掃描：
          卡片      y 1728–2108（380px @760 頁寬）→ 1280 換算 640px
          註記塊    中央 87px 高；左緣 x=390 處僅 51px → 上下各內縮 ~18px
                    符合 r = 87/2 = 43.5 的正圓端 → 1280 換算 高 146px、半徑 73px
          註記塊下方直接是綠底（無青色殘留）→ 它本身就是卡片的底緣，
          因此卡片下方兩角也要用相同曲率，否則會露出青色。 */
.jgl-scorecard { border-radius: 40px 40px 73px 73px; }
.jgl-scorecard__note {
  border-radius: 999px;
  min-height: 146px;
  display: flex; align-items: center;
  padding: 1.2rem 2.8rem;
}
@media (max-width: 991.98px) {
  .jgl-scorecard { border-radius: 29px 29px 46px 46px; }
  .jgl-scorecard__note { min-height: 92px; padding: 1rem 1.8rem; }
}

/* ==========================================================================
   31. 圓角二次校正 — 逐元件依設計稿量測（2026-09-11）
        第 30 節的「全體 ×1.8」對 NCAA 的 checkcard 剛好（設計 32px / 實作 36px），
        但其他元件各有各的半徑，統一倍率會偏小。
        量法：r = √((w·h − 實際面積)/(4−π))，面積法不受抗鋸齒影響；
              每項再以「等比裁角目視」複驗。數值為 1280 視窗換算。
          元件                設計    原實作   校正後
          checkcard(NCAA)     32px    36px    36px（不動，已吻合）
          Case 卡(Testi)      55px    34px    55px
          tiercard(Format)    87px    37px    87px
          divcard(Scoring)    72px    46px    72px
          logocard(Bridge)    59px    35px    59px
          darkcard(Scoring)   63px    24px    63px
          card--offset(Camp)  50px    36px    50px
   ========================================================================== */
.jgl-case        { border-radius: 55px; }
.jgl-tiercard    { border-radius: 87px; }
.jgl-divcard     { border-radius: 72px; }
.jgl-logocard    { border-radius: 59px; }
.jgl-darkcard    { border-radius: 63px; }
.jgl-band--camp .jgl-card--offset,
.jgl-band--sky  .jgl-card--offset { border-radius: 50px; }

@media (max-width: 767.98px) {
  .jgl-case { border-radius: 30px; }
  .jgl-tiercard { border-radius: 44px; }
  .jgl-divcard, .jgl-darkcard, .jgl-logocard { border-radius: 34px; }
  .jgl-band--camp .jgl-card--offset,
  .jgl-band--sky  .jgl-card--offset { border-radius: 28px; }
}

/* 30-c 反向修正：深色 band 裡的「淺底卡片」標題要回到深色（2026-09-11）
        第 30 節用 `.jgl-band--navy h5/h6 { color:#fff }` 一次修掉深色卡的隱形字，
        但它也套到了深色 band 內部的淺底卡（如 Scoring 的 Carry-over Policy 淺綠卡），
        造成「白字壓淺綠底」—— 換個方向的同一個 bug。
        以同權重 (0,2,1) 置於其後覆寫。 */
.static-page-content .jgl-policy h5,
.static-page-content .jgl-policy h6,
.static-page-content .jgl-checkcard--light h5,
.static-page-content .jgl-checkcard--light h6,
.static-page-content .jgl-card--accent h5,
.static-page-content .jgl-card--accent h6 { color: var(--jgl-navy); }

/* ==========================================================================
   32. Scoring System 對齊設計稿（2026-09-11）
        量法：以「該行文字的實際渲染寬度」為目標，比字高估計可靠得多。
              先用 eyebrow 驗證方法（設計 297px → 建議 17.0px，實作已是 16.6px ✔）。
        設計稿目標（1280 換算）：
          eyebrow  「— Scoring system · Individual points」   297px  ⇒ 16.6px ✔ 不動
          H2       「How individual scoring works」            344px  ⇒ 25px / weight 500
                    （四個 H2 墨跡高一致 19–20px @997、字寬 12.3 px/char）
          內文     「Points accumulate from a player's…」      828px  ⇒ 20.7px
        原實作：H2 45.6px/weight 800、內文 23.0px → 整頁比設計稿高 16%。
        各區塊之間設計稿同樣「直接相接」，比照 Rules & Format 處理。
   ========================================================================== */
.jgl-page-scoring .jgl-band p,
.jgl-page-scoring .jgl-band li { font-size: 1.29rem; line-height: 1.55; }
.jgl-page-scoring .jgl-h2 { font-size: clamp(1.3rem, 2vw, 1.56rem); font-weight: 500; }
.jgl-page-scoring .jgl-lead { font-size: 1.36rem; }
.jgl-page-scoring .jgl-band { margin-top: 0; margin-bottom: 0; padding: 2.3rem 2.6rem; }
.jgl-page-scoring .jgl-band .jgl-band { padding: 1.6rem 1.8rem; }

@media (max-width: 767.98px) {
  .jgl-page-scoring .jgl-band p,
  .jgl-page-scoring .jgl-band li { font-size: 1.02rem; }
  .jgl-page-scoring .jgl-band { padding: 1.6rem 1.2rem; }
}

/* ==========================================================================
   33. Rules & Format 分級卡的「花飾分隔線」（2026-09-11 客戶指出）
        設計稿該線不是普通 hr，中央有鏡像對稱的花飾（fleuron）：
        梭形 + 菱形 + 帶缺口的翼形，左右各一組。
        實作：把設計稿的花飾抽成 alpha PNG 當 CSS mask，底色用 currentColor
              → 青底卡(深藍線)／深藍卡(白線)／綠底卡(深藍線) 三種自動正確。
        素材：assets/img/subpages/ornament-divider.png
              （由 997px 設計稿擷取 146×20，3× 輸出；1280 顯示寬 187px）
   ========================================================================== */
.jgl-tiercard__rule {
  border: 0; height: 20px; margin: 1.3rem 0 .9rem; opacity: 1;
  background-color: currentColor;
  -webkit-mask-image: url("../img/subpages/ornament-divider.png"), linear-gradient(#000,#000);
          mask-image: url("../img/subpages/ornament-divider.png"), linear-gradient(#000,#000);
  -webkit-mask-size: 187px 20px, 100% 1.5px;
          mask-size: 187px 20px, 100% 1.5px;
  -webkit-mask-position: center center, center center;
          mask-position: center center, center center;
  -webkit-mask-repeat: no-repeat, no-repeat;
          mask-repeat: no-repeat, no-repeat;
}
@media (max-width: 767.98px) {
  .jgl-tiercard__rule {
    height: 14px;
    -webkit-mask-size: 130px 14px, 100% 1.2px;
            mask-size: 130px 14px, 100% 1.2px;
  }
}

/* ==========================================================================
   34. Your Bridge「Meet The Agency College Recruit」區塊（2026-09-11 客戶指出）
        設計稿量測（997px 設計稿加刻度尺，1280 換算）：
          綠引言框  566×217px    ← 實作原 538×429（高了一倍）
                    內含 3+4 共 7 行 + 段落間距，行距偏緊
                    內文該行目標寬 ≈485px ⇒ 字級 18.5px（實作原 23px）
          名片圖    483×324px    ← 實作原 538×302
                    素材本身比例 1.78、設計稿顯示 1.49，差異為設計稿的上下留白；
                    內容實際大小兩邊相近（289 vs 271px），故只調寬度不改素材。
   ========================================================================== */
.jgl-band p.jgl-quote-text,
.jgl-quote:has(p + p) p { font-size: 1.16rem; line-height: 1.32; }
.jgl-quote:has(p + p) {
  padding: 1.05rem 2.2rem 1.05rem 3.1rem;
  max-width: 566px;
}
.jgl-quote:has(p + p) p + p { margin-top: .75rem; }
.jgl-figure img[src*="ar-contact-card"] { max-width: 483px; margin-left: auto; margin-right: auto; }

@media (max-width: 767.98px) {
  .jgl-quote:has(p + p) { max-width: 100%; padding: 1rem 1.2rem; }
  .jgl-quote:has(p + p) p { font-size: 1rem; line-height: 1.5; }
  .jgl-figure img[src*="ar-contact-card"] { max-width: 100%; }
}

/* ==========================================================================
   35. Rules & Format 版面寬度與 eyebrow 樣式（2026-09-11 客戶指出「有點小跑」）
        (a) 版面寬度
            設計稿內容跨 x 5.4%–94.7%（1280 換算 1143px），
            實作受站台容器 `.page-section.col-xl-9`（1108px, 6.7%–93.3%）限制，
            再加 band 內距 41.6px，內容被推到 10%–90%。
            量測對照：03b tint 區塊 設計 582px / 實作 496px
                      04 深藍卡     設計 529px / 實作 496px
            → 白底區塊改以負 margin 突破容器，左右各對齊設計稿的 69px / 68px。
        (b) eyebrow
            本頁設計稿並不一致：hero 與 01/02 為灰色一般大小寫，
            03 The Path Up／03 Groups & Tees／04 Ties 為**綠色全大寫**。
            依設計稿分別還原（`--accent` 修飾類）。
   ========================================================================== */
.jgl-page-format .jgl-band--plain {
  margin-left: calc(50% - 50vw + 69px);
  margin-right: calc(50% - 50vw + 68px);
  padding-left: 0; padding-right: 0;
}
/* ⚠️ 需 (0,2,0) 以上才蓋得過第 26 節的 `.jgl-band--plain .jgl-eyebrow { color:#878787 }` */
.jgl-band .jgl-eyebrow--accent,
.jgl-band--plain .jgl-eyebrow--accent,
.jgl-band--navy .jgl-eyebrow--accent {
  text-transform: uppercase; letter-spacing: .14em; font-weight: 700;
  font-size: .88rem; color: #84ce33;
}
.jgl-eyebrow--accent::before {
  content: ""; width: 26px; height: 3px; border-radius: 2px;
  background: #84ce33; color: transparent;
}
@media (max-width: 991.98px) {
  .jgl-page-format .jgl-band--plain {
    margin-left: calc(50% - 50vw + 16px); margin-right: calc(50% - 50vw + 16px);
  }
}

/* 35-b Rules & Format 元件內文字級（2026-09-11）
        第 29 節的頁面層 `.jgl-page-format .jgl-band p`（0,2,1）會蓋過元件自身較小的字級，
        把卡片內文一併放大。依設計稿逐元件量測後個別指定（渲染寬度法）：
          03b tint 內文  設計 548px → 18.6px（原 19.5px）
          04 卡標題      設計 230px → 19.2px（原 24.0px）
          04 卡內文      設計 321px → 16.1px（原 19.5px） */
.jgl-page-format .jgl-band--tint p { font-size: 1.16rem; line-height: 1.5; }
.jgl-page-format .jgl-ruleitem h6  { font-size: 1.2rem; margin-bottom: .3rem; }
.jgl-page-format .jgl-ruleitem p   { font-size: 1.0rem; line-height: 1.5; }
.jgl-page-format .jgl-ruleitem     { padding: .7rem 0; }

/* ==========================================================================
   36. 白底區段內容寬度全頁稽核後的修正（2026-09-11）
        方法：只取「左緣為白」的列（排除滿版色帶），量深色文字／框線的水平跨距，
              設計稿與實作逐頁對照。8 頁中 6 頁在 ±4% 內，兩頁需修。
        （Format 原本測出 +5.8%，查證為站台頁首的會員按鈕觸邊，屬假警報，未動。）
   ========================================================================== */

/* 36-a Testimonials 下半段「The Blueprint for Global Success」
        設計稿：內文欄寬 80% 頁寬（1280 → 1024px）、置中
                該行「The remarkable journeys of athletes like…」跨滿整欄
        實作原為 780px / 18.88px → 內容過窄。依渲染寬度法回推字級 23.9px。 */
.jgl-testi-body { max-width: 1024px; }
.jgl-band .jgl-testi-body p { font-size: 1.49rem; line-height: 1.62; }

/* 36-b Scoring System 白底區段
        設計稿內容 x 6.1%–93.4%（1117px）；實作受 band 內距影響為 10.1%–89.2%（1016px）。
        比照 Rules & Format 以負 margin 對齊設計稿邊界。 */
.jgl-page-scoring .jgl-band--plain {
  margin-left: calc(50% - 50vw + 78px);
  margin-right: calc(50% - 50vw + 84px);
  padding-left: 0; padding-right: 0;
}

@media (max-width: 991.98px) {
  .jgl-testi-body { max-width: 100%; }
  .jgl-band .jgl-testi-body p { font-size: 1.12rem; }
  .jgl-page-scoring .jgl-band--plain {
    margin-left: calc(50% - 50vw + 16px); margin-right: calc(50% - 50vw + 16px);
  }
}

/* ==========================================================================
   37. Camp hero 照片貼齊頁面右緣（2026-09-11 客戶指出）
        設計稿量測：照片 x 52.6%–99.9%（貼右緣）、605×372px（1280 換算）
                    右側切齊頁面邊界、無圓角；左側維持圓角
        實作原為 51.2%–93.3%、538×303px（受站台容器 1108px 限制）
        ※ 已比對其餘 7 頁：只有本頁的 hero 照片貼邊，Scoring 的 hero 右側
          仍留青底（先前偵測誤判為貼邊，實際未貼）。
   ========================================================================== */
.jgl-camp-hero .jgl-figure {
  /* ⚠️ 不能用 calc(50% - 50vw)：這裡的 50% 指 grid 儲存格(538px)而非整個 band，
        會外推過頭（實測照片跑到 122.3%）。
        右側空隙 = (100vw − 容器寬)/2，容器寬固定 1108–1120px → 半寬取 554px。 */
  margin-right: calc(554px - 50vw);
}
.jgl-camp-hero .jgl-figure img {
  width: 100%; max-width: none;
  aspect-ratio: 605 / 372; object-fit: cover;
  border-radius: 29px 0 0 29px;
}
@media (max-width: 991.98px) {
  .jgl-camp-hero .jgl-figure { margin-right: 0; }
  .jgl-camp-hero .jgl-figure img { aspect-ratio: auto; border-radius: 29px; }
}

/* 37-b Bridge「Two halves of one path」兩張淺藍卡的 logo（2026-09-11 客戶指出）
        設計稿量測：
          JGL  堆疊式（非橫式）128×96px（1280 換算）—— 刻度尺直讀
          AR   110px 寬 —— 以兩邊共有的「紅色三角形」當基準換算
                （設計稿紅三角 56px / 素材紅三角 193px，素材寬 295px → 86px @997 → 110px @1280）
        實作原為 橫式 JGL 130×33、AR 130×100。 */
.jgl-logocard img { width: 128px; }
.jgl-logocard img[src*="agency-college-recruit"] { width: 110px; }
@media (max-width: 767.98px) {
  .jgl-logocard img { width: 100px; }
  .jgl-logocard img[src*="agency-college-recruit"] { width: 86px; }
}

/* 37-c Rules & Format 04 區：深藍卡與照片等高齊底 + 卡高對齊設計稿（2026-09-11）
        設計稿量測：深藍卡 343px、照片 347px，**上下緣齊平**
        實作原為 卡 423px（高 80px）、照片 371px 且上下各差 26px 未對齊
        （CTA 區經量測已正確：band 403px vs 設計 408、按鈕 329×114 完全吻合，未動） */
.jgl-page-format .jgl-grid--split:has(.jgl-rulebox) { align-items: stretch; }
.jgl-page-format .jgl-grid--split:has(.jgl-rulebox) .jgl-figure { height: 100%; margin: 0; }
.jgl-page-format .jgl-grid--split:has(.jgl-rulebox) .jgl-figure img {
  height: 100%; width: 100%; object-fit: cover;
}
.jgl-page-format .jgl-rulebox { padding: 1.1rem 1.7rem; }
.jgl-page-format .jgl-ruleitem { padding: .28rem 0; }
.jgl-page-format .jgl-ruleitem h6 { margin-bottom: .12rem; }
.jgl-page-format .jgl-ruleitem p  { line-height: 1.44; }

/* ==========================================================================
   38. Membership 內容寬度（2026-09-11）
        本頁與其他 7 頁結構不同：多包了一層 Bootstrap `.container`（xl 上限 1140px），
        再套 `col-xl-9`（75%）→ 實際只有 831px，比其他頁的 1108px 更窄。
        設計稿內容跨 x 8.8%–92.8%（1280 換算 1075px），因此兩個手繪框與下方段落
        都被壓窄、文字多繞行。
        ※ 先前的「白底內容寬度稽核」對本頁誤判為通過 —— 右緣被裝飾圓拉到 99.9%，
          遮蔽了真實內容只到 82.5% 的事實。
   ========================================================================== */
.page-section.membership-content {
  flex: 0 0 100%; max-width: 1075px; width: 100%; margin-left: auto; margin-right: auto;
}
@media (max-width: 991.98px) {
  .page-section.membership-content { max-width: 100%; }
}

/* ==========================================================================
   39. 元件內標題的上邊距重設（2026-09-11 客戶指出 04 區圖示未對齊）
        站台 base 樣式給 h5 `margin-top: 28px`、h6 `margin-top: 19.2px`，
        元件庫從未重設 → 每張卡的標題都被往下推。
        最明顯的症狀：Rules & Format 04 區的 ×／✓ 圖示比標題高 17.7px
        （圖示 margin-top 2px，標題卻被推了 19.2px）。
        實測影響 4 頁 22 個標題：bridge 4 / ncaa 6 / format 6 / scoring 6。
   ========================================================================== */
.static-page-content .jgl-card h5,      .static-page-content .jgl-card h6,
.static-page-content .jgl-logocard h5,  .static-page-content .jgl-partnerbox__row h5,
.static-page-content .jgl-checkcard h5, .static-page-content .jgl-tiercard h5,
.static-page-content .jgl-divrow__body h6, .static-page-content .jgl-ruleitem h6,
.static-page-content .jgl-divcard h6,   .static-page-content .jgl-darkcard h6,
.static-page-content .jgl-numcard h6,   .static-page-content .jgl-policy h6,
.static-page-content .jgl-listrow h6,   .static-page-content .jgl-scorecard h4 {
  margin-top: 0;
}
/* 圖示與標題視覺置中（標題 25px / 圖示 24px，差 0.5px 以內） */
.static-page-content .jgl-ruleitem__icon { margin-top: 1px; }

/* ==========================================================================
   40. 元件庫基準重設（2026-09-11）
        目的：讓元件不再被站台既有樣式滲透。同一類根因今天已發生 3 次：
          · `.static-page-content h5/h6 { color }` → 深色卡標題變隱形（§30）
          · `.static-page-content h5/h6 { margin-top }` → 卡片標題被推下 19–28px（§39）
          · `.jgl-band p` 蓋掉元件自訂字級 → 卡內文被放大（§29、§35-b）

        稽核方式（非猜測）：用瀏覽器列出所有「非 jgl-subpages.css」且能命中元件內元素、
        且設定版面／字體屬性的規則 —— 實測 16 條。本節針對其中會造成傷害的逐條中和。

        原則：**鎖住現況、不改外觀**。各值取自修改前的實際 computed style
              （基準存於 docs/backup/20260911-heading-baseline.json），
              改完以八頁像素比對驗證零變化。
   ========================================================================== */

/* 40-1 標題上邊距 —— 站台 base 給 h5:28px / h6:19.2px，元件一律不要 */
.static-page-content [class*="jgl-"] h1, .static-page-content [class*="jgl-"] h2,
.static-page-content [class*="jgl-"] h3, .static-page-content [class*="jgl-"] h4,
.static-page-content [class*="jgl-"] h5, .static-page-content [class*="jgl-"] h6 {
  margin-top: 0;
}

/* 40-2 標題字重 —— `.about-wrap h5, .about-wrap h6 { font-weight:500 }` 會滲入；
        以下為各元件修改前的實際值，明確宣告以免日後被動 */
.static-page-content .jgl-checkcard h5,
.static-page-content .jgl-logocard h5,
.static-page-content .jgl-partnerbox__row h5,
.static-page-content .jgl-tiercard h5      { font-weight: 700; }
.static-page-content .jgl-darkcard h6,
.static-page-content .jgl-divcard h6,
.static-page-content .jgl-divrow__body h6,
.static-page-content .jgl-numcard h6,
.static-page-content .jgl-policy h6,
.static-page-content .jgl-ruleitem h6      { font-weight: 600; }
.static-page-content .jgl-scorecard h4     { font-weight: 500; }

/* 40-3 連結顏色 —— style.css 的 `a { color:#00b1de }` 會吃掉按鈕文字色 */
.static-page-content a.jgl-btn,
.static-page-content a.jgl-btn-arrow { color: #fff; }
.static-page-content a.jgl-btn--green,
.static-page-content a.jgl-btn--lime { color: var(--jgl-navy); }

/* 40-4 清單間距 —— `ul li, ol li { margin-bottom:.5rem }` 與 inline 的 .25rem 併存，
        元件內改由元件自行決定；此處給一個中性值，個別元件已各自覆寫 */
.static-page-content [class*="jgl-"] ul,
.static-page-content [class*="jgl-"] ol { margin-top: 0; }

/* 40-5 表格內距 —— ❌ 已移除。
      原本想中和 style.css 的 `table th, td { padding:0 .5rem }`，
      但實測套用後 Scoring 的表格反而變緊、整頁短 53px ——
      表示另有一條規則給了較大的內距，被我的 (0,2,1) 新規則壓掉。
      表格本來就沒問題，不該投機性地加規則。 */