/* ════════════════════════════════════════════════════════════════════════
   English Aloha Reading ── 首頁 Default.aspx
   ────────────────────────────────────────────────────────────────────────
   顏色、字體、圓角沿用 css/aloha.css 的設計變數(A1 Keiki 海灘配色);
   程度卡片直接使用選教材頁的 .aloha-level(各自套用該程度的配色)。
   本檔只放首頁才有的東西,類別一律以 lp- 開頭:
     1. 版面:首頁使用整個視窗寬度
     2. 主視覺(海灘圖片 images/landing-hero-*)
     3. 程度卡片的位置
     4. 一堂課怎麼進行 + 可點字的範例
     5. 每篇閱讀包含什麼
     6. 方案、捐贈、教師、結尾
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. 版面 ── */
html { scroll-behavior: smooth; }
.aloha-wide .aloha-main { width: 100%; padding: 0; gap: 0; }
/* 上方選單的波浪下緣:首頁的主視覺是圖片,所以改成「選單顏色的波浪蓋在圖片上」 */
.aloha-wide .aloha-topbar { z-index: 5; }
.aloha-wide .aloha-topbar::after {
    bottom: -15px;
    background: var(--primary);
    -webkit-mask: radial-gradient(circle at 18px -6px, #000 20px, transparent 21px) repeat-x;
            mask: radial-gradient(circle at 18px -6px, #000 20px, transparent 21px) repeat-x;
    -webkit-mask-size: 36px 16px;
            mask-size: 36px 16px;
}

.lp {
    --lp-deep: #06656b;
    --lp-pop-deep: #c21f5d;   /* 粉紅底上的小字用較深的粉紅,對比才夠 */
    color: var(--ink);
}
.lp-wrap { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.lp section { scroll-margin-top: 12px; }

.lp-h1, .lp-h2 { font-family: var(--display); font-weight: 800; color: var(--lp-deep); margin: 0; text-wrap: balance; }
.lp-h1 { font-size: clamp(2.5rem, 5vw, 4.3rem); line-height: 1.02; letter-spacing: -.01em; }
.lp-h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1.08; }
.lp-p { margin: 12px 0 0; max-width: 62ch; font-size: 1.1rem; font-weight: 700; color: var(--ink-soft); }
.lp-p strong { color: var(--ink); }

.aloha .lp-btn-lg { padding: 12px 34px; font-size: 1.3rem; }
.aloha .lp-jump {
    font-weight: 800; font-size: 1.02rem; color: var(--lp-deep);
    text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.aloha .lp-jump:hover { color: var(--pop); }
.aloha .lp-jump-quiet { font-weight: 700; font-size: .95rem; color: var(--ink-soft); text-decoration-thickness: 1px; }
.aloha .lp-btn-second { background: #ffffff; color: var(--lp-deep); box-shadow: 0 4px 0 rgba(0, 0, 0, .12); }

/* ── 2. 主視覺 ── */
.lp-hero {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column;
    background: #bfe9fb;                       /* 圖片載入前的底色(與圖中的天空相近)*/
    min-height: min(56.25vw, 820px);           /* 圖片是 16:9;很寬的螢幕最高 820px */
}
/* 圖片鋪滿整個區塊;裁切時保留右下角(椰子樹與扶桑花)*/
.lp-hero-art { position: absolute; inset: 0; z-index: 0; }
.lp-hero-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 100% 100%; }
/* 文字後面加一層由左而右淡出的白色,文字在天空與雲上都清楚 */
.lp-hero::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, .5) 0, rgba(255, 255, 255, .3) 36%, rgba(255, 255, 255, 0) 58%);
}
/* 下緣的波浪:與下一區的底色相同 */
.lp-hero::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 16px; z-index: 1; pointer-events: none;
    background: radial-gradient(circle at 18px 22px, var(--bg) 20px, transparent 21px) repeat-x;
    background-size: 36px 16px;
}
.lp-hero > .lp-wrap { position: relative; z-index: 2; }
.lp-hero-text {
    /* 寬度同時受視窗寬度限制:文字不會壓到右邊的椰子樹 */
    max-width: min(39rem, 52vw);
    /* 下方留給沙灘,以及疊上來的程度卡片 */
    padding: clamp(40px, 5vw, 70px) 0 clamp(120px, 15vw, 230px);
}
.lp-lead { margin: 18px 0 0; max-width: 34rem; font-size: clamp(1.08rem, 1.5vw, 1.28rem); font-weight: 700; line-height: 1.5; color: var(--ink); }
.lp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 26px; }
/* 文字連結可能落在海平面或遠方的島上:加一圈白色光暈 */
.lp-hero .lp-jump { text-shadow: 0 0 2px #ffffff, 0 0 8px rgba(255, 255, 255, .9); }
/* 館藏數字:白底的膠囊,在海面上也看得清楚 */
.lp-count {
    display: inline-block; margin: 24px 0 0; padding: 6px 18px;
    background: rgba(255, 255, 255, .86); border-radius: 22px;
    font-weight: 700; color: var(--ink);
}
.lp-count strong { font-family: var(--display); font-weight: 800; font-size: 1.3em; color: var(--lp-deep); font-variant-numeric: tabular-nums; }

/* ── 3. 程度卡片:疊在主視覺的沙灘上 ── */
.lp-levels { position: relative; z-index: 2; background: var(--bg); padding-bottom: clamp(48px, 6vw, 84px); }
.lp-levels-wrap { display: flex; flex-direction: column; }
.lp-levels-text { order: 2; }
.lp-level-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: -62px; }
/* 2026-10-08 改版後程度卡片不再緊接主視覺(前面是三種角色):不再往上疊 */
.lp-roles + .lp-levels { padding-top: clamp(56px, 8vw, 108px); }
.lp-roles + .lp-levels .lp-level-grid { margin-top: 0; }
.lp-level-grid .aloha-level-name { margin-top: 14px; }
.lp-levels-text { margin-top: clamp(30px, 4vw, 52px); }

