.scrolly:not(.story-ready){height:auto;padding-block:var(--section-padding)}
.scrolly:not(.story-ready)>.sticky{display:none}
.story-ready>.process-static{display:none}
.process-static>h2{margin-bottom:var(--space-8)}
.process-phases{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--section-gutter)}
.process-phases li{padding:var(--space-6);border:var(--stroke-default) solid var(--material-standard-border);border-radius:var(--radius-lg);background:var(--material-standard-background);min-inline-size:0}

.process-phases :is(h3,p){overflow-wrap:break-word;hyphens:auto}
.process-phases h3{margin-block:var(--space-3)}
.process-phases p:last-child{color:var(--color-muted-foreground);max-width:60ch}
@media (min-width:768px){.process-phases li{padding:var(--space-8)}}
@media (min-width:1280px){.process-phases{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.process-phases{grid-template-columns:1fr}}
@media (max-width:389.98px){.process-phases li{padding:var(--space-5)}}


.process-phases .stage-num,.stage-copy .stage-num{color:var(--color-link);display:flex;align-items:center;gap:var(--space-2);margin:0}
.process-phases .stage-num::before,.stage-copy .stage-num::before{content:"";width:var(--space-2);height:var(--space-2);flex:none;border-radius:var(--radius-round);background:var(--color-brand-signal)}


.scrolly{position:relative;height:900svh}
.sticky{
  position:sticky;top:0;height:100svh;display:grid;align-items:center;isolation:isolate;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-12);
  width:min(100% - 2 * var(--page-padding),var(--wrap));margin-inline:auto;
}
.stage-copy{max-width:36ch}
.stage-copy h2{margin-top:var(--space-3);text-wrap:balance}
.stage-copy p{color:var(--color-muted-foreground);margin-top:var(--space-3)}
.stage-copy .swap{transition:opacity var(--motion-duration-exit) var(--motion-easing-exit),transform var(--motion-duration-exit) var(--motion-easing-exit)}
.stage-copy.is-swap .swap{opacity:0;transform:translateY(var(--motion-distance-medium))}


.stage-steps{display:flex;gap:var(--space-2);margin-bottom:var(--space-6)}
.tick{height:var(--space-1);flex:1;background:var(--color-muted);border-radius:var(--radius-round);overflow:hidden}
.tick i{display:block;height:100%;width:0;background:var(--color-primary);border-radius:inherit;transition:width var(--motion-duration-fast) linear}


.development-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-2);margin-top:var(--space-4)}
.development-steps[hidden]{display:none}
.development-steps button{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-0-5);
  min-height:var(--size-target-web-touch);padding:var(--space-2) var(--space-2);
  background:var(--color-secondary);color:var(--color-secondary-foreground);
  border:var(--stroke-default) solid var(--color-border);border-radius:var(--radius-md);
  text-align:center;cursor:pointer;hyphens:auto;
  transition:background-color var(--motion-duration-fast) var(--motion-easing-standard),transform var(--motion-duration-fast) var(--motion-easing-standard);
}
.development-steps button>span:first-child{font:var(--type-caption);font-variant-numeric:tabular-nums;color:var(--color-muted-foreground)}
.development-steps button>span:last-child{font:var(--type-label)}
.development-steps button:hover{background:var(--color-secondary-hover)}
.development-steps button:active{background:var(--color-secondary-pressed);transform:scale(var(--motion-pressed-scale))}
.development-steps button[aria-pressed="true"]{background:var(--color-accent);color:var(--color-accent-foreground);border-color:var(--color-accent-pressed);box-shadow:inset 0 -2px 0 var(--color-primary)}
.development-steps button[aria-pressed="true"]>span:first-child{color:var(--color-accent-foreground)}
.development-steps button:focus-visible{outline:var(--focus-width) solid var(--color-focus);outline-offset:var(--focus-offset)}



.story-visual{position:relative;width:100%;height:min(690px,80svh);container-type:size}
.story-visual .phone-holder{position:absolute;inset:0;align-items:center;opacity:1;transition:opacity var(--motion-duration-surface) var(--motion-easing-standard);perspective:1000px;perspective-origin:45% 45%}
.story-visual[data-scene="0"] .phone-holder,.story-visual[data-scene="1"] .phone-holder,.story-visual[data-scene="2"] .phone-holder{opacity:0;visibility:hidden}
.phone-holder{display:flex;justify-content:center}


