/* One quiet story: responsibility, relief, then freedom. */
.welcome-note{position:absolute;right:0;bottom:0;max-width:350px;padding:23px 28px;background:var(--mist);border-left:4px solid var(--gold);box-shadow:0 12px 24px #233b3010}
.welcome-note>span{display:block;font-size:11px;letter-spacing:.08em}
.welcome-note>span:last-child{font-size:14px;letter-spacing:0}
.welcome-note>strong{display:block;font:600 29px/1.12 var(--display);letter-spacing:-.035em;margin:10px 0}
.team-options button{min-height:48px}
.cost-story{background:#f4f4ed;border-block:1px solid var(--line);scroll-margin-top:0}
.story-sticky{max-width:1440px;margin:auto;padding:28px 50px 20px}
.story-topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:20px}
.story-topbar .eyebrow{margin:0;font-size:11px}
.story-tools{display:flex;align-items:center;gap:20px;font-size:13px}
.story-tools a{text-underline-offset:4px;white-space:nowrap}
.story-tools button{border:0;background:none;color:var(--muted);padding:8px 0;cursor:pointer;font:inherit;text-decoration:underline;text-underline-offset:4px}
.story-arena{position:relative;isolation:isolate;min-width:0}
.story-scene{padding:48px 54px;background:var(--white);border:1px solid var(--line);border-radius:6px;margin:0 0 20px}
.story-scene h2,.story-scene h3{font-size:clamp(35px,4vw,58px);line-height:1.07;letter-spacing:-.045em;margin:0 0 25px}
.story-scene h2 em{color:var(--leaf);font-style:normal}
.story-scene .eyebrow{font-size:11px;letter-spacing:.12em;margin-bottom:18px}
.story-scene p{line-height:1.5}
.story-routine{display:grid;grid-template-columns:1.35fr .8fr;align-items:center;gap:70px;background:#f5f5ef}
.story-routine-copy>p:not(.eyebrow){font-size:19px;max-width:430px;color:var(--muted);margin:0}
.story-notes{display:grid;gap:17px;list-style:none;padding:0;margin:0}
.story-notes li{position:relative;padding:22px 24px 22px 54px;background:white;border:1px solid var(--line);box-shadow:0 8px 16px #263c3508}
.story-notes li:nth-child(1){transform:rotate(-2deg)}
.story-notes li:nth-child(3){transform:rotate(2deg)}
.story-notes li>span{position:absolute;left:23px;top:27px;width:16px;height:16px;border:1.5px solid #a49e8c;border-radius:2px}
.story-notes strong{font:500 25px var(--display);letter-spacing:-.025em}
.story-notes p{font-size:14px;color:var(--muted);margin:6px 0 0}
.story-relief,.story-finish{color:var(--white);background:var(--pine);border-color:var(--pine)}
.story-relief{display:flex;align-items:center;justify-content:center;text-align:center}
.story-relief-inner{width:100%;max-width:800px}
.story-brand-mark{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 0 28px;font:500 22px var(--display)}
.story-brand-mark img{width:48px;height:48px;filter:brightness(0) invert(1)}
.story-relief .eyebrow,.story-finish .eyebrow{color:#d2dfc7}
.story-relief h3{font-size:clamp(38px,4.2vw,62px)}
.story-relief h3 span{display:block;color:#d6dfb2;margin-top:14px}
.story-relief-inner>p:last-child{font-size:19px;color:#e0e9dc;margin:0}
.story-finish-inner{display:grid;grid-template-columns:1.35fr .8fr;align-items:center;gap:65px;min-height:100%}
.story-finish h3{font-size:clamp(35px,3.9vw,56px);max-width:670px;margin-bottom:24px}
.story-finish h3 span{color:#d6dfb2}
.story-finish-copy>p:not(.eyebrow){max-width:500px;color:#e0e9dc;font-size:18px;margin-bottom:22px}
.story-finish-copy>.story-freedom{font-size:17px!important;color:white!important;font-weight:600}
.story-finish .story-button{font-size:17px;padding:17px 23px;gap:18px;border-radius:3px}
.story-finish .story-availability{font-size:12px!important;line-height:1.4;max-width:410px;margin:14px 0 0!important}
.story-choices{list-style:none;padding:0;margin:0}
.story-choices li{display:flex;gap:17px;align-items:baseline;padding:24px 0;border-bottom:1px solid #ffffff38}
.story-choices li:first-child{border-top:1px solid #ffffff38}
.story-choices li>span{font-size:25px;color:#d6dfb2}
.story-choices strong{font:500 31px var(--display);letter-spacing:-.035em}
.story-choices p{font-size:15px;line-height:1.45;color:#e0e9dc;margin:8px 0 0}
.story-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:16px;font-size:12px;color:var(--muted)}
.story-steps{display:flex;gap:23px;list-style:none;padding:0;margin:0;font-size:12px;white-space:nowrap}
.story-steps li{opacity:.6;display:flex;align-items:center;gap:7px}
.story-steps li::before{content:'';width:6px;height:6px;border:1px solid var(--leaf);border-radius:50%}
.story-steps [aria-current]{opacity:1;color:var(--pine);font-weight:600}
.story-steps [aria-current]::before{background:var(--pine)}
.story-progress,.story-broom{display:none}
.story-broom{pointer-events:none}
.cost-story.is-animated{height:340vh;height:340svh}
.is-animated .story-sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;padding-top:24px;padding-bottom:20px}
.is-animated .story-arena{flex:1;min-height:0;overflow:hidden;border-radius:6px}
.is-animated .story-scene{position:absolute;inset:0;margin:0}
.is-animated .story-routine{z-index:2;opacity:var(--story-routine-opacity,1)}
.is-animated .story-relief{z-index:3;clip-path:inset(0 var(--story-wipe,100%) 0 0)}
.is-animated .story-relief-inner{opacity:var(--story-relief-opacity,0)}
.is-animated .story-finish{z-index:4;opacity:var(--story-finish-opacity,0)}
.is-animated .story-finish-inner{transform:translate3d(0,var(--story-finish-y,20px),0)}
.is-animated .story-scene[aria-hidden="true"]{pointer-events:none}
.is-animated .story-broom{position:absolute;display:block;z-index:5;width:205px;height:360px;left:0;top:calc(50% - 170px);opacity:0;transform-origin:50% 80%;will-change:transform}
.story-broom svg{width:100%;height:100%;overflow:visible}
.is-animated .story-progress{position:absolute;display:block;height:3px;bottom:0;left:0;right:0;background:var(--gold);transform:scaleX(var(--story-progress,0));transform-origin:left}
.is-static .story-footer{padding-bottom:12px}
/* Costs stay available, but the visitor chooses when to see them. */
.comparison-optional{padding-top:34px;padding-bottom:34px}
.comparison-optional>details{padding:0;border-block:1px solid var(--line)}
.comparison-optional>details>summary{display:flex;justify-content:space-between;align-items:center;gap:25px;padding:25px 40px 25px 0;font-weight:500}
.comparison-optional>details>summary>span{font:500 26px var(--display);letter-spacing:-.025em}
.comparison-optional>details>summary>small{font:500 14px var(--body);color:var(--muted)}
.comparison-optional>details>summary::after{top:24px}
.comparison-optional .comparison{padding:25px 0 40px}
.comparison-optional .comparison-inputs>p,.comparison-optional .comparison-results>p{padding-right:0}
.comparison-optional .comparison-note{margin-top:17px}
@media(min-width:1100px) and (min-height:950px){.is-animated .story-sticky{max-height:950px;top:calc((100svh - 950px)/2)}}
@media(max-width:1100px){.story-sticky{padding-inline:30px}.story-scene{padding:36px}.story-routine,.story-finish-inner{gap:35px}.story-choices strong{font-size:28px}}
@media(max-width:760px){
 .welcome-note{padding:18px 22px;max-width:290px}.welcome-note>strong{font-size:25px}
 .story-sticky{padding:18px 18px 14px}.is-animated .story-sticky{padding:16px 18px 14px}
 .story-topbar{padding-bottom:13px;gap:12px;align-items:flex-start}.story-topbar>.eyebrow{max-width:90px;font-size:9px;line-height:1.5}
 .story-tools{gap:12px;font-size:10px}.story-tools button{padding:0}
 .story-scene{padding:26px 24px}.story-scene .eyebrow{font-size:10px;margin-bottom:14px}
 .story-routine{grid-template-columns:1fr;align-content:center;gap:28px}.story-routine h2{font-size:35px;margin-bottom:18px}
 .story-routine-copy>p:not(.eyebrow){font-size:16px;max-width:100%}.story-notes{gap:12px}.story-notes li{padding:15px 18px 15px 45px}
 .story-notes li>span{left:18px;top:22px;width:14px;height:14px}.story-notes strong{font-size:23px}.story-notes p{font-size:13px;margin-top:4px}
 .story-brand-mark{font-size:20px;gap:9px;margin-bottom:25px}.story-brand-mark img{width:40px;height:40px}
 .story-relief h3{font-size:36px;line-height:1.1}.story-relief h3 span{margin-top:18px}.story-relief-inner>p:last-child{font-size:16px}
 .story-finish-inner{grid-template-columns:1fr;align-content:center;gap:24px}.story-finish h3{font-size:34px;margin-bottom:18px}
 .story-finish-copy>p:not(.eyebrow){font-size:16px;margin-bottom:17px}.story-finish-copy>.story-freedom{font-size:14px!important}
 .story-finish .story-button{font-size:15px;padding:14px 17px;gap:10px}.story-finish .story-availability{font-size:10px!important;max-width:100%}
 .story-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
 .story-choices li{display:block;padding:14px 0 0;border-top:1px solid #ffffff38;border-bottom:0}
 .story-choices li>span{font-size:20px;display:block;margin-bottom:7px}.story-choices strong{font-size:22px}
 .story-choices p{font-size:11px;line-height:1.4;margin-top:5px}
 .story-footer{display:block;padding-top:12px}.story-steps{justify-content:space-between;gap:8px;font-size:10px}
 .story-footer>span{display:block;font-size:10px;margin-top:9px;text-align:center}
 .is-animated .story-broom{width:155px;height:300px;top:calc(50% - 130px)}
 .comparison-optional{padding-top:24px;padding-bottom:24px}.comparison-optional>details>summary{display:block;padding-right:30px}
 .comparison-optional>details>summary>span{font-size:23px;display:block}.comparison-optional>details>summary>small{display:block;margin-top:7px}
}
@media(max-width:390px){.story-scene{padding:22px 18px}.story-routine h2,.story-relief h3{font-size:31px}.story-finish h3{font-size:29px}.story-choices strong{font-size:20px}.story-finish-copy>p:not(.eyebrow){font-size:14px}}
@media(prefers-reduced-motion:reduce),(max-height:479px){.cost-story.is-animated{height:auto}.is-animated .story-sticky{position:static;height:auto;display:block}.is-animated .story-arena{overflow:visible}.is-animated .story-scene{position:relative;inset:auto;opacity:1;transform:none;clip-path:none;margin-bottom:20px;pointer-events:auto}.is-animated .story-relief-inner,.is-animated .story-finish-inner{opacity:1;transform:none}.is-animated .story-broom,.is-animated .story-progress{display:none}}
@media print{.cost-story.is-animated{height:auto}.is-animated .story-sticky{position:static;height:auto;max-height:none;display:block}.is-animated .story-scene{position:relative;opacity:1;transform:none;clip-path:none;margin-bottom:20px}.is-animated .story-relief-inner,.is-animated .story-finish-inner{opacity:1;transform:none}.story-broom,.story-tools,.story-progress{display:none!important}.story-scene{break-inside:avoid}}

/* Six clear responsibilities, without repeating prices in the scroll story. */
.story-routine{grid-template-columns:1fr 1.15fr;gap:40px}
.story-notes{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.story-notes li{padding:18px 18px 18px 44px}
.story-notes li:nth-child(odd){transform:rotate(-.7deg)}
.story-notes li:nth-child(even){transform:rotate(.7deg)}
.story-notes li>span{left:18px;top:23px;width:13px;height:13px}
.story-notes strong{font-size:20px}
@media(max-width:760px){
 .story-routine{grid-template-columns:1fr;gap:24px}
 .story-notes{gap:10px}.story-notes li{padding:13px 12px 13px 30px}
 .story-notes li>span{left:11px;top:18px;width:10px;height:10px}
 .story-notes strong{font-size:17px}.story-notes p{font-size:12px;line-height:1.4;margin-top:5px}
}

.story-brand-mark img{width:240px;height:auto;filter:none}
@media(max-width:760px){.story-brand-mark img{width:210px;height:auto}}

/* Final scene: a clear invitation and three steps for the team's next phase. */
.story-evolve{grid-template-columns:1fr;align-content:center;gap:40px}
.story-evolve h3{max-width:850px}
.story-evolve-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}
.story-evolve-steps li,.story-evolve-steps li:first-child{display:block;padding:0;border:0}
.story-evolve-steps svg{display:block;color:#d6dfb2;margin-bottom:14px}
.story-evolve-steps strong{font-size:23px}
.story-evolve-steps p{font-size:15px;line-height:1.5;margin-top:9px}
@media(max-width:760px){
 .story-evolve{gap:28px}.story-evolve h3{font-size:34px}
 .story-evolve-steps{gap:16px}.story-evolve-steps strong{font-size:18px}
 .story-evolve-steps p{font-size:13px;line-height:1.45}.story-evolve-steps svg{width:18px;height:18px;margin-bottom:10px}
}
@media(max-width:390px){.story-evolve h3{font-size:30px}.story-evolve-steps{gap:12px}.story-evolve-steps strong{font-size:17px}}

/* Keep the scroll scenes readable in laptop windows and compact phone views. */
@media(max-height:740px){
 .is-animated .story-sticky{padding-top:16px;padding-bottom:14px}
 .is-animated .story-scene{padding:24px 30px}
 .is-animated .story-routine{gap:24px}
 .is-animated .story-routine h2{font-size:clamp(28px,3.2vw,42px);margin-bottom:16px}
 .is-animated .story-routine-copy>p:not(.eyebrow){font-size:16px;line-height:1.4}
 .is-animated .story-notes{gap:10px}
 .is-animated .story-notes li{padding:12px 12px 12px 34px}
 .is-animated .story-notes li>span{left:12px;top:18px}
 .is-animated .story-notes strong{font-size:18px;line-height:1.15;display:block}
 .is-animated .story-notes p{font-size:13px;line-height:1.35;margin-top:5px}
 .is-animated .story-brand-mark{margin-bottom:16px}
 .is-animated .story-brand-mark img{width:190px}
 .is-animated .story-relief .eyebrow{margin-bottom:12px}
 .is-animated .story-relief h3{font-size:clamp(30px,3.5vw,44px);margin-bottom:18px}
 .is-animated .story-relief h3 span{margin-top:12px}
 .is-animated .story-relief-inner>p:last-child{font-size:17px}
 .is-animated .story-evolve{gap:24px}
 .is-animated .story-finish h3{font-size:clamp(30px,3.2vw,44px);margin-bottom:16px}
 .is-animated .story-evolve-steps{gap:20px}
 .is-animated .story-evolve-steps svg{margin-bottom:8px}
 .is-animated .story-evolve-steps p{font-size:14px;line-height:1.4;margin-top:6px}
}
@media(max-width:760px) and (max-height:740px){
 .is-animated .story-scene{padding:18px 16px}
 .is-animated .story-routine{gap:16px}
 .is-animated .story-routine-copy>.eyebrow{margin-bottom:10px;font-size:9px}
 .is-animated .story-routine h2{font-size:27px;margin-bottom:12px}
 .is-animated .story-routine-copy>p:not(.eyebrow){font-size:14px}
 .is-animated .story-notes{gap:8px}
 .is-animated .story-notes li{padding:10px 9px 10px 27px}
 .is-animated .story-notes li>span{left:9px;top:15px;width:9px;height:9px}
 .is-animated .story-notes strong{font-size:15px}
 .is-animated .story-notes p{font-size:11.5px}
 .is-animated .story-relief h3{font-size:30px}
 .is-animated .story-relief-inner>p:last-child{font-size:15px}
 .is-animated .story-finish h3{font-size:29px}
 .is-animated .story-evolve-steps{gap:12px}
 .is-animated .story-evolve-steps strong{font-size:17px}
 .is-animated .story-evolve-steps p{font-size:12px}
}
