main,button{font-family:"Noto Sans HK",sans-serif}a{text-decoration:none}html{scroll-behavior:auto}.main-color{color:#b5a999}.yellow-color{color:#eff0a3}main{color:#212121}h1,h2,h3,h4{margin:0}a{color:inherit}ul{list-style:none;padding-left:0}.li-circle{background-color:#fff;width:209px;height:209px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:50%;color:#b5a999;font-size:28px;font-style:normal;font-weight:500;line-height:36px}@media(max-width: 1100px){.li-circle{font-size:24px;width:159px;height:159px}}@media(max-width: 700px){.li-circle{font-size:20px;width:125px;height:125px}}.hero-en-title{color:#fff;font-family:"Red Hat Display";font-style:normal;font-weight:400;letter-spacing:2px}@media(max-width: 1023px){.hero-en-title{color:rgba(33,33,33,.8)}}.hero-title{color:#fff;font-style:normal;font-weight:400;letter-spacing:1.44px}@media(max-width: 1023px){.hero-title{color:rgba(33,33,33,.8)}}.hero-strong-title{font-weight:700;color:#fff;font-style:normal;font-weight:700;letter-spacing:1.5px}@media(max-width: 1023px){.hero-strong-title{color:rgba(33,33,33,.8)}}.hero-content{color:#fff;font-style:normal;font-weight:400;line-height:var(--h2, 30px);letter-spacing:.8px;max-width:737px}.hero-btn{display:flex;align-items:center;padding-inline:0;margin-top:3rem}@media(max-width: 1023px){.hero-btn{display:flex;flex-direction:column;align-items:flex-start}}.hero-btn-left{position:relative;z-index:2;color:#524b43;font-family:"Red Hat Display";font-style:normal;font-weight:500;letter-spacing:1.3px;border-radius:29px;background:linear-gradient(90deg, #eff0a3 42.31%, #fff 100%)}.hero-btn-right{position:relative;z-index:1;left:-22px;flex-shrink:0;width:fit-content;padding-right:1rem;top:8px;height:24px;color:#5a4b43;font-size:12px;font-style:normal;font-weight:400;line-height:18px;letter-spacing:.75px;border-radius:29px;background:hsla(0,0%,100%,.96);display:flex;align-items:center;padding-left:26px;padding-top:12px;transition:transform .3s ease}@media(min-width: 1024px){.hero-btn-right{top:0;height:32px;padding-right:1.5rem}}@media(max-width: 1023px){.hero-btn-right{left:0;padding-top:0;padding-left:22px}}@media(min-width: 1024px){.hero-btn-right{font-size:15px}}@media(min-width: 1024px){.hero-btn-right{padding-left:44px;padding-top:0;justify-content:flex-start;align-items:center}}.group:hover .hero-btn-right{transform:translateX(4px)}.content-title{margin-bottom:14px;color:#212121;font-size:36px;font-style:normal;font-weight:500;line-height:48px;letter-spacing:1.8px}@media(max-width: 1023px){.content-title{font-size:24px;line-height:30px}}.content-text,main p{font-size:16px;text-align:justify;font-style:normal;font-weight:400;line-height:var(--h2, 30px);letter-spacing:.8px;margin:0}@media(max-width: 1023px){.content-text,main p{font-size:14px;line-height:24px}}.cta-btn{cursor:pointer;border:1px solid rgba(0,0,0,0);display:flex;padding:8px 37px;justify-content:center;align-items:center;flex-shrink:0;border-radius:32px;background:#b5a999;color:#fff;font-size:16px;font-style:normal;font-weight:500;line-height:24px;letter-spacing:.8px;transition:all .3s ease}@media(min-width: 1024px){.cta-btn{font-size:20px;padding:12px 40px}}.cta-btn:hover{background:rgba(233,229,218,.5019607843);color:#212121;border:1px solid #212121}.cta-btn:active{transform:translate(0px, 4px)}#desktop-sidebar{font-family:"Noto Sans HK",sans-serif;position:absolute;right:0;top:600px;width:150px;background:rgba(234,231,223,.5019607843);padding-block:1rem;border-radius:1rem 0 0 1rem;opacity:0;pointer-events:none;transform:translateY(50px);transition:all .4s ease}@media(max-width: 1600px){#desktop-sidebar{width:125px;font-size:14px}}#desktop-sidebar .icon-bg{background-color:#b5a999}#desktop-sidebar.visible{opacity:1;pointer-events:auto;transform:translateY(0)}#desktop-sidebar.fixed{position:fixed;top:50%;transform:translateY(-50%)}#desktop-sidebar .content{display:flex;flex-direction:column;align-items:center;width:75%;margin-inline:auto}#desktop-sidebar .content hr{width:100%;height:1px;background-color:#212121;margin-block:1rem}#desktop-sidebar .content ul{list-style:none;padding:0;margin:0}#desktop-sidebar .content ul li{text-align:center}#desktop-sidebar .content .go-top{background:none;border:none;font-size:1rem;cursor:pointer}@media(max-width: 1600px){#desktop-sidebar .content .go-top{font-size:14px}}@media(max-width: 768px){#desktop-sidebar{display:none !important}}#mobile-sidebar-panel{font-family:"Noto Sans HK",sans-serif}#mobile-sidebar-toggle{display:flex;border:none;box-shadow:rgba(17,17,26,.1) 0px 4px 16px,rgba(17,17,26,.05) 0px 8px 32px}#mobile-sidebar-panel{box-shadow:rgba(17,12,46,.15) 0px 48px 100px 0px;opacity:0;transform:translate(0px, 30px);transition:opacity .3s ease,transform .3s ease;pointer-events:none}#mobile-sidebar-backdrop{opacity:0;transition:opacity .3s ease;pointer-events:none}#mobile-sidebar-panel.show{opacity:1;transform:translate(0, 0);pointer-events:auto}#mobile-sidebar-backdrop.show{opacity:1;pointer-events:auto}.mobile-sidebar-item{display:flex;align-items:center;gap:.75rem;padding:.5rem 1rem;border-radius:.5rem;font-size:.875rem;font-weight:500;color:#2d2d2d;box-shadow:0 1px 2px rgba(0,0,0,.06);text-decoration:none;transition:background-color .3s ease}.mobile-sidebar-item:hover{opacity:.9}.mobile-sidebar-item .icon-bg{display:flex;align-items:center;justify-content:center;background-color:#2d2d2d;color:#fff;border-radius:9999px;width:2.5rem;height:2.5rem;flex-shrink:0}.mobile-sidebar-item img{width:1.5rem;height:1.5rem}@keyframes btnClickPop{0%{transform:scale(1)}40%{transform:scale(0.9)}70%{transform:scale(1.1)}100%{transform:scale(1)}}#mobile-sidebar-toggle.clicked{animation:btnClickPop 300ms ease}.accordion-item{font-family:"Noto Sans HK",sans-serif}.accordion-item.active .accordion-header{background-color:#eff0a3}.accordion-item.active .accordion-icon{transform:rotate(45deg)}.accordion-item.active .accordion-content{max-height:200px;transition:max-height .3s ease-in-out}.accordion-item:last-child{border-bottom:1px solid #212121}.accordion-header{cursor:pointer;display:flex;justify-content:flex-start;align-items:center;gap:1rem;width:100%;padding-block:1.5rem;padding-inline:1.5rem;background-color:rgba(233,229,218,.5019607843);border:none;text-align:left;transition:all 300ms ease-in-out}.accordion-header:hover{background-color:#b5a999}@media(max-width: 1024px){.accordion-header{gap:10px;padding-inline:16px}}.accordion-icon{color:#212121;font-size:1.5rem;transition:transform .3s ease}@media(min-width: 1024px){.accordion-icon{font-size:2rem}}.accordion-content{background-color:#fff;overflow:hidden;max-height:0;transition:max-height .3s ease-in-out}.accordion-content>div{padding:1.25rem 1.5rem;line-height:1.75}.icon-bg{background-color:#434343;border-radius:1rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}.icon-title{color:#212121;font-size:24px;font-style:normal;font-weight:500;line-height:32px}@media(max-width: 1023px){.icon-title{font-size:18px}}.icon-title-second{font-size:20px;font-style:normal;font-weight:500;line-height:32px}@media(max-width: 1023px){.icon-title-second{font-size:18px}}.second-title{margin:0;font-size:28px;font-style:normal;font-weight:500;line-height:32px;letter-spacing:1.4px}@media(max-width: 1023px){.second-title{font-size:24px;line-height:30px}}.cards-5items{border-radius:15px;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;flex-shrink:0;padding-inline:40px;padding-block:50px;min-height:417px;height:100%}.cards-5items .icon-title{margin-top:1.5rem;margin-bottom:1rem}.cards-5items .content-text{flex:1 1 auto;display:block}@media(max-width: 1440px){.cards-5items{padding-inline:30px;padding-block:30px}}@media(max-width: 1280px){.cards-5items{min-height:390px}}@media(max-width: 1023px){.cards-5items{padding-inline:30px;padding-block:30px;min-height:unset;height:auto}}.cards-2items{background-color:#fff;border-radius:15px;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;flex-shrink:0;padding-inline:36px;padding-block:50px;height:100%}.cards-2items .icon-circle{width:72px;height:72px;display:flex;justify-content:center;align-items:center;background-color:#eff0a3;border-radius:50%}.cards-2items .icon-img{width:53px;height:53px;flex-shrink:0;aspect-ratio:1/1}.cards-2items .icon-title{text-align:left;font-size:24px;font-style:normal;font-weight:400;line-height:35px;letter-spacing:1.2px}@media(max-width: 1280px){.cards-2items .icon-title{font-size:22px}}@media(max-width: 1023px){.cards-2items .icon-title{font-size:18px}}.cards-2items .content-text{flex:1 1 auto;display:block}@media(max-width: 1440px){.cards-2items{padding-inline:30px;padding-block:30px}}@media(max-width: 1023px){.cards-2items{padding-inline:26px;padding-block:30px;min-height:unset;height:auto}}.float-icon-card{position:relative;padding-top:5rem;transform:translateY(0);transition:transform .3s ease}@media(hover: hover)and (pointer: fine){.float-icon-card:hover{transform:translateY(-0.75rem)}.float-icon-card:hover .icon-circle{background-color:#212121}.float-icon-card:hover .icon-circle .icon-img{filter:brightness(0) invert(1)}.float-icon-card:hover .cards-6items{background-color:#eff0a3}}.float-icon-card .icon-circle{position:absolute;top:2rem;left:50%;transform:translateX(-50%);width:104px;height:104px;background-color:#eff0a3;border-radius:9999px;display:flex;align-items:center;justify-content:center;transition:background-color .3s ease}.float-icon-card .icon-circle .icon-img{width:69px;height:69px;filter:brightness(1) invert(0);transition:filter .3s ease}.float-icon-card .cards-6items{background-color:#f3f3f3;border-radius:15px;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;flex-shrink:0;padding-inline:25px;padding-top:50px;padding-bottom:25px;height:100%;transition:background-color .3s ease}.float-icon-card .cards-6items .icon-title{margin-top:1.5rem;margin-bottom:11px;text-align:center}.float-icon-card:hover .float-icon-card .cards-6items{background-color:#eff0a3}@media(max-width: 1440px){.float-icon-card .cards-6items{padding-inline:30px;padding-block:30px}}@media(max-width: 1280px){.float-icon-card .cards-6items{padding-top:50px}}@media(max-width: 1023px){.float-icon-card .cards-6items{padding-inline:30px;padding-block:30px;padding-top:50px}.float-icon-card .cards-6items .icon-title{margin-top:20px;margin-bottom:8px}}@media(max-width: 767px){.float-icon-card{display:flex;align-items:center;background-color:#f3f3f3;border-radius:15px;padding:16px 20px;height:auto;transition:background-color .3s ease;gap:16px}.float-icon-card:hover .cards-6items{background-color:rgba(0,0,0,0)}.float-icon-card .icon-circle{position:relative;width:fit-content;height:fit-content;padding:16px;top:auto;left:auto;transform:none}.float-icon-card .icon-circle .icon-img{width:56px;height:56px}.float-icon-card .cards-6items{background-color:rgba(0,0,0,0);padding:0;align-items:flex-start;justify-content:center;flex-shrink:1}.float-icon-card .cards-6items .icon-title{margin:0;text-align:left}}.process-cards{display:grid;gap:1.5rem}@media(min-width: 768px){.process-cards{grid-template-columns:repeat(3, 1fr);gap:2rem}}@media(max-width: 767px){.process-cards{grid-template-columns:1fr}}.process-card{position:relative;background:#fff;color:#212121;border-radius:45px;border:1px solid #212121;padding:2rem 1.5rem;overflow:hidden;transition:all .5s ease-in-out;min-height:280px;display:flex;flex-direction:column;justify-content:space-between;min-height:417px}@media(max-width: 1280px){.process-card{min-height:350px}}@media(max-width: 767px){.process-card{min-height:250px}}.process-card:hover{color:#fff;border:1px solid #fff}.process-card:hover .process-bg-img{opacity:1}.process-card .process-bg-img{position:absolute;opacity:0;top:0;left:0;width:100%;height:100%;object-fit:cover}@media(hover: none)and (pointer: coarse){.process-card{color:#fff;border:1px solid #fff}.process-card .process-bg-img{opacity:1}}.process-card .process-content{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:flex-start;gap:38px}@media(max-width: 1400px){.process-card .process-content{gap:20px}}@media(max-width: 767px){.process-card .process-content{gap:10px}}.process-card .process-number{font-family:"Red Hat Display",sans-serif;display:inline-block;font-size:28px;font-style:normal;font-weight:400;line-height:30px;letter-spacing:1.4px;border-radius:50%;margin-bottom:45px}@media(max-width: 1280px){.process-card .process-number{margin-bottom:30px}}.process-card .process-title{margin-bottom:1rem;font-size:28px;font-style:normal;font-weight:700;line-height:36px;letter-spacing:1.4px}@media(max-width: 1440px){.process-card .process-title{font-size:22px}}@media(max-width: 1280px){.process-card .process-title{font-size:20px}}@media(max-width: 767px){.process-card .process-title{font-size:18px}}.process-card .process-description{font-size:14px;font-style:normal;font-weight:700;line-height:24px;letter-spacing:.7px}@media(max-width: 1280px){.process-card .process-description{font-size:12px}}.icon-cards-grid{display:grid;gap:30px;list-style:none;padding:0;margin:0;justify-items:center}@media(min-width: 1200px){.icon-cards-grid{grid-template-columns:repeat(3, 1fr)}}@media(min-width: 768px)and (max-width: 1199px){.icon-cards-grid{grid-template-columns:repeat(2, 1fr)}.icon-cards-grid .third-item{grid-column:1/-1;justify-self:center}}@media(max-width: 767px){.icon-cards-grid{grid-template-columns:1fr}}.inside-icon-card{width:100%;height:100%;background-color:#fff;border-radius:45px;padding-inline:45px;padding-top:39px;padding-bottom:28px;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;transition:all .3s ease-in-out}@media(max-width: 1023px){.inside-icon-card{padding:30px}}.inside-icon-card .icon-img-container{width:110px;height:110px;padding:17px;background-color:#eff0a3;border-radius:15px;margin-bottom:20px}.inside-icon-card .icon-img{width:100%;height:100%;object-fit:cover}@media(hover: hover)and (pointer: fine){.inside-icon-card:hover{background-color:#eff0a3;transform:translateY(-10px)}.inside-icon-card:hover .icon-img-container{background-color:#212121}.inside-icon-card:hover .icon-img-container .icon-img{filter:brightness(0) invert(1)}.inside-icon-card.no-hover:hover{background-color:inherit;transform:none}.inside-icon-card.no-hover:hover .icon-img-container{background-color:#eff0a3}.inside-icon-card.no-hover:hover .icon-img-container .icon-img{filter:none}}.service-cards{display:grid;gap:2rem}@media(min-width: 1280px){.service-cards{grid-template-columns:repeat(4, 1fr);gap:1.5rem}}@media(min-width: 768px)and (max-width: 1279px){.service-cards{grid-template-columns:repeat(2, 1fr);gap:1.5rem}}@media(max-width: 767px){.service-cards{grid-template-columns:1fr;gap:1.5rem}}.service-card{background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.08);transition:all .3s ease}.service-card:hover{transform:translateY(-8px);box-shadow:0 12px 40px rgba(0,0,0,.15)}@media(max-width: 767px){.service-card:hover{transform:none;box-shadow:0 4px 20px rgba(0,0,0,.08)}.service-card.expanded .expand-btn{opacity:1;pointer-events:auto}.service-card.expanded .card-content{max-height:1000px;opacity:1;padding:1.5rem;margin-top:0;border-radius:20px;pointer-events:auto}}@media(min-width: 768px){.service-card .card-content{max-height:none !important;opacity:1 !important;overflow:visible !important;padding:1.5rem !important;margin-top:-15px !important;border-radius:20px !important;pointer-events:auto !important}.service-card .expand-btn{display:none !important}}.service-card .card-header{position:relative}@media(max-width: 767px){.service-card .card-header{cursor:pointer}}@media(min-width: 768px){.service-card .card-header{cursor:default}}.service-card .expand-btn{position:absolute;padding:6px;bottom:10px;right:10px;width:auto;height:auto;background:hsla(0,0%,100%,.15);backdrop-filter:blur(10px);border:2px solid hsla(0,0%,100%,.3);border-radius:50%;display:none;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;z-index:10;box-shadow:0 4px 12px rgba(0,0,0,.2)}@media(max-width: 767px){.service-card .expand-btn{display:flex}}.service-card .expand-btn:hover{background:hsla(0,0%,100%,.25);border-color:hsla(0,0%,100%,.5);transform:scale(1.05);box-shadow:0 6px 16px rgba(0,0,0,.3)}.service-card .expand-btn svg{width:20px;height:20px;color:#fff;transition:transform .3s ease;filter:drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3))}.service-card .card-image{position:relative;width:100%;height:auto;overflow:hidden;border-radius:20px 20px 0 0;aspect-ratio:311/189}.service-card .card-image img{width:100%;height:100%;object-fit:cover}.service-card .card-image::after{content:"";position:absolute;top:0;left:0;right:0;height:40%;background:linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0) 100%);z-index:1}.service-card .card-image .card-title{position:absolute;top:1.5rem;left:1.5rem;color:#fff;font-size:20px;font-weight:700;line-height:1.3;text-shadow:0 2px 4px rgba(0,0,0,.5);z-index:2}@media(max-width: 1280px){.service-card .card-image .card-title{font-size:18px;top:1rem;left:1rem}}@media(max-width: 767px){.service-card .card-image .card-title{font-size:20px;top:1.5rem;left:1.5rem}}.service-card .card-content{padding:1.5rem;border-radius:20px;background:#fff;position:relative;margin-top:-15px}@media(max-width: 1280px){.service-card .card-content{padding:1rem}}@media(max-width: 767px){.service-card .card-content{padding:0;max-height:0;opacity:0;overflow:hidden;transition:all .4s ease;margin-top:0;border-radius:0;display:block;pointer-events:none}}.service-card .core-points .core-title{color:#b5a999;font-size:20px;font-style:normal;font-weight:500;line-height:30px;letter-spacing:1px;margin-bottom:10px}@media(max-width: 1280px){.service-card .core-points .core-title{font-size:18px}}.service-card .core-points .point-item{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:14px;color:#212121}@media(max-width: 1280px){.service-card .core-points .point-item{font-size:13px;gap:.5rem}}.service-card .core-points .point-item:last-child{margin-bottom:0}.service-card .core-points .point-item .point-icon{width:24px;height:24px;flex-shrink:0;display:flex;align-items:center;justify-content:center}@media(max-width: 1280px){.service-card .core-points .point-item .point-icon{width:20px;height:20px}}.service-card .core-points .point-item .point-icon svg,.service-card .core-points .point-item .point-icon img{width:24px;height:24px;color:#212121}@media(max-width: 1280px){.service-card .core-points .point-item .point-icon svg,.service-card .core-points .point-item .point-icon img{width:14px;height:14px}}.service-card .service-hr{width:85%;height:1px;border:none;border-top:1px solid #d0d0d0;margin:1rem 0;margin-left:0;margin-right:auto}.point-item{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:14px;color:#212121}@media(max-width: 1280px){.point-item{font-size:13px;gap:.5rem;margin-bottom:0;margin-top:5px}.point-item svg{width:24px;height:24px}}.point-item:last-child{margin-bottom:0}.point-item .point-icon{width:24px;height:24px;flex-shrink:0;display:flex;align-items:center;justify-content:center}@media(max-width: 1280px){.point-item .point-icon{width:20px;height:20px}}.point-item .point-icon svg{width:24px;height:24px;color:#212121}@media(max-width: 1280px){.point-item .point-icon svg{width:14px;height:14px}}.instruction-card{box-shadow:0 4px 12px rgba(0,0,0,.1);background-color:#fff;border-radius:15px;padding:1.25rem;display:flex;flex-direction:column;align-items:flex-start}.instruction-card svg{margin-bottom:2rem;width:37px;height:37px}.instruction-card .icon-title{margin-bottom:.5rem}.dark-linear-gradient{position:relative;border-radius:45px;overflow:hidden}.dark-linear-gradient:after{content:"";position:absolute;bottom:0;left:0;right:0;height:60%;background:linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 50%, rgb(0, 0, 0) 100%);z-index:1}@media(max-width: 767px){.dark-linear-gradient:after{height:70%}}.risk-item{display:flex;flex-direction:column;justify-content:left;gap:8px}@media(max-width: 1023px){.risk-item{gap:4px}}.risk-item .icon-img{background-color:#eff0a3;border-radius:15px;width:110px;height:110px;padding:17px;margin-bottom:13px}.gridCenter{display:grid;justify-items:center}.ctaButton{width:20em;border-radius:3.125rem;background:#b5a999;border:none;padding:max(1%,.5rem) max(4%,1.5rem);transition:all 100ms ease-in-out;cursor:pointer;text-decoration:none;display:inline-block;color:#fff;text-align:center;font-family:Noto Sans HK,sans-serif;font-size:clamp(.875rem,1.5vw,1.25rem);font-style:normal;font-weight:500;line-height:150%;letter-spacing:.0875rem}.ctaButton:hover{background-color:hsl(34.2857142857,15.9090909091%,57.4901960784%);color:#fff;text-decoration:none}.ctaButton:active{transform:translate(0px, 3px);background-color:hsl(34.2857142857,15.9090909091%,50.4901960784%)}.wl-df-animate{opacity:0;transform:translateY(20px);filter:blur(4px);transition:opacity .75s cubic-bezier(0.16, 1, 0.3, 1),transform .75s cubic-bezier(0.16, 1, 0.3, 1),filter .75s cubic-bezier(0.16, 1, 0.3, 1);transition-delay:var(--delay, 0ms)}.wl-df-animate.wl-df--visible{opacity:1;transform:translateY(0);filter:blur(0)}.wl-doctor-feature{--doc-accent-rgb: 233, 229, 218;--doc-warm-rgb: 181, 169, 153;background:linear-gradient(180deg, #fff 0%, rgba(247, 245, 241, 0.65) 15%, rgba(247, 245, 241, 0.65) 85%, #fff 100%)}.wl-doctor-feature__header{max-width:750px;margin-bottom:56px}@media(max-width: 1023px){.wl-doctor-feature__header{margin-bottom:40px}}.wl-doctor-feature__eyebrow{display:inline-flex;align-items:center;gap:8px;padding:4px 14px 4px 10px;border:1px solid rgba(var(--doc-warm-rgb), 0.35);border-radius:9999px;margin-bottom:18px;font-family:"Red Hat Display",sans-serif;font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#b5a999}.wl-doctor-feature__eyebrow-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#b5a999;flex-shrink:0;animation:wl-df-pulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite}.wl-doctor-feature__card{display:grid;grid-template-columns:3fr 7fr;gap:56px;align-items:center}@media(max-width: 1023px){.wl-doctor-feature__card{grid-template-columns:1fr;gap:40px}}.wl-doctor-feature__photo-link{display:block;width:100%;max-width:450px;text-decoration:none}@media(max-width: 1023px){.wl-doctor-feature__photo-link{max-width:300px;margin:0 auto}}.wl-doctor-feature__photo-link:hover .wl-doctor-feature__photo-core img{transform:scale(1.03)}.wl-doctor-feature__photo-link:hover .wl-doctor-feature__photo-shell{box-shadow:0 32px 64px -12px rgba(90,75,65,.32),0 8px 20px -4px rgba(90,75,65,.16)}.wl-doctor-feature__photo-shell{background:rgba(0,0,0,0);border:1px solid rgba(var(--doc-warm-rgb), 0.22);padding:0;border-radius:20px;transition:box-shadow .5s cubic-bezier(0.16, 1, 0.3, 1)}.wl-doctor-feature__photo-core{border-radius:17px;overflow:hidden;box-shadow:inset 0 1px 1px hsla(0,0%,100%,.55)}.wl-doctor-feature__photo-core img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:top center;transition:transform .6s cubic-bezier(0.16, 1, 0.3, 1)}.wl-doctor-feature__info{display:flex;flex-direction:column;gap:0}.wl-doctor-feature__dept{font-family:"Noto Sans HK",sans-serif;font-size:13px;font-weight:500;letter-spacing:.08em;color:#b5a999;margin-bottom:8px}.wl-doctor-feature__name{font-family:"Noto Sans HK",sans-serif;font-size:clamp(22px,2vw,28px);font-weight:600;letter-spacing:.06em;line-height:1.3;color:#212121;margin:0 0 4px;text-wrap:balance}.wl-doctor-feature__name-suffix{font-size:.65em;font-weight:400;letter-spacing:.08em;margin-left:8px;color:rgba(33,33,33,.55);vertical-align:.08em}.wl-doctor-feature__en{font-family:"Red Hat Display",sans-serif;font-size:13px;letter-spacing:.06em;color:rgba(33,33,33,.45);margin-bottom:24px}.wl-doctor-feature__divider{height:1px;background:linear-gradient(to right, rgba(var(--doc-warm-rgb), 0.5), rgba(var(--doc-warm-rgb), 0.08));margin-bottom:24px}.wl-doctor-feature__creds-wrap{display:flex;flex-direction:column;gap:20px;margin-bottom:32px}.wl-doctor-feature__creds-label{font-family:"Noto Sans HK",sans-serif;font-size:12px;font-weight:600;letter-spacing:.05em;color:#b5a999;margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid rgba(var(--doc-warm-rgb), 0.25)}.wl-doctor-feature__creds{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}.wl-doctor-feature__creds li{position:relative;padding-left:16px;font-family:"Noto Sans HK",sans-serif;font-size:15px;letter-spacing:.04em;line-height:1.65;color:rgba(33,33,33,.85);transition:opacity .6s cubic-bezier(0.16, 1, 0.3, 1),transform .6s cubic-bezier(0.16, 1, 0.3, 1);transition-delay:calc(var(--i, 0)*70ms + 300ms)}.wl-doctor-feature__creds li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;border-radius:50%;background:#b5a999;opacity:.65}.wl-doctor-feature__cta{display:inline-flex;align-items:center;gap:0;padding:10px 10px 10px 24px;border:1.5px solid rgba(var(--doc-warm-rgb), 0.55);border-radius:9999px;color:#b5a999;font-family:"Noto Sans HK",sans-serif;font-size:14px;font-weight:500;letter-spacing:.05em;text-decoration:none;transition:border-color .3s cubic-bezier(0.16, 1, 0.3, 1),background .3s cubic-bezier(0.16, 1, 0.3, 1),color .3s cubic-bezier(0.16, 1, 0.3, 1)}.wl-doctor-feature__cta-icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin-left:12px;border-radius:50%;background:rgba(var(--doc-warm-rgb), 0.12);flex-shrink:0;transition:background .3s cubic-bezier(0.16, 1, 0.3, 1),transform .3s cubic-bezier(0.16, 1, 0.3, 1)}.wl-doctor-feature__cta-icon svg{transition:transform .3s cubic-bezier(0.16, 1, 0.3, 1)}.wl-doctor-feature__cta:hover{background:rgba(var(--doc-warm-rgb), 0.06);border-color:#b5a999}.wl-doctor-feature__cta:hover .wl-doctor-feature__cta-icon{background:#b5a999;color:#fff;transform:translateX(2px)}.wl-doctor-feature__cta:hover .wl-doctor-feature__cta-icon svg{transform:translateX(2px)}.wl-doctor-feature__cta:active{transform:scale(0.98)}@keyframes wl-df-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(0.8)}}.inside-icon-card{background-color:#fff}.hero-eyebrow{font-family:"Red Hat Display",sans-serif;font-size:13px;letter-spacing:2.5px;color:hsla(0,0%,100%,.75);text-transform:uppercase}@media(max-width: 1023px){.hero-eyebrow{color:rgba(33,33,33,.6);font-size:12px}}.hero-sub{font-size:13px;letter-spacing:1px;color:hsla(0,0%,100%,.7);margin:0}@media(max-width: 1023px){.hero-sub{color:rgba(33,33,33,.55)}}.hero-stats-bar{display:flex;align-items:center;gap:1.25rem}@media(max-width: 1023px){.hero-stats-bar{gap:.75rem}}@media(max-width: 480px){.hero-stats-bar{gap:.5rem}}.hero-stat-item{display:flex;flex-direction:column;gap:2px}.hero-stat-num{font-family:"Red Hat Display",sans-serif;font-weight:700;font-size:22px;color:#fff;letter-spacing:1px;line-height:1.1}@media(max-width: 1023px){.hero-stat-num{font-size:18px;color:#b5a999}}@media(max-width: 480px){.hero-stat-num{font-size:15px}}.hero-stat-label{font-size:11px;color:hsla(0,0%,100%,.7);letter-spacing:.5px;line-height:1.3}@media(max-width: 1023px){.hero-stat-label{color:rgba(33,33,33,.55);font-size:10px}}.hero-stat-divider{width:1px;height:36px;background:hsla(0,0%,100%,.35);flex-shrink:0}@media(max-width: 1023px){.hero-stat-divider{background:rgba(33,33,33,.15);height:28px}}.advantage-card{position:relative}.advantage-card .advantage-num{font-family:"Red Hat Display",sans-serif;font-size:48px;font-weight:700;color:rgba(233,229,218,.5019607843);line-height:1;letter-spacing:-1px;margin-bottom:-8px}@media(max-width: 767px){.advantage-card .advantage-num{font-size:36px}}.comparison-table-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px;box-shadow:0 2px 16px rgba(0,0,0,.06)}.comparison-table{width:100%;min-width:680px;border-collapse:collapse;background:#fff;font-size:14px}@media(min-width: 1024px){.comparison-table{font-size:15px}}.comparison-table thead tr{background:#212121;color:#fff}.comparison-table thead tr th{padding:14px 16px;text-align:left;font-weight:600;letter-spacing:.5px;white-space:nowrap}.comparison-table thead tr th.highlight-col{background:#b5a999;color:#fff}.comparison-table thead tr th.row-header{width:110px;min-width:90px}.comparison-table tbody tr{border-bottom:1px solid #f0ece6}.comparison-table tbody tr:last-child{border-bottom:none}.comparison-table tbody tr:hover{background:#faf9f7}.comparison-table tbody tr td{padding:12px 16px;vertical-align:top;line-height:1.5}.comparison-table tbody tr td.row-label{font-weight:600;color:#212121;background:#f3f3f3;white-space:nowrap}.comparison-table tbody tr td.highlight-col{background:#faf6f0;font-weight:500;color:#212121;border-left:2px solid #b5a999;border-right:2px solid #b5a999}.comparison-table tbody tr:last-child td.highlight-col{border-bottom:2px solid #b5a999;border-radius:0 0 0 0}.process-flow-steps{display:flex;flex-direction:column;gap:0}.flow-step{display:flex;align-items:flex-start;gap:1.5rem;background:#fff;border-radius:16px;padding:1.5rem;box-shadow:0 2px 12px rgba(0,0,0,.05)}@media(max-width: 767px){.flow-step{gap:1rem;padding:1.25rem}}.flow-step .flow-step-num{flex-shrink:0;width:52px;height:52px;background:#b5a999;border-radius:50%;display:flex;align-items:center;justify-content:center}@media(max-width: 767px){.flow-step .flow-step-num{width:40px;height:40px}}.flow-step .flow-step-num span{font-family:"Red Hat Display",sans-serif;font-size:16px;font-weight:700;color:#fff;letter-spacing:.5px}@media(max-width: 767px){.flow-step .flow-step-num span{font-size:13px}}.flow-step .flow-step-content{flex:1;padding-top:4px}.flow-step-connector{width:2px;height:32px;background:linear-gradient(to bottom, #b5a999, rgba(233, 229, 218, 0.5019607843));margin-left:25px}@media(max-width: 767px){.flow-step-connector{margin-left:19px;height:20px}}.diet-phases-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:1rem}@media(max-width: 1023px){.diet-phases-grid{grid-template-columns:repeat(2, 1fr)}}@media(max-width: 599px){.diet-phases-grid{grid-template-columns:1fr}}.diet-phase-card{background:#fff;border-radius:16px;padding:1.5rem 1.25rem;box-shadow:0 2px 12px rgba(0,0,0,.05);border-top:4px solid #b5a999}.diet-phase-card .diet-phase-badge{display:inline-block;background:#eff0a3;color:#212121;font-size:12px;font-weight:600;padding:3px 10px;border-radius:20px;letter-spacing:.5px;margin-bottom:8px}.diet-phase-card .diet-phase-title{font-size:18px;font-weight:700;color:#212121;letter-spacing:.5px;margin-bottom:12px}.diet-phase-card .diet-phase-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}.diet-phase-card .diet-phase-list li{font-size:13px;line-height:1.5;color:#555;padding-left:14px;position:relative}.diet-phase-card .diet-phase-list li::before{content:"·";position:absolute;left:3px;color:#b5a999;font-weight:700}.diet-phase-card .diet-phase-list li.diet-phase-warning{color:#cc8080;font-weight:500}.diet-phase-card .diet-phase-list li.diet-phase-highlight{color:#b5a999;font-weight:600}.supplement-reminder{background:#f3f3f3;border-radius:16px;padding:1.5rem 2rem}@media(max-width: 767px){.supplement-reminder{padding:1.25rem}}.supplement-item{background:#fff;border-radius:10px;padding:10px 14px;font-size:13px;font-weight:500;color:#212121;text-align:center;line-height:1.4;box-shadow:0 1px 4px rgba(0,0,0,.06)}.icon-img-container{display:flex;align-items:center;justify-content:center;width:80px;height:80px;background:#f3f3f3;border-radius:50%;flex-shrink:0;margin-bottom:4px}@media(max-width: 767px){.icon-img-container{width:64px;height:64px}}.point-item svg{flex-shrink:0}

/* ═══════════════════════════════════
   ADDONS – scroll cinema / ESG modules
   (merged from gastric-suture-addons.css)
═══════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   gastric-suture-addons.css
   追加模組：scroll cinematic hero / BMI Fit Score / diet timeline
   沿用原色系：#b5a999 (main) / #eff0a3 (yellow) / #212121 (text)
   ═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   A. Scroll-driven Cinematic Hero
   ───────────────────────────────────────────── */
.scroll-cinema {
  position: relative;
  background: #faf9f7;
}
/* 總高度 = 4 段 viewport；第一段不黏住，其餘由 sticky stage 呈現 */
.scroll-cinema__track {
  position: relative;
  height: 400vh;
}
.scroll-cinema__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: center;
  overflow: hidden;
}
/* Tablet/Mobile：viz 在上、copy 在下的分段式排版 */
@media (max-width: 1023px) {
  .scroll-cinema__track { height: 360vh; }
  .scroll-cinema__stage {
    grid-template-columns: 1fr;
    grid-template-rows: 44vh minmax(0, 1fr);
    align-items: stretch;
    top: 64px;
    height: calc(100vh - 64px);
  }
}
@media (max-width: 767px) {
  .scroll-cinema__track { height: 340vh; }
  .scroll-cinema__stage {
    grid-template-rows: 42vh minmax(0, 1fr);
    top: 48px;
    height: calc(100vh - 48px);
  }
}

