/* HUGO-1975: illustrated Hugo screens for the walkthrough. They borrow the look
   of the real registration wizard, the till app and the hardware shop, but are
   drawings: no inputs, no data, no orders. Everything is sized in em on a
   22 × 20 em canvas that scales with the column, so one drawing serves the
   pinned stage, the static article and a 320 px phone.
   Also drawn with these atoms: the EET walkthrough (eet-guide.css, HUGO-2086). */
.journey-screen { container-type: inline-size; width: 100%; }
.ui { position: relative; aspect-ratio: 22 / 20; font: 400 4.545cqw/1.3 var(--body); color: #2d2720; }
.ui span, .ui strong, .ui small, .ui b, .ui i { display: block; font-style: normal; }

/* ---------- browser window + wizard chrome ---------- */
.win { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; background: #f8f6f2; border: 1px solid #dedad2; border-radius: .9em; box-shadow: 0 1.3em 2.8em #14110d21, 0 .2em .5em #14110d0d; }
.win-bar { flex: none; height: 1.5em; display: flex; align-items: center; gap: .28em; padding: 0 .65em; background: #fff; border-bottom: 1px solid #ece7de; }
.win-bar i { width: .42em; height: .42em; border-radius: 50%; background: #e4ded1; }
.win-url { margin: 0 auto; translate: -.9em 0; font-size: .46em; color: #8c8275; background: #f3efe6; border-radius: 9em; padding: .3em 2em; }
.win-body { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; padding: .6em .9em .9em; }
.wz-logo { display: flex !important; align-items: center; gap: .28em; font: 650 .82em/1 var(--display); letter-spacing: -.02em; }
.wz-logo img { width: 1.05em; height: 1.05em; }
.wz-chip { margin-top: .5em; font-size: .46em; font-weight: 600; color: #315f54; background: #e6f0ec; border-radius: 9em; padding: .34em 1.1em; }
.wz-dots { display: flex !important; gap: .26em; margin-top: .45em; }
.wz-dots i { width: .3em; height: .3em; border-radius: 9em; background: #d8d2ca; }
.wz-dots i.was { background: #7fae9f; }
.wz-dots i.on { width: 1em; background: #315f54; }
.wz-card { position: relative; flex: 1; min-height: 0; width: 100%; margin-top: .6em; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55em; padding: .8em 1em; text-align: center; overflow: hidden; background: #fff; border: 1px solid #e8e4de; border-radius: .9em; }
.wz-title { font: 650 1.08em/1.15 var(--display); letter-spacing: -.025em; text-wrap: balance; }
.wz-ico { width: 2em; height: 2em; display: grid !important; place-items: center; border-radius: 50%; color: #315f54; background: #e6f0ec; }

/* ---------- form atoms ---------- */
.fld { width: 100%; max-width: 13.5em; text-align: left; padding: .32em .65em .4em; background: #fff; border: 1px solid #d9d3c8; border-radius: .55em; }
.fld small { font-size: .42em; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: #8c8275; }
.fld > span { min-height: 1.3em; font-size: .7em; font-weight: 500; white-space: nowrap; }
.fld > span.is-typing::after { content: ""; display: inline-block; width: 1px; height: 1em; margin-left: 1px; vertical-align: -.15em; background: #2d2720; }
.fld-row { width: 100%; max-width: 15.5em; display: flex !important; align-items: stretch; gap: .4em; }
.fld-sel { max-width: 15.5em; display: flex !important; align-items: center; justify-content: space-between; padding: .5em .65em; color: #2d2720; }
.fld-sel .ic { font-size: .7em; color: #8c8275; }
.btn-y, .btn-g { flex: none; font-size: .66em; font-weight: 700; color: #1b1b1b; background: #ffdf2c; border-radius: 9em; padding: .58em 1.6em; white-space: nowrap; }
.btn-g { display: grid !important; place-items: center; font-size: .5em; font-weight: 600; color: #fff; background: #315f54; border-radius: 1.1em; padding: 0 1.1em; }
.chip-on { font-size: .56em; font-weight: 600; color: #315f54; background: #e6f0ec; border: 1px solid #b9d5cb; border-radius: 9em; padding: .4em 1.1em; }
.sk { width: 3em; height: .55em; border-radius: 9em; background: #ece7de; }
.row-ok, .row-next, .row-wait { width: 100%; max-width: 15em; display: flex !important; align-items: center; gap: .65em; font-size: .64em; font-weight: 500; line-height: 1.25; text-align: left; color: #41685d; }
.row-ok::before, .row-next::before { content: "✓"; flex: none; width: 1.75em; height: 1.75em; display: grid; place-items: center; font-size: .8em; font-weight: 700; color: #fff; background: #315f54; border-radius: 50%; }
.row-next { color: #675d55; }
.row-next::before { content: "→"; color: #315f54; background: #e6f0ec; }
.row-wait { width: auto; padding: .45em 1em .45em .5em; font-weight: 600; color: #7a5200; background: #fff3c9; border-radius: 9em; }
.clk { position: relative; width: 1.5em; height: 1.5em; border: .16em solid #c98a00; border-radius: 50%; }
.clk::before, .clk::after { content: ""; position: absolute; left: 50%; bottom: 50%; width: .14em; height: .42em; margin-left: -.07em; background: #c98a00; border-radius: 1px; transform-origin: bottom; }
.clk::after { height: .3em; rotate: 90deg; }

/* ---------- success ring + confetti ---------- */
.ok-ring { width: 2.5em; height: 2.5em; border-radius: 50%; background: #e6f0ec; }
.ok-ring svg { width: 100%; height: 100%; fill: none; stroke: #315f54; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.ok-ring circle { stroke-dasharray: 145; rotate: -90deg; transform-origin: center; }
.ok-ring path { stroke-dasharray: 40; }
.confetti, .ptr, .found-sk, .vf-beam, .plane, .fly, .paper b { display: none !important; }

/* ---------- cash 2–4: register lookup, venue, menu import ---------- */
.found { position: relative; width: 100%; max-width: 15.5em; padding: .55em .7em; text-align: left; background: #f8f6f2; border-radius: .6em; }
.found-data b { font: 650 .72em var(--display); }
.found-data i { width: 78%; height: .4em; margin-top: .4em; border-radius: 9em; background: #dfd9cc; }
.found-data i + i { width: 46%; }
.amb { position: absolute; inset: 0 0 auto; height: 2.6em; display: grid !important; place-items: center; background: radial-gradient(120% 160% at 15% 0, #fff3a8, transparent 60%), linear-gradient(120deg, #ffdf2c, #f2c800); }
.amb b { font: 700 .86em var(--display); letter-spacing: -.02em; color: #14110d; }
.amb ~ .wz-title { margin-top: 2.2em; }
.seg { position: relative; display: flex !important; padding: .14em; font-size: .52em; font-weight: 600; background: #ece7de; border-radius: .75em; }
.seg > span { position: relative; z-index: 1; display: flex; align-items: center; gap: .4em; padding: .42em 1.1em; }
.seg::before { content: ""; position: absolute; inset: .14em 50% .14em .14em; background: #fff; border-radius: .62em; box-shadow: 0 1px 3px #14110d1f; translate: 100% 0; }
.scan { width: 100%; display: flex !important; align-items: center; justify-content: center; gap: .9em; }
.paper { position: relative; flex: none; width: 3.9em; height: 4.9em; padding: .5em .45em; overflow: hidden; background: #fffdf6; border: 1px solid #e3dccb; border-radius: .3em; box-shadow: 0 .3em .8em #14110d1a; rotate: -4deg; }
.paper i { height: .22em; margin-bottom: .4em; border-radius: 9em; background: #d9d1bf; }
.paper i:first-child { width: 60%; height: .34em; margin-bottom: .55em; background: #14110d; }
.paper i:nth-child(odd) { width: 82%; }
.items { flex: 1; max-width: 9em; display: grid !important; gap: .32em; }
.items > span { display: flex; align-items: center; justify-content: space-between; gap: .5em; padding: .42em .6em; font-size: .56em; font-weight: 600; text-align: left; background: #f8f6f2; border-radius: .7em; }
.items i { flex: none; width: 2.6em; height: .6em; border-radius: 9em; background: #ddd6c8; }

/* ---------- cards 0–2: questionnaire, identity, submission ---------- */
.qbar { width: 100%; max-width: 15.5em; display: grid !important; grid-template-columns: repeat(3, 1fr); gap: .25em; }
.qbar i { height: .22em; border-radius: 9em; background: #e6e0d7; }
.qbar i:first-child { background: #315f54; }
.opt { width: 100%; max-width: 25em; display: flex !important; align-items: center; gap: .6em; padding: .5em .65em; font-size: .62em; font-weight: 600; text-align: left; border: 1px solid #315f54; border-radius: 1.1em; background: #f4f9f7; }
.opt-ic { flex: none; width: 2.1em; height: 2.1em; display: grid !important; place-items: center; color: #315f54; background: #e6f0ec; border-radius: 50%; }
.opt b { flex: none; width: 1.5em; height: 1.5em; margin-left: auto; display: grid; place-items: center; color: #fff; background: #315f54; border-radius: 50%; }
.opt b::before { content: "✓"; font-size: .8em; }
.vf-cap { font-size: .46em; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #8c8275; }
.vf { position: relative; width: 8.6em; height: 5.4em; display: grid !important; place-items: center; border-radius: .6em; background: #14110d; --c: #1ba85b; }
.vf::before { content: ""; position: absolute; inset: .45em; border-radius: .35em; background: linear-gradient(var(--c) 0 0) 0 0 / 1em 2px, linear-gradient(var(--c) 0 0) 0 0 / 2px 1em, linear-gradient(var(--c) 0 0) 100% 0 / 1em 2px, linear-gradient(var(--c) 0 0) 100% 0 / 2px 1em, linear-gradient(var(--c) 0 0) 0 100% / 1em 2px, linear-gradient(var(--c) 0 0) 0 100% / 2px 1em, linear-gradient(var(--c) 0 0) 100% 100% / 1em 2px, linear-gradient(var(--c) 0 0) 100% 100% / 2px 1em; background-repeat: no-repeat; }
.idc { position: relative; width: 6em; height: 3.7em; padding: .55em .5em .5em 2.5em; background: linear-gradient(135deg, #fffdf6, #efe9da); border-radius: .35em; }
.idc i { height: .28em; margin-bottom: .34em; border-radius: 9em; background: #cfc7b5; }
.idc i:first-child { position: absolute; left: .5em; top: .55em; width: 1.5em; height: 1.9em; margin: 0; border-radius: .2em; background: radial-gradient(circle at 50% 38%, #b9b09c 0 26%, transparent 27%), radial-gradient(ellipse at 50% 105%, #b9b09c 0 48%, transparent 49%), #e2dbc9; }
.idc i:nth-child(2) { width: 90%; background: #14110d; }
.idc i:last-child { width: 55%; }
.vf-ok { position: absolute; right: -.5em; bottom: -.5em; width: 1.7em; height: 1.7em; display: grid !important; place-items: center; color: #fff; background: #1ba85b; border: .16em solid #fff; border-radius: 50%; }
.vf-ok::before { content: "✓"; font-size: .8em; font-weight: 700; }
.sig { width: 3.6em; height: 1.2em; margin-left: auto; fill: none; stroke: #14110d; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 120; }

/* ---------- phone + till app ---------- */
.phone { position: absolute; left: 50%; top: .4em; width: 9.6em; height: 19.2em; margin-left: -4.8em; display: flex; flex-direction: column; gap: .5em; padding: 1.35em .55em .6em; overflow: hidden; background: #f7f6f3; border: .32em solid #14110d; border-radius: 1.7em; box-shadow: 0 1.3em 2.8em #14110d38; }
.phone::before { content: ""; position: absolute; top: .3em; left: 50%; width: 2.5em; height: .5em; margin-left: -1.25em; background: #14110d; border-radius: 9em; }
.pos-head { font: 650 .6em var(--display); text-align: center; }
.pos-seg { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: .1em; padding: .1em; background: #e9e6df; border-radius: .4em; }
.pos-seg i { height: .7em; border-radius: .32em; }
.pos-seg i:first-child { background: #fff; }
.pos-grid { flex: 1; display: grid !important; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: .35em; }
.pos-grid b { display: flex; align-items: flex-end; padding: .5em; font: 700 .62em/1.1 var(--display); letter-spacing: -.02em; text-align: left; background: #fff; border-radius: .8em; }
.pos-bar { display: flex !important; gap: .3em; }
.pos-bar i { width: 2.4em; background: #e4e0d8; border-radius: 9em; }
.pos-bar b { flex: 1; padding: .7em 0; font-size: .58em; font-weight: 700; text-align: center; background: #ffdf2c; border-radius: 9em; }

/* cash 5: the wizard celebrates, the till app arrives next to it */
[data-s="cash5"] .win { inset: 0 5.2em 1.2em 0; }
[data-s="cash5"] .phone { left: auto; right: .2em; top: auto; bottom: 0; margin: 0; font-size: .74em; rotate: 5deg; }
[data-s="cash5"] .wz-card { align-items: flex-start; padding-right: 3.2em; text-align: left; }

/* cards 3: tap to pay */
[data-s="cards3"] .phone { left: 1.1em; margin: 0; }
.pay-amt { margin-top: 1.4em; display: grid !important; justify-items: center; gap: .4em; }
.pay-amt i { width: 4.6em; height: 1em; border-radius: 9em; background: #14110d; }
.pay-amt i + i { width: 3em; height: .4em; background: #d6d0c3; }
.nfc { position: relative; flex: 1; display: grid !important; place-items: center; font-size: 2.6em; color: #14110d; }
.nfc b { position: absolute; left: 50%; top: 50%; width: 1.6em; height: 1.6em; margin: -.8em; border: 2px solid #ffdf2c; border-radius: 50%; opacity: 0; }
.pay-ok { position: absolute; inset: 0; display: grid !important; place-items: center; background: #1ba85b; }
.pay-ok::before { content: "✓"; width: 2.2em; height: 2.2em; display: grid; place-items: center; font-size: 1.6em; font-weight: 700; color: #1ba85b; background: #fff; border-radius: 50%; }
.bank { position: absolute; left: 7.2em; top: 9.4em; width: 7em; height: 4.4em; padding: .6em; background: linear-gradient(135deg, #2a2620, #14110d); border-radius: .5em; box-shadow: 0 .8em 1.8em #14110d47; rotate: -12deg; }
.bank i { width: 1.1em; height: .8em; border-radius: .16em; background: #ffdf2c; }
.bank b { height: .26em; width: 62%; margin-top: 1.25em; border-radius: 9em; background: #ffffff3d; }
.bank b + b { width: 36%; margin-top: .3em; }
.side { position: absolute; left: 11.8em; right: 0; top: 1.4em; display: grid; justify-items: start; gap: .6em; text-align: left; }
.side .wz-title { font-size: .98em; }

/* ---------- hardware shop ---------- */
.shop-top { width: 100%; display: flex !important; align-items: center; gap: .5em; }
.shop-top .wz-chip { margin: 0; }
.cart { position: relative; margin-left: auto; width: 1.7em; height: 1.7em; display: grid !important; place-items: center; font-size: .9em; background: #fff; border: 1px solid #e8e4de; border-radius: 50%; }
.cart b { position: absolute; right: -.35em; top: -.35em; min-width: 1.6em; height: 1.6em; display: grid; place-items: center; font-size: .5em; font-weight: 700; background: #ffdf2c; border-radius: 9em; }
.prod { width: 100%; height: 100%; display: flex !important; align-items: center; gap: .6em; }
.prod-img { position: relative; flex: none; width: 45%; align-self: stretch; }
.prod-t { position: absolute; inset: 12% 0 0; width: 100%; height: 88%; object-fit: contain; }
.rcpt { position: absolute; left: 41%; bottom: 80%; width: 26%; height: 19%; background: repeating-linear-gradient(#0000 0 .28em, #cfc8b9 .28em .36em) 50% .4em / 62% 100% no-repeat, #fffdf6; border: 1px solid #dcd5c7; border-bottom: 0; border-radius: .12em .12em 0 0; box-shadow: 0 .2em .6em #14110d24; transform-origin: bottom; skew: -4deg; }
.prod-info { flex: 1; display: grid !important; justify-items: start; gap: .55em; text-align: left; }
.prod-info .sk { width: 4.4em; height: .8em; background: #14110d; }
.line { width: 100%; display: flex !important; align-items: center; gap: .6em; padding: .35em .7em .35em .35em; font-size: .64em; font-weight: 600; text-align: left; background: #f8f6f2; border-radius: 1em; }
.line-t { flex: none; width: 2.6em; height: 2.6em; padding: .15em; object-fit: contain; background: #fff; border-radius: .7em; }
.line .sk { margin-left: auto; background: #14110d; }
.tot { width: 100%; display: flex !important; justify-content: space-between; padding: .5em .5em 0; border-top: 1px dashed #dcd5c7; }
.tot .sk + .sk { width: 4em; background: #14110d; }
.route { position: relative; width: 100%; max-width: 15em; height: 2.6em; display: flex !important; align-items: center; justify-content: space-between; margin: .5em 0 .7em; }
.route-line { position: absolute; left: 1.2em; right: 1.2em; top: 50%; height: .3em; margin-top: -.15em; overflow: hidden; border-radius: 9em; background: #e6e0d7; }
.route-line i { height: 100%; background: #315f54; transform-origin: left; }
.route > .route-n { position: relative; z-index: 1; width: 2.4em; height: 2.4em; display: grid; place-items: center; color: #fff; background: #315f54; border-radius: 50%; }
.route > .route-end { color: #14110d; background: #ffdf2c; box-shadow: 0 0 0 .32em #ffdf2c59; }
.route > .route-van { position: absolute; z-index: 2; left: 0; top: 50%; width: 2.4em; height: 2.4em; margin-top: -1.2em; display: none; place-items: center; color: #ffdf2c; background: #14110d; border-radius: 50%; }