/* ============================================================
   Course Kit 官網 — landing 專屬樣式（page-landing.css）
   來源：從 index.html v12 的內嵌 <style>（502 行）抽出「只有 landing
   用到」的部分：hero 三支手機／pinned 釘住式身分切換／track 結構（.track /
   .track-mark / .track-rail，吃 site.css 的 --tk-* token）／到期提醒 demo／
   主秀手機叢集／細節圓圈圖示／白天夜晚／痛點三卡／深色情境卡 showcase／
   dual／bento／marquee 評價牆／pricing tiers／FAQ／
   final CTA。跟 site.css 一起載入，site.css 在前。
   （2026-08-02：resources 卡整區隨 landing #resources 一起移除）
   ============================================================ */
/* ---------- hero ---------- */
.hero{position:relative;padding-top:calc(64px + clamp(44px,6.5vw,86px));padding-bottom:0;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-bg i{position:absolute;border-radius:50%;filter:blur(72px)}
.hero-bg i:nth-child(1){width:62vw;height:62vw;left:-16vw;top:-28vw;background:radial-gradient(circle,var(--brand-tint) 0%,rgba(233,247,252,0) 68%);opacity:.8}
.hero-bg i:nth-child(2){width:44vw;height:44vw;right:-10vw;top:-6vw;background:radial-gradient(circle,var(--warm) 0%,rgba(244,243,210,0) 70%);opacity:.85}
.hero-bg i:nth-child(3){width:56vw;height:34vw;left:24vw;top:26vw;background:radial-gradient(circle,var(--brand-tint-2) 0%,rgba(250,250,250,0) 72%);opacity:.9}
.hero-grid{position:absolute;inset:0;z-index:0;opacity:.55;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;
  mask-image:radial-gradient(ellipse 72% 52% at 50% 0%,#000 18%,transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse 72% 52% at 50% 0%,#000 18%,transparent 76%)}
.hero-inner{position:relative;z-index:2;text-align:center}
.pill{display:inline-flex;align-items:center;gap:9px;padding:7px 16px 7px 9px;border-radius:999px;background:var(--surface);border:1px solid var(--brand-border);box-shadow:var(--shadow-sm);font-size:var(--fs-sm);font-weight:600;color:var(--ink-2);margin-bottom:22px}
.pill b{background:var(--warm);border:1px solid var(--warm-line);border-radius:999px;padding:2px 10px;font-size:var(--fs-xs);color:var(--ink)}
.hl{background:linear-gradient(180deg,transparent 62%,var(--brand-tint) 62%);padding:0 .08em}
.sp{display:inline-block;will-change:transform,opacity}
/* 2026-08-21 Lucy 圈兩顆 CTA 寬度要一致；同日二修：min-width:200px 三語一刀切太寬
   （zh 自然寬只有 111px）。改 inline-grid 等分欄：兩顆自動等寬、貼齊該語系較寬那顆
   （en 162 / zh 111 / ja 175px），不用再維護寫死的共同最小寬。
   置中由 .hero-inner 的 text-align:center 吃（inline-level box）。 */
.hero-cta{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:14px;margin-top:30px}
/* 窄幅時 ja 兩顆並排（175×2+gap）會超出 .wrap，改直向堆疊，仍維持等寬 */
@media (max-width:430px){.hero-cta{grid-auto-flow:row;grid-auto-columns:unset}}
/* 2026-08-02 C1 第 4 項：分岔卡搬到 h1 正下方，間距從 28 收到 22 讓它「貼近」；
   被擠到分岔卡下面的說明句補回 26px（site.css 的 .lead 預設 20px 太擠） */
.forks{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.hero-inner .lead{margin-top:26px}
.fork{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--brand-border);border-radius:var(--r-md);padding:14px 22px 14px 16px;box-shadow:var(--shadow-sm);text-align:left;transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s,border-color .28s;min-width:262px}
.fork:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--brand-2)}
.fork .ic{width:54px;height:54px;border-radius:14px;background:var(--brand-tint-2);border:1px solid var(--brand-border);display:flex;align-items:center;justify-content:center;flex:0 0 auto;overflow:hidden}
.fork .ic img{width:48px;height:48px;object-fit:contain;transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.fork:hover .ic img{transform:scale(1.1)}
.fork b{display:block;color:var(--heading);font-size:var(--fs-lg);font-weight:800}
.fork span{font-size:var(--fs-sm);color:var(--sub)}
.fork .arw{margin-left:auto;color:var(--brand-deep);font-weight:800;transition:transform .28s}
.fork:hover .arw{transform:translateX(4px)}

/* 2026-08-02 C1 第 4 項「統計數字下挪」：三張浮動數據卡是絕對定位在 .stage 裡的一組構圖，
   個別搬會拆散 Lucy 驗收過的排法，所以整台 .stage 往下推（頂距 clamp 40/5.5vw/70 → 56/9vw/120），
   三張卡的相對位置一格沒動，只是整組退出首屏，讓分岔卡獨佔首屏注意力 */
.stage{position:relative;z-index:2;margin:clamp(56px,9vw,120px) auto 0;max-width:1000px;min-height:clamp(360px,44vw,530px)}
.stage-phones{display:flex;justify-content:center;align-items:flex-end;gap:clamp(10px,2.4vw,30px)}
.phone{border-radius:38px;border:9px solid var(--dark-frame);background:var(--dark-frame);box-shadow:var(--shadow-lg);overflow:hidden;flex:0 0 auto;width:clamp(178px,25vw,258px)}
.phone img{border-radius:29px}
.phone.side{width:clamp(140px,20vw,206px);opacity:.95}
.stat{position:absolute;background:rgba(255,255,255,.86);backdrop-filter:blur(14px) saturate(180%);border:1px solid var(--brand-border);border-radius:var(--r-md);padding:16px 20px;box-shadow:var(--shadow-md);min-width:158px;z-index:3}
.stat .k{font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;color:var(--brand-text)}
/* tabular-nums：countUp 動畫跳數字時寬度會抖，等寬數字才不會讓旁邊內容跟著抖動（2026-08-01 batch4） */
.stat .v{font-size:clamp(26px,3.4vw,38px);font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1.1;margin-top:4px;font-variant-numeric:tabular-nums}
.stat .v small{font-size:.5em;font-weight:700;color:var(--ink-2);margin-left:3px}
.stat .d{font-size:var(--fs-xs);color:var(--sub);margin-top:2px}
.stat.s1{left:2%;top:14%}.stat.s2{right:1%;top:30%}.stat.s3{left:9%;bottom:9%}
.stat.up .v{color:#c0392b}
.hero-note{font-size:var(--fs-sm);color:var(--faint);margin-top:16px}
.hero-fade{height:clamp(50px,7vw,100px);background:linear-gradient(180deg,rgba(250,250,250,0),var(--bg))}

/* ---------- strip ---------- */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface);padding:30px 0}
.strip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;text-align:center}
.strip-grid b{display:block;color:var(--heading);font-size:clamp(18px,2.1vw,23px);font-weight:800;text-wrap:balance}
.strip-grid span{font-size:var(--fs-sm);color:var(--sub);text-wrap:balance}

