/* #ablauf: static phases, sticky story, process artefact boards and the Werk app specimen.
   Loaded after general.css, before typography.css, which owns the families for these surfaces.

   Three presentations of the same six phases:
   - `.process-static` — the baseline. Shown under reduced motion and whenever the sticky story
     cannot fit the actual rendered layout.
   - `.sticky` story — the enhancement, only while `.scrolly.story-ready` is set by the controller.
   - the no-JS reading layout — `@media (scripting:none)` at the end of this file. Same markup as
     the other two, relaid out as six stacked phases with their artefact alongside.

   The specimen inside the device is an illustration, so its type and radii stay in container
   units. Every ratio below is a Moralo token divided by the 15-unit product body size:
   heading-2 1.87em, heading-3 1.47em, title 1.2em, body-small .93em, label .87em,
   caption .8em, micro .73em (floor: no specimen text below .73em);
   radius md .93em, lg 1.33em, xl 1.87em; space-4 1.07em, space-3 .8em, space-2 .53em. */

/* ---------- Static six phases (baseline) ---------- */
.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}
/* A grid item's automatic minimum size is its min-content width, so a long heading word under
   enlarged text pushes the track past the viewport even with `minmax(0,1fr)` tracks. Releasing
   that floor lets the card reflow; `break-word` then breaks only a word that still cannot fit,
   without `anywhere`, which would split ordinary words at arbitrary letters. */
.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)}}

/* Shared eyebrow for both presentations. SignalDot: decorative marker, never the only state carrier.
   Scoped per owner so neither loses to the sibling `.stage-copy p` / `.process-phases p` rules. */
.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)}

/* ---------- Sticky story shell ---------- */
.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))}

/* Six decorative progress segments. */
.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 substeps: real toggle buttons, selected state carries a non-colour marker. */
.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: process artefacts, then a real device ---------- */
/* `container-type:size` (not merely inline-size) so `.story-board` can scale its specimen type
   against the stage's OWN block size via cqb. The height below is capped at 690px, so a
   viewport-relative type scale keeps growing after the box has stopped — that mismatch is what
   pushed the artboards past the footer divider above ~862px of viewport height.
   The height is definite in every branch, so size containment is safe here. */
.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}

/* Two extra devices for the no-JS reading layout: phases 05 and 06 own scenes 7 and 8
   in the story's own mapping (scenePhases=[0,1,2,3,3,3,3,4,5]), but a single `#phone` cannot be
   in three rows at once. These carry `.nojs-scene`, never `.layer`, so the story controller —
   which selects `.story-board, .layer` — cannot see or toggle them. Hidden whenever JS runs. */
.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);
  /* 2.375cqb reproduces the previous 1.9svh exactly while the stage is 80svh tall
     (cqb = 0.8svh), and then stops growing once the 690px cap takes over. */
  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}

/* Scene 0 — the plan: a Standard work surface.
   The gap is the board's flexible dimension. Scaling it with the stage's block size
   (cqb) means the longer English heading — which wraps to 112px against the German 75px at
   640px wide — is absorbed by the spacing between rows instead of pushing the last row past
   the board's bottom padding. Capped at the original 1.5em so wide/tall stages are unchanged,
   and floored so the rows never actually touch. */
.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}
/* The row padding scales with the stage's block size so the rows fit the board
   instead of overrunning its bottom padding when the longer English strings make them
   taller. Deliberately NO `min-height:0` here: letting the rows shrink below their content
   only relocates the overflow inside each row (measured 9.6px at 640x900 in English), which
   is not a fix. The rows keep their intrinsic height; only the spacing between them yields. */
.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)}

/* Scenes 1–2 — wireframes and UI design: the boards themselves stay transparent. */
.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}
/* `min-height:0` alone is not enough — the artboard is itself a flex column whose
   own children must be allowed to compress, and its bottom padding scales with the stage's
   block size so the device-chrome affordance never exceeds the space actually available.
   No overflow clipping and no type-scale reduction: the box must genuinely fit. */
.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)}

/* Phase 02 must still read as unfinished: grayscale only, no violet anywhere. */
.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)}

/* Phase 03 — the finished look, in the Werk specimen palette. */
.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)}

/* ---------- Device (hardware illustration: fixed graphite in both modes) ---------- */
.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}

/* ---------- Werk app specimen (scenes 3–8) ---------- */
.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}

/* Frozen control. The Phase 03 copy promises floating glass controls, so this is the one
   frozen moment inside the specimen; opaque and contrast-safe wherever blur is unavailable. */
.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}
}

/* Floating action: an illustration, so no hover or focus affordance. */
.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)}
/* SignalDot only on the incoming job, where it marks a live arrival. */
.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)}
/* Fit indicator, not a success result: brand SignalDot with a static halo, never pulsing. */
.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)}

/* Route map. Geometry contract: the SVG viewBox, path data and marker transform are fixed. */
.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)}

/* Scene 5 — documentation. The signature is a drawing, not interface type. */
.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)}

/* Scene 6 — completion and invoice. Semantic green only for the real success states. */
.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}

/* Scene 7 — release. The app icon is Werk's own mark, never Moralo's brand gradient. */
.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 artwork is literally marketing art: the one Frozen Reflection inside the phone. */
.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)}

/* Scene 8 — usage. A positive metric is not a success state; only the green tests are. */
.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}

/* ---------- Responsive ---------- */
/* Compact story at the approved boundary; the JS `compact` query uses the same 1023.98px. */
@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}
  /* Same substitution as the expanded rule: the compact stage is at most 50svh, so
     3.3cqb equals the previous 1.65svh at the cap and tracks the real box below it. */
  .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){
  /* Two rows of two keeps every substep control at a real touch size. */
  .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)}
}
/* Landscape phones: side by side, but the substep labels keep their real size.
   The stage is only ~420px tall here, so the boards trade padding and gaps, never type size. */
@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){
  /* The story is not offered under reduced motion (the controller keeps `.process-static`),
     but keep the instant-swap behaviour correct if a scene is ever rendered. */
  .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}
}

/* Without JavaScript the six phases stay a list. */