/* ── 4. 一堂課怎麼進行 ── */
.lp-how { background: var(--panel); padding: clamp(56px, 8vw, 108px) 0; }
.lp-how-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.lp-steps { list-style: none; margin: 26px 0 0; padding: 0; counter-reset: lp-step; display: grid; gap: 22px; }
.lp-steps li { counter-increment: lp-step; display: grid; grid-template-columns: 54px minmax(0, 1fr); column-gap: 14px; }
.lp-steps li::before {
    content: counter(lp-step);
    grid-row: 1 / span 2;
    width: 54px; height: 54px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--pop); color: var(--pop-ink);
    font-family: var(--display); font-weight: 800; font-size: 1.7rem; line-height: 1;
    box-shadow: 0 4px 0 rgba(0, 0, 0, .16);
}
.lp-steps h3 { margin: 2px 0 0; font-family: var(--display); font-weight: 800; font-size: 1.45rem; line-height: 1.15; color: var(--lp-deep); }
.lp-steps p { margin: 4px 0 0; font-weight: 700; color: var(--ink-soft); max-width: 46ch; }

/* 範例:縮小版的學習頁 */
.lp-demo {
    background: var(--card); border: 2px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px; display: grid; gap: 14px;
}
.lp-demo-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.lp-demo-tag { background: var(--pop-soft); color: var(--lp-pop-deep); border-radius: 999px; padding: 2px 12px; font-weight: 800; font-size: .82rem; }
.lp-demo-title { font-family: var(--display); font-weight: 800; font-size: 1.3rem; line-height: 1.1; color: var(--lp-deep); }
.lp-demo-level { margin-left: auto; background: var(--sun); color: var(--sun-ink); border-radius: 999px; padding: 1px 12px; font-weight: 800; font-size: .86rem; }
.lp-demo-video {
    position: relative; aspect-ratio: 16 / 7; border-radius: var(--radius-sm);
    background: radial-gradient(circle at 50% 40%, #1b5560 0, #0d3239 70%);
    display: grid; place-items: center;
}
.lp-demo-play {
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--pop); color: #ffffff; font-size: 2.1rem; line-height: 1;
    display: grid; place-items: center; padding-left: 4px;
}
.lp-demo-caption { position: absolute; left: 14px; bottom: 10px; color: #ffffff; font-weight: 800; font-size: .95rem; }
.lp-demo-read {
    position: relative;
    background: var(--panel); border-radius: var(--radius-sm);
    padding: 16px 18px;
    font-family: var(--read); font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.75; color: var(--ink);
}
.lp-demo-sent { display: inline; }
/* details 要用 inline-block 才會留在句子裡(inline 會被瀏覽器當成區塊而換行)*/
.lp-word { display: inline-block; }
.lp-word > summary {
    list-style: none; cursor: pointer; line-height: 1.3;
    color: var(--lp-pop-deep); font-weight: 700;
    border-bottom: 3px solid var(--pop-soft);
}
.lp-word > summary::-webkit-details-marker { display: none; }
.lp-word > summary:hover,
.lp-word[open] > summary { border-bottom-color: var(--pop); }
/* 說明固定出現在文字區塊的下緣(與區塊同寬):不會超出畫面,也不會蓋住其他可以點的字 */
.lp-word-pop {
    position: absolute; z-index: 4; left: 12px; right: 12px; top: calc(100% - 8px);
    background: var(--ink); color: #ffffff; border-radius: 14px; padding: 10px 14px;
    font-family: var(--ui); font-size: .98rem; font-weight: 700; line-height: 1.4; text-align: left;
    box-shadow: 0 8px 18px rgba(35, 66, 75, .28);
}
.lp-word-pop b { font-family: var(--display); font-size: 1.15rem; color: var(--sun); }
.lp-word-pop i { opacity: .8; }
.lp-word-kk { opacity: .85; font-weight: 500; }
.lp-demo-hint { margin: 0; font-weight: 800; font-size: .95rem; color: var(--lp-pop-deep); }
.lp-demo-note {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
    background: var(--pop-soft); border-left: 5px solid var(--pop); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 10px 14px; font-weight: 700;
}
.lp-demo-note b { color: var(--lp-pop-deep); }
.lp-demo-note-type { font-family: var(--display); font-weight: 800; color: var(--lp-deep); }

/* 尚未完成的功能 */
.lp-soon {
    display: inline-block; vertical-align: middle; margin-left: 6px;
    border: 2px dashed var(--line); border-radius: 999px; padding: 1px 10px;
    font-family: var(--ui); font-weight: 800; font-size: .76rem; line-height: 1.5; color: var(--ink-soft); white-space: nowrap;
}

/* ── 5. 每篇閱讀包含什麼 ── */
.lp-inside { background: var(--card); padding: clamp(56px, 8vw, 108px) 0; }
.lp-features {
    list-style: none; margin: clamp(26px, 3.4vw, 44px) 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(26px, 3.6vw, 48px) clamp(24px, 4vw, 56px);
}
.lp-features li { display: grid; grid-template-columns: 50px minmax(0, 1fr); column-gap: 14px; align-items: start; }
.lp-features i {
    grid-row: 1 / span 2;
    width: 50px; height: 50px; border-radius: 16px;
    display: grid; place-items: center;
    background: var(--sun); color: var(--sun-ink); font-size: 1.5rem;
}
.lp-features li:nth-child(3n + 2) i { background: var(--bg-deep); color: var(--lp-deep); }
.lp-features li:nth-child(3n) i { background: var(--pop-soft); color: var(--pop); }
.lp-features h3 { margin: 2px 0 0; font-family: var(--display); font-weight: 800; font-size: 1.3rem; line-height: 1.15; color: var(--lp-deep); }
.lp-features p { margin: 4px 0 0; font-weight: 700; color: var(--ink-soft); }

/* ── 6. 方案 ── */
.lp-pricing { background: var(--bg); padding: clamp(56px, 8vw, 108px) 0; }
.lp-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: clamp(26px, 3.4vw, 40px); align-items: stretch; }
.lp-plan {
    position: relative;
    background: var(--card); border: 2px solid var(--line); border-radius: var(--radius);
    padding: 24px 26px 26px;
}
.lp-plan-name { margin: 0 0 4px; font-weight: 800; font-size: .86rem; letter-spacing: .06em; text-transform: uppercase; color: var(--pop); }
.lp-plan-days { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-weight: 700; font-size: .92rem; color: var(--ink-soft); }
.lp-plan-days strong { color: var(--ink); }
.lp-plan-share { grid-column: 1 / -1; }
.lp-plan h3 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.5rem; line-height: 1.1; color: var(--lp-deep); }
.lp-plan-price { margin: 6px 0 0; font-family: var(--display); font-weight: 800; font-size: clamp(2.8rem, 5vw, 3.8rem); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.lp-plan-text { margin: 12px 0 0; font-weight: 700; color: var(--ink-soft); }
.lp-plan-text strong { color: var(--ink); }
.lp-plan-pack { border: 3px solid var(--pop); box-shadow: 0 6px 0 rgba(238, 69, 128, .22); }
.lp-plan-save {
    position: absolute; right: 18px; top: -16px;
    background: var(--sun); color: var(--sun-ink); border-radius: 999px; padding: 4px 16px;
    font-family: var(--display); font-weight: 800; font-size: 1.05rem;
}
.lp-plan-give { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-weight: 700; color: var(--ink); }
.lp-plan-give svg { width: 30px; height: 30px; flex: none; color: var(--pop); }
.lp-plans-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 28px; }
.lp-foot-note { font-weight: 700; color: var(--ink-soft); }
.lp-foot-note i { color: var(--pop); }

