/* One timeline per chapter. Native scrolling controls every frame in both directions. */
.scene-rail{display:flex;gap:16px;align-items:center;font-size:10px;color:#7d925f;margin-top:25px;max-width:290px}.scene-rail i{height:2px;background:#d2ddc1;flex:1;position:relative;overflow:hidden}.scene-rail i:after{content:'';position:absolute;inset:0;background:#6a8b45;transform:scaleX(var(--chapter-p,0));transform-origin:right}.scene-rail b{font-weight:500;min-width:90px}.focus-section .scene-rail{color:#b6cc98}.focus-section .scene-rail i{background:#43583a}.focus-section .scene-rail i:after{background:#cfe6a0}.scene-annotation{font-size:11px;color:#b2c59d;display:block;margin-top:12px;min-height:24px}.scroll-scenes .hero{height:calc(1070px + 85svh);padding-top:0}.scroll-scenes .hero-pin{position:sticky;top:min(0px,calc(100svh - 1070px));height:1070px;padding-top:61px;isolation:isolate;overflow:clip}.scroll-scenes .hero-intro{will-change:transform,opacity}.scroll-scenes .hero-stage{transform-origin:50% 47%;will-change:transform;transition:none}.scroll-scenes .hero-phone{transition:none!important}.scroll-scenes .hero-stage .float-card{transition:none}.scroll-scenes .hero-phone{outline:1px solid transparent}.scroll-scenes .hero-phone .phone-focus{will-change:transform}.scroll-scenes .stage-caption{z-index:4;transform:none!important}.scroll-scenes .planning{display:block;width:100%;margin:0;height:calc(700px + 85svh);padding:0;background:#fafbf8}.scroll-scenes .plan-pin{display:grid;grid-template-columns:1fr 1.1fr;gap:95px;align-items:center;height:700px;padding-block:65px;position:sticky;top:min(0px,calc(100svh - 700px))}.scroll-scenes .plan-visual{perspective:1200px;transform:none!important}.scroll-scenes .schedule-card{transform-style:preserve-3d;transition:none}.scroll-scenes .schedule-slot{will-change:transform,opacity}.scroll-scenes .benefits li{transition:color .2s,border-color .2s}.scroll-scenes .benefits li.scene-active{border-top-color:#75954f}.scroll-scenes .benefits li.scene-active b{color:#49692f}.scroll-scenes .benefits li:not(.scene-active) b{color:#7a896b}.scroll-scenes .focus-section{height:calc(650px + 80svh);padding:0;overflow:clip}.scroll-scenes .focus-pin{position:sticky;top:min(0px,calc(100svh - 650px));height:650px;padding-top:60px}.scroll-scenes .focus-layout{min-height:430px}.scroll-scenes .focus-instrument{perspective:1000px;transform-style:preserve-3d;transition:none}.scroll-scenes .focus-bottom{margin-top:35px}.scroll-scenes .instrument-circle>svg{transform:rotate(-90deg)}.scroll-scenes .instrument-circle{will-change:transform}.scroll-scenes .timer-arc{transition:none!important;stroke-dasharray:var(--scroll-arc,875) 875!important;opacity:var(--scroll-ring-opacity,1)}.scroll-scenes .inside-section{height:calc(680px + 100svh)}.scroll-scenes .inside-pin{position:sticky;top:min(0px,calc(100svh - 680px));height:680px;min-height:680px;padding-block:65px}.scroll-scenes .layers,.scroll-scenes .layer{transition:none!important}.scroll-scenes .progress-section{padding:0;height:calc(700px + 65svh)}.scroll-scenes .progress-pin{height:700px;padding-block:65px;position:sticky;top:min(0px,calc(100svh - 700px))}.scroll-scenes .progress-heading{margin-bottom:30px}.scroll-scenes .week-chart>div>i{will-change:transform;transition:height .5s}.scroll-scenes .progress-panel{will-change:transform}.scroll-scenes .manifesto h2{perspective:900px}.scroll-scenes .manifesto h2 span{color:#334c27}.scroll-scenes .faq-list details{will-change:transform}.scroll-scenes .closing-section{height:calc(340px + 38svh)}.scroll-scenes .closing-pin{height:340px;position:sticky;top:max(0px,calc((100svh - 340px)/2));display:flex;align-items:center;overflow:clip}.scroll-scenes .closing-inner{width:min(1120px,calc(100% - 80px));padding-block:45px;will-change:transform}.scroll-scenes .hero-pin:focus-within .hero-intro{opacity:1!important}.scene-preview-label{display:flex;gap:8px;align-items:center;font-size:10px;color:#8d9f77;margin-top:18px}.scene-preview-label:before{content:'';height:5px;width:5px;border-radius:50%;background:#809e58}
@media(max-width:1050px){.scroll-scenes .plan-pin{gap:50px}.scroll-scenes .closing-inner{width:calc(100% - 64px)}}
@media(max-width:760px){.scroll-scenes .hero{height:calc(950px + 75svh)}.scroll-scenes .hero-pin{height:950px;top:min(0px,calc(100svh - 950px));padding-top:45px}.scroll-scenes .hero-stage{height:545px;margin-top:25px}.scroll-scenes .hero-stage .float-card{display:none}.scroll-scenes .hero-phone{width:258px;height:510px;padding:13px 17px}.scroll-scenes .hero-phone .phone-camera{left:86px}.scroll-scenes .plan-pin{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:28px;height:1000px;top:min(0px,calc(100svh - 1000px));padding-block:45px}.scroll-scenes .planning{height:calc(1000px + 80svh)}.scroll-scenes .benefits{margin-top:18px}.scroll-scenes .benefits li{padding:10px 0}.scroll-scenes .benefits p{line-height:1.8}.scroll-scenes .plan-visual{padding:23px 20px}.scroll-scenes .schedule-card{padding:20px 17px 16px}.scroll-scenes .schedule-timeline{gap:12px}.scroll-scenes .schedule-heading{margin-bottom:17px}.scroll-scenes .schedule-bottom{margin-top:17px}.scroll-scenes .scene-rail{margin-top:20px;font-size:9px}.scroll-scenes .focus-section{height:calc(810px + 75svh)}.scroll-scenes .focus-pin{height:810px;top:min(0px,calc(100svh - 810px));padding-top:45px}.scroll-scenes .focus-layout{gap:20px}.scroll-scenes .focus-instrument{height:350px}.scroll-scenes .focus-bottom{margin-top:25px}.scroll-scenes .scene-annotation{font-size:10px;margin-top:7px}.scroll-scenes .inside-section{height:calc(800px + 90svh)}.scroll-scenes .inside-pin{height:800px;min-height:800px;top:min(0px,calc(100svh - 800px));padding-block:43px 35px;justify-content:center;gap:15px}.scroll-scenes .inside-pin .layer-scene{height:390px;flex-shrink:0;margin-top:0}.scroll-scenes .inside-pin .layer-legend{margin-top:18px}.scroll-scenes .progress-section{height:calc(620px + 65svh)}.scroll-scenes .progress-pin{height:620px;top:min(0px,calc(100svh - 620px));padding-block:45px;display:flex;justify-content:center;flex-direction:column}.scroll-scenes .progress-heading{margin-bottom:25px}.scroll-scenes .progress-heading>p{margin-top:13px}.scroll-scenes .progress-panel{padding:22px 20px}.scroll-scenes .week-chart{height:170px}.scroll-scenes .closing-section{height:calc(330px + 35svh)}.scroll-scenes .closing-pin{height:330px;top:max(0px,calc((100svh - 330px)/2))}.scroll-scenes .closing-inner{width:calc(100% - 40px);padding-block:30px}.scroll-scenes .stage-caption{font-size:9px;justify-content:center;bottom:2px}.scroll-scenes .stage-caption>span:first-child{display:none}.scroll-scenes .scroll-cue{font-size:10px}.scroll-scenes .scene-preview-label{font-size:9px}}
@media(prefers-reduced-motion:reduce){.hero-pin,.plan-pin,.focus-pin,.inside-pin,.progress-pin,.closing-pin{position:relative!important;top:auto!important;height:auto!important;min-height:0!important}.hero,.planning,.focus-section,.inside-section,.progress-section,.closing-section{height:auto!important}.scene-rail,.scene-annotation,.scene-preview-label{display:none!important}}
.scroll-scenes.timer-engaged .timer-arc{stroke-dasharray:var(--remaining-arc,875) 875!important}
/* Removing motion also removes the extra scene distance and restores the ordinary layout. */
body:not(.scroll-scenes) .hero-pin,body:not(.scroll-scenes) .plan-pin,body:not(.scroll-scenes) .focus-pin,body:not(.scroll-scenes) .progress-pin,body:not(.scroll-scenes) .closing-pin{display:contents}
body:not(.scroll-scenes) .planning,body:not(.scroll-scenes) .progress-section{width:min(1120px,calc(100% - 80px));margin-inline:auto}
@media(max-width:1050px){body:not(.scroll-scenes) .planning,body:not(.scroll-scenes) .progress-section{width:calc(100% - 64px)}}
@media(max-width:760px){body:not(.scroll-scenes) .planning,body:not(.scroll-scenes) .progress-section{width:calc(100% - 40px)}}
.scroll-scenes .plan-pin{--frame:700px;top:min(calc((100svh - var(--frame))/2),calc(100svh - var(--frame)))}
.scroll-scenes .focus-pin{--frame:650px;top:min(calc((100svh - var(--frame))/2),calc(100svh - var(--frame)))}
.scroll-scenes .inside-pin{--frame:680px;top:min(calc((100svh - var(--frame))/2),calc(100svh - var(--frame)))}
.scroll-scenes .progress-pin{--frame:700px;top:min(calc((100svh - var(--frame))/2),calc(100svh - var(--frame)))}
.scene-rail[hidden],.scene-annotation[hidden],.scene-preview-label[hidden]{display:none!important}
@media(max-width:760px){.scroll-scenes .plan-pin{--frame:1000px}.scroll-scenes .focus-pin{--frame:810px}.scroll-scenes .inside-pin{--frame:800px}.scroll-scenes .progress-pin{--frame:620px}}