/* 左側：文字層 */
.scroll-cinema__copy {
  padding: 0 clamp(24px, 6vw, 96px);
  position: relative;
  z-index: 2;
}
.scroll-cinema__eyebrow {
  font-family: "Red Hat Display", sans-serif;
  font-size: 13px;
  letter-spacing: 3px;
  color: #b5a999;
  text-transform: uppercase;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.scroll-cinema__eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  background: #b5a999;
}
.scroll-cinema__phrases {
  position: relative;
  min-height: clamp(120px, 18vh, 180px);
  margin-bottom: 28px;
}
.scroll-cinema__phrase {
  position: absolute;
  inset: 0;
  font-size: clamp(28px, 3.4vw, 52px);
  line-height: 1.25;
  letter-spacing: 1px;
  color: #212121;
  font-weight: 500;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.scroll-cinema__phrase strong {
  color: #b5a999;
  font-weight: 700;
}
.scroll-cinema__phrase em {
  font-style: normal;
  background: linear-gradient(180deg, transparent 62%, #eff0a3 62%);
  padding: 0 2px;
}
.scroll-cinema__phrase.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* 統計區塊 */
.scroll-cinema__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 24px 0;
  border-top: 1px solid rgba(181, 169, 153, 0.3);
}
.scroll-cinema__stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.scroll-cinema__stat-num {
  font-family: "Red Hat Display", sans-serif;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1;
  font-weight: 600;
  color: #212121;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.scroll-cinema__stat-num .suffix {
  font-size: 0.6em;
  color: #b5a999;
  margin-left: 2px;
}
.scroll-cinema__stat-label {
  font-size: 13px;
  color: #6d6459;
  letter-spacing: 0.5px;
}

.scroll-cinema__progress {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: "Red Hat Display", sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  color: #b5a999;
  text-transform: uppercase;
}
.scroll-cinema__progress-bar {
  flex: 1;
  height: 2px;
  background: rgba(181, 169, 153, 0.2);
  position: relative;
  overflow: hidden;
}
.scroll-cinema__progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, #b5a999, #eff0a3);
  transition: width .15s linear;
}