/* ============ 釘住式身分切換 ============ */
/* 2026-08-02 C1 第 5 項：pinned 區前的正常滾動緩衝。
   問題：Mac 觸控板一次慣性滑就是 1500-2500px，原本 .pin-wrap 起點在 1480（1280x800），
   等於從頁首滑第一下就直接掉進釘住區，畫面鎖住不動，體感像壞掉。
   做法：在 .pin-wrap 前面墊一段同色（var(--bg)，就是 .pin-wrap 漸層的第一個色停）的緩衝，
   把釘住起點往下推。.pin-wrap 的 200vh 一格沒動，交叉淡出的
   scroll() 映射（target=.pin-wrap，start start → end end）完全不受影響。
   2026-08-02 實測（獨立驗收）：釘住起點 1280x800=1766px(2.21屏)、1512x982=1838px(1.87屏)、
   1920x1080=1868px(1.73屏)。滑 1600px 三種視窗都還沒被釘住（改前全都已釘住）。
   但註解開頭講的 2500px 慣性滑，三種視窗仍會吃到，要「第一手勢絕不被吃」得再加高。 */
/* 2026-08-03 Lucy 圈「很空 留白很多」就是這塊：340px 上限縮到 120px 定值。
   代價＝快速慣性滑更容易撞進釘住區（上面 2026-08-02 實測的保護變弱），Lucy 裁定留白優先。 */
.pin-lead{height:120px;background:var(--bg)}
/* 2026-08-02 trim2 第 1 刀：200vh → 150vh。頁面總高砍 400px（桌機）。
   交叉淡出的 scroll() 是 target=.pin-wrap、offset start start → end end，
   進度 0→1 對應的捲動距離＝height − 100vh（sticky 的可滑範圍），
   所以縮高度只是把同一段動畫壓進較短的捲動距離，映射不會偏（已實測取樣驗證）。
   .pin-lead 那段緩衝不動，釘住起點維持在 1766px。
   ⚠️ 2026-08-02 獨立驗收實測，先前寫在這裡的「150vh 是折衷」是錯的，已刪除。
   實際數據（慣性滑 2500px 的落地進度，1280x800／1512x982／1920x1080）：
     200vh 區間 800px → 91.8% / 66.9% / 57.0%（動畫還看得到殘餘）
     150vh 區間 400px → 100% / 99.6% / 99.1%（一次滑完，等於沒發生）
   動畫進度綁在釘住區間上，區間砍半＝同一手勢走掉兩倍進度。
   **pin 區高度就是動畫的可看時間，砍高度就是砍動畫，沒有折衷值。**
   要保動畫就得留 200vh；要省高度就該整區砍掉，不要留半殘的中間值。 */
