/* Background stage, numeral images and live copy stay independently responsive. */
.visual-page .hero-environment{background:#141d2b}
.hero-environment .hero-photo{inset:0;overflow:hidden}
.hero-environment .hero-photo picture{display:block;width:100%}
.hero-environment .hero-photo img{display:block;width:100%;height:auto;object-fit:contain;object-position:center top;transform:none;opacity:1}
.visual-page .hero-environment .hero-photo::after{background:linear-gradient(180deg,#141d2b00 65%,#141d2b 96%)}
.visual-page .hero-environment .hero-layout{min-height:690px;padding-top:24px;padding-bottom:0}
.visual-page .hero-environment .hero-eyebrow{margin-bottom:12px}
.hero-environment .hero-number-composition{height:404px}
.hero-environment .hero-study{position:absolute;left:0;top:0;gap:4px}
.hero-environment .hero-number-10{width:200px}
.hero-environment .hero-study-label{padding-top:20px;font-size:25px}
.hero-environment .hero-number-bridge{position:absolute;top:204px;left:6px;right:auto;height:auto;margin:0;padding:0}
.hero-environment .hero-number-completion{font-size:25px}
.hero-environment .hero-number-reward{position:absolute;top:256px;right:0;margin:0;width:350px;max-width:100%}
.hero-environment .hero-number-150{width:300px}
.hero-environment .hero-number-unit{bottom:25px;font-size:32px}
.visual-page .hero-environment .hero-facts{margin-top:12px}
.visual-page .hero-environment .hero-action{padding-top:16px;margin-top:0}
.hero-environment .hero-action .offer-condition{margin:14px 0 0;font-size:14px;text-align:center;line-height:1.6}
.hero-environment .offer-condition strong{font-weight:500;color:#f6e6dd}
.hero-environment .offer-condition small{font-size:13px;color:#dfd1ca}
.hero-environment .hero-scroll{min-height:36px}
/* A brief matching-image exposure emphasizes the steps without moving the stage. */
.hero-step-emphasis{position:absolute;inset:0;background:url('./environment-mobile-480.webp') center top / 100% auto no-repeat;clip-path:polygon(0 17%,100% 40%,100% 56%,0 34%);filter:brightness(1.18);opacity:0;pointer-events:none}
@media(max-width:760px) and (max-height:760px){
 .visual-page .hero-environment .hero-layout{min-height:660px;padding-top:18px}
 .hero-environment .hero-number-composition{height:384px}
 .hero-environment .hero-number-10{width:188px}
 .hero-environment .hero-number-bridge{top:196px}
 .hero-environment .hero-number-reward{top:240px}
 .hero-environment .hero-number-150{width:290px}
 .visual-page .hero-environment .hero-facts{margin-top:8px}
 .visual-page .hero-environment .hero-action{padding-top:12px}
}
@media(min-width:761px){
 .hero-environment .hero-photo picture{height:100%}
 .hero-environment .hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center center}
 .visual-page .hero-environment .hero-photo::after{background:linear-gradient(180deg,transparent 65%,#141d2b90 100%)}
 .visual-page .hero-environment .hero-layout{min-height:760px;padding:36px 0 12px}
 .visual-page .hero-environment .hero-eyebrow{margin-bottom:16px}
 .hero-environment .hero-number-composition{height:420px}
 .hero-environment .hero-study{left:0;top:0}
 .hero-environment .hero-number-10{width:370px}
 .hero-environment .hero-study-label{font-size:32px}
 .hero-environment .hero-number-reward{top:218px;right:0;width:640px;max-width:51%}
 .hero-environment .hero-number-150{width:550px;max-width:87%}
 .hero-environment .hero-number-unit{font-size:46px;bottom:88px}
 .hero-environment .hero-number-bridge{top:167px;left:auto;right:29%}
 .hero-environment .hero-number-completion{font-size:30px}
 .visual-page .hero-environment .hero-facts{margin-top:16px;font-size:17px}
 .visual-page .hero-environment .hero-action{padding-top:16px;max-width:430px}
 .hero-environment .hero-action .offer-condition{text-align:left}
 .hero-step-emphasis{background-image:url('./environment-desktop-1600.webp');background-size:cover;background-position:center;clip-path:polygon(0 28%,65% 48%,65% 75%,0 50%)}
}
@media(min-width:1600px){
 .visual-page .hero-environment .hero-layout{max-width:none;width:calc(100% - 160px)}
}
@media(min-width:761px) and (max-width:1100px){
 .visual-page .hero-environment .hero-layout{min-height:710px;padding-top:28px}
 .hero-environment .hero-number-composition{height:405px}
 .hero-environment .hero-number-10{width:270px}
 .hero-environment .hero-study-label{font-size:26px}
 .hero-environment .hero-number-reward{top:220px;width:470px;max-width:65%}
 .hero-environment .hero-number-150{width:405px}
 .hero-environment .hero-number-unit{font-size:36px;bottom:76px}
 .hero-environment .hero-number-bridge{top:175px;right:29%}
}

/* One shared ten-day stage replaces the ribbon illustration. */
.visual-page .why-section.why-platform{display:block;min-height:0;padding:36px 0;background:#faf8f4;color:#172438;text-align:center}
.visual-page .why-platform>.poster-heading{position:relative;top:auto;left:auto;width:calc(100% - 40px);max-width:1080px;padding:0;margin:0 auto;text-align:center}
.why-platform .poster-heading h2{font-size:25px;line-height:1.45}
.why-platform .mutual-visual{margin:16px auto 0;padding-top:0;max-width:760px}
.why-platform .mutual-sides{top:16px;left:20px;right:20px;z-index:1}
.why-platform .mutual-sides span{font-size:15px}
.why-platform .mutual-duration{top:46%;color:#74623d}
.why-platform .mutual-duration b{font-size:36px}
.why-platform .mutual-duration>span{font-size:12px;margin-top:3px}
.why-platform .mutual-duration small{font-size:14px;font-weight:600;line-height:1.4;white-space:nowrap;margin-top:7px;color:#172438}
.why-platform .mutual-reward{margin:0 auto}
.why-platform .mutual-reward>p{font-size:20px}
.why-platform .mutual-payment{display:inline-block;font-size:20px;margin-left:7px}
.why-platform .mutual-reward>strong{font-size:68px}
.why-platform .mutual-reward strong>span{font-size:30px}
.why-platform .mutual-trust{margin-top:14px}
@media(min-width:761px){
 .visual-page .why-section.why-platform{padding:44px 0}
 .why-platform .poster-heading h2{font-size:30px}
 .why-platform .mutual-visual{margin-top:0}
 .why-platform .mutual-sides{top:64px;left:0;right:0}
 .why-platform .mutual-sides span{font-size:17px}
 .why-platform .mutual-duration{top:46%}
 .why-platform .mutual-duration b{font-size:62px}
 .why-platform .mutual-duration>span{font-size:16px}
 .why-platform .mutual-duration small{font-size:18px;margin-top:10px}
 .why-platform .mutual-reward{margin-top:-26px}
 .why-platform .mutual-reward>p{font-size:24px}
 .why-platform .mutual-reward>strong{font-size:84px}
 .why-platform .mutual-reward strong>span{font-size:38px}
 .why-platform .mutual-payment{font-size:24px}
}