/* 捐贈:第三張卡片 */
.lp-plan-share { background: var(--pop-soft); border-color: transparent; display: flex; flex-direction: column; }
.lp-plan-share svg { width: 84px; height: 84px; color: var(--pop); margin: -4px 0 6px -6px; }
.lp-plan-share p { margin: 8px 0 0; font-weight: 700; color: var(--ink); }

/* 教師 */
.lp-teachers { background: var(--panel); padding: clamp(56px, 8vw, 108px) 0 clamp(64px, 8vw, 116px); }
.lp-teach-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(26px, 5vw, 72px); align-items: center; }
.lp-teachers .lp-jump { display: inline-block; margin-top: 16px; }
.lp-teach-stats { background: var(--card); border: 2px solid var(--line); border-radius: var(--radius); padding: 22px 24px; }
.lp-teach-count { margin: 0; font-weight: 700; color: var(--ink-soft); font-size: 1.05rem; }
.lp-teach-count strong { font-family: var(--display); font-weight: 800; font-size: 1.5rem; color: var(--lp-deep); }
.lp-teach-names { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lp-teach-names li {
    background: var(--bg); color: var(--ink); border-radius: 999px; padding: 4px 14px;
    font-weight: 800; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 結尾:與上方選單相同的顏色與波浪 */
.lp-end { position: relative; background: var(--primary); padding: clamp(60px, 8vw, 104px) 0 clamp(52px, 7vw, 88px); text-align: center; }
.lp-end::before {
    content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 16px;
    background: radial-gradient(circle at 18px -6px, var(--panel) 20px, transparent 21px) repeat-x;
    background-size: 36px 16px;
}
.lp-end .lp-h2 { color: var(--primary-ink); margin-bottom: 24px; }

/* ── 中型螢幕 ── */
@media (max-width: 1000px) {
    .lp-level-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: -34px; }
    .lp-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-plan-share { grid-column: 1 / -1; }
}
/* ── 小螢幕:文字在上,圖片在下 ── */
@media (max-width: 820px) {
    .lp-hero { min-height: 0; background: var(--bg); }
    .lp-hero::before { display: none; }
    .lp-hero-text { max-width: none; padding: 34px 0 18px; }
    .lp-hero-art { position: relative; inset: auto; }
    .lp-hero-art img { height: auto; aspect-ratio: 16 / 9; }
    /* 圖片上緣淡入頁面底色,不會有一條明顯的邊界 */
    .lp-hero-art::before {
        content: ""; position: absolute; left: 0; right: 0; top: 0; height: 38%;
        background: linear-gradient(180deg, var(--bg) 0, rgba(217, 245, 242, 0) 100%);
    }
    .lp-how-grid, .lp-teach-grid, .lp-plans { grid-template-columns: minmax(0, 1fr); }
    .lp-level-grid { margin-top: -26px; }
    .lp-roles + .lp-levels .lp-level-grid { margin-top: 0; }
}
@media (max-width: 600px) {
    .lp-wrap { width: calc(100% - 28px); }
    .lp-level-grid, .lp-features { grid-template-columns: minmax(0, 1fr); }
    .lp-actions .aloha-btn { width: 100%; }
    .lp-plans-foot .aloha-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* ════════════════════════════════════════════════════════════════════════
   2026-10-08 文案改版(依使用者提供的 en.html):
   7. 主視覺的小字(kicker / line / facts / stamp)
   8. 一篇文章、三個動作 + 六項技能頁籤(radio + CSS)
   9. 三種角色
   10. 數字列與結尾
   風格與主視覺圖維持原樣,全部沿用 aloha.css 的設計變數。
   ════════════════════════════════════════════════════════════════════════ */

/* ── 7. 主視覺 ── */
.lp-kicker { margin: 0 0 12px; display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lp-pop-deep); }
.lp-kicker > span:first-child { width: 28px; height: 3px; border-radius: 2px; background: var(--pop); }
.lp-h1 em { font-style: normal; color: var(--pop); }
.lp-line { margin: 14px 0 0; font-family: var(--display); font-weight: 800; font-size: clamp(1.25rem, 2vw, 1.6rem); color: var(--lp-deep); }
.lp-stamp {
    position: absolute; right: clamp(16px, 4vw, 56px); bottom: clamp(14px, 3vw, 36px); z-index: 2;
    display: inline-flex; align-items: center; gap: 10px;
    background: rgba(255, 255, 255, .82); border: 2px solid var(--line); border-radius: 999px; padding: 8px 18px;
    font-family: var(--display); font-weight: 800; font-size: .82rem; letter-spacing: .16em; color: var(--lp-deep);
}
.lp-stamp i { width: 6px; height: 6px; border-radius: 50%; background: var(--pop); }

/* ── 8. 一篇文章、三個動作 + 六項技能 ── */
.lp-eyebrow { margin: 0 0 10px; font-weight: 800; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lp-pop-deep); }
.lp-eyebrow-light { color: var(--sun); }
.lp-method { background: var(--panel); padding: clamp(56px, 8vw, 108px) 0; }
.lp-method .lp-h2 em, .lp-roles .lp-h2 em, .lp-end .lp-h2 em { font-style: normal; color: var(--pop); }
.lp-method-head { max-width: 760px; }
.lp-stage {
    position: relative; margin-top: clamp(28px, 4vw, 48px);
    display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(18px, 3vw, 36px); align-items: stretch;
}
.lp-stage-copy { display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.lp-stage-index { font-weight: 800; font-size: .78rem; letter-spacing: .14em; color: var(--lp-pop-deep); }
.lp-stage-copy p { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.1; color: var(--lp-deep); }
.lp-stage-copy small { font-weight: 700; color: var(--ink-soft); }
/* 文章示意(紙) */
.lp-sheet {
    position: relative; background: var(--card); border: 2px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 18px 20px 54px; transform: rotate(-1.5deg); align-self: center;
}
.lp-sheet-top { display: flex; justify-content: space-between; font-weight: 800; font-size: .7rem; letter-spacing: .14em; color: var(--ink-soft); }
.lp-sheet h3 { margin: 12px 0 8px; font-family: var(--display); font-weight: 800; font-size: 1.45rem; line-height: 1.1; color: var(--lp-deep); }
.lp-sheet p { margin: 0; font-weight: 700; line-height: 1.55; }
.lp-sheet mark { background: var(--sun); color: var(--sun-ink); border-radius: 4px; padding: 0 3px; }
.lp-sheet-lines { display: grid; gap: 8px; margin-top: 14px; }
.lp-sheet-lines i { display: block; height: 2px; background: var(--line); }
.lp-sheet-lines i:nth-child(2) { width: 72%; }
.lp-sheet-lines i:nth-child(3) { width: 48%; }
.lp-sheet-note { position: absolute; right: 14px; bottom: 14px; transform: rotate(3deg); background: var(--pop-soft); color: var(--lp-pop-deep); border-radius: 8px; padding: 4px 10px; font-weight: 800; font-size: .82rem; }
/* 六項技能:radio 決定面板 */
.lp-skills { background: var(--card); border: 2px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; display: grid; gap: 14px; }
.lp-skills > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.lp-skill-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lp-skill-tabs label {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    border: 2px solid var(--line); border-radius: 12px; padding: 8px 10px;
    font-weight: 800; font-size: .92rem; color: var(--ink-soft); user-select: none;
}
.lp-skill-tabs label > span:first-child { font-family: var(--display); font-size: .78rem; color: var(--lp-pop-deep); }
.lp-skill-tabs label:hover { border-color: var(--primary); color: var(--lp-deep); }
#lpSkillWords:checked ~ .lp-skill-tabs label[for="lpSkillWords"],
#lpSkillGrammar:checked ~ .lp-skill-tabs label[for="lpSkillGrammar"],
#lpSkillListening:checked ~ .lp-skill-tabs label[for="lpSkillListening"],
#lpSkillReading:checked ~ .lp-skill-tabs label[for="lpSkillReading"],
#lpSkillSpeaking:checked ~ .lp-skill-tabs label[for="lpSkillSpeaking"],
#lpSkillWriting:checked ~ .lp-skill-tabs label[for="lpSkillWriting"] { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
#lpSkillWords:checked ~ .lp-skill-tabs label[for="lpSkillWords"] > span:first-child,
#lpSkillGrammar:checked ~ .lp-skill-tabs label[for="lpSkillGrammar"] > span:first-child,
#lpSkillListening:checked ~ .lp-skill-tabs label[for="lpSkillListening"] > span:first-child,
#lpSkillReading:checked ~ .lp-skill-tabs label[for="lpSkillReading"] > span:first-child,
#lpSkillSpeaking:checked ~ .lp-skill-tabs label[for="lpSkillSpeaking"] > span:first-child,
#lpSkillWriting:checked ~ .lp-skill-tabs label[for="lpSkillWriting"] > span:first-child { color: var(--sun); }
.lp-skill-panels { position: relative; min-height: 150px; }
.lp-skill-panel { display: none; background: var(--panel); border-radius: var(--radius-sm); padding: 16px 18px; }
#lpSkillWords:checked ~ .lp-skill-panels [data-skill="words"],
#lpSkillGrammar:checked ~ .lp-skill-panels [data-skill="grammar"],
#lpSkillListening:checked ~ .lp-skill-panels [data-skill="listening"],
#lpSkillReading:checked ~ .lp-skill-panels [data-skill="reading"],
#lpSkillSpeaking:checked ~ .lp-skill-panels [data-skill="speaking"],
#lpSkillWriting:checked ~ .lp-skill-panels [data-skill="writing"] { display: block; }
.lp-panel-label { margin: 0 0 6px; font-weight: 800; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lp-pop-deep); }
.lp-skill-panel h3 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.35rem; line-height: 1.15; color: var(--lp-deep); }
.lp-skill-panel p:last-child { margin: 8px 0 0; font-weight: 700; color: var(--ink-soft); }