/* 右側：SVG 胃部可視化 */
.scroll-cinema__viz {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 20%, rgba(239, 240, 163, 0.18), transparent 60%),
    radial-gradient(circle at 70% 80%, rgba(181, 169, 153, 0.15), transparent 55%),
    #f2f0eb;
  overflow: hidden;
}
/* Mobile：viz 在第一列完整佔位，SVG 依容器高度自適應 */
@media (max-width: 1023px) {
  .scroll-cinema__viz {
    height: 100%;
    order: 0;
  }
  .scroll-cinema__copy {
    order: 1;
  }
}
.scroll-cinema__viz-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(181, 169, 153, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(181, 169, 153, 0.08) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}
.scroll-cinema__viz .scroll-cinema__main-svg {
  width: min(78%, 560px);
  height: auto;
  filter: drop-shadow(0 30px 60px rgba(181, 169, 153, 0.25));
}
@media (max-width: 1023px) {
  .scroll-cinema__viz .scroll-cinema__main-svg {
    width: auto;
    max-width: 82%;
    max-height: 92%;
  }
}
@media (max-width: 767px) {
  .scroll-cinema__viz .scroll-cinema__main-svg {
    max-width: 68%;
    max-height: 92%;
  }
}

/* 人體脈絡小圖（左上 overlay，避開 navbar / 尺寸標籤 / 對比 bar） */
.scroll-cinema__body-inset {
  position: absolute;
  top: clamp(90px, 12vh, 130px);
  left: 5%;
  width: clamp(64px, 7.5vw, 88px);
  height: auto;
  z-index: 2;
  opacity: 0.9;
  filter: drop-shadow(0 6px 14px rgba(33, 33, 33, 0.12));
}
.scroll-cinema__body-inset #bodyPulse {
  transition: cy 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  filter: drop-shadow(0 0 4px rgba(239, 240, 163, 0.8));
}
.scroll-cinema__body-inset #noIncisionBadge {
  transition: opacity 0.35s ease;
}
@media (max-width: 1023px) {
  .scroll-cinema__body-inset {
    top: 14px;
    left: 4%;
    width: 58px;
  }
}
@media (max-width: 767px) {
  .scroll-cinema__body-inset {
    top: 10px;
    left: 3%;
    width: 68px;
  }
}