.pin-wrap{position:relative;height:150vh;background:linear-gradient(180deg,var(--bg),var(--brand-tint-2) 42%,var(--warm) 100%)}
.pin-stage{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.pin-glow{position:absolute;width:70vw;height:70vw;border-radius:50%;filter:blur(80px);opacity:.55;
  background:radial-gradient(circle,var(--brand-tint) 0%,transparent 66%);pointer-events:none}
.pin-inner{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(18px,4vw,56px);width:min(1140px,92vw);z-index:2}
.pin-copy{position:relative;min-height:250px}
.pin-copy .layer{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center}
.pin-copy .layer.r{text-align:right;align-items:flex-end}
.pin-kicker{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:999px;font-size:var(--fs-sm);font-weight:800;margin-bottom:14px}
.pk-learn{background:var(--surface);border:1px solid var(--brand-border);color:var(--brand-text)}
.pk-coach{background:var(--ink);color:#fff}
.pin-copy h2{font-size:clamp(26px,3.6vw,44px)}
/* 第二組釘住式文案（statA／statB）比第一組小一號。2026-08-01 之前這是寫在 index.html
   兩個 h2 上的 inline style，繞過整套 CSS，已抽成 class 放這裡。
   HTML 端的對應是 <div class="pin-copy pin-copy-sm">。 */
.pin-copy-sm h2{font-size:clamp(22px,2.6vw,32px)}
.pin-copy p{font-size:clamp(16px,1.8vw,19px);color:var(--ink-2);max-width:30ch;margin-top:14px}
.pin-copy .layer.r p{margin-left:auto}
.pin-phone{position:relative;width:clamp(200px,25vw,272px);aspect-ratio:1125/2436;border-radius:40px;border:10px solid var(--dark-frame);background:var(--dark-frame);box-shadow:var(--shadow-lg);overflow:hidden;flex:0 0 auto}
.pin-phone img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:30px}
.pin-wipe{position:absolute;left:0;right:0;height:2px;top:100%;opacity:0;z-index:2;
  background:linear-gradient(90deg,transparent,#a8e1ee,#fff,#a8e1ee,transparent);box-shadow:0 0 16px 3px rgba(168,225,238,.75)}
.persona{position:absolute;bottom:0;width:clamp(150px,19vw,268px);pointer-events:none;z-index:3;filter:drop-shadow(0 18px 30px rgba(6,60,94,.18))}
.persona.pl{left:0}
.persona.pr{right:0}
/* 2026-08-08 bottom 從 13vh 改成貼著 .pin-tabs 上緣。原本用純 vh，視窗一矮手機殼就超出畫面、
   這張半透明白膠囊剛好疊在深色殼上，blur 混色後變一條髒灰（Lucy 截圖）。改成跟 tabs 綁在一起，
   不管視窗多高都落在殼底下方那條淺色帶上。視窗低於 760px 時殼本來就撐破畫面，字卡沒有乾淨位置可站，直接不顯示。 */
.pin-mid{position:absolute;left:50%;bottom:calc(4.4vh + 54px);transform:translateX(-50%);z-index:4;opacity:0;pointer-events:none;
  font-size:clamp(15px,1.7vw,19px);font-weight:800;color:var(--brand-text);white-space:nowrap;
  padding:9px 20px;border-radius:999px;background:rgba(255,255,255,.78);border:1px solid var(--brand-border);backdrop-filter:blur(8px)}
@media (max-height:760px){.pin-mid{display:none}}
.pin-tabs{position:absolute;bottom:4.4vh;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:4}
.pin-tab{padding:8px 18px;border-radius:999px;border:1px solid var(--brand-border);background:rgba(255,255,255,.86);backdrop-filter:blur(8px);font-weight:800;font-size:var(--fs-sm);color:var(--sub);transition:background .35s,color .35s,border-color .35s}
.pin-tab.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.pin-bar{position:absolute;left:50%;bottom:2.2vh;transform:translateX(-50%);width:min(260px,50vw);height:3px;border-radius:3px;background:rgba(6,60,94,.12);overflow:hidden;z-index:4}
.pin-bar i{display:block;height:100%;width:0;background:var(--ink);border-radius:3px}

/* ---------- track head ---------- */
.track-head{position:relative;display:flex;align-items:flex-start;gap:clamp(20px,4vw,50px);flex-wrap:wrap}
.track-badge{display:inline-flex;align-items:center;gap:10px;padding:8px 18px;border-radius:999px;font-size:var(--fs-sm);font-weight:800}
.tb-learn{background:var(--brand-tint-2);border:1px solid var(--brand-border);color:var(--brand-text)}
.tb-coach{background:var(--warm);border:1px solid var(--warm-line);color:var(--ink)}
.track-head{padding-right:clamp(150px,17vw,220px)}   /* 讓出右下角動畫卡的位置，文字不會被壓到 */
.track-head .txt{flex:1 1 420px;max-width:min(720px,100%)}
/* 教課線鏡像：動畫卡在左、文字靠右，跟上課線左右對稱 */
.track-head.mirror{padding-right:0;padding-left:clamp(150px,17vw,220px);text-align:right}
.track-head.mirror .txt{margin-left:auto}
.track-head.mirror .lead{margin-left:auto;margin-right:0}

/* 動畫吉祥物：GIF 是烤白底的，一律進圓角卡片，不要當去背素材用 */
.track-anim{position:absolute;right:0;bottom:-30px;width:clamp(128px,15vw,190px);aspect-ratio:1;border-radius:26px;
  overflow:hidden;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-md);z-index:2}
.track-anim img{display:block;width:100%;height:100%}
.track-anim.ta-coach{right:auto;left:0}

.track{position:relative;overflow:hidden;background:var(--tk-bg)}
.track > .wrap{position:relative;z-index:1}
.track-mark{position:absolute;top:7%;font-size:clamp(120px,18vw,250px);font-weight:900;line-height:.82;
  letter-spacing:.04em;pointer-events:none;user-select:none;z-index:0;will-change:transform;color:var(--tk-mark)}
.tm-learn{left:-1.5%}
.tm-coach{right:-1.5%}
.track-rail{position:absolute;top:0;height:100%;width:46px;z-index:3;display:flex;justify-content:center;pointer-events:none}
.rail-learn{left:max(12px,calc(50% - 690px))}
.rail-coach{right:max(12px,calc(50% - 690px))}
.track-rail span{position:sticky;top:110px;height:max-content;writing-mode:vertical-rl;padding:16px 11px;
  border-radius:999px;font-size:var(--fs-sm);font-weight:800;letter-spacing:.3em;box-shadow:var(--shadow-sm);
  background:var(--tk-rail-bg);border:1px solid var(--tk-rail-line);color:var(--tk-rail-fg)}
@media(max-width:1320px){.track-rail{display:none}}

/* ---------- 到期提醒 demo（照 App 實際規則：7 天內才亮） ---------- */
.amb-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:340px}
.amb-glow{position:absolute;width:min(400px,84%);aspect-ratio:1;border-radius:50%;filter:blur(60px);opacity:0;
  background:radial-gradient(circle,var(--amb,#D97706) 0%,transparent 68%);transition:opacity .5s}
.amb-card{position:relative;z-index:1;width:min(360px,92%);background:var(--surface);border-radius:24px;padding:24px 24px 20px;
  border:1px solid var(--line);box-shadow:0 22px 48px rgba(6,60,94,.13)}
.amb-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.amb-store{font-size:var(--fs-sm);color:var(--faint)}
.amb-cat{padding:4px 11px;border-radius:8px;font-size:var(--fs-xs);font-weight:800;background:var(--brand-tint-2);color:var(--brand-text)}
.amb-card h3{font-size:var(--fs-2xl);margin-top:12px}
.amb-num{display:flex;align-items:baseline;gap:7px;margin-top:10px}
/* tabular-nums：滑桿拖動即時改數字，等寬數字才不會讓卡片內容跟著抖動（2026-08-01 batch4） */
.amb-num b{font-size:44px;font-weight:900;letter-spacing:-.02em;color:var(--amb,#16A34A);transition:color .35s;font-variant-numeric:tabular-nums}
.amb-num small{font-size:var(--fs-sm);color:var(--sub);font-weight:700}
.amb-row{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:14px;
  border-top:1px dashed var(--line);font-size:var(--fs-sm);color:var(--sub)}
.amb-row b{color:var(--heading);font-weight:800}
.amb-note{margin-top:14px;font-size:var(--fs-sm);font-weight:700;color:var(--amb,#16A34A);min-height:1.4em}
.amb-ctl{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:22px;font-size:var(--fs-sm);font-weight:700;color:var(--sub)}
/* 2026-08-03 假推播示意卡（iOS 通知樣式），取代原本「推播畫面待補截圖」那行字，
   也順便把左欄內容撐起來，緩解 Lucy 圈的「slider 下面一片空」。 */
.push-mock{display:flex;gap:12px;align-items:flex-start;margin-top:20px;max-width:380px;
  background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:14px;
  padding:12px 14px;box-shadow:var(--shadow-md)}
.push-mock img{width:38px;height:38px;border-radius:9px;flex:0 0 auto}
.pm-body{flex:1;min-width:0}
.pm-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:var(--fs-xs)}
.pm-head b{color:var(--heading)}
.pm-head span{color:var(--faint);font-weight:600;font-size:var(--fs-xs)}
.pm-body p{margin:3px 0 0;font-size:var(--fs-sm);color:var(--ink-2);line-height:1.5}
.amb-ctl input[type=range]{flex:1 1 190px;accent-color:var(--brand-deep);height:22px;cursor:grab}
.amb-val b{font-size:var(--fs-xl);color:var(--heading);font-weight:900;font-variant-numeric:tabular-nums}

/* ---------- 主秀手機叢集 ---------- */
.feat-shots.cluster3{gap:12px}
/* 三台同一個固定 frame（寬同 clamp、比例鎖 390:844），截圖比例不同也不會撐出不同大小 */
.feat-shots.cluster3 .phone{width:clamp(126px,15vw,170px);aspect-ratio:390/844}
.feat-shots.cluster3 .phone img{width:100%;height:100%;object-fit:cover;object-position:top}
.feat-shots.cluster3 .phone:nth-child(1){transform:translateY(16px) rotate(-3deg)}
.feat-shots.cluster3 .phone:nth-child(2){transform:translateY(-18px);z-index:2}
.feat-shots.cluster3 .phone:nth-child(3){transform:translateY(16px) rotate(3deg)}
.feat-shots.grid4{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
/* 前後排景深：基礎位移與 scale 走 CSS 變數，捲動視差由 JS 推 --drift 疊上去 */
.feat-shots.grid4 .phone{width:100%;max-width:196px}
/* :nth-child(n) 墊特異度到 0-4-0，壓過寫在後面的 .feat .phone:nth-child(2) 通用位移 */
.feat-shots.grid4 .phone:nth-child(n){transform:translate3d(0,calc(var(--ty,0px) + var(--drift,0px)),0) scale(var(--sc,1))}
.feat-shots.grid4 .phone:nth-child(1){--ty:0px;--sc:1.04;z-index:2;position:relative}
.feat-shots.grid4 .phone:nth-child(2){--ty:26px;--sc:.94;opacity:.94}
.feat-shots.grid4 .phone:nth-child(3){--ty:-16px;--sc:.94;opacity:.94}
.feat-shots.grid4 .phone:nth-child(4){--ty:10px;--sc:1.04;z-index:2;position:relative}
/* 2026-08-03 Lucy 圈兩顆 pill 間距太開：gap 10px 與 .datachip 自帶 margin-top 20px 相加成 30px，
   這裡把容器內的 datachip margin 歸零，實際間距只吃 gap 12px。單獨用的 datachip（學習線）不受影響。 */
.chips{display:flex;flex-direction:column;gap:12px;align-items:flex-start;margin-top:18px}
.chips .datachip{margin-top:0}

/* ---------- 細節：圓圈圖示 ---------- */
.dots{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(14px,3vw,38px);margin-top:44px}
.dot-item{display:flex;flex-direction:column;align-items:center;gap:10px;background:none;border:0;cursor:pointer;padding:0;font:inherit}
.dot-ic{display:flex;align-items:center;justify-content:center;width:clamp(58px,7vw,76px);aspect-ratio:1;border-radius:50%;
  border:1px solid var(--line);background:var(--surface);color:var(--sub);box-shadow:var(--shadow-sm);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),color .3s,border-color .3s,background .3s}
.dot-ic svg{width:26px;height:26px}
.dot-lb{font-size:var(--fs-sm);font-weight:800;color:var(--sub);transition:color .3s}
.dot-item:hover .dot-ic{transform:translateY(-4px)}
.dot-item.on .dot-ic{background:var(--brand-tint-2);border-color:var(--brand-border);color:var(--brand-text);transform:translateY(-4px) scale(1.06)}
.dot-item.on .dot-lb{color:var(--heading)}
.dot-panel{position:relative;margin-top:30px;min-height:106px}
.dot-pane{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;transform:translateY(8px)}
.dot-pane.on{opacity:1;transform:none;pointer-events:auto}
.dot-pane h3{font-size:var(--fs-2xl)}
.dot-pane p{font-size:var(--fs-md);margin-top:8px;max-width:46ch;margin-left:auto;margin-right:auto}
.trust{display:flex;align-items:center;gap:22px;text-align:left;margin-top:34px;padding:24px 26px;
  background:linear-gradient(140deg,var(--brand-tint-2),var(--surface) 62%);border:1px solid var(--line);border-radius:var(--r-md)}
.trust img{width:92px;flex:0 0 auto}
.trust b{font-size:var(--fs-lg);color:var(--heading)}
.trust p{font-size:var(--fs-md);margin-top:6px}

/* ---------- 白天夜晚 ---------- */
.dn{position:relative;margin-top:38px;border-radius:var(--r-lg);overflow:hidden;height:clamp(300px,38vw,400px);
  border:1px solid var(--line);box-shadow:var(--shadow-lg);cursor:ew-resize;user-select:none;
  background:linear-gradient(180deg,#cfeaf6 0%,#eaf6fb 58%,#fbf7e6 100%)}
.dn-orb{position:absolute;left:12%;top:16%;width:clamp(46px,6vw,64px);aspect-ratio:1;pointer-events:none;z-index:2}
.dn-orb i{position:absolute;inset:0;border-radius:50%;display:block}
.dn-orb .sun{background:radial-gradient(circle at 38% 34%,#ffe9a8,#f6c95f);box-shadow:0 0 44px 14px rgba(246,201,95,.5)}
.dn-orb .moon{background:radial-gradient(circle at 62% 38%,#f2f6fb,#c9d6e6);box-shadow:0 0 40px 12px rgba(206,224,245,.42);opacity:0}
.dn-scene{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;z-index:1}
.dn-side{position:absolute;bottom:clamp(22px,3.5vw,42px);display:flex;flex-direction:column;align-items:center;gap:12px}
.dn-side img{width:clamp(180px,23vw,290px);filter:drop-shadow(0 18px 26px rgba(6,60,94,.22))}   /* otter-b 的仰躺姿勢是橫幅，比站姿要放大 */
.dn-side figcaption{padding:7px 18px;border-radius:999px;font-size:var(--fs-md);font-weight:800;backdrop-filter:blur(8px)}
#dnDay figcaption{background:rgba(255,255,255,.84);border:1px solid var(--brand-border);color:var(--brand-text)}
#dnNight figcaption{background:rgba(12,32,54,.72);border:1px solid rgba(168,225,238,.34);color:#eaf6fb}
#dnNight{opacity:0}
.dn-bar{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);width:min(240px,54%);height:3px;border-radius:3px;
  background:rgba(6,60,94,.14);overflow:hidden;z-index:3}
.dn-bar i{display:block;height:100%;width:0;border-radius:3px;background:var(--ink)}
.dn-hint{position:absolute;right:16px;top:14px;z-index:3;font-size:var(--fs-xs);font-weight:700;border-radius:999px;padding:5px 13px;backdrop-filter:blur(6px);
  color:var(--dn-hint-fg,var(--sub));background:var(--dn-hint-bg,rgba(255,255,255,.7));transition:color .3s,background .3s}

/* ---------- cards ---------- */
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:28px 26px;box-shadow:var(--shadow-sm);transition:transform .3s,box-shadow .3s,border-color .3s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--brand-border)}
.card h3{font-size:var(--fs-xl);margin-top:2px}
.card .ci{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;margin-bottom:16px;
  color:var(--ci-fg);background:var(--ci-bg);border:1px solid var(--ci-line)}
.card .ci svg{width:22px;height:22px}
/* LINE 卡：不放官方 logo（商標授權＋痛點語境不宜），用 LINE 綠淡底暗示就好 */
.card .ci.ci-ln{color:#06a054;background:rgba(6,199,85,.12);border-color:rgba(6,199,85,.32)}
/* 2026-08-03 六卡定案（變體A）：icon 換水獺情境圖、內文段砍掉。
   Lucy 嫌變體對照頁留白多：圖貼右上角把原本的空白角落補掉，文字照常從左上排，卡高自然收緊。
   .ci/.ci-ln 這組 icon 樣式自此沒人用，規則留著（老師線 token 還引用 --ci-*）。 */
.card{position:relative}
.card-otter{position:absolute;top:18px;right:20px;width:72px;height:72px;object-fit:contain}
.card .was{font-size:var(--fs-sm);font-weight:700;color:var(--faint);letter-spacing:.05em;padding-right:92px}
.card h3{padding-right:92px}
.card p{font-size:var(--fs-md);margin-top:10px;flex:1}   /* 撐開，三張卡的虛線分隔才會落在同一條線上 */
/* 2026-08-10：margin-top 由 16px 改 auto。en/ja 的標題比中文長，三張卡有的一行有的兩行，
   .fix 就一張高一張低（虛線分隔線歪掉）。auto 把 .fix 推到卡片底部，卡片在 grid 裡本來就等高，
   三條虛線因此對齊；padding-top 保留原本間距，標題只有一行時也不會貼著標題。 */
.card .fix{margin-top:auto;padding-top:16px;border-top:1px dashed var(--ci-line);color:var(--ink-2);font-size:var(--fs-md)}

/* ---------- feature ---------- */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5.5vw,78px);align-items:center}
.feat + .feat{margin-top:clamp(78px,9vw,128px)}
.feat.rev .txt{order:2}
.feat-shots{display:flex;gap:16px;align-items:flex-end;justify-content:center}
.feat .phone{width:clamp(158px,21vw,226px)}
.feat .phone:nth-child(2){transform:translateY(-22px) scale(.94)}
/* .ticks 基底（打勾清單）2026-08-01 batch4 收斂進 site.css，跟 .tier .ticks 共用同一份，
   這裡不再重複定義 */

/* ---------- 深色情境卡（教課主秀，版型 A） ---------- */
.showcase{position:relative;overflow:hidden;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  background:linear-gradient(152deg,#0a2c46 0%,#12435f 52%,#0b3049 100%);
  padding:clamp(36px,4.6vw,60px) clamp(28px,4vw,56px) 0;
  display:grid;grid-template-columns:1.02fr 1fr;gap:clamp(26px,3.6vw,54px);align-items:center}
.showcase::before{content:"";position:absolute;width:58%;aspect-ratio:1;right:-10%;top:-28%;pointer-events:none;
  background:radial-gradient(circle,rgba(127,214,240,.26) 0%,rgba(6,60,94,0) 68%)}
.showcase .sc-txt{position:relative;z-index:1;padding-bottom:clamp(36px,4.6vw,60px)}
.showcase h2{color:#fff}
.showcase .eyebrow{color:var(--brand)}
.showcase .lead{color:var(--dark-fg-lead);max-width:38ch}
.showcase .ticks li{color:var(--dark-fg-tick);font-size:var(--fs-md)}
.showcase .ticks li::before{background:rgba(127,214,240,.28);border-color:var(--brand)}
.showcase .ticks li::after{border-color:#fff}
/* 手機貼著卡片下緣切掉，做出「畫面還在繼續」的感覺 */
.sc-shots{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:end;margin-bottom:-14%}
.sc-shots .phone{width:100%;max-width:206px;justify-self:center}
/* 手機擺正（Flighty 式），高低差留深度，不再斜放 */
.sc-shots .phone:nth-child(1){transform:translateY(-26px)}
.sc-shots .phone:nth-child(2){transform:translateY(14px)}
.sc-shots .phone:nth-child(3){transform:translateY(-14px)}
.sc-shots .phone:nth-child(4){transform:translateY(26px)}

/* 2026-08-21 Lucy 圈 en 版統計 chip 跑版：inline-flex 會把 <b> 前後的文字節點各當一個
   flex item，gap 8px 在逗號前也塞空隙，長句時每個 item 還各自窄欄折行。
   chip 內容是一句話不是一排元件，改回 inline-block 走正常文字流。 */
.datachip{display:inline-block;margin-top:20px;padding:8px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--brand-border);font-size:var(--fs-sm);color:var(--ink-2);font-weight:600;line-height:1.6}
.datachip b{color:var(--heading)}

/* ---------- dual ---------- */
.dual{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dual-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(18px,3vw,36px);align-items:center;margin-top:44px}
.dual-card{background:var(--bg);border:1px solid var(--brand-border);border-radius:var(--r-lg);padding:30px;box-shadow:var(--shadow-sm)}
.dual-card h3{font-size:var(--fs-xl)}
.dual-card .tag{font-size:var(--fs-xs);font-weight:800;letter-spacing:.1em;color:var(--brand-text);text-transform:uppercase}
.dual-card p{font-size:var(--fs-md)}
.dual-join{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--brand-text);font-weight:800;font-size:var(--fs-md);text-align:center}
.dual-join .dot{width:52px;height:52px;border-radius:50%;background:var(--surface);border:2px solid var(--brand);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 8px rgba(127,214,240,.18)}
.dual-join .dot img{width:32px}
.dual-note{margin-top:32px;text-align:center;font-size:var(--fs-md);color:var(--ink-2)}

/* ---------- bento ---------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:46px}
.bento .b{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:26px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;transition:box-shadow .3s;transform-style:preserve-3d}
.bento .b:hover{box-shadow:var(--shadow-md)}
.bento .b h3{font-size:var(--fs-lg)}
.bento .b p{font-size:var(--fs-md);margin-top:8px}
.b-3{grid-column:span 3}.b-2{grid-column:span 2}.b-4{grid-column:span 4}
.b-tint{background:linear-gradient(140deg,var(--brand-tint-2),var(--surface) 62%)}
.b-warm{background:linear-gradient(140deg,var(--warm),var(--surface) 68%);border-color:var(--warm-line)}
.b-shot{margin-top:20px;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;box-shadow:var(--shadow-sm)}
.b-otter{position:absolute;right:-6px;bottom:-10px;width:104px}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mq-track{display:flex;gap:18px;width:max-content;animation:mq 54s linear infinite}
.marquee:hover .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.quote{width:352px;flex:0 0 auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:24px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.quote .top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
/* #b45309 對白底的對比度 5.02，#f59e0b 只有 2.15，15px 小字門檻 4.5（2026-08-02） */
.stars{color:#b45309;font-size:var(--fs-md);letter-spacing:2px}
.src{font-size:var(--fs-xs);font-weight:700;color:var(--faint);border:1px solid var(--line);border-radius:999px;padding:2px 10px;white-space:nowrap}
.src.gp{color:var(--ink-2)}
.src.ptt{background:var(--ink);color:#fff;border-color:var(--ink)}
.src.coach{background:var(--warm);border-color:var(--warm-line);color:var(--ink)}
.src.tbd{background:var(--surface);color:var(--faint)}
.quote p{color:var(--text);font-size:var(--fs-md);margin:0;line-height:1.7}
.quote .who{margin-top:16px;font-size:var(--fs-sm);color:var(--faint);font-weight:600}

/* ---------- pricing ----------
   .dark／.tier 整組（含 who/h3/amt/desc/ticks/btn-outline/badge-flag/pay-note/tier-perk）
   2026-08-01 batch4 收斂進 site.css，跟 page-pricing.css 共用同一份，這裡不再重複定義。
   .tier .amt b.pending 是 landing 獨有（首頁有「價格待定」的待確認方案，pricing 頁都已定案），
   留在這裡。 ---------- */
/* step9：個人版與 30 天通行證金額未定，價格改寫死進 HTML 後用這條把「價格待定」壓小，
   避免文字撐爆卡片寬度（原本 JS 就是在讀不到 amount 時把字級縮到這個尺寸，這裡原樣還原）。
   新增規則，不改動 site.css 裡 .tier .amt / .tier .amt b 兩條既有規則的值。 */
.tier .amt b.pending{font-size:clamp(20px,2.4vw,26px)}

/* ---------- 首頁文章連結列（2026-08-02 trim2 第 3 刀） ----------
   三張文章卡（含一張「選題待定」佔位）本來吃掉 758px 的區塊高度，
   改成文字連結列表：兩篇真文章各一條，佔位那張刪掉，底下仍留「看全部文章」。
   刻意不重用 site.css 的 .posts／.post — 那組是 blog.html 列表頁的整卡版型，
   兩邊之後要各自演化，共用會綁死。 */
.post-links{list-style:none;margin:36px 0 0;padding:0;border-top:1px solid var(--line)}
.post-links li{border-bottom:1px solid var(--line)}
.post-links a{display:grid;grid-template-columns:92px 1fr 26px;align-items:center;
  gap:clamp(12px,2vw,22px);padding:18px 14px;text-decoration:none;color:var(--heading);
  border-radius:var(--r-sm);transition:background .25s}
.post-links a:hover{background:var(--brand-tint-2)}
.pl-tag{font-size:var(--fs-xs);font-weight:800;letter-spacing:.08em;color:var(--brand-text)}
.pl-title{font-size:clamp(16px,1.9vw,19px);font-weight:700;line-height:1.5}
/* 圓框箭頭：跟 .btn 一樣是 hover 才有動作的可點提示，不用文字「閱讀文章」再佔一行 */
.pl-go{width:26px;height:26px;border-radius:50%;border:1px solid var(--brand-border);
  position:relative;transition:transform .25s,background .25s,border-color .25s}
.pl-go::before{content:"";position:absolute;top:50%;left:50%;width:7px;height:7px;
  border-top:2px solid var(--brand-text);border-right:2px solid var(--brand-text);
  transform:translate(-70%,-50%) rotate(45deg);transition:border-color .25s}
.post-links a:hover .pl-go{transform:translateX(4px);background:var(--ink);border-color:var(--ink)}
.post-links a:hover .pl-go::before{border-color:#fff}

/* .faq 整組 2026-08-01 batch4 收斂進 site.css，跟 page-pricing.css 共用同一份。
   .final-card／.platforms 跟 download 頁的 .dl-card／.dl-plat 共用選擇器也收斂進 site.css，
   這裡只留各頁不同的 margin-bottom（otter 圖）與 margin-top（.platforms）。
   2026-08-08 原本這裡還有一條 .qr{margin-top:28px}，QR 換成 .guide-link 之後頁面上沒有元素會吃到，
   已刪。site.css 的 `.qr,.dl-qr` 共用規則不動，download 頁的 .dl-qr 還在用同一條。 */
.final-otter{margin:0 auto 10px}   /* otter-b 仰躺是橫幅，比站姿要寬 */
.platforms{margin-top:22px}
/* 2026-08-08 首頁下載卡右欄的 QR 換成連結卡。只有 index 用，download 頁的 .dl-qr 沒動
   （那頁使用者本來就在桌機看、掃碼有意義的情境還在，等 Lucy 說要不要一起換再說）。 */
.guide-link{display:flex;align-items:center;gap:12px;margin-top:24px;padding:13px 16px;
  background:var(--surface);border:1px solid var(--brand-border);border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);text-decoration:none;
  transition:transform .18s,box-shadow .18s,border-color .18s}
.guide-link:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--brand-deep)}
.guide-link .gl-ico{width:24px;height:24px;flex:none;fill:none;stroke:var(--brand-deep);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.guide-link span{display:flex;flex-direction:column;gap:2px;min-width:0;text-align:left}
.guide-link b{font-size:var(--fs-lg);color:var(--brand-text);line-height:1.35}
.guide-link small{font-size:13.5px;color:var(--sub);line-height:1.4}
.guide-link .gl-arrow{width:17px;height:17px;flex:none;margin-left:auto;fill:none;
  stroke:var(--brand-deep);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .18s}
.guide-link:hover .gl-arrow{transform:translateX(3px)}
/* 2026-08-03 下載卡兩欄版 .fc-2col 抽進 site.css 與 download 頁共用（Lucy：兩頁同款、共用管理），
   這裡不再留頁面私有規則，按鈕列用共用的 .fc-cta。 */

@media (max-width:960px){
  .strip-grid{grid-template-columns:repeat(2,1fr)}
  .cards-3,.tiers{grid-template-columns:1fr}
  .feat{grid-template-columns:1fr}
  .feat.rev .txt{order:0}
  .showcase{grid-template-columns:1fr;padding-bottom:0}
  .showcase .sc-txt{padding-bottom:8px}
  .sc-shots{margin-bottom:-10%;gap:10px}
  .sc-shots .phone{transform:none!important}
  .bento{grid-template-columns:1fr}
  .b-3,.b-2,.b-4{grid-column:span 1}
  .dual-grid{grid-template-columns:1fr}
  .phone.side{display:none}
  .feat .phone:nth-child(2){transform:none}
  /* 2026-08-02 Lucy 裁定：手機／平板還原 C1 前的頂距。桌機把 .stage 下推是為了讓分岔卡獨佔首屏，
     但窄版數字卡本來就堆在手機圖下面，沒有搶注意力的問題，那 16-27px 是純副作用。 */
  .stage{min-height:auto;margin-top:clamp(40px,5.5vw,70px)}
  .stat{position:static;margin:12px auto 0;display:inline-block}
  /* 2026-08-02 trim2 第 2 刀：窄版整區收掉。
     理由：窄版沒有 sticky，pin 區退化成直排堆疊，兩段身分文字同時顯示，
     講的是 hero 分岔卡已經講過的同一件事，吃掉 1351px 卻沒有新資訊。
     JS 端的 innerWidth>960 分支本來就不會在窄版跑動效，
     display:none 只影響版面不影響那條 scroll() 映射。 */
  .pin-lead,.pin-wrap{display:none}
  /* 以下三條在整區 display:none 之後不再生效，留著是為了把窄版的降級版型
     記在檔案裡——哪天決定把 pin 區放回窄版，直接拿掉上面那條就還原。 */
  .pin-wrap{height:auto}
  .pin-stage{position:static;height:auto}
  .pin-inner{grid-template-columns:1fr;gap:24px;text-align:center}
  .pin-copy{min-height:auto;position:static}
  .pin-copy .layer{position:static;opacity:1!important;transform:none!important;text-align:center;align-items:center;margin-bottom:24px}
  .pin-copy .layer p{margin-left:auto;margin-right:auto}
  .pin-phone{margin:0 auto}
  .persona{position:static;margin:16px auto 0;width:120px;opacity:1!important;transform:none!important}
  .pin-tabs,.pin-bar{display:none}
  .feat-shots.grid4{grid-template-columns:1fr 1fr;gap:10px}
  .feat-shots.grid4 .phone{transform:none!important}
  .feat-shots.cluster3 .phone{transform:none!important;width:31%}
  .dots{gap:14px}
  .dot-panel{min-height:132px}
  .trust{flex-direction:column;text-align:center}
  .dn{height:340px}
  .track-head{padding-right:0}
  .track-head.mirror{padding-left:0;text-align:left}
  .track-head.mirror .txt{margin-left:0}
  .track-head.mirror .lead{margin-right:auto}
  /* 文章連結列窄版：分類標籤自己一行，標題與箭頭同一行，92px 那格窄版會把標題擠掉 */
  .post-links a{grid-template-columns:1fr 26px;gap:10px;padding:16px 10px}
  .pl-tag{grid-column:1/-1;margin-bottom:2px}
  .track-anim{position:static;margin:20px 0 0;width:132px}
  .track-mark{font-size:96px;opacity:.7}
}
@media (prefers-reduced-motion:reduce){
  .mq-track{animation:none}
}

/* ============================================================
   2026-08-03 接縫固定化（Lucy：「把 section 前後的 spec 固定」）
   本段全部是新增規則，上面一行既有宣告都沒有改，整段刪掉就回到 v12 原樣。
   規格 SSOT 在 site.css 的 --pad-sec／--pad-sec-tight 註解。
   ============================================================ */

/* [1] 方案帶的接縫。.cta-band 自帶 margin:48px 0，原本 section 有 inline padding-top:0，
   那 48px 直接 margin collapse 穿出 section 變成區塊外距（實測接縫 144px，不是 96）。
   inline 拿掉之後 48px 被關回區塊內，接縫變成 96+96+48=240px，是全頁最寬的一條。
   這裡把上緣那 48px 收掉，接縫交還給 section padding，落回 192px。
   只掛 landing 的 #pricing：about／pricing／thanks 三頁的 .cta-band 還留著
   inline padding-top:0，套上去反而會把它們的接縫從 144 砍到 96。 */
#pricing .wrap > .cta-band{margin-top:0}

/* [2] pin 區上緣的空白。Lucy 圈的「strip 底下一大塊全空」實測 275px（1280x900），
   拆開來是 .pin-lead 120px ＋ .pin-stage 置中剩下的上半空隙 (100vh − pin-inner 高)/2。
   後者會跟著視窗高度長，實測 strip→pin 內容的總空白：
     1280x900=275px／1512x982=316px／1440x1100=375px
   視窗越高洞越大，這是 Lucy 看到 350-450px 的來源，也是它「沒有固定值」的原因。
   改完三種視窗都是 216px（120 緩衝＋96 上內距），不再跟視窗高度連動。
   .pin-lead 的 120px 是慣性滑保護，功能性的，不動（見本檔上方註解）。
   改的是置中：改成上緣對齊 ＋ --pad-sec 的上內距。這樣上方空隙變成固定 96px，
   不再跟視窗高度連動；下半原本被置中吃掉的空間讓給水獺／pin-tabs／pin-bar，
   那三個本來就是 bottom 絕對定位，位置一格沒動。
   ⚠️ 動畫完全沒碰：scroll() 映射 target 是 .pin-wrap（height:150vh 沒動），
   .pin-stage 是 border-box，加 padding 不會改變它 100vh 的總高，釘住行程一樣長。
   上內距用 --pad-sec 不用 --pad-sec-tight：釘住時 pin-inner 距離視窗頂端就是這個值，
   要大於 #hdr 的 64px 才不會滑到半透明的 nav 底下。
   包一層 min-width:961px：≤960 整個 pin 區是 display:none，窄版降級版型備份見上面
   @media max-width:960 的註解（其中的 padding 宣告已於 2026-08-06 間距 token 化時清除）。 */
@media (min-width:961px){
  .pin-stage{align-items:flex-start;padding-top:var(--pad-sec)}
}

/* ---------- 2026-08-03 第二輪：Lucy 圈四處「都有點近」 ----------
   四處＝pin→路線01 標題／學生線六卡→抵扣主秀／兩者都是你→路線02 標題／教練線六卡→深色主秀。
   四處的共同點：接縫上都有底色交界（pin 米色→路線01 藍、路線色塊→白底主秀、白底→路線02 米色）。
   色塊會把一條接縫從中間切成兩半，讀者只感覺得到自己這一側的那半條，
   所以同樣是 192px，落在連續底色上的（深色主秀→細節、Blog→下載）她沒圈，落在色塊交界上的就嫌近。
   結論：不開第三顆值，直接把兩顆都調大，四處連同其餘接縫一起變鬆。 */

/* [3] landing 的接縫基準單獨提高。--pad-sec 是 17 頁共用的（blog／article／pricing／
   resources／download 五支頁面 CSS 都吃它），全站改會把另外 16 頁一起撐高，
   但 Lucy 這輪只看 landing、也只說 landing 近，所以先只覆寫 landing。
   實測其他 16 頁 docH 改前改後完全相同。
   要不要推廣到全站是 Lucy 的決定：把這條搬進 site.css 的 :root 就是全站版，一行的事。
   96-120 這組是 96-120 = 舊值 80-96 各 +20%，1280 一般接縫 192→240、緊接縫 144→192。
   2026-08-03 第三輪：Lucy 說第二輪（240/192）「又鬆了」，要跟第一輪（192/144）取中間值
   ＝一般 216、緊 168。上限 120→108（108×2=216）；下限與 vw 中項按同比例（108/120=0.9）
   縮：96→86.4≈86、10vw→9vw。390 寬時 9vw=35.1px 仍小於下限 86px，會照樣夾在下限，
   390 只收斂出兩個數字（一般 172／緊 126），沒有冒出第三顆值。
   2026-08-03 第四輪：Lucy 說第三輪還要再鬆，但不到第二輪 240 那麼鬆，加半格：
   上限 108→112（112×2=224，8 的倍數）；下限與 vw 中項按同比例（112/108）縮：
   86→89.185≈89、9vw→9.3vw。390 寬時 9.3vw=36.3px 仍小於下限 89px，照樣夾在下限，
   390 只收斂出兩個數字（一般 178／緊 132）。
   2026-08-03 第五輪：Lucy 說第四輪還要再鬆，加一格 8：上限 112→116
   （116×2=232，8 的倍數）；下限與 vw 中項按同比例（116/112）縮：89→92.18≈92、
   9.3vw→9.6vw。390 寬時 9.6vw=37.4px 仍小於下限 92px，照樣夾在下限，
   390 只收斂出兩個數字（一般 184／緊 138）。
   ⚠️ Lucy 明講這是最後一階：232 已經逼近她第二輪否決過的 240，只差 8。
   下一輪如果還要再鬆，先跟 Lucy 核對是不是要推翻第二輪的判斷。 */
:root{--pad-sec:clamp(92px,9.6vw,116px)}

/* [4] pin 區交棒給路線01 的那條接縫（Lucy 圈的第 1 處）。
   它比別處窄的原因跟留白設定無關：.pin-wrap 是 100vh 全出血沉浸區，它的下緣就是色塊邊界，
   自己出不了下半條接縫（只有 .pin-bar{bottom:2.2vh} 那 20px，是 pin UI 內距不是頁面留白）。
   別處的接縫是「上一塊 padding-bottom ＋ 下一塊 padding-top」兩份湊出來的，這裡只有一份，
   所以視覺上剛好是別人的一半。修法：接在全出血區塊後面的 section，上緣自己吃滿兩份。
   量法也跟著改：這條要從 .pin-wrap 的色塊邊界量到 h2，跟其他一般接縫同值——
   第二輪是 240，第三輪 --pad-sec 收到 108 之後自動跟著變 216，第四輪收到 112 之後
   自動跟著變 224，第五輪收到 116 之後自動跟著變 232，這條規則本身沒改。 */
.pin-wrap + section{padding-top:calc(var(--pad-sec) * 2)}

/* 2026-08-03 收斂 index.html 殘留的兩處 inline 寫死間距，數值原樣照搬，不調整。
   跟其他頁面的 inline padding-top:0（→ site.css 的 .sec-flush）是不同性質：
   這兩處是區塊內部局部間距，不是 section 頂距，所以不掛共用工具 class，
   各自開一條有語意的 class，放在對應區塊規則旁邊。 */
/* TESTIMONIALS 標題區（.wrap.center）跟下面的 marquee 之間的間距。 */
.testi-head{margin-bottom:38px}
/* BLOG 區「看全部文章」按鈕跟上面文章連結列（.post-links）之間的間距。 */
.post-links-cta{margin-top:32px}

/* ============================================================
   2026-08-09 Dark mode landing 專屬覆寫。
   上面的 #fff→var(--surface)／var(--ink)→var(--heading) 是「跟著主題翻轉」的
   token 代換，light 模式零視覺變化；以下這批是「翻轉規則本身」的例外，
   兩種情況都要單獨處理：
   (1) 半透明玻璃卡（.stat／.push-mock）：rgba(255,255,255,.86/.92) 沒辦法用
       var() 直接代換 alpha 通道，只能整條覆寫成對應深色 rgba。
   (2) 固定不隨主題變的「情境插畫」（.pin-wrap 日夜漸層、.dn 白天黑夜滑桿、
       #dnDay figcaption）：這些不是站台介面色，是demo本身模擬的情境色，
       跟著全站 --brand-text／--ink-2 自動翻轉反而會拆散配色，要單獨釘住。
   (3) 裸色狀態字（.stat.up .v／.stars／.amb-* 的 --amb fallback）：沒有自己的
       淺色底可以配，直接站在深底上，亮度不夠要單獨調亮。
   ============================================================ */
:root[data-theme="dark"] .stat{background:rgba(19,49,74,.86)}
/* .stat .v 用固定 primitive --ink（見 :root 區塊，永遠深藍 #063c5e），跟很多呼叫點一樣
   刻意不隨主題變；但 .stat 這個容器背景剛好是上面那條會變深的 rgba(19,49,74,.86)，
   兩者疊在一起＝深藍字疊深藍底，數字看不見。這裡單獨把 .stat .v 換成會翻轉的
   --heading（dark 模式變 #F2F7FA），不動 --ink 本身，其他吃 --ink 的地方不受影響。 */
:root[data-theme="dark"] .stat .v{color:var(--heading)}
:root[data-theme="dark"] .push-mock{background:rgba(19,49,74,.92)}
/* .card{background:var(--card)}（固定 primitive，永遠白）＋ .card h3 吃全站 h1,h2,h3{color:var(--heading)}
   （會翻轉成近白 #F2F7FA）＝ dark 模式白底白字。「現在的做法」舊做法卡（.card.rv）
   刻意保留「淡出感」（.was 用 --faint），但整張卡不能繼續釘死白色，改跟頁面本身的
   深色 surface 走，讓 --heading／--faint／--ink-2（.card .fix 用）這些本來就會翻轉的
   語意 token 接手撐起可讀性；.was 對 --surface 的對比沿用 site.css 已驗證過的
   --faint／--surface 配對（≈5.1:1），不需要另外調值。只 scope 在 .card.rv，
   其他吃 --card 固定白底的呼叫點不受影響。 */
:root[data-theme="dark"] .card.rv{background:var(--surface)}
/* .pin-wrap 全出血日夜漸層：跟 --warm 一樣「刻意不隨主題變」的 --warm 若整條原樣搬進 dark，
   漸層尾端會炸出一塊刺眼米白，改用同色相的低透明度版本，維持「冷青→暖金」的路線寓意但不刺眼。 */
:root[data-theme="dark"] .pin-wrap{background:linear-gradient(180deg,var(--bg),rgba(127,214,240,.14) 42%,rgba(232,201,120,.16) 100%)}
:root[data-theme="dark"] .pin-mid{background:rgba(19,49,74,.82)}
:root[data-theme="dark"] .pin-tab{background:rgba(19,49,74,.86)}
/* #dnDay figcaption 是「白天情境」插畫本身的字卡，底色刻意不隨站台主題變（永遠是亮底），
   文字色若跟著全站 --brand-text 翻轉會變成淺字疊淺底，這裡釘回原本 light 模式的值。 */
:root[data-theme="dark"] #dnDay figcaption{color:#256d84}
:root[data-theme="dark"] .stat.up .v{color:#F87171}
:root[data-theme="dark"] .stars{color:#FBBF24}
/* .amb-glow／.amb-num b／.amb-note 的 --amb 不在這裡覆寫：那顆 custom property 是
   zh/index.html 內嵌 JS（剩餘提醒 demo）動態即時 set 在 .feat 上、依 OK/WARN/GONE
   三態切換的，若在這裡對同一批元素直接宣告 --amb 會蓋掉 JS 寫的值、把 demo 三色鎖死
   成同一色，滑桿互動就壞了。dark 模式的三色亮版本（OK_DARK/WARN_DARK/GONE_DARK）
   直接在 index.html 的 paint() 裡讀 <html data-theme> 現場挑，見該檔案內註解。 */
/* .b-warm（bento 格暖色變體，目前 22 頁 HTML 沒有實際掛用，但規則保留）背景是
   linear-gradient(140deg, var(--warm), var(--surface) 68%)，跟 .subscribe／.warm
   同一種「暖色固定錨點＋會變暗的另一端」地雷，先補齊避免以後掛上就直接踩坑。 */
:root[data-theme="dark"] .b-warm{background:linear-gradient(140deg,rgba(232,201,120,.16),var(--surface) 68%)}