/* Heron: två realistiska telefoner. Personalens app till vänster, gästens Wallet-kort till höger. */

/* Scenen ritas i 540 × 680 och skalas med --s, så att allt behåller sina proportioner */
.hero-visual { --s: 1; flex: none; width: calc(540px * var(--s)); height: calc(680px * var(--s)); margin: 0 auto; }
.stage { position: relative; width: 540px; height: 680px; transform: scale(var(--s)); transform-origin: top left; }
@media (max-width: 1140px) { .hero-visual { --s: .84; } }

/* På dator ska rubrik, knappar och telefoner synas direkt, utan scroll. Därför styr även fönstrets höjd */
@media (min-width: 601px) {
  .hero { padding-top: 24px; padding-bottom: 72px; justify-content: space-between; }
  .hero-text { max-width: 580px; }
  .hero h1 { font-size: clamp(44px, 5vw, 64px); }
}
@media (min-width: 601px) and (max-height: 960px) { .hero-visual { --s: .8; } }
@media (min-width: 601px) and (max-height: 840px) {
  .hero-visual { --s: .7; }
  .hero { padding-top: 8px; }
  .hero-text { gap: 18px; }
  .hero h1 { font-size: clamp(40px, 4.4vw, 56px); }
  .hero .lead { font-size: 17px; line-height: 25px; }
}
@media (min-width: 601px) and (max-height: 700px) { .hero-visual { --s: .62; } }
@media (min-width: 601px) and (max-height: 600px) {
  .hero-visual { --s: .64; }
  .hero h1 { font-size: clamp(36px, 4vw, 50px); }
  .site-header { padding-top: 12px; padding-bottom: 12px; }
}

@media (max-width: 600px) { .hero-visual { --s: .62; } }
@media (max-width: 360px) { .hero-visual { --s: .55; } }