/* ═══════════════════════════════════════════════
   Hero Copy refinement — desktop hierarchy polish
═══════════════════════════════════════════════ */
.scroll-cinema__hero { position: relative; }
.scroll-cinema__en-title {
  color: #b5a999;
  opacity: 0.85;
  font-style: italic;
  font-weight: 400;
}
.scroll-cinema__h1-sub strong {
  color: #2a2620;
  font-weight: 700;
  background: linear-gradient(180deg, transparent 62%, rgba(239, 240, 163, 0.8) 62%);
  padding: 0 3px;
}
/* Stats with vertical dividers between columns */
.scroll-cinema__stats {
  border-bottom: 1px solid rgba(181, 169, 153, 0.18);
  position: relative;
}
.scroll-cinema__stat {
  padding: 0 clamp(6px, 0.6vw, 10px);
  position: relative;
}
.scroll-cinema__stat:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: rgba(181, 169, 153, 0.22);
}
.scroll-cinema__stat:first-child {
  padding-left: 0;
}
.scroll-cinema__stat:last-child {
  padding-right: 0;
}
.scroll-cinema__stat-label {
  font-size: 12.5px;
  line-height: 1.5;
  color: #6d6459;
  letter-spacing: 0.3px;
  margin-top: 6px;
}

/* Mobile：尺寸標籤縮小 + 靠近胃 SVG */
@media (max-width: 767px) {
  .scroll-cinema__measure {
    font-size: 10px;
    letter-spacing: 1px;
  }
  .scroll-cinema__measure .val {
    font-size: 18px;
  }
  .scroll-cinema__measure--top {
    top: 8%;
    right: 6%;
  }
  .scroll-cinema__measure--bottom {
    bottom: 6%;
    left: 6%;
  }
}

/* Lv3：新相元素過渡 */
#endoscopeGroup {
  transition: opacity 0.4s ease;
}
#duodenum,
#duodenumFolded,
#esophagusEntry {
  transition: opacity 0.4s ease;
}
#endoscopeTube {
  transition: opacity 0.35s ease, stroke-dashoffset 0.18s linear;
}
#endoscopeTip {
  transition: opacity 0.35s ease, transform 0.08s linear;
  filter: drop-shadow(0 0 5px rgba(239, 240, 163, 0.9));
}
#endoscopePath {
  transition: opacity 0.35s ease;
}
.pair-stitch {
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center;
}
.pair-stitch .stitch-anchor {
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.35));
}
#pleats {
  transition: opacity 0.45s ease;
}
#compareGroup {
  transition: opacity 0.5s ease;
}

