/* inner pages: distinct design languages. transform/opacity animations only; no backdrop-filter or CSS filters. */
.inner .changes{position:relative;overflow:hidden}
.ico,.art svg,.fl__ic svg{overflow:visible}
.s-frame,.s-frame-thin{fill:none;stroke:#7d8aa3;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.s-frame-thin{stroke-width:2}
.s-fill{fill:#c3ccda}.s-soft{fill:#d6dce6}.s-soft-l{stroke:#d6dce6;stroke-width:3}.s-tint{fill:#eef2f8;stroke:#c8d1de;stroke-width:1.5}
.s-acc{fill:url(#ga)}.s-accf{fill:url(#ga)}.s-white{fill:#fff}
.s-lens{fill:rgba(255,255,255,.7);stroke:url(#ga);stroke-width:5}.s-handle{stroke:url(#ga);stroke-width:7;stroke-linecap:round}
.s-tick{fill:none;stroke:#0b7f74;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.s-tick-w{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.s-hand{fill:none;stroke:url(#ga);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.s-road{fill:none;stroke:#fff;stroke-width:10;stroke-linecap:round}.s-road--t{stroke-width:6}
.rv{transition:opacity .6s ease var(--d,0s),transform .6s cubic-bezier(.2,.8,.2,1) var(--d,0s)}
html.rv-on .rv:not(.in){opacity:0;transform:translateY(22px)}
/* ===== Onboarding: illustrated sequence + scroll track ===== */
.cs{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:c;position:relative}
.cs::before{content:"";position:absolute;left:8%;right:8%;top:62px;border-top:2px dashed #c3ccda;z-index:0}
.cs__i{position:relative;z-index:1;display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:18px;background:linear-gradient(160deg,#fff,#eef2f7);border:1px solid #fff;box-shadow:0 18px 36px -24px rgba(70,88,120,.5)}
.cs__n{font:700 12px/1 system-ui;letter-spacing:.1em;color:#0b6e65}
.cs__i .ico{width:84px;height:84px;margin:4px 0 6px}
.cs__i strong{font-size:16px;line-height:1.3}.cs__i>span:last-child{color:var(--mute);font-size:14px;line-height:1.45}
.a-scan{animation:scan 3.2s ease-in-out infinite;transform-box:fill-box}
@keyframes scan{0%,100%{transform:translate(-26px,-14px)}50%{transform:translate(0,4px)}}
.a-drip{animation:drip 2.2s ease-in infinite;opacity:0}.a-drip2{animation-delay:.7s}.a-drip3{animation-delay:1.4s}
@keyframes drip{0%{transform:translateY(-12px);opacity:0}20%{opacity:1}100%{transform:translateY(18px);opacity:0}}
.a-tick{stroke-dasharray:24;stroke-dashoffset:24;animation:tick 3.6s ease infinite}.a-tick1{animation-delay:.4s}.a-tick2{animation-delay:.8s}
@keyframes tick{0%{stroke-dashoffset:24}25%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:24}}
.a-shake{animation:shake 2.4s ease-in-out infinite;transform-origin:60px 64px}
@keyframes shake{0%,60%,100%{transform:translateY(0)}70%{transform:translateY(-4px)}80%{transform:translateY(3px)}90%{transform:translateY(-2px)}}
.a-pulse{animation:pulse 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes pulse{50%{transform:scale(1.35);opacity:.6}}
.wt{position:relative;margin-top:22px;padding-left:46px}
.wt__rail{position:absolute;left:17px;top:6px;bottom:6px;width:4px;border-radius:4px;background:#d6dce6;overflow:hidden}
.wt__fill{position:absolute;inset:0;background:linear-gradient(#2f5bea,#0b7f74);transform-origin:top;transform:scaleY(var(--p,1))}
html.rv-on .wt__fill{transform:scaleY(var(--p,0))}
.wt__l{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.wt__s{position:relative}
.wt__dot{position:absolute;left:-46px;top:0;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid #c3ccda;color:#465164;font-size:14px;transition:background .4s,border-color .4s,color .4s,transform .4s}
.wt__s.lit .wt__dot{background:linear-gradient(135deg,#2f5bea,#0b7f74);border-color:#fff;color:#fff;transform:scale(1.08);box-shadow:0 8px 20px -8px rgba(47,91,234,.7)}
.wt__c{padding:14px 16px;border-radius:16px;background:linear-gradient(160deg,#fff,#eef2f7);border:1px solid #fff;box-shadow:0 14px 30px -22px rgba(70,88,120,.5)}
.wt__w{display:block;font:700 12px/1 system-ui;letter-spacing:.1em;text-transform:uppercase;color:#0b6e65;margin-bottom:6px}
.wt__c strong{font-size:18px}.wt__c ul{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:6px;color:var(--mute);font-size:15px}
.wt__c li{padding-left:22px;position:relative}.wt__c li::before{content:"";position:absolute;left:0;top:.45em;width:12px;height:12px;border-radius:4px;background:#d6dce6;transition:background .3s calc(var(--k)*.15s)}
.wt__s.lit .wt__c li::before{background:linear-gradient(135deg,#2f5bea,#0b7f74)}
.dream--orb{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;list-style:none;padding:0}
.dream--orb li{text-align:center;padding:16px 10px;border-radius:999px 999px 18px 18px;background:radial-gradient(circle at 50% 0%,#fff,#e6ebf3);border:1px solid #fff;box-shadow:0 14px 30px -22px rgba(70,88,120,.5);animation:float 5s ease-in-out infinite}
.dream--orb li:nth-child(2){animation-delay:-1.2s}.dream--orb li:nth-child(3){animation-delay:-2.4s}.dream--orb li:nth-child(4){animation-delay:-3.6s}
@keyframes float{50%{transform:translateY(-6px)}}
.dream--orb b{display:block;font-size:17px;background:linear-gradient(90deg,#2f5bea,#0b7f74);-webkit-background-clip:text;background-clip:text;color:transparent}
/* ===== Sage Hill: case file / dashboard ===== */
.ba{position:relative;display:block;overflow:hidden;border-radius:16px}
.ba__veil{position:absolute;inset:0;z-index:1;background:repeating-linear-gradient(135deg,#dfe4ec 0 10px,#e9edf3 10px 20px);transform-origin:right;transition:transform 1.4s cubic-bezier(.7,0,.2,1) .4s}
.ba.in .ba__veil{transform:scaleX(0)}
html:not(.rv-on) .ba__veil{transform:scaleX(0)}
.ba__tag{position:absolute;z-index:2;top:12px;padding:6px 12px;border-radius:999px;font:700 12px/1 system-ui;letter-spacing:.08em;text-transform:uppercase;transition:opacity .5s}
.ba__tag--b{left:12px;background:#fff;color:#465164}.ba__tag--a{right:12px;background:linear-gradient(90deg,#2f5bea,#0b7f74);color:#fff;opacity:0;transition-delay:1.6s}
.ba.in .ba__tag--b{opacity:0;transition-delay:1s}.ba.in .ba__tag--a,html:not(.rv-on) .ba__tag--a{opacity:1}
html:not(.rv-on) .ba__tag--b{opacity:0}
.tiles{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.tile{position:relative;overflow:hidden;padding:18px 16px 46px;border-radius:16px;background:linear-gradient(160deg,#fff,#eef2f7);border:1px solid #fff;box-shadow:0 18px 36px -24px rgba(70,88,120,.5)}
.tile b{display:block;font-size:clamp(26px,3.4vw,38px);line-height:1.05;letter-spacing:-.02em;background:linear-gradient(90deg,#2f5bea,#0b7f74);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.tile>span{display:block;margin-top:6px;color:var(--mute);font-size:14px;line-height:1.4}
.tile__sp{position:absolute;left:0;right:0;bottom:8px;width:100%;height:34px}
.sp{fill:none;stroke:url(#ga);stroke:#2f5bea;stroke-width:2.5;stroke-dasharray:160;stroke-dashoffset:160;transition:stroke-dashoffset 1.6s ease .3s;vector-effect:non-scaling-stroke}
.sp--soft{stroke:#d6dce6}.sp-bar{fill:#0b7f74;transform-origin:left;transform:scaleX(0);transition:transform 1.4s ease .3s}
.tile.in .sp,html:not(.rv-on) .sp{stroke-dashoffset:0}.tile.in .sp-bar,html:not(.rv-on) .sp-bar{transform:scaleX(1)}
.fl{position:relative;margin-top:16px}
.fl__wire{position:absolute;left:12%;right:12%;top:30px;width:76%;height:10px}
.fl__path{stroke:#c3ccda;stroke-width:2;stroke-dasharray:6 6;fill:none;vector-effect:non-scaling-stroke}
.fl__dot{fill:#2f5bea;animation:run 3s linear infinite}
@keyframes run{from{transform:translateX(0)}to{transform:translateX(300px)}}
.fl__l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;position:relative}
.fl__s{text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.fl__ic{width:60px;height:60px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(160deg,#fff,#e6ebf3);border:1px solid #fff;box-shadow:0 12px 26px -16px rgba(47,91,234,.6)}
.fl__ic svg{width:34px;height:34px}.fl__s>span{color:var(--mute);font-size:14px;line-height:1.45}
/* ===== Problem pages: one hero illustration + layout per page ===== */
.art{max-width:420px;margin:0 auto 10px}.art svg{width:100%;height:auto;display:block}
.pchg .points{counter-reset:none}
.pchg .points li{position:relative}
.pn{font-style:normal;font:800 13px/1 system-ui;letter-spacing:.08em;color:#0b6e65;display:block;margin-bottom:4px}
.pc{opacity:0;animation:build 6s ease infinite;animation-delay:calc(var(--k)*.45s)}
@keyframes build{0%{opacity:0;transform:translateY(8px)}12%,85%{opacity:1;transform:none}100%{opacity:0}}
.pc--pop{transform-box:fill-box;transform-origin:center}
.ring{fill:none;stroke:#2f5bea;stroke-width:2;animation:ring2 2.6s ease-out infinite;transform-box:fill-box;transform-origin:center}.ring2{animation-delay:1.3s}
@keyframes ring2{from{transform:scale(.4);opacity:.9}to{transform:scale(3.4);opacity:0}}
.pin{animation:drop 3.2s cubic-bezier(.3,1.6,.5,1) infinite}.pin--s{animation-delay:calc(var(--k)*.5s)}
@keyframes drop{0%{transform:translateY(-30px);opacity:0}15%,85%{transform:none;opacity:1}100%{opacity:0}}
.pin--s{animation-name:drop2}@keyframes drop2{0%{opacity:0}20%,85%{opacity:1}100%{opacity:0}}
.star{fill:#d6dce6;transform-box:fill-box;transform-origin:center;animation:star 4s ease infinite;animation-delay:calc(var(--k)*.2s)}
@keyframes star{0%,8%{fill:#d6dce6;transform:scale(.8)}20%,85%{fill:#f5b400;transform:scale(1)}100%{fill:#d6dce6}}
.bub{animation:bub 4s ease infinite;animation-delay:calc(1s + var(--k)*.5s);opacity:0}
@keyframes bub{0%{opacity:0;transform:translateY(10px)}20%,85%{opacity:1;transform:none}100%{opacity:0}}
.env{animation:env 3s ease-in infinite;animation-delay:calc(var(--k)*.5s)}
@keyframes env{0%{transform:translate(0,0);opacity:0}15%{opacity:1}70%{opacity:1}100%{transform:translate(calc((1 - var(--k))*80px),110px) scale(.5);opacity:0}}
.cnt{animation:pulse 1.5s ease-in-out infinite;transform-box:fill-box;transform-origin:center}.cnt__t{fill:#fff;font:700 13px system-ui}
.slot{fill:#eef2f8;stroke:#d6dce6;stroke-width:1.5}
.slot--on{animation:slot 5s ease infinite;animation-delay:calc(var(--k)*.35s)}
@keyframes slot{0%,5%{fill:#eef2f8}15%,85%{fill:#2f5bea}100%{fill:#eef2f8}}
.chk{animation:pulse 2.5s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.gear{animation:spin 8s linear infinite;transform-box:fill-box;transform-origin:center}.gear--r{animation-direction:reverse;animation-duration:5s}
@keyframes spin{to{rotate:360deg}}
.gear{animation-name:spinr}@keyframes spinr{to{rotate:360deg}}
.msg{animation:bub 4.5s ease infinite;animation-delay:calc(var(--k)*.6s);opacity:0}
/* page-specific "What changes" layouts */
.pts--stack .points li{border-left:4px solid #2f5bea}
.pts--radar .points li{border-radius:999px 18px 18px 999px;padding-left:28px}
.pts--quote .points li strong::before{content:"“";color:#2f5bea;font-size:1.4em;margin-right:4px}
.pts--flow .points{counter-reset:none}.pts--flow .points li+li{margin-top:0}
.pts--slots .points li{border-top:4px solid #0b7f74}
.pts--loop .points li{border-radius:22px;border:1px dashed #b7c2d3}
@media (max-width:820px){
 .cs{grid-template-columns:1fr 1fr}.cs::before{display:none}.cs__i .ico{width:64px;height:64px}
 .tiles{grid-template-columns:1fr 1fr}
 .fl__l{grid-template-columns:1fr;gap:18px}.fl__wire{display:none}
 .dream--orb{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
 .inner *{animation:none!important;transition:none!important}
 html.rv-on .rv:not(.in){opacity:1;transform:none}
 .pc,.bub,.msg,.a-drip{opacity:1}.a-tick{stroke-dashoffset:0}.wt__fill{transform:scaleY(1)!important}.ba__veil{transform:scaleX(0)!important}.ba__tag--a{opacity:1!important}.ba__tag--b{opacity:0}
 .slot--on{fill:#2f5bea}.star{fill:#f5b400}.sp{stroke-dashoffset:0}.sp-bar{transform:none}
}