:root{
  --paper:#F7F3EA; --paper-2:#FFFDF8; --ink:#15283F; --ink-2:#123454;
  --muted:#6E7C8E; --gold:#C98B14; --gold-lt:#E8A52F; --cream:#FEDF8F;
  --rule:#DFD5C2; --rule-2:#EDE6D9;
  --up:#2E6FD4; --down:#C8453A; --ok:#2E8B57;
  --serif:"Noto Serif TC",Georgia,serif;
  --sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Grid item 預設 min-width:auto —— 欄寬會被裡面圖片的原始寬度撐開,
   在手機造成整頁橫向溢出。所有格線子項一律解開這個下限。 */
.hero-in>*,.sec-grid>*,.story-grid>*,.g3>*,.g4>*,.lanes>*,.teachers>*,
.plans>*,.tfout>*,.calc-body>*,.panelrow>*,.stats>*{min-width:0}
.fig img,.fig svg,.story-fig svg,.panelrow img{max-width:100%;height:auto}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.9;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--serif);line-height:1.32;font-weight:900}
p{margin:0}
.wrap{max-width:1120px;margin:0 auto;padding:0 32px}

/* ---- 風格切換列（提案期間用，上線可刪） ---- */
.switch{position:fixed;left:0;right:0;top:0;z-index:99;background:var(--ink);color:#fff;font-size:15px;letter-spacing:.08em}
.switch .in{max-width:1120px;margin:0 auto;padding:9px 32px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.switch b{font-weight:700;margin-right:10px;opacity:.6}
.switch a{padding:4px 12px;border:1px solid rgba(255,255,255,.28);border-radius:2px;transition:.15s}
.switch a:hover{background:rgba(255,255,255,.12)}
.switch a.on{background:var(--gold-lt);border-color:var(--gold-lt);color:#231303;font-weight:700}
.switch .build{margin-left:auto;opacity:.55;font-size:14px;letter-spacing:.04em}

/* ---- header ---- */
.hdr{border-bottom:1px solid var(--rule);background:rgba(247,243,234,.94);backdrop-filter:blur(8px);position:sticky;top:36px;z-index:40}
.hdr-in{display:flex;align-items:center;gap:32px;height:74px}
.hdr img{height:29px}
.nav{margin-left:auto;display:flex;gap:28px;font-size:16.5px;color:var(--muted)}
.nav a{padding-bottom:2px;border-bottom:1px solid transparent}
.nav a:hover{color:var(--ink);border-bottom-color:var(--gold)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 26px;font-size:16.5px;font-weight:700;border-radius:2px;transition:.18s;cursor:pointer;font-family:var(--sans)}
.btn-solid{background:var(--ink);color:#fff;border:1px solid var(--ink)}
.btn-solid:hover{background:var(--gold-lt);border-color:var(--gold-lt);color:var(--ink)}
.btn-line{border:1px solid var(--ink);color:var(--ink);background:transparent}
.btn-line:hover{background:var(--ink);color:#fff}
.hdr .btn{padding:10px 20px;font-size:16px}
.navtoggle{display:none;background:none;border:1px solid var(--rule);color:var(--ink);padding:6px 11px;font-size:18.5px;line-height:1;cursor:pointer;margin-left:auto}

/* ---- section scaffolding ---- */
.sec{padding:92px 0;border-top:1px solid var(--rule)}
.sec-grid{display:grid;grid-template-columns:170px 1fr;gap:54px;align-items:start}
.rail{position:sticky;top:150px}
.rail .no{font-family:var(--serif);font-size:44.5px;font-weight:900;color:var(--gold-lt);line-height:1}
.rail .lb{margin-top:8px;font-size:14.5px;letter-spacing:.22em;color:var(--muted);text-transform:uppercase}
h2{font-size:clamp(26.5px,3.3vw,36px)}
h2 em{font-style:normal;color:var(--gold)}
.lead{margin-top:20px;color:var(--muted);font-size:18.5px;max-width:660px}
.fine{font-size:15.5px;color:var(--muted);line-height:1.8}

/* ---- hero ---- */
.hero{padding:66px 0 82px}
.hero .wrap{max-width:1300px}
.hero-in{display:grid;grid-template-columns:.88fr 1.22fr;gap:52px;align-items:center}
.kicker{display:flex;align-items:center;gap:14px;font-size:14.5px;letter-spacing:.24em;color:var(--muted);margin-bottom:26px}
.kicker::after{content:"";flex:1;height:1px;background:var(--rule)}
h1{font-size:clamp(30px,4.9vw,45.5px);letter-spacing:.01em}
h1 em{font-style:normal;color:var(--gold);border-bottom:3px solid var(--gold-lt)}
.sub{margin-top:26px;font-size:19.5px;line-height:1.85;max-width:520px}
.pains{margin:32px 0 0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.pains li{padding:12px 0 12px 26px;border-bottom:1px solid var(--rule-2);font-size:17.5px;color:var(--muted);position:relative}
.pains li::before{content:"—";position:absolute;left:0;color:var(--down)}
.desc{margin-top:24px;font-size:17.5px;color:var(--muted);max-width:520px}
.desc b{color:var(--ink);font-weight:700}
.cta{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
.hero-note{margin-top:24px;font-size:15px;color:var(--muted);max-width:520px;line-height:1.75}

figure{margin:0}
.fig{background:var(--paper-2);border:1px solid var(--rule);padding:16px}
figcaption{margin-top:11px;font-size:15px;color:var(--muted);display:flex;gap:10px;align-items:baseline}
figcaption b{font-family:var(--serif);color:var(--ink);font-weight:700;letter-spacing:.06em}
.keys{display:flex;gap:15px;flex-wrap:wrap;margin-top:9px;font-size:14.5px;color:var(--muted)}
.keys span{display:inline-flex;align-items:center;gap:6px}
.keys i{width:12px;height:8px;display:inline-block}

/* ---- rows / cycle ---- */
.rows{border-top:1px solid var(--rule);margin-top:36px}
.row{display:grid;grid-template-columns:64px 1fr;gap:24px;padding:24px 0;border-bottom:1px solid var(--rule-2);align-items:start}
.row .n{font-family:var(--serif);font-size:30.5px;font-weight:900;color:var(--gold-lt);line-height:1}
.row h3{font-size:21px;margin-bottom:6px}
.row p{color:var(--muted);font-size:17.5px}
.row p b{color:var(--ink);font-weight:700}
.note{margin-top:28px;padding:20px 24px;background:var(--paper-2);border-left:3px solid var(--gold-lt);font-size:18px}
.note b{color:var(--gold)}

/* ================= 1. 滾動敘事圖表 ================= */
.story{position:relative}
/* 敘事區用更寬的容器,把圖放到最大 */
.story .wrap{max-width:1400px}
.story .sec-grid{grid-template-columns:110px 1fr;gap:34px}
.story-grid{display:grid;grid-template-columns:.72fr 1.62fr;gap:44px;align-items:start;margin-top:40px}
.story-fig{position:sticky;top:130px}
.story-steps{display:grid}
.st{min-height:78vh;display:flex;flex-direction:column;justify-content:center;padding:20px 0;opacity:.32;transition:opacity .45s ease}
.st.on{opacity:1}
.st .tagno{font-family:var(--serif);font-size:15.5px;letter-spacing:.2em;color:var(--gold);margin-bottom:10px}
.st h3{font-size:25px;margin-bottom:12px}
.st p{color:var(--muted);font-size:18px}
.st .kv{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.st .kv span{font-size:15px;border:1px solid var(--rule);padding:4px 11px;color:var(--muted);background:var(--paper-2)}
.progress{display:flex;gap:6px;margin-bottom:14px}
.progress i{height:3px;flex:1;background:var(--rule);transition:background .35s}
.progress i.on{background:var(--gold-lt)}
/* 圖層：預設全顯示，未到的步驟隱藏 */
.story-svg .lyr{transition:opacity .55s ease}
.story-svg[data-step="1"] .l2,.story-svg[data-step="1"] .l3,.story-svg[data-step="1"] .l4,.story-svg[data-step="1"] .l5,
.story-svg[data-step="2"] .l3,.story-svg[data-step="2"] .l4,.story-svg[data-step="2"] .l5,
.story-svg[data-step="3"] .l4,.story-svg[data-step="3"] .l5,
.story-svg[data-step="4"] .l5{opacity:0}
.story-svg[data-step="5"] .sl-low{opacity:0}
.story-svg:not([data-step="5"]) .sl-high{opacity:0}

/* ================= 2. 週期切換器 ================= */
.tfbar{display:flex;gap:0;border:1px solid var(--ink);width:fit-content;margin-top:32px}
.tfbar button{background:transparent;border:none;border-right:1px solid var(--ink);padding:11px 24px;font-size:17.5px;font-weight:700;color:var(--ink);cursor:pointer;font-family:var(--sans);transition:.15s}
.tfbar button:last-child{border-right:none}
.tfbar button.on{background:var(--ink);color:#fff}
.tfbar button:hover:not(.on){background:var(--rule-2)}
.tfout{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:26px;border:1px solid var(--rule)}
.tfout div{padding:22px 24px;border-right:1px solid var(--rule);background:var(--paper-2)}
.tfout div:last-child{border-right:none}
.tfout .k{font-size:14.5px;letter-spacing:.16em;color:var(--muted)}
.tfout .v{font-family:var(--serif);font-size:29px;font-weight:900;margin-top:6px;line-height:1.1}
.tfout .v small{font-size:16.5px;font-family:var(--sans);color:var(--muted);margin-left:6px;font-weight:400}
.tfmeter{margin-top:20px}
.tfmeter .bar{height:12px;background:var(--rule-2);position:relative;overflow:hidden}
.tfmeter .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--gold-lt);transition:width .5s cubic-bezier(.2,.7,.3,1)}
.tfmeter .bar i.win{background:repeating-linear-gradient(45deg,var(--rule),var(--rule) 5px,var(--rule-2) 5px,var(--rule-2) 10px)}
.tfmeter .lbl{display:flex;justify-content:space-between;font-size:15px;color:var(--muted);margin-top:8px}

/* ================= 3. 盈虧比計算器 ================= */
.calc{border:1px solid var(--ink);background:var(--paper-2)}
.calc-hd{display:flex;align-items:center;gap:14px;padding:16px 24px;border-bottom:1px solid var(--rule);flex-wrap:wrap}
.calc-hd h3{font-size:20.5px}
.dirtoggle{display:flex;border:1px solid var(--ink);margin-left:auto}
.dirtoggle button{background:transparent;border:none;padding:7px 18px;font-size:16px;font-weight:700;cursor:pointer;color:var(--ink);font-family:var(--sans)}
.dirtoggle button.on{color:#fff}
.dirtoggle button[data-dir="long"].on{background:var(--up)}
.dirtoggle button[data-dir="short"].on{background:var(--down)}
.calc-body{display:grid;grid-template-columns:1fr 1fr;gap:0}
.calc-in{padding:26px 24px;border-right:1px solid var(--rule)}
.fld{margin-bottom:18px}
.fld label{display:block;font-size:15px;letter-spacing:.06em;color:var(--muted);margin-bottom:6px}
.fld input{width:100%;padding:11px 14px;border:1px solid var(--rule);background:var(--paper);font-family:var(--mono);font-size:18.5px;color:var(--ink);border-radius:0}
.fld input:focus{outline:none;border-color:var(--gold-lt);background:#fff}
.calc-out{padding:26px 24px}
.rr{font-family:var(--serif);font-size:46px;font-weight:900;line-height:1}
.rr small{font-size:18.5px;font-family:var(--sans);color:var(--muted);font-weight:400;margin-left:6px}
.verdict{margin-top:12px;display:inline-block;padding:6px 14px;font-size:16px;font-weight:700;border:1px solid}
.v-no{color:var(--down);border-color:var(--down);background:rgba(200,69,58,.07)}
.v-mid{color:var(--gold);border-color:var(--gold-lt);background:rgba(232,165,47,.1)}
.v-ok{color:var(--ok);border-color:var(--ok);background:rgba(46,139,87,.08)}
.rrbar{display:flex;height:26px;margin-top:20px;border:1px solid var(--rule);overflow:hidden}
.rrbar i{display:block;transition:width .35s ease}
.rrbar .risk{background:var(--down)}
.rrbar .rew{background:var(--gold-lt)}
.outrows{margin-top:18px;border-top:1px solid var(--rule-2)}
.outrows div{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--rule-2);font-size:16.5px;color:var(--muted)}
.outrows b{font-family:var(--mono);color:var(--ink);font-size:17.5px}
.calc-note{padding:14px 24px;border-top:1px solid var(--rule);font-size:15px;color:var(--muted);background:var(--paper)}

/* 儀表板圖 + 說明並排 */
.panelrow{display:grid;grid-template-columns:170px 1fr;gap:26px;align-items:start;margin-top:34px}
.panelrow img{width:100%;display:block;border:1px solid var(--rule);background:var(--paper-2);padding:8px}
.panelrow .g3{grid-template-columns:1fr;border:none}
.panelrow .g3 > div{border-right:none;border-bottom:1px solid var(--rule);background:transparent;padding:16px 0}
.panelrow .g3 > div:last-child{border-bottom:none}

/* ---- generic grids ---- */
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--rule);margin-top:34px}
.g3 > div{padding:26px 24px;border-right:1px solid var(--rule);background:var(--paper-2)}
.g3 > div:last-child{border-right:none}
.g3 h3{font-size:20.5px;margin-bottom:8px}
.g3 p{font-size:16.5px;color:var(--muted)}
.g4{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--rule);margin-top:32px}
.g4 > div{padding:24px 20px;border-right:1px solid var(--rule);background:var(--paper-2);text-align:center}
.g4 > div:last-child{border-right:none}
.pill{display:inline-block;padding:6px 16px;color:#fff;font-weight:700;font-size:17.5px;border-radius:7px;position:relative;margin-bottom:14px}
.pill::after{content:"";position:absolute;left:50%;margin-left:-5px;border:5px solid transparent}
.pill-up::after{top:-10px;border-bottom-color:inherit}
.pill-down::after{bottom:-10px;border-top-color:inherit}
.p-buy{background:#3D8BF5;border-color:#3D8BF5}
.p-sell{background:#EE5A6F;border-color:#EE5A6F}
.p-dark{background:#3F4A57;border-color:#3F4A57}
.qual{font-size:14.5px;letter-spacing:.1em;color:var(--gold);display:block;margin-bottom:6px}
.g4 h3{font-size:18px;margin-bottom:6px}
.g4 p{font-size:16px;color:var(--muted);text-align:left}

.checklist{list-style:none;padding:0;margin:0;border-top:1px solid var(--rule)}
.checklist li{padding:14px 0 14px 30px;border-bottom:1px solid var(--rule-2);position:relative;font-size:17.5px;color:var(--muted)}
.checklist li::before{content:"✓";position:absolute;left:0;color:var(--gold);font-weight:900}
.checklist b{color:var(--ink)}

.lanes{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--rule);margin-top:34px}
.lane{padding:30px 28px;border-right:1px solid var(--rule);background:var(--paper-2)}
.lane:last-child{border-right:none}
.lane .st{font-size:14.5px;letter-spacing:.14em;color:var(--gold);min-height:0;opacity:1;display:block;padding:0}
.lane h3{font-size:23.5px;margin:8px 0 10px}
.lane p{font-size:17.5px;color:var(--muted)}
.lane ul{list-style:none;padding:0;margin:16px 0 0}
.lane li{padding:6px 0 6px 18px;position:relative;font-size:16.5px;color:var(--muted)}
.lane li::before{content:"·";position:absolute;left:4px;color:var(--gold)}

.forbid{list-style:none;padding:0;margin:0;border-top:1px solid var(--rule)}
.forbid li{padding:12px 0 12px 28px;border-bottom:1px solid var(--rule-2);position:relative;font-size:16.5px;color:var(--muted)}
.forbid li::before{content:"✕";position:absolute;left:0;color:var(--down);font-weight:900}
.psy{border-top:1px solid var(--rule)}
.psy div{padding:16px 0;border-bottom:1px solid var(--rule-2)}
.psy h4{font-size:18px;margin-bottom:4px}
.psy p{font-size:16.5px;color:var(--muted)}

/* teachers */
.teachers{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--rule);margin-top:34px}
.tc{padding:30px 28px;border-right:1px solid var(--rule);background:var(--paper-2)}
.tc:last-child{border-right:none}
.tc .role{font-size:14.5px;letter-spacing:.12em;color:var(--gold);margin-bottom:8px}
.tc h3{font-size:24.5px;margin-bottom:12px}
.tc p{font-size:17.5px;color:var(--muted)}
.tc p b{color:var(--ink)}
.rec{margin-top:20px;border-top:1px solid var(--rule)}
.rec h4{font-size:14.5px;letter-spacing:.16em;color:var(--gold);padding:14px 0 10px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.stats div{text-align:center;padding:10px 6px;background:var(--paper)}
.stats .n{display:block;font-family:var(--serif);font-size:20.5px;font-weight:900}
.stats .c{display:block;font-size:14px;color:var(--muted);margin-top:2px}
.firms{display:flex;flex-wrap:wrap;gap:7px}
.firm{font-size:15px;font-weight:700;padding:4px 10px;border:1px solid var(--rule);color:var(--ink)}
.links{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.linkbtn{font-size:15.5px;font-weight:700;padding:7px 14px;border:1px solid var(--rule);color:var(--muted)}
.linkbtn:hover{border-color:var(--ink);color:var(--ink)}

/* plans */
.plans{display:grid;grid-template-columns:repeat(3,1fr);margin-top:34px;border:1px solid var(--rule)}
.plan{padding:32px 28px;border-right:1px solid var(--rule);background:var(--paper-2);display:flex;flex-direction:column}
.plan:last-child{border-right:none}
.plan.hot{background:#FFF8E8;border-top:3px solid var(--gold-lt)}
.plan .stp{font-size:14.5px;letter-spacing:.16em;color:var(--muted)}
.plan h3{font-size:22.5px;margin:9px 0 12px}
.plan .price{font-family:var(--serif);font-size:35px;font-weight:900;line-height:1}
.plan .price small{font-size:15.5px;font-family:var(--sans);color:var(--muted);margin-left:8px;font-weight:400}
.plan ul{list-style:none;padding:0;margin:18px 0 0;font-size:16.5px;color:var(--muted);flex:1}
.plan li{padding:6px 0 6px 17px;position:relative}
.plan li::before{content:"·";position:absolute;left:4px;color:var(--gold)}
.plan .act{margin-top:22px}
.plan .hint{display:block;margin-top:10px;font-size:14.5px;color:var(--muted)}
.warn{margin-top:26px;padding:20px 24px;border:1px solid var(--down);background:rgba(200,69,58,.05);font-size:16.5px}
.warn b{color:var(--down)}

footer{background:var(--ink);color:#D8E0EA;padding:62px 0 42px}
footer img{height:36px}
.f-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;align-items:flex-end;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.14)}
.f-nav{display:flex;gap:26px;font-size:16px;color:#9FB2C6;flex-wrap:wrap}
.f-nav a:hover{color:var(--cream)}
.tagline{font-family:var(--serif);font-size:25px;font-weight:900;color:var(--cream);letter-spacing:.1em}
.disc{margin-top:28px;font-size:15px;line-height:1.85;color:#8FA0B4;max-width:860px}
.copy{margin-top:22px;font-size:15px;color:#6F8299}

@media (max-width:1000px){
  .hero-in,.sec-grid,.story-grid{grid-template-columns:1fr;gap:36px}
  .rail{position:static;display:flex;align-items:baseline;gap:14px}
  .rail .lb{margin-top:0}
  .nav{display:none}
  .navtoggle{display:block}
  .nav.open{display:flex;position:absolute;left:0;right:0;top:74px;flex-direction:column;gap:0;background:var(--paper);border-bottom:1px solid var(--rule);padding:6px 32px 16px}
  .nav.open a{padding:11px 0;border-bottom:1px solid var(--rule-2)}
  .story-fig{position:sticky;top:110px;z-index:5;background:var(--paper);padding-bottom:10px}
  .st{min-height:auto;padding:22px 0;opacity:1;border-bottom:1px solid var(--rule-2)}
  .g3,.g4,.lanes,.teachers,.plans,.tfout,.calc-body,.panelrow{grid-template-columns:1fr}
  .panelrow img{max-width:200px}
  .g3 > div,.g4 > div,.lane,.tc,.plan,.tfout div,.calc-in{border-right:none;border-bottom:1px solid var(--rule)}
}
/* ---- 手機:換直式圖表、圖表滿版、觸控尺寸 ---- */
@media (max-width:760px){
  /* 提案切換列在手機會折成兩行,若維持 fixed 會蓋住標頭 —— 改成隨頁面捲走 */
  .switch{position:static}
  .hdr{top:0}
  .nav.open{padding:6px 18px 16px}
  .wrap,.hero .wrap,.story .wrap{padding:0 18px}
  .story .sec-grid{grid-template-columns:1fr;gap:20px}
  /* 手機:圖釘在畫面上方(標頭底下),文字從下面滾上來 —— 捲到哪一步,圖就變到哪一步 */
  .story-fig{
    /* bottom 必須歸零 —— fixed 元素同時有 top 與 bottom 會被上下撐開;
       top 74px = 標頭高度,剛好接在標頭底下,不會互相遮 */
    position:fixed;top:74px;bottom:auto;left:0;right:0;z-index:30;
    margin:0;padding:8px 0 10px;
    background:var(--paper);border-bottom:1px solid var(--rule);
    box-shadow:0 10px 26px rgba(21,40,63,.09);
    /* 收起來時往上收,要多推一個標頭高度才不會露出下緣 */
    transform:translateY(calc(-100% - 74px));transition:transform .32s cubic-bezier(.2,.7,.3,1);
    pointer-events:none;
  }
  .story.pinned .story-fig{transform:none}
  .story-fig .fig{border:none;padding:0}
  /* 跟桌機同一張圖,整張等比例縮到螢幕寬 */
  .story-fig svg{display:block;width:100%;height:auto;max-height:none}
  .story-fig figcaption{display:none}          /* 釘住的空間有限,圖說省下來給文字 */
  .story-grid{gap:0}
  /* 圖釘在上方 —— 第一步先墊一段,圖落下來時不會直接壓在標題上 */
  .story-steps{padding-top:12vh}
  /* 每一步之間留一個畫面高度的距離,捲動時一次只讀一步 */
  .st{padding:18px 0 34vh}
  .st:last-child{padding-bottom:36vh}
  .st h3{font-size:22.5px}
  .st p{font-size:17.5px}
  .story-steps{padding-bottom:0}
  /* 週期切換:四顆按鈕平均分寬,不再溢出 */
  .tfbar{width:100%}
  .tfbar button{flex:1;padding:12px 4px;font-size:16.5px}
  .tfout .v{font-size:25.5px}
  .calc-hd{gap:10px}
  .dirtoggle{margin-left:0;width:100%}
  .dirtoggle button{flex:1}
  .fld input{font-size:18px}          /* iOS 低於 16px 會自動放大頁面 */
  .btn{padding:14px 22px}
  .switch .in{padding:8px 18px;gap:5px}
  .switch a{padding:4px 9px;font-size:14px}
}
@media (max-width:600px){
  .sec{padding:64px 0}
  .stats{grid-template-columns:1fr}
  .cta .btn{flex:1 1 100%}
  h1{font-size:28px}
  .rr{font-size:38.5px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  html{scroll-behavior:auto}
  .st{opacity:1}
  .story-svg .lyr{opacity:1!important}
}

/* course */
.course{display:grid;grid-template-columns:1.55fr 1fr;gap:26px;margin-top:34px;align-items:start}
.course>*{min-width:0}
.player{position:relative;aspect-ratio:16/9;background:#0B1220;border:1px solid var(--rule);overflow:hidden}
.player img,.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.player img{object-fit:cover}
.player .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;border:0;background:var(--gold-lt);cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:.18s}
.player .play span{display:block;margin-left:6px;width:0;height:0;border-left:24px solid var(--ink);border-top:14px solid transparent;border-bottom:14px solid transparent}
.player .play:hover{transform:translate(-50%,-50%) scale(1.07);background:#fff}
.player.playing .play,.player.playing img{display:none}
.now{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 14px;margin-top:14px;font-size:17.5px}
.now .nowk{font-size:14.5px;letter-spacing:.16em;color:var(--gold)}
.now b{font-family:var(--serif);font-size:19.5px}
.now a{margin-left:auto;font-size:15.5px;color:var(--muted);border-bottom:1px solid var(--rule)}
.now a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.eps{border:1px solid var(--rule);background:var(--paper-2)}
.eps h4{font-size:14.5px;letter-spacing:.16em;color:var(--gold);padding:14px 16px 8px;background:var(--paper);border-bottom:1px solid var(--rule)}
.eps h4+.ep{border-top:0}
.ep{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:baseline;width:100%;padding:11px 16px 11px 13px;border:0;border-top:1px solid var(--rule-2);border-left:3px solid transparent;background:none;text-align:left;cursor:pointer;font-family:var(--sans);color:var(--ink);line-height:1.5}
.ep:hover{background:var(--paper)}
.ep.on{background:#FFF8E8;border-left-color:var(--gold-lt)}
.ep .k{font-family:var(--mono);font-size:15px;color:var(--muted)}
.ep .t{font-size:16.5px;font-weight:700}
.ep .d{font-size:15px;color:var(--muted);white-space:nowrap}
.ep-link{display:inline-block;margin-top:12px;font-size:15.5px;font-weight:700;color:var(--gold);border-bottom:1px solid transparent}
.ep-link:hover{border-bottom-color:var(--gold)}
@media (max-width:900px){.course{grid-template-columns:1fr}}

/* ---- v2 追加 ---- */
/* 定案後拿掉頂端的版本切換列,表頭直接貼齊最上面 */
.hdr{top:0}
.nav.open{top:74px}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--gold);cursor:default}
.nav.open a[aria-current="page"]{border-bottom:1px solid var(--rule-2)}
.std{margin-top:14px;border-top:1px solid var(--rule)}
.std div{display:grid;grid-template-columns:62px 1fr;gap:12px;padding:9px 0;border-bottom:1px solid var(--rule-2);font-size:17.5px;line-height:1.75}
.std b{font-size:14.5px;letter-spacing:.14em;color:var(--gold);padding-top:5px;font-weight:700}
.std span{color:var(--muted)}
.std span em{font-style:normal;color:var(--ink);font-weight:700}
.st .ep-link{margin-top:14px}
.hero .qs{margin:30px 0 0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.hero .qs li{padding:11px 0 11px 30px;border-bottom:1px solid var(--rule-2);font-size:18.5px;font-weight:700;position:relative}
.hero .qs li::before{content:"?";position:absolute;left:4px;color:var(--gold);font-family:var(--serif);font-weight:900}
.f-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;padding:34px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.f-cols h4{font-size:14.5px;letter-spacing:.18em;color:var(--cream);margin-bottom:12px}
.f-cols a{display:block;font-size:16px;color:#9FB2C6;padding:4px 0}
.f-cols a:hover{color:var(--cream)}
.f-top{padding-bottom:0;border-bottom:none}
.course-cta{margin-top:28px}
.pagehead{padding:70px 0 0}
.pagehead .kicker{margin-bottom:14px}
.pagehead h1{font-size:33.5px}
.pagehead .lead{margin-top:14px}
@media (max-width:760px){.f-cols{grid-template-columns:1fr;gap:18px}.std div{grid-template-columns:1fr;gap:2px}.std b{padding-top:0}.pagehead h1{font-size:26.5px}}

/* ---- 主視覺:單欄文字導向(圖拿掉,五部曲區才逐步展示) ---- */
.hero{padding:74px 0 86px}
.hero-one{max-width:1000px}
.hero-one h1{font-size:clamp(32px,5.4vw,50px)}
.hero-one .sub{max-width:640px;font-size:20.5px}
.qs-lead{margin-top:40px;font-size:15px;letter-spacing:.16em;color:var(--gold);font-weight:700}
.qcards{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--rule);margin-top:12px}
.qcards>div{padding:24px 26px;border-right:1px solid var(--rule);background:var(--paper-2);min-width:0}
.qcards>div:last-child{border-right:none}
.qcards .qn{font-family:var(--serif);font-size:15.5px;letter-spacing:.2em;color:var(--gold-lt);font-weight:900}
.qcards h3{font-size:22px;margin:8px 0 6px}
.qcards p{font-size:16.5px;color:var(--muted)}
.hero-one .cta{margin-top:34px}
.hero-one .hero-note{max-width:640px}
@media (max-width:760px){
  .qcards{grid-template-columns:1fr}
  .qcards>div{border-right:none;border-bottom:1px solid var(--rule)}
  .qcards>div:last-child{border-bottom:none}
  .hero-one h1{font-size:30.5px}
}

/* ---- 字級放大與版面收斂(2026-10-09) ----
   上面所有 px 字級已整體 ×1.12;這裡是個別覆寫。 */
body{font-size:18px;line-height:1.85}
.wrap{max-width:1180px}
.hdr-in{height:96px;gap:36px}
.hdr img{height:48px}
.nav{gap:36px;font-size:19.5px;font-weight:500;color:var(--ink-2)}
.nav a{padding-bottom:3px}
.hdr .btn{padding:13px 26px;font-size:17.5px}
.nav.open{top:96px}
@media (max-width:760px){.hdr-in{height:84px;gap:14px}.hdr img{height:40px}.nav.open{top:84px}.hdr .btn{white-space:nowrap;padding:10px 14px;font-size:15.5px}}
/* 五部曲區原本比別區寬(1400)、側欄也窄(110),看起來像另一個版面;改成跟其他區一樣 */
.story .wrap{max-width:1180px}
.story .sec-grid{grid-template-columns:170px 1fr;gap:54px}
.story-grid{grid-template-columns:1fr 1.15fr;gap:36px}
.std div{grid-template-columns:58px 1fr}
.story-fig{top:110px}
@media (max-width:1000px){.story .sec-grid{grid-template-columns:1fr;gap:36px}}
.plan .price small{display:block;margin:6px 0 0}

/* ---- 拿掉左側編號欄(2026-10-09 使用者:版面可以寬一點) ---- */
.sec-grid,.story .sec-grid{grid-template-columns:1fr;gap:0}
.lead{max-width:780px}
.story-grid{grid-template-columns:1fr 1.2fr;gap:44px}
/* 主視覺與各區同寬、同一條左邊線(2026-10-09) */
.hero .wrap{max-width:1180px}
.hero-one{max-width:none}

/* ---- 系統功能頁:圖上每一個物件(2026-10-09) ---- */
.objh{font-size:22px;margin:44px 0 0}
.objgrp{font-size:14.5px;letter-spacing:.16em;color:var(--gold);font-weight:700;margin:34px 0 14px;padding-bottom:8px;border-bottom:1px solid var(--rule)}
.objs{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.obj{border:1px solid var(--rule);background:var(--paper-2);padding:18px 20px 16px}
.obj svg{display:block;width:56px;height:34px;margin-bottom:10px}
.obj h4{font-size:19px;margin:0 0 6px;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
.obj h4 span{font-size:13.5px;letter-spacing:.06em;color:var(--muted);font-weight:500;font-family:var(--sans)}
.obj > p{font-size:16px;color:var(--ink-2);margin:0}
.obj dl{margin:10px 0 0;display:grid;grid-template-columns:auto 1fr;gap:5px 10px;font-size:15.5px;line-height:1.75}
.obj dt{color:var(--gold);font-weight:700;letter-spacing:.06em;padding-top:1px;white-space:nowrap}
.obj dd{margin:0;color:var(--muted)}
@media (max-width:760px){.objs{grid-template-columns:1fr}.obj{padding:16px 16px 14px}.obj dl{gap:5px 8px}}