/* 尺寸標籤 */
.scroll-cinema__measure {
  position: absolute;
  font-family: "Red Hat Display", sans-serif;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: #b5a999;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .5s ease;
}
.scroll-cinema__measure.is-visible { opacity: 1; }
.scroll-cinema__measure--top {
  top: 18%;
  right: 10%;
  text-align: right;
}
.scroll-cinema__measure--bottom {
  bottom: 14%;
  left: 10%;
}
.scroll-cinema__measure .val {
  display: block;
  font-size: 28px;
  font-weight: 600;
  color: #212121;
  letter-spacing: 0;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.scroll-cinema__measure .val .dim { color: #b5a999; font-size: 14px; font-weight: 400; }

/* SVG 動畫狀態 */
.stomach-original,
.stomach-folded {
  transition: opacity .4s ease;
}
.suture-dot {
  opacity: 0;
  transform-origin: center;
  transition: opacity .35s ease;
}
.suture-dot.is-on { opacity: 1; }

/* ─────────────────────────────────────────────
   B. BMI Fit Score Assessment
   ───────────────────────────────────────────── */
.fit-score-module {
  background: #fff;
  border-radius: 24px;
  padding: clamp(24px, 4vw, 44px);
  margin-bottom: 48px;
  box-shadow: 0 20px 50px -20px rgba(181, 169, 153, 0.25);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(24px, 3vw, 44px);
  align-items: stretch;
}
@media (max-width: 900px) {
  .fit-score-module {
    grid-template-columns: 1fr;
  }
}
.fit-score-module__tag {
  font-family: "Red Hat Display", sans-serif;
  font-size: 11px;
  letter-spacing: 2.5px;
  color: #b5a999;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.fit-score-module__tag::before {
  content: "";
  width: 24px;
  height: 1px;
  background: #b5a999;
}
.fit-score-module__title {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600;
  line-height: 1.35;
  color: #212121;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}
.fit-score-module__title .main-color { color: #b5a999; }
.fit-score-module__desc {
  font-size: 14px;
  color: #6d6459;
  line-height: 1.7;
  margin-bottom: 24px;
}

/* Inputs */
.fit-input-group {
  margin-bottom: 20px;
}
.fit-input-group__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.fit-input-group__label {
  font-size: 13px;
  color: #6d6459;
  letter-spacing: 0.5px;
}
.fit-input-group__value {
  font-family: "Red Hat Display", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #212121;
  font-variant-numeric: tabular-nums;
}
.fit-input-group__value .unit {
  font-size: 12px;
  color: #b5a999;
  margin-left: 2px;
  font-weight: 400;
}
.fit-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 3px;
  background: rgba(181, 169, 153, 0.25);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.fit-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #212121;
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid #eff0a3;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: transform .15s ease;
}
.fit-range::-webkit-slider-thumb:hover { transform: scale(1.15); }
.fit-range::-moz-range-thumb {
  width: 20px; height: 20px;
  background: #212121;
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid #eff0a3;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* BMI spectrum */
.bmi-spectrum {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px dashed rgba(181, 169, 153, 0.4);
}
.bmi-spectrum__track {
  position: relative;
  height: 44px;
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1.2fr 1.2fr 1fr 0.8fr;
}
.bmi-spectrum__seg {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Red Hat Display", sans-serif;
  font-size: 10px;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.85);
  font-weight: 500;
}
.bmi-spectrum__seg:nth-child(1) { background: #cfc8be; }
.bmi-spectrum__seg:nth-child(2) { background: #b8ae9e; }
.bmi-spectrum__seg:nth-child(3) { background: #b5a999; }
.bmi-spectrum__seg:nth-child(4) { background: #9a8870; color: #fff; }
.bmi-spectrum__seg:nth-child(5) { background: #7a6a55; color: #fff; }
.bmi-spectrum__pointer {
  position: absolute;
  top: -8px;
  width: 2px;
  height: 60px;
  background: #212121;
  transform: translateX(-50%);
  transition: left .4s cubic-bezier(.4, 0, .2, 1);
  z-index: 2;
}
.bmi-spectrum__pointer::before {
  content: "";
  position: absolute;
  top: -6px; left: 50%;
  transform: translateX(-50%);
  width: 12px; height: 12px;
  background: #eff0a3;
  border: 2px solid #212121;
  border-radius: 50%;
}
.bmi-spectrum__labels {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 10px;
  font-family: "Red Hat Display", sans-serif;
  letter-spacing: 1px;
  color: #b5a999;
}

/* Comorbidity checkboxes */
.fit-comorb {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px dashed rgba(181, 169, 153, 0.4);
}
.fit-comorb__title {
  font-size: 13px;
  color: #6d6459;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}
.fit-comorb__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.fit-comorb__chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #f7f5f1;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 13px;
  color: #6d6459;
  cursor: pointer;
  transition: all .2s ease;
  user-select: none;
}
.fit-comorb__chip:hover {
  background: #f0ede6;
}
.fit-comorb__chip input {
  display: none;
}
.fit-comorb__chip .box {
  width: 16px; height: 16px;
  border: 1.5px solid #b5a999;
  border-radius: 4px;
  flex-shrink: 0;
  position: relative;
  transition: all .2s ease;
}
.fit-comorb__chip.is-on {
  background: #fff;
  border-color: #b5a999;
  color: #212121;
}
.fit-comorb__chip.is-on .box {
  background: #b5a999;
}
.fit-comorb__chip.is-on .box::after {
  content: "✓";
  position: absolute;
  inset: 0;
  color: #fff;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

/* Result panel */
.fit-result {
  background: #212121;
  border-radius: 20px;
  padding: 32px;
  color: #fff;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.fit-result::before {
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(239, 240, 163, 0.25), transparent 70%);
  pointer-events: none;
}
.fit-result__tag {
  font-family: "Red Hat Display", sans-serif;
  font-size: 11px;
  letter-spacing: 2.5px;
  color: #eff0a3;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.fit-result__score-wrap {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.fit-result__score {
  font-family: "Red Hat Display", sans-serif;
  font-size: 88px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -2px;
  transition: color .3s ease;
}
.fit-result__score-max {
  font-family: "Red Hat Display", sans-serif;
  font-size: 22px;
  color: rgba(255,255,255,0.4);
  font-weight: 300;
}
.fit-result__verdict {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 1px;
  margin-bottom: 20px;
  color: #eff0a3;
  min-height: 26px;
}
.fit-result__bar {
  height: 6px;
  background: rgba(255,255,255,0.12);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 24px;
}
.fit-result__bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #eff0a3, #d4d563);
  border-radius: 3px;
  transition: width .5s cubic-bezier(.4,0,.2,1);
}
.fit-result__advice-label {
  font-family: "Red Hat Display", sans-serif;
  font-size: 10px;
  letter-spacing: 2.5px;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.fit-result__advice {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.3px;
  margin-bottom: 20px;
  flex: 1;
}
.fit-result__advice strong {
  color: #eff0a3;
  font-weight: 600;
}
.fit-result__cta {
  background: #eff0a3;
  color: #212121;
  border: none;
  padding: 14px 24px;
  border-radius: 45px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all .2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "Noto Sans HK", sans-serif;
}
.fit-result__cta:hover {
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(239, 240, 163, 0.3);
}
.fit-result__disclaimer {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  margin-top: 12px;
  line-height: 1.5;
  letter-spacing: 0.3px;
}

/* ─────────────────────────────────────────────
   C. Diet Timeline Module (取代原 4 欄 diet-phase-card)
   ───────────────────────────────────────────── */
.diet-timeline {
  position: relative;
}

/* Top stepper */
.diet-timeline__stepper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
  margin-bottom: 40px;
  padding: 0 4px;
}
.diet-timeline__stepper::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: rgba(181, 169, 153, 0.2);
  z-index: 0;
}
.diet-timeline__stepper-fill {
  position: absolute;
  top: 24px;
  left: 12.5%;
  height: 2px;
  width: 0%;
  background: #b5a999;
  z-index: 1;
  transition: width .5s cubic-bezier(.4,0,.2,1);
}
.diet-step {
  position: relative;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-family: "Noto Sans HK", sans-serif;
  z-index: 2;
  transition: opacity .3s ease;
}
.diet-step__dot {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(181, 169, 153, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Red Hat Display", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #b5a999;
  transition: all .35s cubic-bezier(.4,0,.2,1);
}
.diet-step__label {
  font-size: 13px;
  color: #6d6459;
  letter-spacing: 0.5px;
  text-align: center;
  transition: color .3s ease;
}
.diet-step__sub {
  font-family: "Red Hat Display", sans-serif;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: #b5a999;
  text-transform: uppercase;
}
.diet-step.is-active .diet-step__dot {
  background: #212121;
  border-color: #212121;
  color: #eff0a3;
  transform: scale(1.08);
  box-shadow: 0 8px 24px rgba(33, 33, 33, 0.25);
}
.diet-step.is-active .diet-step__label {
  color: #212121;
  font-weight: 600;
}
.diet-step.is-complete .diet-step__dot {
  background: #b5a999;
  border-color: #b5a999;
  color: #fff;
}
.diet-step:hover:not(.is-active) .diet-step__dot {
  border-color: #b5a999;
  color: #212121;
}

/* Detail panel */
.diet-timeline__panel {
  background: #fff;
  border-radius: 24px;
  padding: clamp(28px, 4vw, 48px);
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: clamp(28px, 4vw, 56px);
  box-shadow: 0 20px 50px -20px rgba(181, 169, 153, 0.2);
  min-height: 420px;
}
@media (max-width: 900px) {
  .diet-timeline__panel {
    grid-template-columns: 1fr;
    gap: 24px;
    min-height: 0;
  }
}

.diet-timeline__marker {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid rgba(181, 169, 153, 0.2);
  padding-right: clamp(16px, 2vw, 32px);
}
@media (max-width: 900px) {
  .diet-timeline__marker {
    border-right: none;
    padding-right: 0;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(181, 169, 153, 0.2);
  }
}
.diet-timeline__week-label {
  font-family: "Red Hat Display", sans-serif;
  font-size: 11px;
  letter-spacing: 2.5px;
  color: #b5a999;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.diet-timeline__week-num {
  font-family: "Red Hat Display", sans-serif;
  font-size: clamp(72px, 9vw, 120px);
  font-weight: 300;
  line-height: 0.9;
  color: #212121;
  letter-spacing: -3px;
  font-variant-numeric: tabular-nums;
  transition: color .4s ease;
}
.diet-timeline__week-sub {
  font-size: 13px;
  color: #6d6459;
  letter-spacing: 0.5px;
  margin-top: 12px;
}
.diet-timeline__phase-name {
  font-size: 24px;
  font-weight: 600;
  color: #212121;
  letter-spacing: 1px;
  margin-top: 20px;
  line-height: 1.3;
}
.diet-timeline__phase-goal {
  font-size: 13px;
  color: #6d6459;
  line-height: 1.7;
  margin-top: 10px;
}
.diet-timeline__goal-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding: 6px 14px;
  background: #eff0a3;
  border-radius: 20px;
  font-size: 12px;
  color: #212121;
  font-weight: 500;
  letter-spacing: 0.3px;
  width: fit-content;
}

.diet-timeline__detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.5vw, 32px);
  align-content: start;
}
@media (max-width: 700px) {
  .diet-timeline__detail { grid-template-columns: 1fr; }
}
.diet-timeline__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.diet-timeline__col-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(181, 169, 153, 0.2);
}
.diet-timeline__col-icon {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.diet-timeline__col--ok .diet-timeline__col-icon {
  background: rgba(181, 169, 153, 0.15);
  color: #b5a999;
}
.diet-timeline__col--no .diet-timeline__col-icon {
  background: rgba(204, 128, 128, 0.15);
  color: #cc8080;
}
.diet-timeline__col-title {
  font-size: 13px;
  color: #212121;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.diet-timeline__item {
  font-size: 14px;
  color: #4a4139;
  line-height: 1.55;
  padding: 6px 0;
  display: flex;
  gap: 10px;
}
.diet-timeline__item::before {
  content: "";
  flex-shrink: 0;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #b5a999;
  margin-top: 8px;
}
.diet-timeline__col--no .diet-timeline__item::before {
  background: #cc8080;
}
.diet-timeline__tip {
  grid-column: 1 / -1;
  margin-top: 20px;
  padding: 18px 22px;
  background: linear-gradient(135deg, #f7f5f1 0%, #f0ede6 100%);
  border-radius: 14px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.diet-timeline__tip-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #212121;
  color: #eff0a3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  font-family: "Red Hat Display", sans-serif;
}
.diet-timeline__tip-text {
  font-size: 13px;
  color: #4a4139;
  line-height: 1.7;
  letter-spacing: 0.3px;
}
.diet-timeline__tip-text strong {
  color: #212121;
}

/* Panel fade-in on switch */
.diet-timeline__panel[data-switching="true"] .diet-timeline__marker,
.diet-timeline__panel[data-switching="true"] .diet-timeline__detail {
  opacity: 0;
  transform: translateY(8px);
}
.diet-timeline__marker,
.diet-timeline__detail {
  transition: opacity .25s ease, transform .25s ease;
}

/* ═══════════════════════════════════════════════
   icon-cards-grid --quad：4 張卡片專用（Section 3、7）
   - 桌機 (≥1200px)：4 欄
   - 中尺寸 (768-1199px)：2 欄 × 2 列
   - 手機 (<768px)：1 欄
═══════════════════════════════════════════════ */
.icon-cards-grid.icon-cards-grid--quad {
  gap: 24px;
}
@media (min-width: 1200px) {
  .icon-cards-grid.icon-cards-grid--quad {
    grid-template-columns: repeat(4, 1fr);
  }
  .icon-cards-grid.icon-cards-grid--quad .inside-icon-card {
    padding-inline: 28px;
    padding-block: 36px;
  }
  .icon-cards-grid.icon-cards-grid--quad .icon-title {
    font-size: 20px;
    line-height: 1.5;
  }
  .icon-cards-grid.icon-cards-grid--quad p {
    font-size: 14.5px;
    line-height: 1.7;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .icon-cards-grid.icon-cards-grid--quad {
    grid-template-columns: repeat(2, 1fr);
  }
  /* 使用 --quad 時，忽略 .third-item 的 1/-1 置中 */
  .icon-cards-grid.icon-cards-grid--quad .third-item {
    grid-column: auto;
    justify-self: stretch;
  }
}

/* ═══════════════════════════════════════════════
   Section 2 — Candidate Layout（3 欄：適合 | 人像 | 不適合）
═══════════════════════════════════════════════ */
.candidate-layout {
  margin-top: clamp(24px, 2.4vw, 40px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: end;
}
@media (min-width: 1024px) {
  .candidate-layout {
    grid-template-columns: 5fr 3fr 5fr;
    gap: clamp(20px, 2vw, 36px);
  }
}

/* ═══════════════════════════════════════════════
   Section 2 — Candidate Cards（適合 vs 不適合）
   - 參考 meal-plan-weight-loss.html 的 point-item-list +
     process-weight-loss.html 的 inside-icon-card 編號風格
   - 左 = 暖棕色系（適合），右 = 暖紅警示（不適合）
═══════════════════════════════════════════════ */
.candidate-column {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.2vw, 18px);
}
.candidate-column__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: clamp(4px, 0.6vw, 10px);
  border-bottom: 1px solid rgba(181, 169, 153, 0.28);
  font-family: 'Noto Sans TC', sans-serif;
  font-size: clamp(17px, 1.4vw, 22px);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.candidate-column--yes .candidate-column__header {
  color: #8b7a5f;
}
.candidate-column--no .candidate-column__header {
  color: #b96a6a;
  border-bottom-color: rgba(185, 106, 106, 0.28);
}
.candidate-column__badge {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}
.candidate-column--yes .candidate-column__badge {
  background: #eff0a3;
  color: #6b6b1f;
}
.candidate-column--no .candidate-column__badge {
  background: #f5d5d5;
  color: #8b4242;
}

.candidate-card {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: clamp(16px, 1.4vw, 22px) clamp(18px, 1.6vw, 26px);
  padding-left: clamp(22px, 2vw, 30px);
  display: flex;
  gap: clamp(12px, 1.2vw, 16px);
  align-items: flex-start;
  box-shadow: 0 2px 10px rgba(42, 38, 32, 0.04);
  border: 1px solid rgba(181, 169, 153, 0.15);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  overflow: hidden;
}
.candidate-card::before {
  content: "";
  position: absolute;
  left: 0; top: 14%; bottom: 14%;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: #b5a999;
  transition: width 0.25s ease;
}
.candidate-card--no::before {
  background: #cc8080;
}
.candidate-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -10px rgba(42, 38, 32, 0.18);
  border-color: rgba(181, 169, 153, 0.35);
}
.candidate-card:hover::before {
  width: 6px;
}
.candidate-card--no:hover {
  border-color: rgba(204, 128, 128, 0.35);
}

.candidate-card__icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #faf8f4 0%, #efe9de 100%);
}
.candidate-card--no .candidate-card__icon {
  background: linear-gradient(145deg, #fdf4f4 0%, #f5dede 100%);
}
.candidate-card__icon svg {
  width: 22px;
  height: 22px;
}

.candidate-card__body {
  flex: 1;
  min-width: 0;
}
.candidate-card__title {
  display: block;
  font-size: clamp(15px, 1.15vw, 17.5px);
  font-weight: 700;
  color: #2a2620;
  line-height: 1.4;
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}
.candidate-card--no .candidate-card__title {
  color: #6b4a4a;
}
.candidate-card__desc {
  margin: 0;
  font-size: clamp(13px, 0.95vw, 14.5px);
  line-height: 1.7;
  color: #6b6357;
}

/* 中央人像圖區 */
.candidate-persona {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  padding: 0 clamp(10px, 1vw, 20px);
}
.candidate-persona__img {
  width: 100%;
  max-width: 320px;
  height: auto;
  display: block;
  filter: drop-shadow(0 12px 30px rgba(42, 38, 32, 0.12));
}
.candidate-persona__tag {
  margin-top: 0;
  padding: 8px 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, #faf8f4 0%, #efe9de 100%);
  border: 1px solid rgba(181, 169, 153, 0.28);
  font-size: clamp(12px, 0.9vw, 13.5px);
  color: #6b6357;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.candidate-persona__tag strong {
  color: #8b7a5f;
  font-weight: 700;
  margin-right: 4px;
}

@media (max-width: 1023px) {
  .candidate-persona {
    padding: 20px 0;
  }
  .candidate-persona__img {
    max-width: 220px;
  }
}

/* ═══════════════════════════════════════════════
   Section 1 — fact-pills 視覺分隔條（取代大段文字）
═══════════════════════════════════════════════ */
.esg-fact-pills {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.4vw, 20px);
  max-width: 900px;
  margin: clamp(20px, 2.4vw, 32px) auto clamp(24px, 2.8vw, 36px);
  padding: clamp(16px, 2vw, 24px) clamp(14px, 2vw, 28px);
  background: linear-gradient(180deg, #faf8f4 0%, #f5f1ea 100%);
  border: 1px solid rgba(181, 169, 153, 0.18);
  border-radius: 22px;
}
.esg-fact-pill {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(8px, 1vw, 12px) clamp(8px, 1vw, 14px);
  border-right: 1px solid rgba(181, 169, 153, 0.22);
}
.esg-fact-pill:last-child {
  border-right: none;
}
.esg-fact-pill__num {
  font-family: 'Red Hat Display', 'Noto Sans TC', sans-serif;
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 700;
  color: #b5a999;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.esg-fact-pill__label {
  font-size: clamp(12px, 0.95vw, 14px);
  color: #4a4238;
  line-height: 1.45;
  letter-spacing: 0.02em;
}
@media (max-width: 767px) {
  .esg-fact-pills {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 18px 16px;
  }
  .esg-fact-pill {
    border-right: none;
    border-bottom: 1px solid rgba(181, 169, 153, 0.22);
    padding: 10px 4px;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
  }
  .esg-fact-pill:last-child { border-bottom: none; }
  .esg-fact-pill__num {
    font-size: 24px;
  }
}

/* ═══════════════════════════════════════════════
   Scroll Cinema — Hero Layer（取代傳統 banner Hero）
   - H1 / EN title / sub / CTA 置於 copy 欄頂部，persistent 顯示
   - 捲動時 phrases 疊加敘事，stats 保持可讀靜態範圍
═══════════════════════════════════════════════ */
.scroll-cinema__hero {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.8vw, 14px);
  margin-bottom: clamp(24px, 3vw, 40px);
  padding-bottom: clamp(16px, 1.8vw, 24px);
  border-bottom: 1px solid rgba(181, 169, 153, 0.18);
}
/* .scroll-cinema__en-title 已停用（英文名已存在於 h1 ESG、<title>、meta、Schema）；
   全螢幕以 sr-only 技巧隱藏，不佔視覺空間但保留可存取性與 SEO 可讀性 */
.scroll-cinema__en-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.scroll-cinema__h1 {
  font-family: 'Noto Serif TC', 'Noto Sans TC', serif;
  font-size: clamp(32px, 3.8vw, 56px);
  font-weight: 700;
  line-height: 1.15;
  color: #2a2620;
  margin: 0;
  letter-spacing: -0.01em;
}
.scroll-cinema__h1-sub {
  display: block;
  margin-top: clamp(6px, 0.6vw, 10px);
  font-family: 'Noto Sans TC', sans-serif;
  font-size: clamp(15px, 1.25vw, 19px);
  font-weight: 500;
  line-height: 1.5;
  color: #4a4238;
  letter-spacing: 0;
}
/* .scroll-cinema__sub 已停用（資訊與 Section 2 重複，stats 亦涵蓋）；
   保留於 DOM 作為 SEO 補充，視覺上全螢幕隱藏 */
.scroll-cinema__sub {
  display: none;
}
.scroll-cinema__cta {
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, 1vw, 14px);
  margin-top: clamp(18px, 2vw, 28px);
  padding: clamp(12px, 1.2vw, 16px) clamp(20px, 2vw, 28px);
  background: #2a2620;
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  font-family: 'Noto Sans TC', sans-serif;
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 600;
  letter-spacing: 0.04em;
  align-self: flex-start;
  transition: background 0.25s ease, transform 0.25s ease;
  box-shadow: 0 8px 24px -8px rgba(42, 38, 32, 0.4);
}
.scroll-cinema__cta:hover {
  background: #b5a999;
  transform: translateY(-2px);
}
.scroll-cinema__cta-label {
  font-family: 'Red Hat Display', sans-serif;
  font-size: 0.82em;
  letter-spacing: 0.14em;
  padding-right: clamp(8px, 0.8vw, 12px);
  border-right: 1px solid rgba(255, 255, 255, 0.25);
}
.scroll-cinema__cta-arrow {
  font-size: 1.1em;
  transition: transform 0.25s ease;
}
.scroll-cinema__cta:hover .scroll-cinema__cta-arrow {
  transform: translateX(4px);
}

/* 調整 phrases 尺寸以配合 Hero 共存 */
.scroll-cinema__copy .scroll-cinema__phrases {
  margin-bottom: clamp(20px, 2.2vw, 32px);
}
.scroll-cinema__copy .scroll-cinema__phrase {
  font-size: clamp(22px, 2.4vw, 36px);
  line-height: 1.35;
}

/* Mobile：單欄堆疊，Hero 優先 */
@media (max-width: 900px) {
  .scroll-cinema__h1 {
    font-size: clamp(28px, 7vw, 40px);
  }
  .scroll-cinema__h1-sub {
    font-size: clamp(14px, 3.8vw, 17px);
  }
  .scroll-cinema__hero {
    margin-bottom: 20px;
    padding-bottom: 16px;
  }
  .scroll-cinema__cta {
    width: 100%;
    justify-content: center;
  }
}

/* Mobile ≤767px：copy 區編輯風精簡排版 */
@media (max-width: 767px) {
  .scroll-cinema__copy {
    padding: 18px 22px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    overflow: hidden;
    gap: 14px;
  }

  /* Hero header — 精簡為 3 行：eyebrow / h1 / tagline */
  .scroll-cinema__hero {
    gap: 0;
    margin-bottom: 0;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(181, 169, 153, 0.18);
  }
  .scroll-cinema__eyebrow {
    font-size: 10.5px;
    letter-spacing: 1.8px;
    margin-bottom: 10px;
    gap: 10px;
    color: #b5a999;
    opacity: 0.95;
  }
  .scroll-cinema__eyebrow::before {
    width: 22px;
  }
  /* 手機隱藏 en-title（與 eyebrow 資訊重複；SEO 仍保留於 meta/schema） */
  .scroll-cinema__en-title { display: none; }

  .scroll-cinema__h1 {
    font-size: 30px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0;
    color: #2a2620;
  }
  .scroll-cinema__h1-sub {
    display: block;
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 1.55;
    color: #524a41;
    font-weight: 400;
    letter-spacing: 0.02em;
  }
  .scroll-cinema__sub { display: none; }

  /* Narrative phrases — 清晰主體 */
  .scroll-cinema__phrases {
    min-height: 70px;
    margin-bottom: 0;
  }
  .scroll-cinema__copy .scroll-cinema__phrase {
    font-size: 17px;
    line-height: 1.5;
    letter-spacing: 0;
    font-weight: 500;
    color: #2a2620;
  }

  /* Stats — 垂直分隔線、更大數字、更清楚 label */
  .scroll-cinema__stats {
    padding: 14px 0;
    gap: 0;
    border-top: 1px solid rgba(181, 169, 153, 0.22);
    border-bottom: 1px solid rgba(181, 169, 153, 0.22);
  }
  .scroll-cinema__stat {
    gap: 4px;
    padding: 0 6px;
  }
  .scroll-cinema__stat:first-child { padding-left: 0; }
  .scroll-cinema__stat-num {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.5px;
  }
  .scroll-cinema__stat-num .suffix {
    font-size: 0.55em;
    margin-left: 2px;
  }
  .scroll-cinema__stat-label {
    font-size: 11px;
    letter-spacing: 0.3px;
    line-height: 1.35;
    margin-top: 2px;
  }

  /* CTA + Progress — 底部緊湊排列 */
  .scroll-cinema__cta {
    margin-top: 0;
    padding: 11px 20px;
    font-size: 13.5px;
    width: 100%;
    justify-content: center;
  }
  .scroll-cinema__progress {
    margin-top: 4px;
    font-size: 10px;
    gap: 10px;
  }
}


/* ═══════════════════════════════════════════════
   Section 1 — inside-icon-card：icon-card-content
   (移植自 meal-plan-weight-loss.scss)
═══════════════════════════════════════════════ */
.inside-icon-card .icon-card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ───────────────────────────────────────────────
   Section 1 手機版重設計
   三張「proof 卡片」(非 advantage-card) 改為緊湊橫向：
   圓角 icon 圈 + 左 accent bar + 短文
─────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* 縮小卡片間距 */
  .icon-cards-grid:not(.icon-cards-grid--quad) {
    gap: 14px;
  }

  /* 卡片本體：水平排列，帶左色條 */
  .icon-cards-grid:not(.icon-cards-grid--quad) .inside-icon-card {
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border-radius: 14px;
    border-left: 4px solid #c5b4a2;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  }

  /* Icon 容器：改成圓形，縮小 */
  .icon-cards-grid:not(.icon-cards-grid--quad) .icon-img-container {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px;
    padding: 11px !important;
    border-radius: 50% !important;
    flex-shrink: 0;
    margin: 0 !important;
  }

  /* 文字區：靠左對齊 */
  .icon-cards-grid:not(.icon-cards-grid--quad) .icon-card-content {
    align-items: flex-start;
    justify-content: flex-start;
  }
  .icon-cards-grid:not(.icon-cards-grid--quad) .icon-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 5px;
    line-height: 1.4;
  }
  .icon-cards-grid:not(.icon-cards-grid--quad) p {
    font-size: 13px;
    line-height: 1.7;
    color: #666;
    margin: 0;
  }
}

/* ───────────────────────────────────────────────
   Section 3 advantage-card 手機版修正
   advantage-card 無 icon-card-content wrapper，
   不能套用 flex-direction:row，強制保持直向排列
─────────────────────────────────────────────── */
@media (max-width: 767px) {
  .advantage-card.inside-icon-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 20px !important;
    border-radius: 14px !important;
    border-left: none !important;
    box-shadow: none !important;
    gap: 0 !important;
  }
  .advantage-card .icon-img-container {
    width: 58px !important;
    height: 58px !important;
    padding: 12px !important;
    border-radius: 12px !important;
    margin: 0 0 10px 0 !important;
    flex-shrink: 0;
  }
  .advantage-card .icon-title {
    text-align: left;
    font-size: 17px;
    margin-bottom: 8px;
  }
  .advantage-card p {
    text-align: left;
    font-size: 13.5px;
    line-height: 1.75;
  }
  /* 手機改為 1 欄，避免文字擠壓 */
  .icon-cards-grid.icon-cards-grid--quad {
    grid-template-columns: repeat(1, 1fr);
    gap: 14px;
  }
}

/* ═══════════════════════════════════════════════
   Section 7 — float-icon-card SVG hover 支援
   icon-circle 內改用 SVG（無 .icon-img filter）
   hover 時 icon bg → #212121，SVG stroke → #fff
═══════════════════════════════════════════════ */
/* 桌機：69px；手機由 shared CSS 的 56px 接管 */
@media (min-width: 768px) {
  .float-icon-card .icon-circle svg.icon-img {
    width: 69px;
    height: 69px;
  }
}
/* 手機：縮小 icon 圓圈，給文字更多空間 */
@media (max-width: 767px) {
  .float-icon-card .icon-circle {
    padding: 12px !important;
  }
  .float-icon-card .icon-circle svg.icon-img {
    width: 38px;
    height: 38px;
  }
}
.float-icon-card .icon-circle svg.icon-img {
  transition: stroke 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .float-icon-card:hover .icon-circle svg.icon-img {
    stroke: #fff;
  }
}
/* ═══════════════════════════════════════════════
   Section 7 float-icon-card：4-欄時標題統一為 20px
   （與 --quad 的 icon-title 一致）
═══════════════════════════════════════════════ */
@media (min-width: 1200px) {
  .float-icon-card .cards-6items .icon-title {
    font-size: 20px;
    line-height: 1.5;
  }
}

/* ═══════════════════════════════════════════════
   全頁 RWD 補強：tablet 768-1199px
   - 3-col 卡片（Section 1）：2-col on tablet
   - 補充 inside-icon-card 行動版文字左對齊
═══════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1199px) {
  /* Section 1 在 tablet 顯示 2 欄（原本 3 欄） */
  .icon-cards-grid:not(.icon-cards-grid--quad) {
    grid-template-columns: repeat(2, 1fr);
  }
  /* 第三張卡回到正常流，不強制橫跨 */
  .icon-cards-grid:not(.icon-cards-grid--quad) .third-item {
    grid-column: auto;
    justify-self: stretch;
  }
}