/* ── 9. 三種角色 ── */
.lp-roles { background: var(--card); padding: clamp(56px, 8vw, 108px) 0; }
.lp-roles-head { max-width: 760px; }
.lp-roles-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 30px); margin-top: clamp(28px, 4vw, 48px); }
.lp-role { background: var(--bg); border: 2px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.lp-role-num { font-weight: 800; font-size: .76rem; letter-spacing: .14em; color: var(--lp-pop-deep); }
.lp-role h3 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.4rem; line-height: 1.12; color: var(--lp-deep); }
.lp-role p { margin: 0; font-weight: 700; color: var(--ink-soft); }
.lp-role-art { position: relative; height: 150px; border-radius: var(--radius-sm); margin-bottom: 8px; overflow: hidden; display: grid; place-items: center; }
.lp-role-paper .lp-role-art { background: var(--card); border: 2px dashed var(--line); }
.lp-role-paper .lp-role-art > span { font-family: var(--display); font-weight: 800; font-size: 1.1rem; letter-spacing: .06em; color: var(--lp-deep); text-align: center; line-height: 1.2; }
.lp-role-paper .lp-role-art i { position: absolute; left: 18px; right: 18px; height: 2px; background: var(--line); }
.lp-role-paper .lp-role-art i:nth-of-type(1) { bottom: 34px; }
.lp-role-paper .lp-role-art i:nth-of-type(2) { bottom: 22px; right: 40%; }
.lp-role-paper .lp-role-art b { position: absolute; right: 14px; bottom: 12px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--sun); color: var(--sun-ink); font-family: var(--display); font-size: 1.2rem; }
.lp-role-guide .lp-role-art { background: var(--lp-deep); color: #fff; }
.lp-role-play { width: 52px; height: 52px; border-radius: 50%; background: var(--pop); color: var(--pop-ink); display: grid; place-items: center; font-size: 1.6rem; box-shadow: 0 4px 0 rgba(0, 0, 0, .25); }
.lp-role-guide .lp-role-art p { position: absolute; left: 14px; bottom: 12px; margin: 0; font-size: .72rem; letter-spacing: .12em; color: rgba(255, 255, 255, .85); line-height: 1.3; }
.lp-role-guide .lp-role-art p b { font-family: var(--display); font-size: .95rem; color: #fff; }
.lp-role-ai .lp-role-art { background: var(--bg-deep); }
.lp-role-ai .lp-role-art > span { font-family: var(--display); font-weight: 800; font-size: 2.4rem; color: var(--lp-deep); }
.lp-role-ai .lp-role-art i { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--pop); opacity: .8; }
.lp-role-ai .lp-role-art i:nth-of-type(1) { left: 18%; top: 22%; }
.lp-role-ai .lp-role-art i:nth-of-type(2) { right: 20%; top: 30%; background: var(--sun); }
.lp-role-ai .lp-role-art i:nth-of-type(3) { left: 30%; bottom: 18%; background: var(--leaf); }
.lp-role-ai .lp-role-art b { position: absolute; right: 14px; bottom: 12px; background: var(--primary); color: var(--primary-ink); border-radius: 999px; padding: 3px 12px; font-family: var(--display); font-size: .95rem; }

/* ── 10. 數字列與結尾 ── */
.lp-numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: clamp(30px, 5vw, 56px); text-align: left; }
.lp-numbers > div { background: rgba(255, 255, 255, .14); border: 2px solid rgba(255, 255, 255, .35); border-radius: var(--radius-sm); padding: 14px 16px; display: grid; gap: 2px; }
.lp-numbers strong { font-family: var(--display); font-weight: 800; font-size: 1.8rem; line-height: 1; color: var(--sun); }
.lp-numbers span { font-weight: 700; font-size: .88rem; color: rgba(255, 255, 255, .9); }
.lp-end-text { margin: 10px auto 24px; max-width: 60ch; font-weight: 700; font-size: 1.08rem; color: rgba(255, 255, 255, .92); }

