.product-modern{--product-ink:#082f3d;--product-yellow:#ffb515;--product-blue:#08a8c9;--product-surface:#f4f6f5;--product-line:#d8e1df;--navy:var(--product-ink);--navy-2:var(--product-ink);--cyan:var(--product-blue);--pink:var(--product-blue);--violet:var(--product-blue);--green:var(--product-blue);--brand-500:var(--product-yellow);--accent-500:var(--product-blue);--ink-900:var(--product-ink);color:var(--product-ink);background:#fff}
.product-modern .global-header{background:rgba(255,255,255,.95);border-bottom:1px solid var(--product-line)}
.product-modern .global-demo,.product-modern .button,.product-modern .btn--primary{border-color:var(--product-yellow)!important;background:var(--product-yellow)!important;color:var(--product-ink)!important;border-radius:4px!important;box-shadow:none!important}
.product-modern .app-detail-hero,.product-modern .phero{background:#fff!important;border-bottom:1px solid var(--product-line)!important}
.product-modern .app-detail-hero:before,.product-modern .app-detail-hero:after,.product-modern .phero:before,.product-modern .phero:after{display:none!important}
.product-modern .detail-hero-grid,.product-modern .phero__grid{gap:64px;align-items:center}
.product-modern .detail-hero-copy h1,.product-modern .h-hero{color:var(--product-ink);font-weight:800;letter-spacing:-.045em}
.product-modern .detail-hero-copy h1 mark,.product-modern .h-hero .hl{padding:0;background:none!important;color:var(--product-ink)!important;box-shadow:none!important;text-decoration:none!important}
.product-modern .app-label,.product-modern .human-label,.product-modern .eyebrow,.product-modern .eyebrow--pink{color:var(--product-blue)!important;background:none!important}
.product-modern .app-label:before,.product-modern .eyebrow:before{background:var(--product-yellow)!important}
.product-modern .hero-diagram{min-height:560px;border:0!important;border-radius:2px!important;background-color:var(--product-surface)!important;background-repeat:no-repeat!important;background-position:center!important;background-size:cover!important;box-shadow:none!important;overflow:hidden}
.product-modern .hero-diagram>*:not(.product-hero-image){display:none!important}
.product-modern .hero-diagram .product-hero-image{display:block!important;width:100%;height:560px;object-fit:cover;object-position:center}
.product-modern.ai-product-page .hero-diagram{background-image:url("/static/homepage-modern-v3/assets/images/soocker-service-ai-recommendation.png")!important}
.product-modern.friend-product-page .hero-diagram{background-image:url("/static/homepage-modern-v3/assets/images/soocker-service-friend-referral.png")!important}
.product-modern.affiliate-product-page .hero-diagram{background-image:url("/static/homepage-modern-v3/assets/images/soocker-service-affiliate-program.png")!important}
.product-modern .human-hero{margin:0;overflow:hidden;border:0!important;border-radius:2px!important;background:var(--product-surface);box-shadow:none!important}
.product-modern .human-hero img{width:100%;height:560px;object-fit:cover;object-position:center}
.product-modern .page-section,.product-modern .section{background:#fff!important}
.product-modern main>.page-section:nth-of-type(odd),.product-modern .pg>.section:nth-of-type(odd){background:var(--product-surface)!important}
.product-modern .section-heading h2,.product-modern .section-copy h2,.product-modern .sec-head h2{color:var(--product-ink);font-weight:900;line-height:1.26;letter-spacing:-.035em}
.product-modern .section-copy h2{font-size:clamp(36px,3.4vw,54px)}
.product-modern .section-heading .eyebrow>span,.product-modern .section-copy .eyebrow>span{background:var(--product-yellow)!important}
.product-modern :is(.ai-channel-pills,.hero-role-switcher) .is-active,.product-modern :is(.ai-step-tab,.affiliate-step,.gift-mode-tab).is-active{border-color:var(--product-yellow)!important;background:#fff8e6!important;color:var(--product-ink)!important}
.product-modern :is(.ai-outcome-card,.ai-metric,.affiliate-person,.affiliate-metric,.affiliate-commerce-card,.gift-mode-shell,.gift-process-track,.partner-card){border-color:var(--product-line)!important;border-radius:2px!important;box-shadow:none!important}
.product-modern .cta-section{background:#fff!important}
.product-modern .cta-card{border:1px solid var(--product-line)!important;border-left:10px solid var(--product-yellow)!important;border-radius:2px!important;background:#fff!important;color:var(--product-ink)!important;box-shadow:none!important}
.product-modern .cta-card h2,.product-modern .cta-card p{color:var(--product-ink)!important}
.product-modern .cta-card .button-light{background:var(--product-ink)!important;color:#fff!important;border-radius:4px!important}
.product-modern .global-footer{background:var(--product-ink)}
@media(max-width:900px){.product-modern .detail-hero-grid,.product-modern .phero__grid{gap:34px}.product-modern .hero-diagram,.product-modern .human-hero img{min-height:0;height:480px}}
@media(max-width:680px){.product-modern .hero-diagram,.product-modern .hero-diagram .product-hero-image,.product-modern .human-hero img{height:390px}}
.product-modern .detail-hero-copy mark:before,.product-modern .detail-hero-copy mark:after,.product-modern .h-hero .hl:before,.product-modern .h-hero .hl:after{display:none!important;content:none!important}

/* AI page keeps its original interactive journey; only the contextual image is modernized. */
.product-modern.ai-product-page .hero-diagram.contextual{display:flex!important;min-height:0!important;padding:0!important;background:#fff!important;overflow:visible}
.product-modern.ai-product-page .hero-diagram.contextual:before{display:block!important;height:168px!important;flex:0 0 168px!important;background-image:url("/static/referral-applications/assets/images/context-ai-v2.png")!important;background-size:cover!important;background-position:center!important}
.product-modern.ai-product-page .hero-diagram.contextual>.ai-journey{display:block!important;width:100%}
.product-modern.ai-product-page .ai-step-tab.is-active{border:0!important;background:transparent!important;box-shadow:none!important}
.product-modern.friend-product-page .friend-photo-hero{display:block!important;min-height:520px!important;height:520px!important;padding:0!important;background:#dfeef2!important;background-image:none!important;overflow:hidden}
.product-modern.friend-product-page .friend-photo-hero>.friend-hero-photo{display:block!important}
.product-modern.friend-product-page .friend-photo-hero>.friend-hero-photo[hidden]{display:none!important}
.product-modern.friend-product-page .friend-photo-hero>.friend-photo-progress{display:flex!important}
.product-modern.affiliate-product-page .hero-diagram.contextual{display:flex!important;min-height:0!important;padding:0!important;background:#fff!important;background-image:none!important;overflow:visible}
.product-modern.affiliate-product-page .hero-diagram.contextual:before{display:block!important;height:168px!important;flex:0 0 168px!important;background-image:url("/static/referral-applications/assets/images/context-affiliate-v2.png")!important;background-size:cover!important;background-position:center!important}
.product-modern.affiliate-product-page .hero-diagram.contextual>.talent-network{display:block!important;width:100%}
.product-modern.affiliate-product-page .affiliate-step.is-active{border:0!important;background:transparent!important;box-shadow:none!important}
@media(max-width:720px){.product-modern.ai-product-page .hero-diagram.contextual:before{height:135px!important;flex-basis:135px!important}}
@media(max-width:720px){.product-modern.affiliate-product-page .hero-diagram.contextual:before{height:135px!important;flex-basis:135px!important}}

/* AI 店長 Banner 保留主要對話示意，只移除上方情境圖片。 */
.product-modern.ai-product-page .hero-diagram.contextual:before,
.product-modern.ai-product-page .hero-diagram.contextual:after{display:none!important}