/* Bakgrund: varmt sken och skugga under telefonerna */
.stage-glow { position: absolute; left: 50px; top: 40px; width: 440px; height: 440px; border-radius: 999px; background: radial-gradient(circle at 50% 45%, #ffd27a 0%, #ffc145 38%, rgba(255, 193, 69, .25) 62%, rgba(255, 193, 69, 0) 72%); }
.stage-floor { position: absolute; left: 30px; right: 30px; bottom: 6px; height: 70px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(43, 24, 16, .28) 0%, rgba(43, 24, 16, 0) 70%); }

/* Telefonen: metallram, sidoknappar, svart kant, skärm med reflex */
.device { position: absolute; width: 252px; height: 524px; padding: 5px; border-radius: 48px; background: linear-gradient(140deg, #f4ebe1 0%, #cdbba8 30%, #f7efe6 50%, #b9a591 75%, #e9dccd 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), inset 0 -2px 4px rgba(0, 0, 0, .15), 0 50px 70px -40px rgba(43, 24, 16, .6), 0 24px 40px -24px rgba(43, 24, 16, .45); }
.device::before, .device::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: inherit; }
.device::before { right: -3px; top: 150px; height: 66px; }
.device::after { left: -3px; top: 124px; height: 42px; box-shadow: 0 56px 0 #cdbba8; }
.device-staff { left: 18px; top: 40px; background: linear-gradient(140deg, #ff9a6e 0%, #e2452b 35%, #ff8357 52%, #c2361d 78%, #f0653d 100%); }
.device-staff::after { box-shadow: 0 56px 0 #e2452b; }
.device-wallet { left: 252px; top: 78px; z-index: 2; }
.bezel { height: 100%; padding: 7px; border-radius: 43px; background: #120b08; }
.screen { position: relative; height: 100%; border-radius: 36px; overflow: hidden; display: flex; flex-direction: column; color: var(--ink); }
.screen::after { content: ""; position: absolute; inset: 0; z-index: 8; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, 0) 30%); }
.island { position: absolute; z-index: 9; top: 9px; left: 50%; width: 78px; height: 22px; margin-left: -39px; border-radius: 999px; background: #000; }
.sbar { flex: none; height: 38px; display: flex; justify-content: space-between; align-items: center; padding: 2px 20px 0 26px; font-size: 11px; font-weight: 700; }
.sbar-icons { display: flex; align-items: flex-end; gap: 2px; }
.sbar-icons i { width: 3px; border-radius: 1px; background: currentColor; }
.sbar-icons i:nth-child(1) { height: 4px; }
.sbar-icons i:nth-child(2) { height: 6px; }
.sbar-icons i:nth-child(3) { height: 8px; }
.sbar-icons b { width: 18px; height: 9px; margin-left: 4px; border-radius: 3px; border: 1.5px solid currentColor; background: linear-gradient(90deg, currentColor 70%, transparent 70%); background-clip: content-box; padding: 1px; }

/* Personalens app */
.staff { background: #faf6f1; padding: 0 12px; gap: 9px; }
.staff-head { display: flex; align-items: center; gap: 8px; }
.staff-head img { width: 30px; height: 30px; }
.staff-head strong { display: block; font-size: 12px; line-height: 15px; }
.staff-head span { display: block; font-size: 9.5px; line-height: 12px; color: var(--ink-muted); }
.staff-head em { margin-left: auto; font-style: normal; font-size: 9px; font-weight: 700; color: var(--tomato-deep); background: #fde4d9; padding: 3px 8px; border-radius: 999px; }
.staff-hello { position: relative; flex: none; height: 92px; border-radius: 16px; overflow: hidden; }
.staff-hello .latte { position: absolute; inset: 0; width: 100%; height: 100%; }
.staff-hello::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(30, 16, 10, .8), rgba(30, 16, 10, 0) 65%); }
.staff-hello div { position: absolute; z-index: 1; left: 12px; bottom: 9px; color: var(--cream); }
.staff-hello strong { display: block; font-family: var(--display); font-size: 17px; line-height: 20px; }
.staff-hello span { display: block; font-size: 9.5px; line-height: 12px; opacity: .9; }
.staff-scan { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--tomato); color: var(--cream); box-shadow: 0 8px 16px -8px rgba(194, 54, 29, .8); }
.scan-ico { width: 30px; height: 30px; flex: none; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .2); }
.staff-scan strong { display: block; font-size: 12px; line-height: 15px; }
.staff-scan div span { display: block; font-size: 9.5px; line-height: 12px; opacity: .85; }
.staff-scan .scan-arrow { margin-left: auto; opacity: 1; }
.staff-label { font-size: 10.5px; font-weight: 700; }
.staff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.staff-grid div { display: flex; flex-direction: column; gap: 1px; padding: 9px; border-radius: 12px; background: #fff; box-shadow: 0 1px 0 #efe3d6, 0 6px 14px -10px rgba(43, 24, 16, .3); }
.t-ico { width: 24px; height: 24px; margin-bottom: 4px; border-radius: 7px; display: flex; align-items: center; justify-content: center; background: #fde4d9; color: var(--tomato-deep); }
.staff-grid strong { font-size: 10.5px; line-height: 13px; }
.staff-grid span:not(.t-ico) { font-size: 8.5px; line-height: 11px; color: var(--ink-muted); }
.staff-tabs { margin: auto -12px 0; display: grid; grid-template-columns: repeat(4, 1fr); padding: 7px 4px 16px; background: #fff; border-top: 1px solid #eee2d5; }
.staff-tabs span { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 8.5px; font-weight: 700; color: var(--ink-muted); }
.staff-tabs .on { color: var(--tomato-deep); }

/* Gästens Wallet */
.wallet { background: #f1ede8; }
.wallet-bar { display: flex; justify-content: space-between; padding: 2px 14px 0; }
.w-btn { width: 28px; height: 28px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: #e2dbd3; }
.w-right { display: flex; gap: 6px; }
.notif { position: absolute; z-index: 7; top: 40px; left: 8px; right: 8px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 16px; background: rgba(255, 253, 249, .95); box-shadow: 0 10px 24px -10px rgba(43, 24, 16, .45); font-size: 10.5px; line-height: 13px; }
.notif img { width: 26px; height: 26px; flex: none; }
.notif strong { display: block; font-size: 11px; }
.notif span { display: block; color: var(--ink-muted); }
.notif em { align-self: flex-start; margin-left: auto; font-style: normal; font-size: 9px; color: var(--ink-muted); }
.wpass { position: relative; margin: 10px 12px 0; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: var(--pass); transition: background-color .35s ease; color: var(--cream); box-shadow: 0 14px 26px -14px rgba(43, 24, 16, .6); }
.wpass-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.wpass-head img { width: 26px; height: 26px; }
.wpass-head strong { font-family: var(--display); font-size: 14px; }
.wpass-head span { margin-left: auto; font-size: 8.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.wpass-strip { position: relative; height: 96px; }
.wpass-strip .latte { position: absolute; inset: 0; width: 100%; height: 100%; }
.wpass-strip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(30, 16, 10, .1), rgba(30, 16, 10, .55)); }
.wpass-count { position: absolute; z-index: 1; right: 12px; bottom: 8px; text-align: right; }
.wpass-count strong { display: block; font-family: var(--display); font-weight: 800; font-size: 42px; line-height: 40px; }
.wpass-count > span { display: block; font-size: 9.5px; font-weight: 700; opacity: .9; }
.wpass .dots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; justify-items: center; padding: 12px 12px 4px; }
.wpass .dot { width: 24px; height: 24px; border-radius: 999px; background: var(--cream); }
.wpass .dot.empty { background: none; border: 2px dashed var(--cream); }
.wpass .dot.reward { background: var(--sun); display: flex; align-items: center; justify-content: center; }
.wpass-fields { display: flex; justify-content: space-between; padding: 6px 12px 0; }
.wpass-fields div { display: flex; flex-direction: column; }
.wpass-fields div:last-child { align-items: flex-end; }
.wpass-fields span { font-size: 8px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.wpass-fields strong { font-size: 11.5px; }
.wpass-qr { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 10px 0 14px; padding: 8px 8px 4px; border-radius: 10px; background: #fff; }
.wpass-qr span { font-size: 9px; font-weight: 700; color: var(--ink-muted); }

/* Detaljer runt telefonerna */
.coin { position: absolute; z-index: 4; left: 446px; top: 488px; width: 92px; height: 92px; transform: rotate(-12deg); filter: drop-shadow(0 5px 0 #a92e18) drop-shadow(0 18px 16px rgba(43, 24, 16, .35)); }
.chip-plus { left: 430px; top: 150px; }

/* Apple Wallet och Google Wallet bredvid varandra, med en pil upp mot gästens telefon */
.wallet-badges { position: absolute; z-index: 3; left: 36px; top: 610px; display: flex; gap: 8px; animation: bob 5s ease-in-out infinite alternate; }
.wallet-badges .float-chip { position: relative; animation: none; padding: 7px 14px 7px 8px; gap: 8px; }
.wl { flex: none; border-radius: 6px; }
.badge-arrow { position: absolute; left: calc(100% + 2px); bottom: 14px; width: 80px; height: 64px; }

/* Bläddring mellan exemplen (hero.js) */
.hero-visual { position: relative; }
.stage { --pass: #c2361d; touch-action: pan-y; }
.stage[data-variant="salong"] { --pass: #1f5c47; }
.stage[data-variant="bageri"] { --pass: #8a4a1f; }
.art { opacity: 0; transition: opacity .35s ease; }
.stage[data-variant="cafe"] [data-art="cafe"], .stage[data-variant="salong"] [data-art="salong"], .stage[data-variant="bageri"] [data-art="bageri"] { opacity: 1; }
.wpass-head, .wpass-strip .wpass-count, .wpass .dots, .wpass-fields, .staff-hello div, .staff-head div { transition: opacity .26s ease, transform .26s ease; }
.switching .wpass-head, .switching .wpass-strip .wpass-count, .switching .wpass .dots, .switching .wpass-fields, .switching .staff-hello div, .switching .staff-head div { opacity: 0; transform: translateY(6px); }
.hv-controls { position: absolute; z-index: 5; inset: 0; pointer-events: none; }
.hv-controls > * { pointer-events: auto; }
.hv-arrow { position: absolute; top: calc(330px * var(--s) - 22px); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 999px; background: var(--paper); color: var(--ink); cursor: pointer; box-shadow: 0 10px 22px -10px rgba(43, 24, 16, .55); transition: background-color .2s ease, color .2s ease, transform .2s ease; }
.hv-arrow[data-prev] { left: -22px; }
.hv-arrow[data-next] { right: -22px; }
.hv-arrow:hover { background: var(--ink); color: var(--cream); transform: scale(1.06); }
.hv-dots { position: absolute; left: calc(378px * var(--s)); top: calc(78px * var(--s) - 36px); transform: translateX(-50%); display: flex; }
@media (max-width: 600px) {
  .hv-arrow { width: 40px; height: 40px; top: calc(330px * var(--s) - 20px); }
  .hv-arrow[data-prev] { left: -16px; }
  .hv-arrow[data-next] { right: -16px; }
}
.hv-dots button { width: 28px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.hv-dots button::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--line-strong); transition: width .25s ease, background-color .25s ease; }
.hv-dots button[aria-current="true"]::before { width: 20px; background: var(--tomato-deep); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }