.how-stages{max-width:1360px;margin:0 auto;padding:104px 24px 112px}.how-stages__intro{max-width:670px}.how-stages__intro h2{letter-spacing:-.05em;margin-top:18px;font-size:clamp(2.4rem,4.7vw,4.4rem);font-weight:800;line-height:1.02}.how-stages__intro>p:last-child{color:var(--ink-soft);margin-top:20px;font-size:1.08rem;line-height:1.6}.how-stages__story{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);align-items:start;gap:clamp(34px,5vw,90px);margin-top:42px;display:grid}.how-stages__steps{margin:0;padding:0;list-style:none}.how-stages__steps li{min-height:min(78svh,700px);color:var(--ink);opacity:.5;border-left:2px solid #14291f2e;align-items:center;padding:34px 0 34px clamp(24px,3vw,46px);transition:border-color .35s,opacity .35s;display:flex}.how-stages__steps li.is-active{border-left:4px solid var(--ink);opacity:1}.how-stages__step-copy{max-width:440px}.how-stages__step-number{border:1px solid var(--ink);background:var(--yellow,#ffce4f);font:600 .78rem var(--f-mono);letter-spacing:.08em;border-radius:5px;padding:6px 9px 5px;display:inline-flex}.how-stages__steps h3{letter-spacing:-.055em;margin-top:24px;font-size:clamp(2.7rem,4.6vw,5.2rem);font-weight:800;line-height:1}.how-stages__steps p{max-width:32ch;color:var(--ink-soft);margin-top:18px;font-size:clamp(1.12rem,1.7vw,1.42rem);line-height:1.5}.how-stages__visual{border:2px solid var(--ink);background:var(--ink);color:var(--paper);border-radius:16px;align-self:start;position:sticky;top:96px;overflow:hidden;box-shadow:0 10px #14291f21,0 22px 45px #14291f24}.how-stages__visual-top{font:500 .76rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;justify-content:space-between;gap:16px;padding:17px 21px;display:flex}.how-stages__visual-top span:last-child{color:#ffce4f}.how-stages__scene{aspect-ratio:4/3;background:#356029;width:100%;max-height:calc(100svh - 300px);position:relative;overflow:hidden}.how-stages__scene canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.how-stages__thread{background:var(--ink);border-top:1px solid #f6efdd2e;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:13px 8px 15px;list-style:none;display:grid;position:relative}.how-stages__thread:before,.how-stages__thread:after{content:"";height:2px;position:absolute;top:18px;left:12.5%}.how-stages__thread:before{background:#647468;width:75%}.how-stages__thread:after{background:#ffce4f;width:0;transition:width .35s}.how-stages__thread[data-progress="1"]:after{width:25%}.how-stages__thread[data-progress="2"]:after{width:50%}.how-stages__thread[data-progress="3"]:after{width:75%}.how-stages__thread li{z-index:1;color:#9eaa9e;font:500 .7rem var(--f-mono);text-align:center;text-transform:uppercase;letter-spacing:.04em;flex-direction:column;align-items:center;gap:7px;display:flex;position:relative}.how-stages__thread li:before{background:var(--ink);content:"";border:2px solid #9eaa9e;border-radius:50%;width:11px;height:11px}.how-stages__thread li.is-reached{color:var(--paper)}.how-stages__thread li.is-reached:before{background:#ffce4f;border-color:#ffce4f}.how-stages__thread li.is-current{color:#ffce4f}.how-stages__thread li.is-current:before{border-color:#ffce4f;box-shadow:0 0 0 3px #ffce4f38}.how-stages__next{margin-top:56px;line-height:1.6}.how-stages__next a{text-underline-offset:4px;margin-left:5px;font-weight:700;text-decoration:underline}@media (max-width:850px){.how-stages{padding-block:76px 88px}.how-stages__story{flex-direction:column;gap:0;display:flex}.how-stages__visual{width:100%;box-shadow:0 -72px 0 var(--lino), 0 10px 0 #14291f21;order:-1;top:72px}.how-stages__steps{width:100%}.how-stages__steps li{align-items:flex-end;min-height:78svh;padding-block:24px}}@media (max-width:520px){.how-stages__story{margin-top:28px}.how-stages__visual{border-radius:10px;top:64px}.how-stages__visual-top{padding:10px 13px;font-size:.64rem}.how-stages__scene{max-height:36svh}.how-stages__thread{padding-block:9px 10px}.how-stages__thread:before,.how-stages__thread:after{top:14px}.how-stages__thread li{gap:5px;font-size:.58rem}.how-stages__steps li{min-height:78svh;padding-left:22px}.how-stages__steps h3{margin-top:16px}.how-stages__steps p{margin-top:12px}}@media (prefers-reduced-motion:reduce){.how-stages__steps li,.how-stages__thread:after{transition:none}}
@font-face{font-family:Plex;src:url(/marketing/retail-system-plex-regular.woff2)format("woff2");font-weight:400;font-display:swap}@font-face{font-family:Plex;src:url(/marketing/retail-system-plex-semibold.woff2)format("woff2");font-weight:600;font-display:swap}@font-face{font-family:Plex;src:url(/marketing/retail-system-plex-bold.woff2)format("woff2");font-weight:700;font-display:swap}@font-face{font-family:Plex Mono;src:url(/marketing/retail-system-plex-mono.woff2)format("woff2");font-weight:400;font-display:swap}.how-page{background:var(--lino);color:var(--ink)}.how-hero{padding:132px max(24px,50vw - 680px) 70px}.how-hero__intro{max-width:960px;margin-bottom:38px}.how-hero__intro h1{letter-spacing:-.055em;max-width:16ch;margin-top:20px;font-size:clamp(2.7rem,6vw,5.7rem);font-weight:800;line-height:.97}.how-hero__intro>p:last-child{max-width:68ch;color:var(--ink-soft);margin-top:22px;font-size:clamp(1rem,1.6vw,1.2rem);line-height:1.6}.how-hero__footnote{color:var(--ink-soft);font:500 .78rem var(--f-mono);text-transform:uppercase;letter-spacing:.06em;flex-wrap:wrap;justify-content:space-between;gap:16px;padding-top:24px;display:flex}.how-hero__footnote a{color:var(--ink);text-underline-offset:4px}.how-explorer{border:2px solid var(--ink);background:var(--paper);border-radius:18px;overflow:hidden;box-shadow:0 12px #14291f26,0 30px 70px #14291f2e}.how-explorer button{cursor:pointer}.how-explorer button:disabled{cursor:wait;opacity:.55}.how-explorer button:focus-visible,.how-explorer input:focus-visible{outline-offset:3px;z-index:10;outline:3px solid #ffce4f;position:relative}.how-explorer__topline{background:var(--ink);color:#e6d9ae;min-height:48px;font:400 .76rem var(--f-mono);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 18px;padding:8px 18px;display:flex}.how-explorer__mobile-instruction{display:none}.how-explorer__top-actions{flex-wrap:wrap;align-items:center;gap:9px;display:flex}.how-explorer__top-actions button{color:#fffdf4;letter-spacing:0;border:1px solid #f6efdd80;border-radius:5px;min-height:32px;padding:5px 10px;font:600 .7rem Plex Mono,monospace}.how-explorer__top-actions button[aria-pressed=true]{color:var(--ink);background:#ffce4f;border-color:#ffce4f}.how-explorer__body{grid-template-columns:minmax(320px,27%) minmax(0,1fr);display:grid}.how-explorer__sidebar{contain:size;border-right:2px solid var(--ink);scrollbar-width:thin;background:#fffdf4;min-width:0;overflow-y:auto}.how-explorer__sidebar-section{border-bottom:1px solid var(--rule);margin:0;padding:16px clamp(16px,1.8vw,24px)}.how-explorer__sidebar-section:last-child{border-bottom:0}.how-explorer__label{color:var(--ink-soft);margin:0 0 8px;font:600 .74rem Plex,sans-serif}.how-mark{flex:none;width:10px;height:10px;display:inline-block}.how-mark--stage{border:1.5px solid #b9b39f;border-radius:2px}.how-mark--stage.how-mark--done{border-color:var(--ink);background:var(--ink)}.how-mark--stage.how-mark--current{border-color:var(--ink);background:#ffce4f}.how-mark--record{border:1.5px solid var(--ink);background:#fffdf4;border-radius:50%}.how-mark--record.how-mark--used{background:#c8a24b;border-color:#9a7a2c}.how-mark--decision{border:1px solid var(--ink);border-radius:1px;width:9px;height:9px;margin:0 2px;transform:rotate(45deg)}.how-mark--person{fill:currentColor;width:12px;height:12px}.how-explorer__id{color:var(--ink-soft);align-items:center;gap:7px;margin:0;font:400 .72rem Plex Mono,monospace;display:flex}.how-explorer__sidebar h2{letter-spacing:-.025em;min-height:2.2em;margin:8px 0 0;font:700 clamp(1.2rem,1.55vw,1.5rem)/1.1 Plex,sans-serif}.how-explorer__handoff{color:var(--ink);align-items:center;gap:6px;margin:10px 0 0;font:600 .8rem Plex,sans-serif;display:flex}.how-explorer__handoff>span{color:var(--ink-soft)}.how-explorer__stages{padding-block:8px;list-style:none}.how-explorer__stages li{position:relative}.how-explorer__stages button{width:100%;height:31px;color:var(--ink);text-align:left;background:0 0;border:0;border-radius:5px;grid-template-columns:10px 58px minmax(0,1fr);align-items:center;gap:9px;padding:0 6px;display:grid}.how-explorer__stages button:hover,.how-explorer__stages button[aria-pressed=true]{background:#e7efdb}.how-explorer__stage-name{font:600 .8rem Plex,sans-serif}.how-explorer__stages button[aria-current=step] .how-explorer__stage-name{font-weight:700}.how-explorer__stage-reading{color:var(--ink-soft);text-overflow:ellipsis;white-space:nowrap;font:400 .76rem Plex,sans-serif;overflow:hidden}.how-explorer__stage-bar{pointer-events:none;background:#14291f1a;height:2px;position:absolute;bottom:2px;left:25px;right:6px;overflow:hidden}.how-explorer__stage-bar b,.how-progress b,.how-explorer__picker-bar b{background:var(--ink);transform-origin:0;height:100%;transition:transform .14s linear;display:block}.how-explorer__stage-bar b{background:#c8a24b}.how-explorer__flow{gap:4px;margin:0;padding:0;list-style:none;display:grid}.how-explorer__flow li{grid-template-columns:13px minmax(0,1fr) 84px;align-items:center;gap:8px;height:24px;font:500 .78rem Plex,sans-serif;animation:.3s both how-flow-in;display:grid}.how-explorer__flow li>span:not(.how-progress){text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.how-progress{grid-template-columns:repeat(6,1fr);gap:2px;display:grid}.how-progress i{background:#14291f1f;border-radius:1px;height:6px;overflow:hidden}@keyframes how-flow-in{0%{opacity:0;transform:translateY(-4px)}}.how-explorer__record-list{flex-wrap:wrap;gap:5px;display:flex}.how-explorer__record-list button{height:26px;color:var(--ink);background:#fffdf4;border:1px solid #a3af9b;border-radius:13px;align-items:center;gap:5px;padding:0 8px 0 6px;font:600 .7rem Plex,sans-serif;display:inline-flex}.how-explorer__record-list .how-mark{width:8px;height:8px}.how-explorer__record-list button:hover,.how-explorer__record-list button[aria-pressed=true]{border-color:var(--ink);background:#e7efdb}.how-explorer__visual{background:var(--paper);flex-direction:column;min-width:0;display:flex}.how-explorer__scene{aspect-ratio:16/9;background:var(--turf) url(/marketing/retail-system-poster.webp) center / cover;cursor:zoom-in;touch-action:pan-y;width:100%;position:relative;overflow:hidden}.how-explorer__scene--zoomed{cursor:grab;touch-action:none}.how-explorer__scene--dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}.how-explorer__world{transform-origin:50%;will-change:transform;position:absolute;inset:0}.how-explorer__scene canvas{width:100%;height:100%;display:block}.how-explorer__loading{color:#fffdf4;text-align:center;background:#14291fab;place-items:center;margin:0;font:600 clamp(1rem,2vw,1.35rem) Plex,sans-serif;display:grid;position:absolute;inset:0}.how-explorer__hotspots{pointer-events:none;position:absolute;inset:0}.how-explorer__hotspot{pointer-events:auto;background:0 0;border:0;border-radius:50%;place-items:center;width:clamp(34px,5vw,76px);height:clamp(34px,4vw,62px);display:grid;position:absolute;transform:translate(-50%,-50%)}.how-explorer .how-explorer__hotspot:focus-visible{position:absolute}.how-explorer__hotspot span{border:2px solid var(--ink);opacity:0;width:15px;height:15px;transition:opacity .15s;box-shadow:0 2px 7px #14291f80}.how-explorer__hotspot--stage span{background:#ffce4f;border-radius:3px}.how-explorer__hotspot--record span{background:#c8a24b;border-radius:50%}.how-explorer__hotspots--shown .how-explorer__hotspot span,.how-explorer__hotspot:hover span,.how-explorer__hotspot:focus-visible span{opacity:1}.how-explorer__hotspot[aria-pressed=true] span{opacity:1;background:#fffdf4}.how-explorer__tooltip{z-index:8;color:#fffdf4;pointer-events:none;background:#14291f;border:1px solid #ffce4f;border-radius:8px;flex-direction:column;gap:5px;width:max-content;max-width:min(240px,100% - 20px);padding:12px 14px;display:flex;position:absolute;transform:translate(-50%,17px);box-shadow:0 8px 22px #0000004d}.how-explorer__tooltip--above{transform:translate(-50%,calc(-100% - 17px))}.how-explorer__tooltip strong{align-items:center;gap:7px;font:700 .9rem Plex,sans-serif;display:flex}.how-explorer__tooltip span{color:#ffce4f;font:600 .76rem/1.35 Plex,sans-serif}.how-explorer__tooltip .how-mark--stage{border-color:#fffdf4}.how-explorer__workflow-picker{border-top:2px solid var(--ink);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.how-explorer__workflow-picker button{border:0;border-right:1px solid var(--rule);text-align:left;height:52px;color:var(--ink);background:var(--paper);align-items:center;gap:9px;padding:0 18px;display:flex;position:relative;overflow:hidden}.how-explorer__workflow-picker button:last-child{border-right:0}.how-explorer__workflow-picker button:hover,.how-explorer__workflow-picker button[aria-pressed=true]{background:#e7efdb}.how-explorer__workflow-picker strong{text-overflow:ellipsis;white-space:nowrap;font:600 .86rem Plex,sans-serif;overflow:hidden}.how-explorer__picker-bar{height:3px;position:absolute;bottom:0;left:0;right:0}@media (max-width:1180px){.how-explorer__body{flex-direction:column;display:flex}.how-explorer__sidebar{contain:none;overflow:visible}.how-explorer__visual{order:-1}.how-explorer__sidebar{border-top:2px solid var(--ink);border-right:0;grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.how-explorer__sidebar-section:first-child{grid-column:1/-1}.how-explorer__sidebar-section:nth-child(2){border-right:1px solid var(--rule)}.how-explorer__sidebar-section:last-child{border-top:1px solid var(--rule);grid-column:1/-1}}@media (max-width:560px){.how-hero{padding-top:116px}.how-explorer{border-radius:10px;margin-inline:-12px}.how-explorer__topline,.how-explorer__scene{display:none}.how-explorer__sidebar{display:block}.how-explorer__sidebar-section{padding:18px;border-right:0!important}.how-explorer__workflow-picker{border-top:0;grid-template-columns:1fr}.how-explorer__workflow-picker button{border-right:0;border-bottom:1px solid var(--rule);height:44px}.how-explorer__workflow-picker button:last-child{border-bottom:0}}@media (prefers-reduced-motion:reduce){.how-explorer__hotspot span,.how-explorer__stage-bar b,.how-progress b,.how-explorer__picker-bar b{transition:none}.how-explorer__flow li{animation:none}}