:root{
    --white:#FFFFFF;
    --grey:#ECEBE6;
    --dark:#1F1E1C;
    --sage:#8B9A7C;
    --sage-deep:#6E7C61;
    --ink-soft:rgba(31,30,28,.68);
    --ink-faint:rgba(31,30,28,.4);
    --hair:rgba(31,30,28,.1);
    --hair-on-dark:rgba(255,255,255,.14);
    --ink-soft-on-dark:rgba(255,255,255,.74);
    --ink-faint-on-dark:rgba(255,255,255,.46);
    --ease:cubic-bezier(.22,1,.36,1);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{margin:0;background:var(--white);color:var(--dark);font-family:'Taipei Sans TC','Noto Sans TC',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
  img{max-width:100%;display:block;}
  a{text-decoration:none;color:inherit;}
  .jost{font-family:'Jost',sans-serif;}
  .serif{font-family:'Cormorant Garamond',serif;}
  .wrap{max-width:30rem;margin:0 auto;padding:0 1.5rem;}

  /* ---- Header ---- */
  header{position:sticky;top:0;z-index:40;background:var(--white);border-bottom:1px solid var(--hair);}
  .header-row{display:flex;align-items:center;justify-content:space-between;height:4.1rem;max-width:30rem;margin:0 auto;padding:0 1.5rem;}
  .logo{font-family:'Jost',sans-serif;font-weight:500;font-size:1rem;letter-spacing:.03em;color:var(--dark);}
  .menu-btn{width:2.25rem;height:2.25rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:none;border:0;cursor:pointer;padding:0;}
  .menu-btn span{display:block;width:20px;height:1.5px;background:var(--dark);transition:transform .35s var(--ease),opacity .25s ease;}
  .menu-btn:active span{opacity:.6;}
  header.open .menu-btn span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
  header.open .menu-btn span:nth-child(2){opacity:0;}
  header.open .menu-btn span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

  .header-nav-desktop{display:none;align-items:center;gap:2.1rem;}
  .header-nav-desktop a:not(.btn-pill){font-family:'Jost',sans-serif;font-weight:500;font-size:.88rem;letter-spacing:.01em;color:var(--ink-soft);
    padding-bottom:3px;border-bottom:1px solid transparent;transition:color .25s ease,border-color .25s ease;}
  .header-nav-desktop a:not(.btn-pill):hover{color:var(--dark);border-color:var(--ink-faint);}
  .btn-pill-sm{min-height:0;min-width:0;padding:.65rem 1.5rem;font-size:.85rem;}

  /* ---- Drawer ---- */
  .scrim{display:none;}
  .drawer{position:sticky;top:4.1rem;width:100%;background:var(--grey);z-index:39;
    max-height:0;overflow:hidden;transition:max-height .35s var(--ease);}
  .drawer.show{max-height:70vh;overflow-y:auto;}
  .drawer-top{display:none;}
  .drawer-nav{display:flex;flex-direction:column;padding:1.25rem 1.5rem 0;}
  .drawer-nav a{font-size:1.05rem;font-weight:400;color:var(--dark);padding:1rem 0;border-bottom:1px solid var(--hair);transition:color .25s ease,padding-left .25s ease;}
  .drawer-nav a:active{color:var(--sage-deep);padding-left:.3rem;}
  .drawer-cta{margin:1rem 1.5rem 1.5rem;}

  /* ---- Buttons ---- */
  .btn-pill{display:inline-flex;align-items:center;justify-content:center;min-height:3rem;min-width:9.125rem;padding:.75rem 1.75rem;border-radius:999px;
    background:var(--dark);color:var(--white);font-family:'Jost',sans-serif;font-weight:500;font-size:1rem;letter-spacing:.02em;
    box-shadow:0 2px 4px rgba(31,30,28,.22),0 16px 28px -16px rgba(31,30,28,.6);
    transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .25s ease;}
  .btn-pill:active{transform:translateY(1px) scale(.98);background:#332f29;box-shadow:0 2px 4px rgba(31,30,28,.25);}
  @media (hover:hover){.btn-pill:hover{background:#332f29;transform:translateY(-1px);}}

  .link-arrow{display:inline-flex;align-items:center;gap:.35rem;font-family:'Jost',sans-serif;font-weight:500;font-size:.88rem;color:var(--dark);
    padding-bottom:2px;border-bottom:1px solid var(--ink-faint);transition:border-color .25s ease,gap .3s var(--ease),color .25s ease;}
  .link-arrow:active{gap:.55rem;}
  @media (hover:hover){.link-arrow:hover{border-color:var(--dark);gap:.55rem;}}
  .link-arrow.quiet{color:var(--ink-soft);}

  /* ---- Reveal ---- */
  .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease);}
  .reveal.in{opacity:1;transform:none;}
  @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}

  /* ---- Hero ---- */
  .hero{padding:3.25rem 0 3.5rem;text-align:left;}
  .eyebrow{font-family:'Jost',sans-serif;font-weight:500;font-size:.72rem;letter-spacing:.16em;color:var(--ink-soft);
    display:inline-flex;align-items:center;gap:.55rem;margin-bottom:1.4rem;}
  .eyebrow::before{content:'';width:5px;height:5px;border-radius:999px;background:var(--sage);}
  .hero h1{font-family:'Taipei Sans TC','Noto Sans TC',sans-serif;font-weight:700;font-size:2.15rem;line-height:1.36;letter-spacing:-.025em;margin:0 0 1.15rem;}
  .hero p.sub{font-size:1rem;line-height:1.85;color:var(--ink-soft);max-width:21rem;margin:0 0 1.9rem;}
  .hero-photo{position:relative;margin:2.75rem 0 0;width:100%;aspect-ratio:1.32;border-radius:85px 8px 8px 8px;overflow:hidden;
    background:var(--grey);box-shadow:0 20px 40px -26px rgba(31,30,28,.32);}
  .hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block;}
  .ph-fill{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;color:var(--ink-faint);}
  .ph-fill svg{width:34px;height:34px;opacity:.55;}
  .ph-fill span{font-family:'Jost',sans-serif;font-size:.68rem;letter-spacing:.08em;}
  .ph-fill.on-dark{color:var(--ink-faint-on-dark);}
  .ph-fill.on-dark svg{opacity:.65;}

  /* ---- Why Fusion ---- */
  .why{background:var(--grey);padding:4.25rem 0 4.5rem;border-radius:1.5rem 1.5rem 0 0;}
  .why .eyebrow{display:flex;}
  .why .eyebrow::before{display:none;}
  .why h2{font-family:'Taipei Sans TC','Noto Sans TC',sans-serif;font-weight:700;font-size:1.65rem;line-height:1.4;margin:0 0 2.5rem;}
  .why-item{padding:1.6rem 0;border-top:1px solid var(--hair);}
  .why-item:last-child{border-bottom:1px solid var(--hair);}
  .why-num{font-family:'Jost',sans-serif;font-weight:500;font-size:.78rem;letter-spacing:.06em;color:var(--sage-deep);display:block;margin-bottom:.6rem;}
  .why-item h3{font-size:1.1rem;font-weight:700;margin:0 0 .5rem;letter-spacing:-.005em;}
  .why-item p{font-size:.92rem;line-height:1.75;color:var(--ink-soft);margin:0;max-width:24rem;}

  /* ---- Courses ---- */
  .courses{padding:4.25rem 0 1.35rem;}
  .courses h2{font-family:'Taipei Sans TC','Noto Sans TC',sans-serif;font-weight:700;font-size:1.65rem;line-height:1.4;margin:0 0 .65rem;}
  .courses > .wrap > p.sub{font-size:.95rem;line-height:1.7;color:var(--ink-soft);margin:0 0 2.5rem;}

  .course-card{border:1px solid var(--hair);border-top:3px solid var(--sage);border-radius:16px;padding:1.6rem 1.5rem 1.75rem;margin-bottom:1.25rem;}
  .course-card h3{font-size:1.3rem;font-weight:700;margin:0 0 .65rem;letter-spacing:-.01em;}
  .course-card p.desc{font-size:.92rem;line-height:1.7;color:var(--ink-soft);margin:0 0 1rem;}
  .course-card .meta{font-family:'Jost',sans-serif;font-size:.78rem;color:var(--ink-faint);margin-bottom:1.35rem;letter-spacing:.01em;}

  .course-card.secondary{border:0;border-top:1px solid var(--hair);border-radius:0;padding:1.5rem 0 0;}
  .course-card.secondary h3{font-size:1.05rem;}
  .course-card.secondary .meta{margin-bottom:1rem;}

  .course-tier3{border-top:1px solid var(--hair);padding-top:1.1rem;margin-top:.25rem;}
  .course-tier3 p{font-size:.84rem;line-height:1.5;color:var(--ink-soft);margin:0 0 .25rem;}
  .course-tier3 p:first-child{color:var(--dark);font-weight:700;font-size:.88rem;}
  .course-tier3 .link-arrow{font-size:.82rem;}

  /* ---- shared section heading (used by 05/06/07/10, which all carry a subtitle) ---- */
  .path h2,.class-exp h2,.stories h2,.faq h2{
    font-family:'Taipei Sans TC','Noto Sans TC',sans-serif;font-weight:700;font-size:1.65rem;line-height:1.4;margin:0 0 .65rem;}
  .path > .wrap > p.sub,.class-exp > .wrap > p.sub,.stories > .wrap > p.sub,.faq > .wrap > p.sub{
    font-size:.95rem;line-height:1.7;color:var(--ink-soft);margin:0 0 2.5rem;}
  .path .eyebrow,.class-exp .eyebrow,.stories .eyebrow,.instructor .eyebrow,.faq .eyebrow{display:flex;}
  .path .eyebrow::before,.class-exp .eyebrow::before,.stories .eyebrow::before,.instructor .eyebrow::before,.faq .eyebrow::before{display:none;}

  /* ---- 05 Learning Path ---- */
  .path{background:var(--grey);padding:4.25rem 0 4.5rem;border-radius:1.5rem 1.5rem 0 0;}
  .path-list{position:relative;}
  .path-list::before{content:'';position:absolute;left:1.05rem;top:1.05rem;bottom:1.05rem;width:1px;background:var(--hair);}
  .path-item{position:relative;display:flex;gap:1.1rem;padding-bottom:2.35rem;}
  .path-item:last-child{padding-bottom:0;}
  .path-marker{position:relative;z-index:1;flex-shrink:0;width:2.1rem;height:2.1rem;border-radius:999px;
    background:var(--white);border:1px solid var(--hair);display:flex;align-items:center;justify-content:center;}
  .path-marker span{font-family:'Jost',sans-serif;font-weight:500;font-size:.76rem;color:var(--sage-deep);}
  .path-item.is-last .path-marker{background:var(--sage);border-color:var(--sage);}
  .path-item.is-last .path-marker span{color:var(--white);}
  .path-body{padding-top:.2rem;}
  .path-body h3{font-size:1.05rem;font-weight:700;margin:0 0 .4rem;letter-spacing:-.005em;}
  .path-body p{font-size:.9rem;line-height:1.7;color:var(--ink-soft);margin:0;max-width:22rem;}

  /* ---- 06 Class Experience ---- */
  .class-exp{padding:4.25rem 0 4.75rem;}
  .class-exp > .wrap{margin-bottom:0;}
  .video-rail{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;max-width:34rem;margin:0 auto;padding:.25rem 1.5rem 0;}
  .video-rail::-webkit-scrollbar{display:none;}
  .video-card{flex:0 0 72%;scroll-snap-align:center;}
  .video-frame{position:relative;aspect-ratio:9/16;border-radius:18px;overflow:hidden;background:var(--dark);}
  .video-frame::before{content:'';position:absolute;inset:0;z-index:1;background:rgba(31,30,28,.4);
    pointer-events:none;transition:opacity .3s ease;}
  .video-frame.is-playing::before{opacity:0;}
  .video-frame video{width:100%;height:100%;object-fit:cover;display:block;}
  .video-play{position:absolute;inset:0;margin:auto;width:5rem;height:5rem;z-index:2;
    border:0;background:none;color:var(--white);
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    transition:transform .25s var(--ease);}
  .video-play svg{width:60px;height:60px;margin-left:5px;
    filter:drop-shadow(0 4px 0 rgba(0,0,0,.55)) drop-shadow(0 14px 22px rgba(0,0,0,.7));}
  .video-play:active{transform:scale(.92);}
  @media (hover:hover){.video-play:hover{transform:scale(1.08);}}
  .video-frame.is-playing .video-play,.video-frame.is-loading .video-play{display:none;}
  .video-card{transition:transform .3s var(--ease);}
  .video-card.is-active{transform:scale(1.035);z-index:5;}

  /* ---- 影片全螢幕檢視器（Reels 式上下滑動） ---- */
  .video-lightbox{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;height:100dvh;
    z-index:200;background:#000;display:none;overflow:hidden;}
  .video-lightbox.open{display:block;}
  .lightbox-close{position:absolute;top:calc(1.1rem + env(safe-area-inset-top));right:calc(1.1rem + env(safe-area-inset-right));
    z-index:3;width:2.75rem;height:2.75rem;
    border:0;border-radius:999px;background:rgba(31,30,28,.55);color:var(--white);
    display:flex;align-items:center;justify-content:center;cursor:pointer;}
  .lightbox-close svg{width:18px;height:18px;}
  .lightbox-track{position:relative;width:100%;height:100%;}
  .lightbox-slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    transform:translateY(100%);transition:transform .32s var(--ease);}
  .lightbox-slide.is-active{transform:translateY(0);}
  .lightbox-slide.is-before{transform:translateY(-100%);}
  .lightbox-slide video{width:100%;height:100%;object-fit:cover;display:block;background:#000;}
  .lightbox-controls{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);z-index:2;
    display:flex;align-items:center;gap:1rem;opacity:0;pointer-events:none;transition:opacity .2s ease;}
  .lightbox-slide.is-paused .lightbox-controls{opacity:1;pointer-events:auto;}
  .lightbox-toggle{width:3.4rem;height:3.4rem;border:0;border-radius:999px;background:rgba(31,30,28,.5);color:var(--white);padding:0;
    display:flex;align-items:center;justify-content:center;cursor:pointer;}
  .lightbox-toggle svg{width:24px;height:24px;margin-left:2px;}
  .lightbox-skip{width:3rem;height:3rem;border:0;border-radius:999px;background:rgba(31,30,28,.5);color:var(--white);padding:0;
    display:grid;place-items:center;cursor:pointer;}
  .lightbox-skip svg{grid-area:1/1;width:22px;height:22px;}
  .lightbox-skip span{grid-area:1/1;font-family:'Jost',sans-serif;font-size:.5rem;font-weight:700;letter-spacing:.01em;}
  .lightbox-bottom{position:absolute;left:0;right:0;bottom:0;z-index:1;
    padding:3rem 1.5rem 2.25rem;background:linear-gradient(180deg,transparent,rgba(0,0,0,.8) 60%);
    display:flex;flex-direction:column;gap:.9rem;}
  .lightbox-scrubber{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s var(--ease);}
  .lightbox-slide.is-paused .lightbox-scrubber{grid-template-rows:1fr;}
  .lightbox-scrubber-inner{overflow:hidden;min-height:0;padding-top:.5rem;
    opacity:0;pointer-events:none;transition:opacity .18s ease;}
  .lightbox-slide.is-paused .lightbox-scrubber-inner{opacity:1;pointer-events:auto;transition-delay:.08s;}
  .lightbox-progress{position:relative;width:100%;height:4px;border-radius:999px;background:rgba(255,255,255,.3);}
  .lightbox-progress-fill{position:absolute;left:0;top:0;bottom:0;width:0%;border-radius:999px;background:var(--white);}
  .lightbox-time{display:flex;justify-content:space-between;margin-top:.5rem;
    font-family:'Jost',sans-serif;font-size:.72rem;letter-spacing:.02em;color:var(--ink-soft-on-dark);}
  .lightbox-bottom .video-cap{padding:0;}
  .lightbox-bottom .video-cap h3{color:var(--white);}
  .lightbox-bottom .video-cap p{color:var(--ink-soft-on-dark);}
  .lightbox-bottom .video-cap .tag{color:var(--sage);}
  .video-cap{padding-top:1rem;}
  .video-cap .tag{font-family:'Jost',sans-serif;font-weight:500;font-size:.72rem;letter-spacing:.1em;color:var(--sage-deep);display:block;margin-bottom:.5rem;}
  .video-cap h3{font-size:1.02rem;font-weight:700;margin:0 0 .4rem;}
  .video-cap p{font-size:.88rem;line-height:1.65;color:var(--ink-soft);margin:0;}

  /* ---- 07 Student Stories ---- */
  .stories{background:var(--grey);padding:4.25rem 0 4.75rem;border-radius:1.5rem 1.5rem 0 0;}
  .stories > .wrap{margin-bottom:0;}
  .story-rail{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;max-width:34rem;margin:0 auto;padding:.25rem 1.5rem 0;}
  .story-rail::-webkit-scrollbar{display:none;}
  .story-card{flex:0 0 80%;scroll-snap-align:center;}
  .story-photo{position:relative;aspect-ratio:4/5;background:var(--white);border-radius:70px 8px 8px 8px;overflow:hidden;}
  .story-photo img{width:100%;height:100%;object-fit:cover;display:block;}
  .story-body{padding:1.1rem 0 0;}
  .story-body h3{font-size:1.1rem;font-weight:700;margin:0 0 .3rem;}
  .story-meta{font-family:'Jost',sans-serif;font-size:.76rem;letter-spacing:.02em;color:var(--ink-soft);margin:0 0 .9rem;}
  .story-quote{display:flex;align-items:flex-start;gap:.5rem;margin:.9rem 0 0;padding-top:.9rem;border-top:1px solid var(--hair);}
  .story-quote .quote-mark{font-family:'Cormorant Garamond',serif;font-size:2.1rem;line-height:1;color:var(--sage-deep);flex-shrink:0;}
  .story-quote p{font-size:.88rem;line-height:1.7;color:var(--dark);margin:.15rem 0 0;}

  /* ---- 08 Brand Video Banner ---- */
  .brand-video{position:relative;min-height:28.75rem;display:flex;align-items:flex-end;overflow:hidden;background:var(--dark);}
  .bv-media{position:absolute;top:0;left:0;right:0;height:80%;overflow:hidden;}
  .bv-media video{width:100%;height:100%;object-fit:cover;display:block;}
  .bv-media::after{content:'';position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(31,30,28,.52) 0%,rgba(31,30,28,.52) 55%,var(--dark) 100%);}
  .bv-media .ph-fill{position:absolute;inset:0;justify-content:flex-start;padding-top:1.5rem;}
  .bv-overlay{display:none;}
  .bv-text{position:relative;z-index:1;width:100%;padding:3.5rem 1.5rem 2.75rem;}
  .bv-text h2{font-size:1.875rem;font-weight:700;line-height:1.5;letter-spacing:-.025em;color:var(--white);margin:0;}
  .bv-text p{font-size:1rem;line-height:1.9;color:var(--grey);margin:1.25rem 0 0;max-width:21rem;}

  /* ---- 09 Instructor ---- */
  .instructor{padding:4.25rem 0 4.75rem;}
  .instructor h2{font-family:'Taipei Sans TC','Noto Sans TC',sans-serif;font-weight:700;font-size:1.65rem;line-height:1.4;margin:0 0 2.5rem;}
  .instructor-grid{display:grid;gap:1.75rem;}
  .instructor-photo{position:relative;aspect-ratio:4/5;border-radius:85px 8px 8px 8px;overflow:hidden;background:var(--grey);width:100%;}
  .instructor-photo img{width:100%;height:100%;object-fit:cover;display:block;}
  .instructor-name{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;font-size:2.1rem;color:var(--dark);margin:1.5rem 0 .3rem;}
  .instructor-role{font-family:'Jost',sans-serif;font-weight:500;font-size:.82rem;letter-spacing:.02em;color:var(--dark);margin:0 0 1.4rem;}
  .instructor-credentials{list-style:none;margin:0 0 1.5rem;padding:0;}
  .instructor-credentials li{font-size:.9rem;line-height:1.6;color:var(--dark);padding:.6rem 0;border-top:1px solid var(--hair);}
  .instructor-credentials li:last-child{border-bottom:1px solid var(--hair);}
  .instructor-statement{border-left:2px solid var(--sage);padding-left:1rem;font-size:1.05rem;font-weight:700;line-height:1.7;color:var(--dark);margin:0;}

  /* ---- 10 FAQ ---- */
  .faq{background:var(--grey);padding:4.25rem 0 4.75rem;border-radius:1.5rem 1.5rem 0 0;}
  .faq-list{display:flex;flex-direction:column;}
  .faq-item{border-top:1px solid var(--hair);padding:1.5rem 0;cursor:pointer;}
  .faq-item:last-child{border-bottom:1px solid var(--hair);}
  .faq-item h3{font-size:1rem;font-weight:700;line-height:1.5;margin:0 0 .55rem;letter-spacing:-.005em;}
  .faq-preview{font-size:.88rem;line-height:1.65;color:var(--dark);margin:0;}
  .faq-toggle{display:inline-flex;align-items:center;gap:.4rem;margin-top:.75rem;font-family:'Jost',sans-serif;font-weight:500;font-size:.8rem;color:var(--sage-deep);}
  .faq-toggle svg{width:11px;height:11px;transition:transform .35s var(--ease);}
  .faq-close-label{display:none;}
  .faq-full{max-height:0;opacity:0;overflow:hidden;transition:max-height .45s var(--ease),opacity .3s ease,margin-top .45s var(--ease);}
  .faq-full p{font-size:.9rem;line-height:1.75;color:var(--dark);margin:0;}
  .faq-item.open .faq-preview{display:none;}
  .faq-item.open .faq-open-label{display:none;}
  .faq-item.open .faq-close-label{display:inline;}
  .faq-item.open .faq-toggle svg{transform:rotate(180deg);}
  .faq-item.open .faq-full{max-height:14rem;opacity:1;margin-top:.9rem;}

  /* ---- 11 Final CTA ---- */
  .final-cta{background:var(--dark);padding:4.75rem 0;text-align:center;}
  .final-cta h2{font-size:1.5rem;font-weight:700;line-height:1.4;letter-spacing:-.01em;color:var(--white);margin:0 0 2.1rem;white-space:nowrap;}
  .final-cta .btn-pill{background:var(--white);color:var(--dark);box-shadow:0 2px 4px rgba(0,0,0,.2),0 16px 28px -16px rgba(0,0,0,.45);}
  .final-cta .btn-pill:active{background:var(--grey);box-shadow:0 2px 4px rgba(0,0,0,.22);}
  @media (hover:hover) and (max-width:859.98px){.final-cta .btn-pill:hover{background:var(--grey);}}

  /* ---- 12 Footer ---- */
  .site-footer{background:var(--grey);padding:3.5rem 0 2.25rem;}
  .site-footer .wrap{display:flex;flex-direction:column;align-items:flex-start;gap:1.9rem;}
  .site-footer .logo{color:var(--dark);}
  .footer-tag{font-family:'Jost',sans-serif;font-weight:500;font-size:.72rem;letter-spacing:.16em;color:var(--ink-faint);margin:.6rem 0 0;}
  .footer-location{font-size:.84rem;color:var(--ink-soft);margin:.5rem 0 0;}
  .footer-social{display:flex;gap:.65rem;}
  .footer-social a{width:2.15rem;height:2.15rem;border-radius:999px;border:1px solid var(--hair);
    display:flex;align-items:center;justify-content:center;color:var(--ink-soft);transition:border-color .25s ease,color .25s ease;}
  .footer-social svg{width:16px;height:16px;}
  @media (hover:hover){.footer-social a:hover{border-color:var(--sage);color:var(--sage-deep);}}
  .footer-links{display:flex;flex-direction:column;gap:.85rem;}
  .footer-links a{font-size:.88rem;color:var(--ink-soft);transition:color .25s ease;}
  @media (hover:hover){.footer-links a:hover{color:var(--dark);}}
  .footer-copy{font-family:'Jost',sans-serif;font-size:.74rem;color:var(--ink-faint);margin:0;}

  @media (min-width:431px){
    .wrap,.header-row{max-width:34rem;}
  }

  @media (min-width:720px){
    .video-card{flex:0 0 46%;}
    .story-card{flex:0 0 46%;}
  }

  @media (min-width:860px){
    .menu-btn{display:none;}
    .header-nav-desktop{display:flex;}
    .header-row{max-width:62rem;padding:0 2.5rem;}

    .video-rail,.story-rail{overflow-x:visible;max-width:62rem;padding:.25rem 2.5rem 0;}
    .video-rail{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
    .story-rail{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
    .video-card,.story-card{flex:none;}

    /* 桌機維持原本的圓角樣式，這次的不對稱切角只套用在手機版 */
    .hero-photo{border-radius:22px;}
    /* 桌機維持原本置中版面，Hero 文字改左對齊只套用在手機版 */
    .hero{text-align:center;}
    .hero p.sub{margin:0 auto 1.9rem;}

    /* 桌機維持原本的 sage 按鈕配色，CTA 改深色只套用在手機版 */
    .btn-pill{background:var(--sage);box-shadow:0 2px 4px rgba(110,124,97,.18),0 16px 28px -16px rgba(110,124,97,.55);}
    .btn-pill:active{background:var(--sage-deep);box-shadow:0 2px 4px rgba(110,124,97,.2);}
    .final-cta .btn-pill{background:var(--sage);color:var(--white);box-shadow:0 2px 4px rgba(110,124,97,.18),0 16px 28px -16px rgba(110,124,97,.55);}
    .final-cta .btn-pill:active{background:var(--sage-deep);box-shadow:0 2px 4px rgba(110,124,97,.2);}

    /* 桌機維持原本的直角區塊，弧形轉場只套用在手機版 */
    .why,.path,.stories,.faq{border-radius:0;}

    /* 桌機維持原本的 Hero 照片尺寸、字距與按鈕尺寸，這次對齊參考稿只套用在手機版 */
    .hero-photo{margin:2.75rem auto 0;width:auto;max-width:19.5rem;aspect-ratio:4/5;}
    .hero-photo img{object-position:center top;}
    .hero h1{letter-spacing:-.01em;}
    .hero p.sub{line-height:1.75;}
    .btn-pill{min-height:0;min-width:0;padding:.9rem 2.1rem;font-size:.92rem;}

    /* 桌機維持原本的學員故事文字樣式，meta 深色與引號裝飾只套用在手機版 */
    .story-meta{color:var(--sage-deep);}
    .story-quote{display:block;margin:0;padding-top:0;border-top:0;}
    .story-quote .quote-mark{display:none;}
    .story-quote p{font-size:.9rem;line-height:1.7;color:var(--ink-faint);font-style:italic;margin:0;}

    /* 桌機維持原本的置中版面與淺漸層，Banner 改左下角對齊參考稿只套用在手機版 */
    .brand-video{align-items:center;min-height:30rem;}
    .bv-media{position:absolute;inset:0;height:auto;}
    .bv-media::after{display:none;}
    .bv-media .ph-fill{position:absolute;inset:0;justify-content:flex-start;padding-top:2.75rem;}
    .bv-overlay{display:block;background:linear-gradient(180deg,rgba(31,30,28,.1),rgba(31,30,28,.7));}
    .bv-text h2{line-height:1.42;letter-spacing:-.01em;margin:0 0 1rem;}
    .bv-text p{font-size:.95rem;line-height:1.8;color:var(--ink-soft-on-dark);margin:0;}

    .story-card{background:var(--white);border-radius:16px;overflow:hidden;}
    .story-photo{border-radius:0;background:var(--grey);}
    .story-body{padding:1.4rem 1.4rem 1.6rem;}
    .instructor-photo{border-radius:18px;}
    /* 桌機維持原本的淺灰文字色，講師簡介改深色只套用在手機版 */
    .instructor-role{color:var(--ink-soft);}
    .instructor-credentials li{color:var(--ink-soft);}
    /* 桌機維持原本的淺灰文字色，FAQ 內容改深色只套用在手機版 */
    .faq-preview{color:var(--ink-soft);}
    .faq-full p{color:var(--ink-soft);}

    .bv-text{max-width:62rem;margin:0 auto;padding:5rem 2.5rem;}
    .bv-text h2{font-size:2.3rem;}
    .bv-text p{max-width:26rem;}

    .instructor-grid{grid-template-columns:19rem 1fr;align-items:center;}
    .instructor-name{margin-top:0;}

    .site-footer .wrap{max-width:62rem;flex-direction:row;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:2.5rem;}
    .footer-brand,.footer-social,.footer-links,.footer-copy{flex-shrink:0;}
    .site-footer .logo,.footer-tag,.footer-copy,.footer-links a{white-space:nowrap;}
    .footer-links{flex-direction:row;gap:1.75rem;}

    /* 桌機維持原本的深底配色，Footer 改暖灰色只套用在手機版（圖示造型兩邊共用） */
    .site-footer{background:var(--dark);border-top:1px solid var(--hair-on-dark);}
    .site-footer .logo{color:var(--white);}
    .footer-tag{color:var(--ink-faint-on-dark);}
    .footer-location{color:var(--ink-soft-on-dark);}
    .footer-social a{border-color:var(--hair-on-dark);color:var(--ink-soft-on-dark);}
    .footer-links a{color:var(--ink-soft-on-dark);}
    .footer-copy{color:var(--ink-faint-on-dark);}
  }
  @media (hover:hover) and (min-width:860px){
    .footer-social a:hover{color:var(--sage);}
    .footer-links a:hover{color:var(--white);}
  }
  @media (hover:hover) and (min-width:860px){
    .btn-pill:hover{background:var(--sage-deep);}
  }