@media (max-width: 1000px) {
    .lp-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .lp-stage-copy { grid-column: 1 / -1; }
    .lp-roles-grid { grid-template-columns: minmax(0, 1fr); }
    .lp-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
    .lp-stamp { display: none; }
}
@media (max-width: 600px) {
    .lp-stage { grid-template-columns: minmax(0, 1fr); }
    .lp-sheet { transform: none; }
    .lp-skill-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-numbers { grid-template-columns: minmax(0, 1fr); }
}

/* ════════════════════════════════════════════════════════════════════════
   2026-10-10 第 5 版(使用者提供的 English Aloha landing page 文案):
   頂部體驗提示、首屏徽章、數據條、三大支柱、適用對象頁籤、方案條列與購買按鈕、頁尾品牌
   配色與字型沿用原本的設計變數(海灘主題不變)
   ════════════════════════════════════════════════════════════════════════ */

/* ── 頂部提示條 ── */
.lp-bar {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 6px;
    /* 上方留 26px:頁首的波浪邊緣會往下蓋 15px(2026-10-11 使用者回報文字被蓋住)*/
    background: var(--lp-deep); color: #ffffff; padding: 26px 16px 10px; text-align: center;
    font-weight: 700; font-size: .9rem; line-height: 1.4;
}
.lp-bar strong { color: var(--sun); }
.aloha .lp-bar-link { margin-left: 6px; color: #ffffff; text-decoration: underline; text-underline-offset: 3px; font-weight: 800; }
.aloha .lp-bar-link:hover, .aloha .lp-bar-link:focus-visible { color: var(--sun); }

/* ── 首屏徽章(白底膠囊 + 閃爍的綠點)── */
.lp-kicker-badge {
    background: rgba(255, 255, 255, .92); border: 2px solid var(--line); border-radius: 999px; padding: 5px 14px 5px 10px;
    letter-spacing: .04em; text-transform: none; font-size: .86rem; color: var(--lp-deep); box-shadow: 0 3px 0 rgba(11, 143, 148, .12);
}
.lp-kicker-badge > span:first-child { width: 10px; height: 10px; border-radius: 50%; background: var(--leaf); animation: lpPulse 1.6s ease-in-out infinite; }
@keyframes lpPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) { .lp-kicker-badge > span:first-child { animation: none; } }

