/* Motion enhances the existing page; content remains visible without JavaScript. */
.reading-progress{position:fixed;inset:0 0 auto;height:3px;z-index:100;pointer-events:none;background:linear-gradient(90deg,#0b6b57,#9ad6b5);transform:scaleX(var(--page-progress,0));transform-origin:left}
.motion-toggle{position:fixed;bottom:18px;left:18px;z-index:45;display:flex;align-items:center;gap:8px;background:#fffef9ed;color:#164d3d;border:1px solid #cbded2;border-radius:30px;padding:9px 14px;font-size:11px;box-shadow:0 4px 20px #043d3110;backdrop-filter:blur(12px)}
.motion-toggle span{font-size:13px;line-height:1}.motion-toggle:hover{background:#eaf4ec}.motion-toggle[hidden]{display:none}
.product-revenue strong,.kasir-values strong{font-variant-numeric:tabular-nums}
.hero-product{translate:0 var(--visual-shift,0px)}
.orbit{rotate:var(--orbit-turn,0deg)}
.orbit:after{content:'';position:absolute;width:9px;height:9px;top:13%;left:13%;border-radius:50%;background:#669f86;box-shadow:0 0 0 7px #669f8612}
.orbit-two:after{left:auto;right:13%;top:auto;bottom:13%;width:6px;height:6px;background:#b77979;box-shadow:0 0 0 6px #b779790d}
.hero-product .floating-message{translate:0 var(--message-shift,0px)}
.hero-product .approval-chip{translate:0 var(--chip-shift,0px)}
.hero-emphasis:after{transform-origin:left;scale:var(--underline-scale,1) 1}
.bar-chart{isolation:isolate}.bar-chart>div{z-index:1}.bar-chart i{transform-origin:bottom}
.chart-trajectory{position:absolute;inset:0 6px 21px;width:calc(100% - 12px);height:calc(100% - 21px);overflow:visible;pointer-events:none;z-index:2}
.chart-trajectory .chart-line{fill:none;stroke:#c6ebcf;stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0}
.chart-trajectory .chart-point{fill:#d7f6df;stroke:#4b8f71;stroke-width:1;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 3px #d7f6df99)}
.kasir-sparkline{margin:0 0 13px;height:48px;border-bottom:1px solid #d9e6de;position:relative;overflow:hidden}
.kasir-sparkline svg{display:block;width:100%;height:100%}.kasir-sparkline path{stroke:#39856a;stroke-width:2;fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:none;stroke-dashoffset:0}
.kasir-sparkline polygon{fill:#dceee2}.kasir-sparkline circle{fill:#0b6b57}
.strip-flow>span{position:relative}.strip-flow>b{position:relative}
.strip-flow>b:after{content:'';position:absolute;top:50%;left:0;width:5px;height:5px;border-radius:50%;background:#478f70;opacity:0}
.control-timeline{position:relative;isolation:isolate}
.control-timeline:before{content:'';position:absolute;left:0;top:12px;bottom:12px;width:2px;background:#b4dfc7;opacity:.8;transform:scaleY(var(--timeline-progress,0));transform-origin:top;z-index:2}
.timeline-step{transition:border-color .35s,background .35s;position:relative}
.timeline-step.is-current{border-color:#b5dfc780;background:#ffffff0e}
.timeline-step.is-current>span{color:#d4f0df}
.how-step{transition:translate .3s,box-shadow .3s}
@media(hover:hover){.how-step:hover{translate:0 -5px}.kasir-browser{transition:rotate .4s}.kasir-browser:hover{rotate:-.7deg}.connection-card{transition:translate .3s}.connection-card:hover{translate:0 -3px}}
html.motion-enabled .is-in-view .floating-message{animation:message-float 5s ease-in-out 3}
html.motion-enabled .is-in-view .approval-chip{animation:chip-float 6s ease-in-out 3}
html.motion-enabled .is-in-view.strip-inner .strip-flow>b:after{animation:data-travel 2.8s ease-in-out 5}
html.motion-enabled .strip-flow>b:nth-of-type(2):after{animation-delay:.6s!important}
html.motion-enabled .strip-flow>b:nth-of-type(3):after{animation-delay:1.2s!important}
html.motion-enabled .is-in-view .connection-line>b{animation:connection-down 2.8s ease-in-out 5}
html.motion-enabled .is-in-view .step-chat i{animation:chat-arrive 3.4s ease-in-out 4}
html.motion-enabled .step-chat i:nth-child(2){animation-delay:.25s!important}
html.motion-enabled .step-chat i:nth-child(3){animation-delay:.5s!important}
html.motion-enabled .is-in-view .step-flow i{animation:flow-glow 3s ease-in-out 4}
html.motion-enabled .step-flow i:nth-of-type(2){animation-delay:.4s!important}
html.motion-enabled .step-flow i:nth-of-type(3){animation-delay:.8s!important}
html.motion-enabled .is-in-view .step-check i{animation:check-pop 3.4s ease-in-out 4}
html.motion-paused *,html.motion-paused *:before,html.motion-paused *:after,html.page-hidden *,html.page-hidden *:before,html.page-hidden *:after{animation-play-state:paused!important}
@keyframes message-float{0%,100%{transform:translateY(0) rotate(1.6deg)}50%{transform:translateY(-8px) rotate(.6deg)}}
@keyframes chip-float{0%,100%{transform:translateY(0) rotate(4deg)}50%{transform:translateY(6px) rotate(2deg)}}
@keyframes data-travel{0%,15%{opacity:0;transform:translate(-9px,-50%)}35%,65%{opacity:1}85%,100%{opacity:0;transform:translate(18px,-50%)}}
@keyframes connection-down{0%,100%{transform:translateY(-3px);opacity:.45}50%{transform:translateY(4px);opacity:1}}
@keyframes chat-arrive{0%,100%{transform:translateX(0);opacity:1}35%{transform:translateX(5px);opacity:.65}65%{transform:translateX(0);opacity:1}}
@keyframes flow-glow{0%,100%{box-shadow:0 0 0 0 #7fc19a00}50%{box-shadow:0 0 0 5px #7fc19a25}}
@keyframes check-pop{0%,65%,100%{transform:scale(1)}40%{transform:scale(1.1)}}
@media(max-width:720px){.motion-toggle{bottom:12px;left:12px;padding:8px 12px;font-size:10px}.kasir-sparkline{height:40px}.chart-trajectory{bottom:19px;height:calc(100% - 19px)}}
@media(prefers-reduced-motion:reduce){.hero-product,.hero-product .floating-message,.hero-product .approval-chip{translate:none!important}.orbit{rotate:none!important}.control-timeline:before{transform:none}.motion-toggle{display:none}.how-step:hover{translate:none}}
@media print{.motion-toggle,.reading-progress{display:none!important}}

.product-revenue>strong .revenue-digits{font:inherit;color:inherit}.revenue-digits>span{font:inherit!important;color:inherit!important}

/* All four steps rest in forest green; only the hovered card turns mint. */
.control-timeline{gap:10px}
.control-timeline .timeline-step{background:var(--forest);color:#f5fff8;border:1px solid #ffffff24;border-radius:8px;margin:0;padding:20px 22px;transition:background-color .25s ease,border-color .25s ease,color .25s ease}
.control-timeline .timeline-step h3{color:#f5fff8}
.control-timeline .timeline-step small,.control-timeline .timeline-step>span,.control-timeline .timeline-step>i{color:#bbddc8}
.control-timeline .timeline-step p{color:#c1d9cb}
.control-timeline .timeline-step h3,.control-timeline .timeline-step small,.control-timeline .timeline-step p,.control-timeline .timeline-step>span,.control-timeline .timeline-step>i{transition:color .25s ease}
@media(hover:hover){
  .control-timeline .timeline-step:hover{background:#d8ecde;border-color:#d8ecde;color:#043d31}
  .control-timeline .timeline-step:hover h3{color:#043d31}
  .control-timeline .timeline-step:hover small,.control-timeline .timeline-step:hover>span,.control-timeline .timeline-step:hover>i{color:#0b6b57}
  .control-timeline .timeline-step:hover p{color:#355747}
}
@media(max-width:720px){.control-timeline .timeline-step{padding:18px 17px}}

/* One active day controls the hero chart and the matching sales summary. */
.product-revenue>span{display:flex;align-items:center;gap:8px;min-height:19px}
.product-revenue .chart-day{font:500 9px var(--font);color:#d4f0df;background:#ffffff0c;border:1px solid #c4e8d12b;border-radius:20px;padding:2px 9px;line-height:1.5;min-width:57px;text-align:center}
.bar-chart i{transition:background-color .25s ease}
.bar-chart span{transition:color .25s ease}
.bar-chart .today span{color:#e6ffed;font-weight:700}
.revenue-digits{display:inline-block}
@media(prefers-reduced-motion:reduce){.bar-chart i,.bar-chart span{transition:none}}