/* ═══════════════════════════════════════════════
   流程步驟 Section 5：font-size 對齊（長標題）
   flow-step-content h3 目前 24px 容易在 tablet 換行多次
   改為與卡片區段一致的 20px
═══════════════════════════════════════════════ */
@media (min-width: 1200px) {
  .flow-step-content .icon-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
  }
}

/* ═══════════════════════════════════════════════
   比較表格行動版：鎖定第一欄 + 橫向滑動
   結構：
     .comparison-table-wrapper  ← 非 overflow，::before 顯示提示文字
       .comparison-table-scroll ← overflow-x: auto，實際滾動容器
         table.comparison-table ← width: 180%，寬於視窗
   第一欄用 position: sticky; left: 0 鎖定，滑動時項目名稱始終可見
═══════════════════════════════════════════════ */

/* 把原本 gastric-suture.css 的 overflow-x: auto 從 wrapper 移到 inner scroll div */
.comparison-table-wrapper {
  overflow: visible !important;
}
.comparison-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  box-shadow: 0 2px 16px rgba(0,0,0,.06);
}

@media (max-width: 767px) {
  /* 提示文字在滾動區之外，正常顯示 */
  .comparison-table-wrapper::before {
    content: "← 左右滑動查看完整比較 →";
    display: block;
    text-align: center;
    font-size: 12px;
    color: #b5a999;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
  }
  /* 表格拉寬到 180%，參考 mounjaro w-[180%] 作法 */
  .comparison-table {
    width: 180% !important;
    min-width: 0 !important;
  }
  /* 第一欄（項目名稱）：sticky 鎖定在左側 */
  .comparison-table thead tr th.row-header,
  .comparison-table tbody tr td.row-label {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
    white-space: normal;
    word-break: break-word;
    font-size: 13px;
    padding: 10px !important;
    box-shadow: 2px 0 6px rgba(0,0,0,0.08);
  }
  .comparison-table thead tr th.row-header {
    background: #212121;
    color: #fff;
  }
  .comparison-table tbody tr td.row-label {
    background: #f3f3f3;
  }
  .comparison-table thead tr th:not(.row-header) {
    padding: 10px 12px !important;
    font-size: 13px;
  }
  .comparison-table tbody tr td:not(.row-label) {
    padding: 10px 12px !important;
    font-size: 13px;
  }
}

