.journey-art.journey-scene { height:auto; min-height:350px; padding:22px; background:#000; border:1px solid #ffffff25; color:#fff; }
.journey-scene small { display:block; font-size:9px; letter-spacing:.08em; color:#aaa; }
.journey-scene h4 { font-size:25px; line-height:1.15; letter-spacing:-.035em; margin:18px 0 24px; }
.journey-scene p { font-size:12px; line-height:1.6; color:#bdbdbd; }
.document-row { display:flex; align-items:center; gap:12px; padding:17px 0; border-bottom:1px solid #ffffff25; }
.document-row > b { display:grid; place-items:center; width:40px; height:46px; flex-shrink:0; border:1px solid color-mix(in srgb, var(--dibzz-stage-accent) 45.88%, transparent); border-radius:7px; color:var(--dibzz-stage-accent); font-size:12px; }
.document-row > span { flex:1; font-size:15px; font-weight:700; }
.document-row small { margin-top:5px; font-size:9px; letter-spacing:0; font-weight:400; }
.document-row em { font-size:10px; font-style:normal; color:var(--dibzz-stage-accent); }
.scene-phone { position:relative; width:220px; height:340px; border:5px solid #333; border-radius:30px; overflow:hidden; margin:auto; background:#000; }
.scene-phone video { width:100%; height:100%; object-fit:cover; }
.scene-live,.packing-status { position:absolute; top:15px; left:13px; background:#000d; color:var(--dibzz-stage-accent); padding:7px 10px; border-radius:20px; font-size:10px; }
.scene-chat { position:absolute; bottom:70px; left:10px; right:10px; background:#000c; border-radius:12px; padding:10px; font-size:10px; }
.scene-product { position:absolute; bottom:0; left:0; right:0; padding:12px; display:flex; align-items:center; justify-content:space-between; background:#000e; font-size:10px; }
.scene-product b { display:block; margin-top:4px; }.scene-product strong { padding:10px; background:var(--dibzz-stage-accent); color:#000; border-radius:20px; }
.journey-scene .scene-caption { text-align:center; letter-spacing:0; margin-top:14px; line-height:1.5; }
.checkout-scene { text-align:center; }.checkout-content { min-height:300px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.journey-scene .checkout-content img { width:96px; height:100px; object-fit:cover; border-radius:15px; margin:15px auto 0; }
.checkout-content h4 { margin:15px 0 8px; }.checkout-content button { cursor:pointer; width:100%; padding:14px; border:0; border-radius:30px; background:var(--dibzz-stage-accent); color:#000; font-family:inherit; font-weight:700; font-size:14px; margin-top:14px; }
.checkout-content button:focus-visible { outline:2px solid #fff; outline-offset:4px; }
.checkout-scene .demo-safety,.checkout-scene .pin-caption { font-size:10px; }.masked-pin { padding:20px; font-size:28px; letter-spacing:7px; color:var(--dibzz-stage-accent); }
.payment-lock { color:var(--dibzz-stage-accent); font-size:48px; }
.packing-scene { height:310px; position:relative; overflow:hidden; border-radius:15px; }.packing-scene > img { width:100%; height:100%; object-fit:cover; }
.address-label { position:absolute; bottom:18px; right:12px; width:210px; padding:15px; background:#fff; color:#000; box-shadow:0 8px 25px #0008; transform:rotate(-5deg); animation:label-place 6s ease-in-out infinite; }
.address-label small { color:#555; font-size:7px; }.address-label b { display:block; font-size:10px; margin:8px 0; }.address-label span { font-size:9px; display:block; }.address-label strong { font-size:8px; display:block; margin-top:8px; }
.label-barcode { height:20px; margin-top:12px; background:repeating-linear-gradient(90deg,#000 0 2px,#fff 2px 4px,#000 4px 5px,#fff 5px 8px); }
.support-message { padding:14px; border:1px solid #ffffff30; border-radius:16px 16px 16px 3px; font-size:13px; margin:13px 24px 13px 0; line-height:1.5; }.support-message small { margin-top:8px; font-size:8px; }
.agent-message { margin:13px 0 13px 24px; border-color:color-mix(in srgb, var(--dibzz-stage-accent) 40.00%, transparent); border-radius:16px 16px 3px 16px; }.agent-message small { color:var(--dibzz-stage-accent); }
.support-topics { display:flex; flex-wrap:wrap; gap:7px; margin-top:20px; }.support-topics span { font-size:10px; padding:7px 10px; border:1px solid #ffffff30; border-radius:20px; }
@keyframes label-place { 0%,15% { opacity:0; transform:translateY(-35px) rotate(3deg); } 30%,85% { opacity:1; transform:translateY(0) rotate(-5deg); } 100% { opacity:0; transform:translateY(0) rotate(-5deg); } }
@media(max-width:420px) { .journey-art.journey-scene { padding:14px; }.document-row { gap:7px; }.document-row em { font-size:8px; }.document-row > span { font-size:13px; }.scene-phone { width:195px; } }
@media(prefers-reduced-motion:reduce) { .address-label { animation:none; } }

/* One visual language across the five connected scenes. */
.journey-art.journey-scene { padding:28px; border:0; border-top:1px solid #ffffff24; border-radius:0 0 22px 22px; margin:0; min-height:390px; }
.document-scene { padding:4px; }
.document-row { position:relative; border:1px solid #ffffff30; padding:17px 13px; margin:12px 0; border-radius:14px; background:#000; box-shadow:0 8px 20px #000; }
.document-row:nth-of-type(2) { margin-left:12px; }
.document-row:nth-of-type(3) { margin-left:24px; }
.document-row > b { border:0; width:32px; height:40px; }
.document-row svg { width:30px; height:38px; }
.document-row em { font-size:0; width:23px; height:23px; border-radius:50%; background:var(--dibzz-stage-accent); color:#000; display:grid; place-items:center; }
.document-row em::after { content:'✓'; font-size:13px; }
.document-scene > p { display:none; }
.scene-receipt { display:flex; align-items:center; gap:12px; padding:18px 0 0; }
.scene-receipt > span { color:var(--dibzz-stage-accent); font-size:27px; }.scene-receipt b { font-size:13px; }.scene-receipt small { margin-top:4px; font-size:9px; letter-spacing:0; }.scene-receipt > strong { margin-left:auto; color:var(--dibzz-stage-accent); }
.scene-heading { margin-bottom:22px; text-align:center; }.scene-heading span { display:block; font-size:9px; letter-spacing:.14em; color:var(--dibzz-stage-accent); }.scene-heading b { display:block; font-size:23px; letter-spacing:-.04em; margin-top:7px; }
.scene-phone { width:240px; height:375px; border:6px solid #242424; outline:1px solid #ffffff66; border-radius:34px; box-shadow:0 20px 40px #000; }
.scene-phone::after { content:''; position:absolute; top:7px; left:50%; transform:translateX(-50%); width:64px; height:13px; border-radius:20px; background:#000; }
.scene-live { top:28px; }
.scene-chat { bottom:83px; padding:13px; backdrop-filter:blur(10px); border:1px solid #ffffff44; }
.scene-product { padding:16px 12px; }.scene-product strong { font-size:12px; }
.checkout-scene { max-width:300px; margin:auto; padding:20px; border:1px solid #ffffff40; border-radius:26px; }
.journey-scene .checkout-content img { width:100%; height:150px; border-radius:16px; object-position:center 45%; }
.checkout-content h4 { font-size:23px; }.checkout-content button { box-shadow:0 5px 0 var(--dibzz-action-hover); transition:transform .2s; }.checkout-content button:active { transform:translateY(3px); box-shadow:none; }
.packing-scene { height:360px; border-radius:18px; }.packing-scene > img { object-position:45% center; }
.address-label { width:175px; bottom:15px; right:12px; padding:12px; animation:none; transform:rotate(-3deg); border-radius:3px; }
.packing-status { font-size:9px; border:1px solid color-mix(in srgb, var(--dibzz-stage-accent) 40.00%, transparent); }
.support-identity { display:flex; gap:15px; align-items:center; border-bottom:1px solid #ffffff30; padding-bottom:20px; margin-bottom:22px; }
.support-identity svg { width:43px; height:43px; color:var(--dibzz-stage-accent); flex-shrink:0; }.support-identity b { display:block; font-size:23px; letter-spacing:-.04em; }.support-identity span { display:block; font-size:11px; color:#aaa; margin-top:4px; }
.support-scene h4 { font-size:24px; }.agent-message { background:var(--dibzz-stage-accent); color:#000; border:0; }.agent-message small { color:#444; }
.support-topics span { font-size:10px; }.support-scene > p { font-size:10px; text-align:center; margin-top:22px; }
@media(max-width:420px) {
 .journey-art.journey-scene { padding:18px 12px; }.scene-phone { width:min(220px,100%); height:350px; }
 .document-row { padding:13px 8px; }.document-row:nth-of-type(2) { margin-left:5px; }.document-row:nth-of-type(3) { margin-left:10px; }
 .checkout-scene { padding:16px; }.packing-scene { height:320px; }
}