/* ── 數據條 ── */
.lp-stats { position: relative; z-index: 2; background: var(--bg); padding: clamp(28px, 4vw, 44px) 0 clamp(40px, 5vw, 64px); }
.lp-stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.lp-stats-grid > div { background: var(--card); border: 2px solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px; display: grid; gap: 4px; box-shadow: var(--shadow); }
.lp-stats-grid strong { font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem, 2.4vw, 1.9rem); line-height: 1.05; color: var(--primary-strong); }
.lp-stats-grid > div:nth-child(2) strong { color: var(--leaf); }
.lp-stats-grid > div:nth-child(4) strong { color: var(--lp-pop-deep); }
.lp-stats-grid span { font-weight: 700; font-size: .9rem; color: var(--ink-soft); }

/* ── 三大支柱(卡片沿用三種角色)── */
.lp-pillars .lp-p { margin-top: 12px; }
.lp-role-eris .lp-role-art { background: var(--card); border: 2px dashed var(--line); }
.lp-role-eris .lp-role-art > i { position: absolute; left: 22px; right: 22px; height: 8px; border-radius: 4px; background: var(--line); }
.lp-role-eris .lp-role-art > i:nth-of-type(1) { top: 24px; right: 34%; }
.lp-role-eris .lp-role-art > i:nth-of-type(2) { top: 46px; background: var(--sun); }
.lp-role-eris .lp-role-art > i:nth-of-type(3) { top: 68px; right: 20%; }
.lp-role-eris .lp-role-art > i:nth-of-type(4) { top: 90px; right: 46%; }
.lp-role-eris .lp-role-art > b { position: absolute; left: 18px; bottom: 12px; background: var(--leaf); color: #ffffff; border-radius: 999px; padding: 3px 12px; font-family: var(--display); font-size: .85rem; letter-spacing: .08em; }
.lp-eris-lens { position: absolute; right: 22%; top: 26px; width: 58px; height: 58px; border-radius: 50%; border: 6px solid var(--lp-deep); background: rgba(255, 255, 255, .35); }
.lp-eris-lens::after { content: ""; position: absolute; right: -22px; bottom: -14px; width: 26px; height: 8px; border-radius: 4px; background: var(--lp-deep); transform: rotate(45deg); }

/* ── 適用對象(radio + CSS 頁籤)── */
.lp-aud { background: var(--bg); padding: clamp(56px, 8vw, 108px) 0 clamp(20px, 3vw, 36px); }
.lp-aud-box { margin-top: clamp(22px, 3vw, 34px); background: var(--card); border: 2px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; display: grid; gap: 14px; max-width: 900px; }
.lp-aud-box > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.lp-aud-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lp-aud-tabs label {
    display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; user-select: none;
    border: 2px solid var(--line); border-radius: 999px; padding: 9px 12px; font-weight: 800; font-size: .95rem; color: var(--ink-soft); text-align: center;
}
.lp-aud-tabs label i { color: var(--pop); }
.lp-aud-tabs label:hover { border-color: var(--primary); color: var(--lp-deep); }
#lpAudParents:checked ~ .lp-aud-tabs label[for="lpAudParents"],
#lpAudStudents:checked ~ .lp-aud-tabs label[for="lpAudStudents"],
#lpAudTeachers:checked ~ .lp-aud-tabs label[for="lpAudTeachers"] { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
#lpAudParents:checked ~ .lp-aud-tabs label[for="lpAudParents"] i,
#lpAudStudents:checked ~ .lp-aud-tabs label[for="lpAudStudents"] i,
#lpAudTeachers:checked ~ .lp-aud-tabs label[for="lpAudTeachers"] i { color: var(--sun); }
.lp-aud-box > input:focus-visible ~ .lp-aud-tabs label { outline: none; }
#lpAudParents:focus-visible ~ .lp-aud-tabs label[for="lpAudParents"],
#lpAudStudents:focus-visible ~ .lp-aud-tabs label[for="lpAudStudents"],
#lpAudTeachers:focus-visible ~ .lp-aud-tabs label[for="lpAudTeachers"] { outline: 3px solid var(--sun); outline-offset: 2px; }
.lp-aud-panel { display: none; background: var(--panel); border-radius: var(--radius-sm); padding: 18px 20px; }
#lpAudParents:checked ~ .lp-aud-panels [data-aud="parents"],
#lpAudStudents:checked ~ .lp-aud-panels [data-aud="students"],
#lpAudTeachers:checked ~ .lp-aud-panels [data-aud="teachers"] { display: block; }
.lp-aud-panel h3 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.35rem; line-height: 1.15; color: var(--lp-deep); }
.lp-aud-panel p { margin: 8px 0 0; font-weight: 700; line-height: 1.6; color: var(--ink-soft); }
.lp-aud + .lp-levels { padding-top: clamp(40px, 6vw, 72px); }
.lp-aud + .lp-levels .lp-level-grid { margin-top: 0; }