/* ═══════════════════════════════════════════════
   Section 1 redesign：ESG Pillars 編輯風三卡片
   (來自 claude.ai/design handoff，chat2)
═══════════════════════════════════════════════ */
.esg-pillars {
  position: relative;
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
}
.esg-pillars__rail {
  position: absolute;
  top: 46px;
  left: 8%; right: 8%;
  height: 1px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  z-index: 0;
}
.esg-pillars__rail::before {
  content: "";
  position: absolute;
  inset: 0;
  border-top: 1px dashed rgba(181,169,153,0.45);
}
.esg-pillars__rail-dot {
  position: relative;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #eff0a3;
  border: 1.5px solid #212121;
}
.esg-pillar {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 28px;
  padding: clamp(22px, 2.6vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  border: 1px solid rgba(181,169,153,0.18);
  transition: transform .3s ease, box-shadow .3s ease;
}
.esg-pillar:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 40px -24px rgba(181,169,153,0.35);
}
.esg-pillar__header { display: flex; gap: 14px; align-items: flex-start; }
.esg-pillar__marker {
  flex-shrink: 0;
  width: 52px; height: 52px;
  border-radius: 14px;
  background: #212121;
  color: #eff0a3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Red Hat Display", sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 1.5px;
}
.esg-pillar__headline { flex: 1; min-width: 0; }
.esg-pillar__eyebrow {
  font-family: "Red Hat Display", sans-serif;
  font-size: 10px; letter-spacing: 2.5px;
  color: #b5a999; text-transform: uppercase;
  margin-bottom: 8px;
}
.esg-pillar__title {
  font-size: clamp(19px, 1.7vw, 23px);
  font-weight: 600; line-height: 1.4;
  color: #212121; letter-spacing: 0.5px; margin: 0;
}
.esg-pillar__title sup { font-size: 0.55em; color: #b5a999; vertical-align: super; }
.esg-pillar__visual {
  position: relative;
  border-radius: 16px;
  background: #faf9f5;
  padding: 18px 16px 22px;
  border: 1px dashed rgba(181,169,153,0.35);
}
.esg-pillar__visual svg { width: 100%; height: auto; display: block; }
.esg-pillar__viz-sub {
  font-family: "Red Hat Display", sans-serif;
  font-size: 8px; letter-spacing: 1.5px;
  fill: #6d6459; text-transform: uppercase;
}
.esg-pillar__viz-label {
  position: absolute;
  bottom: 6px; right: 12px;
  font-family: "Red Hat Display", sans-serif;
  font-size: 9px; letter-spacing: 2px;
  color: #b5a999; text-transform: uppercase;
}
.esg-pillar__body {
  font-size: 14px; line-height: 1.8;
  color: #4a4139; margin: 0; flex: 1;
}
.esg-pillar__body strong { color: #212121; font-weight: 600; }
.esg-pillar__stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 16px;
  border-top: 1px solid rgba(181,169,153,0.22);
  margin: 0;
}
.esg-pillar__stat dt { font-size: 12px; letter-spacing: 1.5px; color: #6d6459; }
.esg-pillar__stat dd { margin: 0; display: flex; align-items: baseline; gap: 4px; }
.esg-pillar__big {
  font-family: "Red Hat Display", sans-serif;
  font-size: 36px; font-weight: 600;
  color: #212121; line-height: 1;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
}
.esg-pillar__big .sep { color: #b5a999; margin: 0 2px; font-weight: 300; }
.esg-pillar__unit {
  font-family: "Red Hat Display", sans-serif;
  font-size: 16px; font-weight: 500; color: #b5a999;
}
@media (max-width: 900px) {
  .esg-pillars { grid-template-columns: 1fr; gap: 16px; }
  .esg-pillars__rail { display: none; }
  .esg-pillar__br { display: none; }
}

/* ═══════════════════════════════════════════════
   Section 3 redesign：四大關鍵優勢 editorial grid
   (來自 claude.ai/design handoff，chat2)
═══════════════════════════════════════════════ */
.adv-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(24px, 4vw, 72px);
  align-items: end;
  margin-bottom: 44px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(181,169,153,0.25);
}
.adv-head__left { text-align: left; }
.adv-head__left .content-title { margin-bottom: 0; text-align: left; }
.adv-head__eyebrow {
  font-family: "Red Hat Display", sans-serif;
  font-size: 11px; letter-spacing: 3px;
  color: #b5a999; text-transform: uppercase;
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 12px;
}
.adv-head__eyebrow::before {
  content: ""; width: 28px; height: 1px; background: #b5a999;
}
.adv-head__desc {
  font-size: 15px; line-height: 1.85;
  color: #4a4139; margin: 0;
  max-width: 540px; justify-self: end;
}
.adv-head__desc strong { color: #212121; font-weight: 600; }
@media (max-width: 900px) {
  .adv-head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 28px; }
  .adv-head__desc { justify-self: start; }
}

.adv-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: clamp(14px, 1.8vw, 22px);
}
.adv-card {
  position: relative;
  border-radius: 28px;
  padding: clamp(24px, 2.8vw, 36px);
  display: flex; flex-direction: column; gap: 18px;
  transition: transform .3s ease, box-shadow .3s ease;
  overflow: hidden;
}
.adv-card:hover { transform: translateY(-4px); box-shadow: 0 28px 48px -30px rgba(0,0,0,0.25); }
.adv-card__meta {
  display: flex; align-items: center; gap: 14px;
  font-family: "Red Hat Display", sans-serif;
}
.adv-card__idx {
  font-size: 13px; font-weight: 700; letter-spacing: 2px;
  padding: 4px 10px;
  border: 1px solid currentColor; border-radius: 999px;
}
.adv-card__tag { font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; opacity: 0.6; }
.adv-card__title {
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 600; line-height: 1.35; letter-spacing: 0.5px; margin: 0;
}
.adv-card__body { font-size: 14px; line-height: 1.8; margin: 0; }
.adv-card__body strong { font-weight: 600; }

/* Hero card (01) — dark, spans rows 1-2, col 1 */
.adv-card--hero {
  grid-column: 1; grid-row: 1 / span 2;
  background: #212121; color: #fff;
}
.adv-card--hero .adv-card__tag { color: #eff0a3; opacity: 1; }
.adv-card--hero .adv-card__idx { color: #eff0a3; border-color: rgba(239,240,163,0.5); }
.adv-card--hero .adv-card__body { color: rgba(255,255,255,0.8); }
.adv-card--hero .adv-card__body strong { color: #eff0a3; }
.adv-card__figure {
  margin-top: auto; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.adv-figure-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.adv-fig {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px; padding: 14px 12px 12px; text-align: center;
}
.adv-fig--hl {
  background: rgba(239,240,163,0.08);
  border-color: rgba(239,240,163,0.3);
}
.adv-fig svg { width: 54px; height: 72px; display: block; margin: 4px auto 8px; }
.adv-fig__label {
  font-family: "Red Hat Display", sans-serif;
  font-size: 10px; letter-spacing: 2px;
  color: rgba(255,255,255,0.5); text-transform: uppercase;
}
.adv-fig__count { font-size: 12px; color: rgba(255,255,255,0.75); margin-top: 4px; }
.adv-fig__count--hl { color: #eff0a3; font-weight: 600; }

/* Light cards (02, 03) */
.adv-card--light {
  background: #fff; color: #212121;
  border: 1px solid rgba(181,169,153,0.18);
}
.adv-card--light .adv-card__idx { color: #212121; }
.adv-card--light .adv-card__tag { color: #b5a999; }
.adv-card--light .adv-card__body { color: #4a4139; }
.adv-card--light .adv-card__body strong { color: #212121; }

/* Metric block (02) */
.adv-card__metric {
  display: flex; align-items: center; gap: 18px;
  margin-top: auto; padding-top: 18px;
  border-top: 1px solid rgba(181,169,153,0.22);
}
.adv-metric { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.adv-metric__num {
  font-family: "Red Hat Display", sans-serif;
  font-size: 30px; font-weight: 600; color: #212121;
  line-height: 1; letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}
.adv-metric__num .sep { color: #b5a999; font-weight: 300; margin: 0 1px; }
.adv-metric__unit {
  font-family: "Red Hat Display", sans-serif;
  font-size: 11px; letter-spacing: 2px;
  color: #b5a999; text-transform: uppercase; margin-top: 4px;
}
.adv-metric__label { font-size: 12px; color: #6d6459; margin-top: 4px; }
.adv-metric-divider { width: 1px; height: 44px; background: rgba(181,169,153,0.25); }

/* Recovery bars (03) */
.adv-timeline {
  margin-top: auto; padding-top: 16px;
  border-top: 1px solid rgba(181,169,153,0.22);
  display: flex; flex-direction: column; gap: 12px;
}
.adv-timeline__row {
  display: grid; grid-template-columns: 72px 1fr 52px;
  gap: 12px; align-items: center; font-size: 12px;
}
.adv-timeline__label { color: #6d6459; }
.adv-timeline__bar {
  height: 8px; background: rgba(181,169,153,0.15);
  border-radius: 4px; overflow: hidden;
}
.adv-timeline__bar span { display: block; height: 100%; border-radius: 4px; }
.adv-timeline__bar--old span { background: #b5a999; }
.adv-timeline__bar--new span { background: #212121; }
.adv-timeline__val {
  font-family: "Red Hat Display", sans-serif;
  font-size: 12px; font-weight: 600; color: #212121;
  text-align: right; letter-spacing: 0.5px;
}

/* Accent card (04) — yellow, spans cols 2-3, row 2 */
.adv-card--accent {
  grid-column: 2 / span 2;
  background: #eff0a3; color: #212121;
}
.adv-card--accent .adv-card__idx { color: #212121; border-color: rgba(33,33,33,0.5); }
.adv-card--accent .adv-card__tag { color: #524b43; opacity: 1; }
.adv-card--accent .adv-card__body { color: #2d2822; }
.adv-stack {
  margin: auto 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; padding-top: 18px;
  border-top: 1px solid rgba(33,33,33,0.12);
}
.adv-stack li { display: flex; gap: 10px; align-items: flex-start; }
.adv-stack__dot {
  flex-shrink: 0; width: 8px; height: 8px;
  border-radius: 50%; background: #212121; margin-top: 7px;
}
.adv-stack strong {
  display: block; font-size: 14px;
  font-weight: 600; color: #212121; margin-bottom: 2px;
}
.adv-stack em {
  font-style: normal; display: block;
  font-size: 12px; line-height: 1.6; color: #524b43;
}

@media (max-width: 1100px) {
  .adv-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
  }
  .adv-card--hero { grid-column: 1 / -1; grid-row: auto; }
  .adv-card--accent { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .adv-grid { grid-template-columns: 1fr; }
  .adv-card--hero, .adv-card--accent { grid-column: 1; }
  .adv-stack { grid-template-columns: 1fr; gap: 10px; }
}

/* ═══════════════════════════════════════════════
   Section 5 redesign：完整療程流程 editorial timeline
═══════════════════════════════════════════════ */
.flow-journey {
  position: relative;
  margin-top: 44px;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(28px, 3vw, 56px);
}
.flow-journey__aside {
  position: sticky;
  top: 96px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 20px;
  background: #faf9f5;
  border: 1px solid rgba(181,169,153,0.22);
  border-radius: 22px;
}
.flow-journey__eyebrow {
  font-family: "Red Hat Display", sans-serif;
  font-size: 10px; letter-spacing: 2.5px;
  color: #b5a999; text-transform: uppercase;
}
.flow-journey__counter {
  font-family: "Red Hat Display", sans-serif;
  font-size: 64px; font-weight: 600;
  color: #212121; line-height: 1;
  letter-spacing: -2px;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.flow-journey__counter .sep {
  font-family: "Red Hat Display", sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 2px;
  color: #b5a999;
  text-transform: uppercase;
}
.flow-journey__hint {
  font-size: 12px; line-height: 1.7;
  color: #6d6459;
  padding-top: 14px;
  border-top: 1px dashed rgba(181,169,153,0.35);
}
.flow-journey__list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 22px);
  padding-left: 64px;
  list-style: none;
  margin: 0;
}
.flow-journey__list::before {
  content: "";
  position: absolute;
  left: 22px; top: 22px; bottom: 22px;
  width: 0;
  border-left: 1px dashed rgba(181,169,153,0.55);
  z-index: 0;
}
.flow-node {
  position: relative;
  z-index: 1;
  background: #fff;
  border: 1px solid rgba(181,169,153,0.2);
  border-radius: 22px;
  padding: clamp(20px, 2vw, 28px) clamp(22px, 2.4vw, 32px);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.flow-node:hover {
  transform: translateX(4px);
  border-color: rgba(181,169,153,0.45);
  box-shadow: 0 22px 40px -28px rgba(181,169,153,0.35);
}
.flow-node__marker {
  position: absolute;
  left: -64px; top: 18px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #212121;
  color: #eff0a3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Red Hat Display", sans-serif;
  font-size: 13px; font-weight: 600;
  letter-spacing: 1px;
  border: 4px solid #faf9f5;
  box-shadow: 0 0 0 1px rgba(181,169,153,0.3);
  z-index: 2;
}
.flow-node__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 10px;
}
.flow-node__eyebrow {
  font-family: "Red Hat Display", sans-serif;
  font-size: 10px; letter-spacing: 2.5px;
  color: #b5a999; text-transform: uppercase;
}
.flow-node__duration {
  margin-left: auto;
  font-family: "Red Hat Display", sans-serif;
  font-size: 11px; letter-spacing: 1.5px;
  color: #212121;
  padding: 4px 12px;
  background: rgba(239,240,163,0.4);
  border-radius: 999px;
  font-weight: 500;
}
.flow-node__title {
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 600; line-height: 1.4;
  color: #212121; letter-spacing: 0.5px;
  margin: 0 0 10px;
}
.flow-node__body {
  font-size: 14px; line-height: 1.85;
  color: #4a4139; margin: 0;
}
.flow-node__body strong { color: #212121; font-weight: 600; }

@media (max-width: 900px) {
  .flow-journey { grid-template-columns: 1fr; gap: 24px; }
  .flow-journey__aside {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding: 16px 20px;
  }
  .flow-journey__hint { display: none; }
  .flow-journey__counter { font-size: 32px; }
}
@media (max-width: 600px) {
  .flow-journey__list { padding-left: 48px; }
  .flow-node { padding: 18px 18px 20px; }
  .flow-node__marker {
    left: -48px; top: 14px;
    width: 36px; height: 36px;
    font-size: 11px;
    border-width: 3px;
  }
  .flow-node__duration { margin-left: 0; }
  .flow-journey__list::before { left: 18px; }
}

/* ═══════════════════════════════════════════════
   Section 5 redesign：信任型 CTA 編輯風卡片
═══════════════════════════════════════════════ */
.trust-cta {
  margin-top: clamp(36px, 4vw, 56px);
  position: relative;
  background: #212121;
  color: #fff;
  border-radius: 28px;
  padding: clamp(28px, 3.4vw, 44px) clamp(26px, 3vw, 48px);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
  overflow: hidden;
}
.trust-cta::before {
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(239,240,163,0.25), transparent 70%);
  pointer-events: none;
}
.trust-cta__left { position: relative; z-index: 1; }
.trust-cta__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "Red Hat Display", sans-serif;
  font-size: 10px; letter-spacing: 3px;
  color: #eff0a3; text-transform: uppercase;
  margin-bottom: 14px;
}
.trust-cta__eyebrow::before {
  content: ""; width: 24px; height: 1px; background: #eff0a3;
}
.trust-cta__heading {
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 600; line-height: 1.4;
  letter-spacing: 0.5px;
  margin: 0 0 18px;
  color: #fff;
}
.trust-cta__heading strong { color: #eff0a3; font-weight: 600; }
.trust-cta__meta {
  display: flex; flex-wrap: wrap;
  gap: 10px 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.14);
}
.trust-cta__meta-item {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 12px; color: rgba(255,255,255,0.7);
  letter-spacing: 0.5px;
}
.trust-cta__meta-item strong {
  font-family: "Red Hat Display", sans-serif;
  font-size: 18px; font-weight: 600;
  color: #fff; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.trust-cta__right {
  position: relative; z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}
.trust-cta__btn {
  display: inline-flex;
  align-items: center; justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  background: #eff0a3;
  color: #212121;
  border: none; border-radius: 999px;
  font-size: 15px; font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
  transition: transform .3s ease, background .3s ease;
  white-space: nowrap;
}
.trust-cta__btn:hover {
  transform: translateY(-2px);
  background: #fff;
}
.trust-cta__btn::after {
  content: "→";
  font-family: "Red Hat Display", sans-serif;
  font-size: 18px;
  transition: transform .3s ease;
}
.trust-cta__btn:hover::after { transform: translateX(4px); }
.trust-cta__note {
  font-size: 11px; letter-spacing: 1.5px;
  color: rgba(255,255,255,0.55);
  text-align: center;
  text-transform: uppercase;
  font-family: "Red Hat Display", sans-serif;
}
@media (max-width: 800px) {
  .trust-cta { grid-template-columns: 1fr; gap: 22px; }
  .trust-cta__right { align-items: stretch; }
}

/* ═══════════════════════════════════════════════
   Scroll reveal system (Apple-style: restrained but rich)
═══════════════════════════════════════════════ */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition:
    opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal="fade"]  { transform: translate3d(0, 0, 0); }
[data-reveal="scale"] { transform: scale3d(0.96, 0.96, 1); }

[data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
}

/* ── SVG path draw-on (pillar visuals) ── */
.esg-pillar__visual svg path {
  transition: stroke-dashoffset 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.esg-pillar__visual svg circle {
  opacity: 0;
  transform: scale(0);
  transform-origin: center;
  transform-box: fill-box;
}

/* ── Char-reveal (text split) ── */
.char-reveal {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 0.5em, 0);
  transition:
    opacity .6s cubic-bezier(0.22, 1, 0.36, 1),
    transform .6s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--char-i, 0) * 28ms);
}
[data-reveal].is-visible .char-reveal {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ── Flow journey: marker past state ── */
.flow-node__marker {
  transition:
    background .5s ease,
    color .5s ease,
    box-shadow .5s ease;
}
.flow-node__marker.is-past {
  background: #eff0a3;
  color: #212121;
  box-shadow: 0 0 0 1px rgba(181,169,153,0.3), 0 0 0 6px rgba(239,240,163,0.15);
}
.flow-node[data-reveal].is-visible .flow-node__marker {
  animation: markerPopIn .7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes markerPopIn {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Flow journey sticky counter smooth */
.flow-journey__counter {
  transition: color .3s ease;
}

/* Parallax image base */
.candidate-persona img,
.candidate-persona picture {
  will-change: transform;
}

/* Count-up numbers keep width stable during tick */
.esg-pillar__big,
.adv-metric__num,
.trust-cta__meta-item strong {
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  .char-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .esg-pillar__visual svg path { stroke-dashoffset: 0 !important; }
  .esg-pillar__visual svg circle { opacity: 1 !important; transform: scale(1) !important; }
  .candidate-persona img, .candidate-persona picture { transform: none !important; }
}

/* ═══════════════════════════════════════════════
   Ecosystem grid: shrink oversized float-icon-card icons
═══════════════════════════════════════════════ */
.ecosystem-grid .icon-circle {
  width: 52px;
  height: 52px;
  margin-bottom: 8px;
}
.ecosystem-grid .icon-circle .icon-img {
  width: 26px;
  height: 26px;
}
.ecosystem-grid .float-icon-card {
  padding-top: 48px;
}

/* ═══════════════════════════════════════════════
   Ecosystem redesign — numbered editorial flow
═══════════════════════════════════════════════ */
.ecosystem {
  position: relative;
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
}
.ecosystem__rail {
  position: absolute;
  top: 38px;
  left: 6%; right: 6%;
  height: 1px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  z-index: 0;
}
.ecosystem__rail::before {
  content: "";
  position: absolute;
  inset: 0;
  border-top: 1px dashed rgba(181,169,153,0.45);
}
.ecosystem__rail-dot {
  position: relative;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #eff0a3;
  border: 1.5px solid #212121;
}
.eco-card {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 22px;
  padding: clamp(22px, 2vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 1px solid rgba(181,169,153,0.18);
  transition: transform .3s ease, box-shadow .3s ease;
}
.eco-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 40px -24px rgba(181,169,153,0.35);
}
.eco-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(181,169,153,0.22);
}
.eco-card__num {
  font-family: "Red Hat Display", sans-serif;
  font-size: 28px;
  font-weight: 600;
  color: #212121;
  line-height: 1;
  letter-spacing: -0.5px;
  background: #eff0a3;
  padding: 8px 12px;
  border-radius: 10px;
  font-variant-numeric: tabular-nums;
}
.eco-card__eyebrow {
  font-family: "Red Hat Display", sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  color: #6d6459;
  text-transform: uppercase;
  line-height: 1.4;
  flex: 1;
  min-width: 0;
}
.eco-card__title {
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 600;
  line-height: 1.4;
  color: #212121;
  letter-spacing: 0.5px;
  margin: 0;
}
.eco-card__body {
  font-size: 13.5px;
  line-height: 1.8;
  color: #4a4139;
  margin: 0;
  flex: 1;
}
.eco-card__body strong {
  color: #212121;
  font-weight: 600;
}
.eco-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(181,169,153,0.18);
  font-family: "Red Hat Display", sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  color: #b5a999;
  text-transform: uppercase;
}
.eco-card__tag svg {
  width: 18px; height: 18px;
  color: #b5a999;
  flex-shrink: 0;
}

@media (max-width: 1100px) {
  .ecosystem { grid-template-columns: repeat(2, 1fr); }
  .ecosystem__rail { display: none; }
}
@media (max-width: 640px) {
  .ecosystem { grid-template-columns: 1fr; gap: 14px; }
}

/* ─── Ecosystem card tinting: first 3 cream, card 04 dark climax ─── */
.ecosystem .eco-card:nth-child(2),
.ecosystem .eco-card:nth-child(3),
.ecosystem .eco-card:nth-child(4) {
  background: #faf9f5;
  border-color: rgba(181,169,153,0.22);
}
.ecosystem .eco-card:nth-child(5) {
  background: #212121;
  border-color: rgba(239,240,163,0.2);
  color: #fff;
}
.ecosystem .eco-card:nth-child(5) .eco-card__head {
  border-bottom-color: rgba(255,255,255,0.12);
}
.ecosystem .eco-card:nth-child(5) .eco-card__num {
  background: #eff0a3;
  color: #212121;
}
.ecosystem .eco-card:nth-child(5) .eco-card__eyebrow {
  color: rgba(239,240,163,0.85);
}
.ecosystem .eco-card:nth-child(5) .eco-card__title {
  color: #fff;
}
.ecosystem .eco-card:nth-child(5) .eco-card__body {
  color: rgba(255,255,255,0.78);
}
.ecosystem .eco-card:nth-child(5) .eco-card__body strong {
  color: #eff0a3;
}
.ecosystem .eco-card:nth-child(5) .eco-card__tag {
  border-top-color: rgba(255,255,255,0.1);
  color: rgba(239,240,163,0.7);
}
.ecosystem .eco-card:nth-child(5) .eco-card__tag svg {
  color: #eff0a3;
}
.ecosystem .eco-card:hover {
  box-shadow: 0 26px 46px -26px rgba(33,33,33,0.35);
}

/* ═══════════════════════════════════════════════
   Paragraph size normalisation
   Rule:
     - Section lead (after content-title): inherit main p (16px desktop / 14px mobile)
     - Card body copy: 14px desktop / 13px mobile, line-height 1.8
     - adv-head__desc aligns with section lead, not card body
═══════════════════════════════════════════════ */
.adv-head__desc {
  font-size: 16px;
  line-height: 1.85;
}
.esg-pillar__body,
.adv-card__body,
.eco-card__body,
.flow-node__body,
.trust-cta__lead {
  font-size: 14px;
  line-height: 1.8;
}
@media (max-width: 1023px) {
  .adv-head__desc { font-size: 14px; line-height: 1.75; }
  .esg-pillar__body,
  .adv-card__body,
  .eco-card__body,
  .flow-node__body,
  .trust-cta__lead { font-size: 13px; line-height: 1.75; }
}

/* ═══════════════════════════════════════════════
   CTA button RWD：允許換行、行動裝置不溢出
═══════════════════════════════════════════════ */
.cta-btn.cta-btn--wrap {
  max-width: 100%;
  white-space: normal;
  text-align: center;
  line-height: 1.4;
  word-break: keep-all;
}
@media (max-width: 639px) {
  .cta-btn.cta-btn--wrap {
    padding: 12px 22px;
    font-size: 15px;
    line-height: 1.45;
  }
}

/* ═══════════════════════════════════════════════
   CTA Popup 特色列表：桌機水平、手機垂直
═══════════════════════════════════════════════ */
.popup-features {
  list-style: none;
  margin: 0;
  padding: 14px 16px;
  background: linear-gradient(180deg, #faf9f5 0%, #f5f2ec 100%);
  border: 1px solid rgba(181, 169, 153, 0.18);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.popup-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  letter-spacing: 0.6px;
  color: #4a4139;
  font-weight: 500;
}
.popup-features__dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b5a999;
}
@media (min-width: 640px) {
  .popup-features {
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    padding: 14px 18px;
    gap: 6px;
  }
  .popup-features li {
    font-size: 14px;
  }
}

/* ═══════════════════════════════════════════════
   Section 1 Intro redesign：Editorial lead + Spec sheet
═══════════════════════════════════════════════ */
.esg-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
  margin-bottom: clamp(40px, 6vw, 64px);
  padding-bottom: clamp(32px, 4vw, 48px);
  border-bottom: 1px solid rgba(181, 169, 153, 0.22);
}
.esg-intro__lead { min-width: 0; }
.esg-intro__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: "Red Hat Display", sans-serif;
  font-size: 11px;
  letter-spacing: 3px;
  color: #b5a999;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.esg-intro__eyebrow-bar {
  width: 36px;
  height: 1px;
  background: #b5a999;
}
.esg-intro__title {
  font-size: clamp(30px, 3.8vw, 54px);
  line-height: 1.25;
  font-weight: 600;
  color: #212121;
  letter-spacing: 0.5px;
  margin: 0 0 22px 0;
}
.esg-intro__desc {
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.9;
  color: #3a342e;
  margin: 0 0 16px 0;
  max-width: 56ch;
}
.esg-intro__desc strong { color: #212121; font-weight: 600; }
.esg-intro__desc--soft { color: #524a41; }
.esg-intro__reviewed {
  margin-top: 22px;
  padding: 12px 14px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(181, 169, 153, 0.08);
  border-left: 2px solid #b5a999;
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  color: #6d6459;
  line-height: 1.55;
}
.esg-intro__reviewed strong { color: #212121; font-weight: 600; }
.esg-intro__reviewed-mark {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #212121;
  color: #eff0a3;
  font-family: "Red Hat Display", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Spec sheet（右側） */
.esg-intro__spec {
  position: relative;
  background:
    linear-gradient(180deg, #faf9f5 0%, #f5f2ec 100%);
  border-radius: 20px;
  padding: clamp(22px, 2.6vw, 32px);
  border: 1px solid rgba(181, 169, 153, 0.22);
  box-shadow: 0 18px 40px -28px rgba(181, 169, 153, 0.35);
}
.esg-intro__spec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 14px;
  margin-bottom: 4px;
  border-bottom: 1px dashed rgba(181, 169, 153, 0.4);
}
.esg-intro__spec-tag {
  font-family: "Red Hat Display", sans-serif;
  font-size: 11px;
  letter-spacing: 2.5px;
  color: #212121;
  text-transform: uppercase;
  font-weight: 600;
}
.esg-intro__spec-dim {
  font-family: "Red Hat Display", sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  color: #b5a999;
}
.esg-intro__rows {
  margin: 0;
  padding: 0;
}
.esg-intro__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(181, 169, 153, 0.18);
}
.esg-intro__row:last-of-type { border-bottom: none; }
.esg-intro__row-label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 14px;
  color: #4a4139;
  margin: 0;
  line-height: 1.5;
}
.esg-intro__row-idx {
  font-family: "Red Hat Display", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: #b5a999;
  padding: 2px 6px;
  border: 1px solid rgba(181, 169, 153, 0.5);
  border-radius: 4px;
  flex-shrink: 0;
}
.esg-intro__row-hint {
  display: block;
  font-size: 11px;
  color: #b5a999;
  margin-top: 2px;
  letter-spacing: 0.5px;
}
.esg-intro__row-val {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 4px;
  line-height: 1;
}
.esg-intro__num {
  font-family: "Red Hat Display", sans-serif;
  font-size: clamp(32px, 3.4vw, 44px);
  font-weight: 600;
  color: #212121;
  letter-spacing: -1px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.esg-intro__num .sep {
  color: #b5a999;
  font-weight: 300;
  margin: 0 1px;
}
.esg-intro__unit {
  font-family: "Red Hat Display", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #b5a999;
  letter-spacing: 0.5px;
}
.esg-intro__spec-foot {
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px dashed rgba(181, 169, 153, 0.4);
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Red Hat Display", sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  color: #b5a999;
  text-transform: uppercase;
}
.esg-intro__spec-wave {
  width: 48px;
  height: 14px;
  flex-shrink: 0;
}

/* Tablet：lead 上、spec 下；兩者靠左 */
@media (max-width: 1023px) {
  .esg-intro {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-bottom: 40px;
    padding-bottom: 32px;
  }
}
@media (max-width: 639px) {
  .esg-intro__title { font-size: clamp(26px, 7vw, 34px); }
  .esg-intro__desc { font-size: 14.5px; line-height: 1.85; }
  .esg-intro__reviewed { font-size: 12px; padding: 10px 12px; }
  .esg-intro__reviewed-mark { width: 28px; height: 28px; font-size: 9px; }
  .esg-intro__spec { padding: 20px 18px; border-radius: 16px; }
  .esg-intro__row { padding: 14px 0; grid-template-columns: 1fr auto; gap: 10px; }
  .esg-intro__row-label { font-size: 13px; }
  .esg-intro__num { font-size: 28px; }
}