.nojs-devices{display:none}

.story-board{
  position:absolute;inset:0;display:flex;flex-direction:column;gap:1em;padding:2em;
  border-radius:1.87em;color:var(--color-foreground);
  
  font-size:min(2.7cqw,2.375cqb);line-height:1.5;text-align:left;
  opacity:0;visibility:hidden;transform:translateY(var(--motion-distance-medium));
  transition:opacity var(--motion-duration-surface) var(--motion-easing-standard),transform var(--motion-duration-surface) var(--motion-easing-standard),visibility var(--motion-duration-surface);
}
.story-board.is-on{opacity:1;visibility:visible;transform:none}
.story-board svg{width:1.4em;height:1.4em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.board-title{display:flex;justify-content:space-between;align-items:center;font-size:.73em;font-weight:var(--font-weight-medium);letter-spacing:.06em;color:var(--color-muted-foreground)}
.board-title b{font-size:1.4em;color:var(--color-foreground)}
.story-board h3{font-size:1.87em;font-weight:var(--font-weight-strong);line-height:1.21;max-width:16ch;margin-bottom:.3em}
.story-board .project-caption{color:var(--color-muted-foreground)}
.board-footer{margin-top:auto;flex:none;font-size:.8em;color:var(--color-muted-foreground);border-top:var(--stroke-default) solid var(--color-border);padding-top:1em}


.plan-board{gap:clamp(.5em,1.9cqb,1.5em);background:var(--material-standard-background);border:var(--stroke-default) solid var(--material-standard-border)}

.plan-board h3{font-size:2.4em;max-width:10ch;margin-bottom:.2em}

.plan-simple-row{display:flex;align-items:flex-start;gap:1em;padding:min(1.07em,1.6cqb) 0;border-top:var(--stroke-default) solid var(--color-border)}
.plan-number{display:grid;place-items:center;width:2.2em;height:2.2em;flex:none;border-radius:var(--radius-round);font-size:.87em;font-variant-numeric:tabular-nums;color:var(--color-accent-foreground);background:var(--color-accent)}
.plan-simple-row small{font-size:.8em;letter-spacing:.08em;font-weight:var(--font-weight-label);color:var(--color-muted-foreground)}
.plan-simple-row h4{font-size:1.47em;font-weight:var(--font-weight-semibold);line-height:1.2;margin:.4em 0}
.plan-simple-row p{font-size:.93em;line-height:1.5;color:var(--color-muted-foreground)}
.plan-feature-list{display:flex;gap:.7em;flex-wrap:wrap;margin-top:.8em}
.plan-feature-list>span{display:flex;align-items:center;gap:.4em;padding:.4em .8em;border-radius:var(--radius-round);background:var(--color-muted);color:var(--color-foreground);font-size:.87em;font-weight:var(--font-weight-label)}
.plan-feature-list svg{width:1.2em;height:1.2em;color:var(--color-primary)}


.wire-board,.design-board{background:transparent;border:0;padding-inline:0}
.wire-board h3,.design-board h3{max-width:18ch}
.app-artboards{display:grid;grid-template-columns:1fr 1fr;gap:1.07em;flex:1;min-height:0;padding:.3em 0}

.app-artboard{position:relative;display:flex;flex-direction:column;gap:min(1em,1.5cqb);min-height:0;padding:1.35em 1.1em min(2.2em,3.2cqb);border-radius:1.87em;font-size:.82em;color:var(--color-foreground)}
.app-artboard>*{min-height:0}
.app-artboard h4{font-size:1.47em;line-height:1.1;margin:0}
.design-app-toolbar{display:flex;align-items:center;justify-content:space-between;font-size:.8em;color:var(--color-muted-foreground)}
.design-app-toolbar>span{display:grid;place-items:center;width:2em;height:2em;border-radius:var(--radius-round);font-size:.87em;background:var(--color-muted)}
.design-app-segments{display:flex;text-align:center;padding:.3em;border-radius:var(--radius-round);font-size:.8em}
.design-app-segments>*{flex:1;padding:.4em;border-radius:var(--radius-round)}
.design-job{display:flex;flex-direction:column;gap:.5em;padding:1em;border-radius:1.33em}
.design-job small{font-size:.8em;color:var(--color-muted-foreground)}
.design-job>b{font-size:.93em;line-height:1.3}
.design-job p{font-size:.8em;color:var(--color-muted-foreground)}
.design-status{font-size:.8em;align-self:flex-start;padding:.4em .7em;border-radius:var(--radius-round)}
.secondary-job{opacity:.65}
.secondary-job .wire-line{margin-block:.4em}
.wire-line{height:.4em;width:55%;flex:none;background:var(--color-muted);border:var(--stroke-default) solid var(--color-border)}
.design-check{display:flex;align-items:center;gap:.5em;font-size:.8em}
.design-check svg{width:1.2em;height:1.2em}
.design-map{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.7em;min-height:5em;flex:1;border-radius:.93em}
.design-map span{font-size:.8em}
.design-app-action{display:flex;align-items:center;justify-content:space-between;gap:.4em;margin-top:auto;padding:.9em .8em;font-size:.8em;font-weight:var(--font-weight-label)}
.design-app-action svg{width:1.1em;height:1.1em}
.design-home{position:absolute;bottom:.8em;left:34%;width:32%;height:.2em;border-radius:var(--radius-round);background:var(--color-border-strong)}


.artboard-wire{background:var(--color-surface);border:var(--stroke-default) solid var(--color-border);box-shadow:none}
.artboard-wire .design-job{border:var(--stroke-default) dashed var(--color-border-strong)}
.artboard-wire .design-app-segments{background:var(--color-muted);color:var(--color-muted-foreground)}
.artboard-wire .design-app-segments b{background:var(--color-surface);color:var(--color-foreground);font-weight:var(--font-weight-semibold)}
.artboard-wire .design-status{background:var(--color-muted);color:var(--color-muted-foreground)}
.artboard-wire .design-map{border:var(--stroke-default) dashed var(--color-border-strong);background:var(--color-surface-inset);color:var(--color-muted-foreground)}
.artboard-wire .design-app-action{border:var(--stroke-default) solid var(--color-border-strong);border-radius:.93em;background:var(--color-muted);color:var(--color-foreground)}


.artboard-polished{background:var(--color-background);border:var(--stroke-default) solid var(--color-border);box-shadow:var(--elevation-md)}
.artboard-polished .design-app-toolbar{color:var(--color-muted-foreground)}
.artboard-polished .design-app-toolbar>span{background:var(--color-accent);color:var(--color-accent-foreground)}
.artboard-polished .design-job{background:var(--material-standard-background);border:var(--stroke-default) solid var(--material-standard-border)}
.artboard-polished .design-job small,.artboard-polished .design-job p{color:var(--color-muted-foreground)}
.artboard-polished .design-status{background:var(--color-accent);color:var(--color-accent-foreground)}
.artboard-polished .design-app-segments{background:var(--color-muted);color:var(--color-muted-foreground)}
.artboard-polished .design-app-segments b{background:var(--color-surface);color:var(--color-link);font-weight:var(--font-weight-label)}
.artboard-polished .design-check{color:var(--color-primary)}
.artboard-polished .design-map{border:0;color:var(--color-primary);background:repeating-linear-gradient(32deg,transparent 0 19%,var(--color-surface) 19% 24%,transparent 24% 40%),var(--color-surface-inset)}
.artboard-polished .design-map>span{background:var(--color-surface);color:var(--color-foreground);padding:.3em .7em;border-radius:var(--radius-round)}
.artboard-polished .design-app-action{border-radius:1.33em;color:var(--color-link)}


.phone{
  position:relative;width:min(324px,74vw);aspect-ratio:9/19.2;border-radius:46px;padding:11px;
  background:linear-gradient(145deg,var(--palette-neutral-700),var(--palette-neutral-900),var(--palette-neutral-950));
  box-shadow:var(--elevation-lg),0 0 0 1px var(--palette-neutral-750) inset;
  transform:rotateY(-11deg) rotateX(4deg) translateZ(0);transition:transform var(--motion-duration-surface) var(--motion-easing-standard);
}
.phone::after{content:"";position:absolute;inset:2px;border-radius:inherit;border:var(--stroke-default) solid var(--material-frozen-edge);pointer-events:none}
.story-visual .phone{
  height:calc(100% - 22px);max-height:690px;width:auto;max-width:100%;aspect-ratio:9/19.2;
  transform:rotateY(-6deg) rotateX(3deg) rotateZ(-0.75deg);
  box-shadow:2px 1px 0 var(--palette-neutral-800),5px 2px 0 var(--palette-neutral-800),8px 3px 0 var(--palette-neutral-800),11px 4px 0 var(--palette-neutral-800),var(--elevation-lg);
}
html[data-theme="dark"] .story-visual .phone{outline:var(--stroke-default) solid var(--material-elevated-border);outline-offset:0}
.screen{
  position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;container-type:inline-size;
  background:var(--color-background);color:var(--color-foreground);box-shadow:0 0 0 var(--stroke-default) var(--palette-neutral-950);
}
.notch{position:absolute;top:3%;left:50%;transform:translateX(-50%);width:27%;height:4%;border-radius:14px;background:var(--palette-neutral-950);z-index:9}
.app-status{position:absolute;inset:4% 7% auto;z-index:10;display:flex;justify-content:space-between;align-items:center;color:var(--color-foreground);font-size:3.6cqw;font-weight:var(--font-weight-label);font-variant-numeric:tabular-nums;line-height:1;pointer-events:none}
.app-status>span{display:flex;align-items:center;gap:.5em;font-size:.8em}
.app-status svg{width:1.9em;height:1em;fill:none;stroke:currentColor;stroke-width:1.5}
.app-status .battery-fill{fill:currentColor;stroke:none}
.app-home-indicator{position:absolute;bottom:1.5%;left:34%;width:32%;height:.7%;border-radius:var(--radius-round);background:var(--color-foreground);z-index:10;pointer-events:none}
.layer{
  position:absolute;inset:0;padding:44px 18px 18px;opacity:0;transform:translateY(var(--motion-distance-medium));
  background:var(--color-background);pointer-events:none;
  transition:opacity var(--motion-duration-surface) var(--motion-easing-standard),transform var(--motion-duration-surface) var(--motion-easing-standard);
}
.layer.is-on{opacity:1;transform:none}


.app-scene{
  display:flex;flex-direction:column;gap:1.07em;padding:19% 6% 26%;isolation:isolate;text-align:left;
  font-size:4.15cqw;line-height:1.45;background:var(--color-background);color:var(--color-foreground);
}
.project-scene{padding-bottom:12%}
.app-scene svg{width:1.5em;height:1.5em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.app-heading{display:flex;justify-content:space-between;align-items:center;gap:.6em;margin-bottom:.35em}
.app-heading small{display:block;font-size:.73em;font-weight:var(--font-weight-label);letter-spacing:.06em;color:var(--color-muted-foreground)}
.app-heading h3{font-size:1.87em;line-height:1.21;margin-top:.35em}
.app-avatar{display:grid;place-items:center;width:2.7em;height:2.7em;flex:none;border-radius:var(--radius-round);background:var(--color-accent);color:var(--color-accent-foreground);font-size:.87em;font-weight:var(--font-weight-strong);border:2px solid var(--color-surface)}
.app-scene h4{font-size:1.47em;line-height:1.2;margin:.6em 0 .5em}


.glass-control{
  background:var(--color-surface-elevated);border:var(--stroke-default) solid var(--color-border-strong);
  color:var(--color-link);box-shadow:var(--elevation-sm);
}
.glass-control svg{color:var(--color-primary)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass-control{
    background:linear-gradient(135deg,var(--material-frozen-background-start),var(--material-frozen-background-end));
    border-color:var(--material-frozen-border);
    border-block-start-color:var(--material-frozen-edge);
    box-shadow:inset 0 1px 0 var(--material-frozen-inner-highlight),var(--elevation-sm);
    -webkit-backdrop-filter:saturate(var(--material-frozen-saturate)) blur(var(--material-frozen-blur));
    backdrop-filter:saturate(var(--material-frozen-saturate)) blur(var(--material-frozen-blur));
  }
}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){
  .glass-control{
    background:var(--color-surface-elevated);border-color:var(--color-border-strong);
    box-shadow:var(--elevation-sm);-webkit-backdrop-filter:none;backdrop-filter:none;
  }
}
@media (forced-colors:active){
  .glass-control{background:Canvas;border-color:CanvasText;color:LinkText;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
}


.app-action{display:flex;align-items:center;justify-content:space-between;gap:.7em;margin-top:auto;padding:1em 1.2em;border-radius:1.33em;font-size:.93em;font-weight:var(--font-weight-label)}
.app-badge{display:inline-flex;align-items:center;gap:.4em;align-self:flex-start;padding:.4em .8em;border-radius:var(--radius-round);background:var(--color-accent);color:var(--color-accent-foreground);font-size:.8em;font-weight:var(--font-weight-label)}

.layer[data-scene="3"] .app-badge::before{content:"";width:.5em;height:.5em;flex:none;border-radius:var(--radius-round);background:var(--color-brand-signal)}
.app-card-top{display:flex;justify-content:space-between;align-items:center;color:var(--color-link)}
.app-card-top svg{color:var(--color-primary)}
.project-caption{display:block;font-size:.8em;font-weight:var(--font-weight-label);letter-spacing:.09em;color:var(--color-muted-foreground)}
.project-sheet{padding:1.2em;border-radius:1.33em;background:var(--material-standard-background);border:var(--stroke-default) solid var(--material-standard-border)}
.project-sheet>p{font-size:.93em;line-height:1.6;color:var(--color-muted-foreground)}
.project-row{display:flex;align-items:center;gap:.8em;padding:.9em 0;font-size:.93em}
.project-row svg{width:1.35em;height:1.35em;color:var(--color-primary)}
.project-row b{font-weight:var(--font-weight-medium)}
.project-row+.project-row{border-top:var(--stroke-default) solid var(--color-border)}
.job-request{padding-top:1em;margin-top:1em;border-top:var(--stroke-default) solid var(--color-border);font-size:.93em;color:var(--color-muted-foreground)}

.project-health{display:flex;align-items:center;gap:.8em;padding:1em .2em}
.project-health b{display:block;font-size:1em}
.project-health small{display:block;font-size:.8em;color:var(--color-muted-foreground);margin-top:.3em}
.project-pulse{width:.6em;height:.6em;flex:none;margin-inline:.4em;border-radius:var(--radius-round);background:var(--color-brand-signal);box-shadow:0 0 0 .4em var(--color-accent)}
.todo-empty{display:block;width:1em;height:1em;flex:none;border:var(--stroke-strong) solid var(--color-border-strong);border-radius:.4em;color:var(--color-border-strong)}
.material-chips{display:flex;gap:.4em;flex-wrap:wrap;margin-top:.6em}
.material-chips>span{padding:.5em .7em;border-radius:var(--radius-round);background:var(--color-accent);color:var(--color-accent-foreground);font-size:.8em;font-weight:var(--font-weight-label)}


.app-map{position:relative;height:7.7em;margin-top:1em;border-radius:.93em;overflow:hidden;background-color:var(--color-surface-inset);background-image:linear-gradient(90deg,transparent 47%,var(--color-surface) 47% 53%,transparent 53%),linear-gradient(0deg,transparent 44%,var(--color-surface) 44% 53%,transparent 53%);background-size:4em 3em}
.route-map{margin-top:0;flex:1;min-height:6em;max-height:10em}
.map-block{position:absolute;width:4em;height:2.3em;border-radius:1em;background:var(--color-muted);transform:rotate(-20deg)}
.map-block.one{top:.5em;left:.5em}
.map-block.two{bottom:.2em;right:1em}
.app-map>svg{position:absolute;inset:0;width:100%;height:100%;color:var(--color-primary);stroke-width:4;stroke-dasharray:6 5}
.route-map>.route-drawing{stroke-dasharray:none;stroke-width:1;overflow:visible}
.route-road,.route-line{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.route-drawing .route-road{stroke:var(--color-surface);stroke-width:9}
.route-drawing .route-line{stroke:var(--color-primary);stroke-width:3.5}
.route-drawing .route-start{fill:var(--color-surface);stroke:var(--color-primary);stroke-width:2}
.route-destination>path{fill:var(--color-primary);stroke:var(--color-surface);stroke-width:1.5}
.route-destination>circle{fill:var(--color-primary-foreground);stroke:none}
.map-caption{position:absolute;bottom:.5em;left:.7em;padding:.35em .75em;border-radius:var(--radius-round);font-size:.8em;font-weight:var(--font-weight-label)}


.evidence-photos{display:flex;gap:.6em;height:5em;flex:none}
.evidence-photo{position:relative;flex:1;min-width:0;border-radius:.93em;overflow:hidden;background:var(--color-surface-inset);border:var(--stroke-default) solid var(--color-border)}
.evidence-photo.radiator{background:url('../images/maintenance-radiator.jpg') center/cover no-repeat}
.evidence-photo.pipe{background:url('../images/maintenance-pipe.jpg') center/cover no-repeat}
.label-photo{display:flex;align-items:center;justify-content:center;gap:.3em;background:var(--color-accent);color:var(--color-accent-foreground);font-variant-numeric:tabular-nums}
.signature-panel{padding:1em;border-radius:1.33em;background:var(--material-standard-background);border:var(--stroke-default) solid var(--material-standard-border)}
.signature-panel>svg{display:block;width:100%;height:5em;stroke-width:2;color:var(--color-foreground)}
.signature-panel>small{display:block;border-top:var(--stroke-default) solid var(--color-border);padding-top:.4em;font-size:.8em;color:var(--color-muted-foreground)}


.completion-mark{display:grid;place-items:center;width:5em;height:5em;margin:.5em auto 0;border-radius:var(--radius-round);background:var(--color-success);color:var(--color-success-foreground)}
.completion-mark svg{width:2.8em;height:2.8em}
.completion-caption{text-align:center;font-size:.93em;color:var(--color-muted-foreground);max-width:20em;align-self:center}
.layer[data-scene="6"] .project-sheet h4{font-size:1.87em;font-variant-numeric:tabular-nums}
.invoice-status{display:flex;align-items:center;gap:.5em;padding-top:1em;margin-top:1em;border-top:var(--stroke-default) solid var(--color-border);font-size:.8em;color:var(--color-success-foreground)}
.invoice-status svg{color:currentColor}


.project-release-brand{display:flex;align-items:center;gap:1.2em;padding:.5em 0}
.app-brand{display:grid;place-items:center;width:4.5em;height:4.5em;flex:none;border-radius:1.33em;background:var(--color-primary);color:var(--color-primary-foreground);box-shadow:inset 0 1px 0 var(--material-frozen-inner-highlight),var(--elevation-sm)}
.app-brand svg{width:2.6em;height:2.6em;stroke-width:1.4}
.project-release-brand h3{font-size:1.87em;font-weight:var(--font-weight-bold)}
.project-release-brand p{font-size:.8em;color:var(--color-muted-foreground);margin-top:.4em}
.store-get{display:inline-block;margin-top:.8em;padding:.5em 1.3em;border-radius:var(--radius-round);background:var(--color-accent);color:var(--color-accent-foreground);font-size:.8em;font-weight:var(--font-weight-label)}
.store-meta{display:flex;justify-content:space-between;gap:.6em;padding:.8em 0;border-block:var(--stroke-default) solid var(--color-border)}
.store-meta>span{display:flex;flex-direction:column;align-items:center;gap:.3em;font-size:.8em;color:var(--color-muted-foreground)}
.store-meta b{font-size:1.3em;color:var(--color-foreground);font-variant-numeric:tabular-nums}

.store-art{position:relative;overflow:hidden;padding:1.3em;border-radius:1.33em;min-height:10em;background:var(--gradient-frozen-reflection),var(--color-surface-inset)}
.store-art>span{font-size:.87em;font-weight:var(--font-weight-semibold)}
.store-art h4{max-width:8ch;font-size:1.47em;font-weight:var(--font-weight-strong);color:var(--color-foreground);margin:.6em 0}
.store-art>svg{position:absolute;right:-.6em;bottom:-.3em;width:7em;height:7em;transform:rotate(-15deg);color:var(--color-primary);opacity:.2;stroke-width:1}
.device-rollout>b{font-size:.93em}
.device-rollout>div{display:flex;gap:.5em;margin-top:.7em}
.device-rollout span{padding:.5em .8em;border-radius:.93em;font-size:.8em;background:var(--material-standard-background);border:var(--stroke-default) solid var(--material-standard-border)}


.usage-kpis{display:flex;justify-content:space-between;gap:1em}
.usage-kpis>div{display:flex;flex-direction:column}
.usage-kpis b{font-size:1.87em;line-height:1.15;color:var(--color-foreground);font-variant-numeric:tabular-nums}
.usage-kpis>div:last-child b{font-size:1.47em}
.usage-kpis small{font-size:.8em;color:var(--color-muted-foreground);margin-top:.6em}
.usage-total{font-size:1.87em;font-weight:var(--font-weight-bold);margin-top:.3em;font-variant-numeric:tabular-nums}
.usage-total small{font-size:.44em;font-weight:var(--font-weight-label);color:var(--color-foreground)}
.usage-chart{display:flex;align-items:flex-end;gap:.5em;height:5.5em;margin-top:.8em}
.usage-chart>i{flex:1;height:var(--bar);border-radius:.3em .3em .1em .1em;background:var(--color-accent)}
.usage-chart>i:nth-last-child(-n+3){background:var(--color-primary)}
.tests-green{display:flex;align-items:center;gap:.7em;padding:.85em;border-radius:.93em;background:var(--color-success);color:var(--color-success-foreground)}
.tests-green b{font-size:.93em}
.tests-green small{display:block;font-size:.8em;margin-top:.2em}
.user-review{display:flex;gap:.8em;align-items:center}
.user-review b{color:var(--color-foreground);font-size:.93em}
.user-review p{font-size:.8em;color:var(--color-muted-foreground);margin-top:.2em}



@media (max-width:1023.98px){
  .scrolly{height:850svh}
  .sticky{
    grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:var(--space-4);
    padding-block:calc(var(--nav-offset) + var(--nav-height) + var(--space-4)) var(--space-6);
    text-align:left;
  }
  .story-visual{order:1;height:100%;max-height:50svh;width:min(100%,460px);justify-self:center}
  .stage-copy{order:2;max-width:none}
  .story-visual .phone{height:calc(100% - 18px);max-height:490px}
  
  .story-board{font-size:min(2.8cqw,3.3cqb);padding:1.5em}
  .stage-steps{margin-bottom:var(--space-3)}
  .development-steps{margin-top:var(--space-3)}
  .app-artboard{font-size:.88em;gap:min(.75em,1.5cqb);padding:1.1em .9em min(2em,3.2cqb)}
  .plan-board{gap:clamp(.4em,1.3cqb,1em)}
  .plan-simple-row{padding:min(1em,1.6cqb) 0}
}
@media (max-width:639.98px){
  
  .development-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .story-visual .phone{max-height:440px}
  .sticky{padding-block-end:var(--space-4);gap:var(--space-3)}
  .story-board{font-size:min(2.85cqw,1.7svh);gap:.7em}
  .story-board h3{max-width:22ch}
  .phone{width:min(206px,54vw);border-radius:38px;padding:9px}
  .screen{border-radius:30px}
  .app-artboards{gap:1em}
  .app-artboard{font-size:.92em;gap:.65em}
  .plan-board h3{font-size:2.2em;max-width:13ch}
  .plan-simple-row h4{font-size:1.3em}
}
@media (max-width:389.98px){
  .sticky{padding-block-end:var(--space-3)}
}

@media (max-width:1023.98px) and (max-height:560px) and (orientation:landscape){
  .sticky{grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr);gap:var(--space-6)}
  .stage-copy{order:0}
  .story-visual{order:1;height:100%;max-height:none}
  .story-board{font-size:min(2.8cqw,2.2svh);padding:1em;gap:.6em}
  .story-visual .phone{height:calc(100% - 18px);max-height:none}
  .development-steps{grid-template-columns:repeat(4,minmax(0,1fr))}
  .app-artboard{padding:.9em .8em 1.4em;gap:.5em}
  .design-home{bottom:.5em}
  .plan-board{gap:.7em}
  .plan-simple-row{padding:.7em 0}
}
@media (min-width:1280px){
  .sticky{gap:var(--space-16)}
}

@media (prefers-reduced-motion:reduce){
  
  .story-visual .phone{transform:none}
  .layer{opacity:0;transform:none}
  .layer.is-on{opacity:1;transform:none}
  .story-board{transform:none}
  .story-board.is-on{transform:none}
}


@media (scripting:none){
  
  .scrolly{
    padding-block:var(--section-padding);padding-inline:var(--page-padding);
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:var(--space-12);row-gap:var(--space-16);align-items:center;
    max-width:calc(var(--wrap) + 2 * var(--page-padding));margin-inline:auto;
  }
  .scrolly:not(.story-ready)>.sticky{display:contents}
  .process-static,.process-phases,.story-visual,.phone-holder,.nojs-devices{display:contents}
  .process-static>h2{grid-column:1 / -1;margin-bottom:0}

  
  .stage-copy{display:none}

  
  .process-phases li{
    grid-column:1;margin:0;padding:0;
    background:none;border:0;border-radius:0;min-inline-size:0;
  }
  .process-phases li h3{margin-block:var(--space-2) var(--space-3)}
  .process-phases li p:last-child{max-width:46ch}

  
  .story-board,.story-visual .phone,.nojs-device{grid-column:2;position:static;inset:auto}
  .story-board{opacity:1;visibility:visible;transform:none;transition:none;min-height:0}
  .process-phases li:nth-child(1),.story-board[data-scene="0"]{grid-row:2}
  .process-phases li:nth-child(2),.story-board[data-scene="1"]{grid-row:3}
  .process-phases li:nth-child(3),.story-board[data-scene="2"]{grid-row:4}
  .process-phases li:nth-child(4){grid-row:5}
  .process-phases li:nth-child(5){grid-row:6}
  .process-phases li:nth-child(6){grid-row:7}

  
  .story-board{font-size:15px;padding:0;background:none;border:0}
  .plan-board{padding:2em;background:var(--material-standard-background);border:var(--stroke-default) solid var(--material-standard-border)}
  .app-artboards{min-height:26em}

  
  .story-visual[data-scene="0"] .phone-holder{opacity:1;visibility:visible}
  .nojs-devices{display:contents}
  .nojs-device{display:flex;justify-content:center}
  .story-visual .phone,.nojs-device .phone{
    height:auto;width:min(324px,100%);max-height:none;aspect-ratio:9/19.2;
    transform:none;justify-self:center;margin-block:var(--space-4);
  }
  .story-visual .phone{grid-row:5}
  .nojs-device:nth-of-type(1){grid-row:6}
  .nojs-device:nth-of-type(2){grid-row:7}
  
  .nojs-scene{position:absolute;inset:0;opacity:1;transform:none}

  
  .layer{opacity:0;transform:none}
  .layer[data-scene="3"]{opacity:1}

  @media (max-width:900px){
    
    .scrolly{grid-template-columns:minmax(0,1fr);row-gap:var(--space-8)}
    .process-phases li,.story-board,.story-visual .phone,.nojs-device{grid-column:1}
    .process-phases li:nth-child(1){grid-row:2}
    .story-board[data-scene="0"]{grid-row:3}
    .process-phases li:nth-child(2){grid-row:4}
    .story-board[data-scene="1"]{grid-row:5}
    .process-phases li:nth-child(3){grid-row:6}
    .story-board[data-scene="2"]{grid-row:7}
    .process-phases li:nth-child(4){grid-row:8}
    .story-visual .phone{grid-row:9}
    .process-phases li:nth-child(5){grid-row:10}
    .nojs-device:nth-of-type(1){grid-row:11}
    .process-phases li:nth-child(6){grid-row:12}
    .nojs-device:nth-of-type(2){grid-row:13}
    .story-board{font-size:14px}
    .plan-board{padding:1.5em}
    .app-artboards{min-height:22em}
  }
}