/* ── 方案:條列與購買按鈕(按鈕對齊在卡片底部)── */
.lp-plan:not(.lp-plan-share) { display: flex; flex-direction: column; }
.lp-plan-list { list-style: none; margin: 14px 0 16px; padding: 14px 0 0; border-top: 2px dashed var(--line); display: grid; gap: 7px; }
.lp-plan-list li { display: flex; align-items: flex-start; gap: 6px; font-weight: 700; font-size: .95rem; color: var(--ink); line-height: 1.4; }
.lp-plan-list li i { color: var(--leaf); margin-top: 2px; }
.lp-plan-list li.lp-plan-hl { color: var(--primary-strong); }
.lp-plan-list li.lp-plan-hl i { color: var(--pop); }
.aloha .lp-plan-buy { margin-top: auto; align-self: stretch; justify-content: center; text-align: center; white-space: normal; }
.lp-plan > .lp-plan-buy { margin-top: auto; }
.lp-plan-days { margin-bottom: 16px; }
.lp-plan-buy-price { opacity: .85; }

/* ── 頁尾品牌 ── */
.lp-brandline { margin: 34px 0 0; font-size: .86rem; font-weight: 700; color: rgba(255, 255, 255, .75); line-height: 1.6; }
.lp-brandline strong { color: #ffffff; }

@media (max-width: 1000px) {
    .lp-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .lp-aud-tabs { grid-template-columns: minmax(0, 1fr); }
    .lp-bar { font-size: .84rem; }
}
/* 首屏標題:第二行較長,字級小一點(第一行維持原本的大標) */
.lp-hero .lp-h1 em { display: inline-block; margin-top: 6px; font-size: .64em; line-height: 1.15; }
/* 六項技能頁籤:鍵盤移到 radio 時看得到焦點(審查補強) */
#lpSkillWords:focus-visible ~ .lp-skill-tabs label[for="lpSkillWords"],
#lpSkillGrammar:focus-visible ~ .lp-skill-tabs label[for="lpSkillGrammar"],
#lpSkillListening:focus-visible ~ .lp-skill-tabs label[for="lpSkillListening"],
#lpSkillReading:focus-visible ~ .lp-skill-tabs label[for="lpSkillReading"],
#lpSkillSpeaking:focus-visible ~ .lp-skill-tabs label[for="lpSkillSpeaking"],
#lpSkillWriting:focus-visible ~ .lp-skill-tabs label[for="lpSkillWriting"] { outline: 3px solid var(--sun); outline-offset: 2px; }