/* The original five-tile expansion, now illustrated with one ERP order. */
.erp-original{--night:#140c22;--gutter:clamp(24px,5.5vw,100px);--erp-header:91px}
.erp-original .scene{position:relative;background:var(--night);color:#f2f0f0;--progress:1;--caption:1;--intro:0;--system:1;--links:1;--fix-1:1;--fix-2:1;--fix-3:1;--fix-4:1;--fix-5:1}
.erp-original .scene.animated{height:290svh}
.erp-original .stage{height:calc(100svh - var(--erp-header));position:relative;overflow:hidden;isolation:isolate}
.erp-original .animated .stage{position:sticky;top:var(--erp-header)}
.erp-original .scene-top,.erp-original .scene-bottom{position:absolute;z-index:5;left:var(--gutter);right:var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:11px;line-height:1.5}
.erp-original .scene-top{top:32px;color:#c6bbd5;opacity:var(--intro)}
.erp-original .scene-bottom{bottom:28px;color:#dfd5ea}
.erp-original .scene-bottom>span:last-child{display:flex;align-items:center;gap:16px}
.erp-original .scene-bottom b{font-size:20px}
.erp-original .progress{height:1px;width:clamp(40px,16vw,240px);background:#ffffff30}
.erp-original .progress i{display:block;height:100%;background:#f2490c;transform:scaleX(var(--progress));transform-origin:left}
.erp-original .gallery{position:absolute;inset:0}
.erp-original .tile{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);overflow:hidden;border-radius:8px;border:1px solid #b58de533;background:radial-gradient(ellipse at 80% 0%,#392151,transparent 80%),#1c1429;container-type:inline-size}
.erp-original .side{display:none}
.erp-original .animated .side{display:block}
.erp-original .center{width:100%;height:100%;z-index:2;background:radial-gradient(ellipse at 55% 40%,#29163b,transparent 70%),#140c22}
.erp-original .tile-label{position:absolute;z-index:2;left:18px;right:14px;bottom:24px;overflow-wrap:anywhere;hyphens:auto}
.erp-original .tile-label>span{display:block;color:#c3a3e6;font-size:9px;line-height:1.4;margin-bottom:10px}
.erp-original .tile-label strong{display:block;font-size:clamp(12px,7.2cqi,22px);line-height:1.2;letter-spacing:-.02em}
.erp-original .tile-label small{display:block;font-size:11px;line-height:1.6;color:#baabc9;margin-top:12px}
.erp-original .detail-data .tile-label small,.erp-original .detail-people .tile-label small{display:none}
.erp-original .center-label{opacity:var(--intro);left:28px;right:28px;bottom:28px}
.erp-original .center-label strong{font-size:clamp(17px,6cqi,28px)}
.erp-original .center-shade{position:absolute;inset:0;pointer-events:none}
.erp-original .scene-caption{position:absolute;z-index:4;left:var(--gutter);right:66%;bottom:17%;opacity:var(--caption);transform:translateY(calc((1 - var(--caption))*55px));pointer-events:none}
.erp-original .scene-caption h3{font-size:clamp(26px,2.7vw,40px);line-height:1.25;margin:0;overflow-wrap:anywhere}
.erp-original .scene-caption h3 em{font-style:normal;color:#c9a3fa}
.erp-original .scene-caption .eyebrow{color:#ba9dd6;font-size:10px;margin-bottom:20px}
.erp-original .caption-copy{font-size:13px;line-height:1.8;margin-top:24px;color:#c9bcd6}
/* Small, deliberately schematic interfaces: one order, five different obstacles. */
.erp-original .problem-visual{position:absolute;top:26px;left:18px;right:18px;font-size:clamp(8px,4cqi,13px);color:#d5b9f3}
.erp-original .mini-order{display:block;font-size:.72em;letter-spacing:.06em;color:#a98fbe;margin-bottom:14px;white-space:nowrap}
.erp-original .mini-sheet{border:1px solid #ac80dc66;background:#2d1c40;border-radius:3px;margin-top:7px;padding:5px;transform:rotate(-3deg)}
.erp-original .mini-sheet:nth-child(3){transform:translateX(5px) rotate(2deg)}
.erp-original .mini-sheet:nth-child(4){transform:translateX(-2px) rotate(-1deg)}
.erp-original .mini-sheet>span{display:block;font-size:.65em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#ad8ed0}
.erp-original .mini-sheet>div{display:flex;justify-content:space-between;gap:6px;border-top:1px solid #b18bc52a;margin-top:4px;padding-top:3px}
.erp-original .mini-sheet i{font-style:normal}
.erp-original .mini-sheet b{font-size:1.3em;color:#e2c9fc}
.erp-original .mini-system{border:1px solid #ac80dc66;border-radius:4px;padding:10px;background:#281936;display:flex;justify-content:space-between;align-items:center;gap:8px}
.erp-original .mini-system b{font-size:.8em;color:#ac8ac9}
.erp-original .manual-step{display:block;margin:6px 0 6px 16px;padding-left:10px;border-left:1px dashed #b88bf2;font-size:.7em;line-height:1.7}
.erp-original .system-wall{margin-top:20px;border-bottom:3px double #b080df;padding:10px 0;position:relative;font-size:.8em}
.erp-original .system-wall i{position:absolute;bottom:-10px;right:12px;width:18px;height:18px;background:#a573d2;clip-path:polygon(40% 0,60% 0,60% 40%,100% 40%,100% 60%,60% 60%,60% 100%,40% 100%,40% 60%,0 60%,0 40%,40% 40%);rotate:45deg}
.erp-original .workaround{margin:16px 0 0 12px;padding-left:12px;border-left:1px dashed #b78ddd}
.erp-original .workaround>span{font-size:.7em;color:#9e7ebd}
.erp-original .workaround>div{margin-top:8px;border:1px dashed #b78ddd;padding:12px 8px;border-radius:3px}
.erp-original .decision-question{width:48px;height:48px;border:1px solid #a375d0;border-radius:50%;display:grid;place-items:center;font-size:30px;margin:4px auto 15px;color:#d8b8fb}
.erp-original .missing-info{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.75em;margin-top:10px}
.erp-original .missing-info i{width:25%;height:5px;border-radius:2px;background:#b987ed33}
.erp-original .missing-info:nth-last-child(2) i{width:40%;background:#b987ed77}
.erp-original .mini-it{left:28px;right:28px;top:36px;opacity:var(--intro);transform:translateY(calc((1 - var(--intro))*-30px))}
.erp-original .ticket-stack{display:grid;gap:12px;margin-top:24px}
.erp-original .ticket-stack>div{display:flex;justify-content:space-between;gap:10px;padding:16px;border:1px solid #b388df77;background:#352046;border-radius:4px;box-shadow:0 6px 0 -2px #25152f,0 7px 0 -2px #a476c744}
.erp-original .ticket-stack span{font-size:.8em;color:#b28aca}
.erp-original .blocked-roadmap{margin-top:30px;padding:18px 0;border-top:1px solid #a67bd333;font-size:.85em}
.erp-original .blocked-roadmap>div{margin:12px 0;height:4px;background:#a67bd333}
.erp-original .blocked-roadmap i{display:block;width:12%;height:100%;background:#ad80d1}
.erp-original .blocked-roadmap small{color:#967baa;font-size:.8em}
/* The expanded tile becomes the connected order, with independently resolved states. */
.erp-original .world{position:absolute;aspect-ratio:1000/720;isolation:isolate;container-type:inline-size;opacity:var(--system);background:radial-gradient(ellipse at 50% 48%,#512b642b,transparent 68%)}
.erp-original .order-board-heading{position:absolute;left:4%;right:4%;top:0;display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:1px solid #c7a0ff26;padding-bottom:2.5%;font-size:clamp(9px,1.65cqi,15px)}
.erp-original .order-board-heading>div>span{display:block;color:#a990bb;font-size:.65em;letter-spacing:.06em;margin-bottom:5px}
.erp-original .order-board-heading strong{font-size:1.15em}
.erp-original .order-board-status{color:#ff9169;border:1px solid #f2490c66;border-radius:24px;padding:6px 10px;font-size:.7em;opacity:var(--fix-4)}
.erp-original .connections{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.erp-original .order-wire-base{stroke:#9874bd;stroke-width:1.5;stroke-dasharray:5 8;opacity:.5}
.erp-original .order-wire-fill{stroke:#f2490c;stroke-width:2.5;filter:drop-shadow(0 0 4px #f2490c55)}
.erp-original .order-wire-fill path{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--done,1))}
.erp-original [data-order-wire="1"]{--done:var(--fix-1)}
.erp-original [data-order-wire="2"]{--done:var(--fix-2)}
.erp-original [data-order-wire="3"]{--done:var(--fix-3)}
.erp-original [data-order-wire="4"]{--done:var(--fix-4)}
.erp-original [data-order-wire="5"]{--done:var(--fix-5)}
.erp-original .order-hub{position:absolute;left:43%;top:35%;width:14%;aspect-ratio:1;display:grid;place-items:center;background:#321066;border:1px solid #ac82d1;border-radius:50%;box-shadow:0 0 45px #7f27ff25;opacity:var(--links)}
.erp-original .order-hub img{width:54%;filter:brightness(0) invert(1)}
.erp-original .order-hub>span{position:absolute;top:calc(100% + 12px);font-size:clamp(6px,1cqi,9px);letter-spacing:.1em;color:#b792d5}
.erp-original .order-node{position:absolute;width:27%;min-height:23%;padding:2%;border:1px solid color-mix(in srgb,#f2490c calc(var(--done)*100%),#8d63af);border-radius:6px;background:#20142d;font-size:clamp(8px,1.7cqi,15px);line-height:1.4}
.erp-original .order-node-label{display:block;color:#b494ce;font-size:.6em;letter-spacing:.03em;margin-bottom:8px}
.erp-original .order-node>strong,.erp-original .order-value strong{font-size:1.3em;color:#f2edf8}
.erp-original .order-node-meta{display:block;color:#baa4c9;font-size:.8em;margin-top:2px}
.erp-original .order-shop{left:0;top:17%}
.erp-original .order-erp{right:0;top:17%}
.erp-original .order-extension{left:0;top:53%}
.erp-original .order-delivery{right:0;top:53%}
.erp-original .order-operations{left:33%;top:81%;width:34%;min-height:0;padding:1.5% 2%}
.erp-original .order-state,.erp-original .order-value,.erp-original .extension-slot{display:grid;grid-template-columns:minmax(0,1fr)}
.erp-original .order-state{font-size:.75em;margin-top:10px;line-height:1.5}
.erp-original .order-before,.erp-original .order-after{grid-area:1/1;min-width:0}
.erp-original .order-before{opacity:calc(1 - var(--done));color:#c1a0d6}
.erp-original .order-after{opacity:var(--done);transform:translateY(calc((1 - var(--done))*8px));color:#ff956f}
.erp-original .extension-slot{border:1px dashed #ae83ce66;padding:7px;margin-top:8px;font-size:.65em;background:#31203e}
.erp-original .extension-slot .order-after{background:#321c27;transform:translateX(calc((1 - var(--done))*-18px))}
.erp-original .capacity-track{height:3px;background:#ac80d233;margin-top:10px}
.erp-original .capacity-track i{display:block;height:100%;background:#f2490c;transform:scaleX(calc(.12 + var(--fix-5)*.88));transform-origin:left}
.erp-original .capacity-caption{display:block;margin-top:5px;font-size:.6em;color:#c2a7d4;opacity:var(--fix-5)}
.erp-original .scene:not(.animated) .stage{height:auto;min-height:0;padding:56px 24px;display:flex;flex-direction:column;gap:40px}
.erp-original .scene:not(.animated) .gallery{position:relative;order:1;width:100%;max-width:900px;margin:auto}
.erp-original .scene:not(.animated) .center{position:relative;inset:auto;transform:none;aspect-ratio:1000/790;border:0}
.erp-original .scene:not(.animated) .world{width:100%;left:0;top:0}
.erp-original .scene:not(.animated) .scene-caption{position:relative;inset:auto;order:2;transform:none;width:100%;max-width:900px;margin:auto}
.erp-original .scene:not(.animated) .scene-top,.erp-original .scene:not(.animated) .scene-bottom{display:none}
.erp-problems{padding:0;background:#f2f0f0}
/* Figma 1545:21085: dark band with an outlined 5, running straight into the scene. */
.erp-intro{position:relative;overflow:hidden;isolation:isolate;background:#140c22;padding:109px 0 168px;text-align:center;color:#f2f0f0;-webkit-font-smoothing:antialiased}
.erp-intro .outline-number{left:50%;top:-38px;width:1000px;max-width:none;transform:translateX(-50%);text-align:center;line-height:1.32;-webkit-text-stroke:2px transparent;-webkit-text-fill-color:#140c22;background:linear-gradient(90deg,#f2490c,#7f27ff);-webkit-background-clip:text;background-clip:text;opacity:.5}
.erp-intro .container{position:relative;z-index:1}
.erp-intro .container>p:first-child{font:700 20px/1.2 var(--body);margin:0 auto 24px;max-width:1000px}
.erp-intro h2{font-size:34px;line-height:1.3;margin:0 auto 24px;max-width:1000px}
.erp-intro .container>p:last-child{font-family:var(--display);font-variation-settings:'wdth' 200,'wght' 400;font-size:18px;line-height:24px;max-width:800px;margin:0 auto}
/* Five directly comparable changes, with one shared action below. */
.erp-details{padding-block:80px;--change-number:32px;--change-line:72px;--change-gap:28px}
.erp-details-intro h2{font-size:34px;line-height:1.35;margin:0 0 48px;max-width:840px}
.erp-change-columns,.erp-change{display:grid;grid-template-columns:var(--change-number) minmax(0,1fr) var(--change-line) minmax(0,1.25fr);column-gap:var(--change-gap)}
.erp-change-columns{padding-bottom:18px;color:#8a719c;font-size:12px}
.erp-change-columns>span:first-child{grid-column:2}
.erp-change-columns>span:last-child{grid-column:4;color:#7f27ff}
.erp-change-list{padding:0;margin:0;list-style:none}
.erp-change{align-items:center;padding-block:34px;border-top:1px solid #32106620}
.erp-change-number{align-self:start;padding-top:4px;color:#a493b2;font-size:12px}
.erp-change-before,.erp-change-after{min-width:0}
.erp-change-before h3{font-size:20px;line-height:1.4;color:#897198;margin:0;overflow-wrap:anywhere;hyphens:manual}
.erp-change-after h4{font-size:22px;line-height:1.4;color:#321066;margin:0 0 12px;overflow-wrap:anywhere;hyphens:manual}
.erp-change-after p{font-size:14px;line-height:1.7;color:#6e626f;margin:0}
.erp-change-chevron{display:block;justify-self:center;width:24px;height:28px;background:#cdbbdc;mask:url('/assets/media/start/chevron-klein.svg') center/contain no-repeat;overflow:hidden}
.erp-change-chevron i{display:block;width:100%;height:100%;background:#f2490c;clip-path:inset(0 calc((1 - var(--change-fill,1))*100%) 0 0)}
.erp-change-mobile-label{display:none}
.erp-change-action{padding-top:32px;border-top:1px solid #32106620;margin-top:4px}
/* Scroll choreography: problem, connection, result. The layout itself stays put. */
.is-changes-animated .erp-details-intro h2{
 opacity:var(--changes-intro,0);
 transform:translateY(calc((1 - var(--changes-intro,0))*32px));
}
.is-changes-animated .erp-change-columns{
 opacity:var(--changes-intro,0);
 transform:translateY(calc((1 - var(--changes-intro,0))*18px));
}
.is-changes-animated .erp-change-number{
 opacity:var(--change-before,0);
 transform:translateY(calc((1 - var(--change-before,0))*16px));
}
.is-changes-animated .erp-change-before{
 opacity:var(--change-before,0);
 transform:translateX(calc((var(--change-before,0) - 1)*32px));
}
.is-changes-animated .erp-change-chevron{opacity:var(--change-before,0)}
.is-changes-animated .erp-change-after{
 opacity:var(--change-after,0);
 transform:translateX(calc((var(--change-after,0) - 1)*32px));
}
.is-changes-animated .erp-change-action .button{
 opacity:var(--changes-action,0);
 transform:translateY(calc((1 - var(--changes-action,0))*24px));
}
.is-changes-animated .erp-change-action:focus-within .button{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
 .is-changes-animated :is(.erp-details-intro h2,.erp-change-columns,.erp-change-number,.erp-change-before,.erp-change-chevron,.erp-change-after,.erp-change-action .button){opacity:1;transform:none}
 .is-changes-animated .erp-change-chevron i{clip-path:none}
}
@media(min-width:701px) and (max-width:1100px){
 .erp-details{--change-number:24px;--change-line:40px;--change-gap:20px}
 .erp-change-before h3{font-size:18px}
 .erp-change-after h4{font-size:20px}
}
@media(max-width:700px){
 .erp-details{--change-gap:14px}
 .erp-change-columns{display:none}
 .erp-change{grid-template-columns:24px minmax(0,1fr);row-gap:20px;padding-block:28px}
 .erp-change-number{grid-column:1;grid-row:1;padding-top:1px}
 .erp-change-before{grid-column:2;grid-row:1}
 .erp-change-chevron{grid-column:2;grid-row:2;justify-self:start;width:20px;height:24px}
 .erp-change-after{grid-column:2;grid-row:3}
 .erp-change-mobile-label{display:block;font-size:11px;line-height:1.5;margin-bottom:10px;color:#9b82ad}
 .erp-change-after .erp-change-mobile-label{color:#7f27ff}
 .erp-change-before h3{font-size:18px}
 .erp-change-after h4{font-size:20px}
 .erp-change-after p{font-size:14px}
 .erp-change-action{padding-top:28px}
}
@media(max-width:1000px) and (min-width:701px){
 .erp-original .scene-caption{right:58%;bottom:11%}
 .erp-original .scene-caption h3{font-size:26px}
 .erp-original .caption-copy{font-size:11px}
 .erp-original .problem-visual{left:12px;right:12px;top:20px}
 .erp-original .tile-label{left:12px;right:10px;bottom:18px}
 .erp-original .tile-label small{font-size:9px}
 .erp-original .mini-order{white-space:normal}
 .erp-original .mini-system{padding:8px}
}
@media(max-width:899px){
 .erp-original{--erp-header:88px}
 .erp-intro{padding:72px 0 96px}
 .erp-intro .outline-number{top:40px;font-size:320px}
 .erp-intro .container>p:first-child{font-size:18px;margin-bottom:20px}
 .erp-intro h2{font-size:28px;margin-bottom:20px}
 .erp-intro .container>p:last-child{font-size:16px;line-height:22px}
 .erp-details{padding-block:56px}
 .erp-details-intro h2{font-size:28px;margin-bottom:32px}
}
@media(max-width:700px){
 .erp-original .scene.animated{height:250svh}
 .erp-original .scene-top,.erp-original .scene-bottom{font-size:9px;gap:8px}
 .erp-original .scene-top{top:25px}
 .erp-original .scene-top span:last-child{max-width:135px;text-align:right}
 .erp-original .scene-bottom{bottom:24px}
 .erp-original .scene-bottom>span:last-child{gap:6px}
 .erp-original .progress{width:40px}
 .erp-original .tile-label{left:10px;right:8px;bottom:14px}
 .erp-original .tile-label>span{font-size:7px;margin-bottom:7px}
 .erp-original .tile-label small{display:none}
 .erp-original .tile-label strong{font-size:12px}
 .erp-original .problem-visual{left:8px;right:8px;top:10px;font-size:8px}
 .erp-original .mini-order{font-size:6px;margin-bottom:6px;white-space:normal}
 .erp-original .mini-sheet{padding:1px 3px;margin-top:4px}
 .erp-original .mini-data{top:8px}
 .erp-original .mini-data .mini-order{margin-bottom:2px}
 .erp-original .mini-data .mini-sheet{margin-top:2px}
 .erp-original .mini-sheet>span{display:none}
 .erp-original .mini-sheet>div{border:0;padding:0;margin:0}
 .erp-original .mini-sheet b{font-size:11px}
 .erp-original .mini-system{padding:2px 4px;font-size:8px;display:block}
 .erp-original .mini-system b{display:none}
 .erp-original .mini-transfer .mini-system:nth-of-type(2),.erp-original .mini-transfer .manual-step:nth-of-type(2){display:none}
 .erp-original .manual-step{margin:3px 0 3px 6px;line-height:1.2;padding-left:5px;font-size:6px}
 .erp-original .system-wall{margin-top:5px;padding:0;height:8px;font-size:7px}
 .erp-original .system-wall span{display:none}
 .erp-original .system-wall i{width:10px;height:10px;bottom:-6px;right:3px}
 .erp-original .workaround{margin:7px 0 0 3px;padding-left:4px}
 .erp-original .workaround>div{margin-top:3px;padding:2px;font-size:7px;overflow-wrap:anywhere}
 .erp-original .workaround>span{display:none}
 .erp-original .decision-question{width:28px;height:28px;font-size:20px;margin:4px auto 8px}
 .erp-original .missing-info{display:none}
 .erp-original .mini-it{left:12px;right:12px;top:24px}
 .erp-original .ticket-stack{gap:10px;margin-top:16px}
 .erp-original .ticket-stack>div{padding:12px 8px;font-size:9px;display:block}
 .erp-original .ticket-stack span{display:block;font-size:7px;margin-top:4px}
 .erp-original .blocked-roadmap{margin-top:12px;padding-top:8px;font-size:8px}
 .erp-original .blocked-roadmap>div{margin-block:8px}
 .erp-original .blocked-roadmap small{display:none}
 .erp-original .center-label{left:12px;right:12px;bottom:22px}
 .erp-original .center-label strong{font-size:15px}
 .erp-original .scene-caption{left:24px;right:24px;bottom:14%}
 .erp-original .scene-caption h3{font-size:clamp(24px,6.3vw,34px)}
 .erp-original .caption-copy{font-size:12px;margin-top:20px;line-height:1.75}
 .erp-original .caption-copy br{display:none}
 .erp-original .scene-caption .eyebrow{font-size:9px;margin-bottom:16px}
 .erp-original .order-node{padding:2%;min-height:24%}
 .erp-original .order-node-label{font-size:7px;letter-spacing:0;margin-bottom:5px}
 .erp-original .order-node>strong,.erp-original .order-value strong{font-size:11px}
 .erp-original .order-state{font-size:7px;margin-top:5px}
 .erp-original .order-node-meta{font-size:7px}
 .erp-original .extension-slot{font-size:6px;padding:3px;margin-top:4px}
 .erp-original .order-operations{min-height:0}
 .erp-original .order-operations .order-state{font-size:6px}
 .erp-original .order-board-heading{font-size:10px}
 .erp-original .order-board-heading>div>span{font-size:6px}
 .erp-original .order-board-status{font-size:7px;padding:4px 6px}
 .erp-original .order-hub>span{top:calc(100% + 7px)}
}