.lp {
  --orange:        #FFA300;
  --orange-pale:   #FFF3E0;
  --orange-50:     #FFFBF5;
  --teal:          #00C4B3;
  --teal-dark:     #00695C;
  --teal-pale:     #E0F8F5;
  --red:           #FF5859;
  --red-pale:      #FFF0F0;
  --gray:          #646569;
  --text:          #2D2E32;
  --text-mute:     #6E7076;
  --line:          #ECECEC;
  --line-soft:     #F4F4F4;
  --bg-light:      #FAFAFA;
  --ink:           #23242A;
  --shadow-sm:     0 2px 8px rgba(0,0,0,0.04);
  --shadow-md:     0 8px 24px rgba(0,0,0,0.07);
  --radius:        18px;
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:      120ms;
  --dur-base:      220ms;
}
.lp, .lp *, .lp *::before, .lp *::after { margin: 0; padding: 0; box-sizing: border-box; }
/* 正式站會載入官網 CSS（Bootstrap reboot＋官網標題／段落字級），原頁上線後的樣子包含這些樣式。
   這裡在 .lp 內重現同樣的值：本機預覽和正式站一樣，官網 CSS 也蓋不過來。頁面自己的規則寫在後面，會覆蓋這裡。 */
.lp h1, .lp h2, .lp h3, .lp h4, .lp h5, .lp h6 { font-weight: 500; line-height: 1.5; }
.lp h1 { font-weight: 700; font-size: 48px; line-height: 56px; }
.lp h2 { font-weight: 700; font-size: 36px; line-height: 48px; }
.lp h3 { font-weight: 700; font-size: 24px; line-height: 32px; }
.lp p { font-size: 18px; line-height: 28px; }
@media (max-width: 575.98px) {
  .lp h1 { font-size: 36px; line-height: 48px; }
  .lp h2 { font-size: 24px; line-height: 32px; }
  .lp h3 { font-size: 20px; line-height: 26px; }
  .lp p { font-size: 16px; line-height: 28px; }
}
.lp b, .lp strong { font-weight: bolder; }
.lp mark { padding: 0.1875em; }
.lp a { color: #4d4d4d; text-decoration: underline; }
.lp img, .lp svg { vertical-align: middle; }
.lp table { caption-side: bottom; border-collapse: collapse; }
.lp th { text-align: inherit; }
.lp tr, .lp th, .lp td { border: 0 solid; border-color: inherit; }
.lp button { border-radius: 0; font-family: inherit; font-size: inherit; line-height: inherit; text-transform: none; cursor: pointer; }
.lp summary { display: list-item; cursor: pointer; }
.lp .gd-lead { font-size: 1.25rem; font-weight: 300; }
.lp { font-size: 18px; scroll-behavior: smooth; font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'PingFang TC', sans-serif; color: var(--text); line-height: 1.8; background: #fff; overflow-x: hidden; }
@media (max-width: 768px) { .lp { font-size: 17px; } }
.lp img { max-width: 100%; height: auto; }
.lp .container-narrow { max-width: 1020px; margin: 0 auto; padding: 0 28px; }
.lp .skip-link { position: absolute; left: -9999px; top: 0; background: var(--text); color: #fff; padding: 10px 18px; z-index: 20; border-radius: 0 0 8px 0; }
.lp .skip-link:focus { left: 0; }
.lp section { padding: 72px 0; position: relative; }
@media (max-width: 768px) { .lp section { padding: 52px 0; } }
.lp .sec-label { display: flex; align-items: center; gap: 10px; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.22em; color: var(--teal-dark); margin-bottom: 14px; }
.lp .sec-label::before { content: ""; width: 34px; height: 3px; border-radius: 2px; background: var(--teal); }
.lp h1 { font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 800; line-height: 1.35; letter-spacing: 0.01em; }
.lp h2 { font-size: clamp(1.45rem, 2.6vw, 1.8rem); font-weight: 800; line-height: 1.4; margin-bottom: 16px; letter-spacing: 0.01em; }
.lp h3 { font-size: 1.12rem; font-weight: 700; }
.lp .gd-lead { font-size: 0.98rem; color: var(--gray); max-width: 46em; }
.lp a { color: var(--teal-dark); }
.lp mark.hl-mark { background: rgba(255,163,0,0.20); color: inherit; font-weight: 700; padding: 1px 3px; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Hero */
.lp .guide-hero { background: var(--orange-50); padding: 66px 0 52px; }
.lp .guide-hero .gd-lead { margin-top: 18px; }
.lp .hero-note { margin-top: 14px; font-size: 0.92rem; color: var(--text-mute); }

/* Hero 內的三張速查卡 */
.lp .quick-block { margin-top: 36px; }
.lp .rules-box { margin-top: 30px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 26px; box-shadow: var(--shadow-sm); }
.lp .rules-box ol { margin: 0; padding-left: 1.4em; }
.lp .rules-box li { margin: 6px 0; color: var(--text); }
.lp .quick-title { font-size: 1.12rem; font-weight: 800; color: var(--text); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.lp .quick-title::before { content: ""; width: 34px; height: 3px; border-radius: 2px; background: var(--teal); flex-shrink: 0; }
.lp .jump-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 820px) { .lp .jump-grid { grid-template-columns: 1fr; } }
.lp .jump-card { display: flex; flex-direction: column; background: #fff; border: 2px solid var(--teal-dark); border-radius: 16px; padding: 22px 24px 20px; text-decoration: none; box-shadow: var(--shadow-md); transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.lp .jump-card:focus-visible { box-shadow: 0 14px 32px rgba(0,0,0,0.12); transform: translateY(-3px); }
    @media (hover: hover) and (pointer: fine) {
      .lp .jump-card:hover { box-shadow: 0 14px 32px rgba(0,0,0,0.12); transform: translateY(-3px); }
    }
.lp .jump-card:active { transform: scale(0.98); transition-duration: var(--dur-fast); }
.lp .jump-card b { display: block; font-size: 1.22rem; font-weight: 800; color: var(--text); line-height: 1.4; }
.lp .jump-card span { display: block; font-size: 0.9rem; color: var(--gray); margin-top: 6px; line-height: 1.65; }
.lp .jump-card em { display: block; margin-top: 14px; font-style: normal; font-size: 0.88rem; font-weight: 700; color: var(--teal-dark); }
@media (max-width: 820px) { .lp .jump-card { padding: 18px 20px; } .lp .jump-card b { font-size: 1.12rem; } }

/* 課別選擇器（與 /campaigns/online/guide/ 同一套） */
.lp .pick-prompt, .lp .pick-state { display: none; }
.lp.lp-js .pick-prompt { display: block; margin: 30px 0 0; background: #fff; border: 2px solid var(--teal-dark); border-radius: var(--radius); padding: 24px 26px 26px; box-shadow: var(--shadow-md); animation: lp-pick-glow 1.6s ease-out 0.6s 2; }
@keyframes lp-pick-glow { 0% { box-shadow: var(--shadow-md), 0 0 0 0 rgba(0,105,92,0.32); } 70% { box-shadow: var(--shadow-md), 0 0 0 14px rgba(0,105,92,0); } 100% { box-shadow: var(--shadow-md), 0 0 0 0 rgba(0,105,92,0); } }
.lp .pick-step { display: inline-block; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; color: var(--teal-dark); border: 1.5px solid var(--teal-dark); border-radius: 999px; padding: 1px 12px; margin-bottom: 10px; }
@media (max-width: 560px) { .lp.lp-js .pick-prompt { padding: 18px 16px 20px; } }
/* 沒選課別前，只露出選課區與最下方「直接問」；每門課規定不同，避免家長讀到別門課的規則。沒 JS 時照常全部顯示 */
.lp.lp-js:not(.course-on) .rules-box,
.lp.lp-js:not(.course-on) .quick-block,
.lp.lp-js:not(.course-on) > section:not(#help),
.lp.lp-js:not(.course-on) .guide-bar { display: none; }
.lp.lp-js .pick-state { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; margin: 30px 0 0; font-size: 0.92rem; color: var(--gray); }
.lp.lp-js .pick-prompt[hidden], .lp.lp-js .pick-state[hidden] { display: none; }
.lp .pick-prompt h2 { font-size: 1.12rem; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.lp .pick-prompt p { font-size: 0.88rem; color: var(--gray); margin-bottom: 14px; }
.lp .pick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 820px) { .lp .pick-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .lp .pick-grid { grid-template-columns: 1fr; } }
.lp .pick-card { font-family: inherit; text-align: left; width: 100%; background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 15px 17px; cursor: pointer; box-shadow: var(--shadow-sm); transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.lp .pick-card:focus-visible { border-color: var(--teal-dark); box-shadow: var(--shadow-md); transform: translateY(-2px); }
    @media (hover: hover) and (pointer: fine) {
      .lp .pick-card:hover { border-color: var(--teal-dark); box-shadow: var(--shadow-md); transform: translateY(-2px); }
    }
.lp .pick-card:active { transform: scale(0.98); transition-duration: var(--dur-fast); }
.lp .pick-card b { display: block; font-size: 0.98rem; font-weight: 800; color: var(--text); }
.lp .pick-card span { display: block; font-size: 0.83rem; color: var(--gray); margin-top: 4px; line-height: 1.6; }
.lp .pick-state b { color: var(--text); font-weight: 800; }
.lp .pick-state button { font-family: inherit; font-size: 0.9rem; font-weight: 700; color: var(--teal-dark); background: none; border: 0; border-bottom: 1.5px solid currentColor; padding: 0 0 1px; cursor: pointer; }

/* 課別條件內容：無 JS 時全部展開，靠 .co-tag 標示適用對象 */
.lp.lp-js [data-course-only][hidden], .lp.lp-js [data-course-not][hidden] { display: none; }
/* 課別限定的「捷徑」（速查卡、導覽列）只在選定課別後出現；沒選課別時它們對多數家長是雜訊，內容本身仍在下方章節完整保留 */
.lp:not(.course-on) .jump-card[data-course-only],
.lp:not(.course-on) .guide-bar-links a[data-course-only],
.lp:not(.course-on) .rules-box li[data-course-only] { display: none; }
.lp .co-tag { display: block; width: fit-content; max-width: 100%; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.06em; border-radius: 8px; padding: 2px 10px; margin-bottom: 10px; background: transparent; border: 1px solid var(--teal); color: var(--teal-dark); }
/* 選定課別後，內容本身就只剩那門課的，適用標籤就是多餘的 */
.lp.lp-js.course-on .co-tag { display: none; }

/* 規則卡 */
.lp .rule-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 32px; }
@media (max-width: 860px) { .lp .rule-grid { grid-template-columns: 1fr; } }
.lp .rule-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 26px 28px; box-shadow: var(--shadow-sm); }
.lp .rule-card .rule-key { font-size: 1.32rem; font-weight: 800; color: var(--text); line-height: 1.4; }
.lp .rule-card h3 { font-size: 0.82rem; font-weight: 800; letter-spacing: 0.1em; color: var(--teal-dark); margin-bottom: 10px; }
.lp .rule-card p { color: var(--gray); font-size: 0.94rem; margin-top: 10px; }

/* 步驟區 */
.lp .step-list { counter-reset: step; display: grid; gap: 16px; margin-top: 30px; }
.lp .step-item { display: grid; grid-template-columns: 40px 1fr; gap: 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; }
.lp .step-item::before { counter-increment: step; content: counter(step); width: 34px; height: 34px; border-radius: 999px; background: var(--teal-pale); color: var(--teal-dark); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.lp .step-item > * { min-width: 0; }
.lp .step-item h3 { font-size: 1.06rem; font-weight: 800; margin-bottom: 4px; }
.lp .step-item h3 strong { font-weight: 800; }
.lp .step-item p { color: var(--gray); font-size: 0.95rem; max-width: 42em; }
.lp .step-item p + p { margin-top: 8px; }
.lp .callout { border-radius: 0 12px 12px 0; padding: 18px 22px; margin-top: 22px; font-size: 0.95rem; border: 1px solid rgba(45,46,50,0.10); border-left-width: 4px; max-width: 42em; }
.lp .callout--ok { background: var(--teal-pale); color: var(--text); border-left-color: var(--teal); }
.lp .callout--warn { background: var(--orange-pale); color: var(--text); border-left-color: var(--orange); }
.lp .callout strong { font-weight: 700; }

/* 適用範圍提示 */
.lp .scope-note { margin-top: 22px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--teal); border-radius: 0 12px 12px 0; padding: 16px 20px; font-size: 0.9rem; color: var(--gray); line-height: 1.75; max-width: 46em; }
.lp .scope-note strong { color: var(--text); font-weight: 700; }

/* 操作截圖 */
.lp .shot { margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); background: #fff; }
.lp .shot img { display: block; width: 100%; height: auto; }
.lp .shot-caption { font-size: 0.85rem; color: var(--text-mute); margin-top: 8px; }
.lp .step-item .shot { max-width: 640px; }
/* .shot img 的 display:block 會蓋過 hidden，需明確還原 */
.lp .cls-shot[hidden], .lp .shot[hidden] { display: none; }

/* 範例框 */
.lp .example { margin-top: 24px; background: var(--bg-light); border-left: 4px solid var(--orange); border-radius: 0 12px 12px 0; padding: 20px 24px; font-size: 0.95rem; color: var(--text); }
.lp .example b { font-weight: 800; }
.lp .example p + p { margin-top: 8px; }
.lp .example .ex-label { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; color: var(--text-mute); margin-bottom: 8px; }

/* 兩欄卡片 */
.lp .who-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 32px; }
@media (max-width: 768px) { .lp .who-cards { grid-template-columns: 1fr; } }
.lp .who-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.lp .who-card .dc-tag { display: inline-block; align-self: flex-start; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; border-radius: 999px; padding: 4px 14px; margin-bottom: 14px; }
.lp .dc-tag--teacher { background: var(--teal-pale); color: var(--teal-dark); }
.lp .dc-tag--consultant { background: var(--orange-pale); color: var(--text); }
.lp .who-card h3 { margin-bottom: 10px; }
.lp .who-card ul { list-style: none; margin-top: 8px; }
.lp .who-card li { padding-left: 1.2em; position: relative; color: var(--gray); font-size: 0.95rem; margin-top: 6px; }
.lp .who-card li::before { content: "▸"; position: absolute; left: 0; color: var(--teal); }
.lp .who-card .who-foot { margin-top: auto; padding-top: 18px; }
.lp .btn-dl { display: inline-block; font-size: 0.92rem; font-weight: 700; color: var(--text); background: #fff; border: 1.5px solid var(--text); border-radius: 11px; padding: 11px 26px; text-decoration: none; transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
      .lp .btn-dl:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
    }
.lp .btn-dl:active { transform: scale(0.97); transition-duration: var(--dur-fast); }

.lp .soft-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow-sm); margin-top: 18px; }
.lp .soft-card h3 { margin-bottom: 10px; }
.lp .soft-card p { color: var(--gray); font-size: 0.97rem; margin-top: 8px; }
.lp .soft-card ol, .lp .soft-card ul { margin: 10px 0 0 1.25em; color: var(--gray); font-size: 0.95rem; }
.lp .soft-card li { margin-top: 6px; }
.lp .soft-card li strong { color: var(--text); }

/* 排除疑難：條列卡 */
.lp .fix-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; }
@media (max-width: 900px) { .lp .fix-grid { grid-template-columns: 1fr; } }
.lp .fix-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 26px 26px; box-shadow: var(--shadow-sm); }
.lp .fix-card h3 { font-size: 1.02rem; margin-bottom: 12px; }
.lp .fix-card ol { margin: 0 0 0 1.2em; color: var(--gray); font-size: 0.93rem; }
.lp .fix-card li { margin-top: 6px; }
.lp .fix-card li strong { color: var(--text); font-weight: 700; }

/* 費用表 */
.lp .fee { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 0.93rem; }
.lp .fee th { text-align: left; padding: 12px 16px 12px 0; color: var(--text); font-weight: 700; vertical-align: top; width: 16em; border-bottom: 1px solid var(--line-soft); }
.lp .fee td { padding: 12px 0; border-bottom: 1px solid var(--line-soft); color: var(--gray); }
.lp .fee tr:last-child th, .lp .fee tr:last-child td { border-bottom: 0; }
@media (max-width: 640px) {
  .lp .fee, .lp .fee tbody, .lp .fee tr, .lp .fee th, .lp .fee td { display: block; width: auto; }
  .lp .fee th { border-bottom: 0; padding-bottom: 2px; }
  .lp .fee td { padding-top: 0; padding-bottom: 14px; }
}

/* 浮動列 */
.lp .guide-bar { display: none; }
.lp.lp-js .guide-bar { display: block; position: fixed; inset: var(--oa-header-offset, 0) 0 auto; z-index: 90; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 2px 12px rgba(18,21,30,0.07); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-110%); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); }
.lp.lp-js .guide-bar.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition-delay: 0s; }
.lp.lp-js section, .lp.lp-js .soft-card, .lp.lp-js .step-item { scroll-margin-top: calc(68px + var(--oa-header-offset, 0px)); }
.lp .guide-bar-inner { max-width: 1180px; margin: 0 auto; padding: 0 28px; min-height: 54px; display: flex; align-items: center; gap: 16px; }
.lp .guide-bar-now { font-size: 0.9rem; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp .guide-bar-now em { font-style: normal; color: var(--gray); font-weight: 400; }
.lp .guide-bar-links { display: flex; gap: 16px; margin-left: auto; }
.lp .guide-bar-links a { font-size: 0.9rem; font-weight: 700; color: var(--gray); text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
      .lp .guide-bar-links a:hover { color: var(--teal-dark); }
    }
.lp .guide-bar-line { flex-shrink: 0; font-size: 0.88rem; font-weight: 700; color: var(--text); background: #fff; border: 1.5px solid var(--teal-dark); border-radius: 11px; padding: 8px 18px; text-decoration: none; }
@media (max-width: 900px) { .lp .guide-bar-links a:nth-child(n+4) { display: none; } }
@media (max-width: 760px) {
  .lp .guide-bar-inner { padding: 0 16px; gap: 10px; min-height: 50px; }
  .lp .guide-bar-links { display: none; }
  .lp .guide-bar-line { margin-left: auto; padding: 7px 14px; font-size: 0.84rem; }
  .lp .guide-bar-now { font-size: 0.84rem; }
}

/* 求助 */
.lp .help-band { background: var(--ink); color: #fff; border-radius: var(--radius); padding: 44px 40px; text-align: center; }
.lp .help-band h2 { color: #fff; }
.lp .help-band p { color: rgba(255,255,255,0.85); font-size: 0.98rem; }
.lp .btn-line { display: inline-block; margin-top: 22px; background: #fff; color: var(--text); font-weight: 700; border: 2px solid transparent; border-radius: 11px; padding: 14px 34px; text-decoration: none; transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
      .lp .btn-line:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
    }
.lp .btn-line:active { transform: scale(0.97); transition-duration: var(--dur-fast); }

/* 動效 */
@keyframes lp-reveal   { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes lp-failsafe { to { opacity: 1; } }
.lp.lp-js .reveal { opacity: 0; animation: lp-failsafe .01s linear 6s forwards; }
.lp.lp-js .reveal.is-visible { animation: lp-reveal 800ms ease-out both; }
@media (prefers-reduced-motion: reduce) { .lp.lp-js .reveal, .lp.lp-js .reveal.is-visible { opacity: 1; transform: none; animation: none; } }
/* ── 2026-09-22 四角色審查後的視覺調整 ───────────────────────────── */

/* 「不行」原本與肯定答案同色同重，--red 定義了卻沒用過 */
.lp .rule-key--no { color: var(--red); }

/* 桌機行長原本到 63 字／行，中文舒適區是 35–45 */
.lp .soft-card p, .lp .soft-card li, .lp .hero-note { max-width: 42em; }

/* D2 全頁 49 個白色圓角卡片長得一模一樣，最明顯的問題是編號步驟 1–6 之後
   緊接一個外觀完全相同、卻沒有編號的補充卡，讀起來像「沒編號的第 7 步」。
   把補充說明去卡片化：改成頂線＋文字的附註樣式，讓「卡片」只留給並排對照
   的 rule/fix/who 三種，「步驟」維持有編號的卡片。白框從 49 降到 24。 */
.lp .soft-card {
  background: transparent; border: 0; box-shadow: none; border-radius: 0;
  border-top: 2px solid var(--text); padding: 20px 0 0; margin-top: 30px;
}
.lp .soft-card + .soft-card { margin-top: 26px; }
.lp .soft-card h3 { font-size: 1.06rem; }
@media (max-width: 560px) { .lp .soft-card { padding-top: 16px; margin-top: 24px; } }

/* 820px（iPad Air 直式）原本是死角：五個 grid 分別在 768/820/860/900 塌陷，
   三個變單欄、另兩個還是雙欄。收斂成 900 與 560 兩階。 */
@media (max-width: 900px) {
  .lp .rule-grid, .lp .fix-grid { grid-template-columns: repeat(2, 1fr); }
  .lp .guide-bar-links a:nth-child(n+4) { display: inline; }
  .lp:not(.course-on) .guide-bar-links a[data-course-only] { display: none; }
}

/* 手機是這一頁最主要的使用情境（家長在 LINE 裡點開），但原本
   .guide-bar-links 被整組隱藏、過了 hero 就沒有任何導覽可以跳。
   改成可橫向滑動的章節列。 */
@media (max-width: 760px) {
  .lp .guide-bar-inner { flex-wrap: wrap; padding: 5px 0 7px; min-height: 0; gap: 0 10px; }
  .lp .guide-bar-now { order: 1; padding-left: 16px; }
  .lp .guide-bar-line { order: 2; margin-left: auto; margin-right: 16px; }
  .lp .guide-bar-links {
    order: 3; display: flex; width: 100%; margin: 4px 0 0; gap: 14px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding: 4px 16px 2px;
  }
  .lp .guide-bar-links::-webkit-scrollbar { display: none; }
  .lp .guide-bar-links a { white-space: nowrap; font-size: 0.85rem; }
  .lp.lp-js section, .lp.lp-js .soft-card, .lp.lp-js .step-item { scroll-margin-top: calc(92px + var(--oa-header-offset, 0px)); }
}

/* 375px 下原本只有 213px（57%）能放字，約 14 字／行；
   範例框更窄到 165px，連電話號碼都被折成兩行。 */
@media (max-width: 560px) {
  .lp .container-narrow { padding: 0 18px; }
  .lp .step-item { grid-template-columns: 28px 1fr; gap: 12px; padding: 18px 16px; }
  .lp .step-item::before { width: 26px; height: 26px; font-size: 0.8rem; }
  .lp .example { padding: 14px 16px; }
  .lp .example p { overflow-wrap: break-word; word-break: keep-all; }
  .lp .step-item h3, .lp .step-item p { overflow-wrap: anywhere; }
  .lp .help-band { padding: 32px 22px; }
  /* 課別卡單欄時獨佔 1,008px，等於開場先擋 2.7 屏才看得到第一條指示 */
  .lp .pick-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .lp .pick-card { padding: 12px 13px; }
  .lp .pick-card b { font-size: 0.92rem; }
  .lp .pick-card span { font-size: 0.78rem; }
  /* 1200px 的平台截圖縮到 211px 看不清楚在指哪裡 */
  .lp .step-item .shot { max-width: none; }
  .lp .rule-grid, .lp .fix-grid, .lp .who-cards { grid-template-columns: 1fr; }
}
/* lp-crumb：全站麵包屑（2026-10-27）。左緣對齊官網 header 的 logo（最寬 1296px、內距 28px／手機 18px）；底色＝本頁開頭區塊 */
.lp .lp-crumb { background: #FFFBF5; }
.lp .lp-crumb ol { list-style: none; margin: 0 auto; max-width: 1296px; padding: 5px 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 13px; line-height: 1.6; color: #5B616D; }
.lp .lp-crumb li { margin: 0; padding: 0; }
.lp .lp-crumb li + li::before { content: "›"; margin-right: 8px; color: #8A8F98; }
.lp .lp-crumb a, .lp .lp-crumb a:visited { color: #5B616D; text-decoration: none; display: inline-block; padding: 6px 0; margin: -6px 0; }
.lp .lp-crumb a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 3px; }
.lp .lp-crumb [aria-current] { color: #2D2E32; }
@media (hover: hover) and (pointer: fine) { .lp .lp-crumb a:hover { text-decoration: underline; } }
@media (max-width: 960px) { .lp .lp-crumb ol { padding: 5px 18px; } }
/* /lp-crumb */