/* Så funkar det: tre små scener i samma stil som heron */

.step-art { position: relative; height: 240px; margin-bottom: 8px; border-radius: 24px; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(120% 90% at 50% 100%, #ffe2a6 0%, #fff1d9 45%, var(--cream) 80%); }
.art-add { background: radial-gradient(120% 90% at 50% 100%, #fbd0bd 0%, #fde6da 45%, var(--cream) 80%); }
.art-camera { background: radial-gradient(120% 90% at 50% 100%, #e7d6c3 0%, #f3e8dc 45%, var(--cream) 80%); }
.step-art .step-num { position: absolute; z-index: 3; top: 14px; left: 14px; width: 44px; height: 44px; font-size: 22px; box-shadow: 0 6px 14px -8px rgba(43, 24, 16, .5); }

/* Telefon som sticker upp ur bildens nederkant */
.mini-device { left: 50%; top: 34px; width: 172px; height: 300px; margin-left: -86px; padding: 4px; border-radius: 36px; }
.mini-device .bezel { padding: 5px; border-radius: 32px; }
.mini-device .screen { border-radius: 27px; }
.mini-device .island { top: 7px; width: 54px; height: 16px; margin-left: -27px; }
.mini-device::before { top: 96px; height: 46px; }
.mini-device::after { top: 80px; height: 28px; box-shadow: 0 38px 0 #cdbba8; }
.mini-device.device-staff::after { box-shadow: 0 38px 0 #e2452b; }

/* 1. Uppsättning: QR-skylt, kortet och färgval */
.tent { position: absolute; left: 22px; bottom: 26px; width: 118px; height: 166px; perspective: 400px; }
.tent-face { height: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-radius: 12px 12px 6px 6px; background: linear-gradient(160deg, #fffdf9 0%, #f3e8da 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 22px 26px -16px rgba(43, 24, 16, .55); transform: rotateX(8deg); transform-origin: bottom; }
.tent-face img { width: 22px; height: 22px; }
.tent-qr { padding: 4px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1.5px var(--tomato); }
.tent-face strong { font-family: var(--display); font-size: 12px; line-height: 14px; margin-top: 2px; }
.tent-face span:last-child { font-size: 8.5px; line-height: 10px; color: var(--ink-muted); }
.setup-card { position: absolute; right: 18px; top: 56px; width: 148px; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; background: var(--tomato-deep); color: var(--cream); box-shadow: 0 22px 30px -16px rgba(43, 24, 16, .6); transform: rotate(5deg); }
.sc-head { display: flex; align-items: center; gap: 6px; }
.sc-head img { width: 20px; height: 20px; }
.sc-head strong { font-family: var(--display); font-size: 13px; }
.sc-dots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.sc-dots i { width: 18px; height: 18px; border-radius: 999px; background: var(--cream); }
.sc-dots i.off { background: none; border: 1.5px dashed rgba(255, 247, 236, .8); }
.setup-card > span { font-size: 9px; font-weight: 700; opacity: .9; }
.swatches { position: absolute; right: 30px; bottom: 26px; display: flex; gap: 6px; padding: 7px 9px; border-radius: 999px; background: #fff; box-shadow: 0 10px 20px -12px rgba(43, 24, 16, .5); }
.swatches i { width: 16px; height: 16px; border-radius: 999px; }
.swatches i:first-child { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--ink); }
.sw1 { background: #c2361d; }
.sw2 { background: #2f7a5b; }
.sw3 { background: #2b1810; }
.sw4 { background: #ffc145; }

/* 2. Kunden lägger till kortet i Wallet */
.add-sheet { background: #f1ede8; padding: 26px 10px 0; gap: 10px; }
.sheet-top { display: flex; justify-content: space-between; align-items: center; font-size: 9px; color: var(--ink-muted); }
.sheet-top strong { font-size: 10px; color: var(--ink); }
.sheet-top .add-link { color: var(--tomato-deep); font-weight: 700; }
.sheet-pass { display: flex; flex-direction: column; gap: 10px; padding: 10px; border-radius: 12px; background: var(--tomato-deep); color: var(--cream); box-shadow: 0 12px 20px -12px rgba(43, 24, 16, .6); }
.sp-head { display: flex; align-items: center; gap: 6px; }
.sp-head img { width: 18px; height: 18px; }
.sp-head strong { font-family: var(--display); font-size: 12px; }
.sp-head span { margin-left: auto; font-size: 9px; font-weight: 700; }
.sp-dots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.sp-dots i { width: 16px; height: 16px; border-radius: 999px; border: 1.5px dashed rgba(255, 247, 236, .85); }
.sheet-btn { padding: 9px; border-radius: 10px; background: var(--ink); color: var(--cream); font-size: 10px; font-weight: 700; text-align: center; }
.finger { position: absolute; z-index: 2; left: 50%; top: 172px; width: 38px; height: 38px; margin-left: 10px; border-radius: 999px; background: rgba(255, 253, 249, .55); border: 2px solid rgba(255, 255, 255, .95); box-shadow: 0 8px 18px -8px rgba(43, 24, 16, .5); }

/* 3. Personalen skannar kundens kort */
.cam { background: #1b1210; }
.cam-view { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 40%, #4a3328 0%, #1b1210 75%); }
.cam-pass { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 14px 12px; border-radius: 12px; background: var(--tomato-deep); color: var(--cream); font-family: var(--display); font-size: 11px; font-weight: 800; transform: rotate(-6deg); filter: saturate(.9) brightness(.92); }
.cam-pass svg { padding: 4px; border-radius: 6px; background: #fff; box-sizing: content-box; }
.cam-corners { position: absolute; left: 50%; top: 50%; width: 112px; height: 112px; margin: -64px 0 0 -56px; background:
  linear-gradient(var(--sun), var(--sun)) top left / 22px 3px no-repeat, linear-gradient(var(--sun), var(--sun)) top left / 3px 22px no-repeat,
  linear-gradient(var(--sun), var(--sun)) top right / 22px 3px no-repeat, linear-gradient(var(--sun), var(--sun)) top right / 3px 22px no-repeat,
  linear-gradient(var(--sun), var(--sun)) bottom left / 22px 3px no-repeat, linear-gradient(var(--sun), var(--sun)) bottom left / 3px 22px no-repeat,
  linear-gradient(var(--sun), var(--sun)) bottom right / 22px 3px no-repeat, linear-gradient(var(--sun), var(--sun)) bottom right / 3px 22px no-repeat; }
.cam-line { position: absolute; left: 50%; top: 50%; width: 104px; height: 2px; margin: -60px 0 0 -52px; border-radius: 2px; background: var(--tomato); box-shadow: 0 0 10px 2px rgba(226, 69, 43, .7); }
.cam-toast { position: absolute; z-index: 2; left: 10px; right: 10px; top: 128px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: rgba(255, 253, 249, .96); box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .6); }
.cam-toast .ok { width: 24px; height: 24px; flex: none; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--leaf); color: #fff; }
.cam-toast strong { display: block; font-family: var(--display); font-size: 12px; line-height: 14px; }
.cam-toast span:not(.ok) { display: block; font-size: 9px; line-height: 11px; color: var(--ink-muted); }

/* Rörelse i scenerna */
.setup-card { animation: card-float 5s ease-in-out infinite alternate; }
.swatches i:first-child { animation: swatch 4s ease-in-out infinite; }
.sheet-pass { animation: pass-drop 3.6s cubic-bezier(.2, .8, .2, 1) infinite; }
.finger { animation: finger-tap 3.6s ease-in-out infinite; }
.sheet-btn { animation: btn-press 3.6s ease-in-out infinite; }
.cam-line { animation: cam-scan 1.8s ease-in-out infinite alternate; }
.cam-toast { animation: toast-in 3.6s cubic-bezier(.2, .8, .2, 1.2) infinite; }
@keyframes card-float { from { transform: rotate(5deg) translateY(0); } to { transform: rotate(2deg) translateY(-8px); } }
@keyframes swatch { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes pass-drop { 0%, 8% { opacity: 0; transform: translateY(-24px) scale(.96); } 26%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes finger-tap { 0%, 30% { opacity: 0; transform: translate(14px, 14px); } 42% { opacity: 1; transform: none; } 50% { transform: scale(.85); } 58%, 80% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; } }
@keyframes btn-press { 0%, 46% { background: var(--ink); } 50%, 62% { background: var(--tomato-deep); } 70%, 100% { background: var(--ink); } }
@keyframes cam-scan { from { transform: translateY(0); } to { transform: translateY(116px); } }
@keyframes toast-in { 0%, 45% { opacity: 0; transform: translateY(14px) scale(.95); } 55%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }

/* Demofilmen: knappen under ingressen och fönstret som öppnas */
.demo-btn { align-self: flex-start; gap: 10px; margin-top: 8px; padding-left: 10px; }
.demo-btn .play { width: 32px; height: 32px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--tomato-deep); color: var(--cream); padding-left: 2px; }
.demo-btn:hover .play { background: var(--cream); color: var(--ink); }
.demo-len { font-size: 13px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--sun); color: var(--ink); }
.demo { width: min(960px, 92vw); max-width: none; padding: 0; border: 0; background: transparent; overflow: visible; }
.demo::backdrop { background: rgba(20, 10, 6, .78); backdrop-filter: blur(4px); }
.demo video { display: block; width: 100%; max-height: 84vh; border-radius: 20px; background: #000; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); }
.demo-close { position: absolute; top: -52px; right: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: var(--paper); color: var(--ink); cursor: pointer; }
.demo-close:hover { background: var(--tomato-deep); color: var(--cream); }
@media (max-width: 600px) and (orientation: portrait) {
  .demo { width: auto; }
  .demo video { width: auto; max-width: 92vw; max-height: 78vh; }
}
@media (max-width: 600px) { .demo-more { display: none; } }